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) {