@krizaka/charts 0.3.0 → 0.4.0

package/registry/chart-card.json

@@ -0,0 +1,235 @@
+{
+  "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",
+  "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

@@ -89,11 +89,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 +113,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 +141,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 +165,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 +241,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 +303,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 +327,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 +355,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 +379,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 +455,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

@@ -79,7 +79,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 +157,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/earnings-chart.json

@@ -90,11 +90,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 +121,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 +149,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 +194,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 +243,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 +292,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 +537,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 +568,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 +596,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 +641,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 +690,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 +739,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
+};