@c2n/chart 0.0.7 → 0.0.8

package/README.md

@@ -1,16 +1,20 @@
 # @c2n/chart
 
-Line, area, bar, sparkline and pie charts as custom elements, from one package.
+Line, area, bar, sparkline, pie, gauge, scatter and candlestick charts as custom elements, from one package.
 
 ```bash
 npm install @c2n/chart uplot     # line, area, bar, sparkline
-npm install @c2n/chart echarts   # pie
+npm install @c2n/chart echarts   # pie, gauge, scatter, candlestick
 ```
 
 ```html
-<c2-line-chart x-field="month" legend="bottom" data='[{ "month": 1, "revenue": 128, "cost": 74 }]'>
-  <c2-chart-series field="revenue" label="Revenue"></c2-chart-series>
-  <c2-chart-series field="cost" label="Cost"></c2-chart-series>
+<c2-line-chart
+  x-field="year"
+  data='[{"year":2022,"nuclear":294.73,"wind":38.2,"solar":19.34},{"year":2023,"nuclear":338.2,"wind":50.48,"solar":22.59},{"year":2024,"nuclear":380.45,"wind":45.43,"solar":24.87}]'
+>
+  <c2-chart-series field="nuclear" label="Nuclear"></c2-chart-series>
+  <c2-chart-series field="wind" label="Wind"></c2-chart-series>
+  <c2-chart-series field="solar" label="Solar"></c2-chart-series>
 </c2-line-chart>
 ```
 
@@ -21,14 +25,34 @@ import '@c2n/chart' // all of them
 
 ## Elements
 
-| Tag               | Engine  | For                                             |
-| ----------------- | ------- | ----------------------------------------------- |
-| `c2-line-chart`   | uPlot   | Time or numeric trends                          |
-| `c2-area-chart`   | uPlot   | The same, with the region under the line filled |
-| `c2-bar-chart`    | uPlot   | Categorical or time-bucketed values             |
-| `c2-sparkline`    | uPlot   | A chromeless trend for a table cell or KPI row  |
-| `c2-pie-chart`    | ECharts | Parts of a whole, with a donut mode             |
-| `c2-chart-series` | —       | A series definition; renders nothing            |
+| Tag                    | Engine  | For                                             |
+| ---------------------- | ------- | ----------------------------------------------- |
+| `c2-line-chart`        | uPlot   | Time or numeric trends                          |
+| `c2-area-chart`        | uPlot   | The same, with the region under the line filled |
+| `c2-bar-chart`         | uPlot   | Categorical or time-bucketed values             |
+| `c2-sparkline`         | uPlot   | A chromeless trend for a table cell or KPI row  |
+| `c2-pie-chart`         | ECharts | Parts of a whole, with a donut mode             |
+| `c2-gauge-chart`       | ECharts | A bounded current value or target               |
+| `c2-scatter-chart`     | ECharts | Relationships, clusters and outliers            |
+| `c2-candlestick-chart` | ECharts | Open-high-low-close financial sessions          |
+| `c2-chart-series`      | —       | A series definition; renders nothing            |
+| `c2-chart-legend`      | —       | A linked legend placed anywhere in the layout   |
+| `c2-chart-tooltip`     | —       | A linked floating or inline tooltip             |
+
+## Independent legend and tooltip
+
+The chart renders built-in chrome by default. To own its layout, link companion elements to the chart by id;
+each companion automatically replaces its corresponding built-in display:
+
+```html
+<c2-line-chart id="sales" data="..."></c2-line-chart>
+<c2-chart-legend for="sales"></c2-chart-legend>
+<c2-chart-tooltip for="sales"></c2-chart-tooltip>
+```
+
+The legend occupies its normal HTML position. The tooltip floats beside the hovered point by default and
+flips at viewport edges; `position="inline"` makes it occupy its authored position. Assign `renderLegend`,
+`renderLegendItem` or `renderTooltip` for data-driven custom Lit templates.
 
 ## Engines
 
@@ -42,6 +66,11 @@ whichever engines your charts need.
 Internally everything becomes one columnar frame of `Float64Array`s, which is the shape uPlot draws
 natively and what makes appending O(1).
 
+The documentation examples share a France 2015–2024 extract from the public
+[Our World in Data Energy dataset](https://github.com/owid/energy-data), measured in terawatt-hours. Line,
+area, bar, scatter and sparkline charts read the annual rows directly; radial charts derive a focused
+metric or one slice per energy source from a selected year. Candlesticks use public OHLC observations.
+
 ```js
 chart.data = rows // full replace
 chart.revision++ // after mutating the array in place
@@ -75,7 +104,8 @@ messages) is ordinary DOM and does expose parts.
 
 ## Events
 
-`chart-ready`, `chart-error`, `point-click`, `point-hover`, `range-change` and `series-toggle`. The
+`chart-ready`, `chart-error`, `point-click`, `point-hover`, `range-change`, `series-toggle`, `legend-change`
+and `tooltip-change`. The
 semantic ones do not bubble: several components fire similarly named events, so a listener belongs on the
 element itself. The host also carries `data-chart-ready` once the first frame is drawn, which is the
 signal to wait on in a test.

package/dist/area-chart.js

@@ -1,5 +1,5 @@
-import { i as __decorate } from "./chart-series-BnpHO3lm.js";
-import { r as withAlpha } from "./uplot-paths-ChKohvIX.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { r as withAlpha } from "./uplot-paths-BRtF33Wh.js";
 import { LineChart } from "./line-chart.js";
 import { property } from "lit/decorators.js";
 import { customElement } from "@c2n/core/element-helper.js";

package/dist/bar-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 { t as barPaths } 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-CDHzOLwa.js";
+import { t as barPaths } from "./uplot-paths-BRtF33Wh.js";
 import { property } from "lit/decorators.js";
 import { customElement } from "@c2n/core/element-helper.js";
 //#region src/bar-chart.ts

package/dist/candlestick-chart.js

@@ -0,0 +1,139 @@
+import { columnValue } from "./chart-data.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import "./chart-series.js";
+import { t as EchartsChartBase } from "./echarts-chart-base-6JsZbB05.js";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/candlestick-chart.ts
+var CandlestickChart = class CandlestickChart extends EchartsChartBase {
+	constructor() {
+		super();
+		this.features = ["candlestick", "grid"];
+		this.openField = "open";
+		this.closeField = "close";
+		this.lowField = "low";
+		this.highField = "high";
+		this.name = "Price";
+		this.xType = "category";
+		this.tooltip = "axis";
+		this.legend = "none";
+	}
+	inferredSeries() {
+		return [
+			{
+				field: this.openField,
+				label: "Open"
+			},
+			{
+				field: this.closeField,
+				label: "Close"
+			},
+			{
+				field: this.lowField,
+				label: "Low"
+			},
+			{
+				field: this.highField,
+				label: "High"
+			}
+		];
+	}
+	coordinateSystem(context) {
+		const axisLine = { lineStyle: { color: context.theme.gridColor } };
+		const axisLabel = {
+			color: context.theme.axisColor,
+			fontSize: context.theme.fontSize
+		};
+		return {
+			grid: {
+				left: 48,
+				right: 16,
+				top: 16,
+				bottom: 32,
+				containLabel: false
+			},
+			xAxis: {
+				type: "category",
+				data: this.xLabels(),
+				boundaryGap: true,
+				axisLine,
+				axisLabel
+			},
+			yAxis: {
+				type: "value",
+				scale: true,
+				axisLine,
+				axisLabel,
+				splitLine: { lineStyle: { color: context.theme.gridColor } }
+			}
+		};
+	}
+	projectData(frame) {
+		const [open, close, low, high] = frame.columns;
+		return [Array.from({ length: frame.length }, (_item, index) => [
+			open ? columnValue(open, index) : null,
+			close ? columnValue(close, index) : null,
+			low ? columnValue(low, index) : null,
+			high ? columnValue(high, index) : null
+		])];
+	}
+	buildOptions(context) {
+		return {
+			...super.buildOptions(context),
+			series: [{
+				name: this.name,
+				...this.seriesOption(0, context)
+			}]
+		};
+	}
+	seriesOption(_index, context) {
+		return {
+			type: "candlestick",
+			itemStyle: {
+				color: context.theme.positive,
+				color0: context.theme.negative,
+				borderColor: context.theme.positive,
+				borderColor0: context.theme.negative
+			}
+		};
+	}
+	legendItems() {
+		const visible = !this.hiddenSeries.has(0);
+		return [{
+			label: this.name,
+			color: this.themeController.theme.positive,
+			visible,
+			toggle: () => this.setSeriesVisible(0, !visible),
+			series: {
+				field: this.openField,
+				label: this.name
+			},
+			index: 0
+		}];
+	}
+	xLabels() {
+		const frame = this.frame;
+		if (!frame) return [];
+		return Array.from({ length: frame.length }, (_item, index) => frame.labels?.[index] ?? this.formatX(columnValue(frame.x, index) ?? index));
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: "open-field"
+})], CandlestickChart.prototype, "openField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "close-field"
+})], CandlestickChart.prototype, "closeField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "low-field"
+})], CandlestickChart.prototype, "lowField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "high-field"
+})], CandlestickChart.prototype, "highField", void 0);
+__decorate([property({ type: String })], CandlestickChart.prototype, "name", void 0);
+CandlestickChart = __decorate([customElement("c2-candlestick-chart")], CandlestickChart);
+//#endregion
+export { CandlestickChart };

package/dist/{chart-base-C4-1TyKq.js → chart-base-BwPwRgHt.js}

@@ -1,6 +1,7 @@
 import { ChartFrameBuilder, columnValue } from "./chart-data.js";
 import { ChartThemeController, PROBE_COLORS } from "./chart-theme.js";
-import { i as __decorate, n as SERIES_CHANGE_EVENT, r as SERIES_TAG } from "./chart-series-BnpHO3lm.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { SERIES_CHANGE_EVENT, SERIES_TAG } from "./chart-series.js";
 import { property, query, state } from "lit/decorators.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { jsonPropertyConverter } from "@c2n/core/lit-helper.js";
@@ -31,6 +32,8 @@ var VIEW_ONLY_KEYS = /* @__PURE__ */ new Set([
 	"lazyRender",
 	"renderTooltip",
 	"renderLegendItem",
+	"hasLinkedLegend",
+	"hasLinkedTooltip",
 	"dataSource"
 ]);
 /** `stats.cpu` -> `Cpu`, `unit_price` -> `Unit price`: a readable label for an inferred field. */
@@ -68,7 +71,9 @@ var RESIZE_EPSILON = 1;
 * @event {CustomEvent<{ engine: string }>} chart-ready - Fired after the engine has loaded and drawn for the first time. The host also gains `data-chart-ready`, which is what a test should wait on.
 * @event {CustomEvent<{ error: unknown }>} chart-error - Fired when the engine fails to load or to draw. `detail.error` is the underlying failure.
 * @event {CustomEvent<ChartPointEventDetail>} point-click - Fired when a datum is clicked. Does not bubble: several components fire point events, so a listener belongs on the element itself.
-* @event {CustomEvent<ChartPointEventDetail>} point-hover - Fired as the pointer moves between data points, and with a `null` detail when it leaves the plot. Does not bubble.
+* @event {CustomEvent<ChartPointEventDetail | null>} point-hover - Fired as the pointer moves between data points, and with a `null` detail when it leaves the plot. Does not bubble.
+* @event {CustomEvent<ChartTooltipContext | null>} tooltip-change - Fired with the complete tooltip model as the pointer moves, and with `null` when it leaves. Used by `c2-chart-tooltip`.
+* @event {CustomEvent<ChartLegendChangeEventDetail>} legend-change - Fired when legend entries or visibility change. Used by `c2-chart-legend`.
 * @event {CustomEvent<ChartRangeEventDetail>} range-change - Fired after the user zooms or brushes. `detail.min` and `detail.max` are the new x bounds. Does not bubble.
 * @event {CustomEvent<ChartSeriesToggleEventDetail>} series-toggle - Fired when a legend entry is toggled. Does not bubble.
 *
@@ -163,6 +168,8 @@ var ChartBase = class extends LitElement {
 		this.hiddenSeries = /* @__PURE__ */ new Set();
 		this.hoverContext = null;
 		this.engineFailed = false;
+		this.hasLinkedLegend = false;
+		this.hasLinkedTooltip = false;
 		this.themeController = new ChartThemeController(this, () => this.handleThemeChange());
 		this.frameBuilder = new ChartFrameBuilder();
 		this.#creating = false;
@@ -175,6 +182,9 @@ var ChartBase = class extends LitElement {
 			height: 0
 		};
 		this.#visible = false;
+		this.#tooltipContext = null;
+		this.#legendPresenters = /* @__PURE__ */ new Set();
+		this.#tooltipPresenters = /* @__PURE__ */ new Set();
 		this.#handleSeriesChange = (event) => {
 			event.stopPropagation();
 			this.#collectSeries();
@@ -194,6 +204,17 @@ var ChartBase = class extends LitElement {
 	#intersectionObserver;
 	#visible;
 	#unsubscribe;
+	#tooltipContext;
+	#legendPresenters;
+	#tooltipPresenters;
+	/** Restores interaction state after an engine instance is created or replaced. */
+	restoreVisibility(adapter) {
+		for (const index of this.hiddenSeries) adapter.setSeriesVisibility(index, false);
+	}
+	/** Whether changing chart data can change the legend model. Pie charts use row labels as entries. */
+	get legendDependsOnData() {
+		return false;
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener(SERIES_CHANGE_EVENT, this.#handleSeriesChange);
@@ -251,6 +272,12 @@ var ChartBase = class extends LitElement {
 		super.updated(changed);
 		if (isServer) return;
 		this.#sync();
+		if (changed.has("tooltip") && this.tooltip === "none") {
+			this.#tooltipContext = null;
+			this.#setHover(null);
+			this.dispatchEvent(new CustomEvent("tooltip-change", { detail: null }));
+		}
+		if ([...changed.keys()].some((key) => key !== "hoverContext")) this.notifyLegendChange();
 	}
 	/**
 	* Replaces the data without going through the update queue. Equivalent to assigning `data`, but skips
@@ -281,6 +308,7 @@ var ChartBase = class extends LitElement {
 		else next.add(index);
 		this.hiddenSeries = next;
 		this.adapter?.setSeriesVisibility(index, visible);
+		this.notifyLegendChange();
 		const series = this.resolvedSeries[index];
 		if (!series) return;
 		this.dispatchEvent(new CustomEvent("series-toggle", { detail: {
@@ -290,6 +318,42 @@ var ChartBase = class extends LitElement {
 			hidden: [...next]
 		} }));
 	}
+	/** Current entries for a linked `c2-chart-legend`. */
+	getLegendItems() {
+		return this.legendItems();
+	}
+	/** Current hover model for a linked `c2-chart-tooltip`. */
+	getTooltipContext() {
+		return this.#tooltipContext;
+	}
+	/** Plot bounds used to place a linked floating tooltip in viewport coordinates. */
+	getPlotBounds() {
+		return (this.plotElement ?? this).getBoundingClientRect();
+	}
+	/** Registers an external legend and suppresses the built-in legend until it disconnects. */
+	registerLegendPresenter(presenter) {
+		this.#legendPresenters.add(presenter);
+		this.hasLinkedLegend = this.#legendPresenters.size > 0;
+	}
+	/** Removes an external legend registration. */
+	unregisterLegendPresenter(presenter) {
+		this.#legendPresenters.delete(presenter);
+		this.hasLinkedLegend = this.#legendPresenters.size > 0;
+	}
+	/** Registers an external tooltip and suppresses the built-in tooltip until it disconnects. */
+	registerTooltipPresenter(presenter) {
+		this.#tooltipPresenters.add(presenter);
+		this.hasLinkedTooltip = this.#tooltipPresenters.size > 0;
+	}
+	/** Removes an external tooltip registration. */
+	unregisterTooltipPresenter(presenter) {
+		this.#tooltipPresenters.delete(presenter);
+		this.hasLinkedTooltip = this.#tooltipPresenters.size > 0;
+	}
+	/** Notifies linked legends after a subclass changes a data-shaped legend such as pie slices. */
+	notifyLegendChange() {
+		this.dispatchEvent(new CustomEvent("legend-change", { detail: { items: this.getLegendItems() } }));
+	}
 	/** The series in draw order: `c2-chart-series` children when present, otherwise the `series` property. */
 	get resolvedSeries() {
 		if (this.seriesElements.length > 0) return this.seriesElements.filter((element) => !element.hidden).map((element) => element.toConfig());
@@ -359,13 +423,17 @@ var ChartBase = class extends LitElement {
 			await this.#createChart();
 			return;
 		}
+		let restoreAfterData = false;
 		if (this.#optionsDirty) {
 			this.#optionsDirty = false;
-			this.adapter.setOptions(this.buildOptions(this.buildContext()), this.#optionsMode);
+			const mode = this.#optionsMode;
+			this.adapter.setOptions(this.buildOptions(this.buildContext()), mode);
 			this.#optionsMode = "merge";
+			restoreAfterData = mode === "replace";
 			this.#dataDirty = true;
 		}
 		if (this.#dataDirty) this.#flushData();
+		if (restoreAfterData) this.restoreVisibility(this.adapter);
 	}
 	async #createChart() {
 		if (this.#creating || !this.plotElement || !this.frame) return;
@@ -385,7 +453,7 @@ var ChartBase = class extends LitElement {
 			this.adapter = adapter;
 			this.#optionsDirty = false;
 			this.#dataDirty = false;
-			for (const index of this.hiddenSeries) adapter.setSeriesVisibility(index, false);
+			this.restoreVisibility(adapter);
 			this.setAttribute("data-chart-ready", "true");
 			this.dispatchEvent(new CustomEvent("chart-ready", { detail: { engine: this.engineName } }));
 		} catch (error) {
@@ -402,6 +470,7 @@ var ChartBase = class extends LitElement {
 		if (this.#appended > 0 && this.adapter.appendData) this.adapter.appendData(projected, this.#appended);
 		else this.adapter.setData(projected);
 		this.#appended = 0;
+		if (this.legendDependsOnData) this.notifyLegendChange();
 	}
 	#handleResize(entries) {
 		const rect = entries[entries.length - 1]?.contentRect;
@@ -451,12 +520,18 @@ var ChartBase = class extends LitElement {
 		} else this.#unsubscribe = () => controller.abort();
 	}
 	#handleHover(detail) {
-		if (!detail || !this.frame || this.tooltip === "none") {
+		if (!detail || !this.frame) {
+			this.#tooltipContext = null;
 			this.#setHover(null);
+			this.dispatchEvent(new CustomEvent("tooltip-change", { detail: null }));
+			this.dispatchEvent(new CustomEvent("point-hover", { detail: null }));
 			return;
 		}
 		const context = this.#tooltipContextAt(detail);
-		this.#setHover(context);
+		const tooltipContext = this.tooltip === "none" ? null : context;
+		this.#tooltipContext = tooltipContext;
+		this.#setHover(this.hasLinkedTooltip ? null : tooltipContext);
+		this.dispatchEvent(new CustomEvent("tooltip-change", { detail: tooltipContext }));
 		const point = this.#pointAt(detail.index, detail.seriesIndex);
 		if (point) this.dispatchEvent(new CustomEvent("point-hover", { detail: point }));
 	}
@@ -468,7 +543,7 @@ var ChartBase = class extends LitElement {
 	#setHover(context) {
 		const previous = this.hoverContext;
 		if (context && this.tooltipElement) this.tooltipElement.style.transform = `translate(${context.px}px, ${context.py}px)`;
-		if (previous && context && previous.index === context.index) return;
+		if (previous && context && previous.index === context.index && (this.tooltip !== "item" || previous.entries[0]?.seriesIndex === context.entries[0]?.seriesIndex)) return;
 		this.hoverContext = context;
 	}
 	#tooltipContextAt(detail) {
@@ -541,8 +616,8 @@ var ChartBase = class extends LitElement {
 		return new Intl.NumberFormat(this.locale, { maximumFractionDigits: 2 }).format(value);
 	}
 	render() {
-		const legendBefore = this.legend === "top" || this.legend === "start";
-		const legendAfter = this.legend === "bottom" || this.legend === "end";
+		const legendBefore = !this.hasLinkedLegend && (this.legend === "top" || this.legend === "start");
+		const legendAfter = !this.hasLinkedLegend && (this.legend === "bottom" || this.legend === "end");
 		const side = this.legend === "start" || this.legend === "end";
 		return html`
       <div class="frame ${side ? "frame--side" : ""}" part="frame">
@@ -551,7 +626,9 @@ var ChartBase = class extends LitElement {
           <!-- No bindings inside: Lit never patches this node, so the engine's canvas survives updates. -->
           <div class="plot" part="plot"></div>
           <div class="overlay" part="overlay">
-            <div class="tooltip" part="tooltip" role="tooltip" ?hidden=${!this.hoverContext || this.tooltip === "none"}>${this.renderTooltipBody()}</div>
+            <div class="tooltip" part="tooltip" role="tooltip" ?hidden=${!this.hoverContext || this.tooltip === "none" || this.hasLinkedTooltip}>
+              ${this.renderTooltipBody()}
+            </div>
             <div class="actions" part="actions"><slot name="actions"></slot></div>
           </div>
           ${this.renderState()}
@@ -662,5 +739,7 @@ __decorate([state()], ChartBase.prototype, "seriesElements", void 0);
 __decorate([state()], ChartBase.prototype, "hiddenSeries", void 0);
 __decorate([state()], ChartBase.prototype, "hoverContext", void 0);
 __decorate([state()], ChartBase.prototype, "engineFailed", void 0);
+__decorate([state()], ChartBase.prototype, "hasLinkedLegend", void 0);
+__decorate([state()], ChartBase.prototype, "hasLinkedTooltip", void 0);
 //#endregion
 export { chart_default as n, ChartBase as t };

package/dist/chart-base.js

@@ -1,2 +1,2 @@
-import { t as ChartBase } from "./chart-base-C4-1TyKq.js";
+import { t as ChartBase } from "./chart-base-BwPwRgHt.js";
 export { ChartBase };

package/dist/chart-legend-DJE3HO7C.js

@@ -0,0 +1,49 @@
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { t as ChartLinkedElement } from "./chart-link-C9vN9Y6c.js";
+import { property, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { html, unsafeCSS } from "lit";
+//#region src/chart-legend.scss?inline
+var chart_legend_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--c2-chart__legend--gap,12px);\n  padding: var(--c2-chart__legend--padding,0);\n  color: var(--c2-chart__legend--color,#71717a);\n  font-size: var(--c2-chart__legend--font-size,12px);\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.item[aria-pressed=false] {\n  opacity: var(--c2-chart__legend__disabled--opacity,0.38);\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}";
+//#endregion
+//#region src/chart-legend.ts
+var ChartLegend = class ChartLegend extends ChartLinkedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.#handleLegendChange = (event) => {
+			this.items = event.detail.items;
+		};
+	}
+	static {
+		this.styles = unsafeCSS(chart_legend_default);
+	}
+	#handleLegendChange;
+	chartConnected(chart) {
+		chart.registerLegendPresenter(this);
+		chart.addEventListener("legend-change", this.#handleLegendChange);
+		this.items = chart.getLegendItems();
+	}
+	chartDisconnected(chart) {
+		chart.removeEventListener("legend-change", this.#handleLegendChange);
+		chart.unregisterLegendPresenter(this);
+		this.items = [];
+	}
+	render() {
+		const content = this.renderLegend?.(this.items) ?? this.items.map((item) => html`
+          <button class="item" part="item" type="button" aria-pressed=${item.visible ? "true" : "false"} @click=${() => item.toggle()}>
+            ${this.renderLegendItem?.(item) ?? html`
+                <span class="marker" part="marker" style="background:${item.color}"></span>
+                <span>${item.label}</span>
+              `}
+          </button>
+        `);
+		return html`<slot>${content}</slot>`;
+	}
+};
+__decorate([property({ attribute: false })], ChartLegend.prototype, "renderLegend", void 0);
+__decorate([property({ attribute: false })], ChartLegend.prototype, "renderLegendItem", void 0);
+__decorate([state()], ChartLegend.prototype, "items", void 0);
+ChartLegend = __decorate([customElement("c2-chart-legend")], ChartLegend);
+//#endregion
+export { ChartLegend as t };

package/dist/chart-legend.js

@@ -0,0 +1,2 @@
+import { t as ChartLegend } from "./chart-legend-DJE3HO7C.js";
+export { ChartLegend };

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 };