@krizaka/charts 0.3.1 → 0.4.0

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

@@ -85,13 +85,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 +92,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 +117,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 +145,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 +190,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 +260,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 +320,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 +327,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 +352,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 +380,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 +425,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 +495,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",

package/registry/gauge.json

@@ -56,13 +56,6 @@
         "component": "Gauge",
         "description": "One figure against its range — credits used of a plan, a challenge's progress, a load.",
         "props": [
-          {
-            "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": "number",
@@ -70,6 +63,13 @@
             "description": "The value.",
             "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",
@@ -140,6 +140,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",
@@ -210,6 +217,13 @@
             "description": "A tick on the arc: the objective.",
             "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": "tone",
             "type": "Tone",
@@ -426,13 +440,6 @@
       "component": "Gauge",
       "description": "One figure against its range — credits used of a plan, a challenge's progress, a load.",
       "props": [
-        {
-          "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": "number",
@@ -440,6 +447,13 @@
           "description": "The value.",
           "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",
@@ -510,6 +524,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",
@@ -580,6 +601,13 @@
           "description": "A tick on the arc: the objective.",
           "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": "tone",
           "type": "Tone",

package/registry/geo-map.json

@@ -82,13 +82,6 @@
             "description": "The field (or function) of the region's ISO 3166-1 alpha-2 code (`\"FR\"`, `\"US\"`).",
             "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)",
@@ -96,6 +89,13 @@
             "description": "The field (or function) of its value.",
             "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",
@@ -114,7 +114,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 +142,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
           },
           {
@@ -173,6 +173,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",
@@ -250,6 +257,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",
@@ -303,13 +317,6 @@
           "description": "The field (or function) of the region's ISO 3166-1 alpha-2 code (`\"FR\"`, `\"US\"`).",
           "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)",
@@ -317,6 +324,13 @@
           "description": "The field (or function) of its value.",
           "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",
@@ -335,7 +349,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
         },
         {
@@ -363,7 +377,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
         },
         {
@@ -394,6 +408,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",
@@ -471,6 +492,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",