@open-mercato/ui 0.6.4-develop.3944.1.4100aa7fbe → 0.6.4-develop.3949.1.adc3d0b3b1

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 Generated lucide registry with 136 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-[build:ui] found 356 entry points
+[build:ui] found 359 entry points
 [build:ui] built successfully

package/dist/backend/charts/BarChart.js

@@ -1,17 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  BarChart as RechartsBarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer
-} from "recharts";
+import dynamic from "next/dynamic";
 import { Spinner } from "@open-mercato/ui/primitives/spinner";
-import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
 function defaultValueFormatter(value) {
   if (Math.abs(value) >= 1e6) {
     return `${(value / 1e6).toFixed(1)}M`;
@@ -21,6 +11,10 @@ function defaultValueFormatter(value) {
   }
   return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
 }
+const BarChartImpl = dynamic(() => import("./BarChartImpl.js"), {
+  ssr: false,
+  loading: () => /* @__PURE__ */ jsx("div", { className: "flex h-40 sm:h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
+});
 function BarChart({
   title,
   data,
@@ -37,9 +31,6 @@ function BarChart({
   emptyMessage = "No data available",
   categoryLabels
 }) {
-  const getBarColor = (idx) => {
-    return resolveChartColor(colors?.[idx], idx);
-  };
   const hasWrapper = !!title;
   const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className;
   if (error) {
@@ -60,70 +51,22 @@ function BarChart({
       /* @__PURE__ */ jsx("div", { className: "flex h-40 sm:h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) })
     ] });
   }
-  const isHorizontal = layout === "horizontal";
-  const chartHeight = isHorizontal ? Math.max(200, data.length * 28) : 200;
-  const chartContent = /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: /* @__PURE__ */ jsxs(
-    RechartsBarChart,
-    {
-      data,
-      layout: isHorizontal ? "vertical" : "horizontal",
-      margin: { top: 5, right: 30, left: 20, bottom: 5 },
-      children: [
-        showGridLines && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
-        /* @__PURE__ */ jsx(
-          XAxis,
-          {
-            type: isHorizontal ? "number" : "category",
-            dataKey: isHorizontal ? void 0 : index,
-            tickFormatter: isHorizontal ? valueFormatter : void 0,
-            tick: { fontSize: 11 }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          YAxis,
-          {
-            type: isHorizontal ? "category" : "number",
-            dataKey: isHorizontal ? index : void 0,
-            tickFormatter: isHorizontal ? void 0 : valueFormatter,
-            width: isHorizontal ? 90 : 50,
-            interval: 0,
-            tick: { fontSize: 10 }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            content: /* @__PURE__ */ jsx(
-              ChartTooltipContent,
-              {
-                valueFormatter,
-                categoryLabels,
-                labelFormatter: (label, payload) => {
-                  const entry = payload?.[0];
-                  const item = entry?.payload;
-                  return item?.[index] ? String(item[index]) : label;
-                }
-              }
-            ),
-            cursor: { fill: "hsl(var(--muted))", opacity: 0.2 }
-          }
-        ),
-        showLegend && categories.length > 1 && /* @__PURE__ */ jsx(Legend, { verticalAlign: "top", height: 36 }),
-        categories.map((category, idx) => /* @__PURE__ */ jsx(
-          Bar,
-          {
-            dataKey: category,
-            fill: getBarColor(idx),
-            radius: isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]
-          },
-          category
-        ))
-      ]
-    }
-  ) });
   return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
     title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
-    chartContent
+    /* @__PURE__ */ jsx(
+      BarChartImpl,
+      {
+        data,
+        index,
+        categories,
+        colors,
+        layout,
+        valueFormatter,
+        showLegend,
+        showGridLines,
+        categoryLabels
+      }
+    )
   ] });
 }
 var BarChart_default = BarChart;

package/dist/backend/charts/BarChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/charts/BarChart.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  Legend,\n  ResponsiveContainer,\n} from 'recharts'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\n\nexport type BarChartDataItem = Record<string, string | number | null | undefined>\n\nexport type BarChartProps = {\n  title?: string\n  data: BarChartDataItem[]\n  index: string\n  categories: string[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  layout?: 'vertical' | 'horizontal'\n  valueFormatter?: (value: number) => string\n  showLegend?: boolean\n  showGridLines?: boolean\n  className?: string\n  emptyMessage?: string\n  categoryLabels?: Record<string, string>\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nexport function BarChart({\n  title,\n  data,\n  index,\n  categories,\n  loading,\n  error,\n  colors,\n  layout = 'vertical',\n  valueFormatter = defaultValueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  className = '',\n  emptyMessage = 'No data available',\n  categoryLabels,\n}: BarChartProps) {\n  const getBarColor = (idx: number): string => {\n    return resolveChartColor(colors?.[idx], idx)\n  }\n\n  const hasWrapper = !!title\n  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className\n\n  if (error) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-40 sm:h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-40 sm:h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-40 sm:h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  const isHorizontal = layout === 'horizontal'\n  const chartHeight = isHorizontal ? Math.max(200, data.length * 28) : 200\n\n  const chartContent = (\n    <ResponsiveContainer width=\"100%\" height={chartHeight}>\n        <RechartsBarChart\n          data={data}\n          layout={isHorizontal ? 'vertical' : 'horizontal'}\n          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}\n        >\n          {showGridLines && (\n            <CartesianGrid strokeDasharray=\"3 3\" stroke=\"hsl(var(--border))\" />\n          )}\n          <XAxis\n            type={isHorizontal ? 'number' : 'category'}\n            dataKey={isHorizontal ? undefined : index}\n            tickFormatter={isHorizontal ? valueFormatter : undefined}\n            tick={{ fontSize: 11 }}\n          />\n          <YAxis\n            type={isHorizontal ? 'category' : 'number'}\n            dataKey={isHorizontal ? index : undefined}\n            tickFormatter={isHorizontal ? undefined : valueFormatter}\n            width={isHorizontal ? 90 : 50}\n            interval={0}\n            tick={{ fontSize: 10 }}\n          />\n          <Tooltip\n            content={\n              <ChartTooltipContent\n                valueFormatter={valueFormatter}\n                categoryLabels={categoryLabels}\n                labelFormatter={(label, payload) => {\n                  const entry = payload?.[0] as { payload?: BarChartDataItem } | undefined\n                  const item = entry?.payload\n                  return item?.[index] ? String(item[index]) : label\n                }}\n              />\n            }\n            cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}\n          />\n          {showLegend && categories.length > 1 && (\n            <Legend verticalAlign=\"top\" height={36} />\n          )}\n          {categories.map((category, idx) => (\n            <Bar\n              key={category}\n              dataKey={category}\n              fill={getBarColor(idx)}\n              radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}\n            />\n          ))}\n        </RechartsBarChart>\n      </ResponsiveContainer>\n  )\n\n  return (\n    <div className={wrapperClass}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      {chartContent}\n    </div>\n  )\n}\n\nexport default BarChart\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport dynamic from 'next/dynamic'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\n\nexport type BarChartDataItem = Record<string, string | number | null | undefined>\n\nexport type BarChartProps = {\n  title?: string\n  data: BarChartDataItem[]\n  index: string\n  categories: string[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  layout?: 'vertical' | 'horizontal'\n  valueFormatter?: (value: number) => string\n  showLegend?: boolean\n  showGridLines?: boolean\n  className?: string\n  emptyMessage?: string\n  categoryLabels?: Record<string, string>\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nconst BarChartImpl = dynamic(() => import('./BarChartImpl'), {\n  ssr: false,\n  loading: () => (\n    <div className=\"flex h-40 sm:h-48 items-center justify-center\">\n      <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n    </div>\n  ),\n})\n\nexport function BarChart({\n  title,\n  data,\n  index,\n  categories,\n  loading,\n  error,\n  colors,\n  layout = 'vertical',\n  valueFormatter = defaultValueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  className = '',\n  emptyMessage = 'No data available',\n  categoryLabels,\n}: BarChartProps) {\n  const hasWrapper = !!title\n  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className\n\n  if (error) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-40 sm:h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-40 sm:h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-40 sm:h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={wrapperClass}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <BarChartImpl\n        data={data}\n        index={index}\n        categories={categories}\n        colors={colors}\n        layout={layout}\n        valueFormatter={valueFormatter}\n        showLegend={showLegend}\n        showGridLines={showGridLines}\n        categoryLabels={categoryLabels}\n      />\n    </div>\n  )\n}\n\nexport default BarChart\n"],
+  "mappings": ";AAuCM,cA0BA,YA1BA;AApCN,OAAO,aAAa;AACpB,SAAS,eAAe;AAqBxB,SAAS,sBAAsB,OAAuB;AACpD,MAAI,KAAK,IAAI,KAAK,KAAK,KAAW;AAChC,WAAO,IAAI,QAAQ,KAAW,QAAQ,CAAC,CAAC;AAAA,EAC1C;AACA,MAAI,KAAK,IAAI,KAAK,KAAK,KAAO;AAC5B,WAAO,IAAI,QAAQ,KAAO,QAAQ,CAAC,CAAC;AAAA,EACtC;AACA,SAAO,MAAM,eAAe,QAAW,EAAE,uBAAuB,EAAE,CAAC;AACrE;AAEA,MAAM,eAAe,QAAQ,MAAM,OAAO,gBAAgB,GAAG;AAAA,EAC3D,KAAK;AAAA,EACL,SAAS,MACP,oBAAC,SAAI,WAAU,iDACb,8BAAC,WAAQ,WAAU,iCAAgC,GACrD;AAEJ,CAAC;AAEM,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf;AACF,GAAkB;AAChB,QAAM,aAAa,CAAC,CAAC;AACrB,QAAM,eAAe,aAAa,iCAAiC,SAAS,KAAK;AAEjF,MAAI,OAAO;AACT,WACE,qBAAC,SAAI,WAAW,cACb;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,iDACb,8BAAC,OAAE,WAAU,4BAA4B,iBAAM,GACjD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,qBAAC,SAAI,WAAW,cACb;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,iDACb,8BAAC,WAAQ,WAAU,iCAAgC,GACrD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,CAAC,QAAQ,KAAK,WAAW,GAAG;AAC9B,WACE,qBAAC,SAAI,WAAW,cACb;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,iDACb,8BAAC,OAAE,WAAU,iCAAiC,wBAAa,GAC7D;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,cACb;AAAA,aAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,IACjF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,IAAO,mBAAQ;",
   "names": []
 }

package/dist/backend/charts/BarChartImpl.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from "recharts";
+import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
+function BarChartImpl({
+  data,
+  index,
+  categories,
+  colors,
+  layout = "vertical",
+  valueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  categoryLabels
+}) {
+  const isHorizontal = layout === "horizontal";
+  const chartHeight = isHorizontal ? Math.max(200, data.length * 28) : 200;
+  const getBarColor = (idx) => resolveChartColor(colors?.[idx], idx);
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: /* @__PURE__ */ jsxs(
+    RechartsBarChart,
+    {
+      data,
+      layout: isHorizontal ? "vertical" : "horizontal",
+      margin: { top: 5, right: 30, left: 20, bottom: 5 },
+      children: [
+        showGridLines && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            type: isHorizontal ? "number" : "category",
+            dataKey: isHorizontal ? void 0 : index,
+            tickFormatter: isHorizontal ? valueFormatter : void 0,
+            tick: { fontSize: 11 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            type: isHorizontal ? "category" : "number",
+            dataKey: isHorizontal ? index : void 0,
+            tickFormatter: isHorizontal ? void 0 : valueFormatter,
+            width: isHorizontal ? 90 : 50,
+            interval: 0,
+            tick: { fontSize: 10 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(
+              ChartTooltipContent,
+              {
+                valueFormatter,
+                categoryLabels,
+                labelFormatter: (label, payload) => {
+                  const entry = payload?.[0];
+                  const item = entry?.payload;
+                  return item?.[index] ? String(item[index]) : label;
+                }
+              }
+            ),
+            cursor: { fill: "hsl(var(--muted))", opacity: 0.2 }
+          }
+        ),
+        showLegend && categories.length > 1 && /* @__PURE__ */ jsx(Legend, { verticalAlign: "top", height: 36 }),
+        categories.map((category, idx) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: category,
+            fill: getBarColor(idx),
+            radius: isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]
+          },
+          category
+        ))
+      ]
+    }
+  ) });
+}
+export {
+  BarChartImpl as default
+};
+//# sourceMappingURL=BarChartImpl.js.map

package/dist/backend/charts/BarChartImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/BarChartImpl.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  Legend,\n  ResponsiveContainer,\n} from 'recharts'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\nimport type { BarChartDataItem, BarChartProps } from './BarChart'\n\ntype ImplProps = Pick<\n  BarChartProps,\n  | 'data'\n  | 'index'\n  | 'categories'\n  | 'colors'\n  | 'layout'\n  | 'valueFormatter'\n  | 'showLegend'\n  | 'showGridLines'\n  | 'categoryLabels'\n> & {\n  valueFormatter: (value: number) => string\n}\n\nexport default function BarChartImpl({\n  data,\n  index,\n  categories,\n  colors,\n  layout = 'vertical',\n  valueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  categoryLabels,\n}: ImplProps) {\n  const isHorizontal = layout === 'horizontal'\n  const chartHeight = isHorizontal ? Math.max(200, data.length * 28) : 200\n  const getBarColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={chartHeight}>\n      <RechartsBarChart\n        data={data}\n        layout={isHorizontal ? 'vertical' : 'horizontal'}\n        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}\n      >\n        {showGridLines && (\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"hsl(var(--border))\" />\n        )}\n        <XAxis\n          type={isHorizontal ? 'number' : 'category'}\n          dataKey={isHorizontal ? undefined : index}\n          tickFormatter={isHorizontal ? valueFormatter : undefined}\n          tick={{ fontSize: 11 }}\n        />\n        <YAxis\n          type={isHorizontal ? 'category' : 'number'}\n          dataKey={isHorizontal ? index : undefined}\n          tickFormatter={isHorizontal ? undefined : valueFormatter}\n          width={isHorizontal ? 90 : 50}\n          interval={0}\n          tick={{ fontSize: 10 }}\n        />\n        <Tooltip\n          content={\n            <ChartTooltipContent\n              valueFormatter={valueFormatter}\n              categoryLabels={categoryLabels}\n              labelFormatter={(label, payload) => {\n                const entry = payload?.[0] as { payload?: BarChartDataItem } | undefined\n                const item = entry?.payload\n                return item?.[index] ? String(item[index]) : label\n              }}\n            />\n          }\n          cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}\n        />\n        {showLegend && categories.length > 1 && (\n          <Legend verticalAlign=\"top\" height={36} />\n        )}\n        {categories.map((category, idx) => (\n          <Bar\n            key={category}\n            dataKey={category}\n            fill={getBarColor(idx)}\n            radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}\n          />\n        ))}\n      </RechartsBarChart>\n    </ResponsiveContainer>\n  )\n}\n"],
+  "mappings": ";AAgDM,SAMI,KANJ;AA7CN;AAAA,EACE,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,yBAAyB;AAkBxC,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB;AACF,GAAc;AACZ,QAAM,eAAe,WAAW;AAChC,QAAM,cAAc,eAAe,KAAK,IAAI,KAAK,KAAK,SAAS,EAAE,IAAI;AACrE,QAAM,cAAc,CAAC,QAAwB,kBAAkB,SAAS,GAAG,GAAG,GAAG;AAEjF,SACE,oBAAC,uBAAoB,OAAM,QAAO,QAAQ,aACxC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,eAAe,aAAa;AAAA,MACpC,QAAQ,EAAE,KAAK,GAAG,OAAO,IAAI,MAAM,IAAI,QAAQ,EAAE;AAAA,MAEhD;AAAA,yBACC,oBAAC,iBAAc,iBAAgB,OAAM,QAAO,sBAAqB;AAAA,QAEnE;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,WAAW;AAAA,YAChC,SAAS,eAAe,SAAY;AAAA,YACpC,eAAe,eAAe,iBAAiB;AAAA,YAC/C,MAAM,EAAE,UAAU,GAAG;AAAA;AAAA,QACvB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,aAAa;AAAA,YAClC,SAAS,eAAe,QAAQ;AAAA,YAChC,eAAe,eAAe,SAAY;AAAA,YAC1C,OAAO,eAAe,KAAK;AAAA,YAC3B,UAAU;AAAA,YACV,MAAM,EAAE,UAAU,GAAG;AAAA;AAAA,QACvB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SACE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,gBAAgB,CAAC,OAAO,YAAY;AAClC,wBAAM,QAAQ,UAAU,CAAC;AACzB,wBAAM,OAAO,OAAO;AACpB,yBAAO,OAAO,KAAK,IAAI,OAAO,KAAK,KAAK,CAAC,IAAI;AAAA,gBAC/C;AAAA;AAAA,YACF;AAAA,YAEF,QAAQ,EAAE,MAAM,qBAAqB,SAAS,IAAI;AAAA;AAAA,QACpD;AAAA,QACC,cAAc,WAAW,SAAS,KACjC,oBAAC,UAAO,eAAc,OAAM,QAAQ,IAAI;AAAA,QAEzC,WAAW,IAAI,CAAC,UAAU,QACzB;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS;AAAA,YACT,MAAM,YAAY,GAAG;AAAA,YACrB,QAAQ,eAAe,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA;AAAA,UAH5C;AAAA,QAIP,CACD;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;",
+  "names": []
+}

package/dist/backend/charts/LineChart.js

@@ -1,19 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  LineChart as RechartsLineChart,
-  AreaChart as RechartsAreaChart,
-  Line,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend
-} from "recharts";
+import dynamic from "next/dynamic";
 import { Spinner } from "@open-mercato/ui/primitives/spinner";
-import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
 function defaultValueFormatter(value) {
   if (Math.abs(value) >= 1e6) {
     return `${(value / 1e6).toFixed(1)}M`;
@@ -23,6 +11,10 @@ function defaultValueFormatter(value) {
   }
   return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
 }
+const LineChartImpl = dynamic(() => import("./LineChartImpl.js"), {
+  ssr: false,
+  loading: () => /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
+});
 function LineChart({
   title,
   data,
@@ -41,9 +33,6 @@ function LineChart({
   emptyMessage = "No data available",
   categoryLabels
 }) {
-  const getLineColor = (idx) => {
-    return resolveChartColor(colors?.[idx], idx);
-  };
   if (error) {
     return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
       title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
@@ -62,86 +51,24 @@ function LineChart({
       /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) })
     ] });
   }
-  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart;
   return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
     title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "h-52 w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-      ChartComponent,
+    /* @__PURE__ */ jsx("div", { className: "h-52 w-full", children: /* @__PURE__ */ jsx(
+      LineChartImpl,
       {
         data,
-        margin: { top: 5, right: 10, left: 10, bottom: 5 },
-        children: [
-          showGridLines && /* @__PURE__ */ jsx(
-            CartesianGrid,
-            {
-              strokeDasharray: "3 3",
-              stroke: "hsl(var(--border))"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            XAxis,
-            {
-              dataKey: index,
-              tick: { fontSize: 12 },
-              tickLine: false,
-              axisLine: false
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              tickFormatter: valueFormatter,
-              tick: { fontSize: 12 },
-              tickLine: false,
-              axisLine: false,
-              width: 56
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter, categoryLabels }),
-              cursor: { stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }
-            }
-          ),
-          showLegend && categories.length > 1 && /* @__PURE__ */ jsx(
-            Legend,
-            {
-              verticalAlign: "top",
-              height: 36,
-              formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
-            }
-          ),
-          showArea ? categories.map((category, idx) => /* @__PURE__ */ jsx(
-            Area,
-            {
-              type: curveType,
-              dataKey: category,
-              stroke: getLineColor(idx),
-              fill: getLineColor(idx),
-              fillOpacity: 0.2,
-              strokeWidth: 2,
-              connectNulls,
-              dot: false,
-              activeDot: { r: 4, strokeWidth: 0 }
-            },
-            category
-          )) : categories.map((category, idx) => /* @__PURE__ */ jsx(
-            Line,
-            {
-              type: curveType,
-              dataKey: category,
-              stroke: getLineColor(idx),
-              strokeWidth: 2,
-              connectNulls,
-              dot: false,
-              activeDot: { r: 4, strokeWidth: 0 }
-            },
-            category
-          ))
-        ]
+        index,
+        categories,
+        colors,
+        showArea,
+        valueFormatter,
+        showLegend,
+        showGridLines,
+        curveType,
+        connectNulls,
+        categoryLabels
       }
-    ) }) })
+    ) })
   ] });
 }
 var LineChart_default = LineChart;

package/dist/backend/charts/LineChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/charts/LineChart.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  LineChart as RechartsLineChart,\n  AreaChart as RechartsAreaChart,\n  Line,\n  Area,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\n\nexport type LineChartDataItem = Record<string, string | number | null | undefined>\n\nexport type LineChartProps = {\n  title?: string\n  data: LineChartDataItem[]\n  index: string\n  categories: string[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  showArea?: boolean\n  valueFormatter?: (value: number) => string\n  showLegend?: boolean\n  showGridLines?: boolean\n  curveType?: 'linear' | 'natural' | 'monotone' | 'step'\n  connectNulls?: boolean\n  className?: string\n  emptyMessage?: string\n  categoryLabels?: Record<string, string>\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nexport function LineChart({\n  title,\n  data,\n  index,\n  categories,\n  loading,\n  error,\n  colors,\n  showArea = false,\n  valueFormatter = defaultValueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  curveType = 'monotone',\n  connectNulls = true,\n  className = '',\n  emptyMessage = 'No data available',\n  categoryLabels,\n}: LineChartProps) {\n  const getLineColor = (idx: number): string => {\n    return resolveChartColor(colors?.[idx], idx)\n  }\n\n  if (error) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart\n\n  return (\n    <div className={`rounded-lg border bg-card p-4 ${className}`}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <div className=\"h-52 w-full\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ChartComponent\n            data={data}\n            margin={{ top: 5, right: 10, left: 10, bottom: 5 }}\n          >\n            {showGridLines && (\n              <CartesianGrid\n                strokeDasharray=\"3 3\"\n                stroke=\"hsl(var(--border))\"\n              />\n            )}\n            <XAxis\n              dataKey={index}\n              tick={{ fontSize: 12 }}\n              tickLine={false}\n              axisLine={false}\n            />\n            <YAxis\n              tickFormatter={valueFormatter}\n              tick={{ fontSize: 12 }}\n              tickLine={false}\n              axisLine={false}\n              width={56}\n            />\n            <Tooltip\n              content={<ChartTooltipContent valueFormatter={valueFormatter} categoryLabels={categoryLabels} />}\n              cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }}\n            />\n            {showLegend && categories.length > 1 && (\n              <Legend\n                verticalAlign=\"top\"\n                height={36}\n                formatter={(value) => (\n                  <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>\n                )}\n              />\n            )}\n            {showArea\n              ? categories.map((category, idx) => (\n                  <Area\n                    key={category}\n                    type={curveType}\n                    dataKey={category}\n                    stroke={getLineColor(idx)}\n                    fill={getLineColor(idx)}\n                    fillOpacity={0.2}\n                    strokeWidth={2}\n                    connectNulls={connectNulls}\n                    dot={false}\n                    activeDot={{ r: 4, strokeWidth: 0 }}\n                  />\n                ))\n              : categories.map((category, idx) => (\n                  <Line\n                    key={category}\n                    type={curveType}\n                    dataKey={category}\n                    stroke={getLineColor(idx)}\n                    strokeWidth={2}\n                    connectNulls={connectNulls}\n                    dot={false}\n                    activeDot={{ r: 4, strokeWidth: 0 }}\n                  />\n                ))}\n          </ChartComponent>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  )\n}\n\nexport default LineChart\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport dynamic from 'next/dynamic'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\n\nexport type LineChartDataItem = Record<string, string | number | null | undefined>\n\nexport type LineChartProps = {\n  title?: string\n  data: LineChartDataItem[]\n  index: string\n  categories: string[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  showArea?: boolean\n  valueFormatter?: (value: number) => string\n  showLegend?: boolean\n  showGridLines?: boolean\n  curveType?: 'linear' | 'natural' | 'monotone' | 'step'\n  connectNulls?: boolean\n  className?: string\n  emptyMessage?: string\n  categoryLabels?: Record<string, string>\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nconst LineChartImpl = dynamic(() => import('./LineChartImpl'), {\n  ssr: false,\n  loading: () => (\n    <div className=\"flex h-48 items-center justify-center\">\n      <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n    </div>\n  ),\n})\n\nexport function LineChart({\n  title,\n  data,\n  index,\n  categories,\n  loading,\n  error,\n  colors,\n  showArea = false,\n  valueFormatter = defaultValueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  curveType = 'monotone',\n  connectNulls = true,\n  className = '',\n  emptyMessage = 'No data available',\n  categoryLabels,\n}: LineChartProps) {\n  if (error) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={`rounded-lg border bg-card p-4 ${className}`}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <div className=\"h-52 w-full\">\n        <LineChartImpl\n          data={data}\n          index={index}\n          categories={categories}\n          colors={colors}\n          showArea={showArea}\n          valueFormatter={valueFormatter}\n          showLegend={showLegend}\n          showGridLines={showGridLines}\n          curveType={curveType}\n          connectNulls={connectNulls}\n          categoryLabels={categoryLabels}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default LineChart\n"],
+  "mappings": ";AAyCM,cAyBA,YAzBA;AAtCN,OAAO,aAAa;AACpB,SAAS,eAAe;AAuBxB,SAAS,sBAAsB,OAAuB;AACpD,MAAI,KAAK,IAAI,KAAK,KAAK,KAAW;AAChC,WAAO,IAAI,QAAQ,KAAW,QAAQ,CAAC,CAAC;AAAA,EAC1C;AACA,MAAI,KAAK,IAAI,KAAK,KAAK,KAAO;AAC5B,WAAO,IAAI,QAAQ,KAAO,QAAQ,CAAC,CAAC;AAAA,EACtC;AACA,SAAO,MAAM,eAAe,QAAW,EAAE,uBAAuB,EAAE,CAAC;AACrE;AAEA,MAAM,gBAAgB,QAAQ,MAAM,OAAO,iBAAiB,GAAG;AAAA,EAC7D,KAAK;AAAA,EACL,SAAS,MACP,oBAAC,SAAI,WAAU,yCACb,8BAAC,WAAQ,WAAU,iCAAgC,GACrD;AAEJ,CAAC;AAEM,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,eAAe;AAAA,EACf;AACF,GAAmB;AACjB,MAAI,OAAO;AACT,WACE,qBAAC,SAAI,WAAW,iCAAiC,SAAS,IACvD;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,OAAE,WAAU,4BAA4B,iBAAM,GACjD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,qBAAC,SAAI,WAAW,iCAAiC,SAAS,IACvD;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,WAAQ,WAAU,iCAAgC,GACrD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,CAAC,QAAQ,KAAK,WAAW,GAAG;AAC9B,WACE,qBAAC,SAAI,WAAW,iCAAiC,SAAS,IACvD;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,OAAE,WAAU,iCAAiC,wBAAa,GAC7D;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,iCAAiC,SAAS,IACvD;AAAA,aAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,IACjF,oBAAC,SAAI,WAAU,eACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,oBAAQ;",
   "names": []
 }

package/dist/backend/charts/LineChartImpl.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  LineChart as RechartsLineChart,
+  AreaChart as RechartsAreaChart,
+  Line,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend
+} from "recharts";
+import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
+function LineChartImpl({
+  data,
+  index,
+  categories,
+  colors,
+  showArea = false,
+  valueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  curveType = "monotone",
+  connectNulls = true,
+  categoryLabels
+}) {
+  const getLineColor = (idx) => resolveChartColor(colors?.[idx], idx);
+  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart;
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+    ChartComponent,
+    {
+      data,
+      margin: { top: 5, right: 10, left: 10, bottom: 5 },
+      children: [
+        showGridLines && /* @__PURE__ */ jsx(
+          CartesianGrid,
+          {
+            strokeDasharray: "3 3",
+            stroke: "hsl(var(--border))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: index,
+            tick: { fontSize: 12 },
+            tickLine: false,
+            axisLine: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            tickFormatter: valueFormatter,
+            tick: { fontSize: 12 },
+            tickLine: false,
+            axisLine: false,
+            width: 56
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter, categoryLabels }),
+            cursor: { stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }
+          }
+        ),
+        showLegend && categories.length > 1 && /* @__PURE__ */ jsx(
+          Legend,
+          {
+            verticalAlign: "top",
+            height: 36,
+            formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
+          }
+        ),
+        showArea ? categories.map((category, idx) => /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: curveType,
+            dataKey: category,
+            stroke: getLineColor(idx),
+            fill: getLineColor(idx),
+            fillOpacity: 0.2,
+            strokeWidth: 2,
+            connectNulls,
+            dot: false,
+            activeDot: { r: 4, strokeWidth: 0 }
+          },
+          category
+        )) : categories.map((category, idx) => /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: curveType,
+            dataKey: category,
+            stroke: getLineColor(idx),
+            strokeWidth: 2,
+            connectNulls,
+            dot: false,
+            activeDot: { r: 4, strokeWidth: 0 }
+          },
+          category
+        ))
+      ]
+    }
+  ) });
+}
+export {
+  LineChartImpl as default
+};
+//# sourceMappingURL=LineChartImpl.js.map

package/dist/backend/charts/LineChartImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/LineChartImpl.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  LineChart as RechartsLineChart,\n  AreaChart as RechartsAreaChart,\n  Line,\n  Area,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\nimport type { LineChartProps } from './LineChart'\n\ntype ImplProps = Pick<\n  LineChartProps,\n  | 'data'\n  | 'index'\n  | 'categories'\n  | 'colors'\n  | 'showArea'\n  | 'valueFormatter'\n  | 'showLegend'\n  | 'showGridLines'\n  | 'curveType'\n  | 'connectNulls'\n  | 'categoryLabels'\n> & {\n  valueFormatter: (value: number) => string\n}\n\nexport default function LineChartImpl({\n  data,\n  index,\n  categories,\n  colors,\n  showArea = false,\n  valueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  curveType = 'monotone',\n  connectNulls = true,\n  categoryLabels,\n}: ImplProps) {\n  const getLineColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)\n  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <ChartComponent\n        data={data}\n        margin={{ top: 5, right: 10, left: 10, bottom: 5 }}\n      >\n        {showGridLines && (\n          <CartesianGrid\n            strokeDasharray=\"3 3\"\n            stroke=\"hsl(var(--border))\"\n          />\n        )}\n        <XAxis\n          dataKey={index}\n          tick={{ fontSize: 12 }}\n          tickLine={false}\n          axisLine={false}\n        />\n        <YAxis\n          tickFormatter={valueFormatter}\n          tick={{ fontSize: 12 }}\n          tickLine={false}\n          axisLine={false}\n          width={56}\n        />\n        <Tooltip\n          content={<ChartTooltipContent valueFormatter={valueFormatter} categoryLabels={categoryLabels} />}\n          cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }}\n        />\n        {showLegend && categories.length > 1 && (\n          <Legend\n            verticalAlign=\"top\"\n            height={36}\n            formatter={(value) => (\n              <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>\n            )}\n          />\n        )}\n        {showArea\n          ? categories.map((category, idx) => (\n              <Area\n                key={category}\n                type={curveType}\n                dataKey={category}\n                stroke={getLineColor(idx)}\n                fill={getLineColor(idx)}\n                fillOpacity={0.2}\n                strokeWidth={2}\n                connectNulls={connectNulls}\n                dot={false}\n                activeDot={{ r: 4, strokeWidth: 0 }}\n              />\n            ))\n          : categories.map((category, idx) => (\n              <Line\n                key={category}\n                type={curveType}\n                dataKey={category}\n                stroke={getLineColor(idx)}\n                strokeWidth={2}\n                connectNulls={connectNulls}\n                dot={false}\n                activeDot={{ r: 4, strokeWidth: 0 }}\n              />\n            ))}\n      </ChartComponent>\n    </ResponsiveContainer>\n  )\n}\n"],
+  "mappings": ";AAqDM,SAKI,KALJ;AAlDN;AAAA,EACE,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,yBAAyB;AAoBxC,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf;AACF,GAAc;AACZ,QAAM,eAAe,CAAC,QAAwB,kBAAkB,SAAS,GAAG,GAAG,GAAG;AAClF,QAAM,iBAAiB,WAAW,oBAAoB;AAEtD,SACE,oBAAC,uBAAoB,OAAM,QAAO,QAAO,QACvC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,EAAE,KAAK,GAAG,OAAO,IAAI,MAAM,IAAI,QAAQ,EAAE;AAAA,MAEhD;AAAA,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAgB;AAAA,YAChB,QAAO;AAAA;AAAA,QACT;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,MAAM,EAAE,UAAU,GAAG;AAAA,YACrB,UAAU;AAAA,YACV,UAAU;AAAA;AAAA,QACZ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAe;AAAA,YACf,MAAM,EAAE,UAAU,GAAG;AAAA,YACrB,UAAU;AAAA,YACV,UAAU;AAAA,YACV,OAAO;AAAA;AAAA,QACT;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,oBAAC,uBAAoB,gBAAgC,gBAAgC;AAAA,YAC9F,QAAQ,EAAE,QAAQ,gCAAgC,iBAAiB,MAAM;AAAA;AAAA,QAC3E;AAAA,QACC,cAAc,WAAW,SAAS,KACjC;AAAA,UAAC;AAAA;AAAA,YACC,eAAc;AAAA,YACd,QAAQ;AAAA,YACR,WAAW,CAAC,UACV,oBAAC,UAAK,OAAO,EAAE,OAAO,gCAAgC,UAAU,OAAO,GAAI,iBAAM;AAAA;AAAA,QAErF;AAAA,QAED,WACG,WAAW,IAAI,CAAC,UAAU,QACxB;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YACN,SAAS;AAAA,YACT,QAAQ,aAAa,GAAG;AAAA,YACxB,MAAM,aAAa,GAAG;AAAA,YACtB,aAAa;AAAA,YACb,aAAa;AAAA,YACb;AAAA,YACA,KAAK;AAAA,YACL,WAAW,EAAE,GAAG,GAAG,aAAa,EAAE;AAAA;AAAA,UAT7B;AAAA,QAUP,CACD,IACD,WAAW,IAAI,CAAC,UAAU,QACxB;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YACN,SAAS;AAAA,YACT,QAAQ,aAAa,GAAG;AAAA,YACxB,aAAa;AAAA,YACb;AAAA,YACA,KAAK;AAAA,YACL,WAAW,EAAE,GAAG,GAAG,aAAa,EAAE;AAAA;AAAA,UAP7B;AAAA,QAQP,CACD;AAAA;AAAA;AAAA,EACP,GACF;AAEJ;",
+  "names": []
+}