@gravionlabs/helix-ui 22.2.6 → 22.2.7

package/fesm2022/gravionlabs-helix-ui-chart.mjs

@@ -0,0 +1,446 @@
+import { isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, InjectionToken, NgZone, PLATFORM_ID, afterNextRender, effect, inject, input, numberAttribute, output, untracked, viewChild } from "@angular/core";
+const HX_CHART_LOADER = new InjectionToken("HX_CHART_LOADER", {
+	providedIn: "root",
+	factory: () => () => import("chart.js/auto")
+});
+const PALETTE = [
+	"--h-primary-color",
+	"--h-orange-500",
+	"--h-green-500",
+	"--h-purple-500",
+	"--h-sky-500",
+	"--h-red-500",
+	"--h-yellow-500",
+	"--h-teal-500"
+];
+const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function merge(defaults, overrides) {
+	const out = { ...defaults };
+	for (const [key, value] of Object.entries(overrides)) {
+		const base = out[key];
+		out[key] = isObject(base) && isObject(value) ? merge(base, value) : value;
+	}
+	return out;
+}
+var HxChart = class HxChart {
+	#host = inject(ElementRef).nativeElement;
+	#zone = inject(NgZone);
+	#loader = inject(HX_CHART_LOADER);
+	#platform = inject(PLATFORM_ID);
+	canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : 	/* istanbul ignore next */ []);
+	type = input("bar", ...ngDevMode ? [{ debugName: "type" }] : 	/* istanbul ignore next */ []);
+	data = input({}, ...ngDevMode ? [{ debugName: "data" }] : 	/* istanbul ignore next */ []);
+	options = input({}, ...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
+	plugins = input([], ...ngDevMode ? [{ debugName: "plugins" }] : 	/* istanbul ignore next */ []);
+	width = input(...ngDevMode ? [void 0, { debugName: "width" }] : 	/* istanbul ignore next */ []);
+	height = input(...ngDevMode ? [void 0, { debugName: "height" }] : 	/* istanbul ignore next */ []);
+	responsive = input(true, {
+		...ngDevMode ? { debugName: "responsive" } : 		/* istanbul ignore next */ {},
+		transform: (v) => v !== false && v !== "false"
+	});
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledBy = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledBy" }] : 	/* istanbul ignore next */ []);
+	themeDelay = input(50, {
+		...ngDevMode ? { debugName: "themeDelay" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	dataSelect = output();
+	#chart;
+	#chartType;
+	#ready = false;
+	#loading = false;
+	#observer;
+	#timer;
+	constructor() {
+		afterNextRender(() => {
+			this.#ready = true;
+			this.#render();
+			this.#watchTheme();
+		});
+		effect(() => {
+			this.type();
+			this.data();
+			this.options();
+			this.plugins();
+			this.responsive();
+			this.width();
+			this.height();
+			untracked(() => {
+				if (this.#ready) this.#render();
+			});
+		});
+		inject(DestroyRef).onDestroy(() => {
+			clearTimeout(this.#timer);
+			this.#observer?.disconnect();
+			this.#chart?.destroy();
+			this.#chart = void 0;
+			this.#ready = false;
+		});
+	}
+	get chart() {
+		return this.#chart;
+	}
+	refresh() {
+		if (this.#chart) {
+			this.#apply(this.#chart);
+			this.#chart.update();
+		}
+	}
+	onClick(event) {
+		const chart = this.#chart;
+		if (!chart) return;
+		const element = chart.getElementsAtEventForMode(event, "nearest", { intersect: true }, false);
+		const dataset = chart.getElementsAtEventForMode(event, "dataset", { intersect: true }, false);
+		if (element?.[0] && dataset) this.dataSelect.emit({
+			originalEvent: event,
+			element: element[0],
+			dataset
+		});
+	}
+	async #render() {
+		if (!isPlatformBrowser(this.#platform)) return;
+		const type = this.type();
+		if (this.#chart && this.#chartType === type) {
+			this.#apply(this.#chart);
+			this.#chart.update();
+			return;
+		}
+		if (this.#loading) return;
+		this.#loading = true;
+		try {
+			const module = await this.#loader();
+			if (!this.#ready) return;
+			this.#chart?.destroy();
+			const Chart = module.default;
+			this.#zone.runOutsideAngular(() => {
+				this.#chart = new Chart(this.canvas().nativeElement, {
+					type: this.type(),
+					data: this.#themedData(),
+					options: this.#themedOptions(),
+					plugins: [...this.plugins()]
+				});
+			});
+			this.#chartType = this.type();
+		} catch (error) {
+			console.error("hx-chart: chart.js could not be loaded. Is the peer dependency \"chart.js\" installed?", error);
+			return;
+		} finally {
+			this.#loading = false;
+		}
+		if (this.#chart && this.#chartType !== this.type()) await this.#render();
+	}
+	#apply(chart) {
+		chart.data = this.#themedData();
+		chart.options = this.#themedOptions();
+	}
+	#token(name) {
+		return getComputedStyle(this.#host).getPropertyValue(name).trim();
+	}
+	#themedData() {
+		const data = this.data();
+		const datasets = data.datasets;
+		if (!Array.isArray(datasets)) return data;
+		const palette = PALETTE.map((name) => this.#token(name)).filter(Boolean);
+		if (palette.length === 0) return data;
+		const perPoint = [
+			"pie",
+			"doughnut",
+			"polarArea"
+		].includes(this.type());
+		return {
+			...data,
+			datasets: datasets.map((dataset, i) => {
+				if (!isObject(dataset)) return dataset;
+				const color = palette[i % palette.length];
+				const count = Array.isArray(dataset.data) ? dataset.data.length : 0;
+				const points = Array.from({ length: count }, (_, n) => palette[n % palette.length]);
+				const filled = this.type() === "line" || this.type() === "radar";
+				return {
+					...dataset,
+					backgroundColor: dataset.backgroundColor ?? (perPoint ? points : filled ? `color-mix(in srgb, ${color}, transparent 80%)` : color),
+					borderColor: dataset.borderColor ?? (perPoint ? this.#token("--h-content-background") : color)
+				};
+			})
+		};
+	}
+	#themedOptions() {
+		const text = this.#token("--h-text-color");
+		const muted = this.#token("--h-text-muted-color");
+		const grid = this.#token("--h-content-border-color");
+		const axis = {
+			ticks: { color: muted },
+			grid: { color: grid },
+			border: { color: grid }
+		};
+		const radial = {
+			ticks: {
+				color: muted,
+				backdropColor: "transparent"
+			},
+			grid: { color: grid },
+			angleLines: { color: grid },
+			pointLabels: { color: text }
+		};
+		const type = this.type();
+		const scales = type === "radar" || type === "polarArea" ? { r: radial } : type === "pie" || type === "doughnut" ? {} : {
+			x: axis,
+			y: axis
+		};
+		return merge({
+			responsive: this.responsive(),
+			maintainAspectRatio: !(this.height() || this.width()),
+			color: muted,
+			borderColor: grid,
+			plugins: { legend: { labels: { color: text } } },
+			scales
+		}, this.options());
+	}
+	#watchTheme() {
+		if (typeof MutationObserver === "undefined") return;
+		this.#observer = new MutationObserver(() => {
+			clearTimeout(this.#timer);
+			this.#timer = setTimeout(() => this.refresh(), this.themeDelay());
+		});
+		this.#observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"style",
+				"data-theme"
+			]
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: HxChart,
+		isStandalone: true,
+		selector: "hx-chart",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			plugins: {
+				classPropertyName: "plugins",
+				publicName: "plugins",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			responsive: {
+				classPropertyName: "responsive",
+				publicName: "responsive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledBy: {
+				classPropertyName: "ariaLabelledBy",
+				publicName: "ariaLabelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			themeDelay: {
+				classPropertyName: "themeDelay",
+				publicName: "themeDelay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { dataSelect: "dataSelect" },
+		host: { classAttribute: "hx-chart" },
+		viewQueries: [{
+			propertyName: "canvas",
+			first: true,
+			predicate: ["canvas"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="hx-chart-frame" [style.width]="width() ?? null" [style.height]="height() ?? null">
+      <canvas
+        #canvas
+        class="hx-chart-canvas"
+        role="img"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="ariaLabelledBy() || null"
+        (click)="onClick($event)"
+      ><ng-content select="[hxChartFallback]" /></canvas>
+    </div>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hx-chart",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "hx-chart" },
+			template: `
+    <div class="hx-chart-frame" [style.width]="width() ?? null" [style.height]="height() ?? null">
+      <canvas
+        #canvas
+        class="hx-chart-canvas"
+        role="img"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="ariaLabelledBy() || null"
+        (click)="onClick($event)"
+      ><ng-content select="[hxChartFallback]" /></canvas>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		plugins: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "plugins",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		responsive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "responsive",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledBy",
+				required: false
+			}]
+		}],
+		themeDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "themeDelay",
+				required: false
+			}]
+		}],
+		dataSelect: [{
+			type: i0.Output,
+			args: ["dataSelect"]
+		}]
+	}
+});
+export { HX_CHART_LOADER, HxChart };
+
+//# sourceMappingURL=gravionlabs-helix-ui-chart.mjs.map

package/fesm2022/gravionlabs-helix-ui-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gravionlabs-helix-ui-chart.mjs","names":[],"sources":["../../../projects/ui/chart/chart.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  effect,\n  InjectionToken,\n  inject,\n  input,\n  NgZone,\n  numberAttribute,\n  output,\n  PLATFORM_ID,\n  untracked,\n  viewChild,\n} from '@angular/core';\n\nexport type HxChartType =\n  | 'bar'\n  | 'line'\n  | 'scatter'\n  | 'bubble'\n  | 'pie'\n  | 'doughnut'\n  | 'polarArea'\n  | 'radar';\n\n/** What `(dataSelect)` carries: the click and what chart.js found under it. */\nexport interface HxChartSelectEvent {\n  originalEvent: Event;\n  /** The nearest element under the pointer (chart.js `{ datasetIndex, index, element }`). */\n  element: unknown;\n  /** The elements of that dataset. */\n  dataset: unknown[];\n}\n\n/** The part of chart.js this component uses; the real module is `chart.js/auto`. */\nexport interface HxChartModule {\n  default: new (canvas: HTMLCanvasElement, config: unknown) => HxChartInstance;\n}\n\nexport interface HxChartInstance {\n  data: unknown;\n  options: unknown;\n  update(mode?: string): void;\n  destroy(): void;\n  getElementsAtEventForMode(\n    event: Event,\n    mode: string,\n    options: object,\n    useFinalPosition: boolean,\n  ): unknown[];\n}\n\n/**\n * Loads chart.js. The default is a dynamic `import('chart.js/auto')`, so chart.js is only fetched by apps that show\n * a chart; provide another function to register a smaller set of chart.js parts or to replace it in tests.\n */\nexport const HX_CHART_LOADER = new InjectionToken<() => Promise<HxChartModule>>('HX_CHART_LOADER', {\n  providedIn: 'root',\n  factory: () => () => import('chart.js/auto') as unknown as Promise<HxChartModule>,\n});\n\n/** Colours of the datasets that do not set their own, as tokens in the order they are used. */\nconst PALETTE = [\n  '--h-primary-color',\n  '--h-orange-500',\n  '--h-green-500',\n  '--h-purple-500',\n  '--h-sky-500',\n  '--h-red-500',\n  '--h-yellow-500',\n  '--h-teal-500',\n];\n\ntype Json = Record<string, unknown>;\n\n/** The parts of chart.js data and datasets that are read here; everything else is passed on untouched. */\ninterface ChartDataLike extends Json {\n  datasets?: unknown;\n}\ninterface DatasetLike extends Json {\n  data?: unknown;\n  backgroundColor?: unknown;\n  borderColor?: unknown;\n}\n\nconst isObject = (value: unknown): value is Json =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\n/** `defaults` underneath, `overrides` on top; objects merge, everything else is replaced. */\nfunction merge(defaults: Json, overrides: Json): Json {\n  const out: Json = { ...defaults };\n  for (const [key, value] of Object.entries(overrides)) {\n    const base = out[key];\n    out[key] = isObject(base) && isObject(value) ? merge(base, value) : value;\n  }\n  return out;\n}\n\n/**\n * A chart.js chart whose colours, grid and font come from the Helix tokens.\n *\n * ```html\n * <hx-chart type=\"bar\" [data]=\"data\" [options]=\"options\" height=\"20rem\" ariaLabel=\"Sales per month\">\n *   <table hxChartFallback>…the same numbers as text…</table>\n * </hx-chart>\n * ```\n *\n * chart.js is an optional peer dependency, loaded with a dynamic import (see `HX_CHART_LOADER`) the first time a\n * chart is shown. Datasets without colours get the Helix palette; text, grid and legend colours come from\n * `--h-text-muted-color` and `--h-content-border-color` of the element. Your `options` win over these defaults.\n * The chart is redrawn when `class` or `style` of `<html>` change (dark mode, the primary colour).\n *\n * The canvas is an `img` named by `ariaLabel` / `ariaLabelledBy`; content marked `hxChartFallback` becomes the\n * canvas fallback content, which assistive technology reads: put the numbers there as text or as a table.\n */\n@Component({\n  selector: 'hx-chart',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'hx-chart' },\n  template: `\n    <div class=\"hx-chart-frame\" [style.width]=\"width() ?? null\" [style.height]=\"height() ?? null\">\n      <canvas\n        #canvas\n        class=\"hx-chart-canvas\"\n        role=\"img\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        (click)=\"onClick($event)\"\n      ><ng-content select=\"[hxChartFallback]\" /></canvas>\n    </div>\n  `,\n})\nexport class HxChart {\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  readonly #zone = inject(NgZone);\n  readonly #loader = inject(HX_CHART_LOADER);\n  readonly #platform = inject(PLATFORM_ID);\n  private readonly canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n\n  readonly type = input<HxChartType>('bar');\n  /** chart.js data: `{ labels, datasets }`. Pass a new object to update the chart. */\n  readonly data = input<ChartDataLike>({});\n  /** chart.js options, on top of the token defaults. Pass a new object to update the chart. */\n  readonly options = input<Json>({});\n  /** Extra chart.js plugins for this chart. */\n  readonly plugins = input<readonly unknown[]>([]);\n  /** CSS width of the frame, e.g. `30rem`; the chart fills its container by default. */\n  readonly width = input<string>();\n  /** CSS height of the frame; without it chart.js keeps its aspect ratio. */\n  readonly height = input<string>();\n  /** Resize with the container. */\n  readonly responsive = input(true, { transform: (v: unknown) => v !== false && v !== 'false' });\n  readonly ariaLabel = input<string>();\n  readonly ariaLabelledBy = input<string>();\n  /** Delay of a redraw after the theme changed, in ms; the style change is usually followed by more. */\n  readonly themeDelay = input(50, { transform: numberAttribute });\n\n  /** A data point or dataset was clicked. */\n  readonly dataSelect = output<HxChartSelectEvent>();\n\n  #chart: HxChartInstance | undefined;\n  #chartType: HxChartType | undefined;\n  #ready = false;\n  #loading = false;\n  #observer: MutationObserver | undefined;\n  #timer: ReturnType<typeof setTimeout> | undefined;\n\n  constructor() {\n    afterNextRender(() => {\n      this.#ready = true;\n      void this.#render();\n      this.#watchTheme();\n    });\n    effect(() => {\n      this.type();\n      this.data();\n      this.options();\n      this.plugins();\n      this.responsive();\n      this.width();\n      this.height();\n      untracked(() => {\n        if (this.#ready) void this.#render();\n      });\n    });\n    inject(DestroyRef).onDestroy(() => {\n      clearTimeout(this.#timer);\n      this.#observer?.disconnect();\n      this.#chart?.destroy();\n      this.#chart = undefined;\n      this.#ready = false;\n    });\n  }\n\n  /** The chart.js instance, once it exists; `undefined` before chart.js has loaded. */\n  get chart(): HxChartInstance | undefined {\n    return this.#chart;\n  }\n\n  /** Redraws the chart, e.g. after the theme changed in a way the component cannot see. */\n  refresh(): void {\n    if (this.#chart) {\n      this.#apply(this.#chart);\n      this.#chart.update();\n    }\n  }\n\n  protected onClick(event: MouseEvent): void {\n    const chart = this.#chart;\n    if (!chart) return;\n    const element = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false);\n    const dataset = chart.getElementsAtEventForMode(event, 'dataset', { intersect: true }, false);\n    if (element?.[0] && dataset)\n      this.dataSelect.emit({ originalEvent: event, element: element[0], dataset });\n  }\n\n  async #render(): Promise<void> {\n    if (!isPlatformBrowser(this.#platform)) return;\n    const type = this.type();\n    if (this.#chart && this.#chartType === type) {\n      this.#apply(this.#chart);\n      this.#chart.update();\n      return;\n    }\n    if (this.#loading) return;\n    this.#loading = true;\n    try {\n      const module = await this.#loader();\n      if (!this.#ready) return; // destroyed while chart.js loaded\n      this.#chart?.destroy();\n      const Chart = module.default;\n      this.#zone.runOutsideAngular(() => {\n        this.#chart = new Chart(this.canvas().nativeElement, {\n          type: this.type(),\n          data: this.#themedData(),\n          options: this.#themedOptions(),\n          plugins: [...this.plugins()],\n        });\n      });\n      this.#chartType = this.type();\n    } catch (error) {\n      console.error(\n        'hx-chart: chart.js could not be loaded. Is the peer dependency \"chart.js\" installed?',\n        error,\n      );\n      return;\n    } finally {\n      this.#loading = false;\n    }\n    // inputs may have changed while chart.js loaded\n    if (this.#chart && this.#chartType !== this.type()) await this.#render();\n  }\n\n  #apply(chart: HxChartInstance): void {\n    chart.data = this.#themedData();\n    chart.options = this.#themedOptions();\n  }\n\n  #token(name: string): string {\n    return getComputedStyle(this.#host).getPropertyValue(name).trim();\n  }\n\n  /** The datasets with palette colours where they set none. The input is not changed. */\n  #themedData(): Json {\n    const data = this.data();\n    const datasets = data.datasets;\n    if (!Array.isArray(datasets)) return data;\n    const palette = PALETTE.map((name) => this.#token(name)).filter(Boolean);\n    if (palette.length === 0) return data;\n    const perPoint = ['pie', 'doughnut', 'polarArea'].includes(this.type());\n    return {\n      ...data,\n      datasets: datasets.map((dataset: DatasetLike, i: number) => {\n        if (!isObject(dataset)) return dataset;\n        const color = palette[i % palette.length];\n        const count = Array.isArray(dataset.data) ? dataset.data.length : 0;\n        const points = Array.from({ length: count }, (_, n) => palette[n % palette.length]);\n        const filled = this.type() === 'line' || this.type() === 'radar';\n        return {\n          ...dataset,\n          backgroundColor:\n            dataset.backgroundColor ??\n            (perPoint ? points : filled ? `color-mix(in srgb, ${color}, transparent 80%)` : color),\n          borderColor:\n            dataset.borderColor ?? (perPoint ? this.#token('--h-content-background') : color),\n        };\n      }),\n    };\n  }\n\n  #themedOptions(): Json {\n    const text = this.#token('--h-text-color');\n    const muted = this.#token('--h-text-muted-color');\n    const grid = this.#token('--h-content-border-color');\n    const axis = { ticks: { color: muted }, grid: { color: grid }, border: { color: grid } };\n    const radial = {\n      ticks: { color: muted, backdropColor: 'transparent' },\n      grid: { color: grid },\n      angleLines: { color: grid },\n      pointLabels: { color: text },\n    };\n    const type = this.type();\n    const scales =\n      type === 'radar' || type === 'polarArea'\n        ? { r: radial }\n        : type === 'pie' || type === 'doughnut'\n          ? {}\n          : { x: axis, y: axis };\n    const defaults: Json = {\n      responsive: this.responsive(),\n      maintainAspectRatio: !(this.height() || this.width()),\n      color: muted,\n      borderColor: grid,\n      plugins: { legend: { labels: { color: text } } },\n      scales,\n    };\n    return merge(defaults, this.options());\n  }\n\n  #watchTheme(): void {\n    if (typeof MutationObserver === 'undefined') return;\n    this.#observer = new MutationObserver(() => {\n      clearTimeout(this.#timer);\n      this.#timer = setTimeout(() => this.refresh(), this.themeDelay());\n    });\n    this.#observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'style', 'data-theme'],\n    });\n  }\n}\n"],"mappings":"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"}