@krizaka/charts 0.0.0-stage → 0.2.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/credit-usage/monthly-credits.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/credit-usage/monthly-credits.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/credit-usage/monthly-credits.tsx
+import { CreditUsage } from "@krizaka/charts/credits";
+import { jsx } from "react/jsx-runtime";
+var daily = [120, 180, 95, 210, 260, 140, 60, 75, 230, 310, 280, 190, 240, 300];
+function MonthlyCredits() {
+  return /* @__PURE__ */ jsx(
+    CreditUsage,
+    {
+      title: "Credits this month",
+      description: "Pro plan",
+      used: 3120,
+      limit: 5e3,
+      daily,
+      renewsAt: "2026-11-01",
+      now: /* @__PURE__ */ new Date("2026-10-11T09:00:00Z"),
+      labels: { remaining: "credits left of {limit}" }
+    }
+  );
+}
+export {
+  MonthlyCredits as default
+};

package/registry/examples/credit-usage/monthly-credits.tsx

@@ -0,0 +1,19 @@
+import { CreditUsage } from "@krizaka/charts/credits";
+
+// The credits used each day of the last two weeks (an Orazaka Pro plan of 5,000 credits).
+const daily = [120, 180, 95, 210, 260, 140, 60, 75, 230, 310, 280, 190, 240, 300];
+
+export default function MonthlyCredits() {
+  return (
+    <CreditUsage
+      title="Credits this month"
+      description="Pro plan"
+      used={3_120}
+      limit={5_000}
+      daily={daily}
+      renewsAt="2026-11-01"
+      now={new Date("2026-10-11T09:00:00Z")}
+      labels={{ remaining: "credits left of {limit}" }}
+    />
+  );
+}

package/registry/examples/credit-usage/native/monthly-credits.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/credit-usage/native/monthly-credits.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/credit-usage/native/monthly-credits.tsx
+import { CreditUsage } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var daily = [120, 180, 95, 210, 260, 140, 60, 75, 230, 310, 280, 190, 240, 300];
+function NativeMonthlyCredits() {
+  return /* @__PURE__ */ jsx(
+    CreditUsage,
+    {
+      title: "Credits this month",
+      used: 3120,
+      limit: 5e3,
+      daily,
+      renewsAt: "2026-11-01",
+      now: /* @__PURE__ */ new Date("2026-10-11T09:00:00Z"),
+      labels: { remaining: "credits left of {limit}" }
+    }
+  );
+}
+export {
+  NativeMonthlyCredits as default
+};

package/registry/examples/credit-usage/native/monthly-credits.tsx

@@ -0,0 +1,18 @@
+import { CreditUsage } from "@krizaka/charts/native";
+
+const daily = [120, 180, 95, 210, 260, 140, 60, 75, 230, 310, 280, 190, 240, 300];
+
+// The credits card of the mobile app.
+export default function NativeMonthlyCredits() {
+  return (
+    <CreditUsage
+      title="Credits this month"
+      used={3_120}
+      limit={5_000}
+      daily={daily}
+      renewsAt="2026-11-01"
+      now={new Date("2026-10-11T09:00:00Z")}
+      labels={{ remaining: "credits left of {limit}" }}
+    />
+  );
+}

package/registry/examples/credit-usage/storage-plan.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/credit-usage/storage-plan.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/credit-usage/storage-plan.tsx
+import { CreditUsage } from "@krizaka/charts/credits";
+import { jsx } from "react/jsx-runtime";
+function StoragePlan() {
+  return /* @__PURE__ */ jsx(
+    CreditUsage,
+    {
+      title: "Platform storage",
+      description: "Bunny Stream \xB7 Growth plan",
+      used: 1742,
+      limit: 2e3,
+      format: { style: "unit", unit: "gigabyte" },
+      labels: { remaining: "free of {limit}" }
+    }
+  );
+}
+export {
+  StoragePlan as default
+};

package/registry/examples/credit-usage/storage-plan.tsx

@@ -0,0 +1,15 @@
+import { CreditUsage } from "@krizaka/charts/credits";
+
+// Orochia's console: the platform's video storage, in gigabytes, past the warning level.
+export default function StoragePlan() {
+  return (
+    <CreditUsage
+      title="Platform storage"
+      description="Bunny Stream · Growth plan"
+      used={1_742}
+      limit={2_000}
+      format={{ style: "unit", unit: "gigabyte" }}
+      labels={{ remaining: "free of {limit}" }}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/earnings-chart/creator-month.tsx
+import { EarningsChart } from "@krizaka/charts/earnings";
+import { jsx } from "react/jsx-runtime";
+var months = [
+  { month: "2026-05", net: 18240 },
+  { month: "2026-06", net: 24510 },
+  { month: "2026-07", net: 21075 },
+  { month: "2026-08", net: 39820 },
+  { month: "2026-09", net: 44105 },
+  { month: "2026-10", net: 51290 }
+];
+function CreatorMonth() {
+  return /* @__PURE__ */ jsx(
+    EarningsChart,
+    {
+      title: "Your earnings",
+      data: months,
+      net: "net",
+      currency: "USD",
+      payoutThreshold: { value: 5e3, label: "Payout threshold" },
+      labels: { total: "earned over {count} months", change: "{change} vs September" }
+    }
+  );
+}
+export {
+  CreatorMonth as default
+};

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

@@ -0,0 +1,24 @@
+import { EarningsChart } from "@krizaka/charts/earnings";
+
+// Net earnings in cents, as the ledger stores them (Orochia /earnings).
+const months = [
+  { month: "2026-05", net: 182_40 },
+  { month: "2026-06", net: 245_10 },
+  { month: "2026-07", net: 210_75 },
+  { month: "2026-08", net: 398_20 },
+  { month: "2026-09", net: 441_05 },
+  { month: "2026-10", net: 512_90 },
+];
+
+export default function CreatorMonth() {
+  return (
+    <EarningsChart
+      title="Your earnings"
+      data={months}
+      net="net"
+      currency="USD"
+      payoutThreshold={{ value: 50_00, label: "Payout threshold" }}
+      labels={{ total: "earned over {count} months", change: "{change} vs September" }}
+    />
+  );
+}

package/registry/examples/earnings-chart/gross-and-net.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/earnings-chart/gross-and-net.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/earnings-chart/gross-and-net.tsx
+import { EarningsChart } from "@krizaka/charts/earnings";
+import { jsx } from "react/jsx-runtime";
+var months = [
+  { month: "2026-07", gross: 1248e3, net: 1060800 },
+  { month: "2026-08", gross: 1592e3, net: 1353200 },
+  { month: "2026-09", gross: 1821e3, net: 1547850 },
+  { month: "2026-10", gross: 2104500, net: 1788825 }
+];
+function GrossAndNet() {
+  return /* @__PURE__ */ jsx(
+    EarningsChart,
+    {
+      title: "Creator earnings",
+      description: "Gross volume and what creators keep after fees",
+      data: months,
+      gross: "gross",
+      net: "net",
+      currency: "USD",
+      labels: { total: "paid to creators over {count} months", change: "{change} vs last month", gross: "Gross volume", net: "Creators' net" },
+      exportable: ["csv"]
+    }
+  );
+}
+export {
+  GrossAndNet as default
+};

package/registry/examples/earnings-chart/gross-and-net.tsx

@@ -0,0 +1,24 @@
+import { EarningsChart } from "@krizaka/charts/earnings";
+
+// The platform's treasury: gross volume and creators' net, in cents.
+const months = [
+  { month: "2026-07", gross: 12_480_00, net: 10_608_00 },
+  { month: "2026-08", gross: 15_920_00, net: 13_532_00 },
+  { month: "2026-09", gross: 18_210_00, net: 15_478_50 },
+  { month: "2026-10", gross: 21_045_00, net: 17_888_25 },
+];
+
+export default function GrossAndNet() {
+  return (
+    <EarningsChart
+      title="Creator earnings"
+      description="Gross volume and what creators keep after fees"
+      data={months}
+      gross="gross"
+      net="net"
+      currency="USD"
+      labels={{ total: "paid to creators over {count} months", change: "{change} vs last month", gross: "Gross volume", net: "Creators' net" }}
+      exportable={["csv"]}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/earnings-chart/native/creator-month.tsx
+import { EarningsChart } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var months = [
+  { month: "2026-05", net: 18240 },
+  { month: "2026-06", net: 24510 },
+  { month: "2026-07", net: 21075 },
+  { month: "2026-08", net: 39820 },
+  { month: "2026-09", net: 44105 },
+  { month: "2026-10", net: 51290 }
+];
+function NativeCreatorMonth() {
+  return /* @__PURE__ */ jsx(
+    EarningsChart,
+    {
+      title: "Your earnings",
+      data: months,
+      net: "net",
+      currency: "USD",
+      height: 160,
+      labels: { total: "over {count} months", change: "{change} vs September" }
+    }
+  );
+}
+export {
+  NativeCreatorMonth as default
+};

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

@@ -0,0 +1,24 @@
+import { EarningsChart } from "@krizaka/charts/native";
+
+const months = [
+  { month: "2026-05", net: 182_40 },
+  { month: "2026-06", net: 245_10 },
+  { month: "2026-07", net: 210_75 },
+  { month: "2026-08", net: 398_20 },
+  { month: "2026-09", net: 441_05 },
+  { month: "2026-10", net: 512_90 },
+];
+
+// The earnings card of the app: the total first, the bars under it.
+export default function NativeCreatorMonth() {
+  return (
+    <EarningsChart
+      title="Your earnings"
+      data={months}
+      net="net"
+      currency="USD"
+      height={160}
+      labels={{ total: "over {count} months", change: "{change} vs September" }}
+    />
+  );
+}

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;