pooyash1998_chartspark/src/settings.ts

import { App, PluginSettingTab, Setting } from 'obsidian';
import ChartSparkPlugin from './main';
import { ChartType } from './types';

export interface ChartSparkSettings {
	defaultChartType: ChartType;
	autoRefresh: boolean;
	chartWidth: number;
	showRefreshButton: boolean;
}

export const DEFAULT_SETTINGS: ChartSparkSettings = {
	defaultChartType: 'pie',
	autoRefresh: true,
	chartWidth: 600,
	showRefreshButton: true,
};

export class ChartSparkSettingTab extends PluginSettingTab {
	constructor(app: App, private plugin: ChartSparkPlugin) {
		super(app, plugin);
	}

	display(): void {
		const { containerEl } = this;
		containerEl.empty();
		containerEl.createEl('h2', { text: 'ChartSpark settings' });

		new Setting(containerEl)
			.setName('Default chart type')
			.setDesc('Chart type used when generating from selection.')
			.addDropdown(d =>
				d
					.addOption('pie', 'Pie')
					.addOption('doughnut', 'Doughnut')
					.addOption('bar', 'Bar')
					.addOption('line', 'Line')
					.setValue(this.plugin.settings.defaultChartType)
					.onChange(async v => {
						this.plugin.settings.defaultChartType = v as ChartType;
						await this.plugin.saveSettings();
					})
			);

		new Setting(containerEl)
			.setName('Auto-refresh charts')
			.setDesc('Re-render charts when the source note is modified.')
			.addToggle(t =>
				t.setValue(this.plugin.settings.autoRefresh).onChange(async v => {
					this.plugin.settings.autoRefresh = v;
					await this.plugin.saveSettings();
				})
			);

		new Setting(containerEl)
			.setName('Max chart width (px)')
			.setDesc('Maximum width of rendered charts.')
			.addSlider(s =>
				s
					.setLimits(200, 1200, 50)
					.setValue(this.plugin.settings.chartWidth)
					.setDynamicTooltip()
					.onChange(async v => {
						this.plugin.settings.chartWidth = v;
						await this.plugin.saveSettings();
					})
			);

		new Setting(containerEl)
			.setName('Show refresh button')
			.setDesc('Display a manual refresh button on each chart.')
			.addToggle(t =>
				t.setValue(this.plugin.settings.showRefreshButton).onChange(async v => {
					this.plugin.settings.showRefreshButton = v;
					await this.plugin.saveSettings();
				})
			);
	}
}