@krizaka/charts 0.0.0-stage → 0.1.0

package/registry/examples/sparkline/native/stat-trend.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/sparkline/native/stat-trend.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/sparkline/native/stat-trend.tsx
+import { Sparkline } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var views = [820, 760, 910, 880, 1020, 990, 1130, 1210, 1090, 1340, 1280, 1420, 1390, 1510, 1620, 1580, 1700, 1640, 1810, 1760, 1930, 2040, 1980, 2150, 2090, 2260, 2340, 2280, 2410, 2520];
+function StatTrend() {
+  return /* @__PURE__ */ jsx(Sparkline, { title: "Views, last 30 days", data: views, variant: "area", trendTone: true, width: 160, height: 40, format: "integer" });
+}
+export {
+  StatTrend as default
+};

package/registry/examples/sparkline/native/stat-trend.tsx

@@ -0,0 +1,7 @@
+import { Sparkline } from "@krizaka/charts/native";
+
+const views = [820, 760, 910, 880, 1_020, 990, 1_130, 1_210, 1_090, 1_340, 1_280, 1_420, 1_390, 1_510, 1_620, 1_580, 1_700, 1_640, 1_810, 1_760, 1_930, 2_040, 1_980, 2_150, 2_090, 2_260, 2_340, 2_280, 2_410, 2_520];
+
+export default function StatTrend() {
+  return <Sparkline title="Views, last 30 days" data={views} variant="area" trendTone width={160} height={40} format="integer" />;
+}

package/registry/examples/sparkline/stat-trend.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/sparkline/stat-trend.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/sparkline/stat-trend.tsx
+import { Sparkline } from "@krizaka/charts/sparkline";
+import { jsx, jsxs } from "react/jsx-runtime";
+var views = [820, 760, 910, 880, 1020, 990, 1130, 1210, 1090, 1340, 1280, 1420, 1390, 1510, 1620, 1580, 1700, 1640, 1810, 1760, 1930, 2040, 1980, 2150, 2090, 2260, 2340, 2280, 2410, 2520];
+function StatTrend() {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", gap: 16 }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 13, color: "var(--kz-text-secondary)" }, children: "Views, last 30 days" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 28, fontWeight: 600, color: "var(--kz-text-primary)" }, children: "2,520" })
+    ] }),
+    /* @__PURE__ */ jsx(Sparkline, { title: "Views, last 30 days", data: views, variant: "area", trendTone: true, width: 140, height: 40, format: "integer" })
+  ] });
+}
+export {
+  StatTrend as default
+};

package/registry/examples/sparkline/stat-trend.tsx

@@ -0,0 +1,15 @@
+import { Sparkline } from "@krizaka/charts/sparkline";
+
+const views = [820, 760, 910, 880, 1_020, 990, 1_130, 1_210, 1_090, 1_340, 1_280, 1_420, 1_390, 1_510, 1_620, 1_580, 1_700, 1_640, 1_810, 1_760, 1_930, 2_040, 1_980, 2_150, 2_090, 2_260, 2_340, 2_280, 2_410, 2_520];
+
+export default function StatTrend() {
+  return (
+    <div style={{ display: "flex", alignItems: "flex-end", gap: 16 }}>
+      <div>
+        <p style={{ margin: 0, fontSize: 13, color: "var(--kz-text-secondary)" }}>Views, last 30 days</p>
+        <p style={{ margin: 0, fontSize: 28, fontWeight: 600, color: "var(--kz-text-primary)" }}>2,520</p>
+      </div>
+      <Sparkline title="Views, last 30 days" data={views} variant="area" trendTone width={140} height={40} format="integer" />
+    </div>
+  );
+}

package/registry/examples/sparkline/table-rows.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/sparkline/table-rows.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/sparkline/table-rows.tsx
+import { Sparkline } from "@krizaka/charts/sparkline";
+import { jsx, jsxs } from "react/jsx-runtime";
+var models = [
+  { name: "Chat \xB7 Mistral Large", p95: [820, 790, 805, 760, 742, 731, 720, 704, 699, 688, 690, 676] },
+  { name: "Image \xB7 Flux", p95: [2400, 2380, 2520, 2610, 2590, 2700, 2760, 2810, 2790, 2880, 2910, 2950] },
+  { name: "Speech \xB7 Whisper", p95: [310, 305, 312, 309, 300, 311, 306, 304, 308, 302, 307, 305] }
+];
+function TableRows() {
+  return /* @__PURE__ */ jsx("table", { style: { borderCollapse: "collapse", fontSize: 13, color: "var(--kz-text-primary)" }, children: /* @__PURE__ */ jsx("tbody", { children: models.map((m) => /* @__PURE__ */ jsxs("tr", { style: { borderTop: "1px solid var(--kz-border-subtle)" }, children: [
+    /* @__PURE__ */ jsx("th", { scope: "row", style: { padding: "8px 16px 8px 0", textAlign: "left", fontWeight: 500 }, children: m.name }),
+    /* @__PURE__ */ jsx("td", { style: { padding: 8 }, children: /* @__PURE__ */ jsx(Sparkline, { title: `${m.name}, p95 latency`, data: m.p95, trendTone: "inverse", width: 120, height: 28, format: { style: "unit", unit: "millisecond" } }) }),
+    /* @__PURE__ */ jsxs("td", { style: { padding: 8, textAlign: "right" }, children: [
+      m.p95[m.p95.length - 1],
+      " ms"
+    ] })
+  ] }, m.name)) }) });
+}
+export {
+  TableRows as default
+};

package/registry/examples/sparkline/table-rows.tsx

@@ -0,0 +1,26 @@
+import { Sparkline } from "@krizaka/charts/sparkline";
+
+// p95 latency (ms) over the last 12 hours: down is good, hence `trendTone="inverse"`.
+const models = [
+  { name: "Chat · Mistral Large", p95: [820, 790, 805, 760, 742, 731, 720, 704, 699, 688, 690, 676] },
+  { name: "Image · Flux", p95: [2_400, 2_380, 2_520, 2_610, 2_590, 2_700, 2_760, 2_810, 2_790, 2_880, 2_910, 2_950] },
+  { name: "Speech · Whisper", p95: [310, 305, 312, 309, 300, 311, 306, 304, 308, 302, 307, 305] },
+];
+
+export default function TableRows() {
+  return (
+    <table style={{ borderCollapse: "collapse", fontSize: 13, color: "var(--kz-text-primary)" }}>
+      <tbody>
+        {models.map((m) => (
+          <tr key={m.name} style={{ borderTop: "1px solid var(--kz-border-subtle)" }}>
+            <th scope="row" style={{ padding: "8px 16px 8px 0", textAlign: "left", fontWeight: 500 }}>{m.name}</th>
+            <td style={{ padding: 8 }}>
+              <Sparkline title={`${m.name}, p95 latency`} data={m.p95} trendTone="inverse" width={120} height={28} format={{ style: "unit", unit: "millisecond" }} />
+            </td>
+            <td style={{ padding: 8, textAlign: "right" }}>{m.p95[m.p95.length - 1]} ms</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/registry/examples/treemap/storage.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/treemap/storage.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/treemap/storage.tsx
+import { Treemap } from "@krizaka/charts/treemap";
+import { jsx } from "react/jsx-runtime";
+var projects = [
+  { name: "Documentary \u201CFleuve\u201D", children: [{ name: "Rushes", value: 412 }, { name: "Exports", value: 96 }, { name: "Audio", value: 38 }] },
+  { name: "Weekly vlog", children: [{ name: "Rushes", value: 188 }, { name: "Exports", value: 71 }, { name: "Thumbnails", value: 12 }] },
+  { name: "Course \u201CColour\u201D", children: [{ name: "Lessons", value: 143 }, { name: "Exports", value: 52 }] },
+  { name: "Archive", value: 61 }
+];
+function Storage() {
+  return /* @__PURE__ */ jsx(Treemap, { title: "Storage by project", data: projects, format: { style: "unit", unit: "gigabyte" }, pathLabel: "Project \u203A kind", valueLabel: "Size" });
+}
+export {
+  Storage as default
+};

package/registry/examples/treemap/storage.tsx

@@ -0,0 +1,13 @@
+import { Treemap } from "@krizaka/charts/treemap";
+
+// Gigabytes by project, then by kind of file.
+const projects = [
+  { name: "Documentary “Fleuve”", children: [{ name: "Rushes", value: 412 }, { name: "Exports", value: 96 }, { name: "Audio", value: 38 }] },
+  { name: "Weekly vlog", children: [{ name: "Rushes", value: 188 }, { name: "Exports", value: 71 }, { name: "Thumbnails", value: 12 }] },
+  { name: "Course “Colour”", children: [{ name: "Lessons", value: 143 }, { name: "Exports", value: 52 }] },
+  { name: "Archive", value: 61 },
+];
+
+export default function Storage() {
+  return <Treemap title="Storage by project" data={projects} format={{ style: "unit", unit: "gigabyte" }} pathLabel="Project › kind" valueLabel="Size" />;
+}

package/registry/funnel.json

@@ -0,0 +1,486 @@
+{
+  "name": "funnel",
+  "package": "@krizaka/charts",
+  "type": "chart",
+  "title": "Funnel",
+  "summary": "Stages that lose people on the way, with the conversion from each stage to the next and from the first written beside it.",
+  "description": "Stages that lose people on the way, with the conversion from each stage to the next and from the first written beside it.",
+  "status": "beta",
+  "category": "charts",
+  "platforms": "web",
+  "engine": "echarts",
+  "whenToUse": [
+    "A sign-up or purchase journey: visit, sign-up, verification, first video, first sale."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "Flows that branch.",
+      "use": "sankey"
+    },
+    {
+      "when": "Stages that do not contain each other.",
+      "use": "bar-chart"
+    }
+  ],
+  "bestPractices": [
+    "Order the stages as the journey goes; each count includes the next.",
+    "Name the columns of the table in your language (`fromFirstLabel`, `fromPreviousLabel`)."
+  ],
+  "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 highlighted, its tooltip shown."
+      },
+      {
+        "keys": "Home / End",
+        "action": "Jump to the first or the last item."
+      },
+      {
+        "keys": "Esc",
+        "action": "Hides the tooltip and clears the highlight."
+      }
+    ],
+    "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.",
+      "The engine (ECharts core and this one chart type) loads when the chart nears the screen; a skeleton of the same height holds its place, so nothing shifts.",
+      "Under reduced motion the chart is drawn without animation.",
+      "The summary says each step's conversion and the overall one."
+    ]
+  },
+  "related": [
+    "sankey",
+    "bar-chart"
+  ],
+  "source": "packages/charts/src/meta/funnel.ts",
+  "install": {
+    "web": "npm install @krizaka/charts",
+    "native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
+  },
+  "web": {
+    "entry": "@krizaka/charts/funnel",
+    "import": "import { Funnel } from \"@krizaka/charts/funnel\";",
+    "props": [
+      {
+        "component": "Funnel",
+        "description": "",
+        "props": [
+          {
+            "name": "data",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "One row per stage, first stage first.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string | ((datum: T, index: number) => string)",
+            "default": null,
+            "description": "The field (or function) naming the stage.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
+            "required": true
+          },
+          {
+            "name": "value",
+            "type": "string | ((datum: T, index: number) => number)",
+            "default": null,
+            "description": "The field of how many reached it.",
+            "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": "className",
+            "type": "string",
+            "default": null,
+            "description": "A class on the figure (layout: margins, grid placement).",
+            "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 counts are written. Default `\"integer\"`.",
+            "required": false
+          },
+          {
+            "name": "fromFirstLabel",
+            "type": "string",
+            "default": null,
+            "description": "The header of the share of the first stage. Default “% first”.",
+            "required": false
+          },
+          {
+            "name": "fromPreviousLabel",
+            "type": "string",
+            "default": null,
+            "description": "The header of the share of the previous stage. Default “% previous”.",
+            "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": "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": "renderer",
+            "type": "Renderer",
+            "default": null,
+            "description": "`svg` (default): sharp, exportable as SVG. `canvas`: for tens of thousands of marks.",
+            "required": false
+          },
+          {
+            "name": "stageLabel",
+            "type": "string",
+            "default": null,
+            "description": "The headers of the data table: the stage, the count, the share of the first, of the previous.",
+            "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": "valueLabel",
+            "type": "string",
+            "default": null,
+            "description": "The header of the counts.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "signup",
+        "title": "Sign-up funnel",
+        "description": "Orochia's creator sign-up, from visit to first sale.",
+        "path": "examples/funnel/signup.tsx",
+        "module": "@krizaka/charts/registry/examples/funnel/signup",
+        "code": "import { Funnel } from \"@krizaka/charts/funnel\";\n\nconst stages = [\n  { stage: \"Visited the creator page\", people: 48_200 },\n  { stage: \"Created an account\", people: 9_640 },\n  { stage: \"Verified their identity\", people: 6_170 },\n  { stage: \"Published a first video\", people: 3_210 },\n  { stage: \"Made a first sale\", people: 1_180 },\n];\n\nexport default function Signup() {\n  return (\n    <Funnel\n      title=\"Creator sign-up, September\"\n      data={stages}\n      label=\"stage\"\n      value=\"people\"\n      stageLabel=\"Stage\"\n      valueLabel=\"Creators\"\n      fromFirstLabel=\"% of visits\"\n      fromPreviousLabel=\"% of previous\"\n    />\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/funnel/signup.tsx",
+    "content": "import { Funnel } from \"@krizaka/charts/funnel\";\n\nconst stages = [\n  { stage: \"Visited the creator page\", people: 48_200 },\n  { stage: \"Created an account\", people: 9_640 },\n  { stage: \"Verified their identity\", people: 6_170 },\n  { stage: \"Published a first video\", people: 3_210 },\n  { stage: \"Made a first sale\", people: 1_180 },\n];\n\nexport default function Signup() {\n  return (\n    <Funnel\n      title=\"Creator sign-up, September\"\n      data={stages}\n      label=\"stage\"\n      value=\"people\"\n      stageLabel=\"Stage\"\n      valueLabel=\"Creators\"\n      fromFirstLabel=\"% of visits\"\n      fromPreviousLabel=\"% of previous\"\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "Funnel",
+      "description": "",
+      "props": [
+        {
+          "name": "data",
+          "type": "readonly T[]",
+          "default": null,
+          "description": "One row per stage, first stage first.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string | ((datum: T, index: number) => string)",
+          "default": null,
+          "description": "The field (or function) naming the stage.",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
+          "required": true
+        },
+        {
+          "name": "value",
+          "type": "string | ((datum: T, index: number) => number)",
+          "default": null,
+          "description": "The field of how many reached it.",
+          "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": "className",
+          "type": "string",
+          "default": null,
+          "description": "A class on the figure (layout: margins, grid placement).",
+          "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 counts are written. Default `\"integer\"`.",
+          "required": false
+        },
+        {
+          "name": "fromFirstLabel",
+          "type": "string",
+          "default": null,
+          "description": "The header of the share of the first stage. Default “% first”.",
+          "required": false
+        },
+        {
+          "name": "fromPreviousLabel",
+          "type": "string",
+          "default": null,
+          "description": "The header of the share of the previous stage. Default “% previous”.",
+          "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": "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": "renderer",
+          "type": "Renderer",
+          "default": null,
+          "description": "`svg` (default): sharp, exportable as SVG. `canvas`: for tens of thousands of marks.",
+          "required": false
+        },
+        {
+          "name": "stageLabel",
+          "type": "string",
+          "default": null,
+          "description": "The headers of the data table: the stage, the count, the share of the first, of the previous.",
+          "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": "valueLabel",
+          "type": "string",
+          "default": null,
+          "description": "The header of the counts.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}