@krizaka/charts 0.3.1 → 0.5.0

package/registry/earnings-chart.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "svg",
   "tier": "ready-made",
   "whenToUse": [
@@ -90,11 +101,18 @@
             "required": true
           },
           {
-            "name": "title",
-            "type": "string",
+            "name": "actionsMenu",
+            "type": "boolean",
             "default": null,
-            "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
-            "required": true
+            "description": "The ⋯ actions menu of the kit. `false`: the former “Show data” and export buttons, drawn in line. Default true.",
+            "required": false
+          },
+          {
+            "name": "autoRange",
+            "type": "boolean",
+            "default": null,
+            "description": "Zoom the time axis on the period that has data: the empty days before the first and after the last value are\nleft out (never fewer than `minPoints`), and a sparse period says so under the chart instead of drawing 13 empty\ndays around one bar. Default false.",
+            "required": false
           },
           {
             "name": "brand",
@@ -114,7 +132,7 @@
             "name": "dataTable",
             "type": "boolean",
             "default": null,
-            "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+            "description": "“View as table” in the actions menu (the table is in the page for screen readers either way). Default true.",
             "required": false
           },
           {
@@ -142,7 +160,14 @@
             "name": "exportable",
             "type": "boolean | readonly ExportFormat[]",
             "default": null,
-            "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+            "description": "The downloads of the actions menu: all three by default, or the formats you want, or `false` for none.",
+            "required": false
+          },
+          {
+            "name": "filterable",
+            "type": "boolean",
+            "default": null,
+            "description": "The legend chips switch the series on and off. Default true.",
             "required": false
           },
           {
@@ -180,6 +205,13 @@
             "description": "The id of the figure.",
             "required": false
           },
+          {
+            "name": "insight",
+            "type": "ReactNode",
+            "default": null,
+            "description": "One line that says what the chart shows, between the title and the chart: “100 jobs · +100 % vs last week”.",
+            "required": false
+          },
           {
             "name": "labels",
             "type": "Partial<EarningsLabels>",
@@ -222,6 +254,13 @@
             "description": "Vertical markers at a category: a launch, an incident.",
             "required": false
           },
+          {
+            "name": "minPoints",
+            "type": "number",
+            "default": null,
+            "description": "With `autoRange`, the fewest categories to keep so a short burst still has a time scale. Default 7.",
+            "required": false
+          },
           {
             "name": "onSelect",
             "type": "((datum: T, index: number) => void)",
@@ -264,6 +303,13 @@
             "description": "Your own summary instead of the generated one (still read first by screen readers).",
             "required": false
           },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`. Inside a `ChartCard`, the card's title is the default.",
+            "required": false
+          },
           {
             "name": "x",
             "type": "string | ((datum: T, index: number) => unknown)",
@@ -502,11 +548,18 @@
           "required": true
         },
         {
-          "name": "title",
-          "type": "string",
+          "name": "actionsMenu",
+          "type": "boolean",
           "default": null,
-          "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
-          "required": true
+          "description": "The ⋯ actions menu of the kit. `false`: the former “Show data” and export buttons, drawn in line. Default true.",
+          "required": false
+        },
+        {
+          "name": "autoRange",
+          "type": "boolean",
+          "default": null,
+          "description": "Zoom the time axis on the period that has data: the empty days before the first and after the last value are\nleft out (never fewer than `minPoints`), and a sparse period says so under the chart instead of drawing 13 empty\ndays around one bar. Default false.",
+          "required": false
         },
         {
           "name": "brand",
@@ -526,7 +579,7 @@
           "name": "dataTable",
           "type": "boolean",
           "default": null,
-          "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+          "description": "“View as table” in the actions menu (the table is in the page for screen readers either way). Default true.",
           "required": false
         },
         {
@@ -554,7 +607,14 @@
           "name": "exportable",
           "type": "boolean | readonly ExportFormat[]",
           "default": null,
-          "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+          "description": "The downloads of the actions menu: all three by default, or the formats you want, or `false` for none.",
+          "required": false
+        },
+        {
+          "name": "filterable",
+          "type": "boolean",
+          "default": null,
+          "description": "The legend chips switch the series on and off. Default true.",
           "required": false
         },
         {
@@ -592,6 +652,13 @@
           "description": "The id of the figure.",
           "required": false
         },
+        {
+          "name": "insight",
+          "type": "ReactNode",
+          "default": null,
+          "description": "One line that says what the chart shows, between the title and the chart: “100 jobs · +100 % vs last week”.",
+          "required": false
+        },
         {
           "name": "labels",
           "type": "Partial<EarningsLabels>",
@@ -634,6 +701,13 @@
           "description": "Vertical markers at a category: a launch, an incident.",
           "required": false
         },
+        {
+          "name": "minPoints",
+          "type": "number",
+          "default": null,
+          "description": "With `autoRange`, the fewest categories to keep so a short burst still has a time scale. Default 7.",
+          "required": false
+        },
         {
           "name": "onSelect",
           "type": "((datum: T, index: number) => void)",
@@ -676,6 +750,13 @@
           "description": "Your own summary instead of the generated one (still read first by screen readers).",
           "required": false
         },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`. Inside a `ChartCard`, the card's title is the default.",
+          "required": false
+        },
         {
           "name": "x",
           "type": "string | ((datum: T, index: number) => unknown)",

package/registry/examples/chart-card/before-after.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/charts registry. */
+declare const Example: ComponentType;
+export default Example;

package/registry/examples/chart-card/before-after.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/chart-card/before-after.tsx
+import { BarChart } from "@krizaka/charts/bar";
+import { ChartCard } from "@krizaka/charts/card";
+import { jsx, jsxs } from "react/jsx-runtime";
+var data = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((day, i) => ({ day, jobs: [12, 18, 9, 22, 31, 27, 35][i] }));
+function BeforeAfter() {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { style: { margin: "0 0 8px", fontSize: 12, color: "var(--kz-text-secondary)" }, children: "Before" }),
+      /* @__PURE__ */ jsx(BarChart, { title: "Jobs per day", data, x: "day", y: "jobs", yLabel: "Jobs", height: 180, actionsMenu: false, exportable: true })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { style: { margin: "0 0 8px", fontSize: 12, color: "var(--kz-text-secondary)" }, children: "After" }),
+      /* @__PURE__ */ jsx(ChartCard, { title: "Jobs per day", insight: "154 jobs \xB7 busiest on Sunday", footer: "Source: your own jobs.", children: /* @__PURE__ */ jsx(BarChart, { data, x: "day", y: "jobs", yLabel: "Jobs", height: 180 }) })
+    ] })
+  ] });
+}
+export {
+  BeforeAfter as default
+};

package/registry/examples/chart-card/before-after.tsx

@@ -0,0 +1,22 @@
+import { BarChart } from "@krizaka/charts/bar";
+import { ChartCard } from "@krizaka/charts/card";
+
+const data = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((day, i) => ({ day, jobs: [12, 18, 9, 22, 31, 27, 35][i] }));
+
+// Before: a bare chart, “Show data” and the exports as text buttons. After: the same chart in a ChartCard.
+export default function BeforeAfter() {
+  return (
+    <div style={{ display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
+      <div>
+        <p style={{ margin: "0 0 8px", fontSize: 12, color: "var(--kz-text-secondary)" }}>Before</p>
+        <BarChart title="Jobs per day" data={data} x="day" y="jobs" yLabel="Jobs" height={180} actionsMenu={false} exportable />
+      </div>
+      <div>
+        <p style={{ margin: "0 0 8px", fontSize: 12, color: "var(--kz-text-secondary)" }}>After</p>
+        <ChartCard title="Jobs per day" insight="154 jobs · busiest on Sunday" footer="Source: your own jobs.">
+          <BarChart data={data} x="day" y="jobs" yLabel="Jobs" height={180} />
+        </ChartCard>
+      </div>
+    </div>
+  );
+}

package/registry/examples/chart-card/jobs-activity.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/charts registry. */
+declare const Example: ComponentType;
+export default Example;

package/registry/examples/chart-card/jobs-activity.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/chart-card/jobs-activity.tsx
+import { BarChart } from "@krizaka/charts/bar";
+import { ChartCard } from "@krizaka/charts/card";
+import { jsx } from "react/jsx-runtime";
+var days = ["2026-10-03", "2026-10-04", "2026-10-05", "2026-10-06", "2026-10-07", "2026-10-08", "2026-10-09", "2026-10-10"];
+var completed = [12, 18, 9, 22, 31, 27, 35, 41];
+var failed = [1, 0, 2, 1, 3, 0, 1, 2];
+var data = days.map((day, i) => ({ day, completed: completed[i], failed: failed[i] }));
+var series = [
+  { key: "completed", label: "Completed", color: "accent" },
+  { key: "failed", label: "Failed", color: "danger" }
+];
+function JobsActivity() {
+  return /* @__PURE__ */ jsx(ChartCard, { title: "Jobs per day", insight: "195 jobs \xB7 +24 % vs the week before", footer: "Read from your own jobs \u2014 nothing estimated.", children: /* @__PURE__ */ jsx(BarChart, { data, x: "day", xFormat: "day", xLabel: "Day", series, stacked: true, format: "integer", height: 220, autoRange: true }) });
+}
+export {
+  JobsActivity as default
+};

package/registry/examples/chart-card/jobs-activity.tsx

@@ -0,0 +1,20 @@
+import { BarChart } from "@krizaka/charts/bar";
+import { ChartCard } from "@krizaka/charts/card";
+
+const days = ["2026-10-03", "2026-10-04", "2026-10-05", "2026-10-06", "2026-10-07", "2026-10-08", "2026-10-09", "2026-10-10"];
+const completed = [12, 18, 9, 22, 31, 27, 35, 41];
+const failed = [1, 0, 2, 1, 3, 0, 1, 2];
+const data = days.map((day, i) => ({ day, completed: completed[i], failed: failed[i] }));
+const series = [
+  { key: "completed", label: "Completed", color: "accent" },
+  { key: "failed", label: "Failed", color: "danger" },
+] as const;
+
+// The card hands the chart its title and insight; the ⋯ menu (table, CSV, PNG, SVG, copy) comes with it.
+export default function JobsActivity() {
+  return (
+    <ChartCard title="Jobs per day" insight="195 jobs · +24 % vs the week before" footer="Read from your own jobs — nothing estimated.">
+      <BarChart data={data} x="day" xFormat="day" xLabel="Day" series={series} stacked format="integer" height={220} autoRange />
+    </ChartCard>
+  );
+}

package/registry/examples/chart-card/sparse-and-empty.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/charts registry. */
+declare const Example: ComponentType;
+export default Example;

package/registry/examples/chart-card/sparse-and-empty.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/chart-card/sparse-and-empty.tsx
+import { BarChart } from "@krizaka/charts/bar";
+import { ChartCard } from "@krizaka/charts/card";
+import { jsx, jsxs } from "react/jsx-runtime";
+var days = Array.from({ length: 30 }, (_, i) => ({ day: `2026-09-${String(i + 1).padStart(2, "0")}`, jobs: i === 27 ? 100 : 0 }));
+function SparseAndEmpty() {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }, children: [
+    /* @__PURE__ */ jsx(ChartCard, { title: "Jobs per day", insight: "100 jobs on Sep 28", children: /* @__PURE__ */ jsx(BarChart, { data: days, x: "day", xFormat: "day", y: "jobs", yLabel: "Jobs", format: "integer", height: 180, autoRange: true }) }),
+    /* @__PURE__ */ jsx(ChartCard, { title: "Failed jobs", insight: "Nothing failed yet", children: /* @__PURE__ */ jsx(BarChart, { data: [], x: "day", y: "jobs", yLabel: "Jobs", height: 180 }) })
+  ] });
+}
+export {
+  SparseAndEmpty as default
+};

package/registry/examples/chart-card/sparse-and-empty.tsx

@@ -0,0 +1,18 @@
+import { BarChart } from "@krizaka/charts/bar";
+import { ChartCard } from "@krizaka/charts/card";
+
+const days = Array.from({ length: 30 }, (_, i) => ({ day: `2026-09-${String(i + 1).padStart(2, "0")}`, jobs: i === 27 ? 100 : 0 }));
+
+// 29 empty days and one bar: `autoRange` zooms on the active period and says how sparse it is. No data: a calm state.
+export default function SparseAndEmpty() {
+  return (
+    <div style={{ display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
+      <ChartCard title="Jobs per day" insight="100 jobs on Sep 28">
+        <BarChart data={days} x="day" xFormat="day" y="jobs" yLabel="Jobs" format="integer" height={180} autoRange />
+      </ChartCard>
+      <ChartCard title="Failed jobs" insight="Nothing failed yet">
+        <BarChart data={[]} x="day" y="jobs" yLabel="Jobs" height={180} />
+      </ChartCard>
+    </div>
+  );
+}

package/registry/examples/chart-card/usage-donut.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/charts registry. */
+declare const Example: ComponentType;
+export default Example;

package/registry/examples/chart-card/usage-donut.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/chart-card/usage-donut.tsx
+import { ChartCard } from "@krizaka/charts/card";
+import { DonutChart } from "@krizaka/charts/pie";
+import { jsx } from "react/jsx-runtime";
+var kinds = [
+  { kind: "Images", jobs: 96 },
+  { kind: "Video", jobs: 41 },
+  { kind: "Audio", jobs: 33 },
+  { kind: "Text", jobs: 25 }
+];
+function UsageDonut() {
+  return /* @__PURE__ */ jsx(ChartCard, { title: "What you made", insight: "195 jobs, most of them images", description: "Jobs by kind, last 7 days.", children: /* @__PURE__ */ jsx(DonutChart, { data: kinds, label: "kind", value: "jobs", labelHeader: "Kind", valueHeader: "Jobs", centerLabel: "jobs", format: "integer", height: 220 }) });
+}
+export {
+  UsageDonut as default
+};

package/registry/examples/chart-card/usage-donut.tsx

@@ -0,0 +1,18 @@
+import { ChartCard } from "@krizaka/charts/card";
+import { DonutChart } from "@krizaka/charts/pie";
+
+const kinds = [
+  { kind: "Images", jobs: 96 },
+  { kind: "Video", jobs: 41 },
+  { kind: "Audio", jobs: 33 },
+  { kind: "Text", jobs: 25 },
+];
+
+// Legend chips carry the value and the share, and switch a part off: click “Video” and the ring re-measures.
+export default function UsageDonut() {
+  return (
+    <ChartCard title="What you made" insight="195 jobs, most of them images" description="Jobs by kind, last 7 days.">
+      <DonutChart data={kinds} label="kind" value="jobs" labelHeader="Kind" valueHeader="Jobs" centerLabel="jobs" format="integer" height={220} />
+    </ChartCard>
+  );
+}

package/registry/examples/charts-provider/french-orazaka.js

@@ -16,7 +16,7 @@ function FrenchOrazaka() {
     {
       locale: "fr-FR",
       brand: "orazaka",
-      labels: { showData: "Voir les donn\xE9es", hideData: "Masquer les donn\xE9es", empty: "Pas encore de donn\xE9es.", kinds: { bar: "Histogramme" } },
+      labels: { actions: "Actions du graphique", viewTable: "Voir en tableau", downloadCsv: "T\xE9l\xE9charger le CSV", copyData: "Copier les donn\xE9es", empty: "Pas encore de donn\xE9es.", kinds: { bar: "Histogramme" } },
       children: /* @__PURE__ */ jsx(BarChart, { title: "Cr\xE9dits consomm\xE9s par mois", data: months, x: "month", xLabel: "Mois", y: "credits", yLabel: "Cr\xE9dits", format: "compact" })
     }
   );

package/registry/examples/charts-provider/french-orazaka.tsx

@@ -14,7 +14,7 @@ export default function FrenchOrazaka() {
     <ChartsProvider
       locale="fr-FR"
       brand="orazaka"
-      labels={{ showData: "Voir les données", hideData: "Masquer les données", empty: "Pas encore de données.", kinds: { bar: "Histogramme" } }}
+      labels={{ actions: "Actions du graphique", viewTable: "Voir en tableau", downloadCsv: "Télécharger le CSV", copyData: "Copier les données", empty: "Pas encore de données.", kinds: { bar: "Histogramme" } }}
     >
       <BarChart title="Crédits consommés par mois" data={months} x="month" xLabel="Mois" y="credits" yLabel="Crédits" format="compact" />
     </ChartsProvider>

package/registry/examples/kpi-stat/dashboard-row.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/charts registry. */
+declare const Example: ComponentType;
+export default Example;

package/registry/examples/kpi-stat/dashboard-row.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/kpi-stat/dashboard-row.tsx
+import { KpiStat } from "@krizaka/charts/card";
+import { StatGrid } from "@krizaka/ui/stat";
+import { jsx, jsxs } from "react/jsx-runtime";
+var jobs = [12, 18, 9, 22, 31, 27, 35, 41];
+var minutes = [4.2, 4.6, 5.1, 4.4, 3.9, 3.7, 3.5, 3.2];
+function DashboardRow() {
+  return /* @__PURE__ */ jsxs(StatGrid, { children: [
+    /* @__PURE__ */ jsx(KpiStat, { label: "Jobs", value: 195, previous: 157, data: jobs, variant: "bar", hint: "last 8 days" }),
+    /* @__PURE__ */ jsx(KpiStat, { label: "Success rate", value: 0.94, previous: 0.91, format: "percent", hint: "completed / all" }),
+    /* @__PURE__ */ jsx(KpiStat, { label: "Median time", value: 3.2, previous: 4.2, good: "down", data: minutes, format: { style: "unit", unit: "minute" }, hint: "to a result" }),
+    /* @__PURE__ */ jsx(KpiStat, { label: "Credits spent", value: 1240, previous: 1100, good: "down", format: "integer", hint: "this period" })
+  ] });
+}
+export {
+  DashboardRow as default
+};

package/registry/examples/kpi-stat/dashboard-row.tsx

@@ -0,0 +1,17 @@
+import { KpiStat } from "@krizaka/charts/card";
+import { StatGrid } from "@krizaka/ui/stat";
+
+const jobs = [12, 18, 9, 22, 31, 27, 35, 41];
+const minutes = [4.2, 4.6, 5.1, 4.4, 3.9, 3.7, 3.5, 3.2];
+
+// The head of a dashboard: each figure with its change against the previous period and the shape of the period.
+export default function DashboardRow() {
+  return (
+    <StatGrid>
+      <KpiStat label="Jobs" value={195} previous={157} data={jobs} variant="bar" hint="last 8 days" />
+      <KpiStat label="Success rate" value={0.94} previous={0.91} format="percent" hint="completed / all" />
+      <KpiStat label="Median time" value={3.2} previous={4.2} good="down" data={minutes} format={{ style: "unit", unit: "minute" }} hint="to a result" />
+      <KpiStat label="Credits spent" value={1240} previous={1100} good="down" format="integer" hint="this period" />
+    </StatGrid>
+  );
+}

package/registry/examples/kpi-stat/single.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/charts registry. */
+declare const Example: ComponentType;
+export default Example;

package/registry/examples/kpi-stat/single.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/kpi-stat/single.tsx
+import { KpiStat } from "@krizaka/charts/card";
+import { jsx } from "react/jsx-runtime";
+function Single() {
+  return /* @__PURE__ */ jsx(KpiStat, { label: "Time to a result", value: 48, previous: 31, good: "down", format: { style: "unit", unit: "second" }, data: [31, 29, 35, 38, 41, 44, 48], hint: "median, last 7 days" });
+}
+export {
+  Single as default
+};

package/registry/examples/kpi-stat/single.tsx

@@ -0,0 +1,6 @@
+import { KpiStat } from "@krizaka/charts/card";
+
+// A rise in latency is bad news: good="down" makes the arrow say so.
+export default function Single() {
+  return <KpiStat label="Time to a result" value={48} previous={31} good="down" format={{ style: "unit", unit: "second" }} data={[31, 29, 35, 38, 41, 44, 48]} hint="median, last 7 days" />;
+}

package/registry/funnel.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "Advanced tier: no phone screen needs it yet.",
+      "issue": "krizaka/krizaka-ui#280"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "echarts",
   "tier": "advanced",
   "whenToUse": [
@@ -85,13 +98,6 @@
             "description": "The field (or function) naming the stage.",
             "required": true
           },
-          {
-            "name": "title",
-            "type": "string",
-            "default": null,
-            "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
-            "required": true
-          },
           {
             "name": "value",
             "type": "string | ((datum: T, index: number) => number)",
@@ -99,6 +105,13 @@
             "description": "The field of how many reached it.",
             "required": true
           },
+          {
+            "name": "actionsMenu",
+            "type": "boolean",
+            "default": null,
+            "description": "The ⋯ actions menu of the kit. `false`: the former “Show data” and export buttons, drawn in line. Default true.",
+            "required": false
+          },
           {
             "name": "brand",
             "type": "BrandId",
@@ -117,7 +130,7 @@
             "name": "dataTable",
             "type": "boolean",
             "default": null,
-            "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+            "description": "“View as table” in the actions menu (the table is in the page for screen readers either way). Default true.",
             "required": false
           },
           {
@@ -145,7 +158,7 @@
             "name": "exportable",
             "type": "boolean | readonly ExportFormat[]",
             "default": null,
-            "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+            "description": "The downloads of the actions menu: all three by default, or the formats you want, or `false` for none.",
             "required": false
           },
           {
@@ -190,6 +203,13 @@
             "description": "The id of the figure.",
             "required": false
           },
+          {
+            "name": "insight",
+            "type": "ReactNode",
+            "default": null,
+            "description": "One line that says what the chart shows, between the title and the chart: “100 jobs · +100 % vs last week”.",
+            "required": false
+          },
           {
             "name": "labels",
             "type": "ChartLabelsInput",
@@ -253,6 +273,13 @@
             "description": "Your own summary instead of the generated one (still read first by screen readers).",
             "required": false
           },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`. Inside a `ChartCard`, the card's title is the default.",
+            "required": false
+          },
           {
             "name": "valueLabel",
             "type": "string",
@@ -306,13 +333,6 @@
           "description": "The field (or function) naming the stage.",
           "required": true
         },
-        {
-          "name": "title",
-          "type": "string",
-          "default": null,
-          "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
-          "required": true
-        },
         {
           "name": "value",
           "type": "string | ((datum: T, index: number) => number)",
@@ -320,6 +340,13 @@
           "description": "The field of how many reached it.",
           "required": true
         },
+        {
+          "name": "actionsMenu",
+          "type": "boolean",
+          "default": null,
+          "description": "The ⋯ actions menu of the kit. `false`: the former “Show data” and export buttons, drawn in line. Default true.",
+          "required": false
+        },
         {
           "name": "brand",
           "type": "BrandId",
@@ -338,7 +365,7 @@
           "name": "dataTable",
           "type": "boolean",
           "default": null,
-          "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+          "description": "“View as table” in the actions menu (the table is in the page for screen readers either way). Default true.",
           "required": false
         },
         {
@@ -366,7 +393,7 @@
           "name": "exportable",
           "type": "boolean | readonly ExportFormat[]",
           "default": null,
-          "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+          "description": "The downloads of the actions menu: all three by default, or the formats you want, or `false` for none.",
           "required": false
         },
         {
@@ -411,6 +438,13 @@
           "description": "The id of the figure.",
           "required": false
         },
+        {
+          "name": "insight",
+          "type": "ReactNode",
+          "default": null,
+          "description": "One line that says what the chart shows, between the title and the chart: “100 jobs · +100 % vs last week”.",
+          "required": false
+        },
         {
           "name": "labels",
           "type": "ChartLabelsInput",
@@ -474,6 +508,13 @@
           "description": "Your own summary instead of the generated one (still read first by screen readers).",
           "required": false
         },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`. Inside a `ChartCard`, the card's title is the default.",
+          "required": false
+        },
         {
           "name": "valueLabel",
           "type": "string",