@c2n/chart 0.0.7 → 0.0.9

package/dist/chart-link-C9vN9Y6c.js

@@ -0,0 +1,75 @@
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { property } from "lit/decorators.js";
+import { LitElement, isServer } from "lit";
+//#region src/chart-link.ts
+/** Resolves and follows a chart by id within the companion's document or shadow root. */
+var ChartLinkedElement = class ChartLinkedElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.for = "";
+	}
+	static #watchers = /* @__PURE__ */ new WeakMap();
+	#watchedRoot;
+	connectedCallback() {
+		super.connectedCallback();
+		if (isServer) return;
+		queueMicrotask(() => this.#resolveChart());
+		const root = this.getRootNode();
+		const observed = root instanceof Document ? root.documentElement : root;
+		let watcher = ChartLinkedElement.#watchers.get(root);
+		if (!watcher) {
+			const elements = /* @__PURE__ */ new Set();
+			const observer = new MutationObserver(() => elements.forEach((element) => element.#resolveChart()));
+			observer.observe(observed, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: ["id"]
+			});
+			watcher = {
+				elements,
+				observer
+			};
+			ChartLinkedElement.#watchers.set(root, watcher);
+		}
+		watcher.elements.add(this);
+		this.#watchedRoot = root;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#watchedRoot) {
+			const watcher = ChartLinkedElement.#watchers.get(this.#watchedRoot);
+			watcher?.elements.delete(this);
+			if (watcher?.elements.size === 0) {
+				watcher.observer.disconnect();
+				ChartLinkedElement.#watchers.delete(this.#watchedRoot);
+			}
+		}
+		this.#watchedRoot = void 0;
+		this.#setChart(void 0);
+	}
+	willUpdate(changed) {
+		if (changed.has("for") && !isServer) queueMicrotask(() => this.#resolveChart());
+	}
+	chartConnected(_chart) {}
+	chartDisconnected(_chart) {}
+	#resolveChart() {
+		const root = this.getRootNode();
+		const candidate = this.for && (root instanceof Document || root instanceof ShadowRoot) ? root.getElementById(this.for) : null;
+		const chart = candidate && "getLegendItems" in candidate && "getTooltipContext" in candidate && "getPlotBounds" in candidate && "registerLegendPresenter" in candidate && "unregisterLegendPresenter" in candidate && "registerTooltipPresenter" in candidate && "unregisterTooltipPresenter" in candidate ? candidate : void 0;
+		this.#setChart(chart);
+	}
+	#setChart(chart) {
+		if (chart === this.chart) return;
+		if (this.chart) this.chartDisconnected(this.chart);
+		this.chart = chart;
+		if (chart) this.chartConnected(chart);
+		this.requestUpdate();
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], ChartLinkedElement.prototype, "for", void 0);
+//#endregion
+export { ChartLinkedElement as t };

package/dist/chart-series.js

@@ -1,2 +1,76 @@
-import { n as SERIES_CHANGE_EVENT, r as SERIES_TAG, t as ChartSeries } from "./chart-series-BnpHO3lm.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { LitElement, css } from "lit";
+//#region src/chart-series.ts
+/** Fired at the parent chart whenever a series definition changes. */
+var SERIES_CHANGE_EVENT = "c2-chart-series-change";
+/** The tag, so a chart can match a definition by name rather than by class identity. */
+var SERIES_TAG = "c2-chart-series";
+var ChartSeries = class ChartSeries extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.field = "";
+		this.axis = "left";
+		this.spanGaps = false;
+		this.hidden = false;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: none;
+    }
+  `;
+	}
+	/** A plain snapshot of this definition, so the chart never holds a reference to the element. */
+	toConfig() {
+		return {
+			field: this.field,
+			label: this.label,
+			color: this.color,
+			lineWidth: this.lineWidth,
+			axis: this.axis,
+			spanGaps: this.spanGaps,
+			hidden: this.hidden,
+			format: this.format
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#notify();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#notify();
+	}
+	updated(_changed) {
+		this.#notify();
+	}
+	/** Composed so it crosses the shadow boundary of a chart that wraps its slot; the chart stops it there. */
+	#notify() {
+		this.dispatchEvent(new CustomEvent(SERIES_CHANGE_EVENT, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: String })], ChartSeries.prototype, "field", void 0);
+__decorate([property({ type: String })], ChartSeries.prototype, "label", void 0);
+__decorate([property({ type: String })], ChartSeries.prototype, "color", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "line-width"
+})], ChartSeries.prototype, "lineWidth", void 0);
+__decorate([property({ type: String })], ChartSeries.prototype, "axis", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "span-gaps"
+})], ChartSeries.prototype, "spanGaps", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ChartSeries.prototype, "hidden", void 0);
+__decorate([property({ attribute: false })], ChartSeries.prototype, "format", void 0);
+ChartSeries = __decorate([customElement("c2-chart-series")], ChartSeries);
+//#endregion
 export { ChartSeries, SERIES_CHANGE_EVENT, SERIES_TAG };

package/dist/chart-theme.js

@@ -61,7 +61,8 @@ var FALLBACK = {
 	fontFamily: "inherit",
 	fontSize: 12,
 	lineWidth: 2,
-	pointRadius: 2.5
+	pointRadius: 2.5,
+	barRadius: 0
 };
 /**
 * Resolves and caches the host's chart theme, and invalidates it whenever the page's colour scheme moves.
@@ -143,7 +144,8 @@ var ChartThemeController = class {
 			fontFamily: style.getPropertyValue("--c2-chart--font-family").trim() || FALLBACK.fontFamily,
 			fontSize: scalar("--c2-chart--font-size", FALLBACK.fontSize),
 			lineWidth: scalar("--c2-chart__line--width", FALLBACK.lineWidth),
-			pointRadius: scalar("--c2-chart__point--radius", FALLBACK.pointRadius)
+			pointRadius: scalar("--c2-chart__point--radius", FALLBACK.pointRadius),
+			barRadius: Math.min(.5, Math.max(0, scalar("--c2-chart__bar--border-radius", FALLBACK.barRadius)))
 		};
 	}
 };

package/dist/chart-tooltip-J-oC2DKZ.js

@@ -0,0 +1,130 @@
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { t as ChartLinkedElement } from "./chart-link-C9vN9Y6c.js";
+import { property, query } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { html, isServer, unsafeCSS } from "lit";
+//#region src/chart-tooltip.scss?inline
+var chart_tooltip_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  position: fixed;\n  z-index: 1000;\n  display: block;\n  pointer-events: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([position=inline]) {\n  position: static;\n}\n\n.bubble {\n  display: flex;\n  flex-direction: column;\n  gap: var(--c2-chart__tooltip--gap,6px);\n  padding: var(--c2-chart__tooltip--padding,8px 10px);\n  border-radius: var(--c2-chart__tooltip--border-radius,6px);\n  background: var(--c2-chart__tooltip--background-color,#18181b);\n  color: var(--c2-chart__tooltip--color,#fafafa);\n  font-size: var(--c2-chart__tooltip--font-size,12px);\n  box-shadow: var(--c2-chart__tooltip--box-shadow,0 8px 24px rgba(24, 24, 27, 0.08));\n  white-space: nowrap;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.marker {\n  width: var(--c2-chart__legend-marker--size,10px);\n  height: var(--c2-chart__legend-marker--size,10px);\n  border-radius: var(--c2-chart__legend-marker--border-radius,999px);\n  flex: none;\n}\n\n.label {\n  flex: 1 1 auto;\n}\n\n.value {\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n}";
+//#endregion
+//#region src/chart-tooltip.ts
+var ChartTooltip = class ChartTooltip extends ChartLinkedElement {
+	static {
+		this.styles = unsafeCSS(chart_tooltip_default);
+	}
+	#context;
+	#handleViewportChange;
+	constructor() {
+		super();
+		this.position = "floating";
+		this.placement = "top";
+		this.#context = null;
+		this.#handleViewportChange = () => this.#position();
+		this.#handleTooltipChange = (event) => {
+			const next = event.detail;
+			const contentChanged = !sameTooltipContent(this.#context, next);
+			this.#context = next;
+			this.hidden = !next;
+			if (contentChanged) this.requestUpdate();
+			this.updateComplete.then(() => this.#position());
+		};
+		this.hidden = true;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (isServer) return;
+		window.addEventListener("resize", this.#handleViewportChange);
+		window.addEventListener("scroll", this.#handleViewportChange, true);
+	}
+	disconnectedCallback() {
+		if (!isServer) {
+			window.removeEventListener("resize", this.#handleViewportChange);
+			window.removeEventListener("scroll", this.#handleViewportChange, true);
+		}
+		super.disconnectedCallback();
+	}
+	#handleTooltipChange;
+	chartConnected(chart) {
+		chart.registerTooltipPresenter(this);
+		chart.addEventListener("tooltip-change", this.#handleTooltipChange);
+		this.#handleTooltipChange(new CustomEvent("tooltip-change", { detail: chart.getTooltipContext() }));
+	}
+	chartDisconnected(chart) {
+		chart.removeEventListener("tooltip-change", this.#handleTooltipChange);
+		chart.unregisterTooltipPresenter(this);
+		this.#context = null;
+		this.hidden = true;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("position") || changed.has("placement") || changed.has("renderTooltip")) this.#position();
+	}
+	render() {
+		const context = this.#context;
+		return html`
+      <div class="bubble" part="bubble" role="tooltip">
+        <slot>
+          ${context ? this.renderTooltip?.(context) ?? html`
+                  <div>${context.formattedX}</div>
+                  ${context.entries.map((entry) => html`
+                      <div class="row">
+                        <span class="marker" style="background:${entry.color}"></span>
+                        <span class="label">${entry.series.label ?? entry.series.field}</span>
+                        <span class="value">${entry.formatted}</span>
+                      </div>
+                    `)}
+                ` : void 0}
+        </slot>
+      </div>
+    `;
+	}
+	#position() {
+		if (this.position === "inline") {
+			this.style.removeProperty("left");
+			this.style.removeProperty("top");
+			return;
+		}
+		const context = this.#context;
+		const chart = this.chart;
+		const bubble = this.bubble;
+		if (!context || !chart || !bubble) return;
+		const plot = chart.getPlotBounds();
+		const bounds = bubble.getBoundingClientRect();
+		const anchorX = plot.left + context.px;
+		const anchorY = plot.top + context.py;
+		const gap = 10;
+		const edge = 8;
+		let placement = this.placement;
+		if (placement === "top" && anchorY - bounds.height - gap < edge) placement = "bottom";
+		else if (placement === "bottom" && anchorY + bounds.height + gap > window.innerHeight - edge) placement = "top";
+		else if (placement === "start" && anchorX - bounds.width - gap < edge) placement = "end";
+		else if (placement === "end" && anchorX + bounds.width + gap > window.innerWidth - edge) placement = "start";
+		let left = anchorX - bounds.width / 2;
+		let top = placement === "top" ? anchorY - bounds.height - gap : anchorY + gap;
+		if (placement === "start" || placement === "end") {
+			left = placement === "start" ? anchorX - bounds.width - gap : anchorX + gap;
+			top = anchorY - bounds.height / 2;
+		}
+		left = Math.max(edge, Math.min(left, window.innerWidth - bounds.width - edge));
+		top = Math.max(edge, Math.min(top, window.innerHeight - bounds.height - edge));
+		this.style.left = `${left}px`;
+		this.style.top = `${top}px`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], ChartTooltip.prototype, "position", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], ChartTooltip.prototype, "placement", void 0);
+__decorate([property({ attribute: false })], ChartTooltip.prototype, "renderTooltip", void 0);
+__decorate([query(".bubble")], ChartTooltip.prototype, "bubble", void 0);
+ChartTooltip = __decorate([customElement("c2-chart-tooltip")], ChartTooltip);
+function sameTooltipContent(previous, next) {
+	if (!previous || !next) return previous === next;
+	if (previous.index !== next.index || previous.entries.length !== next.entries.length) return false;
+	return previous.entries.every((entry, index) => entry.seriesIndex === next.entries[index]?.seriesIndex && entry.formatted === next.entries[index]?.formatted);
+}
+//#endregion
+export { ChartTooltip as t };

package/dist/chart-tooltip.js

@@ -0,0 +1,2 @@
+import { t as ChartTooltip } from "./chart-tooltip-J-oC2DKZ.js";
+export { ChartTooltip };

package/dist/chart.js

@@ -1,13 +1,19 @@
-import { t as ChartBase } from "./chart-base-C4-1TyKq.js";
+import { t as ChartBase } from "./chart-base-CEZvMKwW.js";
 import { isChartFrame } from "./chart-types.js";
 import { ChartFrameBuilder, columnValue } from "./chart-data.js";
 import { ChartThemeController, PALETTE_SIZE, PROBE_COLORS } from "./chart-theme.js";
-import { n as SERIES_CHANGE_EVENT, t as ChartSeries } from "./chart-series-BnpHO3lm.js";
-import { t as UplotChartBase } from "./uplot-chart-base-BWr0zJE2.js";
+import { ChartSeries, SERIES_CHANGE_EVENT } from "./chart-series.js";
+import { t as UplotChartBase } from "./uplot-chart-base-CLhgOeM_.js";
 import { LineChart } from "./line-chart.js";
 import { AreaChart } from "./area-chart.js";
 import { BarChart } from "./bar-chart.js";
 import { Sparkline } from "./sparkline.js";
-import { t as EchartsChartBase } from "./echarts-chart-base-LogCQN10.js";
+import { t as EchartsChartBase } from "./echarts-chart-base-CImXMzVk.js";
 import { PieChart } from "./pie-chart.js";
-export { AreaChart, BarChart, ChartBase, ChartFrameBuilder, ChartSeries, ChartThemeController, EchartsChartBase, LineChart, PALETTE_SIZE, PROBE_COLORS, PieChart, SERIES_CHANGE_EVENT, Sparkline, UplotChartBase, columnValue, isChartFrame };
+import { GaugeChart } from "./gauge-chart.js";
+import { RadarChart } from "./radar-chart.js";
+import { ScatterChart } from "./scatter-chart.js";
+import { CandlestickChart } from "./candlestick-chart.js";
+import { t as ChartLegend } from "./chart-legend-DJE3HO7C.js";
+import { t as ChartTooltip } from "./chart-tooltip-J-oC2DKZ.js";
+export { AreaChart, BarChart, CandlestickChart, ChartBase, ChartFrameBuilder, ChartLegend, ChartSeries, ChartThemeController, ChartTooltip, EchartsChartBase, GaugeChart, LineChart, PALETTE_SIZE, PROBE_COLORS, PieChart, RadarChart, SERIES_CHANGE_EVENT, ScatterChart, Sparkline, UplotChartBase, columnValue, isChartFrame };

package/dist/decorate-BkO8ArQg.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+export { __decorate as t };

package/dist/{echarts-chart-base-LogCQN10.js → echarts-chart-base-CImXMzVk.js}

@@ -1,19 +1,18 @@
-import { t as ChartBase } from "./chart-base-C4-1TyKq.js";
-import { i as __decorate } from "./chart-series-BnpHO3lm.js";
+import { t as ChartBase } from "./chart-base-CEZvMKwW.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
 import { property } from "lit/decorators.js";
 //#region src/engines/echarts-loader.ts
 var LOADERS = {
 	pie: () => import("echarts/charts").then((m) => [m.PieChart]),
 	gauge: () => import("echarts/charts").then((m) => [m.GaugeChart]),
+	radar: () => import("echarts/charts").then((m) => [m.RadarChart]),
 	scatter: () => import("echarts/charts").then((m) => [m.ScatterChart]),
-	heatmap: () => import("echarts/charts").then((m) => [m.HeatmapChart]),
 	candlestick: () => import("echarts/charts").then((m) => [m.CandlestickChart]),
 	bar: () => import("echarts/charts").then((m) => [m.BarChart]),
 	line: () => import("echarts/charts").then((m) => [m.LineChart]),
 	grid: () => import("echarts/components").then((m) => [m.GridComponent]),
 	legend: () => import("echarts/components").then((m) => [m.LegendComponent]),
 	tooltip: () => import("echarts/components").then((m) => [m.TooltipComponent]),
-	visualMap: () => import("echarts/components").then((m) => [m.VisualMapComponent]),
 	dataZoom: () => import("echarts/components").then((m) => [m.DataZoomComponent])
 };
 var corePending;
@@ -206,8 +205,12 @@ var EchartsChartBase = class extends ChartBase {
 	}
 	buildOptions(context) {
 		const { theme, series } = context;
+		const animate = this.animation === "auto" && !globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 		return {
-			animation: this.animation === "auto",
+			animation: animate,
+			animationDuration: animate ? 500 : 0,
+			animationDurationUpdate: 0,
+			animationEasing: "cubicOut",
 			color: theme.palette,
 			textStyle: {
 				fontFamily: theme.fontFamily === "inherit" ? void 0 : theme.fontFamily,

package/dist/echarts-chart-base.js

@@ -1,2 +1,2 @@
-import { t as EchartsChartBase } from "./echarts-chart-base-LogCQN10.js";
+import { t as EchartsChartBase } from "./echarts-chart-base-CImXMzVk.js";
 export { EchartsChartBase };

package/dist/gauge-chart.js

@@ -0,0 +1,111 @@
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import "./chart-series.js";
+import { t as EchartsChartBase } from "./echarts-chart-base-CImXMzVk.js";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/gauge-chart.ts
+var GaugeChart = class GaugeChart extends EchartsChartBase {
+	constructor() {
+		super();
+		this.features = ["gauge"];
+		this.min = 0;
+		this.max = 100;
+		this.startAngle = 225;
+		this.endAngle = -45;
+		this.splitNumber = 5;
+		this.precision = 0;
+		this.valueSuffix = "";
+		this.progress = "show";
+		this.pointer = "show";
+		this.marks = "show";
+		this.tooltip = "item";
+		this.legend = "none";
+	}
+	coordinateSystem() {
+		return {};
+	}
+	dataShape() {
+		return "named";
+	}
+	seriesOption(index, context) {
+		const color = this.colorOf(context.series[index] ?? { field: "" }, index, context.theme);
+		const precision = Math.max(0, Math.min(20, Math.trunc(this.precision)));
+		const number = new Intl.NumberFormat(this.locale, {
+			maximumFractionDigits: precision,
+			minimumFractionDigits: precision
+		});
+		const formatValue = (value) => `${number.format(value)}${this.valueSuffix}`;
+		return {
+			type: "gauge",
+			min: this.min,
+			max: this.max,
+			startAngle: this.startAngle,
+			endAngle: this.endAngle,
+			splitNumber: this.splitNumber,
+			progress: {
+				show: this.progress === "show",
+				width: 12,
+				roundCap: true,
+				itemStyle: { color }
+			},
+			pointer: {
+				show: this.pointer === "show",
+				itemStyle: { color }
+			},
+			axisLine: { lineStyle: {
+				width: 12,
+				color: [[1, context.theme.gridColor]]
+			} },
+			axisTick: {
+				show: this.marks === "show",
+				lineStyle: { color: context.theme.axisColor }
+			},
+			splitLine: {
+				show: this.marks === "show",
+				lineStyle: { color: context.theme.axisColor }
+			},
+			axisLabel: {
+				color: context.theme.axisColor,
+				fontSize: context.theme.fontSize,
+				formatter: formatValue
+			},
+			title: {
+				color: context.theme.mutedColor,
+				fontSize: context.theme.fontSize,
+				offsetCenter: [0, "25%"]
+			},
+			detail: {
+				color: context.theme.color,
+				fontSize: Math.max(20, context.theme.fontSize * 1.8),
+				fontWeight: 650,
+				offsetCenter: [0, "-3%"],
+				formatter: formatValue
+			}
+		};
+	}
+};
+__decorate([property({ type: Number })], GaugeChart.prototype, "min", void 0);
+__decorate([property({ type: Number })], GaugeChart.prototype, "max", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "start-angle"
+})], GaugeChart.prototype, "startAngle", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "end-angle"
+})], GaugeChart.prototype, "endAngle", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "split-number"
+})], GaugeChart.prototype, "splitNumber", void 0);
+__decorate([property({ type: Number })], GaugeChart.prototype, "precision", void 0);
+__decorate([property({
+	type: String,
+	attribute: "value-suffix"
+})], GaugeChart.prototype, "valueSuffix", void 0);
+__decorate([property({ type: String })], GaugeChart.prototype, "progress", void 0);
+__decorate([property({ type: String })], GaugeChart.prototype, "pointer", void 0);
+__decorate([property({ type: String })], GaugeChart.prototype, "marks", void 0);
+GaugeChart = __decorate([customElement("c2-gauge-chart")], GaugeChart);
+//#endregion
+export { GaugeChart };

package/dist/line-chart.js

@@ -1,6 +1,7 @@
-import { i as __decorate } from "./chart-series-BnpHO3lm.js";
-import { t as UplotChartBase } from "./uplot-chart-base-BWr0zJE2.js";
-import { n as linePaths } from "./uplot-paths-ChKohvIX.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import "./chart-series.js";
+import { t as UplotChartBase } from "./uplot-chart-base-CLhgOeM_.js";
+import { n as linePaths } from "./uplot-paths-D5HCEKRV.js";
 import { property } from "lit/decorators.js";
 import { customElement } from "@c2n/core/element-helper.js";
 //#region src/line-chart.ts

package/dist/pie-chart.js

@@ -1,5 +1,6 @@
-import { i as __decorate } from "./chart-series-BnpHO3lm.js";
-import { t as EchartsChartBase } from "./echarts-chart-base-LogCQN10.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import "./chart-series.js";
+import { t as EchartsChartBase } from "./echarts-chart-base-CImXMzVk.js";
 import { property, state } from "lit/decorators.js";
 import { customElement } from "@c2n/core/element-helper.js";
 //#region src/pie-chart.ts
@@ -11,11 +12,15 @@ var PieChart = class PieChart extends EchartsChartBase {
 		this.outerRadius = .75;
 		this.startAngle = 90;
 		this.labels = "none";
+		this.labelContent = "name";
 		this.sort = "none";
 		this.hiddenSlices = /* @__PURE__ */ new Set();
 		this.tooltip = "item";
 		this.legend = "end";
 	}
+	get legendDependsOnData() {
+		return true;
+	}
 	/** A pie has no grid and no axes at all: contributing them would draw an empty cartesian frame. */
 	coordinateSystem() {
 		return {};
@@ -45,6 +50,11 @@ var PieChart = class PieChart extends EchartsChartBase {
 		else next.add(label);
 		this.hiddenSlices = next;
 		this.adapter?.setDatumVisibility?.(label, visible);
+		this.notifyLegendChange();
+	}
+	restoreVisibility(adapter) {
+		super.restoreVisibility(adapter);
+		for (const label of this.hiddenSlices) adapter.setDatumVisibility?.(label, false);
 	}
 	dataShape() {
 		return "named";
@@ -59,13 +69,22 @@ var PieChart = class PieChart extends EchartsChartBase {
 				show: this.labels !== "none",
 				position: this.labels === "inside" ? "inside" : "outside",
 				color: this.labels === "inside" ? theme.surface : theme.color,
-				fontSize: theme.fontSize
+				fontSize: theme.fontSize,
+				formatter: this.labelFormatter()
 			},
 			labelLine: { show: this.labels === "outside" },
 			itemStyle: sliceBorder(this, theme.surface),
 			sort: this.sort === "none" ? void 0 : this.sort === "asc" ? "ascending" : "descending"
 		};
 	}
+	labelFormatter() {
+		switch (this.labelContent) {
+			case "value": return "{c}";
+			case "percent": return "{d}%";
+			case "name-percent": return "{b} · {d}%";
+			default: return "{b}";
+		}
+	}
 };
 __decorate([property({
 	type: Number,
@@ -80,6 +99,10 @@ __decorate([property({
 	attribute: "start-angle"
 })], PieChart.prototype, "startAngle", void 0);
 __decorate([property({ type: String })], PieChart.prototype, "labels", void 0);
+__decorate([property({
+	type: String,
+	attribute: "label-content"
+})], PieChart.prototype, "labelContent", void 0);
 __decorate([property({ type: String })], PieChart.prototype, "sort", void 0);
 __decorate([state()], PieChart.prototype, "hiddenSlices", void 0);
 PieChart = __decorate([customElement("c2-pie-chart")], PieChart);