@c2n/chart 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,81 @@
+# @c2n/chart
+
+Line, area, bar, sparkline and pie charts as custom elements, from one package.
+
+```bash
+npm install @c2n/chart uplot     # line, area, bar, sparkline
+npm install @c2n/chart echarts   # pie
+```
+
+```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>
+```
+
+```js
+import '@c2n/chart/line-chart.js' // one tag
+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            |
+
+## Engines
+
+Both libraries are **optional peer dependencies** loaded through a dynamic `import()` on first paint, so
+nothing is bundled into the package and a page that only shows a sparkline never downloads ECharts. Install
+whichever engines your charts need.
+
+## Data
+
+`data` accepts row objects, a bare `number[]`, columnar `[xs, ys…]`, or an already-normalised frame.
+Internally everything becomes one columnar frame of `Float64Array`s, which is the shape uPlot draws
+natively and what makes appending O(1).
+
+```js
+chart.data = rows // full replace
+chart.revision++ // after mutating the array in place
+chart.appendPoint(x, [a, b]) // one realtime tick
+```
+
+`data` is compared by **identity**, never deep-diffed. A change to `data` or `revision` alone is pushed
+straight into the engine — Lit does not render, and the canvas container is not touched — so a streaming
+tick costs one engine redraw and nothing else. Anything else counts as presentation and rebuilds the engine
+options. Use `max-points` to keep a bounded window.
+
+For a lazy or streaming source, set `dataSource` instead: `getWindow()` is the pull half, and an optional
+`subscribe()` feeds ticks straight into the append path.
+
+## Sizing
+
+A canvas has no intrinsic size, so a chart is sized by its host: `--c2-chart--height` (320px, or 32px on a
+sparkline) plus whatever width the layout gives it. A `ResizeObserver` keeps the canvas in step, and the
+plot box is `contain: strict` so a resize cannot feed back into itself.
+
+## Theming
+
+Every element shares the `--c2-chart__*` namespace, so theming once themes them all. The palette is
+`--c2-chart__series-1--color` … `--c2-chart__series-8--color`, wired by `@c2n/theme` to the
+`--c2-theme--chart-series-*` tokens, which carry light and dark values.
+
+Because the plot is a canvas, these variables are resolved with `getComputedStyle` and handed to the
+engine. They behave like any other CSS variable — including under a dark theme, which the element watches
+for — but the marks cannot be reached with `::part()`. The chrome around the plot (legend, tooltip, state
+messages) is ordinary DOM and does expose parts.
+
+## Events
+
+`chart-ready`, `chart-error`, `point-click`, `point-hover`, `range-change` and `series-toggle`. 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

@@ -0,0 +1,29 @@
+import { i as __decorate } from "./chart-series-BnpHO3lm.js";
+import { r as withAlpha } from "./uplot-paths-ChKohvIX.js";
+import { LineChart } from "./line-chart.js";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/area-chart.ts
+var AreaChart = class AreaChart extends LineChart {
+	seriesStyle(series, index, context) {
+		const base = super.seriesStyle(series, index, context);
+		const color = this.colorOf(series, index, context.theme);
+		const opacity = this.fillOpacity ?? this.areaOpacity(context);
+		return {
+			...base,
+			fill: withAlpha(color, opacity)
+		};
+	}
+	/** Reads `--c2-chart__area--opacity` off the host, falling back to uPlot-friendly 0.15. */
+	areaOpacity(_context) {
+		const raw = parseFloat(getComputedStyle(this).getPropertyValue("--c2-chart__area--opacity"));
+		return Number.isFinite(raw) ? raw : .15;
+	}
+};
+__decorate([property({
+	type: Number,
+	attribute: "fill-opacity"
+})], AreaChart.prototype, "fillOpacity", void 0);
+AreaChart = __decorate([customElement("c2-area-chart")], AreaChart);
+//#endregion
+export { AreaChart };

package/dist/bar-chart.js

@@ -0,0 +1,65 @@
+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 { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/bar-chart.ts
+var BarChart = class BarChart extends UplotChartBase {
+	constructor(..._args) {
+		super(..._args);
+		this.barWidth = .6;
+		this.barGap = .1;
+	}
+	seriesStyle(series, index, context) {
+		const color = this.colorOf(series, index, context.theme);
+		return {
+			stroke: color,
+			fill: color,
+			width: 0,
+			paths: barPaths(this.barWidth, this.barGap, index, context.series.length),
+			points: { show: false }
+		};
+	}
+	/** A band chart reads its x as discrete slots, so the scale is padded by half a band at each end. */
+	decorateOptions(options, _context) {
+		return {
+			...options,
+			scales: {
+				...options.scales,
+				x: {
+					...options.scales?.x,
+					time: false,
+					range: (_self, min, max) => [min - .5, max + .5]
+				}
+			},
+			cursor: {
+				...options.cursor,
+				x: true,
+				y: false
+			}
+		};
+	}
+	/**
+	* Bars sit on category labels when there are any, so the tick shows the label rather than the index.
+	*
+	* uPlot picks its own split values, and on a handful of bands those land on halves — which would round
+	* to the same label twice and then off the end of the list. A band has no label between its slots, so
+	* those ticks are blank.
+	*/
+	formatAxisX(value) {
+		const labels = this.frame?.labels;
+		if (!labels) return super.formatAxisX(value);
+		return Number.isInteger(value) ? labels[value] ?? "" : "";
+	}
+};
+__decorate([property({
+	type: Number,
+	attribute: "bar-width"
+})], BarChart.prototype, "barWidth", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "bar-gap"
+})], BarChart.prototype, "barGap", void 0);
+BarChart = __decorate([customElement("c2-bar-chart")], BarChart);
+//#endregion
+export { BarChart };