@krizaka/charts 0.0.0-stage → 0.2.0

package/registry/examples/gauge/native/credits-quota.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/gauge/native/credits-quota.tsx
+import { Gauge } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+function CreditsQuota() {
+  return /* @__PURE__ */ jsx(
+    Gauge,
+    {
+      title: "Credits used this month",
+      value: 41250,
+      max: 5e4,
+      format: "compact",
+      caption: "of 50K credits",
+      zones: [
+        { to: 4e4, tone: "success" },
+        { to: 47500, tone: "warning" },
+        { to: 5e4, tone: "danger" }
+      ]
+    }
+  );
+}
+export {
+  CreditsQuota as default
+};

package/registry/examples/gauge/native/credits-quota.tsx

@@ -0,0 +1,18 @@
+import { Gauge } from "@krizaka/charts/native";
+
+export default function CreditsQuota() {
+  return (
+    <Gauge
+      title="Credits used this month"
+      value={41_250}
+      max={50_000}
+      format="compact"
+      caption="of 50K credits"
+      zones={[
+        { to: 40_000, tone: "success" },
+        { to: 47_500, tone: "warning" },
+        { to: 50_000, tone: "danger" },
+      ]}
+    />
+  );
+}

package/registry/examples/geo-map/viewers.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/geo-map/viewers.js

@@ -0,0 +1,43 @@
+"use client";
+
+// registry/examples/geo-map/viewers.tsx
+import { GeoMap } from "@krizaka/charts/geo";
+import { jsx } from "react/jsx-runtime";
+var countries = [
+  { code: "FR", viewers: 48200 },
+  { code: "CA", viewers: 31500 },
+  { code: "BE", viewers: 9800 },
+  { code: "CH", viewers: 7400 },
+  { code: "MA", viewers: 12900 },
+  { code: "SN", viewers: 6100 },
+  { code: "US", viewers: 15300 },
+  { code: "DE", viewers: 4200 },
+  { code: "TN", viewers: 5600 },
+  { code: "CI", viewers: 4900 },
+  { code: "BR", viewers: 2300 },
+  { code: "JP", viewers: 1800 }
+];
+var cities = [
+  { label: "Paris", lon: 2.35, lat: 48.86, value: 21400 },
+  { label: "Montr\xE9al", lon: -73.57, lat: 45.5, value: 17800 },
+  { label: "Casablanca", lon: -7.59, lat: 33.57, value: 6300 },
+  { label: "Dakar", lon: -17.45, lat: 14.69, value: 3900 }
+];
+function Viewers() {
+  return /* @__PURE__ */ jsx(
+    GeoMap,
+    {
+      title: "Viewers by country, last 90 days",
+      data: countries,
+      region: "code",
+      value: "viewers",
+      points: cities,
+      format: "compact",
+      regionLabel: "Country",
+      valueLabel: "Viewers"
+    }
+  );
+}
+export {
+  Viewers as default
+};

package/registry/examples/geo-map/viewers.tsx

@@ -0,0 +1,29 @@
+import { GeoMap } from "@krizaka/charts/geo";
+
+const countries = [
+  { code: "FR", viewers: 48_200 }, { code: "CA", viewers: 31_500 }, { code: "BE", viewers: 9_800 },
+  { code: "CH", viewers: 7_400 }, { code: "MA", viewers: 12_900 }, { code: "SN", viewers: 6_100 },
+  { code: "US", viewers: 15_300 }, { code: "DE", viewers: 4_200 }, { code: "TN", viewers: 5_600 },
+  { code: "CI", viewers: 4_900 }, { code: "BR", viewers: 2_300 }, { code: "JP", viewers: 1_800 },
+];
+const cities = [
+  { label: "Paris", lon: 2.35, lat: 48.86, value: 21_400 },
+  { label: "Montréal", lon: -73.57, lat: 45.5, value: 17_800 },
+  { label: "Casablanca", lon: -7.59, lat: 33.57, value: 6_300 },
+  { label: "Dakar", lon: -17.45, lat: 14.69, value: 3_900 },
+];
+
+export default function Viewers() {
+  return (
+    <GeoMap
+      title="Viewers by country, last 90 days"
+      data={countries}
+      region="code"
+      value="viewers"
+      points={cities}
+      format="compact"
+      regionLabel="Country"
+      valueLabel="Viewers"
+    />
+  );
+}

package/registry/examples/globe/deployment-regions.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/globe/deployment-regions.js

@@ -0,0 +1,36 @@
+"use client";
+
+// registry/examples/globe/deployment-regions.tsx
+import { Globe3D } from "@krizaka/charts/globe";
+import { jsx } from "react/jsx-runtime";
+var regions = [
+  { label: "Paris \xB7 eu-west-3", lon: 2.35, lat: 48.86, value: 0.9998, tone: "success" },
+  { label: "Frankfurt \xB7 eu-central-1", lon: 8.68, lat: 50.11, value: 0.9995, tone: "success" },
+  { label: "Montr\xE9al \xB7 ca-central-1", lon: -73.57, lat: 45.5, value: 0.9991, tone: "success" },
+  { label: "Virginia \xB7 us-east-1", lon: -77.46, lat: 38.95, value: 0.9962, tone: "warning" },
+  { label: "Singapore \xB7 ap-southeast-1", lon: 103.82, lat: 1.35, value: 0.9997, tone: "success" }
+];
+function DeploymentRegions() {
+  return /* @__PURE__ */ jsx(
+    Globe3D,
+    {
+      title: "Orazaka regions",
+      description: "Availability over 30 days \xB7 replication from Paris",
+      points: regions,
+      arcs: [
+        { from: regions[0].label, to: regions[1].label },
+        { from: regions[0].label, to: regions[2].label },
+        { from: regions[2].label, to: regions[3].label },
+        { from: regions[1].label, to: regions[4].label }
+      ],
+      regions: ["FR", "DE", "BE", "CH", "CA", "US", "SG"],
+      center: [-20, 40],
+      format: { style: "number", options: { style: "percent", maximumFractionDigits: 2 } },
+      pointLabel: "Region",
+      valueLabel: "Availability"
+    }
+  );
+}
+export {
+  DeploymentRegions as default
+};

package/registry/examples/globe/deployment-regions.tsx

@@ -0,0 +1,30 @@
+import { Globe3D } from "@krizaka/charts/globe";
+
+const regions = [
+  { label: "Paris · eu-west-3", lon: 2.35, lat: 48.86, value: 0.9998, tone: "success" as const },
+  { label: "Frankfurt · eu-central-1", lon: 8.68, lat: 50.11, value: 0.9995, tone: "success" as const },
+  { label: "Montréal · ca-central-1", lon: -73.57, lat: 45.5, value: 0.9991, tone: "success" as const },
+  { label: "Virginia · us-east-1", lon: -77.46, lat: 38.95, value: 0.9962, tone: "warning" as const },
+  { label: "Singapore · ap-southeast-1", lon: 103.82, lat: 1.35, value: 0.9997, tone: "success" as const },
+];
+
+export default function DeploymentRegions() {
+  return (
+    <Globe3D
+      title="Orazaka regions"
+      description="Availability over 30 days · replication from Paris"
+      points={regions}
+      arcs={[
+        { from: regions[0]!.label, to: regions[1]!.label },
+        { from: regions[0]!.label, to: regions[2]!.label },
+        { from: regions[2]!.label, to: regions[3]!.label },
+        { from: regions[1]!.label, to: regions[4]!.label },
+      ]}
+      regions={["FR", "DE", "BE", "CH", "CA", "US", "SG"]}
+      center={[-20, 40]}
+      format={{ style: "number", options: { style: "percent", maximumFractionDigits: 2 } }}
+      pointLabel="Region"
+      valueLabel="Availability"
+    />
+  );
+}

package/registry/examples/goal-progress/challenge-pot.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/goal-progress/challenge-pot.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/goal-progress/challenge-pot.tsx
+import { GoalProgress } from "@krizaka/charts/goal";
+import { jsx } from "react/jsx-runtime";
+function ChallengePot() {
+  return /* @__PURE__ */ jsx(
+    GoalProgress,
+    {
+      title: "Backflip on the beach",
+      raised: 26200,
+      goal: 5e4,
+      currency: "USD",
+      supporters: 41,
+      timeLeft: "3 days",
+      height: 200
+    }
+  );
+}
+export {
+  ChallengePot as default
+};

package/registry/examples/goal-progress/challenge-pot.tsx

@@ -0,0 +1,16 @@
+import { GoalProgress } from "@krizaka/charts/goal";
+
+// An Orochia challenge: fans pledge towards a goal, held in escrow until it is met.
+export default function ChallengePot() {
+  return (
+    <GoalProgress
+      title="Backflip on the beach"
+      raised={262_00}
+      goal={500_00}
+      currency="USD"
+      supporters={41}
+      timeLeft="3 days"
+      height={200}
+    />
+  );
+}

package/registry/examples/goal-progress/goal-reached.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/goal-progress/goal-reached.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/goal-progress/goal-reached.tsx
+import { GoalProgress } from "@krizaka/charts/goal";
+import { jsx } from "react/jsx-runtime";
+function GoalReached() {
+  return /* @__PURE__ */ jsx(GoalProgress, { title: "Cover of the summer hit", raised: 118e3, goal: 1e5, currency: "EUR", supporters: 128, height: 200, locale: "fr-FR", labels: { raised: "collect\xE9s sur {goal}", reached: "Objectif atteint", supporters: "{count} soutiens" } });
+}
+export {
+  GoalReached as default
+};

package/registry/examples/goal-progress/goal-reached.tsx

@@ -0,0 +1,6 @@
+import { GoalProgress } from "@krizaka/charts/goal";
+
+// Past the goal: the arc stays full, the amount keeps counting, “Goal reached” is written.
+export default function GoalReached() {
+  return <GoalProgress title="Cover of the summer hit" raised={1_180_00} goal={1_000_00} currency="EUR" supporters={128} height={200} locale="fr-FR" labels={{ raised: "collectés sur {goal}", reached: "Objectif atteint", supporters: "{count} soutiens" }} />;
+}

package/registry/examples/goal-progress/native/challenge-pot.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/goal-progress/native/challenge-pot.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/goal-progress/native/challenge-pot.tsx
+import { GoalProgress } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+function NativeChallengePot() {
+  return /* @__PURE__ */ jsx(GoalProgress, { title: "Backflip on the beach", raised: 26200, goal: 5e4, currency: "USD", supporters: 41, timeLeft: "3 days", height: 180 });
+}
+export {
+  NativeChallengePot as default
+};

package/registry/examples/goal-progress/native/challenge-pot.tsx

@@ -0,0 +1,6 @@
+import { GoalProgress } from "@krizaka/charts/native";
+
+// The challenge screen of the app.
+export default function NativeChallengePot() {
+  return <GoalProgress title="Backflip on the beach" raised={262_00} goal={500_00} currency="USD" supporters={41} timeLeft="3 days" height={180} />;
+}

package/registry/examples/heatmap/upload-activity.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/heatmap/upload-activity.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/heatmap/upload-activity.tsx
+import { Heatmap } from "@krizaka/charts/heatmap";
+import { jsx } from "react/jsx-runtime";
+var days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var hours = ["00", "03", "06", "09", "12", "15", "18", "21"];
+var cells = days.flatMap(
+  (day, d) => hours.map((hour, h) => ({ day, hour: `${hour}:00`, uploads: Math.round((h >= 5 ? 40 : h >= 3 ? 22 : 6) * (d >= 5 ? 1.6 : 1) + (d * 7 + h * 3) % 11) }))
+);
+function UploadActivity() {
+  return /* @__PURE__ */ jsx(
+    Heatmap,
+    {
+      title: "Uploads by day and hour",
+      description: "Last 4 weeks, Montr\xE9al time",
+      data: cells,
+      x: "hour",
+      y: "day",
+      value: "uploads",
+      yCategories: days,
+      xLabel: "Hour",
+      yLabel: "Day",
+      format: "integer"
+    }
+  );
+}
+export {
+  UploadActivity as default
+};

package/registry/examples/heatmap/upload-activity.tsx

@@ -0,0 +1,25 @@
+import { Heatmap } from "@krizaka/charts/heatmap";
+
+const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const hours = ["00", "03", "06", "09", "12", "15", "18", "21"];
+// A deterministic week: evenings and weekends are busier.
+const cells = days.flatMap((day, d) =>
+  hours.map((hour, h) => ({ day, hour: `${hour}:00`, uploads: Math.round((h >= 5 ? 40 : h >= 3 ? 22 : 6) * (d >= 5 ? 1.6 : 1) + ((d * 7 + h * 3) % 11)) })),
+);
+
+export default function UploadActivity() {
+  return (
+    <Heatmap
+      title="Uploads by day and hour"
+      description="Last 4 weeks, Montréal time"
+      data={cells}
+      x="hour"
+      y="day"
+      value="uploads"
+      yCategories={days}
+      xLabel="Hour"
+      yLabel="Day"
+      format="integer"
+    />
+  );
+}

package/registry/examples/job-throughput/live-hours.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/job-throughput/live-hours.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/job-throughput/live-hours.tsx
+import { JobThroughput } from "@krizaka/charts/throughput";
+import { jsx } from "react/jsx-runtime";
+var hours = [
+  { hour: "2026-10-11T09:00:00Z", done: 212, rejected: 4, waiting: 9 },
+  { hour: "2026-10-11T10:00:00Z", done: 268, rejected: 7, waiting: 14 },
+  { hour: "2026-10-11T11:00:00Z", done: 301, rejected: 22, waiting: 31 },
+  { hour: "2026-10-11T12:00:00Z", done: 244, rejected: 5, waiting: 12 },
+  { hour: "2026-10-11T13:00:00Z", done: 190, rejected: 3, waiting: 40 }
+];
+function LiveHours() {
+  return /* @__PURE__ */ jsx(
+    JobThroughput,
+    {
+      title: "Requests per hour",
+      data: hours,
+      x: "hour",
+      period: "time",
+      live: true,
+      statuses: [
+        { key: "done", label: "Done", tone: "success", outcome: "succeeded" },
+        { key: "rejected", label: "Rejected", tone: "danger", outcome: "failed" },
+        { key: "waiting", label: "Waiting", tone: "neutral" }
+      ],
+      labels: { total: "requests over {count} hours" }
+    }
+  );
+}
+export {
+  LiveHours as default
+};

package/registry/examples/job-throughput/live-hours.tsx

@@ -0,0 +1,28 @@
+import { JobThroughput } from "@krizaka/charts/throughput";
+
+// The console, per hour and live: its own statuses, translated by the app.
+const hours = [
+  { hour: "2026-10-11T09:00:00Z", done: 212, rejected: 4, waiting: 9 },
+  { hour: "2026-10-11T10:00:00Z", done: 268, rejected: 7, waiting: 14 },
+  { hour: "2026-10-11T11:00:00Z", done: 301, rejected: 22, waiting: 31 },
+  { hour: "2026-10-11T12:00:00Z", done: 244, rejected: 5, waiting: 12 },
+  { hour: "2026-10-11T13:00:00Z", done: 190, rejected: 3, waiting: 40 },
+];
+
+export default function LiveHours() {
+  return (
+    <JobThroughput
+      title="Requests per hour"
+      data={hours}
+      x="hour"
+      period="time"
+      live
+      statuses={[
+        { key: "done", label: "Done", tone: "success", outcome: "succeeded" },
+        { key: "rejected", label: "Rejected", tone: "danger", outcome: "failed" },
+        { key: "waiting", label: "Waiting", tone: "neutral" },
+      ]}
+      labels={{ total: "requests over {count} hours" }}
+    />
+  );
+}

package/registry/examples/job-throughput/native/week-of-jobs.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/job-throughput/native/week-of-jobs.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/job-throughput/native/week-of-jobs.tsx
+import { JobThroughput } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var days = [
+  { day: "2026-10-05", completed: 1240, failed: 38, running: 0, queued: 0 },
+  { day: "2026-10-06", completed: 1612, failed: 41, running: 0, queued: 0 },
+  { day: "2026-10-07", completed: 1505, failed: 95, running: 0, queued: 0 },
+  { day: "2026-10-08", completed: 1788, failed: 27, running: 0, queued: 0 },
+  { day: "2026-10-09", completed: 1934, failed: 33, running: 0, queued: 0 },
+  { day: "2026-10-10", completed: 1102, failed: 19, running: 0, queued: 0 },
+  { day: "2026-10-11", completed: 986, failed: 12, running: 24, queued: 63 }
+];
+function NativeWeekOfJobs() {
+  return /* @__PURE__ */ jsx(JobThroughput, { title: "Jobs this week", data: days, height: 160, labels: { total: "jobs over {count} days" } });
+}
+export {
+  NativeWeekOfJobs as default
+};

package/registry/examples/job-throughput/native/week-of-jobs.tsx

@@ -0,0 +1,16 @@
+import { JobThroughput } from "@krizaka/charts/native";
+
+const days = [
+  { day: "2026-10-05", completed: 1_240, failed: 38, running: 0, queued: 0 },
+  { day: "2026-10-06", completed: 1_612, failed: 41, running: 0, queued: 0 },
+  { day: "2026-10-07", completed: 1_505, failed: 95, running: 0, queued: 0 },
+  { day: "2026-10-08", completed: 1_788, failed: 27, running: 0, queued: 0 },
+  { day: "2026-10-09", completed: 1_934, failed: 33, running: 0, queued: 0 },
+  { day: "2026-10-10", completed: 1_102, failed: 19, running: 0, queued: 0 },
+  { day: "2026-10-11", completed: 986, failed: 12, running: 24, queued: 63 },
+];
+
+// The mobile Jobs screen: the total and the success rate first.
+export default function NativeWeekOfJobs() {
+  return <JobThroughput title="Jobs this week" data={days} height={160} labels={{ total: "jobs over {count} days" }} />;
+}

package/registry/examples/job-throughput/week-of-jobs.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/job-throughput/week-of-jobs.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/job-throughput/week-of-jobs.tsx
+import { JobThroughput } from "@krizaka/charts/throughput";
+import { jsx } from "react/jsx-runtime";
+var days = [
+  { day: "2026-10-05", completed: 1240, failed: 38, running: 0, queued: 0 },
+  { day: "2026-10-06", completed: 1612, failed: 41, running: 0, queued: 0 },
+  { day: "2026-10-07", completed: 1505, failed: 95, running: 0, queued: 0 },
+  { day: "2026-10-08", completed: 1788, failed: 27, running: 0, queued: 0 },
+  { day: "2026-10-09", completed: 1934, failed: 33, running: 0, queued: 0 },
+  { day: "2026-10-10", completed: 1102, failed: 19, running: 0, queued: 0 },
+  { day: "2026-10-11", completed: 986, failed: 12, running: 24, queued: 63 }
+];
+function WeekOfJobs() {
+  return /* @__PURE__ */ jsx(JobThroughput, { title: "Jobs this week", data: days, labels: { total: "jobs over {count} days" } });
+}
+export {
+  WeekOfJobs as default
+};

package/registry/examples/job-throughput/week-of-jobs.tsx

@@ -0,0 +1,16 @@
+import { JobThroughput } from "@krizaka/charts/throughput";
+
+// Orazaka jobs per day, by status (the default statuses: completed, failed, running, queued).
+const days = [
+  { day: "2026-10-05", completed: 1_240, failed: 38, running: 0, queued: 0 },
+  { day: "2026-10-06", completed: 1_612, failed: 41, running: 0, queued: 0 },
+  { day: "2026-10-07", completed: 1_505, failed: 95, running: 0, queued: 0 },
+  { day: "2026-10-08", completed: 1_788, failed: 27, running: 0, queued: 0 },
+  { day: "2026-10-09", completed: 1_934, failed: 33, running: 0, queued: 0 },
+  { day: "2026-10-10", completed: 1_102, failed: 19, running: 0, queued: 0 },
+  { day: "2026-10-11", completed: 986, failed: 12, running: 24, queued: 63 },
+];
+
+export default function WeekOfJobs() {
+  return <JobThroughput title="Jobs this week" data={days} labels={{ total: "jobs over {count} days" }} />;
+}

package/registry/examples/latency-chart/by-capability.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/latency-chart/by-capability.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/latency-chart/by-capability.tsx
+import { LatencyChart } from "@krizaka/charts/latency";
+import { jsx } from "react/jsx-runtime";
+var capabilities = [
+  { name: "Chat", p50: 420, p95: 1180 },
+  { name: "Embeddings", p50: 85, p95: 210 },
+  { name: "Speech to text", p50: 1350, p95: 2900 },
+  { name: "Image", p50: 4200, p95: 9800 },
+  { name: "Translation", p50: 610, p95: 1640 }
+];
+function ByCapability() {
+  return /* @__PURE__ */ jsx(
+    LatencyChart,
+    {
+      title: "Latency by capability",
+      description: "Last 24 hours",
+      data: capabilities,
+      objective: { value: 2e3, label: "Objective" }
+    }
+  );
+}
+export {
+  ByCapability as default
+};

package/registry/examples/latency-chart/by-capability.tsx

@@ -0,0 +1,21 @@
+import { LatencyChart } from "@krizaka/charts/latency";
+
+// Milliseconds, per capability, over the last 24 hours (the console's supervision).
+const capabilities = [
+  { name: "Chat", p50: 420, p95: 1_180 },
+  { name: "Embeddings", p50: 85, p95: 210 },
+  { name: "Speech to text", p50: 1_350, p95: 2_900 },
+  { name: "Image", p50: 4_200, p95: 9_800 },
+  { name: "Translation", p50: 610, p95: 1_640 },
+];
+
+export default function ByCapability() {
+  return (
+    <LatencyChart
+      title="Latency by capability"
+      description="Last 24 hours"
+      data={capabilities}
+      objective={{ value: 2_000, label: "Objective" }}
+    />
+  );
+}

package/registry/examples/latency-chart/native/by-capability.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/latency-chart/native/by-capability.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/latency-chart/native/by-capability.tsx
+import { LatencyChart } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var capabilities = [
+  { name: "Chat", p50: 420, p95: 1180 },
+  { name: "Embed", p50: 85, p95: 210 },
+  { name: "Speech", p50: 1350, p95: 2900 },
+  { name: "Image", p50: 4200, p95: 9800 }
+];
+function NativeByCapability() {
+  return /* @__PURE__ */ jsx(LatencyChart, { title: "Latency by capability", data: capabilities, height: 170, objective: { value: 2e3, label: "Objective" } });
+}
+export {
+  NativeByCapability as default
+};

package/registry/examples/latency-chart/native/by-capability.tsx

@@ -0,0 +1,13 @@
+import { LatencyChart } from "@krizaka/charts/native";
+
+const capabilities = [
+  { name: "Chat", p50: 420, p95: 1_180 },
+  { name: "Embed", p50: 85, p95: 210 },
+  { name: "Speech", p50: 1_350, p95: 2_900 },
+  { name: "Image", p50: 4_200, p95: 9_800 },
+];
+
+// Short names: the bars stand upright on a phone.
+export default function NativeByCapability() {
+  return <LatencyChart title="Latency by capability" data={capabilities} height={170} objective={{ value: 2_000, label: "Objective" }} />;
+}

package/registry/examples/latency-chart/time-to-result.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;