@krizaka/charts 0.3.1 → 0.5.0

package/registry/candlestick.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": [
@@ -102,13 +115,6 @@
             "description": "The field of the price at the start of the period.",
             "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": "x",
             "type": "string | ((datum: T, index: number) => unknown)",
@@ -116,6 +122,13 @@
             "description": "The field of the period (a date, an hour).",
             "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",
@@ -141,7 +154,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
           },
           {
@@ -169,7 +182,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
           },
           {
@@ -200,6 +213,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",
@@ -263,6 +283,13 @@
             "description": "Horizontal lines: a reserve price, a target.",
             "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": "volume",
             "type": "string | ((datum: T, index: number) => number)",
@@ -358,13 +385,6 @@
           "description": "The field of the price at the start of the period.",
           "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": "x",
           "type": "string | ((datum: T, index: number) => unknown)",
@@ -372,6 +392,13 @@
           "description": "The field of the period (a date, an hour).",
           "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",
@@ -397,7 +424,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
         },
         {
@@ -425,7 +452,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
         },
         {
@@ -456,6 +483,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",
@@ -519,6 +553,13 @@
           "description": "Horizontal lines: a reserve price, a target.",
           "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": "volume",
           "type": "string | ((datum: T, index: number) => number)",

package/registry/chart-card.json

@@ -0,0 +1,248 @@
+{
+  "name": "chart-card",
+  "package": "@krizaka/charts",
+  "type": "chart",
+  "title": "Chart card",
+  "summary": "The frame of a chart: title, one line of insight, the chart, a footer, and the actions menu (view as table, download, copy) — used everywhere a chart is shown.",
+  "description": "The frame of a chart: title, one line of insight, the chart, a footer, and the actions menu (view as table, download, copy) — used everywhere a chart is shown.",
+  "status": "beta",
+  "category": "charts",
+  "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "A phone dashboard frames its charts in a Card by hand today.",
+      "issue": "krizaka/krizaka-ui#275"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
+  "engine": null,
+  "tier": "ready-made",
+  "whenToUse": [
+    "Every chart of a dashboard or a usage page: the same frame, the same hierarchy, the same actions.",
+    "A chart that needs a period switch or a filter beside its actions menu."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "A figure with its trend.",
+      "use": "kpi-stat"
+    },
+    {
+      "when": "A chart that sits inside running text.",
+      "use": "sparkline"
+    },
+    {
+      "when": "On React Native: the native charts draw their own frame."
+    }
+  ],
+  "bestPractices": [
+    "Write the insight from the data, in one line: the figure first, then the change (`100 jobs · +100 % vs last week`).",
+    "Leave the chart without a title: the card hands it its own, which stays the chart's accessible name.",
+    "Zoom the time axis on the period that has data with `autoRange` rather than drawing empty days.",
+    "Keep the footer for the source and the freshness; never a second insight."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "The chart keeps its data table in the page, its written summary and its keyboard walk inside the card.",
+      "The actions menu is a real menu: arrow keys, Escape, focus returned to the ⋯ button; the table opens in a sheet with a focus trap.",
+      "Legend chips are toggle buttons (`aria-pressed`); the last visible series cannot be switched off."
+    ]
+  },
+  "related": [
+    "kpi-stat",
+    "line-chart",
+    "bar-chart",
+    "pie-chart",
+    "sparkline"
+  ],
+  "source": "packages/charts/src/meta/chart-card.ts",
+  "install": {
+    "web": "npm install @krizaka/charts",
+    "native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
+  },
+  "web": {
+    "entry": "@krizaka/charts/card",
+    "import": "import { ChartCard } from \"@krizaka/charts/card\";",
+    "props": [
+      {
+        "component": "ChartCard",
+        "description": "The frame of a chart: title, insight, actions, chart, footer — used everywhere a chart is shown.",
+        "props": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The chart (`LineChart`, `BarChart`, `DonutChart`…), without its own title.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows, in a few words (a heading and the chart's accessible name).",
+            "required": true
+          },
+          {
+            "name": "actions",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Controls beside the actions menu: a period switch, a filter.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "A class on the card (layout: grid placement).",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The period, the unit, the source — under the insight.",
+            "required": false
+          },
+          {
+            "name": "footer",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A line under the chart: the source, the freshness, a link.",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": "string",
+            "default": null,
+            "description": "The id of the card.",
+            "required": false
+          },
+          {
+            "name": "insight",
+            "type": "ReactNode",
+            "default": null,
+            "description": "One line that says what the chart shows: “100 jobs · +100 % vs last week”. Written by the app, from its data.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "jobs-activity",
+        "title": "Jobs per day",
+        "description": "Stacked bars by outcome, an insight, a footer and the actions menu.",
+        "path": "examples/chart-card/jobs-activity.tsx",
+        "module": "@krizaka/charts/registry/examples/chart-card/jobs-activity",
+        "code": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartCard } from \"@krizaka/charts/card\";\n\nconst 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\"];\nconst completed = [12, 18, 9, 22, 31, 27, 35, 41];\nconst failed = [1, 0, 2, 1, 3, 0, 1, 2];\nconst data = days.map((day, i) => ({ day, completed: completed[i], failed: failed[i] }));\nconst series = [\n  { key: \"completed\", label: \"Completed\", color: \"accent\" },\n  { key: \"failed\", label: \"Failed\", color: \"danger\" },\n] as const;\n\n// The card hands the chart its title and insight; the ⋯ menu (table, CSV, PNG, SVG, copy) comes with it.\nexport default function JobsActivity() {\n  return (\n    <ChartCard title=\"Jobs per day\" insight=\"195 jobs · +24 % vs the week before\" footer=\"Read from your own jobs — nothing estimated.\">\n      <BarChart data={data} x=\"day\" xFormat=\"day\" xLabel=\"Day\" series={series} stacked format=\"integer\" height={220} autoRange />\n    </ChartCard>\n  );\n}\n"
+      },
+      {
+        "name": "usage-donut",
+        "title": "What you made",
+        "description": "A donut whose legend chips carry values and filter the ring.",
+        "path": "examples/chart-card/usage-donut.tsx",
+        "module": "@krizaka/charts/registry/examples/chart-card/usage-donut",
+        "code": "import { ChartCard } from \"@krizaka/charts/card\";\nimport { DonutChart } from \"@krizaka/charts/pie\";\n\nconst kinds = [\n  { kind: \"Images\", jobs: 96 },\n  { kind: \"Video\", jobs: 41 },\n  { kind: \"Audio\", jobs: 33 },\n  { kind: \"Text\", jobs: 25 },\n];\n\n// Legend chips carry the value and the share, and switch a part off: click “Video” and the ring re-measures.\nexport default function UsageDonut() {\n  return (\n    <ChartCard title=\"What you made\" insight=\"195 jobs, most of them images\" description=\"Jobs by kind, last 7 days.\">\n      <DonutChart data={kinds} label=\"kind\" value=\"jobs\" labelHeader=\"Kind\" valueHeader=\"Jobs\" centerLabel=\"jobs\" format=\"integer\" height={220} />\n    </ChartCard>\n  );\n}\n"
+      },
+      {
+        "name": "sparse-and-empty",
+        "title": "Sparse and empty",
+        "description": "The time axis zoomed on the active period, and a calm empty state.",
+        "path": "examples/chart-card/sparse-and-empty.tsx",
+        "module": "@krizaka/charts/registry/examples/chart-card/sparse-and-empty",
+        "code": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartCard } from \"@krizaka/charts/card\";\n\nconst days = Array.from({ length: 30 }, (_, i) => ({ day: `2026-09-${String(i + 1).padStart(2, \"0\")}`, jobs: i === 27 ? 100 : 0 }));\n\n// 29 empty days and one bar: `autoRange` zooms on the active period and says how sparse it is. No data: a calm state.\nexport default function SparseAndEmpty() {\n  return (\n    <div style={{ display: \"grid\", gap: 16, gridTemplateColumns: \"repeat(auto-fit, minmax(280px, 1fr))\" }}>\n      <ChartCard title=\"Jobs per day\" insight=\"100 jobs on Sep 28\">\n        <BarChart data={days} x=\"day\" xFormat=\"day\" y=\"jobs\" yLabel=\"Jobs\" format=\"integer\" height={180} autoRange />\n      </ChartCard>\n      <ChartCard title=\"Failed jobs\" insight=\"Nothing failed yet\">\n        <BarChart data={[]} x=\"day\" y=\"jobs\" yLabel=\"Jobs\" height={180} />\n      </ChartCard>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "before-after",
+        "title": "Before and after",
+        "description": "The same chart bare, then in a ChartCard.",
+        "path": "examples/chart-card/before-after.tsx",
+        "module": "@krizaka/charts/registry/examples/chart-card/before-after",
+        "code": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartCard } from \"@krizaka/charts/card\";\n\nconst data = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"].map((day, i) => ({ day, jobs: [12, 18, 9, 22, 31, 27, 35][i] }));\n\n// Before: a bare chart, “Show data” and the exports as text buttons. After: the same chart in a ChartCard.\nexport default function BeforeAfter() {\n  return (\n    <div style={{ display: \"grid\", gap: 16, gridTemplateColumns: \"repeat(auto-fit, minmax(280px, 1fr))\" }}>\n      <div>\n        <p style={{ margin: \"0 0 8px\", fontSize: 12, color: \"var(--kz-text-secondary)\" }}>Before</p>\n        <BarChart title=\"Jobs per day\" data={data} x=\"day\" y=\"jobs\" yLabel=\"Jobs\" height={180} actionsMenu={false} exportable />\n      </div>\n      <div>\n        <p style={{ margin: \"0 0 8px\", fontSize: 12, color: \"var(--kz-text-secondary)\" }}>After</p>\n        <ChartCard title=\"Jobs per day\" insight=\"154 jobs · busiest on Sunday\" footer=\"Source: your own jobs.\">\n          <BarChart data={data} x=\"day\" y=\"jobs\" yLabel=\"Jobs\" height={180} />\n        </ChartCard>\n      </div>\n    </div>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [],
+  "dependencies": [
+    "@krizaka/intl@workspace:^",
+    "d3-geo@^3.1.1",
+    "echarts@^6.1.0",
+    "topojson-client@^3.1.0"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/chart-card/jobs-activity.tsx",
+    "content": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartCard } from \"@krizaka/charts/card\";\n\nconst 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\"];\nconst completed = [12, 18, 9, 22, 31, 27, 35, 41];\nconst failed = [1, 0, 2, 1, 3, 0, 1, 2];\nconst data = days.map((day, i) => ({ day, completed: completed[i], failed: failed[i] }));\nconst series = [\n  { key: \"completed\", label: \"Completed\", color: \"accent\" },\n  { key: \"failed\", label: \"Failed\", color: \"danger\" },\n] as const;\n\n// The card hands the chart its title and insight; the ⋯ menu (table, CSV, PNG, SVG, copy) comes with it.\nexport default function JobsActivity() {\n  return (\n    <ChartCard title=\"Jobs per day\" insight=\"195 jobs · +24 % vs the week before\" footer=\"Read from your own jobs — nothing estimated.\">\n      <BarChart data={data} x=\"day\" xFormat=\"day\" xLabel=\"Day\" series={series} stacked format=\"integer\" height={220} autoRange />\n    </ChartCard>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "ChartCard",
+      "description": "The frame of a chart: title, insight, actions, chart, footer — used everywhere a chart is shown.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The chart (`LineChart`, `BarChart`, `DonutChart`…), without its own title.",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "What the chart shows, in a few words (a heading and the chart's accessible name).",
+          "required": true
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Controls beside the actions menu: a period switch, a filter.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "A class on the card (layout: grid placement).",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The period, the unit, the source — under the insight.",
+          "required": false
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A line under the chart: the source, the freshness, a link.",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "default": null,
+          "description": "The id of the card.",
+          "required": false
+        },
+        {
+          "name": "insight",
+          "type": "ReactNode",
+          "default": null,
+          "description": "One line that says what the chart shows: “100 jobs · +100 % vs last week”. Written by the app, from its data.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/chart.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "n/a",
+      "reason": "The ECharts escape hatch needs the DOM; a phone draws the SVG charts of the native entry.",
+      "use": "line-chart"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "echarts",
   "tier": "advanced",
   "whenToUse": [
@@ -89,11 +102,11 @@
             "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": "brand",
@@ -113,7 +126,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
           },
           {
@@ -141,7 +154,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
           },
           {
@@ -165,6 +178,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": "items",
             "type": "readonly WalkItem[]",
@@ -234,6 +254,13 @@
             "default": null,
             "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
             "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
           }
         ]
       }
@@ -289,11 +316,11 @@
           "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": "brand",
@@ -313,7 +340,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
         },
         {
@@ -341,7 +368,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
         },
         {
@@ -365,6 +392,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": "items",
           "type": "readonly WalkItem[]",
@@ -434,6 +468,13 @@
           "default": null,
           "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
           "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
         }
       ]
     }

package/registry/charts-provider.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": null,
   "tier": "core",
   "whenToUse": [
@@ -79,7 +90,7 @@
         "description": "Figures and dates in French, the Orazaka palette, the words translated.",
         "path": "examples/charts-provider/french-orazaka.tsx",
         "module": "@krizaka/charts/registry/examples/charts-provider/french-orazaka",
-        "code": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartsProvider } from \"@krizaka/charts/provider\";\n\nconst months = [\n  { month: \"2026-06\", credits: 412_000 },\n  { month: \"2026-07\", credits: 468_500 },\n  { month: \"2026-08\", credits: 391_200 },\n  { month: \"2026-09\", credits: 523_900 },\n];\n\n// Once near the app's root: the locale, the brand's palette, the words from the app's catalogue.\nexport default function FrenchOrazaka() {\n  return (\n    <ChartsProvider\n      locale=\"fr-FR\"\n      brand=\"orazaka\"\n      labels={{ showData: \"Voir les données\", hideData: \"Masquer les données\", empty: \"Pas encore de données.\", kinds: { bar: \"Histogramme\" } }}\n    >\n      <BarChart title=\"Crédits consommés par mois\" data={months} x=\"month\" xLabel=\"Mois\" y=\"credits\" yLabel=\"Crédits\" format=\"compact\" />\n    </ChartsProvider>\n  );\n}\n"
+        "code": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartsProvider } from \"@krizaka/charts/provider\";\n\nconst months = [\n  { month: \"2026-06\", credits: 412_000 },\n  { month: \"2026-07\", credits: 468_500 },\n  { month: \"2026-08\", credits: 391_200 },\n  { month: \"2026-09\", credits: 523_900 },\n];\n\n// Once near the app's root: the locale, the brand's palette, the words from the app's catalogue.\nexport default function FrenchOrazaka() {\n  return (\n    <ChartsProvider\n      locale=\"fr-FR\"\n      brand=\"orazaka\"\n      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\" } }}\n    >\n      <BarChart title=\"Crédits consommés par mois\" data={months} x=\"month\" xLabel=\"Mois\" y=\"credits\" yLabel=\"Crédits\" format=\"compact\" />\n    </ChartsProvider>\n  );\n}\n"
       }
     ]
   },
@@ -157,7 +168,7 @@
   "registryDependencies": [],
   "demo": {
     "path": "examples/charts-provider/french-orazaka.tsx",
-    "content": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartsProvider } from \"@krizaka/charts/provider\";\n\nconst months = [\n  { month: \"2026-06\", credits: 412_000 },\n  { month: \"2026-07\", credits: 468_500 },\n  { month: \"2026-08\", credits: 391_200 },\n  { month: \"2026-09\", credits: 523_900 },\n];\n\n// Once near the app's root: the locale, the brand's palette, the words from the app's catalogue.\nexport default function FrenchOrazaka() {\n  return (\n    <ChartsProvider\n      locale=\"fr-FR\"\n      brand=\"orazaka\"\n      labels={{ showData: \"Voir les données\", hideData: \"Masquer les données\", empty: \"Pas encore de données.\", kinds: { bar: \"Histogramme\" } }}\n    >\n      <BarChart title=\"Crédits consommés par mois\" data={months} x=\"month\" xLabel=\"Mois\" y=\"credits\" yLabel=\"Crédits\" format=\"compact\" />\n    </ChartsProvider>\n  );\n}\n"
+    "content": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartsProvider } from \"@krizaka/charts/provider\";\n\nconst months = [\n  { month: \"2026-06\", credits: 412_000 },\n  { month: \"2026-07\", credits: 468_500 },\n  { month: \"2026-08\", credits: 391_200 },\n  { month: \"2026-09\", credits: 523_900 },\n];\n\n// Once near the app's root: the locale, the brand's palette, the words from the app's catalogue.\nexport default function FrenchOrazaka() {\n  return (\n    <ChartsProvider\n      locale=\"fr-FR\"\n      brand=\"orazaka\"\n      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\" } }}\n    >\n      <BarChart title=\"Crédits consommés par mois\" data={months} x=\"month\" xLabel=\"Mois\" y=\"credits\" yLabel=\"Crédits\" format=\"compact\" />\n    </ChartsProvider>\n  );\n}\n"
   },
   "props": [
     {

package/registry/credit-usage.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": [