@krizaka/charts 0.4.0 → 0.6.0

package/dist/throughput.d.ts

@@ -1,9 +1,10 @@
 import { f as ThroughputLabels } from './labels-DE_743fQ.js';
 export { T as THROUGHPUT_LABELS } from './labels-DE_743fQ.js';
-import { j as Tone, g as Datum, A as Accessor, C as CategoryFormat } from './context-DNW7bJYw.js';
+import { c as Tone, D as Datum, A as Accessor, C as CategoryFormat } from './types-BL149CsX.js';
 import * as react from 'react';
-import { C as CartesianProps } from './cartesian-CEY_wwe_.js';
-import './frame-B1HDNm7c.js';
+import { C as CartesianProps } from './cartesian-XyEi00ub.js';
+import './frame-7tt0uRS5.js';
+import './context-CSEXYepn.js';
 
 /** A status of a job: the field holding its count per period, its name, its tone, and its part in the success rate. */
 interface JobStatus {

package/dist/ticker.d.ts

@@ -1,10 +1,11 @@
 import { g as TickerLabels } from './labels-DE_743fQ.js';
 export { e as TICKER_LABELS } from './labels-DE_743fQ.js';
 import * as react from 'react';
-import { C as CategoryFormat } from './context-DNW7bJYw.js';
+import { C as CategoryFormat } from './types-BL149CsX.js';
 import { LineChartProps } from './line.js';
-import './cartesian-CEY_wwe_.js';
-import './frame-B1HDNm7c.js';
+import './cartesian-XyEi00ub.js';
+import './frame-7tt0uRS5.js';
+import './context-CSEXYepn.js';
 
 /** A bid: when (an ISO date-time or a `Date`) and how much, in money minor units. */
 interface Bid {

package/dist/treemap.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
-import { V as ValueFormat } from './context-DNW7bJYw.js';
+import { V as ValueFormat } from './types-BL149CsX.js';
 import { E as EngineProps } from './host-_F8RgiIz.js';
-import { C as ChartFrameProps } from './frame-B1HDNm7c.js';
+import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
+import './context-CSEXYepn.js';
 
 /** A part: a name and either a value or children (whose values add up). */
 interface TreemapNode {

package/dist/types-BL149CsX.d.ts

@@ -0,0 +1,84 @@
+/** A row of data: any object; the chart reads the fields its `x`, `y` and `series` name. */
+type Datum = object;
+/** A field of a row (`"month"`) or a function that reads it. */
+type Accessor<T, V> = (keyof T & string) | ((datum: T, index: number) => V);
+/** A Krizaka brand: its palette leads with the brand's own hue (Krizaka blue, Orazaka orange, Orochia violet). */
+type BrandId = "krizaka" | "orazaka" | "orochia";
+/** A BCP 47 locale (`"en-US"`, `"fr-FR"`), always explicit: server and client write the same figures. */
+type Locale = string | readonly string[];
+/**
+ * How a value is written, through `@krizaka/intl`:
+ * - `"number"` (default) `12,345.6`, `"integer"` `12,346`, `"compact"` `12.3K`, `"percent"` (a ratio: `0.42` → `42%`);
+ * - `{ style: "money", currency }`: the values are **integer minor units** (cents), as the ledger stores them;
+ * - `{ style: "unit", unit }`: an `Intl` unit (`"second"`, `"megabyte"`);
+ * - a function, for anything else.
+ */
+type ValueFormat = "number" | "integer" | "compact" | "percent" | {
+    readonly style: "money";
+    readonly currency: string;
+    readonly compact?: boolean;
+} | {
+    readonly style: "unit";
+    readonly unit: string;
+    readonly compact?: boolean;
+} | {
+    readonly style: "number";
+    readonly options: Intl.NumberFormatOptions;
+} | ((value: number, locale: Locale) => string);
+/**
+ * How a category of the x axis is written. A category that is a `Date`, an epoch or an ISO date (`"2026-04"`,
+ * `"2026-04-12"`) is a date: `"month"` (`Apr 2026`), `"day"` (`Apr 12`), `"date"` (`Apr 12, 2026`), `"time"`
+ * (`14:30`), `"datetime"`, `"year"`. `"text"` writes it as is (the default for anything that is not a date).
+ */
+type CategoryFormat = "text" | "year" | "month" | "day" | "date" | "time" | "datetime" | ((category: unknown, locale: Locale) => string);
+/** A series to draw: the field holding its values and the words that name it. */
+interface SeriesSpec<T extends Datum = Datum> {
+    /** The field (or a function) holding the series' value in each row. */
+    readonly key: Accessor<T, number | null | undefined>;
+    /** Its name: in the legend, the tooltip, the data table and the summary. */
+    readonly label: string;
+    /** A colour role instead of the next palette slot: `"accent"`, a status (`"success"`…) or a `var(--…)`. */
+    readonly color?: SeriesColor;
+    /** Draw it dashed (a forecast, a previous period). Lines and areas only. */
+    readonly dashed?: boolean;
+}
+/** A status or brand role a series, a threshold or a marker may wear instead of a palette slot. */
+type Tone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+/** A palette slot (1–8), a tone, or any CSS colour (`var(--kz-…)` preferred). */
+type SeriesColor = Tone | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | (string & {});
+/** A horizontal line at a value: a goal, a payout threshold, a quota. */
+interface Threshold {
+    readonly value: number;
+    /** What it means, written beside the line and in the summary: “Payout threshold”. */
+    readonly label: string;
+    /** Default `"neutral"`; a goal reads well in `"success"`, a limit in `"danger"`. */
+    readonly tone?: Tone;
+}
+/** A vertical marker at a category: an event worth pointing at (“Campaign launch”). */
+interface Marker {
+    /** The category it marks, as in the data (`"2026-04"`). */
+    readonly x: unknown;
+    readonly label: string;
+    readonly tone?: Tone;
+}
+/** What a series says about itself, for the written summary. */
+interface SeriesSummary {
+    readonly label: string;
+    readonly count: number;
+    readonly min: {
+        readonly value: number;
+        readonly category: string;
+    } | null;
+    readonly max: {
+        readonly value: number;
+        readonly category: string;
+    } | null;
+    readonly first: number | null;
+    readonly last: number | null;
+    readonly total: number;
+    /** `last / first − 1`, or null when it cannot be said (no first value, a first value of 0). */
+    readonly change: number | null;
+    readonly trend: "up" | "down" | "flat" | "none";
+}
+
+export type { Accessor as A, BrandId as B, CategoryFormat as C, Datum as D, Locale as L, Marker as M, SeriesColor as S, Threshold as T, ValueFormat as V, SeriesSpec as a, SeriesSummary as b, Tone as c };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/charts",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Krizaka's data visualisation: typed, declarative React charts (line, area, bar, pie, radar, heatmap, calendar, sankey, funnel, gauge, sparkline, candlestick, treemap, scatter, geo map, 3D globe) on the --kz-* tokens and the brand palettes — an accessible data table, a written summary and keyboard navigation in every chart, SSR without layout shift, and React Native for the simple types.",
   "keywords": [
     "krizaka",
@@ -128,6 +128,10 @@
       "types": "./dist/chart.d.ts",
       "import": "./dist/chart.js"
     },
+    "./genui": {
+      "types": "./dist/genui.d.ts",
+      "import": "./dist/genui.js"
+    },
     "./native": {
       "types": "./dist/native.d.ts",
       "import": "./dist/native.js"
@@ -161,7 +165,7 @@
     "react-dom": ">=19",
     "react-native": ">=0.76",
     "react-native-svg": ">=15",
-    "@krizaka/ui": "^3.19.0"
+    "@krizaka/ui": "^3.22.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
@@ -214,8 +218,8 @@
     "vitest": "^4.1.11",
     "world-atlas": "^2.0.2",
     "@krizaka/config": "0.4.1",
-    "@krizaka/tokens": "3.19.0",
-    "@krizaka/ui": "3.19.0"
+    "@krizaka/tokens": "3.22.0",
+    "@krizaka/ui": "3.22.0"
   },
   "engines": {
     "node": ">=22"

package/registry/area-chart.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "svg",
   "tier": "core",
   "whenToUse": [

package/registry/bar-chart.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "svg",
   "tier": "core",
   "whenToUse": [

package/registry/calendar-heatmap.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "Advanced tier: no phone screen needs it yet.",
+      "issue": "krizaka/krizaka-ui#280"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "echarts",
   "tier": "advanced",
   "whenToUse": [

package/registry/candlestick.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "Advanced tier: no phone screen needs it yet.",
+      "issue": "krizaka/krizaka-ui#280"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "echarts",
   "tier": "advanced",
   "whenToUse": [

package/registry/chart-card.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "A phone dashboard frames its charts in a Card by hand today.",
+      "issue": "krizaka/krizaka-ui#275"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": null,
   "tier": "ready-made",
   "whenToUse": [

package/registry/chart.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "n/a",
+      "reason": "The ECharts escape hatch needs the DOM; a phone draws the SVG charts of the native entry.",
+      "use": "line-chart"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "echarts",
   "tier": "advanced",
   "whenToUse": [

package/registry/charts-provider.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": null,
   "tier": "core",
   "whenToUse": [

package/registry/credit-usage.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "svg",
   "tier": "ready-made",
   "whenToUse": [

package/registry/earnings-chart.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "svg",
   "tier": "ready-made",
   "whenToUse": [

package/registry/examples/genui-catalog/dashboard.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/genui-catalog/dashboard.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/genui-catalog/dashboard.tsx
+import { chartsGenUiCatalog } from "@krizaka/charts/genui";
+import { baseGenUiCatalog, GenUiStream } from "@krizaka/ui/genui";
+import { jsx } from "react/jsx-runtime";
+var catalog = { ...baseGenUiCatalog, ...chartsGenUiCatalog };
+var days = ["2026-10-11", "2026-10-12", "2026-10-13", "2026-10-14", "2026-10-15"].map((day, i) => ({ day, views: [40, 52, 47, 61, 75][i] }));
+var ANSWER = [
+  "Views grew all week; likes followed.",
+  "```a2ui",
+  '{"version":"v0.9","createSurface":{"surfaceId":"week","catalogId":"krizaka:genui/v1"}}',
+  '{"version":"v0.9","updateComponents":{"surfaceId":"week","components":[{"id":"root","component":"Column","children":["figures","trend"]},{"id":"figures","component":"Row","children":["views","likes"]},{"id":"views","component":"KpiStat","label":"Views","value":275,"previous":211,"format":"integer"},{"id":"likes","component":"KpiStat","label":"Likes","value":38,"previous":30,"format":"integer"},{"id":"trend","component":"ChartCard","title":"Views per day","kind":"area","x":"day","series":[{"key":"views","label":"Views"}],"data":{"path":"/days"}}]}}',
+  JSON.stringify({ version: "v0.9", updateDataModel: { surfaceId: "week", path: "/days", value: days } }),
+  "```"
+].join("\n");
+function GenUiDashboard() {
+  return /* @__PURE__ */ jsx(GenUiStream, { text: ANSWER, catalog });
+}
+export {
+  GenUiDashboard as default
+};

package/registry/examples/genui-catalog/dashboard.tsx

@@ -0,0 +1,18 @@
+import { chartsGenUiCatalog } from "@krizaka/charts/genui";
+import { baseGenUiCatalog, GenUiStream } from "@krizaka/ui/genui";
+
+const catalog = { ...baseGenUiCatalog, ...chartsGenUiCatalog };
+const days = ["2026-10-11", "2026-10-12", "2026-10-13", "2026-10-14", "2026-10-15"].map((day, i) => ({ day, views: [40, 52, 47, 61, 75][i] }));
+
+const ANSWER = [
+  "Views grew all week; likes followed.",
+  "```a2ui",
+  '{"version":"v0.9","createSurface":{"surfaceId":"week","catalogId":"krizaka:genui/v1"}}',
+  '{"version":"v0.9","updateComponents":{"surfaceId":"week","components":[{"id":"root","component":"Column","children":["figures","trend"]},{"id":"figures","component":"Row","children":["views","likes"]},{"id":"views","component":"KpiStat","label":"Views","value":275,"previous":211,"format":"integer"},{"id":"likes","component":"KpiStat","label":"Likes","value":38,"previous":30,"format":"integer"},{"id":"trend","component":"ChartCard","title":"Views per day","kind":"area","x":"day","series":[{"key":"views","label":"Views"}],"data":{"path":"/days"}}]}}',
+  JSON.stringify({ version: "v0.9", updateDataModel: { surfaceId: "week", path: "/days", value: days } }),
+  "```",
+].join("\n");
+
+export default function GenUiDashboard() {
+  return <GenUiStream text={ANSWER} catalog={catalog} />;
+}

package/registry/funnel.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "Advanced tier: no phone screen needs it yet.",
+      "issue": "krizaka/krizaka-ui#280"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "echarts",
   "tier": "advanced",
   "whenToUse": [

package/registry/gauge.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "svg",
   "tier": "core",
   "whenToUse": [

package/registry/genui-catalog.json

@@ -0,0 +1,91 @@
+{
+  "name": "genui-catalog",
+  "package": "@krizaka/charts",
+  "type": "chart",
+  "title": "Generated view catalog",
+  "summary": "KpiStat and ChartCard as entries of the data-driven UI catalog (A2UI v0.9): a model's answer draws figures and charts from data, never code.",
+  "description": "KpiStat and ChartCard as entries of the data-driven UI catalog (A2UI v0.9): a model's answer draws figures and charts from data, never code.",
+  "status": "beta",
+  "category": "charts",
+  "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "Slice 3 of the data-driven UI epic: the same messages drawn by the native charts.",
+      "issue": "krizaka/orazaka#207"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
+  "engine": null,
+  "tier": "advanced",
+  "whenToUse": [
+    "With `GenUiStream` of @krizaka/ui: merge `chartsGenUiCatalog` with `baseGenUiCatalog` so a model's answer can hold figures and charts.",
+    "When an assistant answers a question about data with a dashboard the reader can then refine."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "A dashboard the app knows in advance: use the charts directly.",
+      "use": "chart-card"
+    },
+    {
+      "when": "One figure in a page.",
+      "use": "kpi-stat"
+    }
+  ],
+  "bestPractices": [
+    "Tell the model the catalog and that every number must come from the data it was given: the entries check shapes, not truth.",
+    "Formats are a closed list (number, integer, compact, percent, money with a currency): no free-form format string reaches the chart."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "Each generated chart keeps its title as accessible name, its written summary and its data table, as any chart of the package."
+    ]
+  },
+  "related": [
+    "kpi-stat",
+    "chart-card",
+    "line-chart",
+    "bar-chart",
+    "pie-chart"
+  ],
+  "source": "packages/charts/src/meta/genui-catalog.ts",
+  "install": {
+    "web": "npm install @krizaka/charts",
+    "native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
+  },
+  "web": {
+    "entry": "@krizaka/charts/genui",
+    "import": "import { chartsGenUiCatalog } from \"@krizaka/charts/genui\";",
+    "props": [],
+    "examples": [
+      {
+        "name": "dashboard",
+        "title": "A generated dashboard",
+        "description": "Two figures and a chart from a model's answer, drawn with both catalogs.",
+        "path": "examples/genui-catalog/dashboard.tsx",
+        "module": "@krizaka/charts/registry/examples/genui-catalog/dashboard",
+        "code": "import { chartsGenUiCatalog } from \"@krizaka/charts/genui\";\nimport { baseGenUiCatalog, GenUiStream } from \"@krizaka/ui/genui\";\n\nconst catalog = { ...baseGenUiCatalog, ...chartsGenUiCatalog };\nconst days = [\"2026-10-11\", \"2026-10-12\", \"2026-10-13\", \"2026-10-14\", \"2026-10-15\"].map((day, i) => ({ day, views: [40, 52, 47, 61, 75][i] }));\n\nconst ANSWER = [\n  \"Views grew all week; likes followed.\",\n  \"```a2ui\",\n  '{\"version\":\"v0.9\",\"createSurface\":{\"surfaceId\":\"week\",\"catalogId\":\"krizaka:genui/v1\"}}',\n  '{\"version\":\"v0.9\",\"updateComponents\":{\"surfaceId\":\"week\",\"components\":[{\"id\":\"root\",\"component\":\"Column\",\"children\":[\"figures\",\"trend\"]},{\"id\":\"figures\",\"component\":\"Row\",\"children\":[\"views\",\"likes\"]},{\"id\":\"views\",\"component\":\"KpiStat\",\"label\":\"Views\",\"value\":275,\"previous\":211,\"format\":\"integer\"},{\"id\":\"likes\",\"component\":\"KpiStat\",\"label\":\"Likes\",\"value\":38,\"previous\":30,\"format\":\"integer\"},{\"id\":\"trend\",\"component\":\"ChartCard\",\"title\":\"Views per day\",\"kind\":\"area\",\"x\":\"day\",\"series\":[{\"key\":\"views\",\"label\":\"Views\"}],\"data\":{\"path\":\"/days\"}}]}}',\n  JSON.stringify({ version: \"v0.9\", updateDataModel: { surfaceId: \"week\", path: \"/days\", value: days } }),\n  \"```\",\n].join(\"\\n\");\n\nexport default function GenUiDashboard() {\n  return <GenUiStream text={ANSWER} catalog={catalog} />;\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/genui-catalog/dashboard.tsx",
+    "content": "import { chartsGenUiCatalog } from \"@krizaka/charts/genui\";\nimport { baseGenUiCatalog, GenUiStream } from \"@krizaka/ui/genui\";\n\nconst catalog = { ...baseGenUiCatalog, ...chartsGenUiCatalog };\nconst days = [\"2026-10-11\", \"2026-10-12\", \"2026-10-13\", \"2026-10-14\", \"2026-10-15\"].map((day, i) => ({ day, views: [40, 52, 47, 61, 75][i] }));\n\nconst ANSWER = [\n  \"Views grew all week; likes followed.\",\n  \"```a2ui\",\n  '{\"version\":\"v0.9\",\"createSurface\":{\"surfaceId\":\"week\",\"catalogId\":\"krizaka:genui/v1\"}}',\n  '{\"version\":\"v0.9\",\"updateComponents\":{\"surfaceId\":\"week\",\"components\":[{\"id\":\"root\",\"component\":\"Column\",\"children\":[\"figures\",\"trend\"]},{\"id\":\"figures\",\"component\":\"Row\",\"children\":[\"views\",\"likes\"]},{\"id\":\"views\",\"component\":\"KpiStat\",\"label\":\"Views\",\"value\":275,\"previous\":211,\"format\":\"integer\"},{\"id\":\"likes\",\"component\":\"KpiStat\",\"label\":\"Likes\",\"value\":38,\"previous\":30,\"format\":\"integer\"},{\"id\":\"trend\",\"component\":\"ChartCard\",\"title\":\"Views per day\",\"kind\":\"area\",\"x\":\"day\",\"series\":[{\"key\":\"views\",\"label\":\"Views\"}],\"data\":{\"path\":\"/days\"}}]}}',\n  JSON.stringify({ version: \"v0.9\", updateDataModel: { surfaceId: \"week\", path: \"/days\", value: days } }),\n  \"```\",\n].join(\"\\n\");\n\nexport default function GenUiDashboard() {\n  return <GenUiStream text={ANSWER} catalog={catalog} />;\n}\n"
+  },
+  "props": []
+}

package/registry/geo-map.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "n/a",
+      "reason": "A choropleth over the world; a phone shows the MapLibre map of @krizaka/ui/native/map or a ranked list.",
+      "use": "bar-chart"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "svg",
   "tier": "advanced",
   "whenToUse": [

package/registry/globe.json

@@ -8,6 +8,20 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "n/a",
+      "reason": "A WebGL globe for a site's hero; a phone shows a map or a list.",
+      "use": "bar-chart"
+    },
+    "desktop": {
+      "state": "n/a",
+      "reason": "A public site's page, not a window of the Mac app."
+    }
+  },
   "engine": "svg",
   "tier": "advanced",
   "whenToUse": [

package/registry/goal-progress.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "svg",
   "tier": "ready-made",
   "whenToUse": [

package/registry/heatmap.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "Advanced tier: no phone screen needs it yet.",
+      "issue": "krizaka/krizaka-ui#280"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "echarts",
   "tier": "advanced",
   "whenToUse": [