@freighttech/ui 0.13.18

package/dist/backend/charts/BarChart.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ReferenceLine,
+  ResponsiveContainer
+} from "recharts";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
+function defaultValueFormatter(value) {
+  if (Math.abs(value) >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (Math.abs(value) >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+}
+function BarChart({
+  title,
+  data,
+  index,
+  categories,
+  loading,
+  error,
+  colors,
+  layout = "vertical",
+  valueFormatter = defaultValueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  className = "",
+  emptyMessage = "No data available",
+  categoryLabels,
+  getBarColor,
+  stacked = false,
+  referenceLines
+}) {
+  const getSeriesColor = (idx) => {
+    return resolveChartColor(colors?.[idx], idx);
+  };
+  const hasWrapper = !!title;
+  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className;
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-40 sm:h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }) })
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__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" }) })
+    ] });
+  }
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__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 }),
+        referenceLines?.map((ref, refIdx) => /* @__PURE__ */ jsx(
+          ReferenceLine,
+          {
+            ...ref.axis === "x" ? { x: ref.value } : { y: ref.value },
+            stroke: ref.color ?? "hsl(var(--muted-foreground))",
+            strokeDasharray: ref.dashed ? "6 3" : void 0,
+            label: ref.label ? { value: ref.label, fontSize: 10 } : void 0
+          },
+          `ref-${refIdx}`
+        )),
+        categories.map((category, idx) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: category,
+            fill: getSeriesColor(idx),
+            radius: isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0],
+            ...stacked ? { stackId: "bar" } : {},
+            children: getBarColor && data.map((datum, dIdx) => {
+              const color = getBarColor(datum, dIdx);
+              return /* @__PURE__ */ jsx(Cell, { fill: color ?? getSeriesColor(idx) }, `cell-${dIdx}`);
+            })
+          },
+          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
+  ] });
+}
+var BarChart_default = BarChart;
+export {
+  BarChart,
+  BarChart_default as default
+};
+//# sourceMappingURL=BarChart.js.map

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

@@ -0,0 +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  Cell,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  Legend,\n  ReferenceLine,\n  ResponsiveContainer,\n} from 'recharts'\nimport { Spinner } from '@freighttech/ui/primitives/spinner'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\n\nexport type BarChartDataItem = Record<string, string | number | null | undefined>\n\n/** A target/zero plotLine parallel to one axis (e.g. margin target, zero baseline). */\nexport type BarChartReferenceLine = {\n  axis: 'x' | 'y'\n  value: number\n  label?: string\n  color?: string\n  dashed?: boolean\n}\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   * Per-datum bar color. When provided, single-category bars render a `<Cell>`\n   * per datum so colors can encode sign/threshold (e.g. loss red / profit green,\n   * overdue-age buckets). Returning `undefined` falls back to the series color.\n   */\n  getBarColor?: (datum: BarChartDataItem, index: number) => string | undefined\n  /** Stack the series via a shared stackId (e.g. margin-distribution histogram). */\n  stacked?: boolean\n  /** Axis-parallel reference lines (target / zero plotLine). */\n  referenceLines?: BarChartReferenceLine[]\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  getBarColor,\n  stacked = false,\n  referenceLines,\n}: BarChartProps) {\n  const getSeriesColor = (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          {referenceLines?.map((ref, refIdx) => (\n            <ReferenceLine\n              key={`ref-${refIdx}`}\n              {...(ref.axis === 'x' ? { x: ref.value } : { y: ref.value })}\n              stroke={ref.color ?? 'hsl(var(--muted-foreground))'}\n              strokeDasharray={ref.dashed ? '6 3' : undefined}\n              label={ref.label ? { value: ref.label, fontSize: 10 } : undefined}\n            />\n          ))}\n          {categories.map((category, idx) => (\n            <Bar\n              key={category}\n              dataKey={category}\n              fill={getSeriesColor(idx)}\n              radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}\n              {...(stacked ? { stackId: 'bar' } : {})}\n            >\n              {getBarColor &&\n                data.map((datum, dIdx) => {\n                  const color = getBarColor(datum, dIdx)\n                  return (\n                    <Cell key={`cell-${dIdx}`} fill={color ?? getSeriesColor(idx)} />\n                  )\n                })}\n            </Bar>\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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",
+  "names": []
+}

package/dist/backend/charts/ChartUtils.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createContext, useContext } from "react";
+const ChartContext = createContext(null);
+function useChart() {
+  const context = useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a ChartContainer");
+  }
+  return context;
+}
+function ChartContainer({
+  config,
+  children,
+  className,
+  ...props
+}) {
+  const configId = React.useId();
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-chart": configId,
+      className,
+      ...props,
+      style: {
+        ...props.style,
+        "--color-chart-1": "var(--chart-1)",
+        "--color-chart-2": "var(--chart-2)",
+        "--color-chart-3": "var(--chart-3)",
+        "--color-chart-4": "var(--chart-4)",
+        "--color-chart-5": "var(--chart-5)",
+        ...Object.entries(config).reduce(
+          (acc, [key, value]) => {
+            if (value.color) {
+              acc[`--color-${key}`] = value.color;
+            }
+            return acc;
+          },
+          {}
+        )
+      },
+      children
+    }
+  ) });
+}
+function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  labelFormatter,
+  valueFormatter = (value) => value.toLocaleString(),
+  hideLabel = false,
+  indicator = "dot",
+  nameKey,
+  categoryLabels
+}) {
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-popover px-3 py-2 text-popover-foreground shadow-md", children: [
+    !hideLabel && label && /* @__PURE__ */ jsx("div", { className: "mb-1 text-sm font-medium", children: labelFormatter ? labelFormatter(label, payload) : label }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: payload.filter((item) => {
+      const key = String(item.dataKey ?? "");
+      return !key.startsWith("__");
+    }).map((item, index) => {
+      const rawName = nameKey && item.payload ? String(item.payload[nameKey]) : item.name;
+      const name = categoryLabels?.[rawName] ?? rawName;
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          indicator === "dot" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-2.5 w-2.5 shrink-0 rounded-full",
+              style: { backgroundColor: item.color }
+            }
+          ),
+          indicator === "line" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-0.5 w-3 shrink-0 rounded-full",
+              style: { backgroundColor: item.color }
+            }
+          ),
+          indicator === "dashed" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-0.5 w-3 shrink-0 rounded-full border-t-2 border-dashed",
+              style: { borderColor: item.color }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: name })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium tabular-nums", children: valueFormatter(item.value) })
+      ] }, index);
+    }) })
+  ] });
+}
+const CHART_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+const NAMED_COLORS = {
+  blue: "var(--chart-blue)",
+  emerald: "var(--chart-emerald)",
+  amber: "var(--chart-amber)",
+  rose: "var(--chart-rose)",
+  violet: "var(--chart-violet)",
+  cyan: "var(--chart-cyan)",
+  indigo: "var(--chart-indigo)",
+  pink: "var(--chart-pink)",
+  teal: "var(--chart-teal)",
+  orange: "var(--chart-orange)"
+};
+function getChartColor(index) {
+  return CHART_COLORS[index % CHART_COLORS.length];
+}
+function resolveChartColor(color, index) {
+  if (color) {
+    if (NAMED_COLORS[color]) {
+      return NAMED_COLORS[color];
+    }
+    if (/^(#|rgb|hsl|var\()/i.test(color)) {
+      return color;
+    }
+  }
+  return CHART_COLORS[index % CHART_COLORS.length];
+}
+export {
+  CHART_COLORS,
+  ChartContainer,
+  ChartTooltipContent,
+  NAMED_COLORS,
+  getChartColor,
+  resolveChartColor,
+  useChart
+};
+//# sourceMappingURL=ChartUtils.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/ChartUtils.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { createContext, useContext } from 'react'\n\nexport type ChartConfig = {\n  [key: string]: {\n    label?: string\n    color?: string\n  }\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = createContext<ChartContextProps | null>(null)\n\nexport function useChart() {\n  const context = useContext(ChartContext)\n  if (!context) {\n    throw new Error('useChart must be used within a ChartContainer')\n  }\n  return context\n}\n\ninterface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  config: ChartConfig\n  children: React.ReactNode\n}\n\nexport function ChartContainer({\n  config,\n  children,\n  className,\n  ...props\n}: ChartContainerProps) {\n  const configId = React.useId()\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={configId}\n        className={className}\n        {...props}\n        style={\n          {\n            ...props.style,\n            '--color-chart-1': 'var(--chart-1)',\n            '--color-chart-2': 'var(--chart-2)',\n            '--color-chart-3': 'var(--chart-3)',\n            '--color-chart-4': 'var(--chart-4)',\n            '--color-chart-5': 'var(--chart-5)',\n            ...Object.entries(config).reduce(\n              (acc, [key, value]) => {\n                if (value.color) {\n                  acc[`--color-${key}`] = value.color\n                }\n                return acc\n              },\n              {} as Record<string, string>\n            ),\n          } as React.CSSProperties\n        }\n      >\n        {children}\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\ninterface ChartTooltipContentProps {\n  active?: boolean\n  payload?: Array<{\n    name: string\n    value: number\n    color?: string\n    dataKey?: string\n    payload?: Record<string, unknown>\n  }>\n  label?: string\n  labelFormatter?: (label: string, payload: unknown[]) => React.ReactNode\n  valueFormatter?: (value: number) => string\n  hideLabel?: boolean\n  indicator?: 'line' | 'dot' | 'dashed'\n  nameKey?: string\n  categoryLabels?: Record<string, string>\n}\n\nexport function ChartTooltipContent({\n  active,\n  payload,\n  label,\n  labelFormatter,\n  valueFormatter = (value) => value.toLocaleString(),\n  hideLabel = false,\n  indicator = 'dot',\n  nameKey,\n  categoryLabels,\n}: ChartTooltipContentProps) {\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  return (\n    <div className=\"rounded-lg border bg-popover px-3 py-2 text-popover-foreground shadow-md\">\n      {!hideLabel && label && (\n        <div className=\"mb-1 text-sm font-medium\">\n          {labelFormatter ? labelFormatter(label, payload) : label}\n        </div>\n      )}\n      <div className=\"flex flex-col gap-1\">\n        {payload\n          // Hide internal helper series (e.g. ComboChart's forecast-band base/span\n          // carriers keyed \"__bandBase__\"/\"__bandSpan__\") from the tooltip.\n          .filter((item) => {\n            const key = String((item as { dataKey?: unknown }).dataKey ?? '')\n            return !key.startsWith('__')\n          })\n          .map((item, index) => {\n          const rawName = nameKey && item.payload ? String(item.payload[nameKey]) : item.name\n          const name = categoryLabels?.[rawName] ?? rawName\n          return (\n            <div key={index} className=\"flex items-center justify-between gap-8\">\n              <div className=\"flex items-center gap-2\">\n                {indicator === 'dot' && (\n                  <span\n                    className=\"h-2.5 w-2.5 shrink-0 rounded-full\"\n                    style={{ backgroundColor: item.color }}\n                  />\n                )}\n                {indicator === 'line' && (\n                  <span\n                    className=\"h-0.5 w-3 shrink-0 rounded-full\"\n                    style={{ backgroundColor: item.color }}\n                  />\n                )}\n                {indicator === 'dashed' && (\n                  <span\n                    className=\"h-0.5 w-3 shrink-0 rounded-full border-t-2 border-dashed\"\n                    style={{ borderColor: item.color }}\n                  />\n                )}\n                <span className=\"text-sm text-muted-foreground\">{name}</span>\n              </div>\n              <span className=\"text-sm font-medium tabular-nums\">\n                {valueFormatter(item.value)}\n              </span>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport const CHART_COLORS = [\n  'var(--chart-1)',\n  'var(--chart-2)',\n  'var(--chart-3)',\n  'var(--chart-4)',\n  'var(--chart-5)',\n] as const\n\nexport const NAMED_COLORS: Record<string, string> = {\n  blue: 'var(--chart-blue)',\n  emerald: 'var(--chart-emerald)',\n  amber: 'var(--chart-amber)',\n  rose: 'var(--chart-rose)',\n  violet: 'var(--chart-violet)',\n  cyan: 'var(--chart-cyan)',\n  indigo: 'var(--chart-indigo)',\n  pink: 'var(--chart-pink)',\n  teal: 'var(--chart-teal)',\n  orange: 'var(--chart-orange)',\n}\n\nexport function getChartColor(index: number): string {\n  return CHART_COLORS[index % CHART_COLORS.length]\n}\n\nexport function resolveChartColor(color: string | undefined, index: number): string {\n  if (color) {\n    if (NAMED_COLORS[color]) {\n      return NAMED_COLORS[color]\n    }\n    // Honor a literal CSS color (hex, rgb/rgba, hsl/hsla, or a var() token) so\n    // callers can pass bespoke palette colors (e.g. the PoC navy/plan-grey)\n    // instead of only the named-token set. Without this a raw hex falls through\n    // to the default palette and the caller's color is silently ignored.\n    if (/^(#|rgb|hsl|var\\()/i.test(color)) {\n      return color\n    }\n  }\n  return CHART_COLORS[index % CHART_COLORS.length]\n}\n"],
+  "mappings": ";AAyCM,cAmFQ,YAnFR;AAvCN,YAAY,WAAW;AACvB,SAAS,eAAe,kBAAkB;AAa1C,MAAM,eAAe,cAAwC,IAAI;AAE1D,SAAS,WAAW;AACzB,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,+CAA+C;AAAA,EACjE;AACA,SAAO;AACT;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,WAAW,MAAM,MAAM;AAE7B,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,OAAO,GACrC;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACJ,OACE;AAAA,QACE,GAAG,MAAM;AAAA,QACT,mBAAmB;AAAA,QACnB,mBAAmB;AAAA,QACnB,mBAAmB;AAAA,QACnB,mBAAmB;AAAA,QACnB,mBAAmB;AAAA,QACnB,GAAG,OAAO,QAAQ,MAAM,EAAE;AAAA,UACxB,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACrB,gBAAI,MAAM,OAAO;AACf,kBAAI,WAAW,GAAG,EAAE,IAAI,MAAM;AAAA,YAChC;AACA,mBAAO;AAAA,UACT;AAAA,UACA,CAAC;AAAA,QACH;AAAA,MACF;AAAA,MAGD;AAAA;AAAA,EACH,GACF;AAEJ;AAoBO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAAA,EACjD,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAA6B;AAC3B,MAAI,CAAC,UAAU,CAAC,SAAS,QAAQ;AAC/B,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,SAAI,WAAU,4EACZ;AAAA,KAAC,aAAa,SACb,oBAAC,SAAI,WAAU,4BACZ,2BAAiB,eAAe,OAAO,OAAO,IAAI,OACrD;AAAA,IAEF,oBAAC,SAAI,WAAU,uBACZ,kBAGE,OAAO,CAAC,SAAS;AAChB,YAAM,MAAM,OAAQ,KAA+B,WAAW,EAAE;AAChE,aAAO,CAAC,IAAI,WAAW,IAAI;AAAA,IAC7B,CAAC,EACA,IAAI,CAAC,MAAM,UAAU;AACtB,YAAM,UAAU,WAAW,KAAK,UAAU,OAAO,KAAK,QAAQ,OAAO,CAAC,IAAI,KAAK;AAC/E,YAAM,OAAO,iBAAiB,OAAO,KAAK;AAC1C,aACE,qBAAC,SAAgB,WAAU,2CACzB;AAAA,6BAAC,SAAI,WAAU,2BACZ;AAAA,wBAAc,SACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;AAAA;AAAA,UACvC;AAAA,UAED,cAAc,UACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;AAAA;AAAA,UACvC;AAAA,UAED,cAAc,YACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,aAAa,KAAK,MAAM;AAAA;AAAA,UACnC;AAAA,UAEF,oBAAC,UAAK,WAAU,iCAAiC,gBAAK;AAAA,WACxD;AAAA,QACA,oBAAC,UAAK,WAAU,oCACb,yBAAe,KAAK,KAAK,GAC5B;AAAA,WAxBQ,KAyBV;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;AAEO,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,eAAuC;AAAA,EAClD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AACV;AAEO,SAAS,cAAc,OAAuB;AACnD,SAAO,aAAa,QAAQ,aAAa,MAAM;AACjD;AAEO,SAAS,kBAAkB,OAA2B,OAAuB;AAClF,MAAI,OAAO;AACT,QAAI,aAAa,KAAK,GAAG;AACvB,aAAO,aAAa,KAAK;AAAA,IAC3B;AAKA,QAAI,sBAAsB,KAAK,KAAK,GAAG;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO,aAAa,QAAQ,aAAa,MAAM;AACjD;",
+  "names": []
+}

package/dist/backend/charts/ComboChart.js

@@ -0,0 +1,261 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ComposedChart,
+  Bar,
+  Cell,
+  Line,
+  Area,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  ReferenceLine
+} from "recharts";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
+const DASH_MAP = {
+  solid: void 0,
+  ShortDash: "6 3",
+  Dash: "8 5",
+  Dot: "2 4"
+};
+const BAND_BASE_KEY = "__bandBase__";
+const BAND_SPAN_KEY = "__bandSpan__";
+function defaultFormatter(value) {
+  if (Math.abs(value) >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+  if (Math.abs(value) >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+  return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+}
+function ComboChart({
+  title,
+  data,
+  index,
+  series,
+  band,
+  markers,
+  leftFormatter = defaultFormatter,
+  rightFormatter = defaultFormatter,
+  rightDomain,
+  referenceY,
+  showLegend = true,
+  loading,
+  error,
+  emptyMessage = "No data available",
+  className = "",
+  categoryLabels
+}) {
+  const wrapperClass = `rounded-lg border bg-card p-4 ${className}`;
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }) })
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
+    ] });
+  }
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) })
+    ] });
+  }
+  const hasRightAxis = series.some((s) => s.yAxis === "right");
+  const chartData = React.useMemo(() => {
+    if (!band) return data;
+    return data.map((d) => {
+      const min = d[band.minKey];
+      const max = d[band.maxKey];
+      if (typeof min === "number" && typeof max === "number") {
+        return { ...d, [BAND_BASE_KEY]: min, [BAND_SPAN_KEY]: max - min };
+      }
+      return { ...d, [BAND_BASE_KEY]: null, [BAND_SPAN_KEY]: null };
+    });
+  }, [data, band]);
+  const bandColor = band ? resolveChartColor(band.color, 1) : void 0;
+  const markerColor = React.useMemo(
+    () => markers?.[0]?.color ?? resolveChartColor(void 0, 0),
+    [markers]
+  );
+  const hasMarkers = !!markers && markers.length > 0;
+  const chartDataWithMarkers = React.useMemo(() => {
+    if (!hasMarkers) return chartData;
+    const byX = new Map(markers.map((m) => [String(m.xValue), m.yValue]));
+    return chartData.map((d) => {
+      const x = String(d[index]);
+      return byX.has(x) ? { ...d, __markerY__: byX.get(x) } : d;
+    });
+  }, [chartData, markers, hasMarkers, index]);
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "h-72 w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data: chartDataWithMarkers, margin: { top: 10, right: 10, left: 10, bottom: 5 }, children: [
+      /* @__PURE__ */ jsx("defs", { children: band && /* @__PURE__ */ jsxs("linearGradient", { id: "combo-band", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: bandColor, stopOpacity: 0.22 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: bandColor, stopOpacity: 0.1 })
+      ] }) }),
+      /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))", vertical: false }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: index,
+          tick: { fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          allowDuplicatedCategory: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          yAxisId: "left",
+          tickFormatter: leftFormatter,
+          tick: { fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          width: 56
+        }
+      ),
+      hasRightAxis && /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          yAxisId: "right",
+          orientation: "right",
+          domain: rightDomain,
+          tickFormatter: rightFormatter,
+          tick: { fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          width: 48
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter: leftFormatter, categoryLabels }),
+          cursor: { fill: "hsl(var(--muted))", opacity: 0.2 }
+        }
+      ),
+      showLegend && /* @__PURE__ */ jsx(
+        Legend,
+        {
+          verticalAlign: "top",
+          height: 36,
+          formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
+        }
+      ),
+      referenceY !== void 0 && /* @__PURE__ */ jsx(
+        ReferenceLine,
+        {
+          yAxisId: "left",
+          y: referenceY,
+          stroke: "hsl(var(--muted-foreground))",
+          strokeWidth: 1
+        }
+      ),
+      band && /* @__PURE__ */ jsx(
+        Area,
+        {
+          yAxisId: "left",
+          dataKey: BAND_BASE_KEY,
+          stackId: "combo-band",
+          stroke: "none",
+          fill: "transparent",
+          isAnimationActive: false,
+          connectNulls: false,
+          legendType: "none",
+          tooltipType: "none",
+          activeDot: false
+        }
+      ),
+      band && /* @__PURE__ */ jsx(
+        Area,
+        {
+          yAxisId: "left",
+          dataKey: BAND_SPAN_KEY,
+          name: band.name,
+          stackId: "combo-band",
+          stroke: "none",
+          fill: "url(#combo-band)",
+          isAnimationActive: false,
+          connectNulls: false,
+          legendType: band.name ? "rect" : "none",
+          tooltipType: "none",
+          activeDot: false
+        }
+      ),
+      series.map((s, idx) => {
+        const color = resolveChartColor(s.color, idx);
+        const yAxisId = s.yAxis === "right" ? "right" : "left";
+        if (s.type === "bar") {
+          const negativeColor = s.negativeColor ?? "#C0392B";
+          return /* @__PURE__ */ jsx(
+            Bar,
+            {
+              yAxisId,
+              dataKey: s.key,
+              name: s.name,
+              fill: color,
+              stackId: s.stackId,
+              radius: [2, 2, 0, 0],
+              isAnimationActive: false,
+              children: s.signColor && data.map((d, i) => {
+                const v = d[s.key];
+                return /* @__PURE__ */ jsx(
+                  Cell,
+                  {
+                    fill: typeof v === "number" && v < 0 ? negativeColor : color
+                  },
+                  `${s.key}-${i}`
+                );
+              })
+            },
+            s.key
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          Line,
+          {
+            yAxisId,
+            type: "monotone",
+            dataKey: s.key,
+            name: s.name,
+            stroke: color,
+            strokeWidth: 2,
+            strokeDasharray: DASH_MAP[s.dashStyle ?? "solid"],
+            connectNulls: true,
+            dot: false,
+            activeDot: { r: 4, strokeWidth: 0 },
+            isAnimationActive: false
+          },
+          s.key
+        );
+      }),
+      hasMarkers && /* @__PURE__ */ jsx(
+        Scatter,
+        {
+          yAxisId: "left",
+          dataKey: "__markerY__",
+          name: markers?.[0]?.label,
+          fill: markerColor,
+          isAnimationActive: false,
+          shape: "circle",
+          legendType: "none"
+        }
+      )
+    ] }) }) })
+  ] });
+}
+var ComboChart_default = ComboChart;
+export {
+  ComboChart,
+  ComboChart_default as default
+};
+//# sourceMappingURL=ComboChart.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/ComboChart.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  ComposedChart,\n  Bar,\n  Cell,\n  Line,\n  Area,\n  Scatter,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n  ReferenceLine,\n} from 'recharts'\nimport { Spinner } from '@freighttech/ui/primitives/spinner'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\n\n/**\n * Maps a Highcharts-style dashStyle onto a Recharts strokeDasharray. `solid`\n * (and anything unknown) yields `undefined` so the stroke renders continuous.\n */\nexport type ComboDashStyle = 'solid' | 'ShortDash' | 'Dash' | 'Dot'\n\nconst DASH_MAP: Record<ComboDashStyle, string | undefined> = {\n  solid: undefined,\n  ShortDash: '6 3',\n  Dash: '8 5',\n  Dot: '2 4',\n}\n\nexport type ComboSeries = {\n  /** dataKey present on each datum */\n  key: string\n  /** legend/tooltip label (already-translated) */\n  name: string\n  /** 'line' = monotone spline */\n  type: 'bar' | 'line'\n  color?: string\n  /** default 'left' */\n  yAxis?: 'left' | 'right'\n  /** for line series */\n  dashStyle?: ComboDashStyle\n  /** bars sharing a stackId stack */\n  stackId?: string\n  /**\n   * Bar-only: colour each datum by the sign of its value, so negative months\n   * render in `negativeColor` (PoC \"Wykonanie\" behaviour). When absent the bar\n   * uses a single `color` fill for every datum.\n   */\n  signColor?: boolean\n  /** Bar-only: fill for negative data when `signColor` is true (default loss red #C0392B) */\n  negativeColor?: string\n}\n\n/** forecast band Area(min..max), nulls in past => no band */\nexport type ComboBand = { minKey: string; maxKey: string; color?: string; name?: string }\n\n/** e.g. \"Teraz\" scatter dot */\nexport type ComboMarker = { xValue: string | number; yValue: number; label?: string; color?: string }\n\nexport type ComboChartProps = {\n  title?: string\n  data: Array<Record<string, number | string | null>>\n  /** x-axis category dataKey */\n  index: string\n  series: ComboSeries[]\n  band?: ComboBand\n  markers?: ComboMarker[]\n  leftFormatter?: (v: number) => string\n  rightFormatter?: (v: number) => string\n  /** e.g. [0,100] for % overlay */\n  rightDomain?: [number, number]\n  /** zero plotLine */\n  referenceY?: number\n  showLegend?: boolean\n  loading?: boolean\n  error?: string | null\n  emptyMessage?: string\n  className?: string\n  categoryLabels?: Record<string, string>\n}\n\nconst BAND_BASE_KEY = '__bandBase__'\nconst BAND_SPAN_KEY = '__bandSpan__'\n\nfunction defaultFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`\n  if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(1)}K`\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nexport function ComboChart({\n  title,\n  data,\n  index,\n  series,\n  band,\n  markers,\n  leftFormatter = defaultFormatter,\n  rightFormatter = defaultFormatter,\n  rightDomain,\n  referenceY,\n  showLegend = true,\n  loading,\n  error,\n  emptyMessage = 'No data available',\n  className = '',\n  categoryLabels,\n}: ComboChartProps) {\n  const wrapperClass = `rounded-lg border bg-card p-4 ${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-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-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-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  const hasRightAxis = series.some((s) => s.yAxis === 'right')\n\n  // Build the forecast band as a transparent base Area (0 \u2192 min) plus a shaded\n  // span Area (min \u2192 max) stacked on top. Where min/max are null (past months)\n  // both derived keys stay null, so Recharts draws no band there.\n  const chartData = React.useMemo(() => {\n    if (!band) return data\n    return data.map((d) => {\n      const min = d[band.minKey]\n      const max = d[band.maxKey]\n      if (typeof min === 'number' && typeof max === 'number') {\n        return { ...d, [BAND_BASE_KEY]: min, [BAND_SPAN_KEY]: max - min }\n      }\n      return { ...d, [BAND_BASE_KEY]: null, [BAND_SPAN_KEY]: null }\n    })\n  }, [data, band])\n\n  const bandColor = band ? resolveChartColor(band.color, 1) : undefined\n\n  // The \"Teraz\"-style markers ride on the SAME categorical x-axis. We must NOT\n  // give the <Scatter> its own `data` prop: in a ComposedChart with\n  // `allowDuplicatedCategory={false}`, a nested series carrying separate data\n  // collapses the whole category axis onto just that series' categories (so a\n  // single-point \"Teraz\" marker would flatten all 12 month bars into one). So\n  // instead we merge the marker y-values into the parent chart data under a\n  // private key at the matching x category, and the Scatter reads from there.\n  const markerColor = React.useMemo(\n    () => markers?.[0]?.color ?? resolveChartColor(undefined, 0),\n    [markers],\n  )\n  const hasMarkers = !!markers && markers.length > 0\n  const chartDataWithMarkers = React.useMemo(() => {\n    if (!hasMarkers) return chartData\n    const byX = new Map(markers!.map((m) => [String(m.xValue), m.yValue]))\n    return chartData.map((d) => {\n      const x = String((d as Record<string, unknown>)[index])\n      return byX.has(x) ? { ...d, __markerY__: byX.get(x)! } : d\n    })\n  }, [chartData, markers, hasMarkers, index])\n\n  return (\n    <div className={wrapperClass}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <div className=\"h-72 w-full\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ComposedChart data={chartDataWithMarkers} margin={{ top: 10, right: 10, left: 10, bottom: 5 }}>\n            <defs>\n              {band && (\n                <linearGradient id=\"combo-band\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stopColor={bandColor} stopOpacity={0.22} />\n                  <stop offset=\"100%\" stopColor={bandColor} stopOpacity={0.1} />\n                </linearGradient>\n              )}\n            </defs>\n            <CartesianGrid strokeDasharray=\"3 3\" stroke=\"hsl(var(--border))\" vertical={false} />\n            <XAxis\n              dataKey={index}\n              tick={{ fontSize: 12 }}\n              tickLine={false}\n              axisLine={false}\n              allowDuplicatedCategory={false}\n            />\n            <YAxis\n              yAxisId=\"left\"\n              tickFormatter={leftFormatter}\n              tick={{ fontSize: 12 }}\n              tickLine={false}\n              axisLine={false}\n              width={56}\n            />\n            {hasRightAxis && (\n              <YAxis\n                yAxisId=\"right\"\n                orientation=\"right\"\n                domain={rightDomain}\n                tickFormatter={rightFormatter}\n                tick={{ fontSize: 12 }}\n                tickLine={false}\n                axisLine={false}\n                width={48}\n              />\n            )}\n            <Tooltip\n              content={<ChartTooltipContent valueFormatter={leftFormatter} categoryLabels={categoryLabels} />}\n              cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}\n            />\n            {showLegend && (\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\n            {referenceY !== undefined && (\n              <ReferenceLine\n                yAxisId=\"left\"\n                y={referenceY}\n                stroke=\"hsl(var(--muted-foreground))\"\n                strokeWidth={1}\n              />\n            )}\n\n            {/* Forecast band: transparent base lifts the shaded span to its floor. */}\n            {band && (\n              <Area\n                yAxisId=\"left\"\n                dataKey={BAND_BASE_KEY}\n                stackId=\"combo-band\"\n                stroke=\"none\"\n                fill=\"transparent\"\n                isAnimationActive={false}\n                connectNulls={false}\n                legendType=\"none\"\n                tooltipType=\"none\"\n                activeDot={false}\n              />\n            )}\n            {band && (\n              <Area\n                yAxisId=\"left\"\n                dataKey={BAND_SPAN_KEY}\n                name={band.name}\n                stackId=\"combo-band\"\n                stroke=\"none\"\n                fill=\"url(#combo-band)\"\n                isAnimationActive={false}\n                connectNulls={false}\n                legendType={band.name ? 'rect' : 'none'}\n                tooltipType=\"none\"\n                activeDot={false}\n              />\n            )}\n\n            {series.map((s, idx) => {\n              const color = resolveChartColor(s.color, idx)\n              const yAxisId = s.yAxis === 'right' ? 'right' : 'left'\n              if (s.type === 'bar') {\n                const negativeColor = s.negativeColor ?? '#C0392B'\n                return (\n                  <Bar\n                    key={s.key}\n                    yAxisId={yAxisId}\n                    dataKey={s.key}\n                    name={s.name}\n                    fill={color}\n                    stackId={s.stackId}\n                    radius={[2, 2, 0, 0]}\n                    isAnimationActive={false}\n                  >\n                    {s.signColor &&\n                      data.map((d, i) => {\n                        const v = d[s.key]\n                        return (\n                          <Cell\n                            key={`${s.key}-${i}`}\n                            fill={typeof v === 'number' && v < 0 ? negativeColor : color}\n                          />\n                        )\n                      })}\n                  </Bar>\n                )\n              }\n              return (\n                <Line\n                  key={s.key}\n                  yAxisId={yAxisId}\n                  type=\"monotone\"\n                  dataKey={s.key}\n                  name={s.name}\n                  stroke={color}\n                  strokeWidth={2}\n                  strokeDasharray={DASH_MAP[s.dashStyle ?? 'solid']}\n                  connectNulls\n                  dot={false}\n                  activeDot={{ r: 4, strokeWidth: 0 }}\n                  isAnimationActive={false}\n                />\n              )\n            })}\n\n            {hasMarkers && (\n              <Scatter\n                yAxisId=\"left\"\n                dataKey=\"__markerY__\"\n                name={markers?.[0]?.label}\n                fill={markerColor}\n                isAnimationActive={false}\n                shape=\"circle\"\n                legendType=\"none\"\n              />\n            )}\n          </ComposedChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  )\n}\n\nexport default ComboChart\n"],
+  "mappings": "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",
+  "names": []
+}