@withpotter/components 0.13.0-next.101

package/dist/charts/time-series-chart.js

@@ -0,0 +1,267 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChartNoAxesCombined } from "lucide-react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer
+} from "recharts";
+import { formatShortDate } from "@withpotter/lib/format";
+import {
+  CompareTooltip,
+  isIntraday,
+  clock
+} from "./compare-tooltip";
+import { EmptyState } from "./chart-empty-state";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+import {
+  useChartTheme,
+  CHART_GRID,
+  CHART_TICK_STYLE,
+  CHART_TOOLTIP
+} from "./chart-theme";
+const DAY = 864e5;
+function toTimeScale(data) {
+  const points = data.map((pt) => ({ t: new Date(pt.date).getTime(), value: pt.value })).filter((p) => Number.isFinite(p.t)).sort((a, b) => a.t - b.t);
+  if (points.length < 2) return points;
+  const gaps = points.slice(1).map((p, i) => p.t - points[i].t);
+  const smallest = Math.min(...gaps);
+  const isDaily = Math.abs(smallest - DAY) < DAY * 0.2;
+  if (!isDaily) return points;
+  const byDay = new Map(points.map((p) => [Math.floor(p.t / DAY), p.value]));
+  const first = Math.floor(points[0].t / DAY);
+  const last = Math.floor(points[points.length - 1].t / DAY);
+  const filled = [];
+  for (let d = first; d <= last; d++) {
+    filled.push({ t: d * DAY, value: byDay.get(d) ?? 0 });
+  }
+  return filled;
+}
+function niceCeil(value) {
+  if (!Number.isFinite(value) || value <= 0) return 1;
+  const magnitude = 10 ** Math.floor(Math.log10(value));
+  for (const step of [1, 1.5, 2, 2.5, 3, 4, 5, 6, 8]) {
+    const candidate = step * magnitude;
+    if (value <= candidate) return candidate;
+  }
+  return 10 * magnitude;
+}
+const MIN_HISTORY = 7;
+const MIN_FIT = 0.35;
+function withProjection(points) {
+  const base = points.map((p) => ({
+    t: p.t,
+    value: p.value,
+    projected: null
+  }));
+  if (points.length < MIN_HISTORY) return base;
+  const n = points.length;
+  const meanX = (n - 1) / 2;
+  const meanY = points.reduce((sum, p) => sum + p.value, 0) / n;
+  let sxy = 0;
+  let sxx = 0;
+  let syy = 0;
+  points.forEach((p, i) => {
+    sxy += (i - meanX) * (p.value - meanY);
+    sxx += (i - meanX) ** 2;
+    syy += (p.value - meanY) ** 2;
+  });
+  if (sxx === 0 || syy === 0) return base;
+  const slope = sxy / sxx;
+  const intercept = meanY - slope * meanX;
+  const fit = sxy * sxy / (sxx * syy);
+  if (fit < MIN_FIT) return base;
+  const step = points[n - 1].t - points[n - 2].t;
+  const ahead = Math.max(2, Math.min(14, Math.round(n / 3)));
+  const last = base[n - 1];
+  last.projected = last.value;
+  for (let k = 1; k <= ahead; k++) {
+    const i = n - 1 + k;
+    base.push({
+      t: points[n - 1].t + step * k,
+      value: null,
+      // Never below zero: a count cannot go negative however steep the fall.
+      projected: Math.max(0, Math.round(intercept + slope * i))
+    });
+  }
+  return base;
+}
+function TimeSeriesChart({
+  data,
+  color,
+  formatValue,
+  height = 240,
+  label,
+  project = false,
+  compare,
+  compareLabel,
+  emptyMessage = "No data for this period"
+}) {
+  const theme = useChartTheme();
+  const isMobile = useIsMobile();
+  const chartHeight = isMobile ? 180 : height;
+  const stroke = color ?? theme.series[0];
+  const ghost = "var(--text-muted)";
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { icon: ChartNoAxesCombined, message: emptyMessage });
+  }
+  const scaled = toTimeScale(data);
+  const comparePoints = compare?.length ? toTimeScale(compare) : [];
+  const hasCompare = comparePoints.length > 0;
+  const chartData = (project ? withProjection(scaled) : scaled.map((p) => ({ t: p.t, value: p.value }))).map((p, i) => ({
+    ...p,
+    compare: comparePoints[i]?.value ?? null,
+    compareT: comparePoints[i]?.t ?? null
+  }));
+  const intraday = isIntraday(scaled);
+  const maxValue = chartData.reduce(
+    (m, p) => Math.max(m, p.value ?? 0, p.projected ?? 0, p.compare ?? 0),
+    0
+  );
+  const axisMax = niceCeil(maxValue);
+  const widestLabel = formatValue ? formatValue(axisMax) : axisMax.toLocaleString();
+  const yAxisWidth = Math.max(24, widestLabel.length * 7 + 8);
+  const plot = /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      data: chartData,
+      margin: { top: 6, right: 6, bottom: 0, left: 0 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { stroke: CHART_GRID, vertical: false }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "t",
+            type: "number",
+            scale: "time",
+            domain: ["dataMin", "dataMax"],
+            tickFormatter: (t) => intraday ? clock(t) : formatShortDate(new Date(t).toISOString()),
+            tick: CHART_TICK_STYLE,
+            axisLine: false,
+            tickLine: false,
+            minTickGap: 24
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            tick: { ...CHART_TICK_STYLE, textAnchor: "end" },
+            axisLine: false,
+            tickLine: false,
+            tickFormatter: formatValue ? (v) => formatValue(v) : void 0,
+            width: yAxisWidth,
+            allowDecimals: false,
+            domain: [0, () => axisMax]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            cursor: { stroke: CHART_GRID, strokeWidth: 1 },
+            contentStyle: CHART_TOOLTIP,
+            content: hasCompare ? (
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              (props) => /* @__PURE__ */ jsx(
+                CompareTooltip,
+                {
+                  ...props,
+                  formatValue,
+                  intraday
+                }
+              )
+            ) : void 0,
+            labelFormatter: (t) => intraday ? clock(t) : formatShortDate(new Date(t).toISOString()),
+            formatter: (v) => {
+              const num = typeof v === "number" ? v : Number(v) || 0;
+              return [
+                formatValue ? formatValue(num) : num.toLocaleString(),
+                label || ""
+              ];
+            }
+          }
+        ),
+        hasCompare && /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: "compare",
+            stroke: ghost,
+            strokeWidth: 1.5,
+            strokeDasharray: "4 4",
+            fill: "none",
+            name: compareLabel ?? "Previous period",
+            dot: false,
+            activeDot: false,
+            connectNulls: true,
+            isAnimationActive: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: "value",
+            stroke,
+            strokeWidth: 2,
+            fill: stroke,
+            fillOpacity: 0.1,
+            name: label,
+            dot: false,
+            activeDot: { r: 4, strokeWidth: 0 },
+            connectNulls: false
+          }
+        ),
+        project && /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: "projected",
+            stroke,
+            strokeOpacity: 0.55,
+            strokeWidth: 1.5,
+            strokeDasharray: "4 4",
+            fill: "none",
+            name: label ? `${label}, projected` : "Projected",
+            dot: false,
+            activeDot: { r: 3, strokeWidth: 0 },
+            connectNulls: false
+          }
+        )
+      ]
+    }
+  ) });
+  if (!hasCompare) return plot;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex flex-wrap items-center justify-end gap-x-4 gap-y-1 text-2xs text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-[2px] w-3 rounded-full",
+            style: { backgroundColor: stroke }
+          }
+        ),
+        label ?? "This period"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "w-3 border-t-2 border-dashed",
+            style: { borderColor: ghost }
+          }
+        ),
+        compareLabel ?? "Previous period"
+      ] })
+    ] }),
+    plot
+  ] });
+}
+export {
+  TimeSeriesChart
+};
+//# sourceMappingURL=time-series-chart.js.map

package/dist/charts/time-series-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/time-series-chart.tsx"],"sourcesContent":["'use client';\n\nimport { ChartNoAxesCombined } from 'lucide-react';\nimport {\n  AreaChart,\n  Area,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts';\nimport { formatShortDate } from '@withpotter/lib/format';\nimport {\n  CompareTooltip,\n  isIntraday,\n  clock,\n  type SeriesRow,\n} from './compare-tooltip';\nimport { EmptyState } from './chart-empty-state';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport {\n  useChartTheme,\n  CHART_GRID,\n  CHART_TICK_STYLE,\n  CHART_TOOLTIP,\n} from './chart-theme';\nimport type { TimeSeriesPoint } from '@withpotter/lib/api/types';\n\nconst DAY = 86_400_000;\n\n/**\n * Put the points on a real time scale, and fill the days nothing happened.\n *\n * The x axis used to be a category axis over formatted date strings, so every\n * point got an equal slice of width no matter how far apart in time they were.\n * A series with points on Jul 25 and then Aug 5, 6, 7, 8 rendered the eleven-day\n * gap exactly as wide as each one-day step — so the line's slope was not a\n * rate, and a rise that happened inside a single day read as a gentle climb\n * across a fortnight. That is the chart misrepresenting the thing it exists to\n * show.\n *\n * Timestamps fix the spacing. Zero-filling fixes the rest: for a count, a day\n * with no row means nobody came, and interpolating a line straight across the\n * gap would draw visitors who were never there.\n *\n * Only daily series are filled. If the smallest gap between points is a week or\n * a month, the series is already bucketed and inventing days inside it would be\n * the same mistake in the other direction.\n */\nfunction toTimeScale(data: TimeSeriesPoint[]): { t: number; value: number }[] {\n  const points = data\n    .map((pt) => ({ t: new Date(pt.date).getTime(), value: pt.value }))\n    .filter((p) => Number.isFinite(p.t))\n    .sort((a, b) => a.t - b.t);\n\n  if (points.length < 2) return points;\n\n  const gaps = points.slice(1).map((p, i) => p.t - points[i].t);\n  const smallest = Math.min(...gaps);\n  const isDaily = Math.abs(smallest - DAY) < DAY * 0.2;\n  if (!isDaily) return points;\n\n  const byDay = new Map(points.map((p) => [Math.floor(p.t / DAY), p.value]));\n  const first = Math.floor(points[0].t / DAY);\n  const last = Math.floor(points[points.length - 1].t / DAY);\n\n  const filled: { t: number; value: number }[] = [];\n  for (let d = first; d <= last; d++) {\n    filled.push({ t: d * DAY, value: byDay.get(d) ?? 0 });\n  }\n  return filled;\n}\n\n/**\n * Round a maximum up to a number a person would have chosen.\n *\n * Recharts draws its own even ladder and then adds the domain's exact top, so a\n * series peaking at 761 rendered `761 / 600 / 400 / 200 / 0`: one measured value\n * sitting above four rounded ones, in the same ink, as if it were the same kind\n * of label. Giving the axis a round ceiling makes the whole ladder even, and the\n * peak is read off the line rather than off the axis.\n */\nfunction niceCeil(value: number): number {\n  if (!Number.isFinite(value) || value <= 0) return 1;\n  const magnitude = 10 ** Math.floor(Math.log10(value));\n  for (const step of [1, 1.5, 2, 2.5, 3, 4, 5, 6, 8]) {\n    const candidate = step * magnitude;\n    if (value <= candidate) return candidate;\n  }\n  return 10 * magnitude;\n}\n\n/** Fewer points than this and a trend line is drawing a shape out of noise. */\nconst MIN_HISTORY = 7;\n\n/**\n * How well the straight line has to fit before we are willing to extend it.\n * Below this the series is not trending, it is bouncing, and a projection drawn\n * through it would be a confident-looking guess.\n */\nconst MIN_FIT = 0.35;\n\n/**\n * \"At this rate\" — the trend continued, and only when there is a rate.\n *\n * A forecast is the easiest thing on a chart to draw and the easiest to lie\n * with. Three guards keep it honest: it needs a week of history before it will\n * draw at all, the straight line has to actually fit what happened (R² over a\n * floor), and it never runs further than a third of the window it learned from.\n * A merchant with four days of traffic gets no line, which is the correct\n * answer rather than a missing feature.\n *\n * Returned as a separate key so the projected span can be drawn dashed. The\n * handover point carries both values, or the two spans would render with a gap\n * between them.\n */\nfunction withProjection(\n  points: { t: number; value: number }[],\n): { t: number; value: number | null; projected: number | null }[] {\n  const base = points.map((p) => ({\n    t: p.t,\n    value: p.value as number | null,\n    projected: null as number | null,\n  }));\n  if (points.length < MIN_HISTORY) return base;\n\n  const n = points.length;\n  const meanX = (n - 1) / 2;\n  const meanY = points.reduce((sum, p) => sum + p.value, 0) / n;\n\n  let sxy = 0;\n  let sxx = 0;\n  let syy = 0;\n  points.forEach((p, i) => {\n    sxy += (i - meanX) * (p.value - meanY);\n    sxx += (i - meanX) ** 2;\n    syy += (p.value - meanY) ** 2;\n  });\n  if (sxx === 0 || syy === 0) return base;\n\n  const slope = sxy / sxx;\n  const intercept = meanY - slope * meanX;\n  // R²: how much of the movement the straight line actually accounts for.\n  const fit = (sxy * sxy) / (sxx * syy);\n  if (fit < MIN_FIT) return base;\n\n  const step = points[n - 1].t - points[n - 2].t;\n  const ahead = Math.max(2, Math.min(14, Math.round(n / 3)));\n\n  const last = base[n - 1];\n  last.projected = last.value;\n\n  for (let k = 1; k <= ahead; k++) {\n    const i = n - 1 + k;\n    base.push({\n      t: points[n - 1].t + step * k,\n      value: null,\n      // Never below zero: a count cannot go negative however steep the fall.\n      projected: Math.max(0, Math.round(intercept + slope * i)),\n    });\n  }\n  return base;\n}\n\n/**\n * A single measure over time. Flat fill, not a gradient: the fade used to imply\n * the values were dropping off toward the axis when nothing of the sort was\n * happening.\n */\nexport function TimeSeriesChart({\n  data,\n  color,\n  formatValue,\n  height = 240,\n  label,\n  project = false,\n  compare,\n  compareLabel,\n  emptyMessage = 'No data for this period',\n}: {\n  data: TimeSeriesPoint[];\n  color?: string;\n  formatValue?: (v: number) => string;\n  height?: number;\n  label?: string;\n  /** Extend the trend past the last point, if the data earns it. */\n  project?: boolean;\n  /**\n   * The window before this one, so the series can be read as a change rather\n   * than as a level. A count on its own says how many; it takes a baseline to\n   * say more or fewer, which is the question the reader actually arrived with.\n   */\n  compare?: TimeSeriesPoint[] | null;\n  /** What that baseline is called, e.g. \"Previous 30 days\". */\n  compareLabel?: string;\n  /** What's specifically missing, e.g. \"No sign-ups in this window\". */\n  emptyMessage?: string;\n}) {\n  const theme = useChartTheme();\n  const isMobile = useIsMobile();\n  const chartHeight = isMobile ? 180 : height;\n  const stroke = color ?? theme.series[0];\n  // The same ghost the money spine uses for its prior period. Two charts in one\n  // product must not draw the same idea two ways.\n  const ghost = 'var(--text-muted)';\n\n  if (!data || data.length === 0) {\n    return <EmptyState icon={ChartNoAxesCombined} message={emptyMessage} />;\n  }\n\n  const scaled = toTimeScale(data);\n  const comparePoints = compare?.length ? toTimeScale(compare) : [];\n  const hasCompare = comparePoints.length > 0;\n\n  // Aligned by position, not by date. The baseline window sits earlier on the\n  // calendar, so drawn on its own timestamps it would fall off the left of the\n  // axis entirely; day one against day one is also the comparison a reader is\n  // making. The shift is never silent — the tooltip prints both real dates, so\n  // a Monday is visibly being read against a Monday.\n  const chartData: SeriesRow[] = (\n    project\n      ? withProjection(scaled)\n      : scaled.map((p) => ({ t: p.t, value: p.value as number | null }))\n  ).map((p, i) => ({\n    ...p,\n    compare: comparePoints[i]?.value ?? null,\n    compareT: comparePoints[i]?.t ?? null,\n  }));\n\n  const intraday = isIntraday(scaled);\n\n  // Fit the y axis to the widest label it will actually draw. A fixed 50px band\n  // for ticks reading \"0\" and \"1\" left ~30px of dead space, so the axis labels\n  // started well right of the card title and the whole chart read as indented\n  // under its own heading. Measured off the formatter, so a currency series\n  // still gets the room it needs.\n  // The baseline counts toward the ceiling. Fitting the axis to this window\n  // alone clipped a ghost that ran higher, which draws the previous period as\n  // if it stopped at the top of the plot.\n  const maxValue = chartData.reduce(\n    (m, p) => Math.max(m, p.value ?? 0, p.projected ?? 0, p.compare ?? 0),\n    0,\n  );\n  // Measured off the ceiling the axis will actually print, not off the peak.\n  const axisMax = niceCeil(maxValue);\n  const widestLabel = formatValue\n    ? formatValue(axisMax)\n    : axisMax.toLocaleString();\n  // Seven pixels a character, plus the gutter between label and plot. Measured\n  // in the browser: an eleven-pixel \"$250,000\" is about 52px wide, so this\n  // leaves a few pixels of slack and no more, which keeps the labels close to\n  // the card's edge instead of floating a finger's width inside it. The glyph\n  // counts as a character, so a currency sign is allowed for without a special\n  // case.\n  const yAxisWidth = Math.max(24, widestLabel.length * 7 + 8);\n\n  const plot = (\n    <ResponsiveContainer width=\"100%\" height={chartHeight}>\n      <AreaChart\n        data={chartData}\n        margin={{ top: 6, right: 6, bottom: 0, left: 0 }}\n      >\n        {/* Solid hairlines, horizontal only. A dashed rule is four marks per\n            inch of grid, so a chart with six gridlines carried a few hundred\n            dashes competing with the series for the reader's eye; at\n            --border-default the solid line is quiet enough not to need\n            breaking up. Vertical rules stay off — the x labels already say\n            where the columns are. */}\n        <CartesianGrid stroke={CHART_GRID} vertical={false} />\n        {/* A number axis on a time scale, so a day is a day's worth of width\n            wherever it falls. As a category axis over date strings, an\n            eleven-day gap and a one-day step were drawn the same size. */}\n        <XAxis\n          dataKey=\"t\"\n          type=\"number\"\n          scale=\"time\"\n          domain={['dataMin', 'dataMax']}\n          tickFormatter={(t: number) =>\n            intraday ? clock(t) : formatShortDate(new Date(t).toISOString())\n          }\n          tick={CHART_TICK_STYLE}\n          axisLine={false}\n          tickLine={false}\n          minTickGap={24}\n        />\n        {/* Counts have no fractions: with one visitor the axis was drawing\n            0.25, 0.5 and 0.75, three gridlines describing quantities that\n            cannot exist. Integer ticks fix that on their own. The domain only\n            needs a floor of 1 so an empty window still has an axis to draw —\n            padding it further just shrinks the line to nothing to fill space\n            no data asked for. */}\n        <YAxis\n          // Right-aligned against the axis. These were left-anchored and pulled\n          // back 16px, which started every label 24px before the plot and ran\n          // it 28px into it, so wherever the line began near a gridline the\n          // figure was printed over the data. Right-aligned, a label ends\n          // where the plot begins and can never touch it.\n          tick={{ ...CHART_TICK_STYLE, textAnchor: 'end' }}\n          axisLine={false}\n          tickLine={false}\n          // Wrapped, not passed straight through: Recharts calls a formatter\n          // with (value, index), and `formatCurrency`'s second parameter is a\n          // currency override. Passed bare, the tick's position was read as a\n          // currency code, so the labels came out as \"165,000\", \"2130,000\".\n          tickFormatter={\n            formatValue ? (v: number) => formatValue(v) : undefined\n          }\n          width={yAxisWidth}\n          allowDecimals={false}\n          domain={[0, () => axisMax]}\n        />\n        <Tooltip\n          cursor={{ stroke: CHART_GRID, strokeWidth: 1 }}\n          contentStyle={CHART_TOOLTIP}\n          // With a baseline on the chart the reading is a pair, and a pair needs\n          // both dates said out loud.\n          content={\n            hasCompare\n              ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                (props: any) => (\n                  <CompareTooltip\n                    {...props}\n                    formatValue={formatValue}\n                    intraday={intraday}\n                  />\n                )\n              : undefined\n          }\n          // The x value is a timestamp now, so without this the tooltip heads\n          // itself with 1754006400000.\n          // Typed as ReactNode by recharts because a category axis can hand it a\n          // string. This one is a time axis, so it is always a timestamp.\n          labelFormatter={(t) =>\n            intraday\n              ? clock(t as number)\n              : formatShortDate(new Date(t as number).toISOString())\n          }\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          formatter={(v: any) => {\n            const num = typeof v === 'number' ? v : Number(v) || 0;\n            return [\n              formatValue ? formatValue(num) : num.toLocaleString(),\n              label || '',\n            ];\n          }}\n        />\n        {/* Under the current series and out of its way: no fill, a thinner\n            stroke, and the same dash the money spine gives its prior period.\n            A baseline drawn in the same ink as the record competes with it,\n            and the record is what the page is for. */}\n        {hasCompare && (\n          <Area\n            type=\"monotone\"\n            dataKey=\"compare\"\n            stroke={ghost}\n            strokeWidth={1.5}\n            strokeDasharray=\"4 4\"\n            fill=\"none\"\n            name={compareLabel ?? 'Previous period'}\n            dot={false}\n            activeDot={false}\n            connectNulls\n            isAnimationActive={false}\n          />\n        )}\n        <Area\n          type=\"monotone\"\n          dataKey=\"value\"\n          stroke={stroke}\n          strokeWidth={2}\n          fill={stroke}\n          fillOpacity={0.1}\n          name={label}\n          dot={false}\n          activeDot={{ r: 4, strokeWidth: 0 }}\n          connectNulls={false}\n        />\n        {/* Dashed, unfilled, and thinner: everything about it says \"not\n            measured\". A projection drawn in the same ink as the record is the\n            chart asserting something it does not know. */}\n        {project && (\n          <Area\n            type=\"monotone\"\n            dataKey=\"projected\"\n            stroke={stroke}\n            strokeOpacity={0.55}\n            strokeWidth={1.5}\n            strokeDasharray=\"4 4\"\n            fill=\"none\"\n            name={label ? `${label}, projected` : 'Projected'}\n            dot={false}\n            activeDot={{ r: 3, strokeWidth: 0 }}\n            connectNulls={false}\n          />\n        )}\n      </AreaChart>\n    </ResponsiveContainer>\n  );\n\n  if (!hasCompare) return plot;\n\n  // A key, only when there are two things to tell apart. One series and one\n  // dashed baseline is the smallest legend that can exist, and without it the\n  // ghost is an unexplained line — which is worse than no baseline at all.\n  return (\n    <>\n      <div className=\"mb-1 flex flex-wrap items-center justify-end gap-x-4 gap-y-1 text-2xs text-[var(--text-muted)]\">\n        <span className=\"inline-flex items-center gap-2\">\n          <span\n            className=\"h-[2px] w-3 rounded-full\"\n            style={{ backgroundColor: stroke }}\n          />\n          {label ?? 'This period'}\n        </span>\n        <span className=\"inline-flex items-center gap-2\">\n          <span\n            className=\"w-3 border-t-2 border-dashed\"\n            style={{ borderColor: ghost }}\n          />\n          {compareLabel ?? 'Previous period'}\n        </span>\n      </div>\n      {plot}\n    </>\n  );\n}\n"],"mappings":";AAgNW,SAsMP,UAtMO,KAmDL,YAnDK;AA9MX,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,MAAM;AAqBZ,SAAS,YAAY,MAAyD;AAC5E,QAAM,SAAS,KACZ,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,KAAK,GAAG,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,EAAE,EACjE,OAAO,CAAC,MAAM,OAAO,SAAS,EAAE,CAAC,CAAC,EAClC,KAAK,CAAC,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC;AAE3B,MAAI,OAAO,SAAS,EAAG,QAAO;AAE9B,QAAM,OAAO,OAAO,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,EAAE,IAAI,OAAO,CAAC,EAAE,CAAC;AAC5D,QAAM,WAAW,KAAK,IAAI,GAAG,IAAI;AACjC,QAAM,UAAU,KAAK,IAAI,WAAW,GAAG,IAAI,MAAM;AACjD,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,QAAQ,IAAI,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,MAAM,EAAE,IAAI,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;AACzE,QAAM,QAAQ,KAAK,MAAM,OAAO,CAAC,EAAE,IAAI,GAAG;AAC1C,QAAM,OAAO,KAAK,MAAM,OAAO,OAAO,SAAS,CAAC,EAAE,IAAI,GAAG;AAEzD,QAAM,SAAyC,CAAC;AAChD,WAAS,IAAI,OAAO,KAAK,MAAM,KAAK;AAClC,WAAO,KAAK,EAAE,GAAG,IAAI,KAAK,OAAO,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;AAAA,EACtD;AACA,SAAO;AACT;AAWA,SAAS,SAAS,OAAuB;AACvC,MAAI,CAAC,OAAO,SAAS,KAAK,KAAK,SAAS,EAAG,QAAO;AAClD,QAAM,YAAY,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,CAAC;AACpD,aAAW,QAAQ,CAAC,GAAG,KAAK,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG;AAClD,UAAM,YAAY,OAAO;AACzB,QAAI,SAAS,UAAW,QAAO;AAAA,EACjC;AACA,SAAO,KAAK;AACd;AAGA,MAAM,cAAc;AAOpB,MAAM,UAAU;AAgBhB,SAAS,eACP,QACiE;AACjE,QAAM,OAAO,OAAO,IAAI,CAAC,OAAO;AAAA,IAC9B,GAAG,EAAE;AAAA,IACL,OAAO,EAAE;AAAA,IACT,WAAW;AAAA,EACb,EAAE;AACF,MAAI,OAAO,SAAS,YAAa,QAAO;AAExC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,KAAK;AACxB,QAAM,QAAQ,OAAO,OAAO,CAAC,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC,IAAI;AAE5D,MAAI,MAAM;AACV,MAAI,MAAM;AACV,MAAI,MAAM;AACV,SAAO,QAAQ,CAAC,GAAG,MAAM;AACvB,YAAQ,IAAI,UAAU,EAAE,QAAQ;AAChC,YAAQ,IAAI,UAAU;AACtB,YAAQ,EAAE,QAAQ,UAAU;AAAA,EAC9B,CAAC;AACD,MAAI,QAAQ,KAAK,QAAQ,EAAG,QAAO;AAEnC,QAAM,QAAQ,MAAM;AACpB,QAAM,YAAY,QAAQ,QAAQ;AAElC,QAAM,MAAO,MAAM,OAAQ,MAAM;AACjC,MAAI,MAAM,QAAS,QAAO;AAE1B,QAAM,OAAO,OAAO,IAAI,CAAC,EAAE,IAAI,OAAO,IAAI,CAAC,EAAE;AAC7C,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,CAAC;AAEzD,QAAM,OAAO,KAAK,IAAI,CAAC;AACvB,OAAK,YAAY,KAAK;AAEtB,WAAS,IAAI,GAAG,KAAK,OAAO,KAAK;AAC/B,UAAM,IAAI,IAAI,IAAI;AAClB,SAAK,KAAK;AAAA,MACR,GAAG,OAAO,IAAI,CAAC,EAAE,IAAI,OAAO;AAAA,MAC5B,OAAO;AAAA;AAAA,MAEP,WAAW,KAAK,IAAI,GAAG,KAAK,MAAM,YAAY,QAAQ,CAAC,CAAC;AAAA,IAC1D,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAOO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAkBG;AACD,QAAM,QAAQ,cAAc;AAC5B,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,WAAW,MAAM;AACrC,QAAM,SAAS,SAAS,MAAM,OAAO,CAAC;AAGtC,QAAM,QAAQ;AAEd,MAAI,CAAC,QAAQ,KAAK,WAAW,GAAG;AAC9B,WAAO,oBAAC,cAAW,MAAM,qBAAqB,SAAS,cAAc;AAAA,EACvE;AAEA,QAAM,SAAS,YAAY,IAAI;AAC/B,QAAM,gBAAgB,SAAS,SAAS,YAAY,OAAO,IAAI,CAAC;AAChE,QAAM,aAAa,cAAc,SAAS;AAO1C,QAAM,aACJ,UACI,eAAe,MAAM,IACrB,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,MAAuB,EAAE,GACnE,IAAI,CAAC,GAAG,OAAO;AAAA,IACf,GAAG;AAAA,IACH,SAAS,cAAc,CAAC,GAAG,SAAS;AAAA,IACpC,UAAU,cAAc,CAAC,GAAG,KAAK;AAAA,EACnC,EAAE;AAEF,QAAM,WAAW,WAAW,MAAM;AAUlC,QAAM,WAAW,UAAU;AAAA,IACzB,CAAC,GAAG,MAAM,KAAK,IAAI,GAAG,EAAE,SAAS,GAAG,EAAE,aAAa,GAAG,EAAE,WAAW,CAAC;AAAA,IACpE;AAAA,EACF;AAEA,QAAM,UAAU,SAAS,QAAQ;AACjC,QAAM,cAAc,cAChB,YAAY,OAAO,IACnB,QAAQ,eAAe;AAO3B,QAAM,aAAa,KAAK,IAAI,IAAI,YAAY,SAAS,IAAI,CAAC;AAE1D,QAAM,OACJ,oBAAC,uBAAoB,OAAM,QAAO,QAAQ,aACxC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE;AAAA,MAQ/C;AAAA,4BAAC,iBAAc,QAAQ,YAAY,UAAU,OAAO;AAAA,QAIpD;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,QAAQ,CAAC,WAAW,SAAS;AAAA,YAC7B,eAAe,CAAC,MACd,WAAW,MAAM,CAAC,IAAI,gBAAgB,IAAI,KAAK,CAAC,EAAE,YAAY,CAAC;AAAA,YAEjE,MAAM;AAAA,YACN,UAAU;AAAA,YACV,UAAU;AAAA,YACV,YAAY;AAAA;AAAA,QACd;AAAA,QAOA;AAAA,UAAC;AAAA;AAAA,YAMC,MAAM,EAAE,GAAG,kBAAkB,YAAY,MAAM;AAAA,YAC/C,UAAU;AAAA,YACV,UAAU;AAAA,YAKV,eACE,cAAc,CAAC,MAAc,YAAY,CAAC,IAAI;AAAA,YAEhD,OAAO;AAAA,YACP,eAAe;AAAA,YACf,QAAQ,CAAC,GAAG,MAAM,OAAO;AAAA;AAAA,QAC3B;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,EAAE,QAAQ,YAAY,aAAa,EAAE;AAAA,YAC7C,cAAc;AAAA,YAGd,SACE;AAAA;AAAA,cAEI,CAAC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,gBAEF;AAAA,YAMN,gBAAgB,CAAC,MACf,WACI,MAAM,CAAW,IACjB,gBAAgB,IAAI,KAAK,CAAW,EAAE,YAAY,CAAC;AAAA,YAGzD,WAAW,CAAC,MAAW;AACrB,oBAAM,MAAM,OAAO,MAAM,WAAW,IAAI,OAAO,CAAC,KAAK;AACrD,qBAAO;AAAA,gBACL,cAAc,YAAY,GAAG,IAAI,IAAI,eAAe;AAAA,gBACpD,SAAS;AAAA,cACX;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAKC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,QAAQ;AAAA,YACR,aAAa;AAAA,YACb,iBAAgB;AAAA,YAChB,MAAK;AAAA,YACL,MAAM,gBAAgB;AAAA,YACtB,KAAK;AAAA,YACL,WAAW;AAAA,YACX,cAAY;AAAA,YACZ,mBAAmB;AAAA;AAAA,QACrB;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR;AAAA,YACA,aAAa;AAAA,YACb,MAAM;AAAA,YACN,aAAa;AAAA,YACb,MAAM;AAAA,YACN,KAAK;AAAA,YACL,WAAW,EAAE,GAAG,GAAG,aAAa,EAAE;AAAA,YAClC,cAAc;AAAA;AAAA,QAChB;AAAA,QAIC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR;AAAA,YACA,eAAe;AAAA,YACf,aAAa;AAAA,YACb,iBAAgB;AAAA,YAChB,MAAK;AAAA,YACL,MAAM,QAAQ,GAAG,KAAK,gBAAgB;AAAA,YACtC,KAAK;AAAA,YACL,WAAW,EAAE,GAAG,GAAG,aAAa,EAAE;AAAA,YAClC,cAAc;AAAA;AAAA,QAChB;AAAA;AAAA;AAAA,EAEJ,GACF;AAGF,MAAI,CAAC,WAAY,QAAO;AAKxB,SACE,iCACE;AAAA,yBAAC,SAAI,WAAU,kGACb;AAAA,2BAAC,UAAK,WAAU,kCACd;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,OAAO;AAAA;AAAA,QACnC;AAAA,QACC,SAAS;AAAA,SACZ;AAAA,MACA,qBAAC,UAAK,WAAU,kCACd;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,aAAa,MAAM;AAAA;AAAA,QAC9B;AAAA,QACC,gBAAgB;AAAA,SACnB;AAAA,OACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/dist/charts/usage-bars.d.ts

@@ -0,0 +1,38 @@
+export interface UsageBar {
+    /** Shown in the hover reading and, for the first and last bar, under the axis. */
+    label: string;
+    value: number;
+    /** The same bucket in the period before; read on hover, never drawn. */
+    baseline?: number | null;
+}
+/**
+ * Bars with nothing else: no gridlines, no y axis, no legend of its own.
+ *
+ * The one reference line is the highest bar, dashed and named, which is the
+ * only scale a reader needs. Only the first and last dates sit under the bars.
+ * A bucket with nothing in it is a short grey dash the width of a bar, so an
+ * empty day still reads as a day. Each bar is four fifths of its slot, so a
+ * dozen or two stand apart instead of making a wall.
+ *
+ * Plain elements rather than a charting library: this draws up to a year of
+ * days, needs no axes, and has to stay legible at 60px tall in a rail.
+ */
+export declare function UsageBars({ bars, height, fill, formatValue, showMax, maxTone, showEnds, showBaseline, onBarClick, className, 'aria-label': ariaLabel, }: {
+    bars: UsageBar[];
+    /** Height of the bars; with `fill` it is the least they take. */
+    height?: number;
+    fill?: boolean;
+    formatValue?: (n: number) => string;
+    /** The dashed line at the highest value, with its figure. */
+    showMax?: boolean;
+    /** The figure in the accent colour (a headline chart) or muted (a card's). */
+    maxTone?: 'accent' | 'muted';
+    /** The first and last labels under the bars. */
+    showEnds?: boolean;
+    /** A short tick across each bar at the period before's height. */
+    showBaseline?: boolean;
+    /** Makes every bar a button; the index is the bar's place in `bars`. */
+    onBarClick?: (index: number) => void;
+    className?: string;
+    'aria-label'?: string;
+}): import("react").JSX.Element;

package/dist/charts/usage-bars.js

@@ -0,0 +1,146 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "@withpotter/lib/utils";
+import { useChartTheme } from "./chart-theme";
+function UsageBars({
+  bars,
+  height = 160,
+  fill = false,
+  formatValue = (n) => n.toLocaleString(),
+  showMax = true,
+  maxTone = "accent",
+  showEnds = true,
+  showBaseline = false,
+  onBarClick,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const { usage } = useChartTheme();
+  const [hover, setHover] = useState(null);
+  const max = bars.reduce((m, b) => Math.max(m, b.value), 0);
+  const scale = showBaseline ? bars.reduce((m, b) => Math.max(m, b.baseline ?? 0), max) : max;
+  const dense = bars.length > 40;
+  const active = hover != null ? bars[hover] : null;
+  const showLine = showMax && max > 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", fill && "flex h-full flex-col", className), children: [
+    showLine ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mb-1 text-sm tabular-nums",
+        style: { color: maxTone === "accent" ? usage.bar : void 0 },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: maxTone === "muted" ? "text-[var(--text-muted)]" : "",
+            children: formatValue(max)
+          }
+        )
+      }
+    ) : null,
+    showLine ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute inset-x-0 border-t border-dashed opacity-70",
+        style: {
+          top: 24,
+          borderColor: maxTone === "accent" ? usage.bar : "var(--text-muted)"
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: onBarClick ? "group" : "img",
+        "aria-label": ariaLabel,
+        className: cn("flex items-end", fill && "flex-1"),
+        style: fill ? { minHeight: height } : { height },
+        onMouseLeave: () => setHover(null),
+        onKeyDown: (e) => {
+          if (!onBarClick) return;
+          const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+          if (step === 0) return;
+          const slots = [...e.currentTarget.querySelectorAll("button")];
+          const at = slots.indexOf(document.activeElement);
+          slots[at + step]?.focus();
+          e.preventDefault();
+        },
+        children: bars.map((bar, i) => {
+          const pct = scale > 0 ? bar.value / scale * 100 : 0;
+          const basePct = showBaseline && bar.baseline != null && scale > 0 ? bar.baseline / scale * 100 : null;
+          const slot = cn(
+            "relative flex h-full min-w-0 flex-1 items-end justify-center",
+            onBarClick && "cursor-pointer focus-visible:outline-2 focus-visible:outline-[var(--focus-ring)]"
+          );
+          const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "rounded-t-[1px] transition-opacity",
+                  dense ? "w-[70%]" : "w-4/5",
+                  hover != null && hover !== i && "opacity-60"
+                ),
+                style: {
+                  height: bar.value > 0 ? `max(${pct}%, 3px)` : "3px",
+                  background: bar.value > 0 ? usage.bar : usage.idle
+                }
+              }
+            ),
+            basePct != null ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "pointer-events-none absolute h-0.5 rounded-full bg-[var(--text-primary)] opacity-50",
+                  dense ? "w-[70%]" : "w-4/5"
+                ),
+                style: { bottom: `${basePct}%` }
+              }
+            ) : null
+          ] });
+          return onBarClick ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${bar.label}: ${formatValue(bar.value)}`,
+              className: slot,
+              onMouseEnter: () => setHover(i),
+              onFocus: () => setHover(i),
+              onClick: () => onBarClick(i),
+              children: body
+            },
+            `${bar.label}-${i}`
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: slot,
+              onMouseEnter: () => setHover(i),
+              children: body
+            },
+            `${bar.label}-${i}`
+          );
+        })
+      }
+    ),
+    active ? /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute right-0 top-0 z-10 rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-2 py-1 text-xs shadow-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[var(--text-tertiary)]", children: active.label }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums text-[var(--text-primary)]", children: formatValue(active.value) }),
+      active.baseline != null ? /* @__PURE__ */ jsxs("span", { className: "text-[var(--text-muted)]", children: [
+        " ",
+        "\xB7 before ",
+        formatValue(active.baseline)
+      ] }) : null
+    ] }) : null,
+    showEnds && bars.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between px-4 text-sm text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsx("span", { children: bars[0].label }),
+      /* @__PURE__ */ jsx("span", { children: bars[bars.length - 1].label })
+    ] }) : null
+  ] });
+}
+export {
+  UsageBars
+};
+//# sourceMappingURL=usage-bars.js.map

package/dist/charts/usage-bars.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/usage-bars.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { cn } from '@withpotter/lib/utils';\nimport { useChartTheme } from './chart-theme';\n\nexport interface UsageBar {\n  /** Shown in the hover reading and, for the first and last bar, under the axis. */\n  label: string;\n  value: number;\n  /** The same bucket in the period before; read on hover, never drawn. */\n  baseline?: number | null;\n}\n\n/**\n * Bars with nothing else: no gridlines, no y axis, no legend of its own.\n *\n * The one reference line is the highest bar, dashed and named, which is the\n * only scale a reader needs. Only the first and last dates sit under the bars.\n * A bucket with nothing in it is a short grey dash the width of a bar, so an\n * empty day still reads as a day. Each bar is four fifths of its slot, so a\n * dozen or two stand apart instead of making a wall.\n *\n * Plain elements rather than a charting library: this draws up to a year of\n * days, needs no axes, and has to stay legible at 60px tall in a rail.\n */\nexport function UsageBars({\n  bars,\n  height = 160,\n  fill = false,\n  formatValue = (n) => n.toLocaleString(),\n  showMax = true,\n  maxTone = 'accent',\n  showEnds = true,\n  showBaseline = false,\n  onBarClick,\n  className,\n  'aria-label': ariaLabel,\n}: {\n  bars: UsageBar[];\n  /** Height of the bars; with `fill` it is the least they take. */\n  height?: number;\n  fill?: boolean;\n  formatValue?: (n: number) => string;\n  /** The dashed line at the highest value, with its figure. */\n  showMax?: boolean;\n  /** The figure in the accent colour (a headline chart) or muted (a card's). */\n  maxTone?: 'accent' | 'muted';\n  /** The first and last labels under the bars. */\n  showEnds?: boolean;\n  /** A short tick across each bar at the period before's height. */\n  showBaseline?: boolean;\n  /** Makes every bar a button; the index is the bar's place in `bars`. */\n  onBarClick?: (index: number) => void;\n  className?: string;\n  'aria-label'?: string;\n}) {\n  const { usage } = useChartTheme();\n  const [hover, setHover] = useState<number | null>(null);\n\n  const max = bars.reduce((m, b) => Math.max(m, b.value), 0);\n  // With ticks drawn, the scale has to hold the taller of the two.\n  const scale = showBaseline\n    ? bars.reduce((m, b) => Math.max(m, b.baseline ?? 0), max)\n    : max;\n  const dense = bars.length > 40;\n  const active = hover != null ? bars[hover] : null;\n  const showLine = showMax && max > 0;\n\n  return (\n    <div className={cn('relative', fill && 'flex h-full flex-col', className)}>\n      {showLine ? (\n        <p\n          className=\"mb-1 text-sm tabular-nums\"\n          style={{ color: maxTone === 'accent' ? usage.bar : undefined }}\n        >\n          <span\n            className={maxTone === 'muted' ? 'text-[var(--text-muted)]' : ''}\n          >\n            {formatValue(max)}\n          </span>\n        </p>\n      ) : null}\n      {showLine ? (\n        <div\n          aria-hidden\n          className=\"absolute inset-x-0 border-t border-dashed opacity-70\"\n          style={{\n            top: 24,\n            borderColor: maxTone === 'accent' ? usage.bar : 'var(--text-muted)',\n          }}\n        />\n      ) : null}\n\n      <div\n        role={onBarClick ? 'group' : 'img'}\n        aria-label={ariaLabel}\n        className={cn('flex items-end', fill && 'flex-1')}\n        style={fill ? { minHeight: height } : { height }}\n        onMouseLeave={() => setHover(null)}\n        onKeyDown={(e) => {\n          if (!onBarClick) return;\n\n          const step =\n            e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;\n\n          if (step === 0) return;\n\n          const slots = [...e.currentTarget.querySelectorAll('button')];\n          const at = slots.indexOf(document.activeElement as HTMLButtonElement);\n\n          slots[at + step]?.focus();\n          e.preventDefault();\n        }}\n      >\n        {bars.map((bar, i) => {\n          const pct = scale > 0 ? (bar.value / scale) * 100 : 0;\n          const basePct =\n            showBaseline && bar.baseline != null && scale > 0\n              ? (bar.baseline / scale) * 100\n              : null;\n          const slot = cn(\n            'relative flex h-full min-w-0 flex-1 items-end justify-center',\n            onBarClick &&\n              'cursor-pointer focus-visible:outline-2 focus-visible:outline-[var(--focus-ring)]',\n          );\n          const body = (\n            <>\n              <div\n                className={cn(\n                  'rounded-t-[1px] transition-opacity',\n                  dense ? 'w-[70%]' : 'w-4/5',\n                  hover != null && hover !== i && 'opacity-60',\n                )}\n                style={{\n                  height: bar.value > 0 ? `max(${pct}%, 3px)` : '3px',\n                  background: bar.value > 0 ? usage.bar : usage.idle,\n                }}\n              />\n              {basePct != null ? (\n                <span\n                  aria-hidden\n                  className={cn(\n                    'pointer-events-none absolute h-0.5 rounded-full bg-[var(--text-primary)] opacity-50',\n                    dense ? 'w-[70%]' : 'w-4/5',\n                  )}\n                  style={{ bottom: `${basePct}%` }}\n                />\n              ) : null}\n            </>\n          );\n\n          return onBarClick ? (\n            <button\n              key={`${bar.label}-${i}`}\n              type=\"button\"\n              aria-label={`${bar.label}: ${formatValue(bar.value)}`}\n              className={slot}\n              onMouseEnter={() => setHover(i)}\n              onFocus={() => setHover(i)}\n              onClick={() => onBarClick(i)}\n            >\n              {body}\n            </button>\n          ) : (\n            <div\n              key={`${bar.label}-${i}`}\n              className={slot}\n              onMouseEnter={() => setHover(i)}\n            >\n              {body}\n            </div>\n          );\n        })}\n      </div>\n\n      {active ? (\n        <div className=\"pointer-events-none absolute right-0 top-0 z-10 rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-2 py-1 text-xs shadow-sm\">\n          <span className=\"text-[var(--text-tertiary)]\">{active.label}</span>{' '}\n          <span className=\"font-medium tabular-nums text-[var(--text-primary)]\">\n            {formatValue(active.value)}\n          </span>\n          {active.baseline != null ? (\n            <span className=\"text-[var(--text-muted)]\">\n              {' '}\n              · before {formatValue(active.baseline)}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      {showEnds && bars.length > 1 ? (\n        <div className=\"mt-2 flex justify-between px-4 text-sm text-[var(--text-muted)]\">\n          <span>{bars[0].label}</span>\n          <span>{bars[bars.length - 1].label}</span>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/charts/usage-line.d.ts

@@ -0,0 +1,18 @@
+/** A smooth curve through the points that never overshoots between them. */
+export declare function curve(xs: number[], ys: number[]): string;
+/**
+ * The reference's line reading: a smooth line along a flat baseline, a second
+ * line for the period before in the other colour, and a ring on the last point.
+ *
+ * Both lines share one scale so the gap between them is the real gap. The
+ * stroke is the same width however wide the card is; the ring is a plain
+ * element so it stays round.
+ */
+export declare function UsageLine({ values, before, height, className, 'aria-label': ariaLabel, }: {
+    values: number[];
+    /** The same measure over the period before, matched by position. */
+    before?: number[];
+    height?: number;
+    className?: string;
+    'aria-label'?: string;
+}): import("react").JSX.Element | null;

package/dist/charts/usage-line.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@withpotter/lib/utils";
+import { useChartTheme } from "./chart-theme";
+function curve(xs, ys) {
+  const n = xs.length;
+  if (n < 2) return "";
+  const dx = xs.slice(1).map((x, i) => x - xs[i]);
+  const slope = ys.slice(1).map((y, i) => (y - ys[i]) / dx[i]);
+  const tan = ys.map((_, i) => {
+    if (i === 0) return slope[0];
+    if (i === n - 1) return slope[n - 2];
+    return slope[i - 1] * slope[i] <= 0 ? 0 : (slope[i - 1] + slope[i]) / 2;
+  });
+  let d = `M${xs[0]},${ys[0]}`;
+  for (let i = 0; i < n - 1; i++) {
+    const h = dx[i] / 3;
+    d += ` C${xs[i] + h},${ys[i] + tan[i] * h} ${xs[i + 1] - h},${ys[i + 1] - tan[i + 1] * h} ${xs[i + 1]},${ys[i + 1]}`;
+  }
+  return d;
+}
+function UsageLine({
+  values,
+  before,
+  height = 56,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const { usage } = useChartTheme();
+  if (values.length < 2) return null;
+  const top = 8;
+  const bottom = height - 8;
+  const max = Math.max(1, ...values, ...before ?? []);
+  const xs = (n) => Array.from({ length: n }, (_, i) => 1 + i / (n - 1) * 98);
+  const ys = (v) => v.map((x) => bottom - x / max * (bottom - top));
+  const now = ys(values);
+  const lastX = 99;
+  const lastY = now[now.length - 1];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cn("relative w-full", className),
+      style: { height },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: `0 0 100 ${height}`,
+            preserveAspectRatio: "none",
+            className: "size-full overflow-visible",
+            "aria-hidden": true,
+            children: [
+              before && before.length > 1 ? /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: curve(xs(before.length), ys(before)),
+                  fill: "none",
+                  stroke: usage.before,
+                  strokeWidth: 2,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: curve(xs(values.length), now),
+                  fill: "none",
+                  stroke: usage.now,
+                  strokeWidth: 2,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-[var(--bg-base)]",
+            style: {
+              left: `${lastX}%`,
+              top: lastY,
+              borderColor: usage.now
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  UsageLine,
+  curve
+};
+//# sourceMappingURL=usage-line.js.map

package/dist/charts/usage-line.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/usage-line.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@withpotter/lib/utils';\nimport { useChartTheme } from './chart-theme';\n\n/** A smooth curve through the points that never overshoots between them. */\nexport function curve(xs: number[], ys: number[]): string {\n  const n = xs.length;\n  if (n < 2) return '';\n  const dx = xs.slice(1).map((x, i) => x - xs[i]);\n  const slope = ys.slice(1).map((y, i) => (y - ys[i]) / dx[i]);\n  const tan = ys.map((_, i) => {\n    if (i === 0) return slope[0];\n    if (i === n - 1) return slope[n - 2];\n    return slope[i - 1] * slope[i] <= 0 ? 0 : (slope[i - 1] + slope[i]) / 2;\n  });\n  let d = `M${xs[0]},${ys[0]}`;\n  for (let i = 0; i < n - 1; i++) {\n    const h = dx[i] / 3;\n    d += ` C${xs[i] + h},${ys[i] + tan[i] * h} ${xs[i + 1] - h},${ys[i + 1] - tan[i + 1] * h} ${xs[i + 1]},${ys[i + 1]}`;\n  }\n  return d;\n}\n\n/**\n * The reference's line reading: a smooth line along a flat baseline, a second\n * line for the period before in the other colour, and a ring on the last point.\n *\n * Both lines share one scale so the gap between them is the real gap. The\n * stroke is the same width however wide the card is; the ring is a plain\n * element so it stays round.\n */\nexport function UsageLine({\n  values,\n  before,\n  height = 56,\n  className,\n  'aria-label': ariaLabel,\n}: {\n  values: number[];\n  /** The same measure over the period before, matched by position. */\n  before?: number[];\n  height?: number;\n  className?: string;\n  'aria-label'?: string;\n}) {\n  const { usage } = useChartTheme();\n  if (values.length < 2) return null;\n\n  const top = 8;\n  const bottom = height - 8;\n  const max = Math.max(1, ...values, ...(before ?? []));\n  const xs = (n: number) =>\n    Array.from({ length: n }, (_, i) => 1 + (i / (n - 1)) * 98);\n  const ys = (v: number[]) => v.map((x) => bottom - (x / max) * (bottom - top));\n\n  const now = ys(values);\n  const lastX = 99;\n  const lastY = now[now.length - 1];\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel}\n      className={cn('relative w-full', className)}\n      style={{ height }}\n    >\n      <svg\n        viewBox={`0 0 100 ${height}`}\n        preserveAspectRatio=\"none\"\n        className=\"size-full overflow-visible\"\n        aria-hidden\n      >\n        {before && before.length > 1 ? (\n          <path\n            d={curve(xs(before.length), ys(before))}\n            fill=\"none\"\n            stroke={usage.before}\n            strokeWidth={2}\n            vectorEffect=\"non-scaling-stroke\"\n          />\n        ) : null}\n        <path\n          d={curve(xs(values.length), now)}\n          fill=\"none\"\n          stroke={usage.now}\n          strokeWidth={2}\n          vectorEffect=\"non-scaling-stroke\"\n        />\n      </svg>\n      <span\n        aria-hidden\n        className=\"absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-[var(--bg-base)]\"\n        style={{\n          left: `${lastX}%`,\n          top: lastY,\n          borderColor: usage.now,\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/charts.d.ts

@@ -0,0 +1 @@
+export * from './charts/index';

package/dist/charts.js

@@ -0,0 +1 @@
+export * from './charts/index.js';