@freighttech/ui 0.13.18

package/dist/backend/charts/ScatterChart.js

@@ -0,0 +1,320 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ScatterChart as RechartsScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  ZAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+  ReferenceLine,
+  ReferenceArea,
+  LabelList,
+  Customized
+} from "recharts";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+import { resolveChartColor } from "./ChartUtils.js";
+const RECHARTS_SHAPE = {
+  circle: "circle",
+  ring: "circle",
+  diamond: "diamond",
+  square: "square",
+  triangle: "triangle",
+  triangleDown: "triangle"
+};
+function defaultFmt(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 });
+}
+const DEFAULT_BAND_COLOR = "hsl(var(--muted-foreground))";
+function firstScale(map) {
+  if (!map) return void 0;
+  const first = Object.values(map)[0];
+  return first?.scale;
+}
+function makeBandPolygon(bounds) {
+  return function BandPolygon(props) {
+    const xScale = firstScale(props.xAxisMap);
+    const yScale = firstScale(props.yAxisMap);
+    if (!xScale || !yScale) return null;
+    const pt = (p) => `${xScale(p[0])},${yScale(p[1])}`;
+    const points = [
+      pt(bounds.lowerFrom),
+      pt(bounds.lowerTo),
+      pt(bounds.upperTo),
+      pt(bounds.upperFrom)
+    ].join(" ");
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("polygon", { points, fill: bounds.color, fillOpacity: 0.12, stroke: "none" }),
+      /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          points: `${pt(bounds.lowerFrom)} ${pt(bounds.lowerTo)}`,
+          fill: "none",
+          stroke: bounds.color,
+          strokeOpacity: 0.5,
+          strokeDasharray: "4 4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          points: `${pt(bounds.upperFrom)} ${pt(bounds.upperTo)}`,
+          fill: "none",
+          stroke: bounds.color,
+          strokeOpacity: 0.5,
+          strokeDasharray: "4 4"
+        }
+      )
+    ] });
+  };
+}
+function resolveBandBounds(diagonalBand, bandBounds, referenceSegment) {
+  if (bandBounds) {
+    return {
+      lowerFrom: bandBounds.lowerFrom,
+      lowerTo: bandBounds.lowerTo,
+      upperFrom: bandBounds.upperFrom,
+      upperTo: bandBounds.upperTo,
+      color: bandBounds.color ?? DEFAULT_BAND_COLOR
+    };
+  }
+  if (diagonalBand) {
+    const from = diagonalBand.from ?? referenceSegment?.from;
+    const to = diagonalBand.to ?? referenceSegment?.to;
+    if (!from || !to) return null;
+    const s = diagonalBand.sigma;
+    return {
+      lowerFrom: [from[0], from[1] - s],
+      lowerTo: [to[0], to[1] - s],
+      upperFrom: [from[0], from[1] + s],
+      upperTo: [to[0], to[1] + s],
+      color: diagonalBand.color ?? DEFAULT_BAND_COLOR
+    };
+  }
+  return null;
+}
+function PillLabel(props) {
+  const { x, y, value } = props;
+  if (value == null || value === "" || x == null || y == null) return null;
+  const text = String(value);
+  const width = Math.max(28, text.length * 6.2 + 14);
+  return /* @__PURE__ */ jsxs("g", { transform: `translate(${x + 10}, ${y - 10})`, style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        width,
+        height: 18,
+        rx: 9,
+        ry: 9,
+        fill: "#ffffff",
+        fillOpacity: 0.96,
+        stroke: "#cbd5e1",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: width / 2,
+        y: 13,
+        textAnchor: "middle",
+        fontSize: 10,
+        fontWeight: 600,
+        fill: "#1f2937",
+        children: text
+      }
+    )
+  ] });
+}
+function ScatterChart({
+  title,
+  data,
+  xLabel,
+  yLabel,
+  loading,
+  error,
+  color,
+  xFormatter = defaultFmt,
+  yFormatter = defaultFmt,
+  referenceX,
+  referenceY,
+  zRange = [40, 400],
+  onPointClick,
+  className = "",
+  emptyMessage = "No data available",
+  referenceSegment,
+  diagonalBand,
+  bandBounds,
+  series,
+  referenceLines,
+  shadedZone,
+  xDomain = ["dataMin", "dataMax"],
+  yDomain = ["dataMin", "dataMax"]
+}) {
+  const hasWrapper = !!title;
+  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className;
+  const hasSeries = !!series && series.length > 0;
+  const isEmpty = hasSeries ? series.every((s) => !s.data || s.data.length === 0) : !data || data.length === 0;
+  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 (isEmpty) {
+    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 resolvedBand = resolveBandBounds(diagonalBand, bandBounds, referenceSegment);
+  const handleScatterClick = (point) => {
+    if (onPointClick && point && typeof point === "object" && "payload" in point) {
+      onPointClick(point.payload);
+    }
+  };
+  const renderCells = (items, seriesColor, ring) => items.map((item, idx) => /* @__PURE__ */ jsx(
+    Cell,
+    {
+      fill: ring ? "transparent" : item.color ?? seriesColor,
+      stroke: ring ? item.color ?? seriesColor : void 0,
+      strokeWidth: ring ? 1.5 : void 0,
+      cursor: onPointClick ? "pointer" : "default",
+      fillOpacity: ring ? 1 : 0.7
+    },
+    idx
+  ));
+  const chartContent = /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 260, children: /* @__PURE__ */ jsxs(RechartsScatterChart, { margin: { top: 10, right: 20, bottom: 20, left: 10 }, children: [
+    /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        type: "number",
+        dataKey: "x",
+        name: xLabel,
+        domain: xDomain,
+        allowDataOverflow: true,
+        tickFormatter: xFormatter,
+        tick: { fontSize: 10 },
+        label: xLabel ? { value: xLabel, position: "insideBottom", offset: -10, fontSize: 10 } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        type: "number",
+        dataKey: "y",
+        name: yLabel,
+        domain: yDomain,
+        allowDataOverflow: true,
+        tickFormatter: yFormatter,
+        tick: { fontSize: 10 },
+        width: 50,
+        label: yLabel ? { value: yLabel, angle: -90, position: "insideLeft", fontSize: 10 } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(ZAxis, { type: "number", dataKey: "z", range: zRange }),
+    shadedZone && /* @__PURE__ */ jsx(
+      ReferenceArea,
+      {
+        y1: shadedZone.y1,
+        y2: shadedZone.y2,
+        fill: shadedZone.color ?? "hsl(var(--destructive))",
+        fillOpacity: 0.06,
+        stroke: "none",
+        label: shadedZone.label ? { value: shadedZone.label, position: "insideTopLeft", fontSize: 10, fill: shadedZone.color ?? "hsl(var(--destructive))" } : void 0
+      }
+    ),
+    resolvedBand && /* @__PURE__ */ jsx(Customized, { component: makeBandPolygon(resolvedBand) }),
+    (referenceLines ?? []).map(
+      (rl, i) => rl.axis === "y" ? /* @__PURE__ */ jsx(
+        ReferenceLine,
+        {
+          y: rl.value,
+          stroke: rl.color ?? "hsl(var(--muted-foreground))",
+          strokeDasharray: rl.dashed === false ? void 0 : "4 4",
+          label: rl.label ? { value: rl.label, position: "right", fontSize: 10, fill: rl.color ?? "hsl(var(--muted-foreground))" } : void 0
+        },
+        `rl-${i}`
+      ) : /* @__PURE__ */ jsx(
+        ReferenceLine,
+        {
+          x: rl.value,
+          stroke: rl.color ?? "hsl(var(--muted-foreground))",
+          strokeDasharray: rl.dashed === false ? void 0 : "4 4",
+          label: rl.label ? { value: rl.label, position: "top", fontSize: 10, fill: rl.color ?? "hsl(var(--muted-foreground))" } : void 0
+        },
+        `rl-${i}`
+      )
+    ),
+    referenceY != null && /* @__PURE__ */ jsx(ReferenceLine, { y: referenceY, stroke: "hsl(var(--destructive))", strokeDasharray: "4 4" }),
+    referenceX != null && /* @__PURE__ */ jsx(ReferenceLine, { x: referenceX, stroke: "hsl(var(--muted-foreground))", strokeDasharray: "4 4" }),
+    referenceSegment && /* @__PURE__ */ jsx(
+      ReferenceLine,
+      {
+        segment: [
+          { x: referenceSegment.from[0], y: referenceSegment.from[1] },
+          { x: referenceSegment.to[0], y: referenceSegment.to[1] }
+        ],
+        stroke: referenceSegment.color ?? "hsl(var(--muted-foreground))",
+        strokeDasharray: referenceSegment.dashed === false ? void 0 : "6 4",
+        label: referenceSegment.label ? { value: referenceSegment.label, fontSize: 10, position: "insideTopRight" } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        cursor: { strokeDasharray: "3 3" },
+        content: ({ active, payload }) => {
+          if (!active || !payload?.length) return null;
+          const p = payload[0].payload;
+          return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-popover px-3 py-2 text-popover-foreground shadow-md", children: [
+            p.label && /* @__PURE__ */ jsx("div", { className: "mb-1 text-sm font-medium", children: p.label }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              xLabel ?? "x",
+              ": ",
+              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: xFormatter(p.x) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              yLabel ?? "y",
+              ": ",
+              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: yFormatter(p.y) })
+            ] })
+          ] });
+        }
+      }
+    ),
+    hasSeries ? series.map((s, sIdx) => {
+      const seriesColor = s.color ?? resolveChartColor(void 0, sIdx);
+      const hollow = s.shape === "ring" || s.shape === "diamond";
+      return /* @__PURE__ */ jsxs(Scatter, { name: s.name, data: s.data, shape: RECHARTS_SHAPE[s.shape ?? "circle"], onClick: handleScatterClick, children: [
+        renderCells(s.data, seriesColor, hollow),
+        /* @__PURE__ */ jsx(LabelList, { dataKey: "pill", content: (p) => /* @__PURE__ */ jsx(PillLabel, { ...p }) })
+      ] }, s.name);
+    }) : /* @__PURE__ */ jsxs(Scatter, { data, onClick: handleScatterClick, children: [
+      renderCells(data, resolveChartColor(color, 0), false),
+      /* @__PURE__ */ jsx(LabelList, { dataKey: "pill", content: (p) => /* @__PURE__ */ jsx(PillLabel, { ...p }) })
+    ] })
+  ] }) });
+  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 ScatterChart_default = ScatterChart;
+export {
+  ScatterChart,
+  ScatterChart_default as default
+};
+//# sourceMappingURL=ScatterChart.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/ScatterChart.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  ScatterChart as RechartsScatterChart,\n  Scatter,\n  XAxis,\n  YAxis,\n  ZAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Cell,\n  ReferenceLine,\n  ReferenceArea,\n  LabelList,\n  Customized,\n} from 'recharts'\nimport { Spinner } from '@freighttech/ui/primitives/spinner'\nimport { resolveChartColor } from './ChartUtils'\n\nexport type ScatterChartDataItem = {\n  x: number\n  y: number\n  /** Bubble size dimension (e.g. invoice value). */\n  z?: number\n  label?: string\n  /** Force a specific color (e.g. red for a loss point). */\n  color?: string\n  /** Render an HTML pill callout next to this point (e.g. \"Najwi\u0119ksza strata\"). */\n  pill?: string\n  [key: string]: string | number | null | undefined\n}\n\n/**\n * Diagonal \"plan = wykonanie\" reference, drawn via Recharts\n * `<ReferenceLine segment={[{x,y},{x,y}]}/>`.\n */\nexport type ScatterReferenceSegment = {\n  from: [number, number]\n  to: [number, number]\n  color?: string\n  dashed?: boolean\n  label?: string\n}\n\n/**\n * \u00B12\u03C3 band around the diagonal, given as a sigma offset applied along the\n * y-axis to a 45\u00B0 plan=wykonanie diagonal. The band is the parallel strip\n * `y = x \u00B1 sigma`. Provide either this OR `bandBounds`.\n */\nexport type ScatterDiagonalBand = {\n  sigma: number\n  /** Diagonal anchor; defaults to the reference segment when present. */\n  from?: [number, number]\n  to?: [number, number]\n  color?: string\n}\n\n/**\n * Explicit four-corner band: two parallel diagonals (lower + upper bound),\n * shaded between. Use when the band is not a symmetric \u00B1sigma strip.\n */\nexport type ScatterBandBounds = {\n  lowerFrom: [number, number]\n  lowerTo: [number, number]\n  upperFrom: [number, number]\n  upperTo: [number, number]\n  color?: string\n}\n\n/**\n * Optional multi-series mode (e.g. rozliczone solid vs koszt-w-toku hollow\n * ring; W normie / Poza norm\u0105 buckets). When provided it takes precedence\n * over the single-`data` prop.\n */\nexport type ScatterMarkerShape = 'circle' | 'ring' | 'diamond' | 'square' | 'triangle' | 'triangleDown'\n\nexport type ScatterSeries = {\n  name: string\n  data: ScatterChartDataItem[]\n  color?: string\n  /**\n   * Marker shape. 'ring' renders a hollow circle (transparent fill, colored\n   * stroke); 'diamond' a hollow diamond (PoC \"koszt w toku\"); 'triangle' /\n   * 'triangleDown' the up/down outlier markers (PoC \"poza norm\u0105 lepiej/gorzej\").\n   */\n  shape?: ScatterMarkerShape\n}\n\n/** A labeled axis-parallel reference line (e.g. the median mar\u017Ca line). */\nexport type ScatterReferenceLine = {\n  axis: 'x' | 'y'\n  value: number\n  label?: string\n  color?: string\n  dashed?: boolean\n}\n\n/** A shaded horizontal zone (e.g. the loss zone below y=0). */\nexport type ScatterShadedZone = {\n  y1: number\n  y2: number\n  color?: string\n  label?: string\n}\n\nexport type ScatterChartProps = {\n  title?: string\n  data: ScatterChartDataItem[]\n  xLabel?: string\n  yLabel?: string\n  loading?: boolean\n  error?: string | null\n  /** Default point color when an item doesn't set its own. */\n  color?: string\n  xFormatter?: (value: number) => string\n  yFormatter?: (value: number) => string\n  /** Optional reference lines (e.g. y=0 for the loss boundary, plan line). */\n  referenceX?: number\n  referenceY?: number\n  zRange?: [number, number]\n  onPointClick?: (item: ScatterChartDataItem) => void\n  className?: string\n  emptyMessage?: string\n  /** Diagonal \"plan = wykonanie\" reference (two-point segment). */\n  referenceSegment?: ScatterReferenceSegment\n  /** \u00B12\u03C3 band around the diagonal (symmetric strip). */\n  diagonalBand?: ScatterDiagonalBand\n  /** Explicit four-corner band between two parallel diagonals. */\n  bandBounds?: ScatterBandBounds\n  /** Multi-series mode; when set, supersedes the single `data` prop for points. */\n  series?: ScatterSeries[]\n  /** Labeled axis-parallel reference lines (e.g. median mar\u017Ca). */\n  referenceLines?: ScatterReferenceLine[]\n  /** Shaded horizontal zone (e.g. loss zone y &lt; 0). */\n  shadedZone?: ScatterShadedZone\n  /** X-axis domain. Defaults to ['dataMin','dataMax'] so numeric/time points spread to the data range (not from 0). */\n  xDomain?: [number | string, number | string]\n  /** Y-axis domain. Defaults to ['dataMin','dataMax']. */\n  yDomain?: [number | string, number | string]\n}\n\n/** Map our shape token to a Recharts Scatter `shape` value (ring/triangleDown handled separately). */\nconst RECHARTS_SHAPE: Record<string, 'circle' | 'diamond' | 'square' | 'triangle'> = {\n  circle: 'circle',\n  ring: 'circle',\n  diamond: 'diamond',\n  square: 'square',\n  triangle: 'triangle',\n  triangleDown: 'triangle',\n}\n\nfunction defaultFmt(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\nconst DEFAULT_BAND_COLOR = 'hsl(var(--muted-foreground))'\n\n// Recharts injects the full chart state (axis maps + scales) into a <Customized>\n// child at runtime; these props are not in the public d.ts, so type them locally.\ntype AxisEntry = { scale?: (value: number) => number }\ntype AxisMap = Record<string, AxisEntry>\ntype CustomizedAxisProps = {\n  xAxisMap?: AxisMap\n  yAxisMap?: AxisMap\n}\n\nfunction firstScale(map: AxisMap | undefined): ((value: number) => number) | undefined {\n  if (!map) return undefined\n  const first = Object.values(map)[0]\n  return first?.scale\n}\n\n/**\n * SVG polygon shading the \u00B12\u03C3 band between two parallel diagonals.\n * Rendered through <Customized>, reading the live x/y scales so the band\n * tracks the rendered axes exactly. This is a real filled polygon (not the\n * dashed-bounds fallback).\n */\nfunction makeBandPolygon(bounds: {\n  lowerFrom: [number, number]\n  lowerTo: [number, number]\n  upperFrom: [number, number]\n  upperTo: [number, number]\n  color: string\n}) {\n  return function BandPolygon(props: CustomizedAxisProps) {\n    const xScale = firstScale(props.xAxisMap)\n    const yScale = firstScale(props.yAxisMap)\n    if (!xScale || !yScale) return null\n    const pt = (p: [number, number]) => `${xScale(p[0])},${yScale(p[1])}`\n    // lowerFrom -> lowerTo -> upperTo -> upperFrom closes the parallel strip.\n    const points = [\n      pt(bounds.lowerFrom),\n      pt(bounds.lowerTo),\n      pt(bounds.upperTo),\n      pt(bounds.upperFrom),\n    ].join(' ')\n    return (\n      <g>\n        <polygon points={points} fill={bounds.color} fillOpacity={0.12} stroke=\"none\" />\n        <polyline\n          points={`${pt(bounds.lowerFrom)} ${pt(bounds.lowerTo)}`}\n          fill=\"none\"\n          stroke={bounds.color}\n          strokeOpacity={0.5}\n          strokeDasharray=\"4 4\"\n        />\n        <polyline\n          points={`${pt(bounds.upperFrom)} ${pt(bounds.upperTo)}`}\n          fill=\"none\"\n          stroke={bounds.color}\n          strokeOpacity={0.5}\n          strokeDasharray=\"4 4\"\n        />\n      </g>\n    )\n  }\n}\n\n/** Resolve a band spec (sigma strip or explicit bounds) to four corners. */\nfunction resolveBandBounds(\n  diagonalBand: ScatterDiagonalBand | undefined,\n  bandBounds: ScatterBandBounds | undefined,\n  referenceSegment: ScatterReferenceSegment | undefined,\n): { lowerFrom: [number, number]; lowerTo: [number, number]; upperFrom: [number, number]; upperTo: [number, number]; color: string } | null {\n  if (bandBounds) {\n    return {\n      lowerFrom: bandBounds.lowerFrom,\n      lowerTo: bandBounds.lowerTo,\n      upperFrom: bandBounds.upperFrom,\n      upperTo: bandBounds.upperTo,\n      color: bandBounds.color ?? DEFAULT_BAND_COLOR,\n    }\n  }\n  if (diagonalBand) {\n    const from = diagonalBand.from ?? referenceSegment?.from\n    const to = diagonalBand.to ?? referenceSegment?.to\n    if (!from || !to) return null\n    const s = diagonalBand.sigma\n    return {\n      lowerFrom: [from[0], from[1] - s],\n      lowerTo: [to[0], to[1] - s],\n      upperFrom: [from[0], from[1] + s],\n      upperTo: [to[0], to[1] + s],\n      color: diagonalBand.color ?? DEFAULT_BAND_COLOR,\n    }\n  }\n  return null\n}\n\n/** HTML-styled pill label for callout points (e.g. Najwi\u0119ksza strata/teczka). */\nfunction PillLabel(props: {\n  x?: number\n  y?: number\n  value?: string | number\n}) {\n  const { x, y, value } = props\n  if (value == null || value === '' || x == null || y == null) return null\n  const text = String(value)\n  const width = Math.max(28, text.length * 6.2 + 14)\n  // Concrete colors (NOT hsl(var(--token)) \u2014 CSS var() is not substituted in SVG\n  // presentation attributes, which rendered the pills as solid black). White\n  // rounded pill, light border, dark navy text \u2014 readable on any chart bg.\n  return (\n    <g transform={`translate(${x + 10}, ${y - 10})`} style={{ pointerEvents: 'none' }}>\n      <rect\n        width={width}\n        height={18}\n        rx={9}\n        ry={9}\n        fill=\"#ffffff\"\n        fillOpacity={0.96}\n        stroke=\"#cbd5e1\"\n        strokeWidth={1}\n      />\n      <text\n        x={width / 2}\n        y={13}\n        textAnchor=\"middle\"\n        fontSize={10}\n        fontWeight={600}\n        fill=\"#1f2937\"\n      >\n        {text}\n      </text>\n    </g>\n  )\n}\n\nexport function ScatterChart({\n  title,\n  data,\n  xLabel,\n  yLabel,\n  loading,\n  error,\n  color,\n  xFormatter = defaultFmt,\n  yFormatter = defaultFmt,\n  referenceX,\n  referenceY,\n  zRange = [40, 400],\n  onPointClick,\n  className = '',\n  emptyMessage = 'No data available',\n  referenceSegment,\n  diagonalBand,\n  bandBounds,\n  series,\n  referenceLines,\n  shadedZone,\n  xDomain = ['dataMin', 'dataMax'],\n  yDomain = ['dataMin', 'dataMax'],\n}: ScatterChartProps) {\n  const hasWrapper = !!title\n  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className\n\n  const hasSeries = !!series && series.length > 0\n  const isEmpty = hasSeries\n    ? series!.every((s) => !s.data || s.data.length === 0)\n    : !data || data.length === 0\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  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  if (isEmpty) {\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 resolvedBand = resolveBandBounds(diagonalBand, bandBounds, referenceSegment)\n\n  const handleScatterClick = (point: unknown) => {\n    if (onPointClick && point && typeof point === 'object' && 'payload' in point) {\n      onPointClick((point as { payload: ScatterChartDataItem }).payload)\n    }\n  }\n\n  const renderCells = (items: ScatterChartDataItem[], seriesColor: string, ring: boolean) =>\n    items.map((item, idx) => (\n      <Cell\n        key={idx}\n        fill={ring ? 'transparent' : (item.color ?? seriesColor)}\n        stroke={ring ? (item.color ?? seriesColor) : undefined}\n        strokeWidth={ring ? 1.5 : undefined}\n        cursor={onPointClick ? 'pointer' : 'default'}\n        fillOpacity={ring ? 1 : 0.7}\n      />\n    ))\n\n  const chartContent = (\n    <ResponsiveContainer width=\"100%\" height={260}>\n      <RechartsScatterChart margin={{ top: 10, right: 20, bottom: 20, left: 10 }}>\n        <CartesianGrid strokeDasharray=\"3 3\" stroke=\"hsl(var(--border))\" />\n        <XAxis\n          type=\"number\"\n          dataKey=\"x\"\n          name={xLabel}\n          domain={xDomain}\n          allowDataOverflow\n          tickFormatter={xFormatter}\n          tick={{ fontSize: 10 }}\n          label={xLabel ? { value: xLabel, position: 'insideBottom', offset: -10, fontSize: 10 } : undefined}\n        />\n        <YAxis\n          type=\"number\"\n          dataKey=\"y\"\n          name={yLabel}\n          domain={yDomain}\n          allowDataOverflow\n          tickFormatter={yFormatter}\n          tick={{ fontSize: 10 }}\n          width={50}\n          label={yLabel ? { value: yLabel, angle: -90, position: 'insideLeft', fontSize: 10 } : undefined}\n        />\n        <ZAxis type=\"number\" dataKey=\"z\" range={zRange} />\n        {shadedZone && (\n          <ReferenceArea\n            y1={shadedZone.y1}\n            y2={shadedZone.y2}\n            fill={shadedZone.color ?? 'hsl(var(--destructive))'}\n            fillOpacity={0.06}\n            stroke=\"none\"\n            label={shadedZone.label ? { value: shadedZone.label, position: 'insideTopLeft', fontSize: 10, fill: shadedZone.color ?? 'hsl(var(--destructive))' } : undefined}\n          />\n        )}\n        {resolvedBand && <Customized component={makeBandPolygon(resolvedBand)} />}\n        {(referenceLines ?? []).map((rl, i) =>\n          rl.axis === 'y' ? (\n            <ReferenceLine\n              key={`rl-${i}`}\n              y={rl.value}\n              stroke={rl.color ?? 'hsl(var(--muted-foreground))'}\n              strokeDasharray={rl.dashed === false ? undefined : '4 4'}\n              label={rl.label ? { value: rl.label, position: 'right', fontSize: 10, fill: rl.color ?? 'hsl(var(--muted-foreground))' } : undefined}\n            />\n          ) : (\n            <ReferenceLine\n              key={`rl-${i}`}\n              x={rl.value}\n              stroke={rl.color ?? 'hsl(var(--muted-foreground))'}\n              strokeDasharray={rl.dashed === false ? undefined : '4 4'}\n              label={rl.label ? { value: rl.label, position: 'top', fontSize: 10, fill: rl.color ?? 'hsl(var(--muted-foreground))' } : undefined}\n            />\n          ),\n        )}\n        {referenceY != null && (\n          <ReferenceLine y={referenceY} stroke=\"hsl(var(--destructive))\" strokeDasharray=\"4 4\" />\n        )}\n        {referenceX != null && (\n          <ReferenceLine x={referenceX} stroke=\"hsl(var(--muted-foreground))\" strokeDasharray=\"4 4\" />\n        )}\n        {referenceSegment && (\n          <ReferenceLine\n            segment={[\n              { x: referenceSegment.from[0], y: referenceSegment.from[1] },\n              { x: referenceSegment.to[0], y: referenceSegment.to[1] },\n            ]}\n            stroke={referenceSegment.color ?? 'hsl(var(--muted-foreground))'}\n            strokeDasharray={referenceSegment.dashed === false ? undefined : '6 4'}\n            label={referenceSegment.label ? { value: referenceSegment.label, fontSize: 10, position: 'insideTopRight' } : undefined}\n          />\n        )}\n        <Tooltip\n          cursor={{ strokeDasharray: '3 3' }}\n          content={({ active, payload }) => {\n            if (!active || !payload?.length) return null\n            const p = payload[0].payload as ScatterChartDataItem\n            return (\n              <div className=\"rounded-lg border bg-popover px-3 py-2 text-popover-foreground shadow-md\">\n                {p.label && <div className=\"mb-1 text-sm font-medium\">{p.label}</div>}\n                <div className=\"text-xs text-muted-foreground\">\n                  {xLabel ?? 'x'}: <span className=\"tabular-nums\">{xFormatter(p.x)}</span>\n                </div>\n                <div className=\"text-xs text-muted-foreground\">\n                  {yLabel ?? 'y'}: <span className=\"tabular-nums\">{yFormatter(p.y)}</span>\n                </div>\n              </div>\n            )\n          }}\n        />\n        {hasSeries\n          ? series!.map((s, sIdx) => {\n              const seriesColor = s.color ?? resolveChartColor(undefined, sIdx)\n              const hollow = s.shape === 'ring' || s.shape === 'diamond'\n              return (\n                <Scatter key={s.name} name={s.name} data={s.data} shape={RECHARTS_SHAPE[s.shape ?? 'circle']} onClick={handleScatterClick}>\n                  {renderCells(s.data, seriesColor, hollow)}\n                  <LabelList dataKey=\"pill\" content={(p) => <PillLabel {...(p as { x?: number; y?: number; value?: string | number })} />} />\n                </Scatter>\n              )\n            })\n          : (\n            <Scatter data={data} onClick={handleScatterClick}>\n              {renderCells(data, resolveChartColor(color, 0), false)}\n              <LabelList dataKey=\"pill\" content={(p) => <PillLabel {...(p as { x?: number; y?: number; value?: string | number })} />} />\n            </Scatter>\n          )}\n      </RechartsScatterChart>\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 ScatterChart\n"],
+  "mappings": ";AA0MM,SACE,KADF;AAvMN;AAAA,EACE,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AACxB,SAAS,yBAAyB;AA6HlC,MAAM,iBAA+E;AAAA,EACnF,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,cAAc;AAChB;AAEA,SAAS,WAAW,OAAuB;AACzC,MAAI,KAAK,IAAI,KAAK,KAAK,IAAW,QAAO,IAAI,QAAQ,KAAW,QAAQ,CAAC,CAAC;AAC1E,MAAI,KAAK,IAAI,KAAK,KAAK,IAAO,QAAO,IAAI,QAAQ,KAAO,QAAQ,CAAC,CAAC;AAClE,SAAO,MAAM,eAAe,QAAW,EAAE,uBAAuB,EAAE,CAAC;AACrE;AAEA,MAAM,qBAAqB;AAW3B,SAAS,WAAW,KAAmE;AACrF,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,QAAQ,OAAO,OAAO,GAAG,EAAE,CAAC;AAClC,SAAO,OAAO;AAChB;AAQA,SAAS,gBAAgB,QAMtB;AACD,SAAO,SAAS,YAAY,OAA4B;AACtD,UAAM,SAAS,WAAW,MAAM,QAAQ;AACxC,UAAM,SAAS,WAAW,MAAM,QAAQ;AACxC,QAAI,CAAC,UAAU,CAAC,OAAQ,QAAO;AAC/B,UAAM,KAAK,CAAC,MAAwB,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC;AAEnE,UAAM,SAAS;AAAA,MACb,GAAG,OAAO,SAAS;AAAA,MACnB,GAAG,OAAO,OAAO;AAAA,MACjB,GAAG,OAAO,OAAO;AAAA,MACjB,GAAG,OAAO,SAAS;AAAA,IACrB,EAAE,KAAK,GAAG;AACV,WACE,qBAAC,OACC;AAAA,0BAAC,aAAQ,QAAgB,MAAM,OAAO,OAAO,aAAa,MAAM,QAAO,QAAO;AAAA,MAC9E;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,GAAG,GAAG,OAAO,SAAS,CAAC,IAAI,GAAG,OAAO,OAAO,CAAC;AAAA,UACrD,MAAK;AAAA,UACL,QAAQ,OAAO;AAAA,UACf,eAAe;AAAA,UACf,iBAAgB;AAAA;AAAA,MAClB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,GAAG,GAAG,OAAO,SAAS,CAAC,IAAI,GAAG,OAAO,OAAO,CAAC;AAAA,UACrD,MAAK;AAAA,UACL,QAAQ,OAAO;AAAA,UACf,eAAe;AAAA,UACf,iBAAgB;AAAA;AAAA,MAClB;AAAA,OACF;AAAA,EAEJ;AACF;AAGA,SAAS,kBACP,cACA,YACA,kBAC0I;AAC1I,MAAI,YAAY;AACd,WAAO;AAAA,MACL,WAAW,WAAW;AAAA,MACtB,SAAS,WAAW;AAAA,MACpB,WAAW,WAAW;AAAA,MACtB,SAAS,WAAW;AAAA,MACpB,OAAO,WAAW,SAAS;AAAA,IAC7B;AAAA,EACF;AACA,MAAI,cAAc;AAChB,UAAM,OAAO,aAAa,QAAQ,kBAAkB;AACpD,UAAM,KAAK,aAAa,MAAM,kBAAkB;AAChD,QAAI,CAAC,QAAQ,CAAC,GAAI,QAAO;AACzB,UAAM,IAAI,aAAa;AACvB,WAAO;AAAA,MACL,WAAW,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC;AAAA,MAChC,SAAS,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC;AAAA,MAC1B,WAAW,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC;AAAA,MAChC,SAAS,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC;AAAA,MAC1B,OAAO,aAAa,SAAS;AAAA,IAC/B;AAAA,EACF;AACA,SAAO;AACT;AAGA,SAAS,UAAU,OAIhB;AACD,QAAM,EAAE,GAAG,GAAG,MAAM,IAAI;AACxB,MAAI,SAAS,QAAQ,UAAU,MAAM,KAAK,QAAQ,KAAK,KAAM,QAAO;AACpE,QAAM,OAAO,OAAO,KAAK;AACzB,QAAM,QAAQ,KAAK,IAAI,IAAI,KAAK,SAAS,MAAM,EAAE;AAIjD,SACE,qBAAC,OAAE,WAAW,aAAa,IAAI,EAAE,KAAK,IAAI,EAAE,KAAK,OAAO,EAAE,eAAe,OAAO,GAC9E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAK;AAAA,QACL,aAAa;AAAA,QACb,QAAO;AAAA,QACP,aAAa;AAAA;AAAA,IACf;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAG,QAAQ;AAAA,QACX,GAAG;AAAA,QACH,YAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS,CAAC,IAAI,GAAG;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,CAAC,WAAW,SAAS;AAAA,EAC/B,UAAU,CAAC,WAAW,SAAS;AACjC,GAAsB;AACpB,QAAM,aAAa,CAAC,CAAC;AACrB,QAAM,eAAe,aAAa,iCAAiC,SAAS,KAAK;AAEjF,QAAM,YAAY,CAAC,CAAC,UAAU,OAAO,SAAS;AAC9C,QAAM,UAAU,YACZ,OAAQ,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,WAAW,CAAC,IACnD,CAAC,QAAQ,KAAK,WAAW;AAE7B,MAAI,OAAO;AACT,WACE,qBAAC,SAAI,WAAW,cACb;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,OAAE,WAAU,4BAA4B,iBAAM,GACjD;AAAA,OACF;AAAA,EAEJ;AACA,MAAI,SAAS;AACX,WACE,qBAAC,SAAI,WAAW,cACb;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,WAAQ,WAAU,iCAAgC,GACrD;AAAA,OACF;AAAA,EAEJ;AACA,MAAI,SAAS;AACX,WACE,qBAAC,SAAI,WAAW,cACb;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,OAAE,WAAU,iCAAiC,wBAAa,GAC7D;AAAA,OACF;AAAA,EAEJ;AAEA,QAAM,eAAe,kBAAkB,cAAc,YAAY,gBAAgB;AAEjF,QAAM,qBAAqB,CAAC,UAAmB;AAC7C,QAAI,gBAAgB,SAAS,OAAO,UAAU,YAAY,aAAa,OAAO;AAC5E,mBAAc,MAA4C,OAAO;AAAA,IACnE;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,OAA+B,aAAqB,SACvE,MAAM,IAAI,CAAC,MAAM,QACf;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,OAAO,gBAAiB,KAAK,SAAS;AAAA,MAC5C,QAAQ,OAAQ,KAAK,SAAS,cAAe;AAAA,MAC7C,aAAa,OAAO,MAAM;AAAA,MAC1B,QAAQ,eAAe,YAAY;AAAA,MACnC,aAAa,OAAO,IAAI;AAAA;AAAA,IALnB;AAAA,EAMP,CACD;AAEH,QAAM,eACJ,oBAAC,uBAAoB,OAAM,QAAO,QAAQ,KACxC,+BAAC,wBAAqB,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAG,GACvE;AAAA,wBAAC,iBAAc,iBAAgB,OAAM,QAAO,sBAAqB;AAAA,IACjE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,mBAAiB;AAAA,QACjB,eAAe;AAAA,QACf,MAAM,EAAE,UAAU,GAAG;AAAA,QACrB,OAAO,SAAS,EAAE,OAAO,QAAQ,UAAU,gBAAgB,QAAQ,KAAK,UAAU,GAAG,IAAI;AAAA;AAAA,IAC3F;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,mBAAiB;AAAA,QACjB,eAAe;AAAA,QACf,MAAM,EAAE,UAAU,GAAG;AAAA,QACrB,OAAO;AAAA,QACP,OAAO,SAAS,EAAE,OAAO,QAAQ,OAAO,KAAK,UAAU,cAAc,UAAU,GAAG,IAAI;AAAA;AAAA,IACxF;AAAA,IACA,oBAAC,SAAM,MAAK,UAAS,SAAQ,KAAI,OAAO,QAAQ;AAAA,IAC/C,cACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,WAAW;AAAA,QACf,IAAI,WAAW;AAAA,QACf,MAAM,WAAW,SAAS;AAAA,QAC1B,aAAa;AAAA,QACb,QAAO;AAAA,QACP,OAAO,WAAW,QAAQ,EAAE,OAAO,WAAW,OAAO,UAAU,iBAAiB,UAAU,IAAI,MAAM,WAAW,SAAS,0BAA0B,IAAI;AAAA;AAAA,IACxJ;AAAA,IAED,gBAAgB,oBAAC,cAAW,WAAW,gBAAgB,YAAY,GAAG;AAAA,KACrE,kBAAkB,CAAC,GAAG;AAAA,MAAI,CAAC,IAAI,MAC/B,GAAG,SAAS,MACV;AAAA,QAAC;AAAA;AAAA,UAEC,GAAG,GAAG;AAAA,UACN,QAAQ,GAAG,SAAS;AAAA,UACpB,iBAAiB,GAAG,WAAW,QAAQ,SAAY;AAAA,UACnD,OAAO,GAAG,QAAQ,EAAE,OAAO,GAAG,OAAO,UAAU,SAAS,UAAU,IAAI,MAAM,GAAG,SAAS,+BAA+B,IAAI;AAAA;AAAA,QAJtH,MAAM,CAAC;AAAA,MAKd,IAEA;AAAA,QAAC;AAAA;AAAA,UAEC,GAAG,GAAG;AAAA,UACN,QAAQ,GAAG,SAAS;AAAA,UACpB,iBAAiB,GAAG,WAAW,QAAQ,SAAY;AAAA,UACnD,OAAO,GAAG,QAAQ,EAAE,OAAO,GAAG,OAAO,UAAU,OAAO,UAAU,IAAI,MAAM,GAAG,SAAS,+BAA+B,IAAI;AAAA;AAAA,QAJpH,MAAM,CAAC;AAAA,MAKd;AAAA,IAEJ;AAAA,IACC,cAAc,QACb,oBAAC,iBAAc,GAAG,YAAY,QAAO,2BAA0B,iBAAgB,OAAM;AAAA,IAEtF,cAAc,QACb,oBAAC,iBAAc,GAAG,YAAY,QAAO,gCAA+B,iBAAgB,OAAM;AAAA,IAE3F,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,UACP,EAAE,GAAG,iBAAiB,KAAK,CAAC,GAAG,GAAG,iBAAiB,KAAK,CAAC,EAAE;AAAA,UAC3D,EAAE,GAAG,iBAAiB,GAAG,CAAC,GAAG,GAAG,iBAAiB,GAAG,CAAC,EAAE;AAAA,QACzD;AAAA,QACA,QAAQ,iBAAiB,SAAS;AAAA,QAClC,iBAAiB,iBAAiB,WAAW,QAAQ,SAAY;AAAA,QACjE,OAAO,iBAAiB,QAAQ,EAAE,OAAO,iBAAiB,OAAO,UAAU,IAAI,UAAU,iBAAiB,IAAI;AAAA;AAAA,IAChH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,iBAAiB,MAAM;AAAA,QACjC,SAAS,CAAC,EAAE,QAAQ,QAAQ,MAAM;AAChC,cAAI,CAAC,UAAU,CAAC,SAAS,OAAQ,QAAO;AACxC,gBAAM,IAAI,QAAQ,CAAC,EAAE;AACrB,iBACE,qBAAC,SAAI,WAAU,4EACZ;AAAA,cAAE,SAAS,oBAAC,SAAI,WAAU,4BAA4B,YAAE,OAAM;AAAA,YAC/D,qBAAC,SAAI,WAAU,iCACZ;AAAA,wBAAU;AAAA,cAAI;AAAA,cAAE,oBAAC,UAAK,WAAU,gBAAgB,qBAAW,EAAE,CAAC,GAAE;AAAA,eACnE;AAAA,YACA,qBAAC,SAAI,WAAU,iCACZ;AAAA,wBAAU;AAAA,cAAI;AAAA,cAAE,oBAAC,UAAK,WAAU,gBAAgB,qBAAW,EAAE,CAAC,GAAE;AAAA,eACnE;AAAA,aACF;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,IACC,YACG,OAAQ,IAAI,CAAC,GAAG,SAAS;AACvB,YAAM,cAAc,EAAE,SAAS,kBAAkB,QAAW,IAAI;AAChE,YAAM,SAAS,EAAE,UAAU,UAAU,EAAE,UAAU;AACjD,aACE,qBAAC,WAAqB,MAAM,EAAE,MAAM,MAAM,EAAE,MAAM,OAAO,eAAe,EAAE,SAAS,QAAQ,GAAG,SAAS,oBACpG;AAAA,oBAAY,EAAE,MAAM,aAAa,MAAM;AAAA,QACxC,oBAAC,aAAU,SAAQ,QAAO,SAAS,CAAC,MAAM,oBAAC,aAAW,GAAI,GAA2D,GAAI;AAAA,WAF7G,EAAE,IAGhB;AAAA,IAEJ,CAAC,IAED,qBAAC,WAAQ,MAAY,SAAS,oBAC3B;AAAA,kBAAY,MAAM,kBAAkB,OAAO,CAAC,GAAG,KAAK;AAAA,MACrD,oBAAC,aAAU,SAAQ,QAAO,SAAS,CAAC,MAAM,oBAAC,aAAW,GAAI,GAA2D,GAAI;AAAA,OAC3H;AAAA,KAEN,GACF;AAGF,SACE,qBAAC,SAAI,WAAW,cACb;AAAA,aAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,IAChF;AAAA,KACH;AAEJ;AAEA,IAAO,uBAAQ;",
+  "names": []
+}

package/dist/backend/charts/TopNTable.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((current, key) => {
+    if (current && typeof current === "object" && key in current) {
+      return current[key];
+    }
+    return void 0;
+  }, obj);
+}
+function defaultFormatter(value) {
+  if (value === null || value === void 0) return "--";
+  if (typeof value === "number") {
+    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 });
+  }
+  return String(value);
+}
+function TopNTable({
+  title,
+  data,
+  columns,
+  loading,
+  error,
+  className = "",
+  emptyMessage = "No data available",
+  maxRows
+}) {
+  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 }),
+      /* @__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: `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: "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: `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: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) })
+    ] });
+  }
+  const displayData = maxRows && maxRows > 0 ? data.slice(0, maxRows) : data;
+  const getAlignClass = (align) => {
+    if (align === "right") return "text-right";
+    if (align === "center") return "text-center";
+    return "text-left";
+  };
+  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: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border", children: columns.map((column) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: `pb-2 text-sm font-medium text-muted-foreground ${getAlignClass(column.align)}`,
+          style: column.width ? { width: column.width } : void 0,
+          children: column.header
+        },
+        String(column.key)
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: displayData.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border last:border-0", children: columns.map((column) => {
+        const rawValue = getNestedValue(row, String(column.key));
+        const formatted = column.formatter ? column.formatter(rawValue, row) : defaultFormatter(rawValue);
+        return /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: `py-2 text-sm text-card-foreground ${getAlignClass(column.align)}`,
+            children: formatted
+          },
+          String(column.key)
+        );
+      }) }, rowIndex)) })
+    ] }) })
+  ] });
+}
+var TopNTable_default = TopNTable;
+export {
+  TopNTable,
+  TopNTable_default as default
+};
+//# sourceMappingURL=TopNTable.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/TopNTable.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Spinner } from '@freighttech/ui/primitives/spinner'\n\nexport type TopNTableColumn<T = Record<string, unknown>> = {\n  key: keyof T | string\n  header: string\n  formatter?: (value: unknown, row: T) => React.ReactNode\n  align?: 'left' | 'center' | 'right'\n  width?: string\n}\n\nexport type TopNTableProps<T = Record<string, unknown>> = {\n  title?: string\n  data: T[]\n  columns: TopNTableColumn<T>[]\n  loading?: boolean\n  error?: string | null\n  className?: string\n  emptyMessage?: string\n  maxRows?: number\n}\n\nfunction getNestedValue(obj: Record<string, unknown>, path: string): unknown {\n  return path.split('.').reduce<unknown>((current, key) => {\n    if (current && typeof current === 'object' && key in current) {\n      return (current as Record<string, unknown>)[key]\n    }\n    return undefined\n  }, obj)\n}\n\nfunction defaultFormatter(value: unknown): React.ReactNode {\n  if (value === null || value === undefined) return '--'\n  if (typeof value === 'number') {\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  return String(value)\n}\n\nexport function TopNTable<T extends Record<string, unknown>>({\n  title,\n  data,\n  columns,\n  loading,\n  error,\n  className = '',\n  emptyMessage = 'No data available',\n  maxRows,\n}: TopNTableProps<T>) {\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 displayData = maxRows && maxRows > 0 ? data.slice(0, maxRows) : data\n\n  const getAlignClass = (align?: 'left' | 'center' | 'right') => {\n    if (align === 'right') return 'text-right'\n    if (align === 'center') return 'text-center'\n    return 'text-left'\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=\"overflow-x-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"border-b border-border\">\n              {columns.map((column) => (\n                <th\n                  key={String(column.key)}\n                  className={`pb-2 text-sm font-medium text-muted-foreground ${getAlignClass(column.align)}`}\n                  style={column.width ? { width: column.width } : undefined}\n                >\n                  {column.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {displayData.map((row, rowIndex) => (\n              <tr key={rowIndex} className=\"border-b border-border last:border-0\">\n                {columns.map((column) => {\n                  const rawValue = getNestedValue(row as Record<string, unknown>, String(column.key))\n                  const formatted = column.formatter ? column.formatter(rawValue, row) : defaultFormatter(rawValue)\n                  return (\n                    <td\n                      key={String(column.key)}\n                      className={`py-2 text-sm text-card-foreground ${getAlignClass(column.align)}`}\n                    >\n                      {formatted}\n                    </td>\n                  )\n                })}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  )\n}\n\nexport default TopNTable\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/charts/WaterfallChart.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ComposedChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+  LabelList
+} from "recharts";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+function defaultFmt(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 computeWaterfall(data, colors) {
+  let cumulative = 0;
+  return data.map((step) => {
+    if (step.isTotal) {
+      const out = {
+        label: step.label,
+        base: 0,
+        bar: Math.abs(step.value),
+        display: step.value,
+        fill: colors.total
+      };
+      cumulative = step.value;
+      return out;
+    }
+    const next = cumulative + step.value;
+    const base = Math.min(cumulative, next);
+    const bar = Math.abs(step.value);
+    const fill = step.value >= 0 ? colors.up : colors.down;
+    cumulative = next;
+    return { label: step.label, base, bar, display: step.value, fill };
+  });
+}
+function WaterfallChart({
+  title,
+  data,
+  loading,
+  error,
+  valueFormatter = defaultFmt,
+  colorUp = "hsl(var(--chart-2, 160 84% 39%))",
+  colorDown = "hsl(var(--destructive))",
+  colorTotal = "hsl(var(--chart-1, 221 83% 53%))",
+  showValues = false,
+  className = "",
+  emptyMessage = "No data available"
+}) {
+  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-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 computed = computeWaterfall(data, { up: colorUp, down: colorDown, total: colorTotal });
+  const chartContent = /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 240, children: /* @__PURE__ */ jsxs(ComposedChart, { data: computed, margin: { top: 10, right: 20, bottom: 5, left: 10 }, children: [
+    /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))", vertical: false }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: "label", tick: { fontSize: 10 }, interval: 0 }),
+    /* @__PURE__ */ jsx(YAxis, { tickFormatter: valueFormatter, tick: { fontSize: 10 }, width: 50 }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        cursor: { fill: "hsl(var(--muted))", opacity: 0.2 },
+        content: ({ active, payload }) => {
+          if (!active || !payload?.length) return null;
+          const p = payload[0].payload;
+          return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-popover px-3 py-2 text-popover-foreground shadow-md", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-1 text-sm font-medium", children: p.label }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm tabular-nums", children: valueFormatter(p.display) })
+          ] });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Bar, { dataKey: "base", stackId: "wf", fill: "transparent", isAnimationActive: false }),
+    /* @__PURE__ */ jsxs(Bar, { dataKey: "bar", stackId: "wf", radius: [2, 2, 0, 0], isAnimationActive: false, children: [
+      computed.map((c, idx) => /* @__PURE__ */ jsx(Cell, { fill: c.fill }, idx)),
+      showValues && /* @__PURE__ */ jsx(
+        LabelList,
+        {
+          dataKey: "display",
+          content: (props) => {
+            const { x, y, width } = props;
+            const value = props.value;
+            if (typeof x !== "number" || typeof y !== "number" || typeof width !== "number" || typeof value !== "number") {
+              return null;
+            }
+            return /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: x + width / 2,
+                y: y - 6,
+                textAnchor: "middle",
+                dominantBaseline: "auto",
+                fontSize: 10,
+                fontWeight: 600,
+                fill: "hsl(var(--foreground))",
+                children: valueFormatter(value)
+              }
+            );
+          }
+        }
+      )
+    ] })
+  ] }) });
+  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 WaterfallChart_default = WaterfallChart;
+export {
+  WaterfallChart,
+  computeWaterfall,
+  WaterfallChart_default as default
+};
+//# sourceMappingURL=WaterfallChart.js.map