From 663814645bbad2e47df2d151cb982fff24a2a0f7 Mon Sep 17 00:00:00 2001 From: Phillip Bronzel Date: Fri, 26 Jan 2024 11:10:35 +0100 Subject: [PATCH] chore: rename plugin to "Charts", close #109 --- README.md | 8 +- docusaurus/docs/Chart Types/index.mdx | 2 +- docusaurus/docs/More Resources.md | 3 +- docusaurus/docs/index.mdx | 78 +++--- docusaurus/docs/installation.md | 11 +- docusaurus/docusaurus.config.js | 17 +- manifest.json | 4 +- package.json | 2 +- src/main.ts | 386 +++++++++++++++----------- src/ui/settingsTab.ts | 309 ++++++++++++--------- 10 files changed, 456 insertions(+), 364 deletions(-) diff --git a/README.md b/README.md index 3595bd2..b3e7211 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ # Obsidian-Charts [![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/phibr0/obsidian-charts)](https://github.com/phibr0/obsidian-charts/releases) [![Release Obsidian Plugin](https://github.com/phibr0/obsidian-charts/actions/workflows/release.yml/badge.svg)](https://github.com/phibr0/obsidian-charts/actions/workflows/release.yml) ![GitHub all releases](https://img.shields.io/github/downloads/phibr0/obsidian-charts/total) -This plugin lets you create interactive Charts in [Obsidian](https://www.obsidian.md). +This plugin lets you create interactive Charts in +[Obsidian](https://www.obsidian.md). **[Read the Documentation](https://charts.phib.ro/)** ## How to install -1. Go to **Community Plugins** in your [Obsidian](https://www.obsidian.md) Settings and **disable** Safe Mode -2. Click on **Browse** and search for "Obsidian Charts" +1. Go to **Community Plugins** in your [Obsidian](https://www.obsidian.md) + Settings and **disable** Safe Mode +2. Click on **Browse** and search for "Charts" 3. Click install 4. Toggle the Plugin on in the **Community Plugins** Tab diff --git a/docusaurus/docs/Chart Types/index.mdx b/docusaurus/docs/Chart Types/index.mdx index a0c352c..7ee1c95 100644 --- a/docusaurus/docs/Chart Types/index.mdx +++ b/docusaurus/docs/Chart Types/index.mdx @@ -4,7 +4,7 @@ sidebar_position: 4 # Types -Obsidian Charts provides a variety of different Charts. +Charts provides a variety of different Charts. - [Bar Chart](Bar) - [Line Chart](Line) diff --git a/docusaurus/docs/More Resources.md b/docusaurus/docs/More Resources.md index 9958ef2..311b4de 100644 --- a/docusaurus/docs/More Resources.md +++ b/docusaurus/docs/More Resources.md @@ -1,4 +1,5 @@ -Some people share their creations made with Obsidian Charts. Here is a list of some of them: +Some people share their creations made with Charts. Here is a list of some of +them: - [Mulfok's Periodic Note Templates](https://github.com/mulfok/periodic-note-templates) diff --git a/docusaurus/docs/index.mdx b/docusaurus/docs/index.mdx index 366a3ec..79b1e0d 100644 --- a/docusaurus/docs/index.mdx +++ b/docusaurus/docs/index.mdx @@ -4,61 +4,63 @@ sidebar_position: 1 # Getting started -[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/phibr0/obsidian-charts)](https://github.com/phibr0/obsidian-charts/releases) ![GitHub all releases](https://img.shields.io/github/downloads/phibr0/obsidian-charts/total) +[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/phibr0/obsidian-charts)](https://github.com/phibr0/obsidian-charts/releases) +![GitHub all releases](https://img.shields.io/github/downloads/phibr0/obsidian-charts/total) -Obsidian Charts let's you create interactive Charts inside [Obsidian](https://www.obsidian.md). +Charts let's you create interactive Charts inside +[Obsidian](https://www.obsidian.md). ## What this can do -import { Bar, Line } from "react-chartjs-2"; -import { Chart, registerables } from "chart.js"; +import { Bar, Line } from 'react-chartjs-2'; +import { Chart, registerables } from 'chart.js'; Chart.register(...registerables); You can create Charts like this one in your markdown notes. -
+
+ }, + }} + />
-**But how?** First [install the Obsidian Charts Plugin](/installation). +**But how?** First [install the Charts Plugin](/installation). :::info SUPPORTING diff --git a/docusaurus/docs/installation.md b/docusaurus/docs/installation.md index a20a288..f915d4b 100644 --- a/docusaurus/docs/installation.md +++ b/docusaurus/docs/installation.md @@ -9,15 +9,16 @@ sidebar_position: 2 1. Open settings > Community plugins 2. Disable Safe mode 3. Click Browse community plugins -4. Search for "Obsidian Charts" +4. Search for "Charts" 5. Install it 6. Activate it under installed plugins ## From GitHub (manual) -1. Download the [latest release](https://github.com/phibr0/obsidian-charts/releases/latest) -2. Move `manifest.json` and `main.js` to `/.obsidian/plugins/obsidian-charts` +1. Download the + [latest release](https://github.com/phibr0/obsidian-charts/releases/latest) +2. Move `manifest.json` and `main.js` to + `/.obsidian/plugins/obsidian-charts` 3. Reload Obsidian (CTRL + R) 4. Go to settings and disable safe mode -5. Enable `Obsidian Charts` - +5. Enable `Charts` diff --git a/docusaurus/docusaurus.config.js b/docusaurus/docusaurus.config.js index 0f6ca4c..b443d69 100644 --- a/docusaurus/docusaurus.config.js +++ b/docusaurus/docusaurus.config.js @@ -6,8 +6,9 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula'); /** @type {import('@docusaurus/types').Config} */ const config = { - title: 'Obsidian Charts', - tagline: 'Create editable, interactive and animated Charts in Obsidian via Chart.js ', + title: 'Charts', + tagline: + 'Create editable, interactive and animated Charts in Obsidian via Chart.js ', url: 'https://charts.phibr0.de', baseUrl: '/', onBrokenLinks: 'throw', @@ -43,7 +44,7 @@ const config = { type: 'doc', docId: 'index', position: 'left', - label: 'Obsidian Charts Docs', + label: 'Charts Docs', }, { href: 'https://github.com/phibr0/obsidian-charts', @@ -65,17 +66,17 @@ const config = { ], }, { - title: 'Contact', + title: 'Contact', items: [ { label: 'GitHub', - to: 'https://github.com/phibr0' + to: 'https://github.com/phibr0', }, { label: 'Support me', - to: 'https://buymeacoffe.com/phibr0' - } - ] + to: 'https://buymeacoffe.com/phibr0', + }, + ], }, { title: 'More', diff --git a/manifest.json b/manifest.json index e34538e..c656c74 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "obsidian-charts", - "name": "Obsidian Charts", - "version": "3.8.2", + "name": "Charts", + "version": "3.9.0", "minAppVersion": "0.12.7", "description": "This Plugin lets you create Charts within Obsidian", "author": "phibr0", diff --git a/package.json b/package.json index c896058..83caacb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-charts", - "version": "0.10.8", + "version": "3.9.0", "description": "This Plugin lets you create Charts within Obsidian", "main": "main.js", "scripts": { diff --git a/src/main.ts b/src/main.ts index d38f22b..60ae2ce 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,19 @@ -import { MarkdownView, Plugin, parseYaml, Menu, Editor, View, Notice, MarkdownPostProcessorContext } from 'obsidian'; +import { + MarkdownView, + Plugin, + parseYaml, + Menu, + Editor, + View, + Notice, + MarkdownPostProcessorContext, +} from 'obsidian'; import Renderer from './chartRenderer'; -import { ChartPluginSettings, DEFAULT_SETTINGS } from './constants/settingsConstants'; +import { + ChartPluginSettings, + DEFAULT_SETTINGS, +} from './constants/settingsConstants'; import { ChartSettingTab } from './ui/settingsTab'; import { CreationHelperModal } from './ui/creationHelperModal'; import { addIcons } from 'src/ui/icons'; @@ -9,169 +21,209 @@ import { chartFromTable } from 'src/chartFromTable'; import { renderError, saveImageToVaultAndPaste } from 'src/util'; export default class ChartPlugin extends Plugin { - settings: ChartPluginSettings; - renderer: Renderer; - - postprocessor = async (content: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => { - let data; - try { - data = await parseYaml(content.replace(/ /g, ' ')); - } catch (error) { - renderError(error, el); - return; - } - if(!data.id) { - if (!data || !data.type || !data.labels || !data.series) { - renderError("Missing type, labels or series", el) - return; - } - } - if (data.bestFit === true && data.type === "line") { - if (data.bestFitNumber != undefined) { - var x = data.series[Number(data.bestFitNumber)].data; - } else { - // Default to line 0 - var x = data.series[0].data; - } - - let y = data.labels; - let outX = 0; - let outY = 0; - let outX2 = 0; - let outXY = 0; - - for (let i = 0; i < x.length; ++i) { - outX = outX + x[i] - outY = outY + y[i] - outX2 = outX2 + (x[i] * x[i]) - outXY = outXY + (x[i] * y[i]) - } - let gradient = (x.length * outXY - (outY * outX)) / (x.length * outX2 - (outX * outX)) - let intercept = (outY - (gradient * outX)) / x.length - - // Form points from equation - let YVals = []; - for (let i = 0; i < y.length; ++i) { - YVals.push((y[i] - intercept) / gradient) - } - - if (data.bestFitTitle != undefined && data.bestFitTitle != "undefined") { - var title = String(data.bestFitTitle); - } else { - var title = "Line of Best Fit"; - } - // Create line - data.series.push({ - title: title, - data: YVals - }) - } - await this.renderer.renderFromYaml(data, el, ctx); - } - - async loadSettings() { - this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); - } - - async saveSettings() { - await this.saveData(this.settings); - } - - async onload() { - console.log('loading plugin: Obsidian Charts'); - - await this.loadSettings() - - addIcons(); - - this.renderer = new Renderer(this); - - //@ts-ignore - window.renderChart = this.renderer.renderRaw; - - this.addSettingTab(new ChartSettingTab(this.app, this)); - - this.addCommand({ - id: 'creation-helper', - name: 'Insert new Chart', - checkCallback: (checking: boolean) => { - let leaf = this.app.workspace.activeLeaf; - if (leaf.view instanceof MarkdownView) { - if (!checking) { - new CreationHelperModal(this.app, leaf.view, this.settings, this.renderer).open(); - } - return true; - } - return false; - } - }); - - this.addCommand({ - id: 'chart-from-table-column', - name: 'Create Chart from Table (Column oriented Layout)', - editorCheckCallback: (checking: boolean, editor: Editor, view: View) => { - let selection = editor.getSelection(); - if (view instanceof MarkdownView && selection.split('\n').length >= 3 && selection.split('|').length >= 2) { - if (!checking) { - chartFromTable(editor, 'columns'); - } - return true; - } - return false; - } - }); - - this.addCommand({ - id: 'chart-from-table-row', - name: 'Create Chart from Table (Row oriented Layout)', - editorCheckCallback: (checking: boolean, editor: Editor, view: View) => { - if (view instanceof MarkdownView && editor.getSelection().split('\n').length >= 3 && editor.getSelection().split('|').length >= 2) { - if (!checking) { - chartFromTable(editor, 'rows'); - } - return true; - } - return false; - } - }); - - this.addCommand({ - id: 'chart-to-svg', - name: 'Create Image from Chart', - editorCheckCallback: (checking: boolean, editor: Editor, view: View) => { - if (view instanceof MarkdownView && editor.getSelection().startsWith("```chart") && editor.getSelection().endsWith("```")) { - if (!checking) { - new Notice("Rendering Chart...") - saveImageToVaultAndPaste(editor, this.app, this.renderer, view.file, this.settings); - } - return true; - } - return false; - } - }); - - this.registerMarkdownCodeBlockProcessor('chart', this.postprocessor); - this.registerMarkdownCodeBlockProcessor('advanced-chart', async (data, el) => this.renderer.renderRaw(await JSON.parse(data), el)); - - // Remove this ignore when the obsidian package is updated on npm - // Editor mode - // @ts-ignore - this.registerEvent(this.app.workspace.on('editor-menu', - (menu: Menu, _: Editor, view: MarkdownView) => { - if (view && this.settings.contextMenu) { - menu.addItem((item) => { - item.setTitle("Insert Chart") - .setIcon("chart") - .onClick((_) => { - new CreationHelperModal(this.app, view, this.settings, this.renderer).open(); - }); - }); - } - })); - } - - onunload() { - console.log('unloading plugin: Obsidian Charts'); - } - + settings: ChartPluginSettings; + renderer: Renderer; + + postprocessor = async ( + content: string, + el: HTMLElement, + ctx: MarkdownPostProcessorContext + ) => { + let data; + try { + data = await parseYaml(content.replace(/ /g, ' ')); + } catch (error) { + renderError(error, el); + return; + } + if (!data.id) { + if (!data || !data.type || !data.labels || !data.series) { + renderError('Missing type, labels or series', el); + return; + } + } + if (data.bestFit === true && data.type === 'line') { + if (data.bestFitNumber != undefined) { + var x = data.series[Number(data.bestFitNumber)].data; + } else { + // Default to line 0 + var x = data.series[0].data; + } + + let y = data.labels; + let outX = 0; + let outY = 0; + let outX2 = 0; + let outXY = 0; + + for (let i = 0; i < x.length; ++i) { + outX = outX + x[i]; + outY = outY + y[i]; + outX2 = outX2 + x[i] * x[i]; + outXY = outXY + x[i] * y[i]; + } + let gradient = + (x.length * outXY - outY * outX) / (x.length * outX2 - outX * outX); + let intercept = (outY - gradient * outX) / x.length; + + // Form points from equation + let YVals = []; + for (let i = 0; i < y.length; ++i) { + YVals.push((y[i] - intercept) / gradient); + } + + if (data.bestFitTitle != undefined && data.bestFitTitle != 'undefined') { + var title = String(data.bestFitTitle); + } else { + var title = 'Line of Best Fit'; + } + // Create line + data.series.push({ + title: title, + data: YVals, + }); + } + await this.renderer.renderFromYaml(data, el, ctx); + }; + + async loadSettings() { + this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); + } + + async saveSettings() { + await this.saveData(this.settings); + } + + async onload() { + console.log('loading plugin: Charts'); + + await this.loadSettings(); + + addIcons(); + + this.renderer = new Renderer(this); + + //@ts-ignore + window.renderChart = this.renderer.renderRaw; + + this.addSettingTab(new ChartSettingTab(this.app, this)); + + this.addCommand({ + id: 'creation-helper', + name: 'Insert new Chart', + checkCallback: (checking: boolean) => { + let leaf = this.app.workspace.activeLeaf; + if (leaf.view instanceof MarkdownView) { + if (!checking) { + new CreationHelperModal( + this.app, + leaf.view, + this.settings, + this.renderer + ).open(); + } + return true; + } + return false; + }, + }); + + this.addCommand({ + id: 'chart-from-table-column', + name: 'Create Chart from Table (Column oriented Layout)', + editorCheckCallback: (checking: boolean, editor: Editor, view: View) => { + let selection = editor.getSelection(); + if ( + view instanceof MarkdownView && + selection.split('\n').length >= 3 && + selection.split('|').length >= 2 + ) { + if (!checking) { + chartFromTable(editor, 'columns'); + } + return true; + } + return false; + }, + }); + + this.addCommand({ + id: 'chart-from-table-row', + name: 'Create Chart from Table (Row oriented Layout)', + editorCheckCallback: (checking: boolean, editor: Editor, view: View) => { + if ( + view instanceof MarkdownView && + editor.getSelection().split('\n').length >= 3 && + editor.getSelection().split('|').length >= 2 + ) { + if (!checking) { + chartFromTable(editor, 'rows'); + } + return true; + } + return false; + }, + }); + + this.addCommand({ + id: 'chart-to-svg', + name: 'Create Image from Chart', + editorCheckCallback: (checking: boolean, editor: Editor, view: View) => { + if ( + view instanceof MarkdownView && + editor.getSelection().startsWith('```chart') && + editor.getSelection().endsWith('```') + ) { + if (!checking) { + new Notice('Rendering Chart...'); + saveImageToVaultAndPaste( + editor, + this.app, + this.renderer, + view.file, + this.settings + ); + } + return true; + } + return false; + }, + }); + + this.registerMarkdownCodeBlockProcessor('chart', this.postprocessor); + this.registerMarkdownCodeBlockProcessor( + 'advanced-chart', + async (data, el) => this.renderer.renderRaw(await JSON.parse(data), el) + ); + + // Remove this ignore when the obsidian package is updated on npm + // Editor mode + // @ts-ignore + this.registerEvent( + this.app.workspace.on( + 'editor-menu', + (menu: Menu, _: Editor, view: MarkdownView) => { + if (view && this.settings.contextMenu) { + menu.addItem((item) => { + item + .setTitle('Insert Chart') + .setIcon('chart') + .onClick((_) => { + new CreationHelperModal( + this.app, + view, + this.settings, + this.renderer + ).open(); + }); + }); + } + } + ) + ); + } + + onunload() { + console.log('unloading plugin: Charts'); + } } diff --git a/src/ui/settingsTab.ts b/src/ui/settingsTab.ts index 38bbd53..a90fa33 100644 --- a/src/ui/settingsTab.ts +++ b/src/ui/settingsTab.ts @@ -1,155 +1,188 @@ -import { DEFAULT_SETTINGS, ImageOptions } from './../constants/settingsConstants'; -import { App, MarkdownRenderer, Modal, Notice, PluginSettingTab, request, Setting, } from "obsidian"; -import type ChartPlugin from "../main"; +import { + DEFAULT_SETTINGS, + ImageOptions, +} from './../constants/settingsConstants'; +import { + App, + MarkdownRenderer, + Modal, + Notice, + PluginSettingTab, + request, + Setting, +} from 'obsidian'; +import type ChartPlugin from '../main'; import Picker from 'vanilla-picker'; export class ChartSettingTab extends PluginSettingTab { - plugin: ChartPlugin; + plugin: ChartPlugin; - constructor(app: App, plugin: ChartPlugin) { - super(app, plugin); - this.plugin = plugin; - } + constructor(app: App, plugin: ChartPlugin) { + super(app, plugin); + this.plugin = plugin; + } - isColor(strColor: string) { - var s = new Option().style; - s.color = strColor; - return s.color == strColor; - } + isColor(strColor: string) { + var s = new Option().style; + s.color = strColor; + return s.color == strColor; + } - display(): void { - let { containerEl, plugin } = this; + display(): void { + let { containerEl, plugin } = this; - containerEl.empty(); + containerEl.empty(); - containerEl.createEl('h2', { text: 'Settings - Obsidian Charts' }); + containerEl.createEl('h2', { text: 'Settings - Charts' }); - containerEl.createEl('h3', { text: "General" }); + containerEl.createEl('h3', { text: 'General' }); - new Setting(containerEl) - .setName("Show Button in Context Menu") - .setDesc("If enabled, you will se a Button in your Editor Context Menu to open the Chart Creator.") - .addToggle(cb => { - cb - .setValue(this.plugin.settings.contextMenu) - .onChange(async value => { - plugin.settings.contextMenu = value; - await plugin.saveSettings(); - }) - }); - new Setting(containerEl) - .setName('Donate') - .setDesc('If you like this Plugin, consider donating to support continued development:') - .addButton((bt) => { - bt.buttonEl.outerHTML = ``; - }); + new Setting(containerEl) + .setName('Show Button in Context Menu') + .setDesc( + 'If enabled, you will se a Button in your Editor Context Menu to open the Chart Creator.' + ) + .addToggle((cb) => { + cb.setValue(this.plugin.settings.contextMenu).onChange( + async (value) => { + plugin.settings.contextMenu = value; + await plugin.saveSettings(); + } + ); + }); + new Setting(containerEl) + .setName('Donate') + .setDesc( + 'If you like this Plugin, consider donating to support continued development:' + ) + .addButton((bt) => { + bt.buttonEl.outerHTML = ``; + }); - containerEl.createEl('h3', { - text: "Colors", attr: { - style: "margin-bottom: 0" - } - }); - const desc = containerEl.createEl("p", { cls: "setting-item-description" }); - desc.append( - "Set the Colors for your Charts. This will set the border Color and the inner Color will be the same, but with less opacity. This ensures better compatibility with Dark and Light Mode. ", - "You can use any ", - desc.createEl("a", { - href: "https://www.w3schools.com/cssref/css_colors.asp", - text: "valid CSS Color." - }), - ) + containerEl.createEl('h3', { + text: 'Colors', + attr: { + style: 'margin-bottom: 0', + }, + }); + const desc = containerEl.createEl('p', { cls: 'setting-item-description' }); + desc.append( + 'Set the Colors for your Charts. This will set the border Color and the inner Color will be the same, but with less opacity. This ensures better compatibility with Dark and Light Mode. ', + 'You can use any ', + desc.createEl('a', { + href: 'https://www.w3schools.com/cssref/css_colors.asp', + text: 'valid CSS Color.', + }) + ); - new Setting(containerEl).setName('Enable Theme Colors').setDesc('If your Obsidian Theme (or snippet) provides Colors you can use them instead.').addToggle(cb => { - cb.setValue(plugin.settings.themeable).onChange(async value => { - plugin.settings.themeable = value; - await plugin.saveSettings(); - this.display(); - }) - }); + new Setting(containerEl) + .setName('Enable Theme Colors') + .setDesc( + 'If your Obsidian Theme (or snippet) provides Colors you can use them instead.' + ) + .addToggle((cb) => { + cb.setValue(plugin.settings.themeable).onChange(async (value) => { + plugin.settings.themeable = value; + await plugin.saveSettings(); + this.display(); + }); + }); - if (!plugin.settings.themeable) { - plugin.settings.colors.forEach((color, idx) => { - const nameEl = document.createDocumentFragment(); - nameEl.createSpan({ text: "●", attr: { style: `color: ${color}` } }); - nameEl.appendText(` Color #${idx + 1}`); - new Setting(containerEl) - .setName(nameEl) - .setDesc('This will be the border Color used in the Charts you create.') - .addButton(btn => { - btn.setButtonText("Change Color"); - new Picker({ - parent: btn.buttonEl, - onDone: async (color) => { - this.plugin.settings.colors[idx] = color.hex; - await this.plugin.saveSettings(); - this.display(); - }, - popup: "left", - color: color, - alpha: false, - }); - }) - .addExtraButton(btn => { - btn.setIcon("trash").setTooltip("Remove").onClick(async () => { - this.plugin.settings.colors.remove(color); - await this.plugin.saveSettings(); - this.display(); - }); - if (this.plugin.settings.colors.length === 1) { - btn.setDisabled(true); - } - }) - .addExtraButton(btn => { - btn.setIcon("reset").setTooltip("Reset to default").onClick(async () => { - this.plugin.settings.colors[idx] = DEFAULT_SETTINGS.colors[idx] ?? "#ffffff"; - await this.plugin.saveSettings(); - this.display(); - }); - }); - }); + if (!plugin.settings.themeable) { + plugin.settings.colors.forEach((color, idx) => { + const nameEl = document.createDocumentFragment(); + nameEl.createSpan({ text: '●', attr: { style: `color: ${color}` } }); + nameEl.appendText(` Color #${idx + 1}`); + new Setting(containerEl) + .setName(nameEl) + .setDesc( + 'This will be the border Color used in the Charts you create.' + ) + .addButton((btn) => { + btn.setButtonText('Change Color'); + new Picker({ + parent: btn.buttonEl, + onDone: async (color) => { + this.plugin.settings.colors[idx] = color.hex; + await this.plugin.saveSettings(); + this.display(); + }, + popup: 'left', + color: color, + alpha: false, + }); + }) + .addExtraButton((btn) => { + btn + .setIcon('trash') + .setTooltip('Remove') + .onClick(async () => { + this.plugin.settings.colors.remove(color); + await this.plugin.saveSettings(); + this.display(); + }); + if (this.plugin.settings.colors.length === 1) { + btn.setDisabled(true); + } + }) + .addExtraButton((btn) => { + btn + .setIcon('reset') + .setTooltip('Reset to default') + .onClick(async () => { + this.plugin.settings.colors[idx] = + DEFAULT_SETTINGS.colors[idx] ?? '#ffffff'; + await this.plugin.saveSettings(); + this.display(); + }); + }); + }); - new Setting(containerEl) - .addButton(btn => { - btn.setButtonText("Add Color").onClick(async () => { - this.plugin.settings.colors.push("#ffffff"); - await this.plugin.saveSettings(); - this.display(); - }) - }); - } + new Setting(containerEl).addButton((btn) => { + btn.setButtonText('Add Color').onClick(async () => { + this.plugin.settings.colors.push('#ffffff'); + await this.plugin.saveSettings(); + this.display(); + }); + }); + } - containerEl.createEl('h3', { text: "Chart to Image Converter" }); + containerEl.createEl('h3', { text: 'Chart to Image Converter' }); - const detailEl = containerEl.createEl("details"); - detailEl.createEl("summary", { text: "How to use" }); - detailEl.createEl("img", { attr: { src: "https://media.discordapp.net/attachments/855181471643861002/897811615037136966/charttoimage.gif" } }); + const detailEl = containerEl.createEl('details'); + detailEl.createEl('summary', { text: 'How to use' }); + detailEl.createEl('img', { + attr: { + src: 'https://media.discordapp.net/attachments/855181471643861002/897811615037136966/charttoimage.gif', + }, + }); - new Setting(containerEl) - .setName("Image Format") - .setDesc("The Format to be used, when generating a Image from a Chart.") - .addDropdown(cb => { - cb.addOptions({ - 'image/jpeg': 'jpeg', - 'image/png': 'png', - 'image/webp': 'webp', - }); - cb.setValue(plugin.settings.imageSettings.format); - cb.onChange(async value => { - (plugin.settings.imageSettings.format as any) = value; - await plugin.saveSettings(); - }); - }); - new Setting(containerEl) - .setName("Image Quality") - .setDesc("If using a lossy format, set the Image Quality.") - .addSlider(cb => { - cb.setDynamicTooltip() - .setLimits(0.01, 1, 0.01) - .setValue(plugin.settings.imageSettings.quality) - .onChange(async value => { - plugin.settings.imageSettings.quality = value; - await plugin.saveSettings(); - }); - }); - } -} \ No newline at end of file + new Setting(containerEl) + .setName('Image Format') + .setDesc('The Format to be used, when generating a Image from a Chart.') + .addDropdown((cb) => { + cb.addOptions({ + 'image/jpeg': 'jpeg', + 'image/png': 'png', + 'image/webp': 'webp', + }); + cb.setValue(plugin.settings.imageSettings.format); + cb.onChange(async (value) => { + (plugin.settings.imageSettings.format as any) = value; + await plugin.saveSettings(); + }); + }); + new Setting(containerEl) + .setName('Image Quality') + .setDesc('If using a lossy format, set the Image Quality.') + .addSlider((cb) => { + cb.setDynamicTooltip() + .setLimits(0.01, 1, 0.01) + .setValue(plugin.settings.imageSettings.quality) + .onChange(async (value) => { + plugin.settings.imageSettings.quality = value; + await plugin.saveSettings(); + }); + }); + } +}