From c1bd07e6c790887c4a01bd57bca268f8d7fe36e6 Mon Sep 17 00:00:00 2001
From: phibr0 <bronzel.phillip@gmail.com>
Date: Thu, 31 Mar 2022 18:16:23 +0200
Subject: [PATCH] Allow for transparency overrides, close #53

---
 docusaurus/docs/Modifiers.mdx | 9 ++++++++-
 manifest.json                 | 2 +-
 src/chartRenderer.ts          | 4 ++--
 src/ui/settingsTab.ts         | 2 +-
 src/util.ts                   | 5 +++--
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/docusaurus/docs/Modifiers.mdx b/docusaurus/docs/Modifiers.mdx
index e94d69d..fa018ab 100644
--- a/docusaurus/docs/Modifiers.mdx
+++ b/docusaurus/docs/Modifiers.mdx
@@ -221,4 +221,11 @@ Determines whether the axis (`Display`) or the ticks of the axis (`TickDisplay`)
 
 If you use e.g. dates on your X Axis, you can set the `time` modifier to automatically format them. 
 
-- Expected: `string` (`day`, `week`, `month`, `year`, etc.)
\ No newline at end of file
+- Expected: `string` (`day`, `week`, `month`, `year`, etc.)
+
+## `transparency` Modifier
+
+You can override the inner color of your Chart's elements using the `transparency` Modifier.
+
+- Expected: `float` (`0.0` - `1.0`)
+- Default: `0.25`
diff --git a/manifest.json b/manifest.json
index c00a15d..3406113 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
     "id": "obsidian-charts",
     "name": "Obsidian Charts",
-    "version": "3.5.1",
+    "version": "3.6.0",
     "minAppVersion": "0.12.7",
     "description": "This Plugin lets you create Charts within Obsidian",
     "author": "phibr0",
diff --git a/src/chartRenderer.ts b/src/chartRenderer.ts
index e7c836e..baf50c4 100644
--- a/src/chartRenderer.ts
+++ b/src/chartRenderer.ts
@@ -38,7 +38,7 @@ export default class Renderer {
                 datasets.push({
                     label: yaml.series[i].title ?? "",
                     data: yaml.series[i].data,
-                    backgroundColor: yaml.labelColors ? colors.length ? generateInnerColors(colors) : generateInnerColors(this.plugin.settings.colors) : colors.length ? generateInnerColors(colors)[i] : generateInnerColors(this.plugin.settings.colors)[i],
+                    backgroundColor: yaml.labelColors ? colors.length ? generateInnerColors(colors, yaml.transparency) : generateInnerColors(this.plugin.settings.colors, yaml.transparency) : colors.length ? generateInnerColors(colors, yaml.transparency)[i] : generateInnerColors(this.plugin.settings.colors, yaml.transparency)[i],
                     borderColor: yaml.labelColors ? colors.length ? colors : this.plugin.settings.colors : colors.length ? colors[i] : this.plugin.settings.colors[i],
                     borderWidth: 1,
                     fill: yaml.fill ?? false,
@@ -261,7 +261,7 @@ class ChartRenderChild extends MarkdownRenderChild {
                     x.datasets.push({
                         label: tableData.dataFields[i].dataTitle ?? "",
                         data: tableData.dataFields[i].data,
-                        backgroundColor: this.data.labelColors ? colors.length ? generateInnerColors(colors) : generateInnerColors(this.renderer.plugin.settings.colors) : colors.length ? generateInnerColors(colors)[i] : generateInnerColors(this.renderer.plugin.settings.colors)[i],
+                        backgroundColor: this.data.labelColors ? colors.length ? generateInnerColors(colors, this.data.transparency) : generateInnerColors(this.renderer.plugin.settings.colors, this.data.transparency) : colors.length ? generateInnerColors(colors, this.data.transparency)[i] : generateInnerColors(this.renderer.plugin.settings.colors, this.data.transparency)[i],
                         borderColor: this.data.labelColors ? colors.length ? colors : this.renderer.plugin.settings.colors : colors.length ? colors[i] : this.renderer.plugin.settings.colors[i],
                         borderWidth: 1,
                         fill: this.data.fill ?? false,
diff --git a/src/ui/settingsTab.ts b/src/ui/settingsTab.ts
index 5cf9f23..04809c9 100644
--- a/src/ui/settingsTab.ts
+++ b/src/ui/settingsTab.ts
@@ -65,7 +65,7 @@ export class ChartSettingTab extends PluginSettingTab {
 				await plugin.saveSettings();
 				this.display();
 			})
-		})
+		});
 
 		if (!plugin.settings.themeable) {
 			plugin.settings.colors.forEach((color, idx) => {
diff --git a/src/util.ts b/src/util.ts
index 113e15e..04c4015 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -3,8 +3,9 @@ import type { App, Editor, TFile } from "obsidian";
 import type { ChartPluginSettings } from "src/constants/settingsConstants";
 import type Renderer from "src/chartRenderer";
 
-export function generateInnerColors(colors: string[]) {
-    return colors.map((color: string) => chroma(color.trim()).alpha(0.25).hex());
+export function generateInnerColors(colors: string[], alpha = 0.25) {
+    if(typeof alpha != 'number') throw "Provided alpha value is not a number"
+    return colors.map((color: string) => chroma(color.trim()).alpha(alpha).hex());
 }
 
 export function renderError(error: any, el: HTMLElement) {