@krizaka/charts 0.0.0-stage → 0.1.0

package/dist/chunk-XAJ3KCC4.js

@@ -0,0 +1,116 @@
+"use client";
+import {
+  EChartHost,
+  baseOption,
+  tooltipHtml
+} from "./chunk-I5QUZVU2.js";
+import {
+  read
+} from "./chunk-W5FX4TU3.js";
+import {
+  shareFormatter,
+  valueFormatter
+} from "./chunk-XLLYNNC6.js";
+import {
+  useSettings
+} from "./chunk-DWJPPEMC.js";
+import {
+  capitalize,
+  fill
+} from "./chunk-3CJHBJXA.js";
+
+// src/funnel/funnel.tsx
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var engine = () => import("./funnel-QU5ZPC52.js");
+function Funnel(props) {
+  const { data, label, value, format = "integer", stageLabel, valueLabel, fromFirstLabel = "% first", fromPreviousLabel = "% previous" } = props;
+  const { locale, labels } = useSettings(props);
+  const fmt = useMemo(() => ({ value: valueFormatter(format, locale, labels.noValue), share: shareFormatter(locale) }), [format, locale, labels.noValue]);
+  const stages = useMemo(() => data.map((d, i) => ({ label: String(read(label, d, i)), value: Math.max(0, Number(read(value, d, i)) || 0) })), [data, label, value]);
+  const isEmpty = stages.length === 0 || stages.every((s) => s.value === 0);
+  const first = stages[0]?.value ?? 0;
+  const rate = useCallback((i) => i === 0 || !stages[i - 1].value ? 1 : stages[i].value / stages[i - 1].value, [stages]);
+  const overall = first && stages.length ? stages[stages.length - 1].value / first : 0;
+  const summary = isEmpty ? labels.empty : [
+    fill(labels.summaryIntro, { kind: labels.kinds.funnel, count: stages.length }),
+    `${stages.slice(1).map((s, k) => fill(labels.summaryConversion, { from: stages[k].label, to: s.label, rate: fmt.share(rate(k + 1)) })).join(", ")}.`,
+    `${capitalize(fill(labels.summaryOverall, { rate: fmt.share(overall) }))}.`
+  ].join(" ");
+  const items = stages.map((s, i) => ({ seriesIndex: 0, dataIndex: i, text: `${s.label}: ${fmt.value(s.value)}${i ? ` (${fmt.share(rate(i))})` : ""}` }));
+  const build = useCallback(
+    (theme, size) => {
+      const base = baseOption(theme, true);
+      const steps = [...theme.ramp].reverse();
+      const labelRoom = Math.min(220, Math.max(120, size.width * 0.38));
+      return {
+        ...base,
+        tooltip: {
+          ...base.tooltip,
+          trigger: "item",
+          formatter: (p) => {
+            const i = p.dataIndex;
+            const s = stages[i];
+            return tooltipHtml(
+              s.label,
+              [
+                { label: valueLabel ?? labels.value, value: fmt.value(s.value) },
+                ...i ? [{ label: fromPreviousLabel, value: fmt.share(rate(i)) }] : [],
+                { label: fromFirstLabel, value: fmt.share(first ? s.value / first : 0) }
+              ]
+            );
+          }
+        },
+        series: [
+          {
+            type: "funnel",
+            sort: "none",
+            left: 8,
+            right: labelRoom,
+            top: 8,
+            bottom: 8,
+            minSize: "8%",
+            gap: 2,
+            data: stages.map((s, i) => ({ name: s.label, value: s.value, itemStyle: { color: steps[Math.round(i / Math.max(1, stages.length - 1) * (steps.length - 2))], borderWidth: 0 } })),
+            label: {
+              position: "right",
+              color: theme.text,
+              fontFamily: theme.font,
+              fontSize: 12,
+              formatter: (p) => {
+                const i = p.dataIndex;
+                return `{name|${stages[i].label}}  {value|${fmt.value(stages[i].value)}}${i ? `  {rate|${fmt.share(rate(i))}}` : ""}`;
+              },
+              rich: { name: { color: theme.text2, fontSize: 12 }, value: { color: theme.text, fontWeight: 600, fontSize: 12 }, rate: { color: theme.text3, fontSize: 11 } }
+            },
+            labelLine: { lineStyle: { color: theme.axis } },
+            emphasis: { itemStyle: { borderColor: theme.text, borderWidth: 2 } }
+          }
+        ]
+      };
+    },
+    [stages, fmt, first, valueLabel, fromFirstLabel, fromPreviousLabel, labels.value, rate]
+  );
+  return /* @__PURE__ */ jsx(
+    EChartHost,
+    {
+      kind: "funnel",
+      frame: props,
+      defaultHeight: 280,
+      table: {
+        columns: [stageLabel ?? labels.category, valueLabel ?? labels.value, fromFirstLabel, fromPreviousLabel],
+        rows: stages.map((s, i) => [s.label, fmt.value(s.value), fmt.share(first ? s.value / first : 0), i ? fmt.share(rate(i)) : labels.noValue])
+      },
+      summary,
+      isEmpty,
+      engine,
+      build,
+      items
+    }
+  );
+}
+
+export {
+  Funnel
+};
+//# sourceMappingURL=chunk-XAJ3KCC4.js.map

package/dist/chunk-XAJ3KCC4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/funnel/funnel.tsx"],"sourcesContent":["\"use client\";\n// Stages that lose people on the way — sign-up, verification, first video, first sale — with what the industry's\n// funnels leave out: the conversion from each stage to the next and from the first, written beside each stage, in the\n// summary and in the table. Ordinal steps of the brand hue (full → light), labels outside the shapes in the text\n// colours. ECharts, loaded when the chart nears the screen.\nimport { useCallback, useMemo } from \"react\";\n\nimport { read } from \"../core/data\";\nimport { shareFormatter, valueFormatter } from \"../core/format\";\nimport { capitalize, fill } from \"../core/labels\";\nimport type { Accessor, Datum, ValueFormat } from \"../core/types\";\nimport { EChartHost, type EngineProps, type WalkItem } from \"../echarts/host\";\nimport { baseOption, type ResolvedTheme, tooltipHtml } from \"../echarts/theme\";\nimport type { ChartFrameProps } from \"../web/frame\";\nimport { useSettings } from \"../web/frame\";\n\nconst engine = () => import(\"../echarts/engines/funnel\");\n\nexport interface FunnelProps<T extends Datum> extends ChartFrameProps, EngineProps {\n  /** One row per stage, first stage first. */\n  data: readonly T[];\n  /** The field (or function) naming the stage. */\n  label: Accessor<T, string>;\n  /** The field of how many reached it. */\n  value: Accessor<T, number>;\n  /** How the counts are written. Default `\"integer\"`. */\n  format?: ValueFormat;\n  /** The headers of the data table: the stage, the count, the share of the first, of the previous. */\n  stageLabel?: string;\n/** The header of the counts. */\n  valueLabel?: string;\n/** The header of the share of the first stage. Default “% first”. */\n  fromFirstLabel?: string;\n/** The header of the share of the previous stage. Default “% previous”. */\n  fromPreviousLabel?: string;\n}\n\nexport function Funnel<T extends Datum>(props: FunnelProps<T>) {\n  const { data, label, value, format = \"integer\", stageLabel, valueLabel, fromFirstLabel = \"% first\", fromPreviousLabel = \"% previous\" } = props;\n  const { locale, labels } = useSettings(props);\n  const fmt = useMemo(() => ({ value: valueFormatter(format, locale, labels.noValue), share: shareFormatter(locale) }), [format, locale, labels.noValue]);\n  const stages = useMemo(() => data.map((d, i) => ({ label: String(read(label, d, i)), value: Math.max(0, Number(read(value, d, i)) || 0) })), [data, label, value]);\n  const isEmpty = stages.length === 0 || stages.every((s) => s.value === 0);\n  const first = stages[0]?.value ?? 0;\n  const rate = useCallback((i: number) => (i === 0 || !stages[i - 1]!.value ? 1 : stages[i]!.value / stages[i - 1]!.value), [stages]);\n  const overall = first && stages.length ? stages[stages.length - 1]!.value / first : 0;\n  const summary = isEmpty\n    ? labels.empty\n    : [\n        fill(labels.summaryIntro, { kind: labels.kinds.funnel, count: stages.length }),\n        `${stages\n          .slice(1)\n          .map((s, k) => fill(labels.summaryConversion, { from: stages[k]!.label, to: s.label, rate: fmt.share(rate(k + 1)) }))\n          .join(\", \")}.`,\n        `${capitalize(fill(labels.summaryOverall, { rate: fmt.share(overall) }))}.`,\n      ].join(\" \");\n  const items: WalkItem[] = stages.map((s, i) => ({ seriesIndex: 0, dataIndex: i, text: `${s.label}: ${fmt.value(s.value)}${i ? ` (${fmt.share(rate(i))})` : \"\"}` }));\n\n  const build = useCallback(\n    (theme: ResolvedTheme, size: { width: number }) => {\n      const base = baseOption(theme, true);\n      const steps = [...theme.ramp].reverse();\n      const labelRoom = Math.min(220, Math.max(120, size.width * 0.38));\n      return {\n        ...base,\n        tooltip: {\n          ...(base.tooltip as object),\n          trigger: \"item\",\n          formatter: (p: { dataIndex: number }) => {\n            const i = p.dataIndex;\n            const s = stages[i]!;\n            return tooltipHtml(\n              s.label,\n              [\n                { label: valueLabel ?? labels.value, value: fmt.value(s.value) },\n                ...(i ? [{ label: fromPreviousLabel, value: fmt.share(rate(i)) }] : []),\n                { label: fromFirstLabel, value: fmt.share(first ? s.value / first : 0) },\n              ],\n            );\n          },\n        },\n        series: [\n          {\n            type: \"funnel\",\n            sort: \"none\",\n            left: 8,\n            right: labelRoom,\n            top: 8,\n            bottom: 8,\n            minSize: \"8%\",\n            gap: 2,\n            data: stages.map((s, i) => ({ name: s.label, value: s.value, itemStyle: { color: steps[Math.round((i / Math.max(1, stages.length - 1)) * (steps.length - 2))], borderWidth: 0 } })),\n            label: {\n              position: \"right\",\n              color: theme.text,\n              fontFamily: theme.font,\n              fontSize: 12,\n              formatter: (p: { dataIndex: number }) => {\n                const i = p.dataIndex;\n                return `{name|${stages[i]!.label}}  {value|${fmt.value(stages[i]!.value)}}${i ? `  {rate|${fmt.share(rate(i))}}` : \"\"}`;\n              },\n              rich: { name: { color: theme.text2, fontSize: 12 }, value: { color: theme.text, fontWeight: 600, fontSize: 12 }, rate: { color: theme.text3, fontSize: 11 } },\n            },\n            labelLine: { lineStyle: { color: theme.axis } },\n            emphasis: { itemStyle: { borderColor: theme.text, borderWidth: 2 } },\n          },\n        ],\n      };\n    },\n    [stages, fmt, first, valueLabel, fromFirstLabel, fromPreviousLabel, labels.value, rate],\n  );\n\n  return (\n    <EChartHost\n      kind=\"funnel\"\n      frame={props}\n      defaultHeight={280}\n      table={{\n        columns: [stageLabel ?? labels.category, valueLabel ?? labels.value, fromFirstLabel, fromPreviousLabel],\n        rows: stages.map((s, i) => [s.label, fmt.value(s.value), fmt.share(first ? s.value / first : 0), i ? fmt.share(rate(i)) : labels.noValue]),\n      }}\n      summary={summary}\n      isEmpty={isEmpty}\n      engine={engine}\n      build={build}\n      items={items}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-XC6BQ3RN.js

@@ -0,0 +1,92 @@
+"use client";
+import {
+  EChartHost,
+  baseOption,
+  tooltipHtml
+} from "./chunk-I5QUZVU2.js";
+import {
+  read
+} from "./chunk-W5FX4TU3.js";
+import {
+  shareFormatter,
+  valueFormatter
+} from "./chunk-XLLYNNC6.js";
+import {
+  useSettings
+} from "./chunk-DWJPPEMC.js";
+import {
+  capitalize,
+  fill
+} from "./chunk-3CJHBJXA.js";
+
+// src/sankey/sankey.tsx
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var engine = () => import("./sankey-XQTX2EG6.js");
+function Sankey(props) {
+  const { data, source, target, value, format, vertical, sourceLabel, targetLabel, valueLabel } = props;
+  const { locale, labels } = useSettings(props);
+  const fmt = useMemo(() => ({ value: valueFormatter(format, locale, labels.noValue), share: shareFormatter(locale) }), [format, locale, labels.noValue]);
+  const model = useMemo(() => {
+    const links = data.map((d, i) => ({ source: String(read(source, d, i)), target: String(read(target, d, i)), value: Number(read(value, d, i)) })).filter((l) => Number.isFinite(l.value) && l.value > 0);
+    const nodes = [...new Set(links.flatMap((l) => [l.source, l.target]))];
+    return { links, nodes };
+  }, [data, source, target, value]);
+  const isEmpty = model.links.length === 0;
+  const total = model.links.filter((l) => !model.links.some((o) => o.target === l.source)).reduce((sum, l) => sum + l.value, 0);
+  const top = [...model.links].sort((a, b) => b.value - a.value).slice(0, 3);
+  const summary = isEmpty ? labels.empty : `${fill(labels.summaryIntro, { kind: labels.kinds.sankey, count: `${model.nodes.length} \xB7 ${model.links.length}` })} ${top.map((l) => fill(labels.summaryShare, { label: `${l.source} \u2192 ${l.target}`, value: fmt.value(l.value), share: fmt.share(total ? l.value / total : 0) })).join(", ")}. ${capitalize(fill(labels.summaryTotal, { total: fmt.value(total) }))}.`;
+  const items = model.links.map((l, i) => ({ seriesIndex: 0, dataIndex: i, dataType: "edge", text: `${l.source} \u2192 ${l.target}: ${fmt.value(l.value)}` }));
+  const build = useCallback(
+    (theme) => {
+      const base = baseOption(theme, true);
+      const colorOf = (name) => theme.palette[model.nodes.indexOf(name) % 8];
+      return {
+        ...base,
+        tooltip: {
+          ...base.tooltip,
+          trigger: "item",
+          formatter: (p) => p.dataType === "edge" ? tooltipHtml(`${p.data.source} \u2192 ${p.data.target}`, [{ label: valueLabel ?? labels.value, value: fmt.value(p.data.value), color: colorOf(p.data.source) }]) : tooltipHtml(p.name, [{ label: valueLabel ?? labels.value, value: fmt.value(p.value), color: colorOf(p.name) }])
+        },
+        series: [
+          {
+            type: "sankey",
+            orient: vertical ? "vertical" : "horizontal",
+            left: 8,
+            right: vertical ? 8 : 120,
+            top: 8,
+            bottom: vertical ? 40 : 8,
+            nodeWidth: 12,
+            nodeGap: 10,
+            draggable: false,
+            emphasis: { focus: "adjacency" },
+            data: model.nodes.map((name) => ({ name, itemStyle: { color: colorOf(name), borderColor: theme.surface, borderWidth: 1 } })),
+            links: model.links.map((l) => ({ ...l, lineStyle: { color: colorOf(l.source), opacity: 0.28 } })),
+            label: { color: theme.text, fontSize: 11, fontFamily: theme.font },
+            lineStyle: { curveness: 0.5 }
+          }
+        ]
+      };
+    },
+    [model, fmt, vertical, valueLabel, labels.value]
+  );
+  return /* @__PURE__ */ jsx(
+    EChartHost,
+    {
+      kind: "sankey",
+      frame: props,
+      defaultHeight: 320,
+      table: { columns: [sourceLabel ?? labels.category, targetLabel ?? labels.value, valueLabel ?? labels.value], rows: model.links.map((l) => [l.source, l.target, fmt.value(l.value)]) },
+      summary,
+      isEmpty,
+      engine,
+      build,
+      items
+    }
+  );
+}
+
+export {
+  Sankey
+};
+//# sourceMappingURL=chunk-XC6BQ3RN.js.map

package/dist/chunk-XC6BQ3RN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sankey/sankey.tsx"],"sourcesContent":["\"use client\";\n// Flows between stages — credits from plans to models to outcomes, viewers from sources to purchases — on ECharts\n// (loaded when the chart nears the screen). Each node keeps its palette slot in order of appearance; links take\n// their source's colour, softened.\nimport { useCallback, useMemo } from \"react\";\n\nimport { read } from \"../core/data\";\nimport { shareFormatter, valueFormatter } from \"../core/format\";\nimport { capitalize, fill } from \"../core/labels\";\nimport type { Accessor, Datum, ValueFormat } from \"../core/types\";\nimport { EChartHost, type EngineProps, type WalkItem } from \"../echarts/host\";\nimport { baseOption, type ResolvedTheme, tooltipHtml } from \"../echarts/theme\";\nimport type { ChartFrameProps } from \"../web/frame\";\nimport { useSettings } from \"../web/frame\";\n\nconst engine = () => import(\"../echarts/engines/sankey\");\n\nexport interface SankeyProps<T extends Datum> extends ChartFrameProps, EngineProps {\n  /** One row per flow. */\n  data: readonly T[];\n  /** The fields (or functions) naming where the flow comes from and where it goes. */\n  source: Accessor<T, string>;\n/** The field (or function) naming where the flow goes. */\n  target: Accessor<T, string>;\n  /** The field of its amount. */\n  value: Accessor<T, number>;\n  /** How the amounts are written. */\n  format?: ValueFormat;\n  /** Lay the stages out top to bottom (narrow screens). Default: left to right. */\n  vertical?: boolean;\n  /** The headers of the data table. */\n  sourceLabel?: string;\n/** The header of the targets. */\n  targetLabel?: string;\n/** The header of the amounts. */\n  valueLabel?: string;\n}\n\nexport function Sankey<T extends Datum>(props: SankeyProps<T>) {\n  const { data, source, target, value, format, vertical, sourceLabel, targetLabel, valueLabel } = props;\n  const { locale, labels } = useSettings(props);\n  const fmt = useMemo(() => ({ value: valueFormatter(format, locale, labels.noValue), share: shareFormatter(locale) }), [format, locale, labels.noValue]);\n  const model = useMemo(() => {\n    const links = data.map((d, i) => ({ source: String(read(source, d, i)), target: String(read(target, d, i)), value: Number(read(value, d, i)) })).filter((l) => Number.isFinite(l.value) && l.value > 0);\n    const nodes = [...new Set(links.flatMap((l) => [l.source, l.target]))];\n    return { links, nodes };\n  }, [data, source, target, value]);\n  const isEmpty = model.links.length === 0;\n  const total = model.links.filter((l) => !model.links.some((o) => o.target === l.source)).reduce((sum, l) => sum + l.value, 0);\n  const top = [...model.links].sort((a, b) => b.value - a.value).slice(0, 3);\n  const summary = isEmpty\n    ? labels.empty\n    : `${fill(labels.summaryIntro, { kind: labels.kinds.sankey, count: `${model.nodes.length} · ${model.links.length}` })} ${top.map((l) => fill(labels.summaryShare, { label: `${l.source} → ${l.target}`, value: fmt.value(l.value), share: fmt.share(total ? l.value / total : 0) })).join(\", \")}. ${capitalize(fill(labels.summaryTotal, { total: fmt.value(total) }))}.`;\n  const items: WalkItem[] = model.links.map((l, i) => ({ seriesIndex: 0, dataIndex: i, dataType: \"edge\", text: `${l.source} → ${l.target}: ${fmt.value(l.value)}` }));\n\n  const build = useCallback(\n    (theme: ResolvedTheme) => {\n      const base = baseOption(theme, true);\n      const colorOf = (name: string) => theme.palette[model.nodes.indexOf(name) % 8]!;\n      return {\n        ...base,\n        tooltip: {\n          ...(base.tooltip as object),\n          trigger: \"item\",\n          formatter: (p: { dataType: string; data: { source?: string; target?: string; value?: number; name?: string }; value: number; name: string }) =>\n            p.dataType === \"edge\"\n              ? tooltipHtml(`${p.data.source} → ${p.data.target}`, [{ label: valueLabel ?? labels.value, value: fmt.value(p.data.value), color: colorOf(p.data.source!) }])\n              : tooltipHtml(p.name, [{ label: valueLabel ?? labels.value, value: fmt.value(p.value), color: colorOf(p.name) }]),\n        },\n        series: [\n          {\n            type: \"sankey\",\n            orient: vertical ? \"vertical\" : \"horizontal\",\n            left: 8,\n            right: vertical ? 8 : 120,\n            top: 8,\n            bottom: vertical ? 40 : 8,\n            nodeWidth: 12,\n            nodeGap: 10,\n            draggable: false,\n            emphasis: { focus: \"adjacency\" },\n            data: model.nodes.map((name) => ({ name, itemStyle: { color: colorOf(name), borderColor: theme.surface, borderWidth: 1 } })),\n            links: model.links.map((l) => ({ ...l, lineStyle: { color: colorOf(l.source), opacity: 0.28 } })),\n            label: { color: theme.text, fontSize: 11, fontFamily: theme.font },\n            lineStyle: { curveness: 0.5 },\n          },\n        ],\n      };\n    },\n    [model, fmt, vertical, valueLabel, labels.value],\n  );\n\n  return (\n    <EChartHost\n      kind=\"sankey\"\n      frame={props}\n      defaultHeight={320}\n      table={{ columns: [sourceLabel ?? labels.category, targetLabel ?? labels.value, valueLabel ?? labels.value], rows: model.links.map((l) => [l.source, l.target, fmt.value(l.value)]) }}\n      summary={summary}\n      isEmpty={isEmpty}\n      engine={engine}\n      build={build}\n      items={items}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-XLLYNNC6.js

@@ -0,0 +1,89 @@
+"use client";
+
+// src/core/format.ts
+import { currencyDigits, formatCompact, formatDate, formatMoney, formatNumber, formatPercent, getDateTimeFormat, getNumberFormat } from "@krizaka/intl";
+function valueFormatter(format = "number", locale, noValue = "\u2014", axis = false) {
+  const write = writerOf(format, locale, axis);
+  return (value) => value == null || Number.isNaN(value) ? noValue : write(value);
+}
+function writerOf(format, locale, axis) {
+  if (typeof format === "function") return (value) => format(value, locale);
+  if (format === "integer") return (value) => formatNumber(Math.round(value), { locale, maximumFractionDigits: 0 });
+  if (format === "compact") return (value) => formatCompact(value, { locale });
+  if (format === "percent") return (value) => formatPercent(value, { locale, maximumFractionDigits: axis ? 0 : 1 });
+  if (format === "number") {
+    return (value) => axis && Math.abs(value) >= 1e4 ? formatCompact(value, { locale }) : formatNumber(value, { locale, maximumFractionDigits: 2 });
+  }
+  if (format.style === "money") {
+    const { currency } = format;
+    const digits = currencyDigits(currency);
+    return (value) => {
+      const minor = Math.round(value);
+      if ((axis || format.compact) && Math.abs(minor) >= 1e6) {
+        const options2 = { style: "currency", currency, currencyDisplay: "narrowSymbol", notation: "compact", minimumFractionDigits: 0, maximumFractionDigits: 1 };
+        return getNumberFormat(locale, options2).format(minor / 10 ** digits);
+      }
+      if (axis && minor % 10 ** digits === 0) {
+        return getNumberFormat(locale, { style: "currency", currency, minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(minor / 10 ** digits);
+      }
+      return formatMoney(minor, { currency, locale });
+    };
+  }
+  if (format.style === "unit") {
+    const { unit } = format;
+    const compact = axis || format.compact;
+    const options2 = { style: "unit", unit, unitDisplay: "short", ...compact ? { notation: "compact" } : {}, maximumFractionDigits: compact ? 1 : 2 };
+    return (value) => getNumberFormat(locale, options2).format(value);
+  }
+  const { options } = format;
+  return (value) => formatNumber(value, { locale, ...options });
+}
+function asDate(value) {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  if (typeof value === "number" && value > 1e10) return new Date(value);
+  if (typeof value === "string" && /^\d{4}-\d{2}(-\d{2})?([T ][\d:.]+(Z|[+-]\d{2}:?\d{2})?)?$/.test(value)) {
+    const iso = value.length === 7 ? `${value}-01T00:00:00Z` : value.length === 10 ? `${value}T00:00:00Z` : value;
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  return null;
+}
+var DATE_OPTIONS = {
+  year: { year: "numeric", timeZone: "UTC" },
+  month: { month: "short", year: "numeric", timeZone: "UTC" },
+  day: { month: "short", day: "numeric", timeZone: "UTC" },
+  date: { dateStyle: "medium", timeZone: "UTC" },
+  time: { timeStyle: "short", timeZone: "UTC" },
+  datetime: { dateStyle: "medium", timeStyle: "short", timeZone: "UTC" }
+};
+function categoryFormatter(format, locale) {
+  if (typeof format === "function") return (category) => format(category, locale);
+  if (format === "text") return (category) => String(category ?? "");
+  return (category) => {
+    const date = asDate(category);
+    if (!date) return String(category ?? "");
+    const kind = format ?? guessPrecision(category);
+    if (kind === "date") return formatDate(date, { locale, style: "medium", timeZone: "UTC" });
+    return getDateTimeFormat(locale, DATE_OPTIONS[kind]).format(date);
+  };
+}
+function guessPrecision(category) {
+  if (typeof category === "string") {
+    if (category.length === 7) return "month";
+    if (category.length === 10) return "date";
+    return "datetime";
+  }
+  const date = asDate(category);
+  return date && date.getUTCHours() === 0 && date.getUTCMinutes() === 0 ? "date" : "datetime";
+}
+function shareFormatter(locale) {
+  return (ratio) => formatPercent(ratio, { locale, maximumFractionDigits: Math.abs(ratio) < 0.1 ? 1 : 0 });
+}
+
+export {
+  valueFormatter,
+  asDate,
+  categoryFormatter,
+  shareFormatter
+};
+//# sourceMappingURL=chunk-XLLYNNC6.js.map

package/dist/chunk-XLLYNNC6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/format.ts"],"sourcesContent":["// Values and categories written the same way in the axes, the tooltips, the data table and the summary, through\n// @krizaka/intl (one cached Intl formatter per locale and options).\nimport { currencyDigits, formatCompact, formatDate, formatMoney, formatNumber, formatPercent, getDateTimeFormat, getNumberFormat } from \"@krizaka/intl\";\n\nimport type { CategoryFormat, Locale, ValueFormat } from \"./types\";\n\nexport type ValueFormatter = (value: number | null | undefined) => string;\n\n/**\n * A formatter for `format`. `axis` asks for the short form of the axis ticks (money and units go compact past 10 000).\n * A missing value is written `noValue`.\n */\nexport function valueFormatter(format: ValueFormat = \"number\", locale: Locale, noValue = \"—\", axis = false): ValueFormatter {\n  const write = writerOf(format, locale, axis);\n  return (value) => (value == null || Number.isNaN(value) ? noValue : write(value));\n}\n\nfunction writerOf(format: ValueFormat, locale: Locale, axis: boolean): (value: number) => string {\n  if (typeof format === \"function\") return (value) => format(value, locale);\n  if (format === \"integer\") return (value) => formatNumber(Math.round(value), { locale, maximumFractionDigits: 0 });\n  if (format === \"compact\") return (value) => formatCompact(value, { locale });\n  if (format === \"percent\") return (value) => formatPercent(value, { locale, maximumFractionDigits: axis ? 0 : 1 });\n  if (format === \"number\") {\n    return (value) => (axis && Math.abs(value) >= 10_000 ? formatCompact(value, { locale }) : formatNumber(value, { locale, maximumFractionDigits: 2 }));\n  }\n  if (format.style === \"money\") {\n    const { currency } = format;\n    const digits = currencyDigits(currency);\n    return (value) => {\n      const minor = Math.round(value);\n      // Compact money on the axes (`€12K`): the amount in major units, Intl's compact currency notation.\n      if ((axis || format.compact) && Math.abs(minor) >= 1_000_000) {\n        const options = { style: \"currency\", currency, currencyDisplay: \"narrowSymbol\", notation: \"compact\", minimumFractionDigits: 0, maximumFractionDigits: 1 } as const;\n        return getNumberFormat(locale, options).format(minor / 10 ** digits);\n      }\n      // An axis tick is a round amount: no cents to write (`€2,500`, not `€2,500.00`).\n      if (axis && minor % 10 ** digits === 0) {\n        return getNumberFormat(locale, { style: \"currency\", currency, minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(minor / 10 ** digits);\n      }\n      return formatMoney(minor, { currency, locale });\n    };\n  }\n  if (format.style === \"unit\") {\n    const { unit } = format;\n    const compact = axis || format.compact;\n    const options: Intl.NumberFormatOptions = { style: \"unit\", unit, unitDisplay: \"short\", ...(compact ? { notation: \"compact\" } : {}), maximumFractionDigits: compact ? 1 : 2 };\n    return (value) => getNumberFormat(locale, options).format(value);\n  }\n  const { options } = format;\n  return (value) => formatNumber(value, { locale, ...options });\n}\n\n/** An ISO date (`2026-04`, `2026-04-12`, `2026-04-12T14:30Z`), a `Date` or an epoch → a `Date`; anything else → null. */\nexport function asDate(value: unknown): Date | null {\n  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;\n  if (typeof value === \"number\" && value > 10_000_000_000) return new Date(value);\n  if (typeof value === \"string\" && /^\\d{4}-\\d{2}(-\\d{2})?([T ][\\d:.]+(Z|[+-]\\d{2}:?\\d{2})?)?$/.test(value)) {\n    // `2026-04` is the first of April, at midnight UTC: a month never slips to March in a negative time zone.\n    const iso = value.length === 7 ? `${value}-01T00:00:00Z` : value.length === 10 ? `${value}T00:00:00Z` : value;\n    const date = new Date(iso);\n    return Number.isNaN(date.getTime()) ? null : date;\n  }\n  return null;\n}\n\nconst DATE_OPTIONS: Record<Exclude<CategoryFormat, \"text\" | ((category: unknown, locale: Locale) => string)>, Intl.DateTimeFormatOptions> = {\n  year: { year: \"numeric\", timeZone: \"UTC\" },\n  month: { month: \"short\", year: \"numeric\", timeZone: \"UTC\" },\n  day: { month: \"short\", day: \"numeric\", timeZone: \"UTC\" },\n  date: { dateStyle: \"medium\", timeZone: \"UTC\" },\n  time: { timeStyle: \"short\", timeZone: \"UTC\" },\n  datetime: { dateStyle: \"medium\", timeStyle: \"short\", timeZone: \"UTC\" },\n};\n\nexport type CategoryFormatter = (category: unknown) => string;\n\n/**\n * A formatter for the categories. Without a format, a date category is written by its precision (`2026-04` → a month,\n * `2026-04-12` → a day) and anything else as text. Dates are written in UTC, the zone of an ISO date without one:\n * pass a function for a local time.\n */\nexport function categoryFormatter(format: CategoryFormat | undefined, locale: Locale): CategoryFormatter {\n  if (typeof format === \"function\") return (category) => format(category, locale);\n  if (format === \"text\") return (category) => String(category ?? \"\");\n  return (category) => {\n    const date = asDate(category);\n    if (!date) return String(category ?? \"\");\n    const kind = format ?? guessPrecision(category);\n    if (kind === \"date\") return formatDate(date, { locale, style: \"medium\", timeZone: \"UTC\" });\n    return getDateTimeFormat(locale, DATE_OPTIONS[kind]).format(date);\n  };\n}\n\nfunction guessPrecision(category: unknown): \"month\" | \"date\" | \"datetime\" {\n  if (typeof category === \"string\") {\n    if (category.length === 7) return \"month\";\n    if (category.length === 10) return \"date\";\n    return \"datetime\";\n  }\n  const date = asDate(category);\n  return date && date.getUTCHours() === 0 && date.getUTCMinutes() === 0 ? \"date\" : \"datetime\";\n}\n\n/** A ratio for the summary and the shares: `0.236` → `24%` (one decimal under 10 %). */\nexport function shareFormatter(locale: Locale): (ratio: number) => string {\n  return (ratio) => formatPercent(ratio, { locale, maximumFractionDigits: Math.abs(ratio) < 0.1 ? 1 : 0 });\n}\n"],"mappings":"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","names":["options"]}

package/dist/chunk-XR4ZJDOV.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  Cartesian
+} from "./chunk-UNK4MJVG.js";
+
+// src/bar/bar-chart.tsx
+import { jsx } from "react/jsx-runtime";
+function BarChart({ stacked, horizontal, valueLabels = true, ...props }) {
+  return /* @__PURE__ */ jsx(Cartesian, { props, options: { kind: "bar", mode: "bar", stacked, horizontal, valueLabels } });
+}
+
+export {
+  BarChart
+};
+//# sourceMappingURL=chunk-XR4ZJDOV.js.map

package/dist/chunk-XR4ZJDOV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/bar/bar-chart.tsx"],"sourcesContent":["\"use client\";\nimport { Cartesian, type CartesianProps } from \"../cartesian/cartesian\";\nimport type { Datum } from \"../core/types\";\n\nexport interface BarChartProps<T extends Datum> extends CartesianProps<T> {\n  /** Stack the series in one bar per category (a total and its parts); default: grouped side by side. */\n  stacked?: boolean;\n  /** Bars grow to the right, the categories down the side: long labels, rankings. */\n  horizontal?: boolean;\n  /** Write each value at the tip of its bar (one series, up to 16 bars). Default true. */\n  valueLabels?: boolean;\n}\n\n/** Compare amounts across categories: grouped, stacked or horizontal bars, each value at its tip. */\nexport function BarChart<T extends Datum>({ stacked, horizontal, valueLabels = true, ...props }: BarChartProps<T>) {\n  return <Cartesian props={props} options={{ kind: \"bar\", mode: \"bar\", stacked, horizontal, valueLabels }} />;\n}\n"],"mappings":";;;;;;AAeS;AADF,SAAS,SAA0B,EAAE,SAAS,YAAY,cAAc,MAAM,GAAG,MAAM,GAAqB;AACjH,SAAO,oBAAC,aAAU,OAAc,SAAS,EAAE,MAAM,OAAO,MAAM,OAAO,SAAS,YAAY,YAAY,GAAG;AAC3G;","names":[]}

package/dist/context-BgYUymEO.d.ts

@@ -0,0 +1,163 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ChartLabels {
+    /** The button that shows the data table. */
+    showData: string;
+    /** The button that hides it. */
+    hideData: string;
+    /** The caption of the data table: `{title}`. */
+    tableCaption: string;
+    /** The export buttons. */
+    exportPng: string;
+    exportSvg: string;
+    exportCsv: string;
+    /** Announced while the data loads. */
+    loading: string;
+    /** Shown when there is nothing to draw. */
+    empty: string;
+    /** Shown when the data could not be loaded. */
+    error: string;
+    /** The keyboard hint, read once when the plot takes the focus. */
+    keyboardHint: string;
+    /** The role description of the plot (`chart`). */
+    roleDescription: string;
+    /** Summary pieces. `{kind}` is the chart's name (`Line chart`), `{count}` a number of points or series. */
+    summaryIntro: string;
+    summarySeries: string;
+    summaryRange: string;
+    summaryTrendUp: string;
+    summaryTrendDown: string;
+    summaryTrendFlat: string;
+    summaryTotal: string;
+    summaryThreshold: string;
+    summaryShare: string;
+    /** Scatter: the correlation of x and y (Pearson's r). */
+    summaryCorrelation: string;
+    /** Funnel: from one stage to the next, and from the first to the last. */
+    summaryConversion: string;
+    summaryOverall: string;
+    /** Heatmap, calendar: the largest cell and the number of cells with a value. */
+    summaryPeak: string;
+    summaryActive: string;
+    /** Candlestick: the period's range. */
+    summaryOhlc: string;
+    /** The names of the charts, read first in the summary. */
+    kinds: Record<ChartKind, string>;
+    /** The column of the values, when the chart has no value label. */
+    value: string;
+    /** The column of the categories in the data table, when the chart has no x label. */
+    category: string;
+    /** The total row of a stacked chart, a pie, a funnel. */
+    total: string;
+    /** What a missing value reads as. */
+    noValue: string;
+}
+type ChartKind = "line" | "area" | "bar" | "pie" | "donut" | "gauge" | "sparkline" | "radar" | "heatmap" | "calendar" | "sankey" | "funnel" | "candlestick" | "treemap" | "scatter" | "map" | "globe" | "chart";
+declare const DEFAULT_LABELS: ChartLabels;
+/** The words an app or a chart passes: any of them, and any of the chart names. */
+type ChartLabelsInput = Partial<Omit<ChartLabels, "kinds">> & {
+    kinds?: Partial<Record<ChartKind, string>>;
+};
+
+/** 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";
+}
+
+interface ChartsSettings {
+    /** The locale of every figure and date (`"fr-FR"`). Default `"en-US"`. */
+    locale?: Locale;
+    /**
+     * The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it
+     * when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
+     */
+    brand?: BrandId;
+    /** The words, translated: the buttons, the states, the written summary. */
+    labels?: ChartLabelsInput;
+}
+interface ChartsProviderProps extends ChartsSettings {
+    children: ReactNode;
+}
+/** Sets the locale, the brand and the words of every chart below it. */
+declare function ChartsProvider({ locale, brand, labels, children }: ChartsProviderProps): react.JSX.Element;
+
+export { type Accessor as A, type BrandId as B, type CategoryFormat as C, DEFAULT_LABELS as D, type Locale as L, type Marker as M, type SeriesColor as S, type Threshold as T, type ValueFormat as V, type ChartKind as a, type ChartLabels as b, type ChartLabelsInput as c, ChartsProvider as d, type ChartsProviderProps as e, type ChartsSettings as f, type Datum as g, type SeriesSpec as h, type SeriesSummary as i, type Tone as j };

package/dist/frame-I7_xYGy5.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode, CSSProperties } from 'react';
+import { f as ChartsSettings } from './context-BgYUymEO.js';
+
+type ExportFormat = "png" | "svg" | "csv";
+/** The props every web chart takes, on top of its data. */
+interface ChartFrameProps extends ChartsSettings {
+    /** What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`. */
+    title: string;
+    /** A sentence under the title: the period, the unit, the source. */
+    description?: ReactNode;
+    /** Visually hide the title (it stays the chart's accessible name): a card that already has its heading. */
+    hideTitle?: boolean;
+    /** The height of the plot in pixels. Default 280 (a sparkline: 32). */
+    height?: number;
+    /** The data is on its way: a skeleton of the chart, announced once. */
+    loading?: boolean;
+    /** The data could not be loaded: `true` says the default words, a node says yours (a retry button…). */
+    error?: boolean | ReactNode;
+    /** What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka/ui fits. */
+    empty?: ReactNode;
+    /** The written summary: read by screen readers only (`"hidden"`, default), or shown under the chart (`"visible"`). */
+    summary?: "hidden" | "visible";
+    /** Your own summary instead of the generated one (still read first by screen readers). */
+    summaryText?: string;
+    /** The "Show data" button (the table is in the page for screen readers either way). Default true. */
+    dataTable?: boolean;
+    /** Export buttons: `true` for PNG, SVG and CSV, or the formats you want. */
+    exportable?: boolean | readonly ExportFormat[];
+    /** Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point. */
+    live?: boolean;
+    /** The id of the figure. */
+    id?: string;
+    /** A class on the figure (layout: margins, grid placement). */
+    className?: string;
+    /** Inline style on the figure (layout only: colours come from the tokens). */
+    style?: CSSProperties;
+}
+interface TableModel {
+    /** The header of each column; the first one names the categories. */
+    readonly columns: readonly string[];
+    /** The rows, already written (formatted values). The first cell is the row's header. */
+    readonly rows: readonly (readonly string[])[];
+}
+
+export type { ChartFrameProps as C, TableModel as T };

package/dist/full-S2MBPEEP.js

@@ -0,0 +1,11 @@
+"use client";
+
+// src/echarts/engines/full.ts
+import * as echarts from "echarts";
+function install() {
+  return echarts;
+}
+export {
+  install
+};
+//# sourceMappingURL=full-S2MBPEEP.js.map

package/dist/full-S2MBPEEP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/echarts/engines/full.ts"],"sourcesContent":["// Every chart and component of ECharts: what `<Chart>` loads when it is not told which modules an option needs.\nimport * as echarts from \"echarts\";\n\n/** Nothing to register: the full build registers everything. Exported so the module is used, not only imported. */\nexport function install(): typeof echarts {\n  return echarts;\n}\n"],"mappings":";;;AACA,YAAY,aAAa;AAGlB,SAAS,UAA0B;AACxC,SAAO;AACT;","names":[]}

package/dist/funnel-QU5ZPC52.js

@@ -0,0 +1,13 @@
+"use client";
+
+// src/echarts/engines/funnel.ts
+import { FunnelChart } from "echarts/charts";
+import { TooltipComponent } from "echarts/components";
+import { use as register } from "echarts/core";
+function install() {
+  register([FunnelChart, TooltipComponent]);
+}
+export {
+  install
+};
+//# sourceMappingURL=funnel-QU5ZPC52.js.map

package/dist/funnel-QU5ZPC52.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/echarts/engines/funnel.ts"],"sourcesContent":["import { FunnelChart } from \"echarts/charts\";\nimport { TooltipComponent } from \"echarts/components\";\nimport { use as register } from \"echarts/core\";\n\n/**\n * Registers what this chart needs. A function, not a side effect of the import: the package is `sideEffects: false`,\n * and a bundler drops a module imported only for its side effects.\n */\nexport function install(): void {\n  register([FunnelChart, TooltipComponent]);\n}\n"],"mappings":";;;AAAA,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,OAAO,gBAAgB;AAMzB,SAAS,UAAgB;AAC9B,WAAS,CAAC,aAAa,gBAAgB,CAAC;AAC1C;","names":[]}