@krizaka/charts 0.0.0-stage → 0.1.0

package/registry/examples/chart/polar-uploads.tsx

@@ -0,0 +1,30 @@
+import { Chart } from "@krizaka/charts/chart";
+
+const uploads = [3, 2, 1, 1, 2, 4, 9, 18, 26, 31, 34, 37, 41, 39, 36, 38, 44, 52, 58, 61, 49, 33, 17, 8];
+const hours = uploads.map((_, h) => `${String(h).padStart(2, "0")}:00`);
+
+// Only what the option needs: polar bars and the tooltip (not all of ECharts).
+const modules = async () => {
+  const [{ use: register }, { BarChart }, { PolarComponent, TooltipComponent }] = await Promise.all([import("echarts/core"), import("echarts/charts"), import("echarts/components")]);
+  register([BarChart, PolarComponent, TooltipComponent]);
+};
+
+export default function PolarUploads() {
+  return (
+    <Chart
+      title="Uploads by hour of the day"
+      modules={modules}
+      option={(theme) => ({
+        polar: { radius: ["18%", "80%"] },
+        angleAxis: { type: "category", data: hours, axisLabel: { color: theme.text2, interval: 2 }, axisLine: { lineStyle: { color: theme.axis } } },
+        radiusAxis: { axisLabel: { show: false }, splitLine: { lineStyle: { color: theme.grid } }, axisLine: { show: false } },
+        tooltip: { trigger: "item" },
+        series: [{ type: "bar", coordinateSystem: "polar", data: uploads, itemStyle: { color: theme.palette[0], borderRadius: 3 } }],
+      })}
+      summaryText={`Uploads by hour: quietest at 02:00 (1), busiest at 19:00 (61).`}
+      table={{ columns: ["Hour", "Uploads"], rows: hours.map((h, i) => [h, String(uploads[i])]) }}
+      items={uploads.map((u, i) => ({ seriesIndex: 0, dataIndex: i, text: `${hours[i]}: ${u}` }))}
+      height={340}
+    />
+  );
+}

package/registry/examples/charts-provider/french-orazaka.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/charts-provider/french-orazaka.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/charts-provider/french-orazaka.tsx
+import { BarChart } from "@krizaka/charts/bar";
+import { ChartsProvider } from "@krizaka/charts/provider";
+import { jsx } from "react/jsx-runtime";
+var months = [
+  { month: "2026-06", credits: 412e3 },
+  { month: "2026-07", credits: 468500 },
+  { month: "2026-08", credits: 391200 },
+  { month: "2026-09", credits: 523900 }
+];
+function FrenchOrazaka() {
+  return /* @__PURE__ */ jsx(
+    ChartsProvider,
+    {
+      locale: "fr-FR",
+      brand: "orazaka",
+      labels: { showData: "Voir les donn\xE9es", hideData: "Masquer les donn\xE9es", empty: "Pas encore de donn\xE9es.", kinds: { bar: "Histogramme" } },
+      children: /* @__PURE__ */ jsx(BarChart, { title: "Cr\xE9dits consomm\xE9s par mois", data: months, x: "month", xLabel: "Mois", y: "credits", yLabel: "Cr\xE9dits", format: "compact" })
+    }
+  );
+}
+export {
+  FrenchOrazaka as default
+};

package/registry/examples/charts-provider/french-orazaka.tsx

@@ -0,0 +1,22 @@
+import { BarChart } from "@krizaka/charts/bar";
+import { ChartsProvider } from "@krizaka/charts/provider";
+
+const months = [
+  { month: "2026-06", credits: 412_000 },
+  { month: "2026-07", credits: 468_500 },
+  { month: "2026-08", credits: 391_200 },
+  { month: "2026-09", credits: 523_900 },
+];
+
+// Once near the app's root: the locale, the brand's palette, the words from the app's catalogue.
+export default function FrenchOrazaka() {
+  return (
+    <ChartsProvider
+      locale="fr-FR"
+      brand="orazaka"
+      labels={{ showData: "Voir les données", hideData: "Masquer les données", empty: "Pas encore de données.", kinds: { bar: "Histogramme" } }}
+    >
+      <BarChart title="Crédits consommés par mois" data={months} x="month" xLabel="Mois" y="credits" yLabel="Crédits" format="compact" />
+    </ChartsProvider>
+  );
+}

package/registry/examples/charts-provider/native/french-orazaka.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/charts-provider/native/french-orazaka.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/charts-provider/native/french-orazaka.tsx
+import { BarChart, ChartsProvider } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var months = [
+  { month: "2026-06", credits: 412e3 },
+  { month: "2026-07", credits: 468500 },
+  { month: "2026-08", credits: 391200 },
+  { month: "2026-09", credits: 523900 }
+];
+function FrenchOrazaka() {
+  return /* @__PURE__ */ jsx(ChartsProvider, { locale: "fr-FR", brand: "orazaka", children: /* @__PURE__ */ jsx(BarChart, { title: "Cr\xE9dits consomm\xE9s par mois", data: months, x: "month", y: "credits", yLabel: "Cr\xE9dits", format: "compact" }) });
+}
+export {
+  FrenchOrazaka as default
+};

package/registry/examples/charts-provider/native/french-orazaka.tsx

@@ -0,0 +1,17 @@
+import { BarChart, ChartsProvider } from "@krizaka/charts/native";
+
+const months = [
+  { month: "2026-06", credits: 412_000 },
+  { month: "2026-07", credits: 468_500 },
+  { month: "2026-08", credits: 391_200 },
+  { month: "2026-09", credits: 523_900 },
+];
+
+// In an app: scheme and theme from @krizaka/ui/native's useTheme(), so the charts follow its mode and brand.
+export default function FrenchOrazaka() {
+  return (
+    <ChartsProvider locale="fr-FR" brand="orazaka">
+      <BarChart title="Crédits consommés par mois" data={months} x="month" y="credits" yLabel="Crédits" format="compact" />
+    </ChartsProvider>
+  );
+}

package/registry/examples/funnel/signup.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/funnel/signup.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/funnel/signup.tsx
+import { Funnel } from "@krizaka/charts/funnel";
+import { jsx } from "react/jsx-runtime";
+var stages = [
+  { stage: "Visited the creator page", people: 48200 },
+  { stage: "Created an account", people: 9640 },
+  { stage: "Verified their identity", people: 6170 },
+  { stage: "Published a first video", people: 3210 },
+  { stage: "Made a first sale", people: 1180 }
+];
+function Signup() {
+  return /* @__PURE__ */ jsx(
+    Funnel,
+    {
+      title: "Creator sign-up, September",
+      data: stages,
+      label: "stage",
+      value: "people",
+      stageLabel: "Stage",
+      valueLabel: "Creators",
+      fromFirstLabel: "% of visits",
+      fromPreviousLabel: "% of previous"
+    }
+  );
+}
+export {
+  Signup as default
+};

package/registry/examples/funnel/signup.tsx

@@ -0,0 +1,24 @@
+import { Funnel } from "@krizaka/charts/funnel";
+
+const stages = [
+  { stage: "Visited the creator page", people: 48_200 },
+  { stage: "Created an account", people: 9_640 },
+  { stage: "Verified their identity", people: 6_170 },
+  { stage: "Published a first video", people: 3_210 },
+  { stage: "Made a first sale", people: 1_180 },
+];
+
+export default function Signup() {
+  return (
+    <Funnel
+      title="Creator sign-up, September"
+      data={stages}
+      label="stage"
+      value="people"
+      stageLabel="Stage"
+      valueLabel="Creators"
+      fromFirstLabel="% of visits"
+      fromPreviousLabel="% of previous"
+    />
+  );
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/gauge/challenge-goal.tsx
+import { Gauge } from "@krizaka/charts/gauge";
+import { jsx } from "react/jsx-runtime";
+function ChallengeGoal() {
+  return /* @__PURE__ */ jsx(
+    Gauge,
+    {
+      title: "\u201CShoot the sunrise from the Mont-Royal\u201D",
+      description: "Challenge in escrow \xB7 6 days left",
+      value: 186e3,
+      max: 3e5,
+      format: { style: "money", currency: "CAD" },
+      caption: "raised",
+      target: { value: 25e4, label: "Objective" },
+      tone: "accent",
+      style: { maxWidth: 320 }
+    }
+  );
+}
+export {
+  ChallengeGoal as default
+};

package/registry/examples/gauge/challenge-goal.tsx

@@ -0,0 +1,18 @@
+import { Gauge } from "@krizaka/charts/gauge";
+
+// A challenge's escrow, in cents, against its objective.
+export default function ChallengeGoal() {
+  return (
+    <Gauge
+      title="“Shoot the sunrise from the Mont-Royal”"
+      description="Challenge in escrow · 6 days left"
+      value={186_000}
+      max={300_000}
+      format={{ style: "money", currency: "CAD" }}
+      caption="raised"
+      target={{ value: 250_000, label: "Objective" }}
+      tone="accent"
+      style={{ maxWidth: 320 }}
+    />
+  );
+}

package/registry/examples/gauge/credits-quota.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/gauge/credits-quota.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/gauge/credits-quota.tsx
+import { Gauge } from "@krizaka/charts/gauge";
+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", label: "Within plan" },
+        { to: 47500, tone: "warning", label: "Nearing the limit" },
+        { to: 5e4, tone: "danger", label: "At the limit" }
+      ],
+      style: { maxWidth: 320 }
+    }
+  );
+}
+export {
+  CreditsQuota as default
+};

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

@@ -0,0 +1,19 @@
+import { Gauge } from "@krizaka/charts/gauge";
+
+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", label: "Within plan" },
+        { to: 47_500, tone: "warning", label: "Nearing the limit" },
+        { to: 50_000, tone: "danger", label: "At the limit" },
+      ]}
+      style={{ maxWidth: 320 }}
+    />
+  );
+}

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

@@ -0,0 +1,35 @@
+"use client";
+
+// registry/examples/line-chart/creator-earnings.tsx
+import { LineChart } from "@krizaka/charts/line";
+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",
+      description: "Video sales and tips, before fees",
+      data: earnings,
+      x: "month",
+      xLabel: "Month",
+      series: [
+        { key: "earnings", label: "Video sales" },
+        { key: "tips", label: "Tips" }
+      ],
+      format: { style: "money", currency: "EUR" },
+      thresholds: [{ value: 25e4, label: "Payout threshold", tone: "success" }],
+      exportable: true
+    }
+  );
+}
+export {
+  CreatorEarnings as default
+};

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

@@ -0,0 +1,30 @@
+import { LineChart } from "@krizaka/charts/line";
+
+// Amounts in cents, as the ledger stores them.
+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"
+      description="Video sales and tips, before fees"
+      data={earnings}
+      x="month"
+      xLabel="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" }]}
+      exportable
+    />
+  );
+}

package/registry/examples/line-chart/forecast.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;