@fusedashlabs/widgets 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,72 @@
+# Changelog
+
+## Unreleased
+
+### Added
+
+- `<ui9000-spark-line-chart>` — D3 port of FuseDash SparkLineChart (datetime x, multi-series groupBy, crosshair hover).
+- Lazy entry `@ui9000/widgets/lazy/spark-line-chart`.
+- Storybook stories with `spark-line.fusedash.json` fixture.
+- `<ui9000-spark-area-chart>` — D3 port of FuseDash SparkAreaChart (SparkLine + area fill to y=0 at opacity 0.1).
+- Lazy entry `@ui9000/widgets/lazy/spark-area-chart`.
+- Storybook stories with `spark-area.fusedash.json` fixture.
+- `<ui9000-scatter-sparkline-chart>` — D3 port of FuseDash ScatterSparklineChart (aggregated datetime line + gradient fill + jittered scatter markers).
+- Lazy entry `@ui9000/widgets/lazy/scatter-sparkline-chart`.
+- Storybook stories with `scatter-sparkline.fusedash.json` fixture.
+- `<ui9000-chart-renderer>` — FuseDash ChartRenderer dispatcher (chartType → lazy chart mount).
+- Lazy entry `@ui9000/widgets/lazy/chart-renderer`.
+- Storybook stories dispatching line, pie, spark-line, and scatter-sparkline fixtures.
+- `<ui9000-radar-chart>` — D3 port of FuseDash RadarChart (single + grouped, polar grid, marker hover).
+- Lazy entry `@ui9000/widgets/lazy/radar-chart`.
+- Storybook stories with `radar.fusedash.json` and `radar-grouped.fusedash.json` fixtures.
+- `<ui9000-waterfall-chart>` — D3 port of FuseDash WaterfallChart (horizontal/vertical, cumulative levels + delta-flag fixtures).
+- Lazy entry `@ui9000/widgets/lazy/waterfall-chart`.
+- Storybook stories with `waterfall.fusedash.json` fixture.
+- `<ui9000-violin-chart>` — D3 port of FuseDash ViolinChart (horizontal/vertical KDE + box overlay).
+- Lazy entry `@ui9000/widgets/lazy/violin-chart`.
+- Storybook stories with `violin.fusedash.json` fixture.
+- `<ui9000-area-grouped-bar-chart>` — D3 port of FuseDash AreaGroupedBarChart (grouped bars + area/line overlay, vertical).
+- Lazy entry `@ui9000/widgets/lazy/area-grouped-bar-chart`.
+- Storybook stories with `area-grouped-bar.fusedash.json` fixture.
+- `<ui9000-area-chart>` — D3 port of FuseDash AreaChart (grouped + stacked, gradient fill).
+- Lazy entry `@ui9000/widgets/lazy/area-chart`.
+- Storybook stories with `area.fusedash.json` fixture.
+- `<ui9000-donut-chart>` — D3 port of FuseDash DonutChart (pie + inner hole, 30% / min 25px ring).
+- Lazy entry `@ui9000/widgets/lazy/donut-chart`.
+- Storybook stories with `donut.fusedash.json` fixture.
+- `<ui9000-kpi-widget>` — Lit port of FuseDash KPI cards (`single_value` grid + `high/low_overall`).
+- Lazy entry `@ui9000/widgets/lazy/kpi-widget`.
+- Storybook stories with `kpis.fusedash.json` and `kpi-high-low.fusedash.json` fixtures.
+- `<ui9000-pie-chart>` — D3 port of FuseDash PieChart (full disc + donut via `inner-radius-ratio`).
+- Lazy entry `@ui9000/widgets/lazy/pie-chart`.
+- Storybook stories with `pie.fusedash.json` fixture.
+- `<ui9000-scatter-plot>` — D3 port of FuseDash ScatterPlot (groupBy markers, optional reference line).
+- Lazy entry `@ui9000/widgets/lazy/scatter-plot-chart`.
+- Storybook stories with `scatter.fusedash.json` fixture.
+- `<ui9000-bubble-chart>` — D3 port of FuseDash BubbleChart (linear X/Y, abs(y) radius bands, groupBy fill).
+- Lazy entry `@ui9000/widgets/lazy/bubble-chart`.
+- Storybook stories with `bubble.fusedash.json` fixture.
+- `<ui9000-donut-group-chart>` — D3 port of FuseDash DonutGroupChart (KPI gauges against `maximalValue`, breakdown donuts, status badges).
+- Lazy entry `@ui9000/widgets/lazy/donut-group-chart`.
+- Storybook stories, playground panel and `docs/DONUT_GROUP_CHART.md`.
+
+## 0.2.0 — 2026-08-26
+
+### Added
+
+- `<ui9000-step-line-chart>` — D3 port of FuseDash StepLineChart (KS/ROC overlays, multi-series, time/categorical x).
+- Lazy entry `@ui9000/widgets/lazy/step-line-chart`.
+- Storybook stories and `docs/STEP_LINE_CHART.md`.
+
+### Fixed
+
+- ESLint flat config: browser/vitest/node globals (CI `lint` step).
+- `npm run build` now refreshes `docs/BUNDLE_SIZE_REPORT.json`.
+
+### Publish
+
+Requires `NPM_TOKEN` in GitHub repo secrets. Push tag `v0.2.0` on `main` to run `.github/workflows/release.yml`.
+
+## 0.1.0 — 2026-08-24
+
+- Initial publish: line chart, lollipop, context, lazy loaders.

package/LICENSE

@@ -0,0 +1,17 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   Copyright 2026 FuseLab Creative
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,91 @@
+# @ui9000/widgets
+
+Props-only chart web components for **UI9000** MCP chat rendering (Tier B).
+
+Apache-2.0 · Lit · **D3 only** · no Redux · per-chart lazy entry points.
+
+## Porting charts
+
+Follow the project skill: [`.cursor/skills/port-chart/SKILL.md`](./.cursor/skills/port-chart/SKILL.md).
+
+**Hard rule:** every chart is rewritten in **D3**. Visx/React plot code from FuseDash is never copied in.
+
+## Published charts
+
+| Component | Tag | Import |
+|-----------|-----|--------|
+| Line chart | `<ui9000-line-chart>` | `@ui9000/widgets/line-chart` |
+| Lollipop | `<ui9000-lollipop>` | `@ui9000/widgets/lollipop` |
+| Step line chart | `<ui9000-step-line-chart>` | `@ui9000/widgets/step-line-chart` |
+| Bar chart | `<ui9000-bar-chart>` | `@ui9000/widgets/bar-chart` |
+| Donut group | `<ui9000-donut-group-chart>` | `@ui9000/widgets/donut-group-chart` |
+| Histogram | `<ui9000-histogram-chart>` | `@ui9000/widgets/histogram-chart` |
+| Punchcard | `<ui9000-punchcard-chart>` | `@ui9000/widgets/punchcard-chart` |
+| Box plot | `<ui9000-box-plot-chart>` | `@ui9000/widgets/box-plot-chart` |
+| Sankey | `<ui9000-sankey-chart>` | `@ui9000/widgets/sankey-chart` |
+
+Docs: [LINE_CHART.md](./docs/LINE_CHART.md) · [LOLLIPOP_CHART.md](./docs/LOLLIPOP_CHART.md) · [STEP_LINE_CHART.md](./docs/STEP_LINE_CHART.md) · [BAR_CHART.md](./docs/BAR_CHART.md) · [DONUT_GROUP_CHART.md](./docs/DONUT_GROUP_CHART.md) · [MAP_DECISION.md](./docs/MAP_DECISION.md)
+
+## Folder layout (per chart)
+
+```
+src/components/<name>/
+  index.ts / metadata.json
+  element/   # Lit WC + styles
+  render/    # D3 draw
+  lib/       # types, normalize, domain
+  tests/
+```
+
+## Install
+
+```bash
+npm install @ui9000/widgets
+```
+
+## Quick start
+
+```ts
+import { applyWidgetContext } from '@ui9000/widgets/context';
+import loadLollipop from '@ui9000/widgets/lazy/lollipop';
+
+applyWidgetContext(document.body, { mode: 'light' });
+await loadLollipop();
+
+const el = document.createElement('ui9000-lollipop');
+el.setAttribute('data', JSON.stringify([
+  { label: 'A', value: 42 },
+  { label: 'B', value: 58 },
+]));
+el.setAttribute('orientation', 'vertical');
+document.body.appendChild(el);
+```
+
+## Development
+
+```bash
+npm install
+npm run build && npm test
+npm run storybook   # http://localhost:6006
+npm run dev         # light Vite playground
+```
+
+## Repository
+
+https://github.com/fuselab-creative/ui9000-widgets
+
+## Publish (maintainers)
+
+1. Merge to `main`, ensure CI is green.
+2. Set `NPM_TOKEN` in GitHub → Settings → Secrets (npmjs automation token with publish scope).
+3. Tag and push:
+
+```bash
+npm run build && npm test
+git tag v0.2.0
+git push origin main --tags
+```
+
+Release workflow (`.github/workflows/release.yml`) runs `npm publish --provenance --access public` on `v*` tags.
+
+Manual fallback: `npm publish --access public` (must be logged in to npm).

package/dist/components/area-chart/element/styles.d.ts

@@ -0,0 +1,2 @@
+export { lineChartStyles as areaChartStyles } from '../../line-chart/element/styles.js';
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/area-chart/element/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/area-chart/element/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/components/area-chart/element/ui9000-area-chart.d.ts

@@ -0,0 +1,33 @@
+import { PropertyValues } from 'lit';
+import { Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';
+import { WidgetScale } from '../../../types/index.js';
+import { MarkerShape } from '../../../utils/fusedash-visual.js';
+export declare class Ui9000AreaChart extends Ui9000ChartElement {
+    static styles: import('lit').CSSResult[];
+    scale: WidgetScale;
+    marker: MarkerShape;
+    showPoints: boolean;
+    showGrid: boolean;
+    showLegend: boolean;
+    showTooltip: boolean;
+    private _tooltip;
+    private _empty;
+    private _resizeObserver?;
+    private _raf;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    private scheduleDraw;
+    private parseData;
+    private xDomainHint;
+    private renderLegend;
+    private draw;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui9000-area-chart': Ui9000AreaChart;
+    }
+}
+export declare function registerAreaChart(): void;
+//# sourceMappingURL=ui9000-area-chart.d.ts.map

package/dist/components/area-chart/element/ui9000-area-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui9000-area-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/area-chart/element/ui9000-area-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAO3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAUrE,qBACa,eAAgB,SAAQ,kBAAkB;IACrD,OAAgB,MAAM,4BAAuC;IAG7D,KAAK,EAAE,WAAW,CAAa;IAG/B,MAAM,EAAE,WAAW,CAAW;IAG9B,UAAU,UAAQ;IAGlB,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,QAAQ,CAMA;IAGhB,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,IAAI;IAyCH,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,wBAAgB,iBAAiB,IAAI,IAAI,CAIxC"}

package/dist/components/area-chart/element/ui9000-area-chart.js

@@ -0,0 +1,178 @@
+import { nothing, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
+import { renderChartLegend } from "../../../element/chart-legend-render.js";
+import { readThemeFromElement } from "../../../context/widget-context.js";
+import { parseJsonAttr, getAreaChartDimensions } from "../../../utils/chart-helpers.js";
+import { lineLegendEntries } from "../../../utils/chart-legend.js";
+import { isFuseWidgetPayload, xDomainHintFromWidget } from "../../../utils/fuse-widget.js";
+import { chartPropsChanged } from "../../../utils/lit-draw.js";
+import { renderAreaChart } from "../render/draw.js";
+import { normalizeAreaData } from "../lib/normalize.js";
+import { lineChartStyles } from "../../line-chart/element/styles.js";
+import { chartShellStyles } from "../../../element/chart-shell-styles.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let Ui9000AreaChart = class extends Ui9000ChartElement {
+  constructor() {
+    super(...arguments);
+    this.scale = "default";
+    this.marker = "donut";
+    this.showPoints = true;
+    this.showGrid = true;
+    this.showLegend = true;
+    this.showTooltip = true;
+    this._tooltip = null;
+    this._empty = false;
+    this._raf = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());
+    this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    cancelAnimationFrame(this._raf);
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (chartPropsChanged(changed)) this.scheduleDraw();
+  }
+  scheduleDraw() {
+    cancelAnimationFrame(this._raf);
+    this._raf = requestAnimationFrame(() => this.draw());
+  }
+  parseData() {
+    const raw = parseJsonAttr(this.dataJson, null);
+    return normalizeAreaData(raw);
+  }
+  xDomainHint() {
+    const raw = parseJsonAttr(this.dataJson, null);
+    if (isFuseWidgetPayload(raw)) return xDomainHintFromWidget(raw);
+    return this.parseData().uniqueValuesHint;
+  }
+  renderLegend(model) {
+    if (!this.showLegend || model.series.length <= 1) return nothing;
+    const theme = readThemeFromElement(this);
+    const legendSeries = model.series.map((s) => ({
+      id: s.id,
+      name: s.name,
+      color: s.color,
+      points: s.points.map((p) => ({ x: p.x, y: p.y1 }))
+    }));
+    return renderChartLegend(lineLegendEntries(legendSeries, theme));
+  }
+  draw() {
+    var _a;
+    const root = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root");
+    if (!root) return;
+    const model = this.parseData();
+    this._empty = model.series.length === 0;
+    if (this._empty) {
+      root.replaceChildren();
+      return;
+    }
+    const theme = readThemeFromElement(this);
+    const { width, height, margin } = getAreaChartDimensions(root);
+    renderAreaChart(root, {
+      model,
+      width,
+      height,
+      margin,
+      theme,
+      marker: this.marker,
+      showPoints: this.showPoints,
+      showGrid: this.showGrid,
+      xDomainHint: this.xDomainHint(),
+      ...this.axisLabelHandlers(),
+      onPointHover: this.showTooltip ? ({ seriesName, category, value, event }) => {
+        const rect = this.getBoundingClientRect();
+        this._tooltip = {
+          x: event.clientX - rect.left,
+          y: event.clientY - rect.top,
+          seriesName,
+          category,
+          value
+        };
+      } : void 0,
+      onPointLeave: this.showTooltip ? () => {
+        this._tooltip = null;
+      } : void 0
+    });
+  }
+  render() {
+    var _a, _b, _c;
+    const title = this.headerTitle();
+    const model = this._empty ? { layout: "grouped", series: [] } : this.parseData();
+    const yField = model.yField;
+    const valueLabel = this._tooltip ? yField && ((_b = (_a = model.axisDetails) == null ? void 0 : _a[yField]) == null ? void 0 : _b.measure_unit_symbol) ? `${this._tooltip.value.toLocaleString()} ${(_c = model.axisDetails[yField]) == null ? void 0 : _c.measure_unit_symbol}` : this._tooltip.value.toLocaleString() : "";
+    return html`
+      <div class="widget-shell" part="shell">
+        ${this.renderShellHeader(title)}
+        <div class="widget-body">
+          ${this.renderLegend(model)}
+          <div class="chart-root" part="chart" ?hidden=${this._empty}></div>
+          ${this._empty ? html`<div class="empty" part="empty">No data</div>` : nothing}
+          ${this._tooltip ? html`<div
+                class="tooltip"
+                part="tooltip"
+                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
+              >
+                <div class="name">${this._tooltip.seriesName}</div>
+                <div>${this._tooltip.category}: ${valueLabel}</div>
+              </div>` : nothing}
+          ${this.renderShellLabelTooltip()}
+        </div>
+      </div>
+    `;
+  }
+};
+Ui9000AreaChart.styles = [lineChartStyles, chartShellStyles];
+__decorateClass([
+  property({ type: String, attribute: "scale" })
+], Ui9000AreaChart.prototype, "scale", 2);
+__decorateClass([
+  property({ type: String })
+], Ui9000AreaChart.prototype, "marker", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-points" })
+], Ui9000AreaChart.prototype, "showPoints", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-grid" })
+], Ui9000AreaChart.prototype, "showGrid", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-legend" })
+], Ui9000AreaChart.prototype, "showLegend", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-tooltip" })
+], Ui9000AreaChart.prototype, "showTooltip", 2);
+__decorateClass([
+  state()
+], Ui9000AreaChart.prototype, "_tooltip", 2);
+__decorateClass([
+  state()
+], Ui9000AreaChart.prototype, "_empty", 2);
+Ui9000AreaChart = __decorateClass([
+  customElement("ui9000-area-chart")
+], Ui9000AreaChart);
+function registerAreaChart() {
+  if (!customElements.get("ui9000-area-chart")) {
+    customElements.define("ui9000-area-chart", Ui9000AreaChart);
+  }
+}
+registerAreaChart();
+export {
+  Ui9000AreaChart,
+  registerAreaChart
+};
+//# sourceMappingURL=ui9000-area-chart.js.map

package/dist/components/area-chart/element/ui9000-area-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui9000-area-chart.js","sources":["../../../../src/components/area-chart/element/ui9000-area-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport type { WidgetScale } from '../../../types/index.js';\nimport { getAreaChartDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries } from '../../../utils/chart-legend.js';\nimport {\n  isFuseWidgetPayload,\n  xDomainHintFromWidget,\n} from '../../../utils/fuse-widget.js';\nimport type { MarkerShape } from '../../../utils/fusedash-visual.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  normalizeAreaData,\n  type AreaChartInput,\n  type AreaModel,\n} from '../lib/index.js';\nimport { renderAreaChart } from '../render/draw.js';\nimport { areaChartStyles } from './styles.js';\n\n@customElement('ui9000-area-chart')\nexport class Ui9000AreaChart extends Ui9000ChartElement {\n  static override styles = [areaChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: String })\n  marker: MarkerShape = 'donut';\n\n  @property({ type: Boolean, attribute: 'show-points' })\n  showPoints = true;\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @state()\n  private _tooltip: {\n    x: number;\n    y: number;\n    seriesName: string;\n    category: string;\n    value: number;\n  } | null = null;\n\n  @state()\n  private _empty = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): AreaModel {\n    const raw = parseJsonAttr<AreaChartInput>(this.dataJson, null);\n    return normalizeAreaData(raw);\n  }\n\n  private xDomainHint(): string[] | undefined {\n    const raw = parseJsonAttr<unknown>(this.dataJson, null);\n    if (isFuseWidgetPayload(raw)) return xDomainHintFromWidget(raw);\n    return this.parseData().uniqueValuesHint;\n  }\n\n  private renderLegend(model: AreaModel) {\n    if (!this.showLegend || model.series.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    const legendSeries = model.series.map((s) => ({\n      id: s.id,\n      name: s.name,\n      color: s.color,\n      points: s.points.map((p) => ({ x: p.x, y: p.y1 })),\n    }));\n    return renderChartLegend(lineLegendEntries(legendSeries, theme));\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const model = this.parseData();\n    this._empty = model.series.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getAreaChartDimensions(root);\n\n    renderAreaChart(root, {\n      model,\n      width,\n      height,\n      margin,\n      theme,\n      marker: this.marker,\n      showPoints: this.showPoints,\n      showGrid: this.showGrid,\n      xDomainHint: this.xDomainHint(),\n      ...this.axisLabelHandlers(),\n      onPointHover: this.showTooltip\n        ? ({ seriesName, category, value, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              seriesName,\n              category,\n              value,\n            };\n          }\n        : undefined,\n      onPointLeave: this.showTooltip ? () => { this._tooltip = null; } : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const model = this._empty ? { layout: 'grouped' as const, series: [] } : this.parseData();\n    const yField = model.yField;\n    const valueLabel = this._tooltip\n      ? yField && model.axisDetails?.[yField]?.measure_unit_symbol\n        ? `${this._tooltip.value.toLocaleString()} ${model.axisDetails[yField]?.measure_unit_symbol}`\n        : this._tooltip.value.toLocaleString()\n      : '';\n\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend(model)}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">No data</div>`\n            : nothing}\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                <div class=\"name\">${this._tooltip.seriesName}</div>\n                <div>${this._tooltip.category}: ${valueLabel}</div>\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-area-chart': Ui9000AreaChart;\n  }\n}\n\nexport function registerAreaChart(): void {\n  if (!customElements.get('ui9000-area-chart')) {\n    customElements.define('ui9000-area-chart', Ui9000AreaChart);\n  }\n}\n\nregisterAreaChart();\n"],"names":["areaChartStyles"],"mappings":"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"}

package/dist/components/area-chart/index.d.ts

@@ -0,0 +1,5 @@
+export { Ui9000AreaChart, registerAreaChart } from './element/ui9000-area-chart.js';
+export { renderAreaChart } from './render/draw.js';
+export { normalizeAreaData, collectXDomain, type AreaChartData, type AreaChartInput, type AreaLayout, type AreaModel, type AreaPoint, type AreaSeries, } from './lib/index.js';
+export { default as areaChartMetadata } from './metadata.json';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/area-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/area-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/area-chart/index.js

@@ -0,0 +1,15 @@
+import { registerAreaChart } from "./element/ui9000-area-chart.js";
+import { Ui9000AreaChart } from "./element/ui9000-area-chart.js";
+import { renderAreaChart } from "./render/draw.js";
+import { default as default2 } from "./metadata.json.js";
+import { collectXDomain } from "../line-chart/lib/domain.js";
+import { normalizeAreaData } from "./lib/normalize.js";
+export {
+  Ui9000AreaChart,
+  default2 as areaChartMetadata,
+  collectXDomain,
+  normalizeAreaData,
+  registerAreaChart,
+  renderAreaChart
+};
+//# sourceMappingURL=index.js.map

package/dist/components/area-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/area-chart/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { normalizeAreaData, collectXDomain } from './normalize.js';
+export type { AreaChartData, AreaChartInput, AreaLayout, AreaModel, AreaPoint, AreaSeries, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/area-chart/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/area-chart/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACnE,YAAY,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,GACX,MAAM,YAAY,CAAC"}

package/dist/components/area-chart/lib/normalize.d.ts

@@ -0,0 +1,5 @@
+import { AreaChartInput, AreaModel } from './types.js';
+/** Normalize chat / FuseDash payloads into area series. */
+export declare function normalizeAreaData(input: AreaChartInput): AreaModel;
+export { collectXDomain } from '../../line-chart/lib/domain.js';
+//# sourceMappingURL=normalize.d.ts.map

package/dist/components/area-chart/lib/normalize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize.d.ts","sourceRoot":"","sources":["../../../../src/components/area-chart/lib/normalize.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAc,SAAS,EAAyB,MAAM,YAAY,CAAC;AAsL/F,2DAA2D;AAC3D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,CA+BlE;AAED,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/components/area-chart/lib/normalize.js

@@ -0,0 +1,185 @@
+import { stack } from "d3-shape";
+import { resolveFormattingColor } from "../../../utils/fuse-palette.js";
+import { isFuseWidgetPayload, xDomainHintFromWidget, firstField, rowsOf, resolveUniqueValuesOrder } from "../../../utils/fuse-widget.js";
+import { resolveWidgetMarkers } from "../../../utils/chart-formatting/from-fuse-widget.js";
+const EMPTY = { layout: "grouped", series: [] };
+function markerForKey(markers, key) {
+  var _a;
+  return ((_a = markers.find((m) => m.key === key)) == null ? void 0 : _a.shape) ?? "donut";
+}
+function groupKeysFromData(rows, groupByKey) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const row of rows) {
+    const g = String(row[groupByKey] ?? "");
+    if (g) keys.add(g);
+  }
+  return [...keys];
+}
+function xDomainFromWidget(widget, xKey) {
+  var _a, _b;
+  const rows = rowsOf(widget);
+  const allX = Array.from(new Set(rows.map((r) => String(r[xKey] ?? "")))).filter(Boolean);
+  const hint = (_b = (_a = widget.uniqueValues) == null ? void 0 : _a[xKey]) == null ? void 0 : _b.map(String);
+  if (hint == null ? void 0 : hint.length) {
+    const filtered = hint.filter((x) => allX.includes(x));
+    return filtered.length ? filtered : hint;
+  }
+  return resolveUniqueValuesOrder(allX, widget.uniqueValues, xKey);
+}
+function normalizeGrouped(widget) {
+  const rows = rowsOf(widget);
+  const xKey = firstField(widget.xAxe) ?? "x";
+  const yKey = firstField(widget.yAxe) ?? "y";
+  const groupKey = firstField(widget.groupBy);
+  const xDomain = xDomainFromWidget(widget, xKey);
+  const markers = resolveWidgetMarkers(widget);
+  const formatting = widget.formatting;
+  if (!groupKey) {
+    const byX = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      const x = String(row[xKey] ?? "");
+      const y = Number(row[yKey]);
+      if (!x || !Number.isFinite(y)) continue;
+      byX.set(x, y);
+    }
+    const points = xDomain.map((x) => {
+      const y = byX.get(x) ?? 0;
+      return { x, y, y0: 0, y1: y };
+    });
+    if (!points.some((p) => p.y !== 0)) return [];
+    return [
+      {
+        id: "default",
+        name: "Series",
+        color: resolveFormattingColor(formatting, "default", 1),
+        marker: markerForKey(markers, "default"),
+        points
+      }
+    ];
+  }
+  const byGroup = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const x = String(row[xKey] ?? "");
+    const y = Number(row[yKey]);
+    const g = String(row[groupKey] ?? "default");
+    if (!x || !Number.isFinite(y)) continue;
+    const map = byGroup.get(g) ?? /* @__PURE__ */ new Map();
+    map.set(x, y);
+    byGroup.set(g, map);
+  }
+  const groupIds = resolveUniqueValuesOrder(
+    byGroup.keys(),
+    widget.uniqueValues,
+    groupKey
+  );
+  return groupIds.map((id) => {
+    const map = byGroup.get(id) ?? /* @__PURE__ */ new Map();
+    const points = xDomain.map((x) => {
+      const y = map.get(x) ?? 0;
+      return { x, y, y0: 0, y1: y };
+    });
+    return {
+      id,
+      name: id,
+      color: resolveFormattingColor(formatting, id, groupIds.length),
+      marker: markerForKey(markers, id),
+      points
+    };
+  });
+}
+function normalizeStacked(widget) {
+  var _a, _b;
+  const rows = rowsOf(widget);
+  const xKey = firstField(widget.xAxe) ?? "x";
+  const yKey = firstField(widget.yAxe) ?? "y";
+  const groupKey = firstField(widget.groupBy);
+  if (!groupKey) return normalizeGrouped(widget);
+  const xDomain = xDomainFromWidget(widget, xKey);
+  const groupIds = ((_b = (_a = widget.uniqueValues) == null ? void 0 : _a[groupKey]) == null ? void 0 : _b.length) ? widget.uniqueValues[groupKey] : groupKeysFromData(rows, groupKey);
+  const indexed = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const x = String(row[xKey] ?? "");
+    const g = String(row[groupKey] ?? "");
+    if (!x || !g) continue;
+    let groupMap = indexed.get(x);
+    if (!groupMap) {
+      groupMap = /* @__PURE__ */ new Map();
+      indexed.set(x, groupMap);
+    }
+    groupMap.set(g, row);
+  }
+  const stackRows = xDomain.map((x) => [x, indexed.get(x) ?? /* @__PURE__ */ new Map()]);
+  const stacked = stack().keys(groupIds).value(([, groupMap], key) => {
+    const entry = groupMap.get(key);
+    return entry ? Number(entry[yKey]) || 0 : 0;
+  })(stackRows).reverse();
+  const markers = resolveWidgetMarkers(widget);
+  const formatting = widget.formatting;
+  return stacked.map((layer) => {
+    const id = layer.key;
+    const pointByX = new Map(layer.map((d) => [d.data[0], d]));
+    const points = xDomain.map((x) => {
+      const d = pointByX.get(x);
+      if (!d) return null;
+      const y0 = Number(d[0]);
+      const y1 = Number(d[1]);
+      return { x, y: y1 - y0, y0, y1 };
+    }).filter((p) => p != null);
+    return {
+      id,
+      name: id,
+      color: resolveFormattingColor(formatting, id, groupIds.length),
+      marker: markerForKey(markers, id),
+      points
+    };
+  });
+}
+function isStackedWidget(widget) {
+  if (widget.chartType === "areaStackedChart") return true;
+  return Boolean(widget.stacked && firstField(widget.groupBy));
+}
+function fromFuseWidget(widget) {
+  const layout = isStackedWidget(widget) ? "stacked" : "grouped";
+  const series = layout === "stacked" ? normalizeStacked(widget) : normalizeGrouped(widget);
+  return {
+    layout,
+    series,
+    xField: firstField(widget.xAxe),
+    yField: firstField(widget.yAxe),
+    groupField: firstField(widget.groupBy),
+    axisDetails: widget.axisDetails,
+    uniqueValuesHint: xDomainHintFromWidget(widget)
+  };
+}
+function normalizeAreaData(input) {
+  if (!input) return EMPTY;
+  if (Array.isArray(input)) {
+    if (!input.length) return EMPTY;
+    if ("points" in input[0]) {
+      return { layout: "grouped", series: input };
+    }
+    return EMPTY;
+  }
+  if (isFuseWidgetPayload(input)) {
+    return fromFuseWidget(input);
+  }
+  if (typeof input === "object") {
+    const chart = input;
+    if (Array.isArray(chart.series)) {
+      return {
+        layout: chart.layout ?? "grouped",
+        series: chart.series,
+        xField: chart.xField,
+        yField: chart.yField,
+        groupField: chart.groupField,
+        axisDetails: chart.axisDetails,
+        uniqueValuesHint: chart.uniqueValuesHint
+      };
+    }
+  }
+  return EMPTY;
+}
+export {
+  normalizeAreaData
+};
+//# sourceMappingURL=normalize.js.map