@krizaka/charts 0.0.0-stage → 0.2.0

package/registry/pie-chart.json

@@ -0,0 +1,1288 @@
+{
+  "name": "pie-chart",
+  "package": "@krizaka/charts",
+  "type": "chart",
+  "title": "Pie and donut chart",
+  "summary": "Part of a whole: slices sorted by size, folded into “Other” past six, each share written in the legend; a donut carries the total in its hole.",
+  "description": "Part of a whole: slices sorted by size, folded into “Other” past six, each share written in the legend; a donut carries the total in its hole.",
+  "status": "beta",
+  "category": "charts",
+  "platforms": "both",
+  "engine": "svg",
+  "tier": "core",
+  "whenToUse": [
+    "How one total splits at one moment: credits spent by model this month, storage by kind.",
+    "Two to six parts, one of which clearly dominates or is clearly small."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "Parts compared precisely, or more than six of them.",
+      "use": "bar-chart"
+    },
+    {
+      "when": "Parts that change over time.",
+      "use": "area-chart"
+    },
+    {
+      "when": "Nested parts (a team, then its projects).",
+      "use": "treemap"
+    }
+  ],
+  "bestPractices": [
+    "Prefer the donut (`DonutChart`) with `centerLabel`: the total is the first thing a reader looks for.",
+    "Name the folded slice in your language with `otherLabel`.",
+    "Never put two pies side by side to compare them: use bars."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Moves the focus to the plot (one tab stop), then to the data and export buttons."
+      },
+      {
+        "keys": "Arrow keys",
+        "action": "Walk the items one by one: each is announced and its tooltip shown."
+      },
+      {
+        "keys": "Home / End",
+        "action": "Jump to the first or the last item."
+      },
+      {
+        "keys": "Esc",
+        "action": "Hides the tooltip and clears the active item."
+      },
+      {
+        "keys": "Enter",
+        "action": "Selects the active slice (calls `onSelect` with its row)."
+      }
+    ],
+    "notes": [
+      "The plot is a group named by the title and described by a summary written from the data, read before anything else.",
+      "The data table is always in the page for assistive technology; “Show data” reveals it for everyone.",
+      "Colour never carries a meaning alone: the legend, the labels and the table say it in words.",
+      "The entrance plays once, when the chart comes on screen, and never under reduced motion.",
+      "A 2 px gap in the surface colour separates the slices."
+    ]
+  },
+  "related": [
+    "bar-chart",
+    "treemap",
+    "gauge"
+  ],
+  "source": "packages/charts/src/meta/pie-chart.ts",
+  "install": {
+    "web": "npm install @krizaka/charts",
+    "native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
+  },
+  "web": {
+    "entry": "@krizaka/charts/pie",
+    "import": "import { DonutChart, PieChart } from \"@krizaka/charts/pie\";",
+    "props": [
+      {
+        "component": "DonutChart",
+        "description": "A pie with a hole: the total (or `centerValue`) and `centerLabel` in it.",
+        "props": [
+          {
+            "name": "data",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "One row per part.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string | ((datum: T, index: number) => string)",
+            "default": null,
+            "description": "The field (or function) naming the part.",
+            "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)",
+            "default": null,
+            "description": "The field (or function) of its amount (≥ 0).",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+            "required": false
+          },
+          {
+            "name": "centerLabel",
+            "type": "string",
+            "default": null,
+            "description": "The words under the number in the hole of a donut (“Total credits”).",
+            "required": false
+          },
+          {
+            "name": "centerValue",
+            "type": "string",
+            "default": null,
+            "description": "The number in the hole, written already. Default: the total.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "A class on the figure (layout: margins, grid placement).",
+            "required": false
+          },
+          {
+            "name": "color",
+            "type": "string | ((datum: T, index: number) => SeriesColor)",
+            "default": null,
+            "description": "A part's own colour (a slot, a tone or a CSS colour); default: the palette in order of size.",
+            "required": false
+          },
+          {
+            "name": "dataTable",
+            "type": "boolean",
+            "default": null,
+            "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A sentence under the title: the period, the unit, the source.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+            "required": false
+          },
+          {
+            "name": "exportable",
+            "type": "boolean | readonly ExportFormat[]",
+            "default": null,
+            "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+            "required": false
+          },
+          {
+            "name": "format",
+            "type": "ValueFormat",
+            "default": null,
+            "description": "How the amounts are written.",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+            "required": false
+          },
+          {
+            "name": "hideTitle",
+            "type": "boolean",
+            "default": null,
+            "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": "string",
+            "default": null,
+            "description": "The id of the figure.",
+            "required": false
+          },
+          {
+            "name": "labelHeader",
+            "type": "string",
+            "default": null,
+            "description": "The header of the parts in the data table.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "ChartLabelsInput",
+            "default": null,
+            "description": "The words, translated: the buttons, the states, the written summary.",
+            "required": false
+          },
+          {
+            "name": "live",
+            "type": "boolean",
+            "default": null,
+            "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+            "required": false
+          },
+          {
+            "name": "loading",
+            "type": "boolean",
+            "default": null,
+            "description": "The data is on its way: a skeleton of the chart, announced once.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "maxSlices",
+            "type": "number",
+            "default": null,
+            "description": "At most this many slices; the rest fold into one, named `otherLabel`. Default 6.",
+            "required": false
+          },
+          {
+            "name": "onSelect",
+            "type": "((datum: T, index: number) => void)",
+            "default": null,
+            "description": "Called with the row when a slice is clicked (or Enter is pressed on it).",
+            "required": false
+          },
+          {
+            "name": "otherLabel",
+            "type": "string",
+            "default": null,
+            "description": "The name of the folded slice. Default “Other”.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "CSSProperties",
+            "default": null,
+            "description": "Inline style on the figure (layout only: colours come from the tokens).",
+            "required": false
+          },
+          {
+            "name": "summary",
+            "type": "\"hidden\" | \"visible\"",
+            "default": null,
+            "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+            "required": false
+          },
+          {
+            "name": "summaryText",
+            "type": "string",
+            "default": null,
+            "description": "Your own summary instead of the generated one (still read first by screen readers).",
+            "required": false
+          },
+          {
+            "name": "valueHeader",
+            "type": "string",
+            "default": null,
+            "description": "The header of the amounts in the data table.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "PieChart",
+        "description": "",
+        "props": [
+          {
+            "name": "data",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "One row per part.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string | ((datum: T, index: number) => string)",
+            "default": null,
+            "description": "The field (or function) naming the part.",
+            "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)",
+            "default": null,
+            "description": "The field (or function) of its amount (≥ 0).",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+            "required": false
+          },
+          {
+            "name": "centerLabel",
+            "type": "string",
+            "default": null,
+            "description": "The words under the number in the hole of a donut (“Total credits”).",
+            "required": false
+          },
+          {
+            "name": "centerValue",
+            "type": "string",
+            "default": null,
+            "description": "The number in the hole, written already. Default: the total.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "A class on the figure (layout: margins, grid placement).",
+            "required": false
+          },
+          {
+            "name": "color",
+            "type": "string | ((datum: T, index: number) => SeriesColor)",
+            "default": null,
+            "description": "A part's own colour (a slot, a tone or a CSS colour); default: the palette in order of size.",
+            "required": false
+          },
+          {
+            "name": "dataTable",
+            "type": "boolean",
+            "default": null,
+            "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A sentence under the title: the period, the unit, the source.",
+            "required": false
+          },
+          {
+            "name": "donut",
+            "type": "boolean",
+            "default": null,
+            "description": "A ring rather than a pie: the total (or `centerValue`) is written in its hole.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+            "required": false
+          },
+          {
+            "name": "exportable",
+            "type": "boolean | readonly ExportFormat[]",
+            "default": null,
+            "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+            "required": false
+          },
+          {
+            "name": "format",
+            "type": "ValueFormat",
+            "default": null,
+            "description": "How the amounts are written.",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+            "required": false
+          },
+          {
+            "name": "hideTitle",
+            "type": "boolean",
+            "default": null,
+            "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": "string",
+            "default": null,
+            "description": "The id of the figure.",
+            "required": false
+          },
+          {
+            "name": "labelHeader",
+            "type": "string",
+            "default": null,
+            "description": "The header of the parts in the data table.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "ChartLabelsInput",
+            "default": null,
+            "description": "The words, translated: the buttons, the states, the written summary.",
+            "required": false
+          },
+          {
+            "name": "live",
+            "type": "boolean",
+            "default": null,
+            "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+            "required": false
+          },
+          {
+            "name": "loading",
+            "type": "boolean",
+            "default": null,
+            "description": "The data is on its way: a skeleton of the chart, announced once.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "maxSlices",
+            "type": "number",
+            "default": null,
+            "description": "At most this many slices; the rest fold into one, named `otherLabel`. Default 6.",
+            "required": false
+          },
+          {
+            "name": "onSelect",
+            "type": "((datum: T, index: number) => void)",
+            "default": null,
+            "description": "Called with the row when a slice is clicked (or Enter is pressed on it).",
+            "required": false
+          },
+          {
+            "name": "otherLabel",
+            "type": "string",
+            "default": null,
+            "description": "The name of the folded slice. Default “Other”.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "CSSProperties",
+            "default": null,
+            "description": "Inline style on the figure (layout only: colours come from the tokens).",
+            "required": false
+          },
+          {
+            "name": "summary",
+            "type": "\"hidden\" | \"visible\"",
+            "default": null,
+            "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+            "required": false
+          },
+          {
+            "name": "summaryText",
+            "type": "string",
+            "default": null,
+            "description": "Your own summary instead of the generated one (still read first by screen readers).",
+            "required": false
+          },
+          {
+            "name": "valueHeader",
+            "type": "string",
+            "default": null,
+            "description": "The header of the amounts in the data table.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "credit-spend",
+        "title": "Donut",
+        "description": "This month's Orazaka credits by model, the total in the hole.",
+        "path": "examples/pie-chart/credit-spend.tsx",
+        "module": "@krizaka/charts/registry/examples/pie-chart/credit-spend",
+        "code": "import { DonutChart } from \"@krizaka/charts/pie\";\n\nconst spend = [\n  { model: \"Chat · Mistral Large\", credits: 18_400 },\n  { model: \"Image · Flux\", credits: 9_650 },\n  { model: \"Video · Wan 2.2\", credits: 7_200 },\n  { model: \"Speech · Whisper\", credits: 2_100 },\n  { model: \"Embeddings\", credits: 640 },\n];\n\nexport default function CreditSpend() {\n  return (\n    <DonutChart\n      title=\"Credits spent in September\"\n      data={spend}\n      label=\"model\"\n      value=\"credits\"\n      labelHeader=\"Model\"\n      valueHeader=\"Credits\"\n      format=\"integer\"\n      centerLabel=\"credits\"\n    />\n  );\n}\n"
+      },
+      {
+        "name": "storage-by-kind",
+        "title": "Pie",
+        "description": "Storage by kind of file, the small kinds folded into “Other”.",
+        "path": "examples/pie-chart/storage-by-kind.tsx",
+        "module": "@krizaka/charts/registry/examples/pie-chart/storage-by-kind",
+        "code": "import { PieChart } from \"@krizaka/charts/pie\";\n\n// Gigabytes; past six slices the smallest fold into “Other”.\nconst kinds = [\n  { kind: \"Videos\", gb: 812 },\n  { kind: \"Thumbnails\", gb: 64 },\n  { kind: \"Audio\", gb: 121 },\n  { kind: \"Subtitles\", gb: 3 },\n  { kind: \"Project files\", gb: 96 },\n  { kind: \"Exports\", gb: 210 },\n  { kind: \"Fonts\", gb: 1 },\n  { kind: \"Logs\", gb: 2 },\n];\n\nexport default function StorageByKind() {\n  return (\n    <PieChart\n      title=\"Storage by kind\"\n      data={kinds}\n      label=\"kind\"\n      value=\"gb\"\n      format={{ style: \"unit\", unit: \"gigabyte\" }}\n      otherLabel=\"Other\"\n    />\n  );\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/charts/native",
+    "import": "import { DonutChart, PieChart } from \"@krizaka/charts/native\";",
+    "differences": [
+      "No tooltip: swipe up and down on the chart to hear each slice and its share.",
+      "No `onSelect`, no data table."
+    ],
+    "props": [
+      {
+        "component": "DonutChart",
+        "description": "A pie with a hole (React Native).",
+        "props": [
+          {
+            "name": "data",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "One row per part.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string | ((datum: T, index: number) => string)",
+            "default": null,
+            "description": "The field naming the part.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows: its heading and accessible name.",
+            "required": true
+          },
+          {
+            "name": "value",
+            "type": "string | ((datum: T, index: number) => number)",
+            "default": null,
+            "description": "The field of its amount.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette leads. Default Krizaka.",
+            "required": false
+          },
+          {
+            "name": "centerLabel",
+            "type": "string",
+            "default": null,
+            "description": "The words under the total of a donut.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Shown instead of the plot when there is nothing to draw. Default: the `empty` label.",
+            "required": false
+          },
+          {
+            "name": "format",
+            "type": "ValueFormat",
+            "default": null,
+            "description": "How the amounts are written.",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "The plot's height.",
+            "required": false
+          },
+          {
+            "name": "hideTitle",
+            "type": "boolean",
+            "default": null,
+            "description": "Hide the heading (it stays the accessible name).",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "ChartLabelsInput",
+            "default": null,
+            "description": "The words: the readout, the summary.",
+            "required": false
+          },
+          {
+            "name": "loading",
+            "type": "boolean",
+            "default": null,
+            "description": "The data is on its way.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date. Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "maxSlices",
+            "type": "number",
+            "default": null,
+            "description": "At most this many slices; the rest fold into `otherLabel`. Default 6.",
+            "required": false
+          },
+          {
+            "name": "otherLabel",
+            "type": "string",
+            "default": null,
+            "description": "The name of the folded slice. Default “Other”.",
+            "required": false
+          },
+          {
+            "name": "scheme",
+            "type": "Mode",
+            "default": null,
+            "description": "Dark or light. Default: the device's (pass `useTheme().scheme` of\n@krizaka /ui/native to follow the app).",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "ViewStyle",
+            "default": null,
+            "description": "The style of the chart's container (layout only: colours come from the theme).",
+            "required": false
+          },
+          {
+            "name": "theme",
+            "type": "Partial<ChartTheme>",
+            "default": null,
+            "description": "The app's colour roles (`useTheme().theme` of\n@krizaka /ui/native): a product's brand overrides apply.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "PieChart",
+        "description": "Part of a whole (React Native).",
+        "props": [
+          {
+            "name": "data",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "One row per part.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string | ((datum: T, index: number) => string)",
+            "default": null,
+            "description": "The field naming the part.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows: its heading and accessible name.",
+            "required": true
+          },
+          {
+            "name": "value",
+            "type": "string | ((datum: T, index: number) => number)",
+            "default": null,
+            "description": "The field of its amount.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette leads. Default Krizaka.",
+            "required": false
+          },
+          {
+            "name": "centerLabel",
+            "type": "string",
+            "default": null,
+            "description": "The words under the total of a donut.",
+            "required": false
+          },
+          {
+            "name": "donut",
+            "type": "boolean",
+            "default": null,
+            "description": "A ring with the total in its hole.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Shown instead of the plot when there is nothing to draw. Default: the `empty` label.",
+            "required": false
+          },
+          {
+            "name": "format",
+            "type": "ValueFormat",
+            "default": null,
+            "description": "How the amounts are written.",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "The plot's height.",
+            "required": false
+          },
+          {
+            "name": "hideTitle",
+            "type": "boolean",
+            "default": null,
+            "description": "Hide the heading (it stays the accessible name).",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "ChartLabelsInput",
+            "default": null,
+            "description": "The words: the readout, the summary.",
+            "required": false
+          },
+          {
+            "name": "loading",
+            "type": "boolean",
+            "default": null,
+            "description": "The data is on its way.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date. Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "maxSlices",
+            "type": "number",
+            "default": null,
+            "description": "At most this many slices; the rest fold into `otherLabel`. Default 6.",
+            "required": false
+          },
+          {
+            "name": "otherLabel",
+            "type": "string",
+            "default": null,
+            "description": "The name of the folded slice. Default “Other”.",
+            "required": false
+          },
+          {
+            "name": "scheme",
+            "type": "Mode",
+            "default": null,
+            "description": "Dark or light. Default: the device's (pass `useTheme().scheme` of\n@krizaka /ui/native to follow the app).",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "ViewStyle",
+            "default": null,
+            "description": "The style of the chart's container (layout only: colours come from the theme).",
+            "required": false
+          },
+          {
+            "name": "theme",
+            "type": "Partial<ChartTheme>",
+            "default": null,
+            "description": "The app's colour roles (`useTheme().theme` of\n@krizaka /ui/native): a product's brand overrides apply.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "credit-spend",
+        "title": "Donut",
+        "description": "Credits by model, the total in the hole.",
+        "path": "examples/pie-chart/native/credit-spend.tsx",
+        "module": "@krizaka/charts/registry/examples/pie-chart/native/credit-spend",
+        "code": "import { DonutChart } from \"@krizaka/charts/native\";\n\nconst spend = [\n  { model: \"Chat\", credits: 18_400 },\n  { model: \"Image\", credits: 9_650 },\n  { model: \"Video\", credits: 7_200 },\n  { model: \"Speech\", credits: 2_100 },\n];\n\nexport default function CreditSpend() {\n  return <DonutChart title=\"Credits spent in September\" data={spend} label=\"model\" value=\"credits\" format=\"compact\" centerLabel=\"credits\" />;\n}\n",
+        "screenshots": {
+          "dark": "examples/pie-chart/native/credit-spend.dark.png",
+          "light": "examples/pie-chart/native/credit-spend.light.png"
+        }
+      }
+    ]
+  },
+  "files": [],
+  "dependencies": [
+    "@krizaka/intl@workspace:^",
+    "d3-geo@^3.1.1",
+    "echarts@^6.1.0",
+    "topojson-client@^3.1.0"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/pie-chart/credit-spend.tsx",
+    "content": "import { DonutChart } from \"@krizaka/charts/pie\";\n\nconst spend = [\n  { model: \"Chat · Mistral Large\", credits: 18_400 },\n  { model: \"Image · Flux\", credits: 9_650 },\n  { model: \"Video · Wan 2.2\", credits: 7_200 },\n  { model: \"Speech · Whisper\", credits: 2_100 },\n  { model: \"Embeddings\", credits: 640 },\n];\n\nexport default function CreditSpend() {\n  return (\n    <DonutChart\n      title=\"Credits spent in September\"\n      data={spend}\n      label=\"model\"\n      value=\"credits\"\n      labelHeader=\"Model\"\n      valueHeader=\"Credits\"\n      format=\"integer\"\n      centerLabel=\"credits\"\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "DonutChart",
+      "description": "A pie with a hole: the total (or `centerValue`) and `centerLabel` in it.",
+      "props": [
+        {
+          "name": "data",
+          "type": "readonly T[]",
+          "default": null,
+          "description": "One row per part.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string | ((datum: T, index: number) => string)",
+          "default": null,
+          "description": "The field (or function) naming the part.",
+          "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)",
+          "default": null,
+          "description": "The field (or function) of its amount (≥ 0).",
+          "required": true
+        },
+        {
+          "name": "brand",
+          "type": "BrandId",
+          "default": null,
+          "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+          "required": false
+        },
+        {
+          "name": "centerLabel",
+          "type": "string",
+          "default": null,
+          "description": "The words under the number in the hole of a donut (“Total credits”).",
+          "required": false
+        },
+        {
+          "name": "centerValue",
+          "type": "string",
+          "default": null,
+          "description": "The number in the hole, written already. Default: the total.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "A class on the figure (layout: margins, grid placement).",
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "string | ((datum: T, index: number) => SeriesColor)",
+          "default": null,
+          "description": "A part's own colour (a slot, a tone or a CSS colour); default: the palette in order of size.",
+          "required": false
+        },
+        {
+          "name": "dataTable",
+          "type": "boolean",
+          "default": null,
+          "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A sentence under the title: the period, the unit, the source.",
+          "required": false
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+          "required": false
+        },
+        {
+          "name": "exportable",
+          "type": "boolean | readonly ExportFormat[]",
+          "default": null,
+          "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+          "required": false
+        },
+        {
+          "name": "format",
+          "type": "ValueFormat",
+          "default": null,
+          "description": "How the amounts are written.",
+          "required": false
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "default": null,
+          "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+          "required": false
+        },
+        {
+          "name": "hideTitle",
+          "type": "boolean",
+          "default": null,
+          "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "default": null,
+          "description": "The id of the figure.",
+          "required": false
+        },
+        {
+          "name": "labelHeader",
+          "type": "string",
+          "default": null,
+          "description": "The header of the parts in the data table.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "ChartLabelsInput",
+          "default": null,
+          "description": "The words, translated: the buttons, the states, the written summary.",
+          "required": false
+        },
+        {
+          "name": "live",
+          "type": "boolean",
+          "default": null,
+          "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "default": null,
+          "description": "The data is on its way: a skeleton of the chart, announced once.",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "Locale",
+          "default": null,
+          "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+          "required": false
+        },
+        {
+          "name": "maxSlices",
+          "type": "number",
+          "default": null,
+          "description": "At most this many slices; the rest fold into one, named `otherLabel`. Default 6.",
+          "required": false
+        },
+        {
+          "name": "onSelect",
+          "type": "((datum: T, index: number) => void)",
+          "default": null,
+          "description": "Called with the row when a slice is clicked (or Enter is pressed on it).",
+          "required": false
+        },
+        {
+          "name": "otherLabel",
+          "type": "string",
+          "default": null,
+          "description": "The name of the folded slice. Default “Other”.",
+          "required": false
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "default": null,
+          "description": "Inline style on the figure (layout only: colours come from the tokens).",
+          "required": false
+        },
+        {
+          "name": "summary",
+          "type": "\"hidden\" | \"visible\"",
+          "default": null,
+          "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+          "required": false
+        },
+        {
+          "name": "summaryText",
+          "type": "string",
+          "default": null,
+          "description": "Your own summary instead of the generated one (still read first by screen readers).",
+          "required": false
+        },
+        {
+          "name": "valueHeader",
+          "type": "string",
+          "default": null,
+          "description": "The header of the amounts in the data table.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "PieChart",
+      "description": "",
+      "props": [
+        {
+          "name": "data",
+          "type": "readonly T[]",
+          "default": null,
+          "description": "One row per part.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string | ((datum: T, index: number) => string)",
+          "default": null,
+          "description": "The field (or function) naming the part.",
+          "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)",
+          "default": null,
+          "description": "The field (or function) of its amount (≥ 0).",
+          "required": true
+        },
+        {
+          "name": "brand",
+          "type": "BrandId",
+          "default": null,
+          "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+          "required": false
+        },
+        {
+          "name": "centerLabel",
+          "type": "string",
+          "default": null,
+          "description": "The words under the number in the hole of a donut (“Total credits”).",
+          "required": false
+        },
+        {
+          "name": "centerValue",
+          "type": "string",
+          "default": null,
+          "description": "The number in the hole, written already. Default: the total.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "A class on the figure (layout: margins, grid placement).",
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "string | ((datum: T, index: number) => SeriesColor)",
+          "default": null,
+          "description": "A part's own colour (a slot, a tone or a CSS colour); default: the palette in order of size.",
+          "required": false
+        },
+        {
+          "name": "dataTable",
+          "type": "boolean",
+          "default": null,
+          "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A sentence under the title: the period, the unit, the source.",
+          "required": false
+        },
+        {
+          "name": "donut",
+          "type": "boolean",
+          "default": null,
+          "description": "A ring rather than a pie: the total (or `centerValue`) is written in its hole.",
+          "required": false
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+          "required": false
+        },
+        {
+          "name": "exportable",
+          "type": "boolean | readonly ExportFormat[]",
+          "default": null,
+          "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+          "required": false
+        },
+        {
+          "name": "format",
+          "type": "ValueFormat",
+          "default": null,
+          "description": "How the amounts are written.",
+          "required": false
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "default": null,
+          "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+          "required": false
+        },
+        {
+          "name": "hideTitle",
+          "type": "boolean",
+          "default": null,
+          "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "default": null,
+          "description": "The id of the figure.",
+          "required": false
+        },
+        {
+          "name": "labelHeader",
+          "type": "string",
+          "default": null,
+          "description": "The header of the parts in the data table.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "ChartLabelsInput",
+          "default": null,
+          "description": "The words, translated: the buttons, the states, the written summary.",
+          "required": false
+        },
+        {
+          "name": "live",
+          "type": "boolean",
+          "default": null,
+          "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "default": null,
+          "description": "The data is on its way: a skeleton of the chart, announced once.",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "Locale",
+          "default": null,
+          "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+          "required": false
+        },
+        {
+          "name": "maxSlices",
+          "type": "number",
+          "default": null,
+          "description": "At most this many slices; the rest fold into one, named `otherLabel`. Default 6.",
+          "required": false
+        },
+        {
+          "name": "onSelect",
+          "type": "((datum: T, index: number) => void)",
+          "default": null,
+          "description": "Called with the row when a slice is clicked (or Enter is pressed on it).",
+          "required": false
+        },
+        {
+          "name": "otherLabel",
+          "type": "string",
+          "default": null,
+          "description": "The name of the folded slice. Default “Other”.",
+          "required": false
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "default": null,
+          "description": "Inline style on the figure (layout only: colours come from the tokens).",
+          "required": false
+        },
+        {
+          "name": "summary",
+          "type": "\"hidden\" | \"visible\"",
+          "default": null,
+          "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+          "required": false
+        },
+        {
+          "name": "summaryText",
+          "type": "string",
+          "default": null,
+          "description": "Your own summary instead of the generated one (still read first by screen readers).",
+          "required": false
+        },
+        {
+          "name": "valueHeader",
+          "type": "string",
+          "default": null,
+          "description": "The header of the amounts in the data table.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}