@krizaka/charts 0.1.0 → 0.2.0

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;

package/registry/examples/latency-chart/time-to-result.js

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/latency-chart/time-to-result.tsx
+import { LatencyChart } from "@krizaka/charts/latency";
+import { jsx } from "react/jsx-runtime";
+var kinds = [
+  { kind: "Summary", median: 8400 },
+  { kind: "Transcript", median: 46e3 },
+  { kind: "Dubbing", median: 312e3 },
+  { kind: "Video clip", median: 54e4 }
+];
+function TimeToResult() {
+  return /* @__PURE__ */ jsx(
+    LatencyChart,
+    {
+      title: "Time to result",
+      data: kinds,
+      x: "kind",
+      p50: "median",
+      p95: null,
+      labels: { p50: "Median", slowest: "median of {name}, the slowest" }
+    }
+  );
+}
+export {
+  TimeToResult as default
+};

package/registry/examples/latency-chart/time-to-result.tsx

@@ -0,0 +1,22 @@
+import { LatencyChart } from "@krizaka/charts/latency";
+
+// Orazaka: how long a job takes to give its result, per kind — seconds turn into minutes.
+const kinds = [
+  { kind: "Summary", median: 8_400 },
+  { kind: "Transcript", median: 46_000 },
+  { kind: "Dubbing", median: 312_000 },
+  { kind: "Video clip", median: 540_000 },
+];
+
+export default function TimeToResult() {
+  return (
+    <LatencyChart
+      title="Time to result"
+      data={kinds}
+      x="kind"
+      p50="median"
+      p95={null}
+      labels={{ p50: "Median", slowest: "median of {name}, the slowest" }}
+    />
+  );
+}

package/registry/examples/price-ticker/auction-room.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/price-ticker/auction-room.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/price-ticker/auction-room.tsx
+import { PriceTicker } from "@krizaka/charts/ticker";
+import { jsx } from "react/jsx-runtime";
+var bids = [
+  { at: "2026-10-11T18:02:00Z", amount: 2500 },
+  { at: "2026-10-11T18:05:00Z", amount: 3e3 },
+  { at: "2026-10-11T18:11:00Z", amount: 3500 },
+  { at: "2026-10-11T18:12:00Z", amount: 4200 },
+  { at: "2026-10-11T18:20:00Z", amount: 5e3 },
+  { at: "2026-10-11T18:26:00Z", amount: 5500 },
+  { at: "2026-10-11T18:31:00Z", amount: 6500 },
+  { at: "2026-10-11T18:33:00Z", amount: 7200 }
+];
+function AuctionRoom() {
+  return /* @__PURE__ */ jsx(PriceTicker, { title: "Signed first take", bids, opening: 2e3, openedAt: "2026-10-11T18:00:00Z", currency: "USD", reserve: 6e3, height: 220 });
+}
+export {
+  AuctionRoom as default
+};

package/registry/examples/price-ticker/auction-room.tsx

@@ -0,0 +1,17 @@
+import { PriceTicker } from "@krizaka/charts/ticker";
+
+// An Orochia auction: the bids in cents, as they arrived.
+const bids = [
+  { at: "2026-10-11T18:02:00Z", amount: 25_00 },
+  { at: "2026-10-11T18:05:00Z", amount: 30_00 },
+  { at: "2026-10-11T18:11:00Z", amount: 35_00 },
+  { at: "2026-10-11T18:12:00Z", amount: 42_00 },
+  { at: "2026-10-11T18:20:00Z", amount: 50_00 },
+  { at: "2026-10-11T18:26:00Z", amount: 55_00 },
+  { at: "2026-10-11T18:31:00Z", amount: 65_00 },
+  { at: "2026-10-11T18:33:00Z", amount: 72_00 },
+];
+
+export default function AuctionRoom() {
+  return <PriceTicker title="Signed first take" bids={bids} opening={20_00} openedAt="2026-10-11T18:00:00Z" currency="USD" reserve={60_00} height={220} />;
+}

package/registry/examples/price-ticker/native/auction-room.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/price-ticker/native/auction-room.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/price-ticker/native/auction-room.tsx
+import { PriceTicker } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var bids = [
+  { at: "2026-10-11T18:02:00Z", amount: 2500 },
+  { at: "2026-10-11T18:05:00Z", amount: 3e3 },
+  { at: "2026-10-11T18:11:00Z", amount: 3500 },
+  { at: "2026-10-11T18:20:00Z", amount: 5e3 },
+  { at: "2026-10-11T18:31:00Z", amount: 6500 },
+  { at: "2026-10-11T18:33:00Z", amount: 7200 }
+];
+function NativeAuctionRoom() {
+  return /* @__PURE__ */ jsx(PriceTicker, { title: "Signed first take", bids, opening: 2e3, openedAt: "2026-10-11T18:00:00Z", currency: "USD", reserve: 6e3, height: 160 });
+}
+export {
+  NativeAuctionRoom as default
+};

package/registry/examples/price-ticker/native/auction-room.tsx

@@ -0,0 +1,15 @@
+import { PriceTicker } from "@krizaka/charts/native";
+
+const bids = [
+  { at: "2026-10-11T18:02:00Z", amount: 25_00 },
+  { at: "2026-10-11T18:05:00Z", amount: 30_00 },
+  { at: "2026-10-11T18:11:00Z", amount: 35_00 },
+  { at: "2026-10-11T18:20:00Z", amount: 50_00 },
+  { at: "2026-10-11T18:31:00Z", amount: 65_00 },
+  { at: "2026-10-11T18:33:00Z", amount: 72_00 },
+];
+
+// The auction screen of the app: the current bid first.
+export default function NativeAuctionRoom() {
+  return <PriceTicker title="Signed first take" bids={bids} opening={20_00} openedAt="2026-10-11T18:00:00Z" currency="USD" reserve={60_00} height={160} />;
+}

package/registry/examples/price-ticker/no-bid-yet.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/price-ticker/no-bid-yet.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/price-ticker/no-bid-yet.tsx
+import { PriceTicker } from "@krizaka/charts/ticker";
+import { jsx } from "react/jsx-runtime";
+function NoBidYet() {
+  return /* @__PURE__ */ jsx(PriceTicker, { title: "Studio session, one hour", bids: [], opening: 4e3, openedAt: "2026-10-11T18:00:00Z", currency: "USD", reserve: 9e3, height: 180 });
+}
+export {
+  NoBidYet as default
+};

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/funnel.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "web",
   "engine": "echarts",
+  "tier": "advanced",
   "whenToUse": [
     "A sign-up or purchase journey: visit, sign-up, verification, first video, first sale."
   ],

package/registry/gauge.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "both",
   "engine": "svg",
+  "tier": "core",
   "whenToUse": [
     "A quota: credits used of a plan, with a warning zone before the limit.",
     "Progress towards a goal with a target: a challenge's escrow against its objective.",

package/registry/geo-map.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "web",
   "engine": "svg",
+  "tier": "advanced",
   "whenToUse": [
     "An audience by country: a creator's viewers, a service's users.",
     "Places with an amount: cities, data centres, as bubbles."

package/registry/globe.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "web",
   "engine": "svg",
+  "tier": "advanced",
   "whenToUse": [
     "Deployment regions and their replication links, on a product or status page.",
     "A global presence told at a glance, with a few places named."