@aiaiai-pt/design-system 0.36.0 → 0.37.0

package/components/EChart.svelte

@@ -54,6 +54,11 @@
     valueHeader = "Value",
     /** @type {string} BCP-47 locale for number formatting. */
     locale = "en",
+    /** @type {"bar" | "line" | "donut"} Chart kind (#176 Tier 1). `bar` is the
+     * horizontal categorical bar; `line` plots the same series as a value line
+     * over the category axis; `donut` is a ring pie. The data table below is
+     * the accessible source of truth for every kind. */
+    kind = "bar",
     /** @type {string} CSS block-size for the chart canvas. */
     height = "20rem",
     /** @type {string} */
@@ -90,9 +95,73 @@
     const textSecondary = token("--color-text-secondary", "#6b7280");
     const border = token("--color-border", "#e5e7eb");
 
-    // ECharts plots the category axis bottom-up; reverse so the highest value
-    // sits at the top (matching ResultsChart's top-down order). `items` is
-    // already sorted desc by the consumer.
+    // Donut: a ring pie. No axes; the slice palette derives from the accent
+    // (alpha ramp) so it stays on-theme without a hardcoded colour list.
+    if (kind === "donut") {
+      const palette = items.map((_, i) => {
+        const alpha = Math.max(0.35, 1 - i * 0.12);
+        return `color-mix(in srgb, ${accent} ${Math.round(alpha * 100)}%, transparent)`;
+      });
+      return {
+        animation: false,
+        tooltip: {
+          trigger: "item",
+          /** @param {{ name: string, value: number, percent: number }} p */
+          formatter: (p) => `${p.name}: ${fmt(p.value)} (${p.percent}%)`,
+        },
+        color: palette,
+        series: [
+          {
+            type: "pie",
+            radius: ["45%", "72%"],
+            data: items.map((it) => ({ name: it.label, value: it.value })),
+            label: { color: textPrimary },
+            labelLine: { lineStyle: { color: border } },
+          },
+        ],
+      };
+    }
+
+    // Line: value over the category axis, in the consumer's order (desc by
+    // value). Shares the same accent + token theming as the bar.
+    if (kind === "line") {
+      return {
+        animation: false,
+        grid: { left: 8, right: 16, top: 8, bottom: 8, containLabel: true },
+        tooltip: {
+          trigger: "axis",
+          /** @param {{ name: string, value: number }[]} p */
+          formatter: (p) => `${p[0]?.name}: ${fmt(p[0]?.value)}`,
+        },
+        xAxis: {
+          type: "category",
+          data: items.map((it) => it.label),
+          axisLabel: { color: textPrimary },
+          axisLine: { lineStyle: { color: border } },
+          axisTick: { show: false },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: { color: textSecondary, formatter: (/** @type {number} */ v) => fmt(v) },
+          axisLine: { lineStyle: { color: border } },
+          splitLine: { lineStyle: { color: border } },
+        },
+        series: [
+          {
+            type: "line",
+            data: items.map((it) => it.value),
+            itemStyle: { color: accent },
+            lineStyle: { color: accent },
+            symbolSize: 7,
+            smooth: false,
+          },
+        ],
+      };
+    }
+
+    // Bar (default). ECharts plots the category axis bottom-up; reverse so the
+    // highest value sits at the top (matching ResultsChart's top-down order).
+    // `items` is already sorted desc by the consumer.
     const ordered = [...items].reverse();
 
     return {
@@ -150,6 +219,8 @@
 
         core.use([
           charts.BarChart,
+          charts.LineChart,
+          charts.PieChart,
           components.GridComponent,
           components.TooltipComponent,
           renderers.CanvasRenderer,
@@ -187,7 +258,10 @@
     // touch reactive deps so the effect re-runs when they change
     void items;
     void locale;
-    if (_chart) _chart.setOption(buildOption());
+    void kind;
+    // A kind switch changes which axes/series exist; replace (not merge) the
+    // option so stale axis components from the previous kind are cleared.
+    if (_chart) _chart.setOption(buildOption(), true);
   });
 </script>
 

package/components/renderer/DonutChartWidget.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import EChartWidget from "./EChartWidget.svelte";
+  import type { WidgetProps } from "./types";
+
+  // `donut-chart` registry key (#176 Tier 1). Thin wrapper binding the ECharts
+  // `kind` to a ring pie — the registry maps this key here. Same aggregate data
+  // path + a11y data table as the bar/line.
+  let p: WidgetProps = $props();
+</script>
+
+<EChartWidget {...p} kind="donut" />

package/components/renderer/DonutChartWidget.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { WidgetProps } from "./types";
+declare const DonutChartWidget: import("svelte").Component<WidgetProps, {}, "">;
+type DonutChartWidget = ReturnType<typeof DonutChartWidget>;
+export default DonutChartWidget;

package/components/renderer/EChartWidget.svelte

@@ -11,7 +11,12 @@
   // is never the only encoding). Same data path as ResultsChartWidget: reads
   // the `{ items }` rows and projects `{ label, value }` via `toRankedItems`,
   // so NO resolve-data / provider change is needed. Soft-empty on no rows.
-  let { data, props, ownsH1, locale }: WidgetProps = $props();
+  // `kind` is bound by the registry wrapper (line-chart / donut-chart), NOT by
+  // the dispatcher (which renders this widget with the standard WidgetProps and
+  // no kind → the `chart` key stays the ECharts bar). #176 Tier 1.
+  let { data, props, ownsH1, locale, kind = "bar" }: WidgetProps & {
+    kind?: "bar" | "line" | "donut";
+  } = $props();
 
   const rows = $derived(
     data && typeof data === "object" && Array.isArray((data as { items?: unknown }).items)
@@ -63,6 +68,7 @@
       {caption}
       {labelHeader}
       {valueHeader}
+      {kind}
       locale={locale ?? "en"}
     />
   </section>

package/components/renderer/LineChartWidget.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import EChartWidget from "./EChartWidget.svelte";
+  import type { WidgetProps } from "./types";
+
+  // `line-chart` registry key (#176 Tier 1). Thin wrapper that binds the ECharts
+  // `kind` the dispatcher can't pass — the registry maps this key to this
+  // component, which renders the shared EChart widget as a line. Same aggregate
+  // data path + a11y data table as the bar.
+  let p: WidgetProps = $props();
+</script>
+
+<EChartWidget {...p} kind="line" />

package/components/renderer/LineChartWidget.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { WidgetProps } from "./types";
+declare const LineChartWidget: import("svelte").Component<WidgetProps, {}, "">;
+type LineChartWidget = ReturnType<typeof LineChartWidget>;
+export default LineChartWidget;

package/components/renderer/registry.ts

@@ -22,7 +22,9 @@ import {
 } from "./dispatch";
 import type { Block, OntologySchema, WidgetKind, WidgetProps } from "./types";
 
+import DonutChartWidget from "./DonutChartWidget.svelte";
 import EChartWidget from "./EChartWidget.svelte";
+import LineChartWidget from "./LineChartWidget.svelte";
 import ResultsChartWidget from "./ResultsChartWidget.svelte";
 import StatGridWidget from "./StatGridWidget.svelte";
 
@@ -69,6 +71,11 @@ const _entries: RegistryEntry<WidgetComponent>[] = [
   byKind("stat-grid", "kpi", StatGridWidget),
   byTypeOnKind("results-chart", "aggregate", ResultsChartWidget),
   byTypeOnKind("chart", "aggregate", EChartWidget),
+  // #176 Tier 1 — chart KINDS as registry entries, so the authoring `type`
+  // picker is a real chart picker. All three ECharts kinds share the same
+  // aggregate data path + a11y data table; only the rendered geometry differs.
+  byTypeOnKind("line-chart", "aggregate", LineChartWidget),
+  byTypeOnKind("donut-chart", "aggregate", DonutChartWidget),
 ];
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",