@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/ScatterChart/ScatterChart.d.ts

@@ -0,0 +1,128 @@
+import { ChartTooltipSlotProps, ChartLegendSlotProps } from '../AreaChart/AreaChart.js';
+import * as react from 'react';
+import { ReactNode, ComponentProps } from 'react';
+import { ScatterChart as ScatterChart$1, Scatter, XAxis, YAxis, ZAxis, CartesianGrid } from 'recharts';
+import { ChartConfig } from '../lib/chart.js';
+import { ChartBackgroundVariant } from '../lib/background.js';
+import { ReferenceLine, ReferenceBand, Annotation } from '../lib/annotations.js';
+import '../lib/empty.js';
+import '../lib/values.js';
+import '../lib/sonify-control.js';
+import '../lib/sonify.js';
+import '../lib/brush.js';
+import '../lib/toolbar.js';
+import '../lib/zoom.js';
+import '../lib/figure.js';
+import '../lib/paint.js';
+import '../lib/dot.js';
+import '../lib/legend.js';
+import '../lib/tooltip.js';
+import 'recharts/types/component/DefaultTooltipContent';
+
+/**
+ * The mark each point is drawn as.
+ *
+ * Shape is doing what hue does elsewhere: with the monochrome ramp, two
+ * overlapping clouds separate far better by circle-versus-cross than by two
+ * steps of grey, and shape survives overprinting where a lightness step does
+ * not.
+ */
+type ScatterShape = 'circle' | 'square' | 'triangle' | 'diamond' | 'cross' | 'ring';
+/** How a point is filled — solid, hollow, or the series gradient. */
+type ScatterVariant = 'solid' | 'outline' | 'gradient';
+/** The rows a scatter chart reads its hidden table view from. */
+interface ScatterTable {
+    rows: Record<string, unknown>[];
+    /** The field naming each row. */
+    rowKey?: string;
+    columns: {
+        key: string;
+        label: ReactNode;
+    }[];
+}
+interface ScatterChartProps {
+    /** Series keys → their label and paint. Declaration order is ramp order. */
+    config: ChartConfig;
+    /**
+     * What the chart shows, in a sentence a reader could act on. Required, and
+     * announced to a screen reader even when it is not printed.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /** The composed parts — axes, grid, tooltip, legend, and the marks themselves. */
+    children: ReactNode;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    /** Escape hatch onto the raw Recharts chart element. */
+    chartProps?: ComponentProps<typeof ScatterChart$1>;
+    /** The series lit on first render. Selection dims every other series. */
+    defaultSelectedDataKey?: string | null;
+    /** Fires when the selection changes, and with null when it is cleared. */
+    onSelectionChange?: (selectedDataKey: string | null) => void;
+    /**
+     * The rows behind the hidden table view, with the fields to print. Scatter
+     * data lives on each `<Scatter>` rather than on the root, so unlike every
+     * other chart here the table cannot be inferred — it is declared.
+     */
+    table?: ScatterTable | false;
+}
+/**
+ * Two measures against each other, one mark per observation — the shape for
+ * "is there a relationship here".
+ *
+ * The only chart in the set whose x axis is a NUMBER rather than a category,
+ * which is the whole point: a scatter answers correlation, clustering and
+ * outliers, and none of those questions survive being bucketed into a bar.
+ *
+ * Past three series, shape stops separating them and the answer is small
+ * multiples — one chart per series, same axes — rather than a fourth mark.
+ *
+ * @example
+ * <ScatterChart title="Load time against bundle size" config={config}>
+ *   <ScatterChart.Grid />
+ *   <ScatterChart.XAxis dataKey="kb" name="Bundle" unit=" kB" />
+ *   <ScatterChart.YAxis dataKey="ms" name="Load" unit=" ms" />
+ *   <ScatterChart.Tooltip />
+ *   <ScatterChart.Scatter dataKey="desktop" data={desktop} />
+ * </ScatterChart>
+ */
+declare function ScatterChart({ config, title, showTitle, description, children, className, chartProps, defaultSelectedDataKey, onSelectionChange, table, }: ScatterChartProps): react.JSX.Element;
+declare namespace ScatterChart {
+    var Scatter: ({ dataKey, data, shape, variant, size, glowing, isClickable, scatterProps, }: ScatterProps) => react.JSX.Element;
+    var XAxis: ({ type, tickLine, axisLine, tickMargin, tickFormatter, label, ...rest }: Omit<ComponentProps<typeof XAxis>, "label"> & {
+        label?: string;
+    }) => react.JSX.Element;
+    var YAxis: ({ type, tickLine, axisLine, tickMargin, width, tickFormatter, label, ...rest }: Omit<ComponentProps<typeof YAxis>, "label"> & {
+        label?: string;
+    }) => react.JSX.Element;
+    var ZAxis: ({ range, ...rest }: ComponentProps<typeof ZAxis>) => react.JSX.Element;
+    var Grid: ({ strokeDasharray, ...rest }: ComponentProps<typeof CartesianGrid>) => react.JSX.Element;
+    var Tooltip: ({ variant, roundness, defaultIndex, cursor }: ChartTooltipSlotProps) => react.JSX.Element;
+    var Legend: ({ variant, align, verticalAlign, isClickable, }: ChartLegendSlotProps) => react.JSX.Element;
+    var ReferenceLine: typeof ReferenceLine;
+    var ReferenceBand: typeof ReferenceBand;
+    var Annotation: typeof Annotation;
+    var Background: ({ variant }: {
+        variant: ChartBackgroundVariant;
+    }) => react.JSX.Element;
+}
+interface ScatterProps {
+    /** The series key. Must exist on the config. */
+    dataKey: string;
+    /** This series' observations. */
+    data: Record<string, unknown>[];
+    shape?: ScatterShape;
+    variant?: ScatterVariant;
+    /** Mark radius in pixels. Ignored when a `<ScatterChart.ZAxis>` sizes them. */
+    size?: number;
+    /** A halo behind the cloud — for the one series that is the point. */
+    glowing?: boolean;
+    /** Lets a click on this series select it, dimming the rest. */
+    isClickable?: boolean;
+    scatterProps?: Omit<ComponentProps<typeof Scatter>, 'data' | 'dataKey'>;
+}
+
+export { ScatterChart, type ScatterChartProps, type ScatterProps, type ScatterShape, type ScatterTable, type ScatterVariant, ScatterChart as default };

package/dist/charts/ScatterChart/ScatterChart.js

@@ -0,0 +1,269 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  CartesianGrid,
+  Scatter as RechartsScatter,
+  ScatterChart as RechartsScatterChart,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis,
+  ZAxis as RechartsZAxis
+} from "recharts";
+import { ChartContainer } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartLegend, ChartLegendContent } from "../lib/legend.js";
+import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
+import { GlowFilter, SeriesGradient } from "../lib/paint.js";
+import { Annotation, ReferenceBand, ReferenceLine } from "../lib/annotations.js";
+import { axisLabel } from "../lib/axis.js";
+import { defaultTick } from "../lib/format.js";
+const CHART_MARGIN = { top: 12, right: 16, bottom: 0, left: 8 };
+const ScatterChartContext = createContext(null);
+function useScatterChart() {
+  const context = useContext(ScatterChartContext);
+  if (!context) throw new Error("A scatter chart part must be rendered inside <ScatterChart>");
+  return context;
+}
+function ScatterChart({
+  config,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  defaultSelectedDataKey = null,
+  onSelectionChange,
+  table
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const [selectedDataKey, setSelectedDataKey] = useState(defaultSelectedDataKey);
+  const selectDataKey = useCallback(
+    (next) => {
+      setSelectedDataKey(next);
+      onSelectionChange?.(next);
+    },
+    [onSelectionChange]
+  );
+  const context = useMemo(
+    () => ({ config, isLoading: false, selectedDataKey, selectDataKey }),
+    [config, selectDataKey, selectedDataKey]
+  );
+  return /* @__PURE__ */ jsx(ScatterChartContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table,
+      children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsx(RechartsScatterChart, { id: chartId, accessibilityLayer: true, margin: CHART_MARGIN, ...chartProps, children }) })
+    }
+  ) });
+}
+function shapePath(shape, r) {
+  switch (shape) {
+    case "square":
+      return `M${-r},${-r}h${r * 2}v${r * 2}h${-r * 2}z`;
+    case "triangle":
+      return `M0,${-r}L${r},${r}L${-r},${r}z`;
+    case "diamond":
+      return `M0,${-r}L${r},0L0,${r}L${-r},0z`;
+    case "cross": {
+      const a = r * 0.34;
+      return `M${-a},${-r}h${a * 2}v${r - a}h${r - a}v${a * 2}h${-(r - a)}v${r - a}h${-a * 2}v${-(r - a)}h${-(r - a)}v${-a * 2}h${r - a}z`;
+    }
+    default:
+      return `M0,${-r}A${r},${r} 0 1,1 0,${r}A${r},${r} 0 1,1 0,${-r}z`;
+  }
+}
+function Scatter({
+  dataKey,
+  data,
+  shape = "circle",
+  variant = "solid",
+  size = 5,
+  glowing = false,
+  isClickable = false,
+  scatterProps
+}) {
+  const { config, selectedDataKey, selectDataKey } = useScatterChart();
+  const id = useId().replace(/:/g, "");
+  const isSelected = selectedDataKey === dataKey;
+  const dimmed = selectedDataKey !== null && !isSelected;
+  const paint = `url(#${id}-colors-${dataKey})`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsScatter,
+      {
+        name: dataKey,
+        dataKey,
+        data,
+        isAnimationActive: false,
+        style: isClickable ? { cursor: "pointer" } : void 0,
+        onClick: () => {
+          if (!isClickable) return;
+          selectDataKey(isSelected ? null : dataKey);
+        },
+        shape: (props) => {
+          const { cx, cy } = props;
+          if (cx === void 0 || cy === void 0) return /* @__PURE__ */ jsx("g", {});
+          const radius = typeof props.r === "number" && props.r > 0 ? props.r : size;
+          const hollow = variant === "outline" || shape === "ring";
+          return /* @__PURE__ */ jsx(
+            "g",
+            {
+              transform: `translate(${cx}, ${cy})`,
+              opacity: dimmed ? 0.2 : 1,
+              filter: glowing ? `url(#${id}-glow-${dataKey})` : void 0,
+              className: "transition-opacity duration-(--duration-base)",
+              children: shape === "ring" ? /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  r: radius,
+                  fill: "none",
+                  stroke: paint,
+                  strokeWidth: Math.max(1.2, radius * 0.32)
+                }
+              ) : /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: shapePath(shape, radius),
+                  fill: hollow ? "none" : paint,
+                  stroke: hollow ? paint : "var(--chart-surface)",
+                  strokeWidth: hollow ? 1.4 : 1
+                }
+              )
+            }
+          );
+        },
+        ...scatterProps
+      }
+    ),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx(SeriesGradient, { id, dataKey, config }),
+      glowing && /* @__PURE__ */ jsx(GlowFilter, { id, dataKey, spread: 5, intensity: 0.8 })
+    ] })
+  ] });
+}
+function XAxis({
+  type = "number",
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  tickFormatter = defaultTick,
+  label,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    RechartsXAxis,
+    {
+      type,
+      tickLine,
+      axisLine,
+      tickMargin,
+      tickFormatter,
+      ...rest,
+      children: axisLabel(label, "x")
+    }
+  );
+}
+function YAxis({
+  type = "number",
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  width = "auto",
+  tickFormatter = defaultTick,
+  label,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    RechartsYAxis,
+    {
+      type,
+      tickLine,
+      axisLine,
+      tickMargin,
+      width,
+      tickFormatter,
+      ...rest,
+      children: axisLabel(label, "y")
+    }
+  );
+}
+function ZAxis({
+  range = [40, 400],
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(RechartsZAxis, { range, ...rest });
+}
+function Grid({
+  strokeDasharray = "3 3",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray, ...rest });
+}
+function Tooltip({ variant, roundness, defaultIndex, cursor = true }) {
+  const { selectedDataKey } = useScatterChart();
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      defaultIndex,
+      cursor: cursor ? { strokeDasharray: "3 3" } : false,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { selected: selectedDataKey, roundness, variant })
+    }
+  );
+}
+function Legend({
+  variant,
+  align = "right",
+  verticalAlign = "top",
+  isClickable = false
+}) {
+  const { selectedDataKey, selectDataKey } = useScatterChart();
+  return /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx(
+        ChartLegendContent,
+        {
+          selected: selectedDataKey,
+          onSelectChange: selectDataKey,
+          isClickable,
+          variant
+        }
+      )
+    }
+  );
+}
+function Background({ variant }) {
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+ScatterChart.Scatter = Scatter;
+ScatterChart.XAxis = XAxis;
+ScatterChart.YAxis = YAxis;
+ScatterChart.ZAxis = ZAxis;
+ScatterChart.Grid = Grid;
+ScatterChart.Tooltip = Tooltip;
+ScatterChart.Legend = Legend;
+ScatterChart.ReferenceLine = ReferenceLine;
+ScatterChart.ReferenceBand = ReferenceBand;
+ScatterChart.Annotation = Annotation;
+ScatterChart.Background = Background;
+var ScatterChart_default = ScatterChart;
+export {
+  ScatterChart,
+  ScatterChart_default as default
+};
+//# sourceMappingURL=ScatterChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/ScatterChart/ScatterChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from 'react'\nimport {\n  CartesianGrid,\n  Scatter as RechartsScatter,\n  ScatterChart as RechartsScatterChart,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  ZAxis as RechartsZAxis,\n} from 'recharts'\nimport { ChartContainer, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartLegend, ChartLegendContent } from '../lib/legend'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport { GlowFilter, SeriesGradient } from '../lib/paint'\nimport { Annotation, ReferenceBand, ReferenceLine } from '../lib/annotations'\nimport { axisLabel } from '../lib/axis'\nimport { defaultTick } from '../lib/format'\nimport type { ChartLegendSlotProps, ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\nconst CHART_MARGIN = { top: 12, right: 16, bottom: 0, left: 8 }\n\n/**\n * The mark each point is drawn as.\n *\n * Shape is doing what hue does elsewhere: with the monochrome ramp, two\n * overlapping clouds separate far better by circle-versus-cross than by two\n * steps of grey, and shape survives overprinting where a lightness step does\n * not.\n */\nexport type ScatterShape = 'circle' | 'square' | 'triangle' | 'diamond' | 'cross' | 'ring'\n\n/** How a point is filled — solid, hollow, or the series gradient. */\nexport type ScatterVariant = 'solid' | 'outline' | 'gradient'\n\ninterface ScatterChartContextValue {\n  config: ChartConfig\n  isLoading: boolean\n  selectedDataKey: string | null\n  selectDataKey: (dataKey: string | null) => void\n}\n\nconst ScatterChartContext = createContext<ScatterChartContextValue | null>(null)\n\nfunction useScatterChart(): ScatterChartContextValue {\n  const context = useContext(ScatterChartContext)\n  if (!context) throw new Error('A scatter chart part must be rendered inside <ScatterChart>')\n  return context\n}\n\n/** The rows a scatter chart reads its hidden table view from. */\nexport interface ScatterTable {\n  rows: Record<string, unknown>[]\n  /** The field naming each row. */\n  rowKey?: string\n  columns: { key: string; label: ReactNode }[]\n}\n\nexport interface ScatterChartProps {\n  /** Series keys → their label and paint. Declaration order is ramp order. */\n  config: ChartConfig\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /** The composed parts — axes, grid, tooltip, legend, and the marks themselves. */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsScatterChart>\n  /** The series lit on first render. Selection dims every other series. */\n  defaultSelectedDataKey?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selectedDataKey: string | null) => void\n  /**\n   * The rows behind the hidden table view, with the fields to print. Scatter\n   * data lives on each `<Scatter>` rather than on the root, so unlike every\n   * other chart here the table cannot be inferred — it is declared.\n   */\n  table?: ScatterTable | false\n}\n\n/**\n * Two measures against each other, one mark per observation — the shape for\n * \"is there a relationship here\".\n *\n * The only chart in the set whose x axis is a NUMBER rather than a category,\n * which is the whole point: a scatter answers correlation, clustering and\n * outliers, and none of those questions survive being bucketed into a bar.\n *\n * Past three series, shape stops separating them and the answer is small\n * multiples — one chart per series, same axes — rather than a fourth mark.\n *\n * @example\n * <ScatterChart title=\"Load time against bundle size\" config={config}>\n *   <ScatterChart.Grid />\n *   <ScatterChart.XAxis dataKey=\"kb\" name=\"Bundle\" unit=\" kB\" />\n *   <ScatterChart.YAxis dataKey=\"ms\" name=\"Load\" unit=\" ms\" />\n *   <ScatterChart.Tooltip />\n *   <ScatterChart.Scatter dataKey=\"desktop\" data={desktop} />\n * </ScatterChart>\n */\nexport function ScatterChart({\n  config,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  defaultSelectedDataKey = null,\n  onSelectionChange,\n  table,\n}: ScatterChartProps) {\n  const chartId = useId().replace(/:/g, '')\n  const [selectedDataKey, setSelectedDataKey] = useState<string | null>(defaultSelectedDataKey)\n\n  const selectDataKey = useCallback(\n    (next: string | null) => {\n      setSelectedDataKey(next)\n      onSelectionChange?.(next)\n    },\n    [onSelectionChange],\n  )\n\n  const context = useMemo<ScatterChartContextValue>(\n    () => ({ config, isLoading: false, selectedDataKey, selectDataKey }),\n    [config, selectDataKey, selectedDataKey],\n  )\n\n  return (\n    <ScatterChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={table}\n      >\n        <ChartContainer config={config}>\n          <RechartsScatterChart id={chartId} accessibilityLayer margin={CHART_MARGIN} {...chartProps}>\n            {children}\n          </RechartsScatterChart>\n        </ChartContainer>\n      </ChartFigure>\n    </ScatterChartContext.Provider>\n  )\n}\n\n/** The SVG path for one mark, centred on the origin at radius `r`. */\nfunction shapePath(shape: ScatterShape, r: number): string {\n  switch (shape) {\n    case 'square':\n      return `M${-r},${-r}h${r * 2}v${r * 2}h${-r * 2}z`\n    case 'triangle':\n      return `M0,${-r}L${r},${r}L${-r},${r}z`\n    case 'diamond':\n      return `M0,${-r}L${r},0L0,${r}L${-r},0z`\n    case 'cross': {\n      const a = r * 0.34\n      return `M${-a},${-r}h${a * 2}v${r - a}h${r - a}v${a * 2}h${-(r - a)}v${r - a}h${-a * 2}v${-(r - a)}h${-(r - a)}v${-a * 2}h${r - a}z`\n    }\n    default:\n      return `M0,${-r}A${r},${r} 0 1,1 0,${r}A${r},${r} 0 1,1 0,${-r}z`\n  }\n}\n\nexport interface ScatterProps {\n  /** The series key. Must exist on the config. */\n  dataKey: string\n  /** This series' observations. */\n  data: Record<string, unknown>[]\n  shape?: ScatterShape\n  variant?: ScatterVariant\n  /** Mark radius in pixels. Ignored when a `<ScatterChart.ZAxis>` sizes them. */\n  size?: number\n  /** A halo behind the cloud — for the one series that is the point. */\n  glowing?: boolean\n  /** Lets a click on this series select it, dimming the rest. */\n  isClickable?: boolean\n  scatterProps?: Omit<ComponentProps<typeof RechartsScatter>, 'data' | 'dataKey'>\n}\n\n/** One cloud of observations. */\nfunction Scatter({\n  dataKey,\n  data,\n  shape = 'circle',\n  variant = 'solid',\n  size = 5,\n  glowing = false,\n  isClickable = false,\n  scatterProps,\n}: ScatterProps) {\n  const { config, selectedDataKey, selectDataKey } = useScatterChart()\n  const id = useId().replace(/:/g, '')\n\n  const isSelected = selectedDataKey === dataKey\n  const dimmed = selectedDataKey !== null && !isSelected\n  const paint = `url(#${id}-colors-${dataKey})`\n\n  return (\n    <>\n      <RechartsScatter\n        name={dataKey}\n        dataKey={dataKey}\n        data={data}\n        isAnimationActive={false}\n        style={isClickable ? { cursor: 'pointer' } : undefined}\n        onClick={() => {\n          if (!isClickable) return\n          selectDataKey(isSelected ? null : dataKey)\n        }}\n        shape={(props: { cx?: number; cy?: number; payload?: unknown; r?: number }) => {\n          const { cx, cy } = props\n          if (cx === undefined || cy === undefined) return <g />\n          // `r` arrives only when a ZAxis is sizing the marks.\n          const radius = typeof props.r === 'number' && props.r > 0 ? props.r : size\n          const hollow = variant === 'outline' || shape === 'ring'\n\n          return (\n            <g\n              transform={`translate(${cx}, ${cy})`}\n              opacity={dimmed ? 0.2 : 1}\n              filter={glowing ? `url(#${id}-glow-${dataKey})` : undefined}\n              className=\"transition-opacity duration-(--duration-base)\"\n            >\n              {shape === 'ring' ? (\n                <circle\n                  r={radius}\n                  fill=\"none\"\n                  stroke={paint}\n                  strokeWidth={Math.max(1.2, radius * 0.32)}\n                />\n              ) : (\n                <path\n                  d={shapePath(shape, radius)}\n                  fill={hollow ? 'none' : paint}\n                  stroke={hollow ? paint : 'var(--chart-surface)'}\n                  // A surface-coloured ring on a solid mark is the 2px spacer\n                  // that keeps two overlapping observations countable.\n                  strokeWidth={hollow ? 1.4 : 1}\n                />\n              )}\n            </g>\n          )\n        }}\n        {...scatterProps}\n      />\n      <defs>\n        <SeriesGradient id={id} dataKey={dataKey} config={config} />\n        {glowing && <GlowFilter id={id} dataKey={dataKey} spread={5} intensity={0.8} />}\n      </defs>\n    </>\n  )\n}\n\n/** The horizontal measure. Numeric by default — a scatter has no categories. */\nfunction XAxis({\n  type = 'number',\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  tickFormatter = defaultTick,\n  label,\n  ...rest\n}: Omit<ComponentProps<typeof RechartsXAxis>, 'label'> & { label?: string }) {\n  return (\n    <RechartsXAxis\n      type={type}\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      tickFormatter={tickFormatter}\n      {...rest}\n    >\n      {axisLabel(label, 'x')}\n    </RechartsXAxis>\n  )\n}\n\n/** The vertical measure. */\nfunction YAxis({\n  type = 'number',\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  width = 'auto',\n  tickFormatter = defaultTick,\n  label,\n  ...rest\n}: Omit<ComponentProps<typeof RechartsYAxis>, 'label'> & { label?: string }) {\n  return (\n    <RechartsYAxis\n      type={type}\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      width={width}\n      tickFormatter={tickFormatter}\n      {...rest}\n    >\n      {axisLabel(label, 'y')}\n    </RechartsYAxis>\n  )\n}\n\n/**\n * A third measure, mapped to each mark's AREA rather than its radius.\n *\n * Radius is the wrong encoding and the common mistake: doubling a radius\n * quadruples the ink, so a value twice as large reads as four times as large.\n * `range` is in area units, which is what Recharts scales — so the default\n * below is a ×4 area span, not a ×4 radius.\n */\nfunction ZAxis({\n  range = [40, 400],\n  ...rest\n}: ComponentProps<typeof RechartsZAxis>) {\n  return <RechartsZAxis range={range} {...rest} />\n}\n\n/** Rules on both axes — a scatter is read in two directions. */\nfunction Grid({\n  strokeDasharray = '3 3',\n  ...rest\n}: ComponentProps<typeof CartesianGrid>) {\n  return <CartesianGrid strokeDasharray={strokeDasharray} {...rest} />\n}\n\n/**\n * The hover panel, with a crosshair on both axes.\n *\n * `cursor` is a pair of rules rather than a band: a scatter point is located by\n * two coordinates, and a single vertical cursor answers only half of that.\n */\nfunction Tooltip({ variant, roundness, defaultIndex, cursor = true }: ChartTooltipSlotProps) {\n  const { selectedDataKey } = useScatterChart()\n\n  return (\n    <ChartTooltip\n      defaultIndex={defaultIndex}\n      cursor={cursor ? { strokeDasharray: '3 3' } : false}\n      content={\n        <ChartTooltipContent selected={selectedDataKey} roundness={roundness} variant={variant} />\n      }\n    />\n  )\n}\n\n/** The key. Required above one series. */\nfunction Legend({\n  variant,\n  align = 'right',\n  verticalAlign = 'top',\n  isClickable = false,\n}: ChartLegendSlotProps) {\n  const { selectedDataKey, selectDataKey } = useScatterChart()\n\n  return (\n    <ChartLegend\n      verticalAlign={verticalAlign}\n      align={align}\n      content={\n        <ChartLegendContent\n          selected={selectedDataKey}\n          onSelectChange={selectDataKey}\n          isClickable={isClickable}\n          variant={variant}\n        />\n      }\n    />\n  )\n}\n\n/** The decorative plate behind the plot. */\nfunction Background({ variant }: { variant: ChartBackgroundVariant }) {\n  return <ChartBackground variant={variant} />\n}\n\nScatterChart.Scatter = Scatter\nScatterChart.XAxis = XAxis\nScatterChart.YAxis = YAxis\nScatterChart.ZAxis = ZAxis\nScatterChart.Grid = Grid\nScatterChart.Tooltip = Tooltip\nScatterChart.Legend = Legend\nScatterChart.ReferenceLine = ReferenceLine\nScatterChart.ReferenceBand = ReferenceBand\nScatterChart.Annotation = Annotation\nScatterChart.Background = Background\n\nexport default ScatterChart\n"],"mappings":";AA6JU,SA8DN,UA9DM,KA6GJ,YA7GI;AA3JV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,OACJ;AACP,SAAS,sBAAwC;AACjD,SAAS,mBAAmB;AAC5B,SAAS,uBAAoD;AAC7D,SAAS,aAAa,0BAA0B;AAChD,SAAS,cAAc,2BAA2B;AAClD,SAAS,YAAY,sBAAsB;AAC3C,SAAS,YAAY,eAAe,qBAAqB;AACzD,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAG5B,MAAM,eAAe,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,GAAG,MAAM,EAAE;AAsB9D,MAAM,sBAAsB,cAA+C,IAAI;AAE/E,SAAS,kBAA4C;AACnD,QAAM,UAAU,WAAW,mBAAmB;AAC9C,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,6DAA6D;AAC3F,SAAO;AACT;AA4DO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,UAAU,MAAM,EAAE,QAAQ,MAAM,EAAE;AACxC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAwB,sBAAsB;AAE5F,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAwB;AACvB,yBAAmB,IAAI;AACvB,0BAAoB,IAAI;AAAA,IAC1B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,UAAU;AAAA,IACd,OAAO,EAAE,QAAQ,WAAW,OAAO,iBAAiB,cAAc;AAAA,IAClE,CAAC,QAAQ,eAAe,eAAe;AAAA,EACzC;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,SACnC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,kBAAe,QACd,8BAAC,wBAAqB,IAAI,SAAS,oBAAkB,MAAC,QAAQ,cAAe,GAAG,YAC7E,UACH,GACF;AAAA;AAAA,EACF,GACF;AAEJ;AAGA,SAAS,UAAU,OAAqB,GAAmB;AACzD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAAA,IACjD,KAAK;AACH,aAAO,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;AAAA,IACtC,KAAK;AACH,aAAO,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAAA,IACrC,KAAK,SAAS;AACZ,YAAM,IAAI,IAAI;AACd,aAAO,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC;AAAA,IACnI;AAAA,IACA;AACE,aAAO,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AAAA,EAClE;AACF;AAmBA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd;AACF,GAAiB;AACf,QAAM,EAAE,QAAQ,iBAAiB,cAAc,IAAI,gBAAgB;AACnE,QAAM,KAAK,MAAM,EAAE,QAAQ,MAAM,EAAE;AAEnC,QAAM,aAAa,oBAAoB;AACvC,QAAM,SAAS,oBAAoB,QAAQ,CAAC;AAC5C,QAAM,QAAQ,QAAQ,EAAE,WAAW,OAAO;AAE1C,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,mBAAmB;AAAA,QACnB,OAAO,cAAc,EAAE,QAAQ,UAAU,IAAI;AAAA,QAC7C,SAAS,MAAM;AACb,cAAI,CAAC,YAAa;AAClB,wBAAc,aAAa,OAAO,OAAO;AAAA,QAC3C;AAAA,QACA,OAAO,CAAC,UAAuE;AAC7E,gBAAM,EAAE,IAAI,GAAG,IAAI;AACnB,cAAI,OAAO,UAAa,OAAO,OAAW,QAAO,oBAAC,OAAE;AAEpD,gBAAM,SAAS,OAAO,MAAM,MAAM,YAAY,MAAM,IAAI,IAAI,MAAM,IAAI;AACtE,gBAAM,SAAS,YAAY,aAAa,UAAU;AAElD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,aAAa,EAAE,KAAK,EAAE;AAAA,cACjC,SAAS,SAAS,MAAM;AAAA,cACxB,QAAQ,UAAU,QAAQ,EAAE,SAAS,OAAO,MAAM;AAAA,cAClD,WAAU;AAAA,cAET,oBAAU,SACT;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAG;AAAA,kBACH,MAAK;AAAA,kBACL,QAAQ;AAAA,kBACR,aAAa,KAAK,IAAI,KAAK,SAAS,IAAI;AAAA;AAAA,cAC1C,IAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAG,UAAU,OAAO,MAAM;AAAA,kBAC1B,MAAM,SAAS,SAAS;AAAA,kBACxB,QAAQ,SAAS,QAAQ;AAAA,kBAGzB,aAAa,SAAS,MAAM;AAAA;AAAA,cAC9B;AAAA;AAAA,UAEJ;AAAA,QAEJ;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACA,qBAAC,UACC;AAAA,0BAAC,kBAAe,IAAQ,SAAkB,QAAgB;AAAA,MACzD,WAAW,oBAAC,cAAW,IAAQ,SAAkB,QAAQ,GAAG,WAAW,KAAK;AAAA,OAC/E;AAAA,KACF;AAEJ;AAGA,SAAS,MAAM;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAA6E;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,oBAAU,OAAO,GAAG;AAAA;AAAA,EACvB;AAEJ;AAGA,SAAS,MAAM;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAA6E;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,oBAAU,OAAO,GAAG;AAAA;AAAA,EACvB;AAEJ;AAUA,SAAS,MAAM;AAAA,EACb,QAAQ,CAAC,IAAI,GAAG;AAAA,EAChB,GAAG;AACL,GAAyC;AACvC,SAAO,oBAAC,iBAAc,OAAe,GAAG,MAAM;AAChD;AAGA,SAAS,KAAK;AAAA,EACZ,kBAAkB;AAAA,EAClB,GAAG;AACL,GAAyC;AACvC,SAAO,oBAAC,iBAAc,iBAAmC,GAAG,MAAM;AACpE;AAQA,SAAS,QAAQ,EAAE,SAAS,WAAW,cAAc,SAAS,KAAK,GAA0B;AAC3F,QAAM,EAAE,gBAAgB,IAAI,gBAAgB;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,SAAS,EAAE,iBAAiB,MAAM,IAAI;AAAA,MAC9C,SACE,oBAAC,uBAAoB,UAAU,iBAAiB,WAAsB,SAAkB;AAAA;AAAA,EAE5F;AAEJ;AAGA,SAAS,OAAO;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,cAAc;AAChB,GAAyB;AACvB,QAAM,EAAE,iBAAiB,cAAc,IAAI,gBAAgB;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAGA,SAAS,WAAW,EAAE,QAAQ,GAAwC;AACpE,SAAO,oBAAC,mBAAgB,SAAkB;AAC5C;AAEA,aAAa,UAAU;AACvB,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB,aAAa,QAAQ;AACrB,aAAa,OAAO;AACpB,aAAa,UAAU;AACvB,aAAa,SAAS;AACtB,aAAa,gBAAgB;AAC7B,aAAa,gBAAgB;AAC7B,aAAa,aAAa;AAC1B,aAAa,aAAa;AAE1B,IAAO,uBAAQ;","names":[]}

package/dist/charts/Sparkline/Sparkline.d.ts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/** The mark a sparkline is drawn with. */
+type SparklineVariant = 'line' | 'area' | 'bars';
+interface SparklineProps {
+    /** The numbers, in order. Anything shorter than two points draws nothing. */
+    data: number[];
+    /**
+     * What the run is, in a sentence. Required, and it is the whole accessible
+     * name: a sparkline has no axes and no legend, so nothing else describes it.
+     */
+    label: string;
+    variant?: SparklineVariant;
+    /** Height in pixels. The width comes from the container. */
+    height?: number;
+    /**
+     * The domain, as `[min, max]`. Derived from the data when omitted.
+     *
+     * Pin it whenever a column of sparklines is meant to be compared: on
+     * independent domains every row peaks and troughs identically, which is the
+     * one way a table of sparklines can be actively misleading.
+     */
+    domain?: [number, number];
+    /** Marks the last point, which is usually the one being asked about. */
+    showLast?: boolean;
+    /**
+     * The value announced alongside the label — the current reading, formatted.
+     * Falls back to the last number.
+     */
+    value?: ReactNode;
+    className?: string;
+}
+/**
+ * A run of numbers at the size of a word — in a table cell, beside a figure, at
+ * the end of a row.
+ *
+ * Deliberately axis-less, gridless and label-less: a sparkline answers "what
+ * shape has this been", and every piece of chrome that would make it answer
+ * "what value exactly" also makes it too big to sit inline, which was the only
+ * reason to reach for it. When the exact value matters, print the number beside
+ * it — `value` does — and when the trend needs reading precisely, it wants a
+ * `<LineChart>` and its own space.
+ *
+ * No rendering engine: it is one `<path>` over a normalised viewBox, so it
+ * costs nothing to put a hundred of them in a table.
+ *
+ * @example
+ * <Sparkline label="Weekly signups" data={[12, 18, 9, 24, 30, 22, 41]} value="41" />
+ */
+declare function Sparkline({ data, label, variant, height, domain, showLast, value, className, }: SparklineProps): react.JSX.Element;
+
+export { Sparkline, type SparklineProps, type SparklineVariant, Sparkline as default };

package/dist/charts/Sparkline/Sparkline.js

@@ -0,0 +1,93 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function points(data, min, max) {
+  const span = max - min || 1;
+  const step = data.length > 1 ? 100 / (data.length - 1) : 0;
+  return data.map((value, index) => ({
+    x: index * step,
+    // SVG y grows downward; the data does not.
+    y: 100 - (value - min) / span * 100
+  }));
+}
+function Sparkline({
+  data,
+  label,
+  variant = "line",
+  height = 28,
+  domain,
+  showLast = true,
+  value,
+  className
+}) {
+  const clean = data.filter((entry) => Number.isFinite(entry));
+  const [min, max] = domain ?? [Math.min(...clean), Math.max(...clean)];
+  const reading = value ?? clean.at(-1)?.toLocaleString();
+  if (clean.length < 2) {
+    return /* @__PURE__ */ jsxs("span", { className: cn("mono-meta text-(--ink-3-aa)", className), children: [
+      label,
+      ": not enough data"
+    ] });
+  }
+  const plotted = points(clean, min, max);
+  const line = plotted.map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`).join(" ");
+  const last = plotted.at(-1);
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex w-full items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        role: "img",
+        "aria-label": reading === void 0 ? label : `${label}: ${reading}`,
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "none",
+        height,
+        className: "min-w-0 flex-1 overflow-visible text-(--series-1)",
+        children: [
+          variant === "bars" ? plotted.map((point, index) => {
+            const width = 100 / (plotted.length * 1.6);
+            return /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: point.x - width / 2,
+                y: point.y,
+                width,
+                height: Math.max(1, 100 - point.y),
+                fill: "currentColor",
+                fillOpacity: 0.85
+              },
+              index
+            );
+          }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            variant === "area" && /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: `${line} L100,100 L0,100 Z`,
+                fill: "currentColor",
+                fillOpacity: "var(--chart-fill)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: line,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 1.5,
+                vectorEffect: "non-scaling-stroke",
+                strokeLinejoin: "round",
+                strokeLinecap: "round"
+              }
+            )
+          ] }),
+          showLast && variant !== "bars" && /* @__PURE__ */ jsx("circle", { cx: last.x, cy: last.y, r: 2, fill: "currentColor", vectorEffect: "non-scaling-stroke" })
+        ]
+      }
+    ),
+    value !== void 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs tabular-nums text-(--ink)", children: value })
+  ] });
+}
+var Sparkline_default = Sparkline;
+export {
+  Sparkline,
+  Sparkline_default as default
+};
+//# sourceMappingURL=Sparkline.js.map

package/dist/charts/Sparkline/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/Sparkline/Sparkline.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** The mark a sparkline is drawn with. */\nexport type SparklineVariant = 'line' | 'area' | 'bars'\n\nexport interface SparklineProps {\n  /** The numbers, in order. Anything shorter than two points draws nothing. */\n  data: number[]\n  /**\n   * What the run is, in a sentence. Required, and it is the whole accessible\n   * name: a sparkline has no axes and no legend, so nothing else describes it.\n   */\n  label: string\n  variant?: SparklineVariant\n  /** Height in pixels. The width comes from the container. */\n  height?: number\n  /**\n   * The domain, as `[min, max]`. Derived from the data when omitted.\n   *\n   * Pin it whenever a column of sparklines is meant to be compared: on\n   * independent domains every row peaks and troughs identically, which is the\n   * one way a table of sparklines can be actively misleading.\n   */\n  domain?: [number, number]\n  /** Marks the last point, which is usually the one being asked about. */\n  showLast?: boolean\n  /**\n   * The value announced alongside the label — the current reading, formatted.\n   * Falls back to the last number.\n   */\n  value?: ReactNode\n  className?: string\n}\n\n/** The polyline through a normalised run, in a 0–100 by 0–100 box. */\nfunction points(data: number[], min: number, max: number): { x: number; y: number }[] {\n  const span = max - min || 1\n  const step = data.length > 1 ? 100 / (data.length - 1) : 0\n  return data.map((value, index) => ({\n    x: index * step,\n    // SVG y grows downward; the data does not.\n    y: 100 - ((value - min) / span) * 100,\n  }))\n}\n\n/**\n * A run of numbers at the size of a word — in a table cell, beside a figure, at\n * the end of a row.\n *\n * Deliberately axis-less, gridless and label-less: a sparkline answers \"what\n * shape has this been\", and every piece of chrome that would make it answer\n * \"what value exactly\" also makes it too big to sit inline, which was the only\n * reason to reach for it. When the exact value matters, print the number beside\n * it — `value` does — and when the trend needs reading precisely, it wants a\n * `<LineChart>` and its own space.\n *\n * No rendering engine: it is one `<path>` over a normalised viewBox, so it\n * costs nothing to put a hundred of them in a table.\n *\n * @example\n * <Sparkline label=\"Weekly signups\" data={[12, 18, 9, 24, 30, 22, 41]} value=\"41\" />\n */\nexport function Sparkline({\n  data,\n  label,\n  variant = 'line',\n  height = 28,\n  domain,\n  showLast = true,\n  value,\n  className,\n}: SparklineProps) {\n  const clean = data.filter((entry) => Number.isFinite(entry))\n  const [min, max] = domain ?? [Math.min(...clean), Math.max(...clean)]\n  const reading = value ?? clean.at(-1)?.toLocaleString()\n\n  if (clean.length < 2) {\n    return (\n      <span className={cn('mono-meta text-(--ink-3-aa)', className)}>\n        {label}: not enough data\n      </span>\n    )\n  }\n\n  const plotted = points(clean, min, max)\n  const line = plotted.map((point, index) => `${index === 0 ? 'M' : 'L'}${point.x},${point.y}`).join(' ')\n  const last = plotted.at(-1)!\n\n  return (\n    <span className={cn('inline-flex w-full items-center gap-2', className)}>\n      <svg\n        role=\"img\"\n        aria-label={reading === undefined ? label : `${label}: ${reading}`}\n        viewBox=\"0 0 100 100\"\n        // Not `xMidYMid`: the run has to fill the cell it is given, and a\n        // sparkline's aspect ratio carries no meaning to preserve.\n        preserveAspectRatio=\"none\"\n        height={height}\n        className=\"min-w-0 flex-1 overflow-visible text-(--series-1)\"\n      >\n        {variant === 'bars' ? (\n          plotted.map((point, index) => {\n            const width = 100 / (plotted.length * 1.6)\n            return (\n              <rect\n                key={index}\n                x={point.x - width / 2}\n                y={point.y}\n                width={width}\n                height={Math.max(1, 100 - point.y)}\n                fill=\"currentColor\"\n                // The bars carry the reading on their own; a wash would only\n                // add a second, weaker version of it.\n                fillOpacity={0.85}\n              />\n            )\n          })\n        ) : (\n          <>\n            {variant === 'area' && (\n              <path\n                d={`${line} L100,100 L0,100 Z`}\n                fill=\"currentColor\"\n                fillOpacity=\"var(--chart-fill)\"\n              />\n            )}\n            <path\n              d={line}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              // The viewBox is stretched to the cell, so a stroke in user units\n              // would be stretched with it. `non-scaling-stroke` is what keeps\n              // the line the same weight in a narrow cell and a wide one.\n              strokeWidth={1.5}\n              vectorEffect=\"non-scaling-stroke\"\n              strokeLinejoin=\"round\"\n              strokeLinecap=\"round\"\n            />\n          </>\n        )}\n        {showLast && variant !== 'bars' && (\n          <circle cx={last.x} cy={last.y} r={2} fill=\"currentColor\" vectorEffect=\"non-scaling-stroke\" />\n        )}\n      </svg>\n      {value !== undefined && (\n        <span className=\"shrink-0 font-mono text-xs tabular-nums text-(--ink)\">{value}</span>\n      )}\n    </span>\n  )\n}\n\nexport default Sparkline\n"],"mappings":"AA+EM,SAwCI,UAdI,KA1BR;AA9EN,SAAS,UAAU;AAmCnB,SAAS,OAAO,MAAgB,KAAa,KAAyC;AACpF,QAAM,OAAO,MAAM,OAAO;AAC1B,QAAM,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,KAAK;AACzD,SAAO,KAAK,IAAI,CAAC,OAAO,WAAW;AAAA,IACjC,GAAG,QAAQ;AAAA;AAAA,IAEX,GAAG,OAAQ,QAAQ,OAAO,OAAQ;AAAA,EACpC,EAAE;AACJ;AAmBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,QAAQ,KAAK,OAAO,CAAC,UAAU,OAAO,SAAS,KAAK,CAAC;AAC3D,QAAM,CAAC,KAAK,GAAG,IAAI,UAAU,CAAC,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;AACpE,QAAM,UAAU,SAAS,MAAM,GAAG,EAAE,GAAG,eAAe;AAEtD,MAAI,MAAM,SAAS,GAAG;AACpB,WACE,qBAAC,UAAK,WAAW,GAAG,+BAA+B,SAAS,GACzD;AAAA;AAAA,MAAM;AAAA,OACT;AAAA,EAEJ;AAEA,QAAM,UAAU,OAAO,OAAO,KAAK,GAAG;AACtC,QAAM,OAAO,QAAQ,IAAI,CAAC,OAAO,UAAU,GAAG,UAAU,IAAI,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,MAAM,CAAC,EAAE,EAAE,KAAK,GAAG;AACtG,QAAM,OAAO,QAAQ,GAAG,EAAE;AAE1B,SACE,qBAAC,UAAK,WAAW,GAAG,yCAAyC,SAAS,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,YAAY,SAAY,QAAQ,GAAG,KAAK,KAAK,OAAO;AAAA,QAChE,SAAQ;AAAA,QAGR,qBAAoB;AAAA,QACpB;AAAA,QACA,WAAU;AAAA,QAET;AAAA,sBAAY,SACX,QAAQ,IAAI,CAAC,OAAO,UAAU;AAC5B,kBAAM,QAAQ,OAAO,QAAQ,SAAS;AACtC,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,GAAG,MAAM,IAAI,QAAQ;AAAA,gBACrB,GAAG,MAAM;AAAA,gBACT;AAAA,gBACA,QAAQ,KAAK,IAAI,GAAG,MAAM,MAAM,CAAC;AAAA,gBACjC,MAAK;AAAA,gBAGL,aAAa;AAAA;AAAA,cARR;AAAA,YASP;AAAA,UAEJ,CAAC,IAED,iCACG;AAAA,wBAAY,UACX;AAAA,cAAC;AAAA;AAAA,gBACC,GAAG,GAAG,IAAI;AAAA,gBACV,MAAK;AAAA,gBACL,aAAY;AAAA;AAAA,YACd;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBACC,GAAG;AAAA,gBACH,MAAK;AAAA,gBACL,QAAO;AAAA,gBAIP,aAAa;AAAA,gBACb,cAAa;AAAA,gBACb,gBAAe;AAAA,gBACf,eAAc;AAAA;AAAA,YAChB;AAAA,aACF;AAAA,UAED,YAAY,YAAY,UACvB,oBAAC,YAAO,IAAI,KAAK,GAAG,IAAI,KAAK,GAAG,GAAG,GAAG,MAAK,gBAAe,cAAa,sBAAqB;AAAA;AAAA;AAAA,IAEhG;AAAA,IACC,UAAU,UACT,oBAAC,UAAK,WAAU,wDAAwD,iBAAM;AAAA,KAElF;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}