@krizaka/charts 0.0.0-stage → 0.2.0

package/registry/examples/price-ticker/no-bid-yet.tsx

@@ -0,0 +1,6 @@
+import { PriceTicker } from "@krizaka/charts/ticker";
+
+// The auction has just opened: the opening price, the reserve ahead.
+export default function NoBidYet() {
+  return <PriceTicker title="Studio session, one hour" bids={[]} opening={40_00} openedAt="2026-10-11T18:00:00Z" currency="USD" reserve={90_00} height={180} />;
+}

package/registry/examples/radar-chart/model-comparison.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/radar-chart/model-comparison.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/radar-chart/model-comparison.tsx
+import { RadarChart } from "@krizaka/charts/radar";
+import { jsx } from "react/jsx-runtime";
+var scores = [
+  { measure: "Quality", large: 92, small: 78 },
+  { measure: "Speed", large: 64, small: 91 },
+  { measure: "Cost efficiency", large: 55, small: 88 },
+  { measure: "French", large: 95, small: 84 },
+  { measure: "Tool use", large: 89, small: 70 }
+];
+function ModelComparison() {
+  return /* @__PURE__ */ jsx(
+    RadarChart,
+    {
+      title: "Two chat models compared",
+      description: "Orazaka evaluation set, October 2026 \xB7 out of 100",
+      data: scores,
+      x: "measure",
+      xLabel: "Measure",
+      series: [
+        { key: "large", label: "Mistral Large" },
+        { key: "small", label: "Mistral Small" }
+      ],
+      max: 100,
+      format: "integer"
+    }
+  );
+}
+export {
+  ModelComparison as default
+};

package/registry/examples/radar-chart/model-comparison.tsx

@@ -0,0 +1,28 @@
+import { RadarChart } from "@krizaka/charts/radar";
+
+// Scores out of 100, higher is better on every axis.
+const scores = [
+  { measure: "Quality", large: 92, small: 78 },
+  { measure: "Speed", large: 64, small: 91 },
+  { measure: "Cost efficiency", large: 55, small: 88 },
+  { measure: "French", large: 95, small: 84 },
+  { measure: "Tool use", large: 89, small: 70 },
+];
+
+export default function ModelComparison() {
+  return (
+    <RadarChart
+      title="Two chat models compared"
+      description="Orazaka evaluation set, October 2026 · out of 100"
+      data={scores}
+      x="measure"
+      xLabel="Measure"
+      series={[
+        { key: "large", label: "Mistral Large" },
+        { key: "small", label: "Mistral Small" },
+      ]}
+      max={100}
+      format="integer"
+    />
+  );
+}

package/registry/examples/sankey/credit-flow.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/sankey/credit-flow.js

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/sankey/credit-flow.tsx
+import { Sankey } from "@krizaka/charts/sankey";
+import { jsx } from "react/jsx-runtime";
+var flows = [
+  { from: "Pro plans", to: "Chat", credits: 182 },
+  { from: "Pro plans", to: "Image", credits: 64 },
+  { from: "Studio plans", to: "Video", credits: 121 },
+  { from: "Studio plans", to: "Image", credits: 48 },
+  { from: "Studio plans", to: "Chat", credits: 37 },
+  { from: "Chat", to: "Delivered", credits: 211 },
+  { from: "Chat", to: "Refunded", credits: 8 },
+  { from: "Image", to: "Delivered", credits: 104 },
+  { from: "Image", to: "Refunded", credits: 8 },
+  { from: "Video", to: "Delivered", credits: 109 },
+  { from: "Video", to: "Refunded", credits: 12 }
+];
+function CreditFlow() {
+  return /* @__PURE__ */ jsx(
+    Sankey,
+    {
+      title: "Where the credits went (k)",
+      data: flows,
+      source: "from",
+      target: "to",
+      value: "credits",
+      format: "integer",
+      sourceLabel: "From",
+      targetLabel: "To",
+      valueLabel: "Credits (k)"
+    }
+  );
+}
+export {
+  CreditFlow as default
+};

package/registry/examples/sankey/credit-flow.tsx

@@ -0,0 +1,32 @@
+import { Sankey } from "@krizaka/charts/sankey";
+
+// Thousands of credits in September.
+const flows = [
+  { from: "Pro plans", to: "Chat", credits: 182 },
+  { from: "Pro plans", to: "Image", credits: 64 },
+  { from: "Studio plans", to: "Video", credits: 121 },
+  { from: "Studio plans", to: "Image", credits: 48 },
+  { from: "Studio plans", to: "Chat", credits: 37 },
+  { from: "Chat", to: "Delivered", credits: 211 },
+  { from: "Chat", to: "Refunded", credits: 8 },
+  { from: "Image", to: "Delivered", credits: 104 },
+  { from: "Image", to: "Refunded", credits: 8 },
+  { from: "Video", to: "Delivered", credits: 109 },
+  { from: "Video", to: "Refunded", credits: 12 },
+];
+
+export default function CreditFlow() {
+  return (
+    <Sankey
+      title="Where the credits went (k)"
+      data={flows}
+      source="from"
+      target="to"
+      value="credits"
+      format="integer"
+      sourceLabel="From"
+      targetLabel="To"
+      valueLabel="Credits (k)"
+    />
+  );
+}

package/registry/examples/scatter-chart/watch-time.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/scatter-chart/watch-time.js

@@ -0,0 +1,36 @@
+"use client";
+
+// registry/examples/scatter-chart/watch-time.tsx
+import { ScatterChart } from "@krizaka/charts/scatter";
+import { jsx } from "react/jsx-runtime";
+var formats = ["Short", "Tutorial", "Documentary"];
+var videos = Array.from({ length: 36 }, (_, i) => {
+  const format = formats[i % 3];
+  const minutes = format === "Short" ? 1 + i % 4 : format === "Tutorial" ? 8 + i * 7 % 18 : 22 + i * 5 % 30;
+  const watched = minutes * (format === "Documentary" ? 0.62 : format === "Tutorial" ? 0.48 : 0.81) + i * 13 % 5 - 2;
+  return { title: `Video ${i + 1}`, format, minutes, watched: Math.max(0.5, watched), views: 800 + i * 977 % 9e3 };
+});
+function WatchTime() {
+  return /* @__PURE__ */ jsx(
+    ScatterChart,
+    {
+      title: "Length and watch time",
+      description: "Last 36 videos \xB7 bubble area = views",
+      data: videos,
+      x: "minutes",
+      y: "watched",
+      size: "views",
+      group: "format",
+      name: "title",
+      xLabel: "Length (min)",
+      yLabel: "Average watch (min)",
+      sizeLabel: "Views",
+      xFormat: "integer",
+      yFormat: { style: "number", options: { maximumFractionDigits: 1 } },
+      sizeFormat: "compact"
+    }
+  );
+}
+export {
+  WatchTime as default
+};

package/registry/examples/scatter-chart/watch-time.tsx

@@ -0,0 +1,31 @@
+import { ScatterChart } from "@krizaka/charts/scatter";
+
+const formats = ["Short", "Tutorial", "Documentary"] as const;
+// 36 deterministic videos: longer videos are watched longer, documentaries most.
+const videos = Array.from({ length: 36 }, (_, i) => {
+  const format = formats[i % 3]!;
+  const minutes = format === "Short" ? 1 + (i % 4) : format === "Tutorial" ? 8 + ((i * 7) % 18) : 22 + ((i * 5) % 30);
+  const watched = minutes * (format === "Documentary" ? 0.62 : format === "Tutorial" ? 0.48 : 0.81) + ((i * 13) % 5) - 2;
+  return { title: `Video ${i + 1}`, format, minutes, watched: Math.max(0.5, watched), views: 800 + ((i * 977) % 9_000) };
+});
+
+export default function WatchTime() {
+  return (
+    <ScatterChart
+      title="Length and watch time"
+      description="Last 36 videos · bubble area = views"
+      data={videos}
+      x="minutes"
+      y="watched"
+      size="views"
+      group="format"
+      name="title"
+      xLabel="Length (min)"
+      yLabel="Average watch (min)"
+      sizeLabel="Views"
+      xFormat="integer"
+      yFormat={{ style: "number", options: { maximumFractionDigits: 1 } }}
+      sizeFormat="compact"
+    />
+  );
+}

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

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/sparkline/bars.tsx
+import { Sparkline } from "@krizaka/charts/sparkline";
+import { jsx } from "react/jsx-runtime";
+var jobsPerHour = [12, 8, 5, 3, 2, 4, 9, 21, 38, 52, 61, 58, 64, 70, 66, 59, 63, 55, 47, 41, 33, 26, 19, 14];
+function Bars() {
+  return /* @__PURE__ */ jsx(Sparkline, { title: "Jobs per hour, today", data: jobsPerHour, variant: "bar", width: 180, height: 36, format: "integer", color: 2 });
+}
+export {
+  Bars as default
+};

package/registry/examples/sparkline/bars.tsx

@@ -0,0 +1,7 @@
+import { Sparkline } from "@krizaka/charts/sparkline";
+
+const jobsPerHour = [12, 8, 5, 3, 2, 4, 9, 21, 38, 52, 61, 58, 64, 70, 66, 59, 63, 55, 47, 41, 33, 26, 19, 14];
+
+export default function Bars() {
+  return <Sparkline title="Jobs per hour, today" data={jobsPerHour} variant="bar" width={180} height={36} format="integer" color={2} />;
+}

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" />;
+}