@krizaka/charts 0.0.0-stage → 0.1.0

package/registry/examples/area-chart/credits-usage.js

@@ -0,0 +1,38 @@
+"use client";
+
+// registry/examples/area-chart/credits-usage.tsx
+import { AreaChart } from "@krizaka/charts/line";
+import { jsx } from "react/jsx-runtime";
+var weeks = [
+  { week: "2026-08-03", chat: 9400, image: 4100, video: 1200 },
+  { week: "2026-08-10", chat: 10200, image: 4600, video: 1900 },
+  { week: "2026-08-17", chat: 9800, image: 5300, video: 2400 },
+  { week: "2026-08-24", chat: 11600, image: 5100, video: 3100 },
+  { week: "2026-08-31", chat: 12300, image: 6200, video: 3600 },
+  { week: "2026-09-07", chat: 12900, image: 6e3, video: 4800 },
+  { week: "2026-09-14", chat: 13400, image: 6900, video: 5200 },
+  { week: "2026-09-21", chat: 14100, image: 7400, video: 6100 }
+];
+function CreditsUsage() {
+  return /* @__PURE__ */ jsx(
+    AreaChart,
+    {
+      title: "Credits used per week, by model",
+      description: "Workspace \u201CAtelier Nord\u201D, Pro plan",
+      data: weeks,
+      x: "week",
+      xFormat: "day",
+      series: [
+        { key: "chat", label: "Chat" },
+        { key: "image", label: "Image" },
+        { key: "video", label: "Video" }
+      ],
+      format: "integer",
+      stacked: true,
+      thresholds: [{ value: 25e3, label: "Weekly allowance", tone: "warning" }]
+    }
+  );
+}
+export {
+  CreditsUsage as default
+};

package/registry/examples/area-chart/credits-usage.tsx

@@ -0,0 +1,32 @@
+import { AreaChart } from "@krizaka/charts/line";
+
+const weeks = [
+  { week: "2026-08-03", chat: 9_400, image: 4_100, video: 1_200 },
+  { week: "2026-08-10", chat: 10_200, image: 4_600, video: 1_900 },
+  { week: "2026-08-17", chat: 9_800, image: 5_300, video: 2_400 },
+  { week: "2026-08-24", chat: 11_600, image: 5_100, video: 3_100 },
+  { week: "2026-08-31", chat: 12_300, image: 6_200, video: 3_600 },
+  { week: "2026-09-07", chat: 12_900, image: 6_000, video: 4_800 },
+  { week: "2026-09-14", chat: 13_400, image: 6_900, video: 5_200 },
+  { week: "2026-09-21", chat: 14_100, image: 7_400, video: 6_100 },
+];
+
+export default function CreditsUsage() {
+  return (
+    <AreaChart
+      title="Credits used per week, by model"
+      description="Workspace “Atelier Nord”, Pro plan"
+      data={weeks}
+      x="week"
+      xFormat="day"
+      series={[
+        { key: "chat", label: "Chat" },
+        { key: "image", label: "Image" },
+        { key: "video", label: "Video" },
+      ]}
+      format="integer"
+      stacked
+      thresholds={[{ value: 25_000, label: "Weekly allowance", tone: "warning" }]}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/area-chart/native/credits-usage.tsx
+import { AreaChart } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var weeks = [
+  { week: "2026-08-03", chat: 9400, image: 4100 },
+  { week: "2026-08-10", chat: 10200, image: 4600 },
+  { week: "2026-08-17", chat: 9800, image: 5300 },
+  { week: "2026-08-24", chat: 11600, image: 5100 },
+  { week: "2026-08-31", chat: 12300, image: 6200 },
+  { week: "2026-09-07", chat: 12900, image: 6e3 }
+];
+function CreditsUsage() {
+  return /* @__PURE__ */ jsx(
+    AreaChart,
+    {
+      title: "Credits used per week",
+      data: weeks,
+      x: "week",
+      xFormat: "day",
+      series: [
+        { key: "chat", label: "Chat" },
+        { key: "image", label: "Image" }
+      ],
+      format: "compact",
+      stacked: true
+    }
+  );
+}
+export {
+  CreditsUsage as default
+};

package/registry/examples/area-chart/native/credits-usage.tsx

@@ -0,0 +1,27 @@
+import { AreaChart } from "@krizaka/charts/native";
+
+const weeks = [
+  { week: "2026-08-03", chat: 9_400, image: 4_100 },
+  { week: "2026-08-10", chat: 10_200, image: 4_600 },
+  { week: "2026-08-17", chat: 9_800, image: 5_300 },
+  { week: "2026-08-24", chat: 11_600, image: 5_100 },
+  { week: "2026-08-31", chat: 12_300, image: 6_200 },
+  { week: "2026-09-07", chat: 12_900, image: 6_000 },
+];
+
+export default function CreditsUsage() {
+  return (
+    <AreaChart
+      title="Credits used per week"
+      data={weeks}
+      x="week"
+      xFormat="day"
+      series={[
+        { key: "chat", label: "Chat" },
+        { key: "image", label: "Image" },
+      ]}
+      format="compact"
+      stacked
+    />
+  );
+}

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

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/area-chart/storage.tsx
+import { AreaChart } from "@krizaka/charts/line";
+import { jsx } from "react/jsx-runtime";
+var days = [12.4, 12.9, 13.1, 13.8, 14.6, 14.9, 15.7, 16.2, 16.4, 17.3, 18.1, 18.6, 19.4, 20.2].map((gb, i) => ({
+  day: `2026-09-${String(i + 1).padStart(2, "0")}`,
+  gb
+}));
+function Storage() {
+  return /* @__PURE__ */ jsx(
+    AreaChart,
+    {
+      title: "Storage used",
+      data: days,
+      x: "day",
+      xFormat: "day",
+      y: "gb",
+      yLabel: "Storage",
+      format: { style: "unit", unit: "gigabyte" },
+      height: 220
+    }
+  );
+}
+export {
+  Storage as default
+};

package/registry/examples/area-chart/storage.tsx

@@ -0,0 +1,21 @@
+import { AreaChart } from "@krizaka/charts/line";
+
+const days = [12.4, 12.9, 13.1, 13.8, 14.6, 14.9, 15.7, 16.2, 16.4, 17.3, 18.1, 18.6, 19.4, 20.2].map((gb, i) => ({
+  day: `2026-09-${String(i + 1).padStart(2, "0")}`,
+  gb,
+}));
+
+export default function Storage() {
+  return (
+    <AreaChart
+      title="Storage used"
+      data={days}
+      x="day"
+      xFormat="day"
+      y="gb"
+      yLabel="Storage"
+      format={{ style: "unit", unit: "gigabyte" }}
+      height={220}
+    />
+  );
+}

package/registry/examples/bar-chart/jobs-by-status.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/bar-chart/jobs-by-status.js

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/bar-chart/jobs-by-status.tsx
+import { BarChart } from "@krizaka/charts/bar";
+import { jsx } from "react/jsx-runtime";
+var days = [
+  { day: "2026-10-05", completed: 1240, failed: 38, queued: 12 },
+  { day: "2026-10-06", completed: 1612, failed: 41, queued: 20 },
+  { day: "2026-10-07", completed: 1505, failed: 95, queued: 31 },
+  { day: "2026-10-08", completed: 1788, failed: 27, queued: 18 },
+  { day: "2026-10-09", completed: 1934, failed: 33, queued: 44 },
+  { day: "2026-10-10", completed: 1102, failed: 19, queued: 9 },
+  { day: "2026-10-11", completed: 986, failed: 12, queued: 63 }
+];
+function JobsByStatus() {
+  return /* @__PURE__ */ jsx(
+    BarChart,
+    {
+      title: "Jobs per day, by status",
+      description: "Orazaka \xB7 all workspaces",
+      data: days,
+      x: "day",
+      xFormat: "day",
+      series: [
+        { key: "completed", label: "Completed", color: "success" },
+        { key: "failed", label: "Failed", color: "danger" },
+        { key: "queued", label: "Queued", color: "neutral" }
+      ],
+      format: "integer",
+      stacked: true,
+      exportable: ["csv", "png"]
+    }
+  );
+}
+export {
+  JobsByStatus as default
+};

package/registry/examples/bar-chart/jobs-by-status.tsx

@@ -0,0 +1,31 @@
+import { BarChart } from "@krizaka/charts/bar";
+
+const days = [
+  { day: "2026-10-05", completed: 1_240, failed: 38, queued: 12 },
+  { day: "2026-10-06", completed: 1_612, failed: 41, queued: 20 },
+  { day: "2026-10-07", completed: 1_505, failed: 95, queued: 31 },
+  { day: "2026-10-08", completed: 1_788, failed: 27, queued: 18 },
+  { day: "2026-10-09", completed: 1_934, failed: 33, queued: 44 },
+  { day: "2026-10-10", completed: 1_102, failed: 19, queued: 9 },
+  { day: "2026-10-11", completed: 986, failed: 12, queued: 63 },
+];
+
+export default function JobsByStatus() {
+  return (
+    <BarChart
+      title="Jobs per day, by status"
+      description="Orazaka · all workspaces"
+      data={days}
+      x="day"
+      xFormat="day"
+      series={[
+        { key: "completed", label: "Completed", color: "success" },
+        { key: "failed", label: "Failed", color: "danger" },
+        { key: "queued", label: "Queued", color: "neutral" },
+      ]}
+      format="integer"
+      stacked
+      exportable={["csv", "png"]}
+    />
+  );
+}

package/registry/examples/bar-chart/native/jobs-by-status.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/bar-chart/native/jobs-by-status.js

@@ -0,0 +1,32 @@
+"use client";
+
+// registry/examples/bar-chart/native/jobs-by-status.tsx
+import { BarChart } from "@krizaka/charts/native";
+import { jsx } from "react/jsx-runtime";
+var days = [
+  { day: "2026-10-07", completed: 1505, failed: 95 },
+  { day: "2026-10-08", completed: 1788, failed: 27 },
+  { day: "2026-10-09", completed: 1934, failed: 33 },
+  { day: "2026-10-10", completed: 1102, failed: 19 },
+  { day: "2026-10-11", completed: 986, failed: 12 }
+];
+function JobsByStatus() {
+  return /* @__PURE__ */ jsx(
+    BarChart,
+    {
+      title: "Jobs per day",
+      data: days,
+      x: "day",
+      xFormat: "day",
+      series: [
+        { key: "completed", label: "Completed", color: "success" },
+        { key: "failed", label: "Failed", color: "danger" }
+      ],
+      format: "compact",
+      stacked: true
+    }
+  );
+}
+export {
+  JobsByStatus as default
+};

package/registry/examples/bar-chart/native/jobs-by-status.tsx

@@ -0,0 +1,26 @@
+import { BarChart } from "@krizaka/charts/native";
+
+const days = [
+  { day: "2026-10-07", completed: 1_505, failed: 95 },
+  { day: "2026-10-08", completed: 1_788, failed: 27 },
+  { day: "2026-10-09", completed: 1_934, failed: 33 },
+  { day: "2026-10-10", completed: 1_102, failed: 19 },
+  { day: "2026-10-11", completed: 986, failed: 12 },
+];
+
+export default function JobsByStatus() {
+  return (
+    <BarChart
+      title="Jobs per day"
+      data={days}
+      x="day"
+      xFormat="day"
+      series={[
+        { key: "completed", label: "Completed", color: "success" },
+        { key: "failed", label: "Failed", color: "danger" },
+      ]}
+      format="compact"
+      stacked
+    />
+  );
+}

package/registry/examples/bar-chart/plans-by-quarter.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/bar-chart/plans-by-quarter.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/bar-chart/plans-by-quarter.tsx
+import { BarChart } from "@krizaka/charts/bar";
+import { jsx } from "react/jsx-runtime";
+var quarters = [
+  { quarter: "Q4 2025", starter: 18, pro: 42, studio: 26 },
+  { quarter: "Q1 2026", starter: 21, pro: 51, studio: 34 },
+  { quarter: "Q2 2026", starter: 24, pro: 58, studio: 47 },
+  { quarter: "Q3 2026", starter: 22, pro: 66, studio: 61 }
+];
+function PlansByQuarter() {
+  return /* @__PURE__ */ jsx(
+    BarChart,
+    {
+      title: "Revenue per plan (k\u20AC)",
+      data: quarters,
+      x: "quarter",
+      xLabel: "Quarter",
+      series: [
+        { key: "starter", label: "Starter" },
+        { key: "pro", label: "Pro" },
+        { key: "studio", label: "Studio" }
+      ],
+      format: "integer"
+    }
+  );
+}
+export {
+  PlansByQuarter as default
+};

package/registry/examples/bar-chart/plans-by-quarter.tsx

@@ -0,0 +1,26 @@
+import { BarChart } from "@krizaka/charts/bar";
+
+// Thousands of euros per quarter.
+const quarters = [
+  { quarter: "Q4 2025", starter: 18, pro: 42, studio: 26 },
+  { quarter: "Q1 2026", starter: 21, pro: 51, studio: 34 },
+  { quarter: "Q2 2026", starter: 24, pro: 58, studio: 47 },
+  { quarter: "Q3 2026", starter: 22, pro: 66, studio: 61 },
+];
+
+export default function PlansByQuarter() {
+  return (
+    <BarChart
+      title="Revenue per plan (k€)"
+      data={quarters}
+      x="quarter"
+      xLabel="Quarter"
+      series={[
+        { key: "starter", label: "Starter" },
+        { key: "pro", label: "Pro" },
+        { key: "studio", label: "Studio" },
+      ]}
+      format="integer"
+    />
+  );
+}

package/registry/examples/bar-chart/top-supporters.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/bar-chart/top-supporters.js

@@ -0,0 +1,32 @@
+"use client";
+
+// registry/examples/bar-chart/top-supporters.tsx
+import { BarChart } from "@krizaka/charts/bar";
+import { jsx } from "react/jsx-runtime";
+var supporters = [
+  { name: "L\xE9a Fontaine", total: 48500 },
+  { name: "Marcus Oyelaran", total: 36200 },
+  { name: "Hana Watanabe", total: 29900 },
+  { name: "Tom\xE1s Ferreira-Lindqvist", total: 21400 },
+  { name: "Eric Dubois", total: 17800 },
+  { name: "Amira Haddad", total: 12050 }
+];
+function TopSupporters() {
+  return /* @__PURE__ */ jsx(
+    BarChart,
+    {
+      title: "Top supporters this quarter",
+      data: supporters,
+      x: "name",
+      xLabel: "Supporter",
+      y: "total",
+      yLabel: "Total",
+      format: { style: "money", currency: "EUR" },
+      horizontal: true,
+      height: 260
+    }
+  );
+}
+export {
+  TopSupporters as default
+};

package/registry/examples/bar-chart/top-supporters.tsx

@@ -0,0 +1,27 @@
+import { BarChart } from "@krizaka/charts/bar";
+
+// Cents, sorted by amount: a ranking reads top to bottom.
+const supporters = [
+  { name: "Léa Fontaine", total: 48_500 },
+  { name: "Marcus Oyelaran", total: 36_200 },
+  { name: "Hana Watanabe", total: 29_900 },
+  { name: "Tomás Ferreira-Lindqvist", total: 21_400 },
+  { name: "Eric Dubois", total: 17_800 },
+  { name: "Amira Haddad", total: 12_050 },
+];
+
+export default function TopSupporters() {
+  return (
+    <BarChart
+      title="Top supporters this quarter"
+      data={supporters}
+      x="name"
+      xLabel="Supporter"
+      y="total"
+      yLabel="Total"
+      format={{ style: "money", currency: "EUR" }}
+      horizontal
+      height={260}
+    />
+  );
+}

package/registry/examples/calendar-heatmap/publishing.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/calendar-heatmap/publishing.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/calendar-heatmap/publishing.tsx
+import { CalendarHeatmap } from "@krizaka/charts/heatmap";
+import { jsx } from "react/jsx-runtime";
+var days = Array.from({ length: 365 }, (_, i) => {
+  const date = new Date(Date.UTC(2025, 9, 12 + i));
+  const weekday = date.getUTCDay();
+  const summer = date.getUTCMonth() === 6;
+  const videos = summer ? 0 : [1, 3, 5].includes(weekday) ? 1 + i * 7 % 3 : i * 13 % 9 === 0 ? 1 : 0;
+  return { date: date.toISOString().slice(0, 10), videos };
+}).filter((d) => d.videos > 0);
+function Publishing() {
+  return /* @__PURE__ */ jsx(
+    CalendarHeatmap,
+    {
+      title: "Videos published, last 12 months",
+      data: days,
+      date: "date",
+      value: "videos",
+      format: "integer",
+      valueLabel: "Videos"
+    }
+  );
+}
+export {
+  Publishing as default
+};

package/registry/examples/calendar-heatmap/publishing.tsx

@@ -0,0 +1,23 @@
+import { CalendarHeatmap } from "@krizaka/charts/heatmap";
+
+// A deterministic year: a rhythm of three videos a week, a summer break, a busy autumn.
+const days = Array.from({ length: 365 }, (_, i) => {
+  const date = new Date(Date.UTC(2025, 9, 12 + i));
+  const weekday = date.getUTCDay();
+  const summer = date.getUTCMonth() === 6;
+  const videos = summer ? 0 : [1, 3, 5].includes(weekday) ? 1 + ((i * 7) % 3) : (i * 13) % 9 === 0 ? 1 : 0;
+  return { date: date.toISOString().slice(0, 10), videos };
+}).filter((d) => d.videos > 0);
+
+export default function Publishing() {
+  return (
+    <CalendarHeatmap
+      title="Videos published, last 12 months"
+      data={days}
+      date="date"
+      value="videos"
+      format="integer"
+      valueLabel="Videos"
+    />
+  );
+}

package/registry/examples/candlestick/auction-bids.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/candlestick/auction-bids.js

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/candlestick/auction-bids.tsx
+import { Candlestick } from "@krizaka/charts/candlestick";
+import { jsx } from "react/jsx-runtime";
+var price = 12e3;
+var hours = Array.from({ length: 24 }, (_, i) => {
+  const open = price;
+  const close = open + i * 37 % 23 * 60 - 480 + (i > 15 ? 900 : 0);
+  const high = Math.max(open, close) + i * 11 % 7 * 90;
+  const low = Math.min(open, close) - i * 5 % 6 * 70;
+  price = close;
+  return { at: `2026-10-11T${String(i).padStart(2, "0")}:00Z`, open, high, low, close, bids: 4 + i * 17 % 13 };
+});
+function AuctionBids() {
+  return /* @__PURE__ */ jsx(
+    Candlestick,
+    {
+      title: "\u201CNorthern lights over Tadoussac\u201D \u2014 bids per hour",
+      data: hours,
+      x: "at",
+      xFormat: "time",
+      open: "open",
+      high: "high",
+      low: "low",
+      close: "close",
+      volume: "bids",
+      volumeFormat: "integer",
+      format: { style: "money", currency: "CAD" },
+      thresholds: [{ value: 15e3, label: "Reserve price", tone: "warning" }],
+      columnLabels: { open: "Open", high: "High", low: "Low", close: "Close", volume: "Bids" }
+    }
+  );
+}
+export {
+  AuctionBids as default
+};

package/registry/examples/candlestick/auction-bids.tsx

@@ -0,0 +1,32 @@
+import { Candlestick } from "@krizaka/charts/candlestick";
+
+// Bids in cents per hour on an auctioned video; a deterministic walk.
+let price = 12_000;
+const hours = Array.from({ length: 24 }, (_, i) => {
+  const open = price;
+  const close = open + ((i * 37) % 23) * 60 - 480 + (i > 15 ? 900 : 0);
+  const high = Math.max(open, close) + ((i * 11) % 7) * 90;
+  const low = Math.min(open, close) - ((i * 5) % 6) * 70;
+  price = close;
+  return { at: `2026-10-11T${String(i).padStart(2, "0")}:00Z`, open, high, low, close, bids: 4 + ((i * 17) % 13) };
+});
+
+export default function AuctionBids() {
+  return (
+    <Candlestick
+      title="“Northern lights over Tadoussac” — bids per hour"
+      data={hours}
+      x="at"
+      xFormat="time"
+      open="open"
+      high="high"
+      low="low"
+      close="close"
+      volume="bids"
+      volumeFormat="integer"
+      format={{ style: "money", currency: "CAD" }}
+      thresholds={[{ value: 15_000, label: "Reserve price", tone: "warning" }]}
+      columnLabels={{ open: "Open", high: "High", low: "Low", close: "Close", volume: "Bids" }}
+    />
+  );
+}

package/registry/examples/chart/polar-uploads.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/chart/polar-uploads.js

@@ -0,0 +1,34 @@
+"use client";
+
+// registry/examples/chart/polar-uploads.tsx
+import { Chart } from "@krizaka/charts/chart";
+import { jsx } from "react/jsx-runtime";
+var 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];
+var hours = uploads.map((_, h) => `${String(h).padStart(2, "0")}:00`);
+var modules = async () => {
+  const [{ use: register }, { BarChart }, { PolarComponent, TooltipComponent }] = await Promise.all([import("echarts/core"), import("echarts/charts"), import("echarts/components")]);
+  register([BarChart, PolarComponent, TooltipComponent]);
+};
+function PolarUploads() {
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      title: "Uploads by hour of the day",
+      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
+    }
+  );
+}
+export {
+  PolarUploads as default
+};