@withpotter/components 0.13.0-next.101

package/dist/charts/series-breakdown.d.ts

@@ -0,0 +1,50 @@
+export interface BreakdownSeries {
+    key: string;
+    label: string;
+    /**
+     * Total across the period. Derived from `points` when omitted, which is the
+     * safer way round: a caller-supplied total is a second source of truth for a
+     * number the chart is already drawing, and the two disagreeing is precisely
+     * the failure this component exists to remove. Pass it only when the total
+     * genuinely comes from elsewhere (a server aggregate over a wider window
+     * than the points cover).
+     */
+    total?: number;
+}
+export interface BreakdownPoint {
+    /** Epoch ms, or any sortable number. */
+    t: number;
+    values: Record<string, number>;
+}
+export interface SeriesBreakdownProps {
+    series: BreakdownSeries[];
+    points: BreakdownPoint[];
+    /** Headline above the chart. Defaults to the sum of the series totals. */
+    total?: number;
+    totalLabel?: string;
+    /**
+     * Draw the headline total, or leave it to the caller.
+     *
+     * On by default — the total belongs with the chart it is drawn from. Off for
+     * a caller that already states the figure directly above, which on the Sales
+     * view is a `MetricRow` carrying the same number with its delta against the
+     * prior window: two printings of one total, one screen apart, is the exact
+     * duplication the chart-and-table-as-one-object rule exists to prevent.
+     */
+    headline?: boolean;
+    /** Column heading over the series names: "Response code", "Channel". */
+    dimensionLabel?: string;
+    formatValue?: (v: number) => string;
+    formatDate?: (t: number) => string;
+    height?: number;
+    /** Filename for the CSV control. Omit to hide it. */
+    exportName?: string;
+    emptyMessage?: string;
+    /**
+     * Offer the log-scale switch. On by default once the spread earns it: a
+     * series at 6 against one at 5,104 is a flat line on a linear axis, which
+     * is the case a split chart most often has to show.
+     */
+    allowLogScale?: boolean;
+}
+export declare function SeriesBreakdown({ series, points, total, totalLabel, dimensionLabel, formatValue, formatDate, height, exportName, emptyMessage, allowLogScale, headline: showHeadline, }: SeriesBreakdownProps): import("react").JSX.Element;

package/dist/charts/series-breakdown.js

@@ -0,0 +1,293 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { ChartNoAxesCombined, ChartSpline } from "lucide-react";
+import { useChartTheme, CHART_GRID, CHART_TICK_STYLE } from "./chart-theme";
+import { EmptyState } from "./chart-empty-state";
+import { Button } from "@withpotter/ui-kit/button";
+import { TableShell, Th, TableRow } from "@withpotter/ui-kit/table-shell";
+import { toCsv } from "@withpotter/lib/csv";
+const MAX_SERIES = 8;
+function SeriesBreakdown({
+  series,
+  points,
+  total,
+  totalLabel = "Total",
+  dimensionLabel = "Series",
+  formatValue = (v) => v.toLocaleString(),
+  formatDate,
+  height = 260,
+  exportName,
+  emptyMessage = "No data for this period",
+  allowLogScale = true,
+  headline: showHeadline = true
+}) {
+  const theme = useChartTheme();
+  const [isolated, setIsolated] = useState(/* @__PURE__ */ new Set());
+  const [log, setLog] = useState(false);
+  const shown = useMemo(() => {
+    const totalled = series.map((s) => ({
+      ...s,
+      total: s.total ?? points.reduce((sum, p) => sum + (p.values[s.key] ?? 0), 0)
+    }));
+    const ranked = totalled.sort((a, b) => b.total - a.total);
+    if (ranked.length <= MAX_SERIES) return ranked;
+    const head = ranked.slice(0, MAX_SERIES - 1);
+    const tail = ranked.slice(MAX_SERIES - 1);
+    return [
+      ...head,
+      {
+        key: "__other__",
+        label: `Other (${tail.length})`,
+        total: tail.reduce((sum, s) => sum + s.total, 0)
+      }
+    ];
+  }, [series, points]);
+  const colorOf = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    series.forEach(
+      (s, i) => map.set(s.key, theme.series[i % theme.series.length])
+    );
+    map.set("__other__", theme.series[theme.series.length - 1]);
+    return map;
+  }, [series, theme.series]);
+  const headline = total ?? shown.reduce((sum, s) => sum + s.total, 0);
+  const spread = useMemo(() => {
+    const totals = shown.map((s) => s.total).filter((v) => v > 0);
+    if (totals.length < 2) return 1;
+    return Math.max(...totals) / Math.min(...totals);
+  }, [shown]);
+  const offerLog = allowLogScale && spread >= 20;
+  const active = isolated.size === 0 ? shown : shown.filter((s) => isolated.has(s.key));
+  const chartData = useMemo(
+    () => points.map((p) => {
+      const row = { t: p.t };
+      for (const s of shown) {
+        row[s.key] = s.key === "__other__" ? Object.entries(p.values).filter(([k]) => !shown.some((x) => x.key === k)).reduce((sum, [, v]) => sum + v, 0) : p.values[s.key] ?? 0;
+      }
+      return row;
+    }),
+    [points, shown]
+  );
+  const integral = useMemo(
+    () => chartData.every(
+      (row) => shown.every((s) => Number.isInteger(row[s.key] ?? 0))
+    ),
+    [chartData, shown]
+  );
+  const axisWidth = useMemo(() => {
+    const peak = chartData.reduce((max, row) => {
+      for (const s of shown) max = Math.max(max, row[s.key] ?? 0);
+      return max;
+    }, 0);
+    return Math.min(96, Math.max(32, formatValue(peak).length * 6.5 + 10));
+  }, [chartData, shown, formatValue]);
+  const tick = (t) => formatDate ? formatDate(t) : new Date(t).toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  });
+  const download = () => {
+    const rows = [
+      ["Date", ...shown.map((s) => s.label)],
+      ...chartData.map((row) => [
+        tick(row.t),
+        ...shown.map((s) => String(row[s.key] ?? 0))
+      ])
+    ];
+    const url = URL.createObjectURL(
+      new Blob([toCsv(rows)], { type: "text/csv" })
+    );
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${exportName}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  if (series.length === 0 || points.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { icon: ChartNoAxesCombined, message: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      showHeadline ? /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: totalLabel }),
+        /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold text-[var(--text-primary)]", children: formatValue(headline) })
+      ] }) : (
+        // Holds the controls at the right-hand end without the total.
+        /* @__PURE__ */ jsx("span", {})
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        offerLog ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            onClick: () => setLog((v) => !v),
+            icon: log ? /* @__PURE__ */ jsx(ChartNoAxesCombined, {}) : /* @__PURE__ */ jsx(ChartSpline, {}),
+            title: log ? "Back to a linear axis" : "Log axis \u2014 makes the small series readable beside the large one",
+            children: log ? "Log scale" : "Linear scale"
+          }
+        ) : null,
+        exportName ? /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: download, children: "CSV" }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      LineChart,
+      {
+        data: chartData,
+        margin: { top: 4, right: 8, bottom: 0, left: 0 },
+        children: [
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              stroke: CHART_GRID,
+              strokeDasharray: "3 3",
+              vertical: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "t",
+              type: "number",
+              domain: ["dataMin", "dataMax"],
+              scale: "time",
+              tickFormatter: tick,
+              tick: CHART_TICK_STYLE,
+              axisLine: false,
+              tickLine: false,
+              minTickGap: 32
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              allowDecimals: !integral,
+              scale: log ? "log" : "auto",
+              domain: log ? [(dataMin) => Math.max(1, dataMin), "dataMax"] : void 0,
+              allowDataOverflow: log,
+              tick: CHART_TICK_STYLE,
+              axisLine: false,
+              tickLine: false,
+              width: axisWidth,
+              tickFormatter: (v) => formatValue(v)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              cursor: { stroke: CHART_GRID },
+              labelFormatter: (t) => tick(Number(t)),
+              formatter: (value, name) => {
+                const key = String(name ?? "");
+                return [
+                  formatValue(Number(value ?? 0)),
+                  shown.find((series2) => series2.key === key)?.label ?? key
+                ];
+              },
+              contentStyle: {
+                borderRadius: 8,
+                border: "1px solid var(--border-default)",
+                backgroundColor: "var(--bg-base)",
+                fontSize: 12
+              }
+            }
+          ),
+          active.map((s) => /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: "linear",
+              dataKey: s.key,
+              stroke: colorOf.get(s.key),
+              strokeWidth: 2,
+              dot: false,
+              activeDot: { r: 4 },
+              isAnimationActive: false
+            },
+            s.key
+          ))
+        ]
+      }
+    ) }) }),
+    shown.length > 1 ? /* @__PURE__ */ jsx(
+      TableShell,
+      {
+        density: "compact",
+        minWidth: 320,
+        head: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx(Th, { children: dimensionLabel }),
+          /* @__PURE__ */ jsx(Th, { align: "right", children: "Value" })
+        ] }),
+        children: shown.map((s) => {
+          const on = isolated.size === 0 || isolated.has(s.key);
+          return /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              active: isolated.has(s.key),
+              onClick: () => setIsolated((prev) => {
+                const next = new Set(prev);
+                if (next.has(s.key)) next.delete(s.key);
+                else next.add(s.key);
+                return next;
+              }),
+              children: [
+                /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: `flex items-center gap-3 text-sm ${on ? "text-[var(--text-primary)]" : "text-[var(--text-muted)]"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: "h-3.5 w-1 shrink-0 rounded-full",
+                          style: {
+                            backgroundColor: colorOf.get(s.key),
+                            opacity: on ? 1 : 0.35
+                          }
+                        }
+                      ),
+                      s.label
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: `px-4 py-3 text-right text-sm tabular-nums ${on ? "text-[var(--text-secondary)]" : "text-[var(--text-muted)]"}`,
+                    children: formatValue(s.total)
+                  }
+                )
+              ]
+            },
+            s.key
+          );
+        })
+      }
+    ) : null,
+    isolated.size > 0 ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsolated(/* @__PURE__ */ new Set()),
+        className: "text-xs text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]",
+        children: [
+          "Show all ",
+          shown.length
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  SeriesBreakdown
+};
+//# sourceMappingURL=series-breakdown.js.map

package/dist/charts/series-breakdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/series-breakdown.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport {\n  CartesianGrid,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport { ChartNoAxesCombined, ChartSpline } from 'lucide-react';\nimport { useChartTheme, CHART_GRID, CHART_TICK_STYLE } from './chart-theme';\nimport { EmptyState } from './chart-empty-state';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { TableShell, Th, TableRow } from '@withpotter/ui-kit/table-shell';\nimport { toCsv } from '@withpotter/lib/csv';\n\n/**\n * A measure split by a dimension: the chart and the breakdown are ONE object.\n *\n * Analytics kept drawing these as two things that happened to sit near each\n * other — a chart with a legend, and a table repeating the same names below it,\n * each with its own idea of what colour a series was. So the legend named\n * things the table did not, and reading \"which status is the orange line\"\n * meant looking in two places and trusting they agreed.\n *\n * Here the table IS the legend. One colour per series, assigned from the\n * series' own position and never from its rank, so isolating a series or\n * dropping one from the query leaves every survivor the colour it had. That is\n * the rule that makes the pairing readable at all: if colour moved when the\n * set changed, the table would be re-teaching the reader every time.\n *\n * It also discharges the palette's contrast warning. Three of the eight slots\n * sit under 3:1 on the light surface, which is legal only where the mark ships\n * a visible label beside it — the breakdown row is that label, always present.\n */\n\n/** Nine or more series is past what the palette can name. */\nconst MAX_SERIES = 8;\n\nexport interface BreakdownSeries {\n  key: string;\n  label: string;\n  /**\n   * Total across the period. Derived from `points` when omitted, which is the\n   * safer way round: a caller-supplied total is a second source of truth for a\n   * number the chart is already drawing, and the two disagreeing is precisely\n   * the failure this component exists to remove. Pass it only when the total\n   * genuinely comes from elsewhere (a server aggregate over a wider window\n   * than the points cover).\n   */\n  total?: number;\n}\n\nexport interface BreakdownPoint {\n  /** Epoch ms, or any sortable number. */\n  t: number;\n  values: Record<string, number>;\n}\n\nexport interface SeriesBreakdownProps {\n  series: BreakdownSeries[];\n  points: BreakdownPoint[];\n  /** Headline above the chart. Defaults to the sum of the series totals. */\n  total?: number;\n  totalLabel?: string;\n  /**\n   * Draw the headline total, or leave it to the caller.\n   *\n   * On by default — the total belongs with the chart it is drawn from. Off for\n   * a caller that already states the figure directly above, which on the Sales\n   * view is a `MetricRow` carrying the same number with its delta against the\n   * prior window: two printings of one total, one screen apart, is the exact\n   * duplication the chart-and-table-as-one-object rule exists to prevent.\n   */\n  headline?: boolean;\n  /** Column heading over the series names: \"Response code\", \"Channel\". */\n  dimensionLabel?: string;\n  formatValue?: (v: number) => string;\n  formatDate?: (t: number) => string;\n  height?: number;\n  /** Filename for the CSV control. Omit to hide it. */\n  exportName?: string;\n  emptyMessage?: string;\n  /**\n   * Offer the log-scale switch. On by default once the spread earns it: a\n   * series at 6 against one at 5,104 is a flat line on a linear axis, which\n   * is the case a split chart most often has to show.\n   */\n  allowLogScale?: boolean;\n}\n\nexport function SeriesBreakdown({\n  series,\n  points,\n  total,\n  totalLabel = 'Total',\n  dimensionLabel = 'Series',\n  formatValue = (v) => v.toLocaleString(),\n  formatDate,\n  height = 260,\n  exportName,\n  emptyMessage = 'No data for this period',\n  allowLogScale = true,\n  headline: showHeadline = true,\n}: SeriesBreakdownProps) {\n  const theme = useChartTheme();\n  const [isolated, setIsolated] = useState<Set<string>>(new Set());\n  const [log, setLog] = useState(false);\n\n  /**\n   * Colour is bound here, once, to the series' own position. Everything\n   * downstream reads this map rather than an array index, so a filtered or\n   * isolated chart never repaints the series that survived.\n   */\n  const shown = useMemo(() => {\n    const totalled = series.map((s) => ({\n      ...s,\n      total:\n        s.total ?? points.reduce((sum, p) => sum + (p.values[s.key] ?? 0), 0),\n    }));\n    const ranked = totalled.sort((a, b) => b.total - a.total);\n    if (ranked.length <= MAX_SERIES) return ranked;\n    // A ninth series is not a ninth hue: the tail folds into one row.\n    const head = ranked.slice(0, MAX_SERIES - 1);\n    const tail = ranked.slice(MAX_SERIES - 1);\n    return [\n      ...head,\n      {\n        key: '__other__',\n        label: `Other (${tail.length})`,\n        total: tail.reduce((sum, s) => sum + s.total, 0),\n      },\n    ];\n  }, [series, points]);\n\n  /**\n   * Bound to the order the CALLER declared, not to the order the rows happen\n   * to sort into. Sorting by total and colouring by the sorted index would\n   * mean a quiet week that moved Card above Cash silently swapped their two\n   * colours, and every reading of the chart before that point becomes wrong.\n   * Declared order is stable across periods, filters and isolation.\n   */\n  const colorOf = useMemo(() => {\n    const map = new Map<string, string>();\n    series.forEach((s, i) =>\n      map.set(s.key, theme.series[i % theme.series.length]),\n    );\n    // The folded tail is not one of the declared series; it takes the last slot.\n    map.set('__other__', theme.series[theme.series.length - 1]);\n    return map;\n  }, [series, theme.series]);\n\n  const headline = total ?? shown.reduce((sum, s) => sum + s.total, 0);\n\n  /**\n   * Only offered when it would change what you can see. The largest series\n   * being 20x the smallest is roughly where the small one stops being\n   * readable against a linear axis; below that the switch is a control that\n   * does nothing, which is worse than no control.\n   */\n  const spread = useMemo(() => {\n    const totals = shown.map((s) => s.total).filter((v) => v > 0);\n    if (totals.length < 2) return 1;\n    return Math.max(...totals) / Math.min(...totals);\n  }, [shown]);\n  const offerLog = allowLogScale && spread >= 20;\n  const active =\n    isolated.size === 0 ? shown : shown.filter((s) => isolated.has(s.key));\n\n  const chartData = useMemo(\n    () =>\n      points.map((p) => {\n        const row: Record<string, number> = { t: p.t };\n        for (const s of shown) {\n          row[s.key] =\n            s.key === '__other__'\n              ? Object.entries(p.values)\n                  .filter(([k]) => !shown.some((x) => x.key === k))\n                  .reduce((sum, [, v]) => sum + v, 0)\n              : (p.values[s.key] ?? 0);\n        }\n        return row;\n      }),\n    [points, shown],\n  );\n\n  /** Whole numbers all the way down: no fractional ticks on a count. */\n  const integral = useMemo(\n    () =>\n      chartData.every((row) =>\n        shown.every((s) => Number.isInteger(row[s.key] ?? 0)),\n      ),\n    [chartData, shown],\n  );\n\n  /** ~6.5px per character at the 11px tick size, plus the gap to the plot. */\n  const axisWidth = useMemo(() => {\n    const peak = chartData.reduce((max, row) => {\n      for (const s of shown) max = Math.max(max, row[s.key] ?? 0);\n      return max;\n    }, 0);\n    return Math.min(96, Math.max(32, formatValue(peak).length * 6.5 + 10));\n  }, [chartData, shown, formatValue]);\n\n  const tick = (t: number) =>\n    formatDate\n      ? formatDate(t)\n      : new Date(t).toLocaleDateString(undefined, {\n          month: 'short',\n          day: 'numeric',\n        });\n\n  const download = () => {\n    const rows = [\n      ['Date', ...shown.map((s) => s.label)],\n      ...chartData.map((row) => [\n        tick(row.t),\n        ...shown.map((s) => String(row[s.key] ?? 0)),\n      ]),\n    ];\n    const url = URL.createObjectURL(\n      new Blob([toCsv(rows)], { type: 'text/csv' }),\n    );\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = `${exportName}.csv`;\n    a.click();\n    URL.revokeObjectURL(url);\n  };\n\n  if (series.length === 0 || points.length === 0) {\n    return <EmptyState icon={ChartNoAxesCombined} message={emptyMessage} />;\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex items-start justify-between gap-3\">\n        {showHeadline ? (\n          <div>\n            <p className=\"text-xs text-[var(--text-tertiary)]\">{totalLabel}</p>\n            <p className=\"text-2xl font-semibold text-[var(--text-primary)]\">\n              {formatValue(headline)}\n            </p>\n          </div>\n        ) : (\n          // Holds the controls at the right-hand end without the total.\n          <span />\n        )}\n        <div className=\"flex items-center gap-2\">\n          {offerLog ? (\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={() => setLog((v) => !v)}\n              icon={log ? <ChartNoAxesCombined /> : <ChartSpline />}\n              title={\n                log\n                  ? 'Back to a linear axis'\n                  : 'Log axis — makes the small series readable beside the large one'\n              }\n            >\n              {log ? 'Log scale' : 'Linear scale'}\n            </Button>\n          ) : null}\n          {exportName ? (\n            <Button variant=\"secondary\" size=\"sm\" onClick={download}>\n              CSV\n            </Button>\n          ) : null}\n        </div>\n      </div>\n\n      <div style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <LineChart\n            data={chartData}\n            margin={{ top: 4, right: 8, bottom: 0, left: 0 }}\n          >\n            <CartesianGrid\n              stroke={CHART_GRID}\n              strokeDasharray=\"3 3\"\n              vertical={false}\n            />\n            <XAxis\n              dataKey=\"t\"\n              type=\"number\"\n              domain={['dataMin', 'dataMax']}\n              scale=\"time\"\n              tickFormatter={tick}\n              tick={CHART_TICK_STYLE}\n              axisLine={false}\n              tickLine={false}\n              minTickGap={32}\n            />\n            <YAxis\n              // Counts have no half. Left to itself the axis ticked 0, 0.75,\n              // 1.5, 2.25 over a series of whole orders, which reads as a\n              // measurement precision the data does not have.\n              allowDecimals={!integral}\n              // A log axis cannot plot 0, so the floor is the smallest real\n              // value rather than the origin; `allowDataOverflow` keeps a zero\n              // day from collapsing the domain.\n              scale={log ? 'log' : 'auto'}\n              domain={\n                log\n                  ? [(dataMin: number) => Math.max(1, dataMin), 'dataMax']\n                  : undefined\n              }\n              allowDataOverflow={log}\n              tick={CHART_TICK_STYLE}\n              axisLine={false}\n              tickLine={false}\n              // Fit the axis to the widest label it will actually draw. A fixed\n              // band clips the moment `formatValue` is a currency — visible one\n              // card up in charts-lab, where \"₦80,000\" renders as \"0,000\".\n              width={axisWidth}\n              tickFormatter={(v: number) => formatValue(v)}\n            />\n            <Tooltip\n              // One crosshair, every series at that instant — the question a\n              // split chart is asked is \"what happened here\", not \"what did\n              // this one line do\".\n              cursor={{ stroke: CHART_GRID }}\n              labelFormatter={(t) => tick(Number(t))}\n              formatter={(value, name) => {\n                const key = String(name ?? '');\n                return [\n                  formatValue(Number(value ?? 0)),\n                  shown.find((series) => series.key === key)?.label ?? key,\n                ];\n              }}\n              contentStyle={{\n                borderRadius: 8,\n                border: '1px solid var(--border-default)',\n                backgroundColor: 'var(--bg-base)',\n                fontSize: 12,\n              }}\n            />\n            {active.map((s) => (\n              <Line\n                key={s.key}\n                // Straight segments, not a spline. These are daily samples,\n                // and a monotone curve between \"1 on Tuesday\" and \"0 on\n                // Wednesday\" draws a smooth hill through values that were\n                // never measured — on sparse counts it turns a flat week into\n                // a wave. A line may join two readings; it may not invent the\n                // ones between them.\n                type=\"linear\"\n                dataKey={s.key}\n                stroke={colorOf.get(s.key)}\n                strokeWidth={2}\n                dot={false}\n                activeDot={{ r: 4 }}\n                isAnimationActive={false}\n              />\n            ))}\n          </LineChart>\n        </ResponsiveContainer>\n      </div>\n\n      {/* One series has no breakdown to show.\n          The table here IS the legend — that is the whole reason the chart and\n          the table are one object, so a name and a colour have no second place\n          to disagree. With a single series it degenerates into one row naming\n          the measure the headline already names, against a share that is\n          always 100% of itself. The chart, the total and the controls are the\n          grammar; the table arrives with the second series. */}\n      {shown.length > 1 ? (\n        <TableShell\n          density=\"compact\"\n          minWidth={320}\n          head={\n            <tr>\n              <Th>{dimensionLabel}</Th>\n              <Th align=\"right\">Value</Th>\n            </tr>\n          }\n        >\n          {shown.map((s) => {\n            const on = isolated.size === 0 || isolated.has(s.key);\n            return (\n              <TableRow\n                key={s.key}\n                active={isolated.has(s.key)}\n                onClick={() =>\n                  setIsolated((prev) => {\n                    const next = new Set(prev);\n                    if (next.has(s.key)) next.delete(s.key);\n                    else next.add(s.key);\n                    return next;\n                  })\n                }\n              >\n                <td>\n                  <span\n                    className={`flex items-center gap-3 text-sm ${\n                      on\n                        ? 'text-[var(--text-primary)]'\n                        : 'text-[var(--text-muted)]'\n                    }`}\n                  >\n                    <span\n                      aria-hidden\n                      className=\"h-3.5 w-1 shrink-0 rounded-full\"\n                      style={{\n                        backgroundColor: colorOf.get(s.key),\n                        opacity: on ? 1 : 0.35,\n                      }}\n                    />\n                    {s.label}\n                  </span>\n                </td>\n                <td\n                  className={`px-4 py-3 text-right text-sm tabular-nums ${\n                    on\n                      ? 'text-[var(--text-secondary)]'\n                      : 'text-[var(--text-muted)]'\n                  }`}\n                >\n                  {formatValue(s.total)}\n                </td>\n              </TableRow>\n            );\n          })}\n        </TableShell>\n      ) : null}\n\n      {isolated.size > 0 ? (\n        <button\n          type=\"button\"\n          onClick={() => setIsolated(new Set())}\n          className=\"text-xs text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]\"\n        >\n          Show all {shown.length}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":["series"]}

package/dist/charts/time-series-chart.d.ts

@@ -0,0 +1,25 @@
+import type { TimeSeriesPoint } from '@withpotter/lib/api/types';
+/**
+ * A single measure over time. Flat fill, not a gradient: the fade used to imply
+ * the values were dropping off toward the axis when nothing of the sort was
+ * happening.
+ */
+export declare function TimeSeriesChart({ data, color, formatValue, height, label, project, compare, compareLabel, emptyMessage, }: {
+    data: TimeSeriesPoint[];
+    color?: string;
+    formatValue?: (v: number) => string;
+    height?: number;
+    label?: string;
+    /** Extend the trend past the last point, if the data earns it. */
+    project?: boolean;
+    /**
+     * The window before this one, so the series can be read as a change rather
+     * than as a level. A count on its own says how many; it takes a baseline to
+     * say more or fewer, which is the question the reader actually arrived with.
+     */
+    compare?: TimeSeriesPoint[] | null;
+    /** What that baseline is called, e.g. "Previous 30 days". */
+    compareLabel?: string;
+    /** What's specifically missing, e.g. "No sign-ups in this window". */
+    emptyMessage?: string;
+}): import("react").JSX.Element;