Allow for transparency overrides, close #53

phibr0 · Mar 31, 2022 · c1bd07e · c1bd07e
1 parent 804b30b
commit c1bd07e
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git 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.)
+- 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
@@ -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
@@ -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
@@ -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
@@ -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) {