@krizaka/charts 0.0.0-stage → 0.1.0

package/registry/examples/line-chart/forecast.js

@@ -0,0 +1,36 @@
+"use client";
+
+// registry/examples/line-chart/forecast.tsx
+import { LineChart } from "@krizaka/charts/line";
+import { jsx } from "react/jsx-runtime";
+var requests = [
+  { week: "2026-07-06", actual: 41200 },
+  { week: "2026-07-13", actual: 43900 },
+  { week: "2026-07-20", actual: 47100 },
+  { week: "2026-07-27", actual: 52800, forecast: 52800 },
+  { week: "2026-08-03", forecast: 57400 },
+  { week: "2026-08-10", forecast: 61e3 },
+  { week: "2026-08-17", forecast: 66300 }
+];
+function Forecast() {
+  return /* @__PURE__ */ jsx(
+    LineChart,
+    {
+      title: "Inference requests per week",
+      description: "Actual, then forecast",
+      data: requests,
+      x: "week",
+      xFormat: "day",
+      series: [
+        { key: "actual", label: "Actual" },
+        { key: "forecast", label: "Forecast", color: 1, dashed: true }
+      ],
+      format: "compact",
+      markers: [{ x: "2026-07-27", label: "Studio launch", tone: "accent" }],
+      dots: true
+    }
+  );
+}
+export {
+  Forecast as default
+};

package/registry/examples/line-chart/forecast.tsx

@@ -0,0 +1,30 @@
+import { LineChart } from "@krizaka/charts/line";
+
+const requests = [
+  { week: "2026-07-06", actual: 41_200 },
+  { week: "2026-07-13", actual: 43_900 },
+  { week: "2026-07-20", actual: 47_100 },
+  { week: "2026-07-27", actual: 52_800, forecast: 52_800 },
+  { week: "2026-08-03", forecast: 57_400 },
+  { week: "2026-08-10", forecast: 61_000 },
+  { week: "2026-08-17", forecast: 66_300 },
+];
+
+export default function Forecast() {
+  return (
+    <LineChart
+      title="Inference requests per week"
+      description="Actual, then forecast"
+      data={requests}
+      x="week"
+      xFormat="day"
+      series={[
+        { key: "actual", label: "Actual" },
+        { key: "forecast", label: "Forecast", color: 1, dashed: true },
+      ]}
+      format="compact"
+      markers={[{ x: "2026-07-27", label: "Studio launch", tone: "accent" }]}
+      dots
+    />
+  );
+}

package/registry/examples/line-chart/live-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/line-chart/live-jobs.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/line-chart/live-jobs.tsx
+import { LineChart } from "@krizaka/charts/line";
+import { useSlidingWindow } from "@krizaka/charts/provider";
+import { jsx, jsxs } from "react/jsx-runtime";
+var start = [18, 22, 19, 25, 31, 28, 26, 33, 37, 35].map((completed, i) => ({ at: `2026-10-11T14:${String(20 + i).padStart(2, "0")}Z`, completed }));
+function LiveJobs() {
+  const { data, push } = useSlidingWindow(10, start);
+  const next = () => {
+    const last = new Date(data[data.length - 1].at);
+    push({ at: new Date(last.getTime() + 6e4).toISOString(), completed: 20 + data.length * 7 % 19 });
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(LineChart, { title: "Jobs completed per minute", data, x: "at", xFormat: "time", y: "completed", yLabel: "Jobs", format: "integer", live: true, dots: true }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: next, style: { justifySelf: "start", padding: "4px 10px", borderRadius: 8, border: "1px solid var(--kz-border-default)", background: "var(--kz-surface-2)", color: "var(--kz-text-primary)" }, children: "Next minute" })
+  ] });
+}
+export {
+  LiveJobs as default
+};

package/registry/examples/line-chart/live-jobs.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { LineChart } from "@krizaka/charts/line";
+import { useSlidingWindow } from "@krizaka/charts/provider";
+
+type Minute = { at: string; completed: number };
+const start: Minute[] = [18, 22, 19, 25, 31, 28, 26, 33, 37, 35].map((completed, i) => ({ at: `2026-10-11T14:${String(20 + i).padStart(2, "0")}Z`, completed }));
+
+export default function LiveJobs() {
+  // The last 10 minutes; in an app, `push` is called by a server-sent event.
+  const { data, push } = useSlidingWindow<Minute>(10, start);
+  const next = () => {
+    const last = new Date(data[data.length - 1]!.at);
+    push({ at: new Date(last.getTime() + 60_000).toISOString(), completed: 20 + ((data.length * 7) % 19) });
+  };
+  return (
+    <div style={{ display: "grid", gap: 8 }}>
+      <LineChart title="Jobs completed per minute" data={data} x="at" xFormat="time" y="completed" yLabel="Jobs" format="integer" live dots />
+      <button type="button" onClick={next} style={{ justifySelf: "start", padding: "4px 10px", borderRadius: 8, border: "1px solid var(--kz-border-default)", background: "var(--kz-surface-2)", color: "var(--kz-text-primary)" }}>
+        Next minute
+      </button>
+    </div>
+  );
+}

package/registry/examples/line-chart/native/creator-earnings.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/line-chart/native/creator-earnings.js

@@ -0,0 +1,32 @@
+"use client";
+
+// registry/examples/line-chart/native/creator-earnings.tsx
+import { LineChart } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var earnings = [
+  { month: "2026-04", earnings: 182e3, tips: 21e3 },
+  { month: "2026-05", earnings: 164e3, tips: 18500 },
+  { month: "2026-06", earnings: 231e3, tips: 26e3 },
+  { month: "2026-07", earnings: 298e3, tips: 31e3 },
+  { month: "2026-08", earnings: 276e3, tips: 35500 },
+  { month: "2026-09", earnings: 342e3, tips: 41e3 }
+];
+function CreatorEarnings() {
+  return /* @__PURE__ */ jsx(
+    LineChart,
+    {
+      title: "Earnings, last 6 months",
+      data: earnings,
+      x: "month",
+      series: [
+        { key: "earnings", label: "Video sales" },
+        { key: "tips", label: "Tips" }
+      ],
+      format: { style: "money", currency: "EUR" },
+      thresholds: [{ value: 25e4, label: "Payout threshold", tone: "success" }]
+    }
+  );
+}
+export {
+  CreatorEarnings as default
+};

package/registry/examples/line-chart/native/creator-earnings.tsx

@@ -0,0 +1,26 @@
+import { LineChart } from "@krizaka/charts/native";
+
+const earnings = [
+  { month: "2026-04", earnings: 182_000, tips: 21_000 },
+  { month: "2026-05", earnings: 164_000, tips: 18_500 },
+  { month: "2026-06", earnings: 231_000, tips: 26_000 },
+  { month: "2026-07", earnings: 298_000, tips: 31_000 },
+  { month: "2026-08", earnings: 276_000, tips: 35_500 },
+  { month: "2026-09", earnings: 342_000, tips: 41_000 },
+];
+
+export default function CreatorEarnings() {
+  return (
+    <LineChart
+      title="Earnings, last 6 months"
+      data={earnings}
+      x="month"
+      series={[
+        { key: "earnings", label: "Video sales" },
+        { key: "tips", label: "Tips" },
+      ]}
+      format={{ style: "money", currency: "EUR" }}
+      thresholds={[{ value: 250_000, label: "Payout threshold", tone: "success" }]}
+    />
+  );
+}

package/registry/examples/line-chart/states.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/line-chart/states.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/line-chart/states.tsx
+import { LineChart } from "@krizaka/charts/line";
+import { jsx, jsxs } from "react/jsx-runtime";
+var series = [{ key: "views", label: "Views" }];
+function States() {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 24 }, children: [
+    /* @__PURE__ */ jsx(LineChart, { title: "Views (loading)", data: [], x: "day", series, height: 140, loading: true }),
+    /* @__PURE__ */ jsx(LineChart, { title: "Views (no data yet)", data: [], x: "day", series, height: 140 }),
+    /* @__PURE__ */ jsx(LineChart, { title: "Views (failed)", data: [], x: "day", series, height: 140, error: true })
+  ] });
+}
+export {
+  States as default
+};

package/registry/examples/line-chart/states.tsx

@@ -0,0 +1,13 @@
+import { LineChart } from "@krizaka/charts/line";
+
+const series = [{ key: "views", label: "Views" }] as const;
+
+export default function States() {
+  return (
+    <div style={{ display: "grid", gap: 24 }}>
+      <LineChart title="Views (loading)" data={[]} x="day" series={series} height={140} loading />
+      <LineChart title="Views (no data yet)" data={[]} x="day" series={series} height={140} />
+      <LineChart title="Views (failed)" data={[]} x="day" series={series} height={140} error />
+    </div>
+  );
+}

package/registry/examples/pie-chart/credit-spend.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/pie-chart/credit-spend.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/pie-chart/credit-spend.tsx
+import { DonutChart } from "@krizaka/charts/pie";
+import { jsx } from "react/jsx-runtime";
+var spend = [
+  { model: "Chat \xB7 Mistral Large", credits: 18400 },
+  { model: "Image \xB7 Flux", credits: 9650 },
+  { model: "Video \xB7 Wan 2.2", credits: 7200 },
+  { model: "Speech \xB7 Whisper", credits: 2100 },
+  { model: "Embeddings", credits: 640 }
+];
+function CreditSpend() {
+  return /* @__PURE__ */ jsx(
+    DonutChart,
+    {
+      title: "Credits spent in September",
+      data: spend,
+      label: "model",
+      value: "credits",
+      labelHeader: "Model",
+      valueHeader: "Credits",
+      format: "integer",
+      centerLabel: "credits"
+    }
+  );
+}
+export {
+  CreditSpend as default
+};

package/registry/examples/pie-chart/credit-spend.tsx

@@ -0,0 +1,24 @@
+import { DonutChart } from "@krizaka/charts/pie";
+
+const spend = [
+  { model: "Chat · Mistral Large", credits: 18_400 },
+  { model: "Image · Flux", credits: 9_650 },
+  { model: "Video · Wan 2.2", credits: 7_200 },
+  { model: "Speech · Whisper", credits: 2_100 },
+  { model: "Embeddings", credits: 640 },
+];
+
+export default function CreditSpend() {
+  return (
+    <DonutChart
+      title="Credits spent in September"
+      data={spend}
+      label="model"
+      value="credits"
+      labelHeader="Model"
+      valueHeader="Credits"
+      format="integer"
+      centerLabel="credits"
+    />
+  );
+}

package/registry/examples/pie-chart/native/credit-spend.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/pie-chart/native/credit-spend.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/pie-chart/native/credit-spend.tsx
+import { DonutChart } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var spend = [
+  { model: "Chat", credits: 18400 },
+  { model: "Image", credits: 9650 },
+  { model: "Video", credits: 7200 },
+  { model: "Speech", credits: 2100 }
+];
+function CreditSpend() {
+  return /* @__PURE__ */ jsx(DonutChart, { title: "Credits spent in September", data: spend, label: "model", value: "credits", format: "compact", centerLabel: "credits" });
+}
+export {
+  CreditSpend as default
+};

package/registry/examples/pie-chart/native/credit-spend.tsx

@@ -0,0 +1,12 @@
+import { DonutChart } from "@krizaka/charts/native";
+
+const spend = [
+  { model: "Chat", credits: 18_400 },
+  { model: "Image", credits: 9_650 },
+  { model: "Video", credits: 7_200 },
+  { model: "Speech", credits: 2_100 },
+];
+
+export default function CreditSpend() {
+  return <DonutChart title="Credits spent in September" data={spend} label="model" value="credits" format="compact" centerLabel="credits" />;
+}

package/registry/examples/pie-chart/storage-by-kind.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/pie-chart/storage-by-kind.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/pie-chart/storage-by-kind.tsx
+import { PieChart } from "@krizaka/charts/pie";
+import { jsx } from "react/jsx-runtime";
+var kinds = [
+  { kind: "Videos", gb: 812 },
+  { kind: "Thumbnails", gb: 64 },
+  { kind: "Audio", gb: 121 },
+  { kind: "Subtitles", gb: 3 },
+  { kind: "Project files", gb: 96 },
+  { kind: "Exports", gb: 210 },
+  { kind: "Fonts", gb: 1 },
+  { kind: "Logs", gb: 2 }
+];
+function StorageByKind() {
+  return /* @__PURE__ */ jsx(
+    PieChart,
+    {
+      title: "Storage by kind",
+      data: kinds,
+      label: "kind",
+      value: "gb",
+      format: { style: "unit", unit: "gigabyte" },
+      otherLabel: "Other"
+    }
+  );
+}
+export {
+  StorageByKind as default
+};

package/registry/examples/pie-chart/storage-by-kind.tsx

@@ -0,0 +1,26 @@
+import { PieChart } from "@krizaka/charts/pie";
+
+// Gigabytes; past six slices the smallest fold into “Other”.
+const kinds = [
+  { kind: "Videos", gb: 812 },
+  { kind: "Thumbnails", gb: 64 },
+  { kind: "Audio", gb: 121 },
+  { kind: "Subtitles", gb: 3 },
+  { kind: "Project files", gb: 96 },
+  { kind: "Exports", gb: 210 },
+  { kind: "Fonts", gb: 1 },
+  { kind: "Logs", gb: 2 },
+];
+
+export default function StorageByKind() {
+  return (
+    <PieChart
+      title="Storage by kind"
+      data={kinds}
+      label="kind"
+      value="gb"
+      format={{ style: "unit", unit: "gigabyte" }}
+      otherLabel="Other"
+    />
+  );
+}

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