@c2n/chart 0.0.7 → 0.0.8

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-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,18 @@
-import { t as ChartBase } from "./chart-base-C4-1TyKq.js";
+import { t as ChartBase } from "./chart-base-BwPwRgHt.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-CDHzOLwa.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-6JsZbB05.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 { 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, 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-6JsZbB05.js}

@@ -1,19 +1,17 @@
-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-BwPwRgHt.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]),
 	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;

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-6JsZbB05.js";
 export { EchartsChartBase };

package/dist/gauge-chart.js

@@ -0,0 +1,103 @@
+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/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.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: { lineStyle: { color: context.theme.axisColor } },
+			splitLine: { 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, "43%"]
+			},
+			detail: {
+				color: context.theme.color,
+				fontSize: Math.max(20, context.theme.fontSize * 1.8),
+				fontWeight: 650,
+				offsetCenter: [0, "67%"],
+				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);
+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-CDHzOLwa.js";
+import { n as linePaths } from "./uplot-paths-BRtF33Wh.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-6JsZbB05.js";
 import { property, state } from "lit/decorators.js";
 import { customElement } from "@c2n/core/element-helper.js";
 //#region src/pie-chart.ts
@@ -16,6 +17,9 @@ var PieChart = class PieChart extends EchartsChartBase {
 		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 +49,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";

package/dist/scatter-chart.js

@@ -0,0 +1,40 @@
+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/scatter-chart.ts
+var ScatterChart = class ScatterChart extends EchartsChartBase {
+	constructor() {
+		super();
+		this.features = ["scatter", "grid"];
+		this.symbolSize = 10;
+		this.symbol = "circle";
+		this.large = false;
+		this.largeThreshold = 2e3;
+		this.tooltip = "item";
+	}
+	seriesOption(index, context) {
+		return {
+			type: "scatter",
+			symbol: this.symbol,
+			symbolSize: this.symbolSize,
+			large: this.large,
+			largeThreshold: this.largeThreshold,
+			itemStyle: { color: this.colorOf(context.series[index] ?? { field: "" }, index, context.theme) }
+		};
+	}
+};
+__decorate([property({
+	type: Number,
+	attribute: "symbol-size"
+})], ScatterChart.prototype, "symbolSize", void 0);
+__decorate([property({ type: String })], ScatterChart.prototype, "symbol", void 0);
+__decorate([property({ type: Boolean })], ScatterChart.prototype, "large", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "large-threshold"
+})], ScatterChart.prototype, "largeThreshold", void 0);
+ScatterChart = __decorate([customElement("c2-scatter-chart")], ScatterChart);
+//#endregion
+export { ScatterChart };

package/dist/sparkline.js

@@ -1,7 +1,7 @@
-import { n as chart_default } from "./chart-base-C4-1TyKq.js";
-import { i as __decorate } from "./chart-series-BnpHO3lm.js";
-import { t as UplotChartBase } from "./uplot-chart-base-BWr0zJE2.js";
-import { n as linePaths, r as withAlpha } from "./uplot-paths-ChKohvIX.js";
+import { n as chart_default } from "./chart-base-BwPwRgHt.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
+import { t as UplotChartBase } from "./uplot-chart-base-CDHzOLwa.js";
+import { n as linePaths, r as withAlpha } from "./uplot-paths-BRtF33Wh.js";
 import { property } from "lit/decorators.js";
 import { customElement } from "@c2n/core/element-helper.js";
 import { css, unsafeCSS } from "lit";

package/dist/{uplot-chart-base-BWr0zJE2.js → uplot-chart-base-CDHzOLwa.js}

@@ -1,5 +1,5 @@
-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-BwPwRgHt.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
 import { property } from "lit/decorators.js";
 //#region src/engines/uplot-loader.ts
 var pending;
@@ -44,11 +44,27 @@ async function createUplotAdapter() {
 					events?.hover(null);
 					return;
 				}
+				let nearestSeriesIndex = 0;
+				let nearestDistance = Number.POSITIVE_INFINITY;
+				const cursorY = self.cursor.top ?? 0;
+				for (let engineIndex = 1; engineIndex < self.series.length; engineIndex += 1) {
+					const series = self.series[engineIndex];
+					const value = data[engineIndex]?.[index];
+					if (!series?.show || value === null || value === void 0 || !Number.isFinite(value)) continue;
+					const pointY = self.valToPos(value, series.scale ?? "y", true);
+					const distance = Math.abs(pointY - cursorY);
+					if (distance < nearestDistance) {
+						nearestDistance = distance;
+						nearestSeriesIndex = engineIndex - 1;
+					}
+				}
+				const pointer = self.cursor.event;
+				const bounds = container?.getBoundingClientRect();
 				events?.hover({
 					index,
-					seriesIndex: Math.max(1, self.cursor.idxs?.findIndex((value) => value !== null && value !== void 0) ?? 1) - 1,
-					px: self.cursor.left ?? 0,
-					py: self.cursor.top ?? 0
+					seriesIndex: nearestSeriesIndex,
+					px: pointer && bounds ? pointer.clientX - bounds.left : self.cursor.left ?? 0,
+					py: pointer && bounds ? pointer.clientY - bounds.top : self.cursor.top ?? 0
 				});
 			}],
 			setSelect: [(self) => {

package/dist/uplot-chart-base.js

@@ -1,2 +1,2 @@
-import { t as UplotChartBase } from "./uplot-chart-base-BWr0zJE2.js";
+import { t as UplotChartBase } from "./uplot-chart-base-CDHzOLwa.js";
 export { UplotChartBase };

package/dist/{uplot-paths-ChKohvIX.js → uplot-paths-BRtF33Wh.js}

@@ -1,4 +1,4 @@
-import { n as loadedUplot } from "./uplot-chart-base-BWr0zJE2.js";
+import { n as loadedUplot } from "./uplot-chart-base-CDHzOLwa.js";
 //#region src/engines/uplot-paths.ts
 var cache = /* @__PURE__ */ new Map();
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/chart",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/chart.js",
   "exports": {
@@ -28,10 +28,30 @@
       "types": "./types/src/pie-chart.d.ts",
       "default": "./dist/pie-chart.js"
     },
+    "./gauge-chart.js": {
+      "types": "./types/src/gauge-chart.d.ts",
+      "default": "./dist/gauge-chart.js"
+    },
+    "./scatter-chart.js": {
+      "types": "./types/src/scatter-chart.d.ts",
+      "default": "./dist/scatter-chart.js"
+    },
+    "./candlestick-chart.js": {
+      "types": "./types/src/candlestick-chart.d.ts",
+      "default": "./dist/candlestick-chart.js"
+    },
     "./chart-series.js": {
       "types": "./types/src/chart-series.d.ts",
       "default": "./dist/chart-series.js"
     },
+    "./chart-legend.js": {
+      "types": "./types/src/chart-legend.d.ts",
+      "default": "./dist/chart-legend.js"
+    },
+    "./chart-tooltip.js": {
+      "types": "./types/src/chart-tooltip.d.ts",
+      "default": "./dist/chart-tooltip.js"
+    },
     "./chart-base.js": {
       "types": "./types/src/chart-base.d.ts",
       "default": "./dist/chart-base.js"
@@ -84,6 +104,9 @@
     "graph",
     "data visualization",
     "line chart",
+    "gauge chart",
+    "scatter plot",
+    "candlestick chart",
     "sparkline",
     "uplot",
     "echarts",
@@ -121,7 +144,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.7",
+    "@c2n/core": "0.0.8",
     "lit": "3.3.3"
   },
   "devDependencies": {
@@ -142,5 +165,5 @@
       "optional": true
     }
   },
-  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
 }

package/react.d.ts

@@ -10,9 +10,14 @@
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 import type { AreaChart } from '@c2n/chart/area-chart.js'
 import type { BarChart } from '@c2n/chart/bar-chart.js'
+import type { CandlestickChart } from '@c2n/chart/candlestick-chart.js'
+import type { ChartLegend } from '@c2n/chart/chart-legend.js'
 import type { ChartSeries } from '@c2n/chart/chart-series.js'
+import type { ChartTooltip } from '@c2n/chart/chart-tooltip.js'
+import type { GaugeChart } from '@c2n/chart/gauge-chart.js'
 import type { LineChart } from '@c2n/chart/line-chart.js'
 import type { PieChart } from '@c2n/chart/pie-chart.js'
+import type { ScatterChart } from '@c2n/chart/scatter-chart.js'
 import type { Sparkline } from '@c2n/chart/sparkline.js'
 
 /** Standard React host-element attributes plus the element's own public properties. */
@@ -23,9 +28,14 @@ declare module 'react' {
     interface IntrinsicElements {
       'c2-area-chart': C2Props<AreaChart>
       'c2-bar-chart': C2Props<BarChart>
+      'c2-candlestick-chart': C2Props<CandlestickChart>
+      'c2-chart-legend': C2Props<ChartLegend>
       'c2-chart-series': C2Props<ChartSeries>
+      'c2-chart-tooltip': C2Props<ChartTooltip>
+      'c2-gauge-chart': C2Props<GaugeChart>
       'c2-line-chart': C2Props<LineChart>
       'c2-pie-chart': C2Props<PieChart>
+      'c2-scatter-chart': C2Props<ScatterChart>
       'c2-sparkline': C2Props<Sparkline>
     }
   }