@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/WaterfallChart/WaterfallChart.js

@@ -0,0 +1,319 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useId,
+  useMemo
+} from "react";
+import {
+  Bar as RechartsBar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  ReferenceLine as RechartsReferenceLine,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis,
+  usePlotArea
+} from "recharts";
+import { ChartContainer } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartEmpty } from "../lib/empty.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartTooltip } from "../lib/tooltip.js";
+import { BarHatchedFill, 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";
+import { cn } from "../../lib/cn.js";
+const DEFAULT_CONFIG = { value: { label: "Change" } };
+const CHART_MARGIN = { top: 20, right: 12, bottom: 0, left: 12 };
+const BAR_RADIUS = 2;
+function ascending(a, b) {
+  return a <= b ? [a, b] : [b, a];
+}
+function resolve(data) {
+  let running = 0;
+  return data.map((step) => {
+    const type = step.type ?? "delta";
+    if (type === "total") {
+      const total = step.value ?? running;
+      const resolved = {
+        ...step,
+        type,
+        change: total - running,
+        total,
+        span: ascending(0, total),
+        direction: "total"
+      };
+      running = total;
+      return resolved;
+    }
+    const change = step.value ?? 0;
+    const from = running;
+    running += change;
+    return {
+      ...step,
+      type,
+      change,
+      total: running,
+      span: ascending(from, running),
+      direction: change < 0 ? "decrease" : "increase"
+    };
+  });
+}
+const WaterfallContext = createContext(null);
+function useWaterfall() {
+  const context = useContext(WaterfallContext);
+  if (!context) throw new Error("A waterfall part must be rendered inside <WaterfallChart>");
+  return context;
+}
+function WaterfallChart({
+  config = DEFAULT_CONFIG,
+  data,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  formatValue = defaultTick,
+  hideDataTable = false,
+  empty
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const seriesKey = Object.keys(config)[0] ?? "value";
+  const steps = useMemo(() => resolve(data), [data]);
+  const context = useMemo(
+    () => ({ config, seriesKey, steps, formatValue }),
+    [config, seriesKey, steps, formatValue]
+  );
+  const isEmpty = empty !== false && steps.length === 0;
+  return /* @__PURE__ */ jsx(WaterfallContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : {
+        rows: steps,
+        rowKey: "name",
+        columns: [
+          { key: "change", label: "Change" },
+          { key: "total", label: "Running total" }
+        ]
+      },
+      children: isEmpty ? /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} }) : /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsx(
+        RechartsBarChart,
+        {
+          id: chartId,
+          accessibilityLayer: true,
+          margin: CHART_MARGIN,
+          data: steps,
+          barCategoryGap: "25%",
+          ...chartProps,
+          children
+        }
+      ) })
+    }
+  ) });
+}
+function Bars({
+  radius = BAR_RADIUS,
+  connectors = true,
+  showValues = false,
+  barProps
+}) {
+  const { config, seriesKey, steps, formatValue } = useWaterfall();
+  const id = useId().replace(/:/g, "");
+  const shared = {
+    id,
+    seriesKey,
+    radius,
+    connectors,
+    showValues,
+    stepCount: steps.length,
+    formatValue
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RechartsReferenceLine, { y: 0, stroke: "var(--chart-grid)", strokeWidth: 1 }),
+    /* @__PURE__ */ jsx(
+      RechartsBar,
+      {
+        dataKey: (row) => row.span,
+        name: seriesKey,
+        isAnimationActive: false,
+        fill: "transparent",
+        shape: (props) => /* @__PURE__ */ jsx(StepShape, { ...props, ...shared }),
+        activeBar: (props) => /* @__PURE__ */ jsx(StepShape, { ...props, ...shared }),
+        ...barProps
+      }
+    ),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx(SeriesGradient, { id, dataKey: seriesKey, config, direction: "vertical" }),
+      /* @__PURE__ */ jsx(BarHatchedFill, { id, dataKey: seriesKey })
+    ] })
+  ] });
+}
+function StepShape({
+  x = 0,
+  y = 0,
+  width = 0,
+  height = 0,
+  index = -1,
+  payload,
+  id,
+  seriesKey,
+  radius,
+  connectors,
+  showValues,
+  stepCount,
+  formatValue
+}) {
+  const plot = usePlotArea();
+  if (!payload) return null;
+  const step = payload;
+  const fill = step.direction === "decrease" ? `url(#${id}-hatched-${seriesKey})` : `url(#${id}-colors-${seriesKey})`;
+  const closesAtTop = step.total >= step.span[1];
+  const closingY = closesAtTop ? y : y + height;
+  const drawnHeight = Math.max(height, 1);
+  const band = plot && stepCount > 0 ? plot.width / stepCount : width;
+  const hasNext = index >= 0 && index < stepCount - 1;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    connectors && hasNext && /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: x + width,
+        y1: closingY,
+        x2: x + band,
+        y2: closingY,
+        stroke: "var(--chart-cursor)",
+        strokeWidth: 1,
+        strokeDasharray: "3 3"
+      }
+    ),
+    /* @__PURE__ */ jsx("rect", { x, y, width, height: drawnHeight, rx: radius || void 0, fill }),
+    showValues && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: closesAtTop ? y - 6 : y + drawnHeight + 13,
+        textAnchor: "middle",
+        className: "fill-(--ink) font-mono text-[11px] font-medium tabular-nums",
+        style: { pointerEvents: "none" },
+        children: step.direction === "total" ? formatValue(step.total) : `${step.change > 0 ? "+" : ""}${formatValue(step.change)}`
+      }
+    )
+  ] });
+}
+function XAxis({
+  dataKey = "name",
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  label,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    RechartsXAxis,
+    {
+      dataKey,
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      ...rest,
+      children: axisLabel(label, "x")
+    }
+  );
+}
+function YAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  width = "auto",
+  label,
+  tickFormatter,
+  ...rest
+}) {
+  const { formatValue } = useWaterfall();
+  return /* @__PURE__ */ jsx(
+    RechartsYAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      width,
+      tickFormatter: tickFormatter ?? formatValue,
+      ...rest,
+      children: axisLabel(label, "y")
+    }
+  );
+}
+function Grid({
+  strokeDasharray = "3 3",
+  vertical = false,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray, vertical, ...rest });
+}
+function Tooltip({ variant = "solid", roundness = "lg", defaultIndex }) {
+  const { formatValue } = useWaterfall();
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      cursor: false,
+      defaultIndex,
+      content: (props) => {
+        const { active, payload } = props;
+        const step = payload?.[0]?.payload;
+        if (!active || !step) return /* @__PURE__ */ jsx("span", { className: "p-4" });
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid min-w-40 gap-1.5 border border-(--rule-2) px-2.5 py-1.5 text-xs",
+              roundness === "sm" && "rounded-(--radius-sm)",
+              roundness === "md" && "rounded-(--radius)",
+              roundness === "lg" && "rounded-(--radius-lg)",
+              variant === "frosted" ? "bg-(--chart-surface)/75 backdrop-blur-sm" : "bg-(--chart-surface)"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-(--ink)", children: step.name }),
+              step.direction !== "total" && /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 leading-none", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-(--ink-3-aa)", children: "Change" }),
+                /* @__PURE__ */ jsxs("span", { className: "font-mono font-medium tabular-nums text-(--ink)", children: [
+                  step.change > 0 ? "+" : "",
+                  formatValue(step.change)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 leading-none", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-(--ink-3-aa)", children: step.direction === "total" ? "Total" : "Running total" }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono font-medium tabular-nums text-(--ink)", children: formatValue(step.total) })
+              ] })
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+function Background({ variant }) {
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+WaterfallChart.Bars = Bars;
+WaterfallChart.XAxis = XAxis;
+WaterfallChart.YAxis = YAxis;
+WaterfallChart.Grid = Grid;
+WaterfallChart.Tooltip = Tooltip;
+WaterfallChart.Background = Background;
+WaterfallChart.ReferenceLine = ReferenceLine;
+WaterfallChart.ReferenceBand = ReferenceBand;
+WaterfallChart.Annotation = Annotation;
+var WaterfallChart_default = WaterfallChart;
+export {
+  WaterfallChart,
+  WaterfallChart_default as default
+};
+//# sourceMappingURL=WaterfallChart.js.map

package/dist/charts/WaterfallChart/WaterfallChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/WaterfallChart/WaterfallChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  type ComponentProps,\n  type ReactNode,\n} from 'react'\nimport {\n  Bar as RechartsBar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  ReferenceLine as RechartsReferenceLine,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  usePlotArea,\n} from 'recharts'\nimport { ChartContainer, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartEmpty, type ChartEmptyProps } from '../lib/empty'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartTooltip } from '../lib/tooltip'\nimport { BarHatchedFill, SeriesGradient } from '../lib/paint'\nimport { Annotation, ReferenceBand, ReferenceLine } from '../lib/annotations'\nimport { axisLabel } from '../lib/axis'\nimport { defaultTick } from '../lib/format'\nimport { cn } from '../../lib/cn'\nimport type { ChartXAxisProps, ChartYAxisProps } from '../BarChart/BarChart'\nimport type { ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/** The series a chart with only one of them falls back to. */\nconst DEFAULT_CONFIG: ChartConfig = { value: { label: 'Change' } }\n\nconst CHART_MARGIN = { top: 20, right: 12, bottom: 0, left: 12 }\n\n/** The corner every bar rounds to. */\nconst BAR_RADIUS = 2\n\n/** How a step moves the running total. */\nexport type WaterfallStepType = 'delta' | 'total'\n\n/** Which way a bar goes, which is what its texture encodes. */\nexport type WaterfallDirection = 'increase' | 'decrease' | 'total'\n\nexport interface WaterfallStep {\n  /** The step's name on the category axis. Doubles as its key. */\n  name: string\n  /**\n   * The signed change this step makes, or — on a `total` step — the absolute\n   * figure the running total is set to.\n   *\n   * Omit it on a `total` and the running total is used, which is the right\n   * default for the closing bar: an end total typed by hand can disagree with\n   * the deltas above it, and the chart would draw the disagreement without\n   * saying anything.\n   */\n  value?: number\n  /**\n   * `delta` (the default) adds `value` to the running total and floats the bar\n   * where that lands. `total` plants a bar on the baseline — an opening\n   * balance, a subtotal, a closing figure.\n   */\n  type?: WaterfallStepType\n}\n\n/** A step with its span, its direction and its running total worked out. */\ninterface ResolvedStep extends WaterfallStep {\n  type: WaterfallStepType\n  /**\n   * What this step moved the total by. On a `total` step that is the gap it\n   * closes — zero whenever the deltas above it already add up to it.\n   */\n  change: number\n  /** The running total once this step has been applied. */\n  total: number\n  /**\n   * The bar's two ends on the value axis, LOW first.\n   *\n   * Ascending because Recharts reads a floating bar's range that way and\n   * collapses a descending one to nothing — which is every decrease in the\n   * cascade. Which end the running total is at is recovered from `total`\n   * rather than from the order here.\n   */\n  span: [number, number]\n  direction: WaterfallDirection\n}\n\n/** A bar's two ends, low first — see `ResolvedStep.span`. */\nfunction ascending(a: number, b: number): [number, number] {\n  return a <= b ? [a, b] : [b, a]\n}\n\n/** The steps, walked in order, each carrying the total it leaves behind. */\nfunction resolve(data: WaterfallStep[]): ResolvedStep[] {\n  let running = 0\n\n  return data.map((step) => {\n    const type = step.type ?? 'delta'\n\n    if (type === 'total') {\n      const total = step.value ?? running\n      const resolved: ResolvedStep = {\n        ...step,\n        type,\n        change: total - running,\n        total,\n        span: ascending(0, total),\n        direction: 'total',\n      }\n      running = total\n      return resolved\n    }\n\n    const change = step.value ?? 0\n    const from = running\n    running += change\n\n    return {\n      ...step,\n      type,\n      change,\n      total: running,\n      span: ascending(from, running),\n      direction: change < 0 ? 'decrease' : 'increase',\n    }\n  })\n}\n\ninterface WaterfallContextValue {\n  config: ChartConfig\n  seriesKey: string\n  steps: ResolvedStep[]\n  formatValue: (value: number) => string\n}\n\nconst WaterfallContext = createContext<WaterfallContextValue | null>(null)\n\nfunction useWaterfall(): WaterfallContextValue {\n  const context = useContext(WaterfallContext)\n  if (!context) throw new Error('A waterfall part must be rendered inside <WaterfallChart>')\n  return context\n}\n\nexport interface WaterfallChartProps {\n  /**\n   * The single series — its label and its paint. Only the FIRST entry is read;\n   * a waterfall has one quantity and as many bars as it has steps.\n   */\n  config?: ChartConfig\n  /**\n   * The steps, in the order they are applied. Order is the arithmetic: the\n   * chart does not sort, because a different order is a different total at\n   * every intermediate bar.\n   */\n  data: WaterfallStep[]\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, and `<WaterfallChart.Bars>`. */\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 RechartsBarChart>\n  /** Formats every number the chart prints — ticks, labels, tooltip, table. */\n  formatValue?: (value: number) => string\n  /** Drops the hidden table view. Only correct when the page prints the data itself. */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw. `false` keeps the axes,\n   * for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * How a total got from one figure to another — an opening balance, the signed\n * contributions that moved it, and where it closed.\n *\n * The form for \"why did this change\", which a pair of bars cannot answer and a\n * pie chart answers wrongly, because contributions can be NEGATIVE and a slice\n * cannot. Reach for `<BarChart>` when the parts do not have to add up to the\n * gap between two totals, and for `<FunnelChart>` when the quantity only ever\n * shrinks.\n *\n * **The connectors are the claim to be careful about.** They draw the steps as\n * a sequence — this happened, then this — and most breakdowns are not\n * sequential at all: churn and expansion in the same month are simultaneous,\n * and the order they are listed in is an editorial choice. The arithmetic\n * survives any order; the STORY does not, and a reader will take the leftmost\n * bar as the first cause. Two related traps: the intermediate bars are floating\n * lengths read against no baseline, so a small step high up the cascade is hard\n * to compare with a large one near zero; and any step that is itself a net of\n * two larger opposing movements is invisible as such. Where the order is\n * arbitrary, say so in the `description`.\n *\n * Recharts earns its place for the axes, grid and tooltip. Each bar is a\n * floating range — from the running total to the new one — with a custom shape\n * over it, because Recharts has no waterfall mark and the connectors have to be\n * drawn from the same geometry as the bars they join.\n *\n * @example\n * <WaterfallChart title=\"Revenue bridge, FY25\" data={steps}>\n *   <WaterfallChart.Grid />\n *   <WaterfallChart.XAxis />\n *   <WaterfallChart.YAxis label=\"AUD\" />\n *   <WaterfallChart.Tooltip />\n *   <WaterfallChart.Bars showValues />\n * </WaterfallChart>\n *\n * @example\n * const steps = [\n *   { name: 'FY24', value: 1200, type: 'total' as const },\n *   { name: 'New', value: 340 },\n *   { name: 'Churn', value: -180 },\n *   // No value: the closing bar is whatever the deltas add up to.\n *   { name: 'FY25', type: 'total' as const },\n * ]\n */\nexport function WaterfallChart({\n  config = DEFAULT_CONFIG,\n  data,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  formatValue = defaultTick,\n  hideDataTable = false,\n  empty,\n}: WaterfallChartProps) {\n  const chartId = useId().replace(/:/g, '')\n  const seriesKey = Object.keys(config)[0] ?? 'value'\n  const steps = useMemo(() => resolve(data), [data])\n\n  const context = useMemo<WaterfallContextValue>(\n    () => ({ config, seriesKey, steps, formatValue }),\n    [config, seriesKey, steps, formatValue],\n  )\n\n  const isEmpty = empty !== false && steps.length === 0\n\n  return (\n    <WaterfallContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : {\n                rows: steps as unknown as Record<string, unknown>[],\n                rowKey: 'name',\n                columns: [\n                  { key: 'change', label: 'Change' },\n                  { key: 'total', label: 'Running total' },\n                ],\n              }\n        }\n      >\n        {isEmpty ? (\n          <ChartEmpty {...(empty || {})} />\n        ) : (\n          <ChartContainer config={config}>\n            <RechartsBarChart\n              id={chartId}\n              accessibilityLayer\n              margin={CHART_MARGIN}\n              data={steps}\n              barCategoryGap=\"25%\"\n              {...chartProps}\n            >\n              {children}\n            </RechartsBarChart>\n          </ChartContainer>\n        )}\n      </ChartFigure>\n    </WaterfallContext.Provider>\n  )\n}\n\nexport interface WaterfallBarsProps {\n  /** The bars' corner. */\n  radius?: number\n  /**\n   * Joins each bar's closing edge to where the next one starts.\n   *\n   * On by default: without them a waterfall is a row of bars floating at\n   * unrelated heights, and the cascade — which is the entire point of the form\n   * — has to be reconstructed by the reader.\n   */\n  connectors?: boolean\n  /**\n   * Prints each step's signed change above or below its bar.\n   *\n   * Worth more here than on most charts: an intermediate bar has no baseline\n   * under it, so its length is the one thing a reader cannot get off the axis.\n   */\n  showValues?: boolean\n  /** Escape hatch onto the underlying Recharts bar. */\n  barProps?: ComponentProps<typeof RechartsBar>\n}\n\n/**\n * The bars and the connectors between them.\n *\n * Increases and totals take the solid series fill; decreases take the 45°\n * hatch. Texture rather than a second colour, because the whole set has to stay\n * legible in greyscale and under forced colours — and a total is told from an\n * increase by geometry instead, since it is the only kind of bar that stands on\n * the baseline.\n */\nfunction Bars({\n  radius = BAR_RADIUS,\n  connectors = true,\n  showValues = false,\n  barProps,\n}: WaterfallBarsProps) {\n  const { config, seriesKey, steps, formatValue } = useWaterfall()\n  const id = useId().replace(/:/g, '')\n\n  const shared = {\n    id,\n    seriesKey,\n    radius,\n    connectors,\n    showValues,\n    stepCount: steps.length,\n    formatValue,\n  }\n\n  return (\n    <>\n      {/* The baseline the totals stand on. A waterfall without a visible zero\n          asks the reader to take the floating bars on trust. */}\n      <RechartsReferenceLine y={0} stroke=\"var(--chart-grid)\" strokeWidth={1} />\n      <RechartsBar\n        dataKey={(row: unknown) => (row as ResolvedStep).span}\n        name={seriesKey}\n        isAnimationActive={false}\n        fill=\"transparent\"\n        shape={(props: unknown) => <StepShape {...(props as StepGeometry)} {...shared} />}\n        activeBar={(props: unknown) => <StepShape {...(props as StepGeometry)} {...shared} />}\n        {...barProps}\n      />\n      <defs>\n        <SeriesGradient id={id} dataKey={seriesKey} config={config} direction=\"vertical\" />\n        <BarHatchedFill id={id} dataKey={seriesKey} />\n      </defs>\n    </>\n  )\n}\n\n/** The geometry Recharts hands a custom bar shape, plus the step behind it. */\ninterface StepGeometry {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n  index?: number\n  payload?: ResolvedStep\n}\n\ninterface StepShapeProps extends StepGeometry {\n  id: string\n  seriesKey: string\n  radius: number\n  connectors: boolean\n  showValues: boolean\n  stepCount: number\n  formatValue: (value: number) => string\n}\n\n/** One step: its bar, its connector to the next step, and its label. */\nfunction StepShape({\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  index = -1,\n  payload,\n  id,\n  seriesKey,\n  radius,\n  connectors,\n  showValues,\n  stepCount,\n  formatValue,\n}: StepShapeProps) {\n  const plot = usePlotArea()\n\n  if (!payload) return null\n\n  const step = payload\n  const fill =\n    step.direction === 'decrease'\n      ? `url(#${id}-hatched-${seriesKey})`\n      : `url(#${id}-colors-${seriesKey})`\n\n  // Which edge of the rect the running total lands on. Everything downstream —\n  // the connector's height, where the label sits — hangs off this one fact,\n  // and it is a comparison rather than a re-derived scale so it stays right\n  // whatever domain the axis ends up with.\n  const closesAtTop = step.total >= step.span[1]\n  const closingY = closesAtTop ? y : y + height\n\n  // A zero-change step has no rect to see. It still has to appear, or the\n  // cascade silently loses a category and the axis stops matching the bars.\n  const drawnHeight = Math.max(height, 1)\n\n  // Recharts leaves a gap between category bands, and the connector has to\n  // cross it. One band is the plot's width over the number of steps, so the\n  // next bar's near edge is exactly one band along from this one's.\n  const band = plot && stepCount > 0 ? plot.width / stepCount : width\n  const hasNext = index >= 0 && index < stepCount - 1\n\n  return (\n    <g>\n      {connectors && hasNext && (\n        <line\n          x1={x + width}\n          y1={closingY}\n          x2={x + band}\n          y2={closingY}\n          stroke=\"var(--chart-cursor)\"\n          strokeWidth={1}\n          strokeDasharray=\"3 3\"\n        />\n      )}\n      <rect x={x} y={y} width={width} height={drawnHeight} rx={radius || undefined} fill={fill} />\n      {showValues && (\n        <text\n          x={x + width / 2}\n          // Above a rise, below a fall — so the label never sits inside the bar\n          // it is describing and never collides with the connector leaving it.\n          y={closesAtTop ? y - 6 : y + drawnHeight + 13}\n          textAnchor=\"middle\"\n          className=\"fill-(--ink) font-mono text-[11px] font-medium tabular-nums\"\n          style={{ pointerEvents: 'none' }}\n        >\n          {step.direction === 'total'\n            ? formatValue(step.total)\n            : `${step.change > 0 ? '+' : ''}${formatValue(step.change)}`}\n        </text>\n      )}\n    </g>\n  )\n}\n\n/** The step axis. */\nfunction XAxis({\n  dataKey = 'name',\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  label,\n  ...rest\n}: ChartXAxisProps) {\n  return (\n    <RechartsXAxis\n      dataKey={dataKey}\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      {...rest}\n    >\n      {axisLabel(label, 'x')}\n    </RechartsXAxis>\n  )\n}\n\n/** The value axis. */\nfunction YAxis({\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  width = 'auto',\n  label,\n  tickFormatter,\n  ...rest\n}: ChartYAxisProps) {\n  const { formatValue } = useWaterfall()\n\n  return (\n    <RechartsYAxis\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      width={width}\n      tickFormatter={tickFormatter ?? formatValue}\n      {...rest}\n    >\n      {axisLabel(label, 'y')}\n    </RechartsYAxis>\n  )\n}\n\n/** Rules across the value axis. */\nfunction Grid({\n  strokeDasharray = '3 3',\n  vertical = false,\n  ...rest\n}: ComponentProps<typeof CartesianGrid>) {\n  return <CartesianGrid strokeDasharray={strokeDasharray} vertical={vertical} {...rest} />\n}\n\n/**\n * The hover panel, printing the change AND the total it leaves behind.\n *\n * The generic tooltip would print the bar's raw span, which is a pair of\n * running totals and reads as two unrelated numbers. Both facts a waterfall\n * carries — what this step did, and where the total stood afterwards — are\n * named here instead.\n */\nfunction Tooltip({ variant = 'solid', roundness = 'lg', defaultIndex }: ChartTooltipSlotProps) {\n  const { formatValue } = useWaterfall()\n\n  return (\n    <ChartTooltip\n      cursor={false}\n      defaultIndex={defaultIndex}\n      content={(props) => {\n        const { active, payload } = props as unknown as {\n          active?: boolean\n          payload?: { payload?: ResolvedStep }[]\n        }\n        const step = payload?.[0]?.payload\n        if (!active || !step) return <span className=\"p-4\" />\n\n        return (\n          <div\n            className={cn(\n              'grid min-w-40 gap-1.5 border border-(--rule-2) px-2.5 py-1.5 text-xs',\n              roundness === 'sm' && 'rounded-(--radius-sm)',\n              roundness === 'md' && 'rounded-(--radius)',\n              roundness === 'lg' && 'rounded-(--radius-lg)',\n              variant === 'frosted'\n                ? 'bg-(--chart-surface)/75 backdrop-blur-sm'\n                : 'bg-(--chart-surface)',\n            )}\n          >\n            <div className=\"font-medium text-(--ink)\">{step.name}</div>\n            {step.direction !== 'total' && (\n              <div className=\"flex justify-between gap-4 leading-none\">\n                <span className=\"text-(--ink-3-aa)\">Change</span>\n                <span className=\"font-mono font-medium tabular-nums text-(--ink)\">\n                  {step.change > 0 ? '+' : ''}\n                  {formatValue(step.change)}\n                </span>\n              </div>\n            )}\n            <div className=\"flex justify-between gap-4 leading-none\">\n              <span className=\"text-(--ink-3-aa)\">\n                {step.direction === 'total' ? 'Total' : 'Running total'}\n              </span>\n              <span className=\"font-mono font-medium tabular-nums text-(--ink)\">\n                {formatValue(step.total)}\n              </span>\n            </div>\n          </div>\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\nWaterfallChart.Bars = Bars\nWaterfallChart.XAxis = XAxis\nWaterfallChart.YAxis = YAxis\nWaterfallChart.Grid = Grid\nWaterfallChart.Tooltip = Tooltip\nWaterfallChart.Background = Background\nWaterfallChart.ReferenceLine = ReferenceLine\nWaterfallChart.ReferenceBand = ReferenceBand\nWaterfallChart.Annotation = Annotation\n\nexport default WaterfallChart\n"],"mappings":"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","names":[]}

package/dist/charts/index.d.ts

@@ -0,0 +1,41 @@
+export { AreaChart, AreaChartProps, AreaProps, AreaStackType, AreaStrokeVariant, AreaVariant, ChartCurveType, ChartLegendSlotProps, ChartTooltipSlotProps } from './AreaChart/AreaChart.js';
+export { BarChart, BarChartProps, BarOrientation, BarProps, BarStackType, BarVariant } from './BarChart/BarChart.js';
+export { LineChart, LineChartProps, LineProps, LineStrokeVariant } from './LineChart/LineChart.js';
+export { ComposedBarProps, ComposedChart, ComposedChartProps, ComposedLineProps } from './ComposedChart/ComposedChart.js';
+export { ScatterChart, ScatterChartProps, ScatterProps, ScatterShape, ScatterTable, ScatterVariant } from './ScatterChart/ScatterChart.js';
+export { PieChart, PieChartProps, PieLabelProps, PieProps, PieVariant } from './PieChart/PieChart.js';
+export { RadarChart, RadarChartProps, RadarProps, RadarVariant } from './RadarChart/RadarChart.js';
+export { RadialBarProps, RadialChart, RadialChartProps, RadialVariant } from './RadialChart/RadialChart.js';
+export { FunnelChart, FunnelChartProps, FunnelLabelProps, FunnelProps, FunnelVariant } from './FunnelChart/FunnelChart.js';
+export { TreemapChart, TreemapChartProps, TreemapExtras, TreemapNode, TreemapVariant } from './TreemapChart/TreemapChart.js';
+export { Heatmap, HeatmapCell, HeatmapProps, HeatmapScale } from './Heatmap/Heatmap.js';
+export { Sparkline, SparklineProps, SparklineVariant } from './Sparkline/Sparkline.js';
+export { BarList, BarListItem, BarListProps } from './BarList/BarList.js';
+export { BigNumber, BigNumberDelta, BigNumberProps, DeltaIntent } from './BigNumber/BigNumber.js';
+export { SankeyChart, SankeyChartProps, SankeyLabelPosition, LinkProps as SankeyLinkSlotProps, SankeyLinkVariant, NodeLabelProps as SankeyNodeLabelProps, NodeProps as SankeyNodeSlotProps } from './SankeyChart/SankeyChart.js';
+export { ChartConfig, ChartContainer, ChartContainerProps, ChartSeries, SERIES_SLOTS, percentTick, useChart } from './lib/chart.js';
+export { ChartColumn, ChartDataTable, ChartDataTableProps, ChartFigure, ChartFigureProps } from './lib/figure.js';
+export { ChartBackground, ChartBackgroundProps, ChartBackgroundVariant } from './lib/background.js';
+export { ChartDot, ChartDotProps, ChartDotVariant } from './lib/dot.js';
+export { ChartLegend, ChartLegendAlign, ChartLegendContent, ChartLegendContentProps, ChartLegendVariant } from './lib/legend.js';
+export { ChartTooltip, ChartTooltipContent, ChartTooltipContentProps, ChartTooltipIndicator, ChartTooltipRoundness, ChartTooltipVariant } from './lib/tooltip.js';
+export { Brush, BrushProps, ChartBrush, ChartBrushProps, ChartBrushRange, ChartBrushVariant, useChartBrush } from './lib/brush.js';
+export { ChartRevealDirection, ChartRevealType } from './lib/paint.js';
+export { BoxPlot, BoxPlotBoxesProps, BoxPlotDatum, BoxPlotOrientation, BoxPlotProps, BoxPlotSample, BoxPlotSummary } from './BoxPlot/BoxPlot.js';
+export { Histogram, HistogramBarsProps, HistogramBin, HistogramMode, HistogramProps } from './Histogram/Histogram.js';
+export { WaterfallBarsProps, WaterfallChart, WaterfallChartProps, WaterfallDirection, WaterfallStep, WaterfallStepType } from './WaterfallChart/WaterfallChart.js';
+export { BulletChart, BulletChartProps, BulletMeasure } from './BulletChart/BulletChart.js';
+export { Facet, FacetOverflowInfo, FacetProps } from './Facet/Facet.js';
+export { FacetGroup, FacetOptions, FacetOverflow, FacetPanel, FacetResult, FacetScales, FacetSort, FacetSortKey, FacetStats, buildPanels, groupRows, niceDomain, sortGroups, statsOf } from './Facet/panels.js';
+export { SONIFY_DEFAULTS, SonifyController, SonifyOptions, SonifyPoint, SonifySeries, SonifyState, SonifyStep, SonifyWave, createSonification, describeSeries, hasAudioSupport, sonifyDomain, sonifyDuration, sonifyTimeline, valueToFrequency } from './lib/sonify.js';
+export { ChartSonifyButton, ChartSonifyButtonProps, Sonify, SonifyAlign, SonifyProps, UseSonifyOptions, UseSonifyResult, chartSonifySeries, useChartSonifySeries, useSonify } from './lib/sonify-control.js';
+export { ChartControls, ChartControlsProps, ChartExportFormat, ChartToolbar, ChartToolbarProps, Toolbar, ToolbarProps } from './lib/toolbar.js';
+export { ChartZoom, ChartZoomOptions, ChartZoomSurface, ChartZoomSurfaceProps, clampWindow, panWindow, useChartZoom, zoomWindow } from './lib/zoom.js';
+export { ChartPngOptions, chartToCsv, chartToPng, downloadBlob, exportFilename } from './lib/export.js';
+export { ANNOTATION_LAYER, Annotation, AnnotationProps, AnnotationWeight, ReferenceBand, ReferenceBandProps, ReferenceLine, ReferenceLineProps } from './lib/annotations.js';
+export { ValueLabelMode, Values, ValuesProps } from './lib/values.js';
+export { ChartEmpty, ChartEmptyProps } from './lib/empty.js';
+export { NumberFormatOptions, NumberStyle, defaultTick, formatNumber } from './lib/format.js';
+import 'react';
+import 'recharts';
+import 'recharts/types/component/DefaultTooltipContent';

package/dist/charts/index.js

@@ -0,0 +1,128 @@
+import { AreaChart } from "./AreaChart/AreaChart.js";
+import { BarChart } from "./BarChart/BarChart.js";
+import { LineChart } from "./LineChart/LineChart.js";
+import { ComposedChart } from "./ComposedChart/ComposedChart.js";
+import { ScatterChart } from "./ScatterChart/ScatterChart.js";
+import { PieChart } from "./PieChart/PieChart.js";
+import { RadarChart } from "./RadarChart/RadarChart.js";
+import { RadialChart } from "./RadialChart/RadialChart.js";
+import { FunnelChart } from "./FunnelChart/FunnelChart.js";
+import { TreemapChart } from "./TreemapChart/TreemapChart.js";
+import { Heatmap } from "./Heatmap/Heatmap.js";
+import { Sparkline } from "./Sparkline/Sparkline.js";
+import { BarList } from "./BarList/BarList.js";
+import { BigNumber } from "./BigNumber/BigNumber.js";
+import { SankeyChart } from "./SankeyChart/SankeyChart.js";
+import { ChartContainer, SERIES_SLOTS, percentTick, useChart } from "./lib/chart.js";
+import { ChartFigure, ChartDataTable } from "./lib/figure.js";
+import { ChartBackground } from "./lib/background.js";
+import { ChartDot } from "./lib/dot.js";
+import { ChartLegend, ChartLegendContent } from "./lib/legend.js";
+import { ChartTooltip, ChartTooltipContent } from "./lib/tooltip.js";
+import { Brush, ChartBrush, useChartBrush } from "./lib/brush.js";
+import { BoxPlot } from "./BoxPlot/BoxPlot.js";
+import { Histogram } from "./Histogram/Histogram.js";
+import { WaterfallChart } from "./WaterfallChart/WaterfallChart.js";
+import { BulletChart } from "./BulletChart/BulletChart.js";
+import { Facet } from "./Facet/Facet.js";
+import { buildPanels, groupRows, niceDomain, sortGroups, statsOf } from "./Facet/panels.js";
+import {
+  createSonification,
+  describeSeries,
+  hasAudioSupport,
+  sonifyDomain,
+  sonifyDuration,
+  sonifyTimeline,
+  valueToFrequency,
+  SONIFY_DEFAULTS
+} from "./lib/sonify.js";
+import {
+  ChartSonifyButton,
+  Sonify,
+  chartSonifySeries,
+  useChartSonifySeries,
+  useSonify
+} from "./lib/sonify-control.js";
+import { Toolbar, ChartToolbar, ChartControls } from "./lib/toolbar.js";
+import { useChartZoom, ChartZoomSurface, clampWindow, panWindow, zoomWindow } from "./lib/zoom.js";
+import { chartToCsv, chartToPng, downloadBlob, exportFilename } from "./lib/export.js";
+import { Annotation, ReferenceBand, ReferenceLine, ANNOTATION_LAYER } from "./lib/annotations.js";
+import { Values } from "./lib/values.js";
+import { ChartEmpty } from "./lib/empty.js";
+import { defaultTick, formatNumber } from "./lib/format.js";
+export {
+  ANNOTATION_LAYER,
+  Annotation,
+  AreaChart,
+  BarChart,
+  BarList,
+  BigNumber,
+  BoxPlot,
+  Brush,
+  BulletChart,
+  ChartBackground,
+  ChartBrush,
+  ChartContainer,
+  ChartControls,
+  ChartDataTable,
+  ChartDot,
+  ChartEmpty,
+  ChartFigure,
+  ChartLegend,
+  ChartLegendContent,
+  ChartSonifyButton,
+  ChartToolbar,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartZoomSurface,
+  ComposedChart,
+  Facet,
+  FunnelChart,
+  Heatmap,
+  Histogram,
+  LineChart,
+  PieChart,
+  RadarChart,
+  RadialChart,
+  ReferenceBand,
+  ReferenceLine,
+  SERIES_SLOTS,
+  SONIFY_DEFAULTS,
+  SankeyChart,
+  ScatterChart,
+  Sonify,
+  Sparkline,
+  Toolbar,
+  TreemapChart,
+  Values,
+  WaterfallChart,
+  buildPanels,
+  chartSonifySeries,
+  chartToCsv,
+  chartToPng,
+  clampWindow,
+  createSonification,
+  defaultTick,
+  describeSeries,
+  downloadBlob,
+  exportFilename,
+  formatNumber,
+  groupRows,
+  hasAudioSupport,
+  niceDomain,
+  panWindow,
+  percentTick,
+  sonifyDomain,
+  sonifyDuration,
+  sonifyTimeline,
+  sortGroups,
+  statsOf,
+  useChart,
+  useChartBrush,
+  useChartSonifySeries,
+  useChartZoom,
+  useSonify,
+  valueToFrequency,
+  zoomWindow
+};
+//# sourceMappingURL=index.js.map

package/dist/charts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/index.ts"],"sourcesContent":["/**\n * @misoto22/design/charts — the data-visualisation entry.\n *\n * Separate from the main entry on purpose. Charts need a rendering engine and\n * an animation runtime that nothing else in the package does, and both are\n * peer dependencies:\n *\n *   pnpm add recharts motion\n *   import { AreaChart } from '@misoto22/design/charts'\n *\n * Keeping them behind their own entry is what stops an app that renders a\n * Badge from paying for Recharts, and it is why the package's size budget\n * still describes the core (DESIGN-ARCH-001).\n *\n * The look ships with the rest of the system — `styles.css`, or the portable\n * `tokens.css` + `semantic.css` layers. A chart reads `--series-1…8` and the\n * `--chart-*` roles from there and defines no colour of its own.\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Cartesian ───\nexport { AreaChart } from './AreaChart/AreaChart'\nexport type {\n  AreaChartProps,\n  AreaProps,\n  AreaStackType,\n  AreaStrokeVariant,\n  AreaVariant,\n  ChartCurveType,\n  ChartLegendSlotProps,\n  ChartTooltipSlotProps,\n} from './AreaChart/AreaChart'\n\nexport { BarChart } from './BarChart/BarChart'\nexport type {\n  BarChartProps,\n  BarOrientation,\n  BarProps,\n  BarStackType,\n  BarVariant,\n} from './BarChart/BarChart'\n\nexport { LineChart } from './LineChart/LineChart'\nexport type { LineChartProps, LineProps, LineStrokeVariant } from './LineChart/LineChart'\n\nexport { ComposedChart } from './ComposedChart/ComposedChart'\nexport type {\n  ComposedBarProps,\n  ComposedChartProps,\n  ComposedLineProps,\n} from './ComposedChart/ComposedChart'\n\nexport { ScatterChart } from './ScatterChart/ScatterChart'\nexport type {\n  ScatterChartProps,\n  ScatterProps,\n  ScatterShape,\n  ScatterTable,\n  ScatterVariant,\n} from './ScatterChart/ScatterChart'\n\n// ─── Polar ───\nexport { PieChart } from './PieChart/PieChart'\nexport type { PieChartProps, PieLabelProps, PieProps, PieVariant } from './PieChart/PieChart'\n\nexport { RadarChart } from './RadarChart/RadarChart'\nexport type { RadarChartProps, RadarProps, RadarVariant } from './RadarChart/RadarChart'\n\nexport { RadialChart } from './RadialChart/RadialChart'\nexport type { RadialBarProps, RadialChartProps, RadialVariant } from './RadialChart/RadialChart'\n\nexport { FunnelChart } from './FunnelChart/FunnelChart'\nexport type {\n  FunnelChartProps,\n  FunnelLabelProps,\n  FunnelProps,\n  FunnelVariant,\n} from './FunnelChart/FunnelChart'\n\nexport { TreemapChart } from './TreemapChart/TreemapChart'\nexport type {\n  TreemapChartProps,\n  TreemapExtras,\n  TreemapNode,\n  TreemapVariant,\n} from './TreemapChart/TreemapChart'\n\n// ─── Grid and inline ───\n// Neither needs a rendering engine: a heatmap is a table with weighted cells,\n// and a sparkline is one path. Both are usable with `recharts` absent.\nexport { Heatmap } from './Heatmap/Heatmap'\nexport type { HeatmapCell, HeatmapProps, HeatmapScale } from './Heatmap/Heatmap'\n\nexport { Sparkline } from './Sparkline/Sparkline'\nexport type { SparklineProps, SparklineVariant } from './Sparkline/Sparkline'\n\nexport { BarList } from './BarList/BarList'\nexport type { BarListItem, BarListProps } from './BarList/BarList'\n\nexport { BigNumber } from './BigNumber/BigNumber'\nexport type { BigNumberDelta, BigNumberProps, DeltaIntent } from './BigNumber/BigNumber'\n\n// ─── Flow ───\nexport { SankeyChart } from './SankeyChart/SankeyChart'\nexport type {\n  LinkProps as SankeyLinkSlotProps,\n  NodeLabelProps as SankeyNodeLabelProps,\n  NodeProps as SankeyNodeSlotProps,\n  SankeyChartProps,\n  SankeyLabelPosition,\n  SankeyLinkVariant,\n} from './SankeyChart/SankeyChart'\n\n// ─── Shared pieces ───\nexport { ChartContainer, SERIES_SLOTS, percentTick, useChart } from './lib/chart'\nexport type { ChartConfig, ChartContainerProps, ChartSeries } from './lib/chart'\n\nexport { ChartFigure, ChartDataTable } from './lib/figure'\nexport type { ChartColumn, ChartDataTableProps, ChartFigureProps } from './lib/figure'\n\nexport { ChartBackground } from './lib/background'\nexport type { ChartBackgroundProps, ChartBackgroundVariant } from './lib/background'\n\nexport { ChartDot } from './lib/dot'\nexport type { ChartDotProps, ChartDotVariant } from './lib/dot'\n\nexport { ChartLegend, ChartLegendContent } from './lib/legend'\nexport type {\n  ChartLegendAlign,\n  ChartLegendContentProps,\n  ChartLegendVariant,\n} from './lib/legend'\n\nexport { ChartTooltip, ChartTooltipContent } from './lib/tooltip'\nexport type {\n  ChartTooltipContentProps,\n  ChartTooltipIndicator,\n  ChartTooltipRoundness,\n  ChartTooltipVariant,\n} from './lib/tooltip'\n\nexport { Brush, ChartBrush, useChartBrush } from './lib/brush'\nexport type { BrushProps, ChartBrushProps, ChartBrushRange, ChartBrushVariant } from './lib/brush'\n\nexport type { ChartRevealDirection, ChartRevealType } from './lib/paint'\n\n// ─── Distribution and contribution ───\n// The statistical family. Each one hides something specific, and each says so\n// in its own description rather than in a footnote: a box plot hides\n// multimodality and sample size, a histogram's shape is a property of its bin\n// width, a bullet's bands are a judgement drawn in the same ink as the\n// measurement, and a waterfall's connectors imply a sequence that usually is\n// not one.\nexport { BoxPlot } from './BoxPlot/BoxPlot'\nexport type {\n  BoxPlotBoxesProps,\n  BoxPlotDatum,\n  BoxPlotOrientation,\n  BoxPlotProps,\n  BoxPlotSample,\n  BoxPlotSummary,\n} from './BoxPlot/BoxPlot'\n\nexport { Histogram } from './Histogram/Histogram'\nexport type {\n  HistogramBarsProps,\n  HistogramBin,\n  HistogramMode,\n  HistogramProps,\n} from './Histogram/Histogram'\n\nexport { WaterfallChart } from './WaterfallChart/WaterfallChart'\nexport type {\n  WaterfallBarsProps,\n  WaterfallChartProps,\n  WaterfallDirection,\n  WaterfallStep,\n  WaterfallStepType,\n} from './WaterfallChart/WaterfallChart'\n\n// Engine-free, like Heatmap and BarList: plain HTML with logical properties,\n// server-renderable, and correct in a right-to-left document.\nexport { BulletChart } from './BulletChart/BulletChart'\nexport type { BulletChartProps, BulletMeasure } from './BulletChart/BulletChart'\n\n// ─── Small multiples ───\n// The same chart once per group, on one shared scale. The shared domain is the\n// default and the whole point: on independent scales a group peaking at 40 and\n// one peaking at 4,000 draw the same shape, and the comparison the reader came\n// for is not merely lost but inverted.\nexport { Facet } from './Facet/Facet'\nexport type { FacetProps, FacetOverflowInfo } from './Facet/Facet'\nexport { buildPanels, groupRows, niceDomain, sortGroups, statsOf } from './Facet/panels'\nexport type {\n  FacetGroup,\n  FacetOptions,\n  FacetOverflow,\n  FacetPanel,\n  FacetResult,\n  FacetScales,\n  FacetSort,\n  FacetSortKey,\n  FacetStats,\n} from './Facet/panels'\n\n// ─── Sonification ───\n// The data as sound, for a reader who cannot see the plot. Never autoplays;\n// sound only ever starts from an explicit user action.\nexport {\n  createSonification,\n  describeSeries,\n  hasAudioSupport,\n  sonifyDomain,\n  sonifyDuration,\n  sonifyTimeline,\n  valueToFrequency,\n  SONIFY_DEFAULTS,\n} from './lib/sonify'\nexport type {\n  SonifyController,\n  SonifyOptions,\n  SonifyPoint,\n  SonifySeries,\n  SonifyState,\n  SonifyStep,\n  SonifyWave,\n} from './lib/sonify'\n\nexport {\n  ChartSonifyButton,\n  Sonify,\n  chartSonifySeries,\n  useChartSonifySeries,\n  useSonify,\n} from './lib/sonify-control'\nexport type {\n  ChartSonifyButtonProps,\n  SonifyAlign,\n  SonifyProps,\n  UseSonifyOptions,\n  UseSonifyResult,\n} from './lib/sonify-control'\n\n// ─── Toolbar, zoom and export ───\n// Zoom and the brush are two views of ONE window: `useChartZoom` owns it and\n// hands the brush a controlled range, so dragging a handle moves the toolbar's\n// window and \"reset\" is unambiguous.\nexport { Toolbar, ChartToolbar, ChartControls } from './lib/toolbar'\nexport type {\n  ChartExportFormat,\n  ChartToolbarProps,\n  ChartControlsProps,\n  ToolbarProps,\n} from './lib/toolbar'\n\nexport { useChartZoom, ChartZoomSurface, clampWindow, panWindow, zoomWindow } from './lib/zoom'\nexport type { ChartZoom, ChartZoomOptions, ChartZoomSurfaceProps } from './lib/zoom'\n\nexport { chartToCsv, chartToPng, downloadBlob, exportFilename } from './lib/export'\nexport type { ChartPngOptions } from './lib/export'\n\n// ─── Annotation layer ───\n// A target line, a shaded period, a note on the plot. Drawn in the order\n// editorial charting settled on: bands behind the grid, lines above the data,\n// text above both.\nexport { Annotation, ReferenceBand, ReferenceLine, ANNOTATION_LAYER } from './lib/annotations'\nexport type {\n  AnnotationProps,\n  AnnotationWeight,\n  ReferenceBandProps,\n  ReferenceLineProps,\n} from './lib/annotations'\n\nexport { Values } from './lib/values'\nexport type { ValueLabelMode, ValuesProps } from './lib/values'\n\nexport { ChartEmpty } from './lib/empty'\nexport type { ChartEmptyProps } from './lib/empty'\n\nexport { defaultTick, formatNumber } from './lib/format'\nexport type { NumberFormatOptions, NumberStyle } from './lib/format'\n"],"mappings":"AAuBA,SAAS,iBAAiB;AAY1B,SAAS,gBAAgB;AASzB,SAAS,iBAAiB;AAG1B,SAAS,qBAAqB;AAO9B,SAAS,oBAAoB;AAU7B,SAAS,gBAAgB;AAGzB,SAAS,kBAAkB;AAG3B,SAAS,mBAAmB;AAG5B,SAAS,mBAAmB;AAQ5B,SAAS,oBAAoB;AAW7B,SAAS,eAAe;AAGxB,SAAS,iBAAiB;AAG1B,SAAS,eAAe;AAGxB,SAAS,iBAAiB;AAI1B,SAAS,mBAAmB;AAW5B,SAAS,gBAAgB,cAAc,aAAa,gBAAgB;AAGpE,SAAS,aAAa,sBAAsB;AAG5C,SAAS,uBAAuB;AAGhC,SAAS,gBAAgB;AAGzB,SAAS,aAAa,0BAA0B;AAOhD,SAAS,cAAc,2BAA2B;AAQlD,SAAS,OAAO,YAAY,qBAAqB;AAYjD,SAAS,eAAe;AAUxB,SAAS,iBAAiB;AAQ1B,SAAS,sBAAsB;AAW/B,SAAS,mBAAmB;AAQ5B,SAAS,aAAa;AAEtB,SAAS,aAAa,WAAW,YAAY,YAAY,eAAe;AAgBxE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAWP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAaP,SAAS,SAAS,cAAc,qBAAqB;AAQrD,SAAS,cAAc,kBAAkB,aAAa,WAAW,kBAAkB;AAGnF,SAAS,YAAY,YAAY,cAAc,sBAAsB;AAOrE,SAAS,YAAY,eAAe,eAAe,wBAAwB;AAQ3E,SAAS,cAAc;AAGvB,SAAS,kBAAkB;AAG3B,SAAS,aAAa,oBAAoB;","names":[]}