@misoto22/folio 0.0.0 → 0.17.0

package/dist/charts/BarChart/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/BarChart/BarChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from 'react'\nimport {\n  Bar as RechartsBar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  Rectangle,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n} from 'recharts'\nimport type { RectRadius } from 'recharts/types/shape/Rectangle'\nimport { motion, useReducedMotion } from 'motion/react'\nimport { ChartContainer, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { useChartSelection } from '../lib/selection'\nimport { type ChartEmptyProps } from '../lib/empty'\nimport { axisLabel } from '../lib/axis'\nimport { defaultTick } from '../lib/format'\nimport { Annotation, ReferenceBand, ReferenceLine } from '../lib/annotations'\nimport { Values, findSlot, resolveValues, type ValuesProps } from '../lib/values'\nimport {\n  ChartSonifyButton,\n  Sonify,\n  useChartSonifySeries,\n  type SonifyProps,\n} from '../lib/sonify-control'\n\n/**\n * The axis props, with `label` narrowed to a string.\n *\n * Recharts' own `label` accepts a render function and a config object, neither\n * of which a call site should be reaching for to name an axis — and both of\n * which would let a consumer opt out of the system's own axis type styling\n * without noticing.\n */\nexport type ChartXAxisProps = Omit<ComponentProps<typeof RechartsXAxis>, 'label'> & {\n  /** What this axis measures. Say the unit here or in the series label, once. */\n  label?: string\n}\n\nexport type ChartYAxisProps = Omit<ComponentProps<typeof RechartsYAxis>, 'label'> & {\n  /** What this axis measures. Say the unit here or in the series label, once. */\n  label?: string\n}\n\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartLegend, ChartLegendContent } from '../lib/legend'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport { Brush, ChartBrush, type BrushProps, type ChartBrushRange } from '../lib/brush'\nimport { ChartControls, Toolbar, type ToolbarProps } from '../lib/toolbar'\nimport { useChartZoom } from '../lib/zoom'\nimport { LoadingIndicator, LoadingShimmer, LOADING_KEY, useLoadingRows } from '../lib/loading'\nimport {\n  BarBufferFill,\n  BarDuotoneFill,\n  BarGradientFill,\n  BarHatchedFill,\n  BarStrippedFill,\n  GlowFilter,\n  REVEAL_EASE,\n  SeriesGradient,\n  type ChartRevealType,\n} from '../lib/paint'\nimport type { ChartLegendSlotProps, ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/** The corner every bar rounds to unless it says otherwise. */\nconst BAR_RADIUS = 2\n\n/** One bar's grow-in, in seconds. */\nconst GROW_DURATION = 0.5\n\n/** How long each bar waits behind the one before it. */\nconst GROW_STAGGER = 0.05\n\nconst STACK_ID = 'folio-bar-stack'\n\n/**\n * Room around the plot, so the first and last tick labels are not sliced by the\n * container's edge. Recharts' own default is 5px on every side, which is not\n * enough for a label centred on the axis's first point.\n */\nconst CHART_MARGIN = { top: 8, right: 12, bottom: 0, left: 12 }\n\n/**\n * The gap between a bar's foot and its neighbour below in a stack, plus the\n * hairline.\n */\nconst FOOT_GAP = 3\n\n/**\n * The shortest a bar with a value on it may be drawn.\n *\n * Below `FOOT_GAP` the trim used to take the whole bar: a count of two on a\n * scale topping out at a thousand rendered at zero height and was\n * pixel-identical to a category with no rows at all. The full-column hit rect\n * still caught the pointer, so the reader could hover a bar that was not there.\n * One pixel is not much of a bar, and it is the difference between \"small\" and\n * \"absent\" — which is the whole reading.\n */\nconst MIN_BAR_LENGTH = 1\n\n/** How a bar meets the plot. The primary carrier of identity in monochrome. */\nexport type BarVariant = 'default' | 'hatched' | 'duotone' | 'duotone-reverse' | 'gradient' | 'stripped'\n\n/** How several bars combine: side by side, stacked, or normalised to 100%. */\nexport type BarStackType = 'default' | 'stacked' | 'percent'\n\n/**\n * Which way the bars run.\n *\n * `vertical` stands them up from a category axis along the bottom — the default,\n * and what a time series wants. `horizontal` lays them out from a category axis\n * down the side, which is what long category NAMES want: a label that would be\n * rotated 45° to fit under a column reads straight beside a row.\n */\nexport type BarOrientation = 'vertical' | 'horizontal'\n\ninterface BarChartContextValue {\n  config: ChartConfig\n  /** The rows on screen, so a mark can label its own extremes. */\n  rows: Record<string, unknown>[]\n  isStacked: boolean\n  isHorizontal: boolean\n  isLoading: boolean\n  barRadius: number\n  animationType: ChartRevealType\n  introStartedAt: number\n  dataLength: number\n  /**\n   * Where the last row of `data` sits in the window on screen, or -1 when it is\n   * outside it. What `buffer` hatches.\n   */\n  bufferIndex: number\n  selectedDataKey: string | null\n  selectDataKey: (dataKey: string | null) => void\n  isPointerInChart: boolean\n}\n\nconst BarChartContext = createContext<BarChartContextValue | null>(null)\n\nfunction useBarChart(): BarChartContextValue {\n  const context = useContext(BarChartContext)\n  if (!context) throw new Error('A bar chart part must be rendered inside <BarChart>')\n  return context\n}\n\ntype ValidateKeys<TData, TConfig> = {\n  [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never\n}\n\nexport interface BarChartProps<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n> {\n  config: TConfig & ValidateKeys<TData, TConfig>\n  /** The rows the chart draws. One entry per point, bar or category. */\n  data: TData[]\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  /**\n   * The composed parts — axes, grid, tooltip, legend, and the marks\n   * themselves.\n   */\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  /** How several marks combine: side by side, stacked, or normalised to 100%. */\n  stackType?: BarStackType\n  /**\n   * Which way the bars run. Reach for `horizontal` when the category names are\n   * long enough to need rotating under a column.\n   */\n  orientation?: BarOrientation\n  /** The corner every `<BarChart.Bar>` inherits. */\n  barRadius?: number\n  /** The grow-in order every `<BarChart.Bar>` inherits. */\n  animationType?: ChartRevealType\n  /** Gap between bars inside one category. */\n  barGap?: number\n  /** Gap between categories. */\n  barCategoryGap?: number\n  /** The series lit on first render, when the chart keeps its own selection. */\n  defaultSelectedDataKey?: string | null\n  /**\n   * The selected series, driven from outside.\n   *\n   * Give this and the chart follows it; leave it undefined and the chart keeps\n   * its own, starting from `defaultSelectedDataKey`.\n   */\n  selectedDataKey?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selectedDataKey: string | null) => void\n  /**\n   * Swaps the marks for an animated skeleton, keeping the measured height so\n   * the page does not jump when the data lands.\n   */\n  isLoading?: boolean\n  /** How many bars the skeleton draws. */\n  loadingBars?: number\n  /**\n   * The row field on the category axis. Needed by the brush and by the table\n   * view.\n   */\n  xDataKey?: keyof TData & string\n  /**\n   * Drops the hidden table view. Only correct when the page prints the data\n   * itself.\n   */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw.\n   *\n   * Rendered instead of the plot whenever `data` is empty and the chart is not\n   * loading — the state a real dashboard reaches within a week, and the one an\n   * empty pair of axes is indistinguishable from a failed load. `false` keeps\n   * the axes, for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * Discrete categories compared by length — the shape for \"how much, per thing\".\n *\n * Reach for `<AreaChart>` or `<LineChart>` when the axis is continuous and the\n * reader is following a trend rather than comparing buckets.\n *\n * @example\n * <BarChart title=\"Visitors by month\" config={config} data={data} xDataKey=\"month\">\n *   <BarChart.Grid />\n *   <BarChart.XAxis dataKey=\"month\" />\n *   <BarChart.Tooltip />\n *   <BarChart.Bar dataKey=\"desktop\" variant=\"duotone\" />\n * </BarChart>\n */\nexport function BarChart<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n>({\n  config,\n  data,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  stackType = 'default',\n  orientation = 'vertical',\n  barRadius = BAR_RADIUS,\n  animationType = 'forward',\n  barGap,\n  barCategoryGap,\n  defaultSelectedDataKey = null,\n  selectedDataKey: controlledDataKey,\n  onSelectionChange,\n  isLoading = false,\n  loadingBars,\n  xDataKey,\n  hideDataTable = false,\n  empty,\n}: BarChartProps<TData, TConfig>) {\n  const chartId = useId().replace(/:/g, '')\n  // Stamped once, on the first render. The grow-in reads elapsed time from\n  // here rather than from mount, because Recharts remounts every bar on any\n  // re-render — a mount-anchored animation would replay on every hover.\n  const [introStartedAt] = useState(() => Date.now())\n  const [isPointerInChart, setIsPointerInChart] = useState(false)\n  const { rows: loadingData, onShimmerExit } = useLoadingRows(isLoading, loadingBars ?? 12)\n  // One window, two views of it: the brush strip below the plot and the\n  // toolbar above it both read and write this. See `useChartZoom` for why they\n  // are not two separate windows.\n  const zoom = useChartZoom({ data, xDataKey })\n\n  // The brush, the toolbar and the sonify control are declared as children but\n  // never rendered into the Recharts tree — they live in the figure, outside\n  // the SVG.\n  const { brushSlot, toolbarSlot, sonifySlot, chartChildren } = useMemo(() => {\n    const parts = Children.toArray(children)\n    const element = parts.find((child) => isValidElement(child) && child.type === Brush)\n    const props = (isValidElement(element) ? element.props : {}) as BrushProps\n    return {\n      brushSlot: { present: isValidElement(element), ...props },\n      toolbarSlot: findSlot<ToolbarProps>(parts, Toolbar),\n      sonifySlot: findSlot<SonifyProps>(parts, Sonify),\n      chartChildren: parts.filter(\n        (child) =>\n          !(\n            isValidElement(child) &&\n            (child.type === Brush || child.type === Toolbar || child.type === Sonify)\n          ),\n      ),\n    }\n  }, [children])\n\n  const isStacked = stackType === 'stacked' || stackType === 'percent'\n  const isHorizontal = orientation === 'horizontal'\n  const columns = useMemo(\n    () => Object.entries(config).map(([key, series]) => ({ key, label: series.label })),\n    [config],\n  )\n\n  const showBrush = brushSlot.present && !isLoading\n  const showToolbar = toolbarSlot !== null && !isLoading\n  // `empty === false` keeps the axes, for a chart whose emptiness is the\n  // reading — a monitoring panel that should show a flat, silent range rather\n  // than a message.\n  const isEmpty = !isLoading && empty !== false && data.length === 0\n  const displayData = showBrush || showToolbar ? zoom.visibleData : data\n\n  // Which bar on screen is the open period, if any is. Derived from the last\n  // ROW rather than from the last bar drawn: brushed or zoomed back into the\n  // middle of the range, the last bar in the window is a month that closed long\n  // ago, and hatching it says it is still being counted.\n  const bufferIndex =\n    data.length > 0 && displayData[displayData.length - 1] === data[data.length - 1]\n      ? displayData.length - 1\n      : -1\n\n  // The rows on screen, so a brushed range sounds like what it looks like. The\n  // skeleton's rows carry no real series, which is what leaves the control\n  // disabled while data is in flight rather than playing yesterday's numbers.\n  const sonifySeries = useChartSonifySeries(\n    sonifySlot,\n    (isLoading ? loadingData : displayData) as Record<string, unknown>[],\n    config,\n    xDataKey,\n  )\n\n  const [selectedDataKey, selectDataKey] = useChartSelection(\n    controlledDataKey,\n    defaultSelectedDataKey,\n    onSelectionChange,\n  )\n\n  const context = useMemo<BarChartContextValue>(\n    () => ({\n      config,\n      rows: displayData as Record<string, unknown>[],\n      isStacked,\n      isHorizontal,\n      isLoading,\n      barRadius,\n      animationType,\n      introStartedAt,\n      dataLength: displayData.length,\n      bufferIndex,\n      selectedDataKey,\n      selectDataKey,\n      isPointerInChart,\n    }),\n    [\n      animationType,\n      barRadius,\n      bufferIndex,\n      config,\n      displayData,\n      introStartedAt,\n      isHorizontal,\n      isLoading,\n      isPointerInChart,\n      isStacked,\n      selectDataKey,\n      selectedDataKey,\n    ],\n  )\n\n  return (\n    <BarChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : { rows: data, rowKey: xDataKey, columns }\n        }\n        isEmpty={isEmpty}\n        empty={empty}\n      >\n        {sonifySlot && (\n          <ChartSonifyButton {...sonifySlot} title={title} series={sonifySeries} />\n        )}\n        <ChartControls\n          toolbar={showToolbar ? toolbarSlot : null}\n          zoom={zoom}\n          title={title}\n          rows={data}\n          columns={columns}\n          rowKey={xDataKey}\n        >\n        <ChartContainer\n          config={config}\n          footer={\n            showBrush && (\n              <ChartBrush\n                data={data}\n                config={config}\n                xDataKey={xDataKey}\n                variant=\"bar\"\n                barRadius={barRadius}\n                height={brushSlot.height}\n                formatLabel={brushSlot.formatLabel}\n                stacked={isStacked}\n                className=\"mt-1\"\n                {...zoom.brushProps}\n                onChange={(range: ChartBrushRange) => {\n                  zoom.brushProps.onChange(range)\n                  brushSlot.onChange?.(range)\n                }}\n              />\n            )\n          }\n        >\n          <RechartsBarChart\n            id={chartId}\n            accessibilityLayer\n            margin={CHART_MARGIN}\n            // Recharts' `layout` names the axis the CATEGORIES run along, which\n            // is the opposite of what a reader means by a horizontal bar chart.\n            // The flip is done once, here.\n            layout={isHorizontal ? 'vertical' : 'horizontal'}\n            data={isLoading ? loadingData : displayData}\n            barGap={barGap}\n            barCategoryGap={barCategoryGap}\n            stackOffset={stackType === 'percent' ? 'expand' : undefined}\n            onMouseEnter={() => setIsPointerInChart(true)}\n            onMouseLeave={() => setIsPointerInChart(false)}\n            {...chartProps}\n          >\n            {chartChildren}\n            {isLoading && <LoadingBar chartId={chartId} onShimmerExit={onShimmerExit} />}\n          </RechartsBarChart>\n        </ChartContainer>\n        </ChartControls>\n        <LoadingIndicator isLoading={isLoading} />\n      </ChartFigure>\n    </BarChartContext.Provider>\n  )\n}\n\nexport interface BarProps {\n  dataKey: string\n  variant?: BarVariant\n  radius?: number\n  animationType?: ChartRevealType\n  /** Lets a click on this series select it, dimming the rest. */\n  isClickable?: boolean\n  /** Dims this series while another bar in the same column is hovered. */\n  enableHoverHighlight?: boolean\n  /** A halo behind the bars — for the one series that is the point of the figure. */\n  glowing?: boolean\n  /**\n   * Draws the last row of `data` as an open hatch rather than a solid bar.\n   *\n   * The idiom for a period still in progress: the bar is the same height as any\n   * other but is visibly not the same kind of fact.\n   *\n   * Tied to the last ROW, not to the last bar on screen. Brush or zoom into the\n   * middle of the range and no bar is hatched, because none of the periods in\n   * the window is still being counted.\n   */\n  buffer?: boolean\n  /** `<BarChart.Values>`. */\n  children?: ReactNode\n  barProps?: ComponentProps<typeof RechartsBar>\n}\n\n/**\n * One bar series. Scopes its own patterns under a unique id, so any number of\n * series with different variants can share a chart.\n */\nfunction Bar({\n  dataKey,\n  variant = 'default',\n  radius,\n  animationType,\n  isClickable = false,\n  enableHoverHighlight = false,\n  glowing = false,\n  buffer = false,\n  children,\n  barProps,\n}: BarProps) {\n  const {\n    config,\n    isStacked,\n    isHorizontal,\n    isLoading,\n    rows,\n    barRadius: defaultRadius,\n    animationType: defaultAnimation,\n    introStartedAt,\n    dataLength,\n    bufferIndex,\n    selectedDataKey,\n    selectDataKey,\n    isPointerInChart,\n  } = useBarChart()\n  const id = useId().replace(/:/g, '')\n  const reduceMotion = useReducedMotion()\n\n  if (isLoading) return null\n\n  const resolvedRadius = radius ?? defaultRadius\n  const isSelected = selectedDataKey === dataKey\n  const reveal: ChartRevealType = reduceMotion ? 'none' : (animationType ?? defaultAnimation)\n\n  const shared = {\n    id,\n    dataKey,\n    variant,\n    barRadius: resolvedRadius,\n    glowing,\n    buffer,\n    isClickable,\n    enableHoverHighlight,\n    isPointerInChart,\n    isHorizontal,\n    introStartedAt,\n    selectedDataKey,\n    dataLength,\n    bufferIndex,\n    onSelect: () => {\n      if (!isClickable) return\n      selectDataKey(isSelected ? null : dataKey)\n    },\n  }\n\n  return (\n    <>\n      <RechartsBar\n        dataKey={dataKey}\n        stackId={isStacked ? STACK_ID : undefined}\n        fill={`url(#${id}-colors-${dataKey})`}\n        radius={resolvedRadius}\n        isAnimationActive={false}\n        style={isClickable || enableHoverHighlight ? { cursor: 'pointer' } : undefined}\n        shape={(props: unknown) => (\n          <BarShape {...(props as BarGeometry)} {...shared} animationType={reveal} />\n        )}\n        // The hovered bar re-renders through `activeBar`; without forcing the\n        // animation off here it would replay its grow-in under the pointer.\n        activeBar={(props: unknown) => (\n          <BarShape {...(props as BarGeometry)} {...shared} animationType=\"none\" />\n        )}\n        {...barProps}\n      >\n        {resolveValues(\n          findSlot<ValuesProps>(children, Values),\n          rows.map((row) => Number(row[dataKey])).filter(Number.isFinite),\n        )}\n      </RechartsBar>\n      <defs>\n        <SeriesGradient id={id} dataKey={dataKey} config={config} direction=\"vertical\" />\n        {variant === 'hatched' && <BarHatchedFill id={id} dataKey={dataKey} />}\n        {variant === 'duotone' && <BarDuotoneFill id={id} dataKey={dataKey} config={config} />}\n        {variant === 'duotone-reverse' && (\n          <BarDuotoneFill id={id} dataKey={dataKey} config={config} reverse />\n        )}\n        {variant === 'gradient' && <BarGradientFill id={id} dataKey={dataKey} />}\n        {variant === 'stripped' && <BarStrippedFill id={id} dataKey={dataKey} />}\n        {buffer && <BarBufferFill id={id} dataKey={dataKey} />}\n        {glowing && <GlowFilter id={id} dataKey={dataKey} />}\n      </defs>\n    </>\n  )\n}\n\n/** The geometry Recharts hands a custom bar shape. */\ninterface BarGeometry {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n  index?: number\n  isActive?: boolean\n  [key: string]: unknown\n}\n\ninterface BarShapeProps extends BarGeometry {\n  id: string\n  dataKey: string\n  variant: BarVariant\n  barRadius: number\n  glowing: boolean\n  buffer: boolean\n  isClickable: boolean\n  enableHoverHighlight: boolean\n  isPointerInChart: boolean\n  isHorizontal: boolean\n  animationType: ChartRevealType\n  introStartedAt: number\n  selectedDataKey: string | null\n  dataLength: number\n  bufferIndex: number\n  onSelect: () => void\n}\n\n/**\n * One drawn bar.\n *\n * Two rectangles, and the second one is the reason this is a custom shape: an\n * invisible full-height rect keeps the whole COLUMN hoverable and clickable, so\n * a 3px bar at the bottom of the scale is as easy to hit as a full-height one.\n * The painted bar sits inside it and is the only part that animates.\n */\nfunction BarShape(props: BarShapeProps) {\n  const {\n    x = 0,\n    y = 0,\n    width = 0,\n    height = 0,\n    id,\n    dataKey,\n    variant,\n    barRadius,\n    glowing,\n    buffer,\n    isClickable,\n    enableHoverHighlight,\n    isPointerInChart,\n    isHorizontal,\n    animationType,\n    introStartedAt,\n    selectedDataKey,\n    isActive,\n    dataLength,\n    bufferIndex,\n    onSelect,\n  } = props\n\n  const index = typeof props.index === 'number' ? props.index : -1\n  const isBufferBar = buffer && index >= 0 && index === bufferIndex\n  const isStripped = variant === 'stripped'\n  const grow = growAnimation(animationType, index, dataLength, isHorizontal, introStartedAt)\n\n  const fill = isBufferBar ? `url(#${id}-buffer-${dataKey})` : variantFill(variant, id, dataKey)\n  const opacity = barOpacity({\n    isClickable,\n    selectedDataKey,\n    dataKey,\n    enableHoverHighlight,\n    isPointerInChart,\n    isActive,\n  })\n\n  // Stripped rounds only the cap; every other variant rounds all four corners.\n  const radius: RectRadius = isStripped ? [barRadius, barRadius, 0, 0] : barRadius\n\n  const painted = (\n    <>\n      <Rectangle\n        x={x}\n        y={y}\n        width={width}\n        // Three pixels off the foot, which is the 2px surface gap between a bar\n        // and its neighbour above in a stack, plus the hairline — but never all\n        // the way to nothing while there is still a bar to draw.\n        height={height <= 0 ? 0 : Math.max(MIN_BAR_LENGTH, height - FOOT_GAP)}\n        opacity={opacity}\n        radius={radius}\n        fill={fill}\n        filter={glowing ? `url(#${id}-glow-${dataKey})` : undefined}\n        stroke={isBufferBar ? `url(#${id}-colors-${dataKey})` : undefined}\n        strokeWidth={isBufferBar ? 1 : undefined}\n      />\n      {isStripped && (\n        <Rectangle\n          x={x}\n          y={y - 4}\n          width={width}\n          height={2}\n          radius={1}\n          fill={`url(#${id}-colors-${dataKey})`}\n        />\n      )}\n    </>\n  )\n\n  return (\n    <g\n      style={isClickable || enableHoverHighlight ? { cursor: 'pointer' } : undefined}\n      onClick={onSelect}\n    >\n      <Rectangle {...props} fill=\"transparent\" />\n      {grow ? (\n        <motion.g\n          initial={grow.initial}\n          animate={grow.animate}\n          transition={grow.transition}\n          style={grow.style}\n        >\n          {painted}\n        </motion.g>\n      ) : (\n        painted\n      )}\n    </g>\n  )\n}\n\n/**\n * The grow-in for a single bar, or `null` when it should render static.\n *\n * The animation is anchored to when the CHART started rather than to when this\n * bar mounted, because Recharts remounts every bar on every re-render — a hover\n * anywhere in the plot would otherwise replay the whole intro. Reading elapsed\n * time makes it a true one-shot: a bar past its window renders flat, and a bar\n * caught mid-grow resumes from where it should already be.\n */\nfunction growAnimation(\n  animationType: ChartRevealType,\n  index: number,\n  dataLength: number,\n  isHorizontal: boolean,\n  introStartedAt: number,\n) {\n  if (animationType === 'none' || index < 0 || dataLength <= 0) return null\n\n  const lastIndex = dataLength - 1\n  const centre = lastIndex / 2\n\n  let step: number\n  switch (animationType) {\n    case 'reverse':\n      step = lastIndex - index\n      break\n    case 'center-out':\n      step = Math.abs(index - centre)\n      break\n    case 'edges-in':\n      step = centre - Math.abs(index - centre)\n      break\n    default:\n      step = index\n  }\n\n  const startMs = step * GROW_STAGGER * 1000\n  const endMs = startMs + GROW_DURATION * 1000\n  const elapsed = Date.now() - introStartedAt\n\n  if (elapsed >= endMs) return null\n\n  const from = elapsed <= startMs ? 0 : (elapsed - startMs) / (GROW_DURATION * 1000)\n  const transition = {\n    duration: (endMs - Math.max(elapsed, startMs)) / 1000,\n    ease: REVEAL_EASE,\n    delay: Math.max(0, startMs - elapsed) / 1000,\n  }\n\n  return isHorizontal\n    ? { initial: { scaleX: from }, animate: { scaleX: 1 }, transition, style: { originX: 0 } }\n    : { initial: { scaleY: from }, animate: { scaleY: 1 }, transition, style: { originY: 1 } }\n}\n\n/** The paint reference for a variant. */\nfunction variantFill(variant: BarVariant, id: string, dataKey: string): string {\n  if (variant === 'default') return `url(#${id}-colors-${dataKey})`\n  return `url(#${id}-${variant}-${dataKey})`\n}\n\n/** How lit a bar is, given the click selection and the hover highlight. */\nfunction barOpacity({\n  isClickable,\n  selectedDataKey,\n  dataKey,\n  enableHoverHighlight,\n  isPointerInChart,\n  isActive,\n}: {\n  isClickable: boolean\n  selectedDataKey: string | null\n  dataKey: string\n  enableHoverHighlight: boolean\n  isPointerInChart: boolean\n  isActive?: boolean\n}) {\n  const inSelection = selectedDataKey === null || selectedDataKey === dataKey\n  const selectionOpacity = isClickable && selectedDataKey !== null ? (inSelection ? 1 : 0.15) : 1\n\n  if (enableHoverHighlight && isPointerInChart) {\n    return isActive ? selectionOpacity : selectionOpacity * 0.3\n  }\n  return selectionOpacity\n}\n\n/**\n * The category axis when the bars stand up, the value axis when they lie down.\n * The type is resolved from the orientation so a consumer never has to know\n * which way round Recharts wants it.\n */\nfunction XAxis({\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  type,\n  label,\n  ...rest\n}: ChartXAxisProps) {\n  const { isLoading, isHorizontal } = useBarChart()\n  if (isLoading) return null\n  return (\n    <RechartsXAxis\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      type={type ?? (isHorizontal ? 'number' : 'category')}\n      {...rest}\n    >\n      {axisLabel(label, 'x')}\n    </RechartsXAxis>\n  )\n}\n\n/** The other axis, resolved the same way. */\nfunction YAxis({\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  width = 'auto',\n  type,\n  label,\n  tickFormatter,\n  ...rest\n}: ChartYAxisProps) {\n  const { isLoading, isHorizontal } = useBarChart()\n  if (isLoading) return null\n  return (\n    <RechartsYAxis\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      width={width}\n      type={type ?? (isHorizontal ? 'category' : 'number')}\n      tickFormatter={tickFormatter ?? defaultTick}\n      {...rest}\n    >\n      {axisLabel(label, 'y')}\n    </RechartsYAxis>\n  )\n}\n\n/** Rules across the value axis — whichever axis that is for this orientation. */\nfunction Grid({\n  strokeDasharray = '3 3',\n  vertical,\n  horizontal,\n  ...rest\n}: ComponentProps<typeof CartesianGrid>) {\n  const { isHorizontal } = useBarChart()\n  return (\n    <CartesianGrid\n      strokeDasharray={strokeDasharray}\n      vertical={vertical ?? isHorizontal}\n      horizontal={horizontal ?? !isHorizontal}\n      {...rest}\n    />\n  )\n}\n\n/**\n * The hover panel.\n *\n * No crosshair by default, unlike the line and area charts: a bar already marks\n * its own category, and a cursor over it draws a second edge on a shape that\n * has four already.\n */\nfunction Tooltip({ variant, roundness, defaultIndex, cursor = false }: ChartTooltipSlotProps) {\n  const { isLoading, selectedDataKey } = useBarChart()\n  if (isLoading) return null\n\n  return (\n    <ChartTooltip\n      cursor={cursor}\n      defaultIndex={defaultIndex}\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 } = useBarChart()\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  const { isLoading } = useBarChart()\n  if (isLoading) return null\n  return <ChartBackground variant={variant} />\n}\n\n/** The skeleton drawn in place of the real bars while data is in flight. */\nfunction LoadingBar({ chartId, onShimmerExit }: { chartId: string; onShimmerExit: () => void }) {\n  return (\n    <>\n      <RechartsBar\n        dataKey={LOADING_KEY}\n        fill=\"currentColor\"\n        fillOpacity={0.15}\n        radius={BAR_RADIUS}\n        isAnimationActive={false}\n        legendType=\"none\"\n        className=\"text-(--ink)\"\n        style={{ mask: `url(#${chartId}-loading-mask)` }}\n      />\n      <defs>\n        <LoadingShimmer id={chartId} onShimmerExit={onShimmerExit} />\n      </defs>\n    </>\n  )\n}\n\nBarChart.Bar = Bar\nBarChart.XAxis = XAxis\nBarChart.YAxis = YAxis\nBarChart.Grid = Grid\nBarChart.Tooltip = Tooltip\nBarChart.Legend = Legend\nBarChart.Background = Background\nBarChart.ReferenceLine = ReferenceLine\nBarChart.ReferenceBand = ReferenceBand\nBarChart.Annotation = Annotation\nBarChart.Values = Values\nBarChart.Brush = Brush\nBarChart.Toolbar = Toolbar\nBarChart.Sonify = Sonify\n\nexport default BarChart\n"],"mappings":"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","names":[]}

package/dist/charts/BarList/BarList.d.ts

@@ -0,0 +1,65 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ChartEmptyProps } from '../lib/empty.js';
+
+interface BarListItem {
+    /** What the row is. Doubles as its key, so it must be unique. */
+    name: string;
+    value: number;
+    /** Turns the row's name into a link. */
+    href?: string;
+    /** Drawn before the name — a favicon, a status dot, a flag. */
+    icon?: ReactNode;
+}
+interface BarListProps {
+    /** What the list ranks. Required: it names the table for a screen reader. */
+    label: string;
+    /** Prints the label above the list instead of hiding it from sight. */
+    showLabel?: boolean;
+    items: BarListItem[];
+    /** Keeps the top N and folds the rest into one "Other" row. */
+    limit?: number;
+    /** Formats each value. Defaults to the same compact form the axes use. */
+    formatValue?: (value: number) => string;
+    /**
+     * The scale's ceiling. Derived from the largest row when omitted.
+     *
+     * Pin it to compare two lists side by side — on independent scales the
+     * leading row of each fills its track, and two very different numbers look
+     * identical.
+     */
+    max?: number;
+    /** Sorts descending before rendering. */
+    sort?: boolean;
+    className?: string;
+    /**
+     * What the list shows when it has nothing to rank.
+     *
+     * A caption over an empty `<tbody>` is a list that failed to load as far as
+     * the reader can tell, and the reader's next move is to reload the page.
+     */
+    empty?: ChartEmptyProps;
+}
+/**
+ * A ranked list, with the bar behind the name rather than beside it.
+ *
+ * The answer to "top referrers", "slowest endpoints", "biggest accounts" — and
+ * a better one than a horizontal bar chart, which spends a third of its width
+ * on a category axis repeating labels the rows could simply contain. Reading a
+ * name off a y-axis and matching it to a bar is two steps; reading it off the
+ * bar is none.
+ *
+ * It is a `<table>`, because that is what it is: two columns, a header, and one
+ * row per thing. The bar is a background on the name cell, so it never becomes
+ * a second element a screen reader has to walk past.
+ *
+ * Reach for `<BarChart orientation="horizontal">` instead when the categories
+ * are few and fixed and the axis is doing real work — a scale a reader needs to
+ * read values off, rather than a ranking they need to skim.
+ *
+ * @example
+ * <BarList label="Top referrers" items={referrers} limit={5} />
+ */
+declare function BarList({ label, showLabel, items, limit, formatValue, max, sort, className, empty, }: BarListProps): react.JSX.Element;
+
+export { BarList, type BarListItem, type BarListProps, BarList as default };

package/dist/charts/BarList/BarList.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { ChartEmpty } from "../lib/empty.js";
+import { defaultTick } from "../lib/format.js";
+function BarList({
+  label,
+  showLabel = false,
+  items,
+  limit,
+  formatValue = defaultTick,
+  max,
+  sort = true,
+  className,
+  empty
+}) {
+  const ordered = sort ? [...items].sort((a, b) => b.value - a.value) : items;
+  const shown = limit !== void 0 && ordered.length > limit ? [
+    ...ordered.slice(0, limit),
+    {
+      name: "Other",
+      value: ordered.slice(limit).reduce((sum, item) => sum + item.value, 0)
+    }
+  ] : ordered;
+  const ceiling = max ?? Math.max(1, ...shown.map((item) => item.value));
+  if (shown.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-start", showLabel ? "mb-2 eyebrow text-(--ink-3-aa)" : "sr-only"), children: label }),
+      /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col gap-2", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
+    /* @__PURE__ */ jsx(
+      "caption",
+      {
+        className: cn(
+          "text-start",
+          showLabel ? "mb-2 eyebrow text-(--ink-3-aa)" : "sr-only"
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx("thead", { className: "sr-only", children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", children: "Name" }),
+      /* @__PURE__ */ jsx("th", { scope: "col", children: "Value" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: shown.map((item) => {
+      const share = Math.max(0, Math.min(1, item.value / ceiling));
+      return /* @__PURE__ */ jsxs("tr", { className: "align-middle", children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", className: "w-full py-1 pe-3 text-start font-normal", children: /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "flex h-8 items-center gap-2 rounded-(--radius-sm) px-2 text-(--ink)",
+            style: {
+              background: `linear-gradient(to right, color-mix(in srgb, var(--series-1) calc(var(--chart-fill) * 100%), transparent) ${share * 100}%, transparent ${share * 100}%)`
+            },
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex shrink-0 items-center text-(--ink-3-aa)", children: item.icon }),
+              item.href ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: item.href,
+                  className: "truncate underline-offset-2 hover:underline focus-visible:underline",
+                  children: item.name
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "truncate", children: item.name })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("td", { className: "py-1 text-end font-mono text-xs whitespace-nowrap tabular-nums text-(--ink-2)", children: formatValue(item.value) })
+      ] }, item.name);
+    }) })
+  ] }) });
+}
+var BarList_default = BarList;
+export {
+  BarList,
+  BarList_default as default
+};
+//# sourceMappingURL=BarList.js.map

package/dist/charts/BarList/BarList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/BarList/BarList.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { ChartEmpty, type ChartEmptyProps } from '../lib/empty'\nimport { defaultTick } from '../lib/format'\n\nexport interface BarListItem {\n  /** What the row is. Doubles as its key, so it must be unique. */\n  name: string\n  value: number\n  /** Turns the row's name into a link. */\n  href?: string\n  /** Drawn before the name — a favicon, a status dot, a flag. */\n  icon?: ReactNode\n}\n\nexport interface BarListProps {\n  /** What the list ranks. Required: it names the table for a screen reader. */\n  label: string\n  /** Prints the label above the list instead of hiding it from sight. */\n  showLabel?: boolean\n  items: BarListItem[]\n  /** Keeps the top N and folds the rest into one \"Other\" row. */\n  limit?: number\n  /** Formats each value. Defaults to the same compact form the axes use. */\n  formatValue?: (value: number) => string\n  /**\n   * The scale's ceiling. Derived from the largest row when omitted.\n   *\n   * Pin it to compare two lists side by side — on independent scales the\n   * leading row of each fills its track, and two very different numbers look\n   * identical.\n   */\n  max?: number\n  /** Sorts descending before rendering. */\n  sort?: boolean\n  className?: string\n  /**\n   * What the list shows when it has nothing to rank.\n   *\n   * A caption over an empty `<tbody>` is a list that failed to load as far as\n   * the reader can tell, and the reader's next move is to reload the page.\n   */\n  empty?: ChartEmptyProps\n}\n\n/**\n * A ranked list, with the bar behind the name rather than beside it.\n *\n * The answer to \"top referrers\", \"slowest endpoints\", \"biggest accounts\" — and\n * a better one than a horizontal bar chart, which spends a third of its width\n * on a category axis repeating labels the rows could simply contain. Reading a\n * name off a y-axis and matching it to a bar is two steps; reading it off the\n * bar is none.\n *\n * It is a `<table>`, because that is what it is: two columns, a header, and one\n * row per thing. The bar is a background on the name cell, so it never becomes\n * a second element a screen reader has to walk past.\n *\n * Reach for `<BarChart orientation=\"horizontal\">` instead when the categories\n * are few and fixed and the axis is doing real work — a scale a reader needs to\n * read values off, rather than a ranking they need to skim.\n *\n * @example\n * <BarList label=\"Top referrers\" items={referrers} limit={5} />\n */\nexport function BarList({\n  label,\n  showLabel = false,\n  items,\n  limit,\n  formatValue = defaultTick,\n  max,\n  sort = true,\n  className,\n  empty,\n}: BarListProps) {\n  const ordered = sort ? [...items].sort((a, b) => b.value - a.value) : items\n\n  // The tail is summed rather than dropped: a \"top five\" that silently discards\n  // the other forty misstates the whole, and the reader has no way to tell.\n  const shown =\n    limit !== undefined && ordered.length > limit\n      ? [\n          ...ordered.slice(0, limit),\n          {\n            name: 'Other',\n            value: ordered.slice(limit).reduce((sum, item) => sum + item.value, 0),\n          },\n        ]\n      : ordered\n\n  const ceiling = max ?? Math.max(1, ...shown.map((item) => item.value))\n\n  if (shown.length === 0) {\n    return (\n      <div className={cn('flex w-full flex-col gap-2', className)}>\n        <p className={cn('text-start', showLabel ? 'mb-2 eyebrow text-(--ink-3-aa)' : 'sr-only')}>\n          {label}\n        </p>\n        <ChartEmpty {...(empty || {})} />\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      <table className=\"w-full border-collapse text-sm\">\n        <caption\n          className={cn(\n            'text-start',\n            showLabel ? 'mb-2 eyebrow text-(--ink-3-aa)' : 'sr-only',\n          )}\n        >\n          {label}\n        </caption>\n        <thead className=\"sr-only\">\n          <tr>\n            <th scope=\"col\">Name</th>\n            <th scope=\"col\">Value</th>\n          </tr>\n        </thead>\n        <tbody>\n          {shown.map((item) => {\n            const share = Math.max(0, Math.min(1, item.value / ceiling))\n\n            return (\n              <tr key={item.name} className=\"align-middle\">\n                <th scope=\"row\" className=\"w-full py-1 pe-3 text-start font-normal\">\n                  {/* The bar is a background on the cell, not a sibling: an\n                      empty <div> beside the name would be one more thing in the\n                      accessibility tree saying nothing. */}\n                  <span\n                    className=\"flex h-8 items-center gap-2 rounded-(--radius-sm) px-2 text-(--ink)\"\n                    style={{\n                      background: `linear-gradient(to right, color-mix(in srgb, var(--series-1) calc(var(--chart-fill) * 100%), transparent) ${share * 100}%, transparent ${share * 100}%)`,\n                    }}\n                  >\n                    {item.icon && (\n                      <span aria-hidden className=\"flex shrink-0 items-center text-(--ink-3-aa)\">\n                        {item.icon}\n                      </span>\n                    )}\n                    {item.href ? (\n                      <a\n                        href={item.href}\n                        className=\"truncate underline-offset-2 hover:underline focus-visible:underline\"\n                      >\n                        {item.name}\n                      </a>\n                    ) : (\n                      <span className=\"truncate\">{item.name}</span>\n                    )}\n                  </span>\n                </th>\n                <td className=\"py-1 text-end font-mono text-xs whitespace-nowrap tabular-nums text-(--ink-2)\">\n                  {formatValue(item.value)}\n                </td>\n              </tr>\n            )\n          })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n\nexport default BarList\n"],"mappings":"AA+FM,SACE,KADF;AA9FN,SAAS,UAAU;AACnB,SAAS,kBAAwC;AACjD,SAAS,mBAAmB;AA8DrB,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAiB;AACf,QAAM,UAAU,OAAO,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,IAAI;AAItE,QAAM,QACJ,UAAU,UAAa,QAAQ,SAAS,QACpC;AAAA,IACE,GAAG,QAAQ,MAAM,GAAG,KAAK;AAAA,IACzB;AAAA,MACE,MAAM;AAAA,MACN,OAAO,QAAQ,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAAA,IACvE;AAAA,EACF,IACA;AAEN,QAAM,UAAU,OAAO,KAAK,IAAI,GAAG,GAAG,MAAM,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC;AAErE,MAAI,MAAM,WAAW,GAAG;AACtB,WACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACxD;AAAA,0BAAC,OAAE,WAAW,GAAG,cAAc,YAAY,mCAAmC,SAAS,GACpF,iBACH;AAAA,MACA,oBAAC,cAAY,GAAI,SAAS,CAAC,GAAI;AAAA,OACjC;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACxD,+BAAC,WAAM,WAAU,kCACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,mCAAmC;AAAA,QACjD;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,oBAAC,WAAM,WAAU,WACf,+BAAC,QACC;AAAA,0BAAC,QAAG,OAAM,OAAM,kBAAI;AAAA,MACpB,oBAAC,QAAG,OAAM,OAAM,mBAAK;AAAA,OACvB,GACF;AAAA,IACA,oBAAC,WACE,gBAAM,IAAI,CAAC,SAAS;AACnB,YAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,QAAQ,OAAO,CAAC;AAE3D,aACE,qBAAC,QAAmB,WAAU,gBAC5B;AAAA,4BAAC,QAAG,OAAM,OAAM,WAAU,2CAIxB;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YAAY,6GAA6G,QAAQ,GAAG,kBAAkB,QAAQ,GAAG;AAAA,YACnK;AAAA,YAEC;AAAA,mBAAK,QACJ,oBAAC,UAAK,eAAW,MAAC,WAAU,gDACzB,eAAK,MACR;AAAA,cAED,KAAK,OACJ;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,KAAK;AAAA,kBACX,WAAU;AAAA,kBAET,eAAK;AAAA;AAAA,cACR,IAEA,oBAAC,UAAK,WAAU,YAAY,eAAK,MAAK;AAAA;AAAA;AAAA,QAE1C,GACF;AAAA,QACA,oBAAC,QAAG,WAAU,iFACX,sBAAY,KAAK,KAAK,GACzB;AAAA,WA9BO,KAAK,IA+Bd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF,GACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/charts/BigNumber/BigNumber.d.ts

@@ -0,0 +1,72 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/** Which way a change is good. */
+type DeltaIntent = 'up-is-good' | 'down-is-good' | 'neutral';
+interface BigNumberDelta {
+    /**
+     * The change, already computed, as a RATIO. Positive is up, whatever that
+     * means here.
+     *
+     * `0.124` is the twelve-point-four percent the default `format` prints.
+     * Passing `12.4` for the same change prints `+1240%`, and nothing can catch
+     * that for you — a ratio and a percentage are both plain numbers, and either
+     * is a legitimate value under a `format` of your own.
+     */
+    value: number;
+    /** What it is a change from — "vs last week". */
+    label?: ReactNode;
+    /**
+     * Which direction counts as good.
+     *
+     * Required rather than assumed, because the assumption is wrong half the
+     * time: revenue up is good, error rate up is not, and a component that
+     * guesses will confidently colour a bad number green.
+     */
+    intent?: DeltaIntent;
+    /** Formats the change. Defaults to a signed percentage. */
+    format?: (value: number) => string;
+}
+interface BigNumberProps {
+    /** What the number counts. */
+    label: ReactNode;
+    /**
+     * The number, already formatted — this component does not guess a unit.
+     *
+     * `null` and `undefined` are the empty state rather than a blank space: a
+     * headline with nothing under it reads as a figure that failed to load, and
+     * the reader's next move is to reload a page that will look the same.
+     */
+    value: ReactNode;
+    /** What stands in for the number when there is none. */
+    emptyValue?: ReactNode;
+    delta?: BigNumberDelta;
+    /** A sparkline, a note, a caveat. Sits under the number. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * One number, at the size of a headline.
+ *
+ * The form most dashboards need most often and most chart libraries do not
+ * ship, on the grounds that it is not a chart. It is the right answer whenever
+ * there is exactly one figure to report: a plot of a single value is a plot
+ * whose shape carries nothing, and the reader has to decode an axis to recover
+ * a number that could simply have been printed.
+ *
+ * The delta is where this earns its place over a `<p>`. Direction is stated by
+ * the CALL SITE (`intent`), never inferred: "errors down 12%" is good news and
+ * "revenue down 12%" is not, and no component can tell which it is holding.
+ * Where the direction is known, the arrow and the word carry it — the status
+ * colour is the third signal, never the only one.
+ *
+ * @example
+ * <BigNumber
+ *   label="Monthly revenue"
+ *   value="$48,210"
+ *   delta={{ value: 0.124, label: 'vs last month', intent: 'up-is-good' }}
+ * />
+ */
+declare function BigNumber({ label, value, emptyValue, delta, children, className, }: BigNumberProps): react.JSX.Element;
+
+export { BigNumber, type BigNumberDelta, type BigNumberProps, type DeltaIntent, BigNumber as default };

package/dist/charts/BigNumber/BigNumber.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const signed = (value) => `${value > 0 ? "+" : ""}${(value * 100).toFixed(1).replace(/\.0$/, "")}%`;
+function BigNumber({
+  label,
+  value,
+  emptyValue = "\u2014",
+  delta,
+  children,
+  className
+}) {
+  const intent = delta?.intent ?? "neutral";
+  const format = delta?.format ?? signed;
+  const rising = (delta?.value ?? 0) > 0;
+  const flat = (delta?.value ?? 0) === 0;
+  const isEmpty = value === null || value === void 0;
+  const good = flat || intent === "neutral" ? null : intent === "up-is-good" ? rising : !rising;
+  const tone = good === null ? "text-(--ink-2)" : good ? "text-(--ok)" : "text-(--danger)";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "eyebrow text-(--ink-3-aa)", children: label }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "font-heading text-[length:var(--fs-lead)] leading-none tabular-nums",
+          isEmpty ? "text-(--ink-3-aa)" : "text-(--ink)"
+        ),
+        children: isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: emptyValue }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "No data" })
+        ] }) : value
+      }
+    ),
+    delta && /* @__PURE__ */ jsxs("span", { className: cn("flex items-baseline gap-1.5 mono-meta", tone), children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: flat ? "\u2192" : rising ? "\u2191" : "\u2193" }),
+      /* @__PURE__ */ jsx("span", { children: format(delta.value) }),
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        flat ? "no change" : rising ? "up" : "down",
+        good === null ? "" : good ? ", better" : ", worse"
+      ] }),
+      delta.label && /* @__PURE__ */ jsx("span", { className: "text-(--ink-3-aa)", children: delta.label })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: "mt-2", children })
+  ] });
+}
+var BigNumber_default = BigNumber;
+export {
+  BigNumber,
+  BigNumber_default as default
+};
+//# sourceMappingURL=BigNumber.js.map

package/dist/charts/BigNumber/BigNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/BigNumber/BigNumber.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Which way a change is good. */\nexport type DeltaIntent = 'up-is-good' | 'down-is-good' | 'neutral'\n\nexport interface BigNumberDelta {\n  /**\n   * The change, already computed, as a RATIO. Positive is up, whatever that\n   * means here.\n   *\n   * `0.124` is the twelve-point-four percent the default `format` prints.\n   * Passing `12.4` for the same change prints `+1240%`, and nothing can catch\n   * that for you — a ratio and a percentage are both plain numbers, and either\n   * is a legitimate value under a `format` of your own.\n   */\n  value: number\n  /** What it is a change from — \"vs last week\". */\n  label?: ReactNode\n  /**\n   * Which direction counts as good.\n   *\n   * Required rather than assumed, because the assumption is wrong half the\n   * time: revenue up is good, error rate up is not, and a component that\n   * guesses will confidently colour a bad number green.\n   */\n  intent?: DeltaIntent\n  /** Formats the change. Defaults to a signed percentage. */\n  format?: (value: number) => string\n}\n\nexport interface BigNumberProps {\n  /** What the number counts. */\n  label: ReactNode\n  /**\n   * The number, already formatted — this component does not guess a unit.\n   *\n   * `null` and `undefined` are the empty state rather than a blank space: a\n   * headline with nothing under it reads as a figure that failed to load, and\n   * the reader's next move is to reload a page that will look the same.\n   */\n  value: ReactNode\n  /** What stands in for the number when there is none. */\n  emptyValue?: ReactNode\n  delta?: BigNumberDelta\n  /** A sparkline, a note, a caveat. Sits under the number. */\n  children?: ReactNode\n  className?: string\n}\n\nconst signed = (value: number): string =>\n  `${value > 0 ? '+' : ''}${(value * 100).toFixed(1).replace(/\\.0$/, '')}%`\n\n/**\n * One number, at the size of a headline.\n *\n * The form most dashboards need most often and most chart libraries do not\n * ship, on the grounds that it is not a chart. It is the right answer whenever\n * there is exactly one figure to report: a plot of a single value is a plot\n * whose shape carries nothing, and the reader has to decode an axis to recover\n * a number that could simply have been printed.\n *\n * The delta is where this earns its place over a `<p>`. Direction is stated by\n * the CALL SITE (`intent`), never inferred: \"errors down 12%\" is good news and\n * \"revenue down 12%\" is not, and no component can tell which it is holding.\n * Where the direction is known, the arrow and the word carry it — the status\n * colour is the third signal, never the only one.\n *\n * @example\n * <BigNumber\n *   label=\"Monthly revenue\"\n *   value=\"$48,210\"\n *   delta={{ value: 0.124, label: 'vs last month', intent: 'up-is-good' }}\n * />\n */\nexport function BigNumber({\n  label,\n  value,\n  emptyValue = '—',\n  delta,\n  children,\n  className,\n}: BigNumberProps) {\n  const intent = delta?.intent ?? 'neutral'\n  const format = delta?.format ?? signed\n  const rising = (delta?.value ?? 0) > 0\n  const flat = (delta?.value ?? 0) === 0\n  const isEmpty = value === null || value === undefined\n\n  // A change of exactly zero is not good news and not bad news, and the tone\n  // and the arrow have always said so. The verdict is dropped with them: an\n  // intent decides which DIRECTION is better, and there is no direction here,\n  // so `{ value: 0, intent: 'up-is-good' }` used to be announced as \"no\n  // change, worse\" — a judgement nothing on screen was making.\n  const good = flat || intent === 'neutral' ? null : intent === 'up-is-good' ? rising : !rising\n  const tone = good === null ? 'text-(--ink-2)' : good ? 'text-(--ok)' : 'text-(--danger)'\n\n  return (\n    <div className={cn('flex flex-col gap-1', className)}>\n      <span className=\"eyebrow text-(--ink-3-aa)\">{label}</span>\n\n      {/* The serif, at the record-title step. A number this size is the page's\n          headline, and the system sets headlines in the editorial face. */}\n      <span\n        className={cn(\n          'font-heading text-[length:var(--fs-lead)] leading-none tabular-nums',\n          isEmpty ? 'text-(--ink-3-aa)' : 'text-(--ink)',\n        )}\n      >\n        {isEmpty ? (\n          <>\n            {/* The dash is the sighted reading and the sentence is the spoken\n                one. Announcing \"em dash\" instead would be a third thing. */}\n            <span aria-hidden>{emptyValue}</span>\n            <span className=\"sr-only\">No data</span>\n          </>\n        ) : (\n          value\n        )}\n      </span>\n\n      {delta && (\n        <span className={cn('flex items-baseline gap-1.5 mono-meta', tone)}>\n          {/* The arrow is the second carrier and the word is the third, so the\n              reading survives greyscale, forced colours and colour blindness —\n              which the status tint alone does not. */}\n          <span aria-hidden>{flat ? '→' : rising ? '↑' : '↓'}</span>\n          <span>{format(delta.value)}</span>\n          <span className=\"sr-only\">\n            {flat ? 'no change' : rising ? 'up' : 'down'}\n            {good === null ? '' : good ? ', better' : ', worse'}\n          </span>\n          {delta.label && <span className=\"text-(--ink-3-aa)\">{delta.label}</span>}\n        </span>\n      )}\n\n      {children && <div className=\"mt-2\">{children}</div>}\n    </div>\n  )\n}\n\nexport default BigNumber\n"],"mappings":"AAmGM,SAWI,UAXJ,KAWI,YAXJ;AAlGN,SAAS,UAAU;AAiDnB,MAAM,SAAS,CAAC,UACd,GAAG,QAAQ,IAAI,MAAM,EAAE,IAAI,QAAQ,KAAK,QAAQ,CAAC,EAAE,QAAQ,QAAQ,EAAE,CAAC;AAwBjE,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,SAAS,OAAO,UAAU;AAChC,QAAM,SAAS,OAAO,UAAU;AAChC,QAAM,UAAU,OAAO,SAAS,KAAK;AACrC,QAAM,QAAQ,OAAO,SAAS,OAAO;AACrC,QAAM,UAAU,UAAU,QAAQ,UAAU;AAO5C,QAAM,OAAO,QAAQ,WAAW,YAAY,OAAO,WAAW,eAAe,SAAS,CAAC;AACvF,QAAM,OAAO,SAAS,OAAO,mBAAmB,OAAO,gBAAgB;AAEvE,SACE,qBAAC,SAAI,WAAW,GAAG,uBAAuB,SAAS,GACjD;AAAA,wBAAC,UAAK,WAAU,6BAA6B,iBAAM;AAAA,IAInD;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,UAAU,sBAAsB;AAAA,QAClC;AAAA,QAEC,oBACC,iCAGE;AAAA,8BAAC,UAAK,eAAW,MAAE,sBAAW;AAAA,UAC9B,oBAAC,UAAK,WAAU,WAAU,qBAAO;AAAA,WACnC,IAEA;AAAA;AAAA,IAEJ;AAAA,IAEC,SACC,qBAAC,UAAK,WAAW,GAAG,yCAAyC,IAAI,GAI/D;AAAA,0BAAC,UAAK,eAAW,MAAE,iBAAO,WAAM,SAAS,WAAM,UAAI;AAAA,MACnD,oBAAC,UAAM,iBAAO,MAAM,KAAK,GAAE;AAAA,MAC3B,qBAAC,UAAK,WAAU,WACb;AAAA,eAAO,cAAc,SAAS,OAAO;AAAA,QACrC,SAAS,OAAO,KAAK,OAAO,aAAa;AAAA,SAC5C;AAAA,MACC,MAAM,SAAS,oBAAC,UAAK,WAAU,qBAAqB,gBAAM,OAAM;AAAA,OACnE;AAAA,IAGD,YAAY,oBAAC,SAAI,WAAU,QAAQ,UAAS;AAAA,KAC/C;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/charts/BoxPlot/BoxPlot.d.ts

@@ -0,0 +1,177 @@
+import { ChartTooltipSlotProps } from '../AreaChart/AreaChart.js';
+import { ChartXAxisProps, ChartYAxisProps } from '../BarChart/BarChart.js';
+import * as react from 'react';
+import { ReactNode, ComponentProps } from 'react';
+import { BarChart, Bar, CartesianGrid } from 'recharts';
+import { ChartConfig } from '../lib/chart.js';
+import { ChartEmptyProps } from '../lib/empty.js';
+import { ChartBackgroundVariant } from '../lib/background.js';
+import { ReferenceLine, ReferenceBand, Annotation } from '../lib/annotations.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';
+
+/** Which way the boxes run. */
+type BoxPlotOrientation = 'vertical' | 'horizontal';
+/** A category summarised into the five numbers a box is drawn from. */
+interface BoxPlotSummary {
+    /** What the box describes. Doubles as its key, so it must be unique. */
+    name: string;
+    /** The low whisker's end — the smallest observation inside the fence. */
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    /** The high whisker's end — the largest observation inside the fence. */
+    max: number;
+    /** Points outside the fences, drawn one dot each. */
+    outliers?: number[];
+    /**
+     * How many observations the box stands for.
+     *
+     * Needed for a notch, and worth carrying anyway: a box drawn from six points
+     * and a box drawn from six thousand look identical, and only one of them
+     * means anything.
+     */
+    count?: number;
+}
+/** A category handed over as raw observations, for the chart to summarise. */
+interface BoxPlotSample {
+    /** What the box describes. Doubles as its key, so it must be unique. */
+    name: string;
+    /** Every observation in this category, in any order. */
+    values: number[];
+    min?: never;
+    q1?: never;
+    median?: never;
+    q3?: never;
+    max?: never;
+}
+/**
+ * One category: either the raw observations, or the summary itself.
+ *
+ * Both forms exist because both are real. A chart fed from a warehouse gets
+ * percentiles back from the query and never sees a row; a chart fed from a
+ * browser has the array in hand and should not have to compute quartiles to
+ * draw them.
+ */
+type BoxPlotDatum = BoxPlotSample | (BoxPlotSummary & {
+    values?: never;
+});
+interface BoxPlotProps {
+    /**
+     * The single series — its label and its paint. Only the FIRST entry is read;
+     * a box plot has one measurement and as many categories as it has boxes.
+     */
+    config?: ChartConfig;
+    /** One entry per category, as raw observations or as a summary. */
+    data: BoxPlotDatum[];
+    /**
+     * 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, and `<BoxPlot.Boxes>`. */
+    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 BarChart>;
+    /**
+     * Which way the boxes run. Reach for `horizontal` when the category names
+     * are long enough to need rotating under a column.
+     */
+    orientation?: BoxPlotOrientation;
+    /** Formats every number the chart prints — ticks, tooltip, table. */
+    formatValue?: (value: number) => string;
+    /** Drops the hidden table view. Only correct when the page prints the data itself. */
+    hideDataTable?: boolean;
+    /**
+     * What the chart shows when it has nothing to draw. `false` keeps the axes,
+     * for a chart whose emptiness is itself the reading.
+     */
+    empty?: ChartEmptyProps | false;
+}
+/**
+ * The spread of a measurement, per category — median, middle half, reach, and
+ * the points that sit outside it.
+ *
+ * The form to reach for when the question is "how variable is this", and the
+ * one that answers it in a tenth of the ink a histogram per category would
+ * take. Six response-time distributions fit across one screen as six boxes;
+ * as six histograms they do not fit at all.
+ *
+ * **What a box plot hides is multimodality.** A box is five numbers, and five
+ * numbers cannot tell a single hump from two. A bimodal distribution — a fast
+ * cache path and a slow database path, two cohorts inside one average — draws
+ * exactly the same box as a smooth one centred in the same place, and the
+ * reader has no way to tell from the picture that the middle of the box is a
+ * value almost nothing takes. It also hides sample size: a box over six points
+ * and a box over six thousand are drawn identically, which is why `count` is
+ * worth carrying and why a notch, which does read `count`, is worth turning on
+ * when medians are being compared. When the SHAPE of one distribution is the
+ * question, reach for `<Histogram>`; when there are few enough observations to
+ * draw them all, reach for `<ScatterChart>` and plot the points.
+ *
+ * Recharts earns its place here: the boxes need a shared value axis with real
+ * ticks, a category axis, a grid and a tooltip, which is most of a cartesian
+ * chart. What it does not have is a box mark, so each box is drawn as a custom
+ * shape over a range bar — the bar supplies the category band and the scale,
+ * and the glyph inside it is ours.
+ *
+ * @example
+ * <BoxPlot title="Response time by region" data={regions}>
+ *   <BoxPlot.Grid />
+ *   <BoxPlot.XAxis />
+ *   <BoxPlot.YAxis label="ms" />
+ *   <BoxPlot.Tooltip />
+ *   <BoxPlot.Boxes showOutliers />
+ * </BoxPlot>
+ *
+ * @example
+ * // Raw observations, summarised for you with Tukey's fences.
+ * const data = [{ name: 'Sydney', values: [180, 194, 210, 205, 640] }]
+ */
+declare function BoxPlot({ config, data, title, showTitle, description, children, className, chartProps, orientation, formatValue, hideDataTable, empty, }: BoxPlotProps): react.JSX.Element;
+declare namespace BoxPlot {
+    var Boxes: ({ showOutliers, notch, barProps }: BoxPlotBoxesProps) => react.JSX.Element;
+    var XAxis: ({ dataKey, tickLine, axisLine, tickMargin, minTickGap, type, label, tickFormatter, domain, ...rest }: ChartXAxisProps) => react.JSX.Element;
+    var YAxis: ({ dataKey, tickLine, axisLine, tickMargin, minTickGap, width, type, label, tickFormatter, domain, ...rest }: ChartYAxisProps) => react.JSX.Element;
+    var Grid: ({ strokeDasharray, vertical, horizontal, ...rest }: ComponentProps<typeof CartesianGrid>) => react.JSX.Element;
+    var Tooltip: ({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) => react.JSX.Element;
+    var Background: ({ variant }: {
+        variant: ChartBackgroundVariant;
+    }) => react.JSX.Element;
+    var ReferenceLine: typeof ReferenceLine;
+    var ReferenceBand: typeof ReferenceBand;
+    var Annotation: typeof Annotation;
+}
+interface BoxPlotBoxesProps {
+    /** Draws the points outside the fences as individual dots. */
+    showOutliers?: boolean;
+    /**
+     * Pinches the box in at the median by `1.58 × IQR / √n`.
+     *
+     * A confidence interval on the median drawn INSIDE the shape it belongs to,
+     * which is the only place a reader will actually look at it. Needs `count`
+     * on every box; a box without one is drawn square.
+     */
+    notch?: boolean;
+    /** Escape hatch onto the range bar the boxes are drawn over. */
+    barProps?: ComponentProps<typeof Bar>;
+}
+
+export { BoxPlot, type BoxPlotBoxesProps, type BoxPlotDatum, type BoxPlotOrientation, type BoxPlotProps, type BoxPlotSample, type BoxPlotSummary, BoxPlot as default };