@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/WaterfallChart.cjs

@@ -0,0 +1,235 @@
+"use client";
+'use strict';
+
+var chunk6BKLL7LZ_cjs = require('./chunk-6BKLL7LZ.cjs');
+var chunkIW6EWB26_cjs = require('./chunk-IW6EWB26.cjs');
+var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
+var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
+var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var react = require('react');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/waterfall.ts
+var KIND_WORDS = {
+  increase: "Increase",
+  decrease: "Decrease",
+  subtotal: "Subtotal",
+  total: "Total"
+};
+var clean = (value) => value !== void 0 && Number.isFinite(value) ? value : 0;
+var waterfallBars = (data) => {
+  let running = 0;
+  return data.map((datum) => {
+    if (datum.kind === "subtotal" || datum.kind === "total") {
+      if (datum.kind === "total" && datum.value !== void 0) running = clean(datum.value);
+      return {
+        label: datum.label,
+        kind: datum.kind,
+        value: running,
+        low: Math.min(0, running),
+        high: Math.max(0, running),
+        running
+      };
+    }
+    const change = clean(datum.value);
+    const before = running;
+    running += change;
+    return {
+      label: datum.label,
+      kind: change < 0 ? "decrease" : "increase",
+      value: change,
+      low: Math.min(before, running),
+      high: Math.max(before, running),
+      running
+    };
+  });
+};
+var signed = (value, format = String) => `${value < 0 ? "\u2212" : "+"}${format(Math.abs(value))}`;
+var barText = (bar, format = String) => bar.kind === "increase" || bar.kind === "decrease" ? signed(bar.value, format) : format(bar.running);
+var NARROW = 480;
+var MAX_LABELED_BARS = 12;
+var GAP = 0.19;
+var MAX_BAR = 64;
+var CHAR_WIDTH = 8;
+var SUBTOTAL_OPACITY = 0.55;
+var TILT_HEIGHT = 4.2;
+var MAX_CHARS = 14;
+var fillOf = (kind, palette) => kind === "increase" ? palette.positive : kind === "decrease" ? palette.negative : palette.total;
+var waterfallShape = (palette, labels, format) => (props) => {
+  const row = props.payload;
+  const left = Math.min(props.x, props.x + props.width);
+  const top = Math.min(props.y, props.y + props.height);
+  const width = Math.abs(props.width);
+  const height = Math.max(Math.abs(props.height), 1);
+  if (!(width > 0)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: left,
+        y: top,
+        width,
+        height,
+        rx: Math.min(3, width / 2, height / 2),
+        fill: fillOf(row.kind, palette),
+        fillOpacity: row.kind === "subtotal" ? SUBTOTAL_OPACITY : 1
+      }
+    ),
+    labels && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: left + width / 2,
+        y: top - 6,
+        textAnchor: "middle",
+        fill: chunkLT3UC65O_cjs.TEXT,
+        style: {
+          fontSize: chunkRLHGPHC7_cjs.TEXT_SIZE,
+          fontWeight: 600,
+          fontVariantNumeric: "tabular-nums"
+        },
+        children: barText(row, format)
+      }
+    )
+  ] });
+};
+var Connectors = ({ bars }) => {
+  const x = recharts.useXAxisScale();
+  const y = recharts.useYAxisScale();
+  if (!x || !y) return null;
+  const edges = bars.map((_, i) => {
+    const start = x(String(i), { position: "start" });
+    const end = x(String(i), { position: "end" });
+    if (start === void 0 || end === void 0) return void 0;
+    const band = end - start;
+    const full = Math.round(band * (1 - 2 * GAP));
+    const size = Math.min(full, MAX_BAR);
+    const left = start + band * GAP + (full - size) / 2;
+    return { left, right: left + size };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { "aria-hidden": true, "data-waterfall-connectors": "", children: bars.slice(0, -1).map((bar, i) => {
+    const from = edges[i];
+    const to = edges[i + 1];
+    const level = y(bar.running);
+    if (!from || !to || level === void 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: from.right,
+        x2: to.left,
+        y1: level,
+        y2: level,
+        stroke: chunkLT3UC65O_cjs.MUTED,
+        strokeOpacity: 0.7,
+        strokeWidth: 1,
+        strokeDasharray: "3 3"
+      },
+      i
+    );
+  }) });
+};
+var WaterfallChart = ({
+  data,
+  formatValue = String,
+  showLabels,
+  showConnectors = true,
+  colors,
+  xTitle,
+  yTitle,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const axis = chunkRLHGPHC7_cjs.useAxis();
+  const { ref, width: measured } = chunkIW6EWB26_cjs.useElementWidth();
+  const bars = react.useMemo(() => waterfallBars(data), [data]);
+  const rows = react.useMemo(
+    () => bars.map((bar, i) => ({ ...bar, key: String(i), range: [bar.low, bar.high] })),
+    [bars]
+  );
+  const name = ariaLabel ?? `Waterfall chart: ${data.map((d) => d.label).join(", ")}`;
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const palette = {
+    positive: colors?.positive ?? chunkLT3UC65O_cjs.SUCCESS,
+    negative: colors?.negative ?? chunkLT3UC65O_cjs.ERROR,
+    total: colors?.total ?? chunkLT3UC65O_cjs.SERIES[0]
+  };
+  const narrow = measured !== void 0 && measured < NARROW;
+  const labels = showLabels ?? (rows.length <= MAX_LABELED_BARS && !narrow);
+  const longest = Math.min(MAX_CHARS, Math.max(...rows.map((row) => row.label.length)));
+  const band = measured === void 0 ? Infinity : (measured - 56) / rows.length;
+  const tilted = narrow || longest * CHAR_WIDTH > band;
+  const labelAxis = {
+    interval: 0,
+    tickFormatter: (_, index) => chunk6BKLL7LZ_cjs.trimLabel(rows[index]?.label ?? ""),
+    ...tilted ? {
+      angle: -40,
+      tick: { ...chunkRLHGPHC7_cjs.AXIS.tick, textAnchor: "end" },
+      height: (xTitle ? 52 : 30) + Math.round(longest * TILT_HEIGHT)
+    } : {}
+  };
+  const tooltip = ({ active, payload }) => {
+    const row = payload?.[0]?.payload;
+    if (!active || !row) return null;
+    const color = fillOf(row.kind, palette);
+    const step = row.kind === "increase" || row.kind === "decrease";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkT3K6Q34U_cjs.TooltipCard,
+      {
+        title: row.label,
+        rows: [
+          {
+            name: KIND_WORDS[row.kind],
+            value: step ? signed(row.value, formatValue) : formatValue(row.running),
+            color
+          },
+          ...step ? [{ name: "Running total", value: formatValue(row.running), color: "transparent" }] : []
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: { width: width ?? "100%", maxWidth: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.BarChart,
+    {
+      ...chunk6NRRABPF_cjs.frameProps({ height, width: "100%", ariaLabel: name }),
+      data: rows,
+      margin: { top: labels ? 24 : 4, right: 8, bottom: 0, left: 0 },
+      barCategoryGap: `${GAP * 100}%`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...chunkRLHGPHC7_cjs.GRID_PROPS }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "key", ...axis, ...chunkRLHGPHC7_cjs.xAxisTitle(xTitle), ...labelAxis }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { width: "auto", tickFormatter: formatValue, ...axis, ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: tooltip,
+            cursor: { fill: chunkLT3UC65O_cjs.BORDER, fillOpacity: 0.35, radius: 8 },
+            animationDuration: 150
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            name: "Waterfall",
+            dataKey: "range",
+            maxBarSize: MAX_BAR,
+            shape: waterfallShape(palette, labels, formatValue),
+            ...chunkTYQWZR3S_cjs.ANIMATION
+          }
+        ),
+        showConnectors && /* @__PURE__ */ jsxRuntime.jsx(Connectors, { bars }),
+        children
+      ]
+    }
+  ) });
+};
+
+exports.WaterfallChart = WaterfallChart;
+//# sourceMappingURL=WaterfallChart.cjs.map
+//# sourceMappingURL=WaterfallChart.cjs.map

package/dist/WaterfallChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/waterfall.ts","../src/WaterfallChart.tsx"],"names":["jsx","TEXT","TEXT_SIZE","useXAxisScale","useYAxisScale","MUTED","useAxis","useElementWidth","useMemo","ChartEmpty","SUCCESS","ERROR","SERIES","trimLabel","AXIS","TooltipCard","jsxs","BarChart","frameProps","CartesianGrid","GRID_PROPS","XAxis","xAxisTitle","YAxis","yAxisTitle","Tooltip","BORDER","Bar","ANIMATION"],"mappings":"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","file":"WaterfallChart.cjs","sourcesContent":["// The maths of WaterfallChart: the running total, the span each bar covers and\n// the text that names it. No DOM and no colors, so it runs in plain Node.\n\nexport type WaterfallDatum = {\n  label: string;\n  /** A step: the signed change. A total: sets the running total to it (an opening balance). */\n  value?: number;\n  /** Default `step`. `subtotal` and `total` are drawn from 0 to the running total. */\n  kind?: 'step' | 'subtotal' | 'total';\n};\n\n/** What a bar means: a step reads as an increase or a decrease from its sign. */\nexport type WaterfallBarKind = 'increase' | 'decrease' | 'subtotal' | 'total';\n\nexport type WaterfallBar = {\n  label: string;\n  kind: WaterfallBarKind;\n  /** A step: its signed change. A subtotal or a total: the running total it shows. */\n  value: number;\n  /** The bottom and the top of the bar, in the units of the data. */\n  low: number;\n  high: number;\n  /** The running total after this bar. */\n  running: number;\n};\n\n/** The kind in words, for the tooltip and the name a screen reader hears. */\nexport const KIND_WORDS: Record<WaterfallBarKind, string> = {\n  increase: 'Increase',\n  decrease: 'Decrease',\n  subtotal: 'Subtotal',\n  total: 'Total',\n};\n\n// A missing or non-finite value counts as 0.\nconst clean = (value: number | undefined) =>\n  value !== undefined && Number.isFinite(value) ? value : 0;\n\n/**\n * One bar per datum, in the order given. A step moves the running total by its\n * signed `value` and floats between the total before and after it. A subtotal\n * is the running total at that point, from 0, never the sum since the last\n * cut. A total with a `value` sets the running total to it (the opening\n * balance, or a known balance mid-walk); without one it shows the running\n * total. Both are drawn from 0.\n */\nexport const waterfallBars = (data: readonly WaterfallDatum[]): WaterfallBar[] => {\n  let running = 0;\n  return data.map((datum) => {\n    if (datum.kind === 'subtotal' || datum.kind === 'total') {\n      if (datum.kind === 'total' && datum.value !== undefined) running = clean(datum.value);\n      return {\n        label: datum.label,\n        kind: datum.kind,\n        value: running,\n        low: Math.min(0, running),\n        high: Math.max(0, running),\n        running,\n      };\n    }\n    const change = clean(datum.value);\n    const before = running;\n    running += change;\n    return {\n      label: datum.label,\n      kind: change < 0 ? 'decrease' : 'increase',\n      value: change,\n      low: Math.min(before, running),\n      high: Math.max(before, running),\n      running,\n    };\n  });\n};\n\n/** A change with its sign, in text: `+310k`, `−265k` (U+2212). `format` gets the magnitude. */\nexport const signed = (value: number, format: (value: number) => string = String) =>\n  `${value < 0 ? '−' : '+'}${format(Math.abs(value))}`;\n\n/** What is written above a bar: the signed change of a step, the running total of a subtotal or a total. */\nexport const barText = (bar: WaterfallBar, format: (value: number) => string = String) =>\n  bar.kind === 'increase' || bar.kind === 'decrease'\n    ? signed(bar.value, format)\n    : format(bar.running);\n","import { useMemo } from 'react';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Tooltip,\n  useXAxisScale,\n  useYAxisScale,\n  XAxis,\n  YAxis,\n  type BarShapeProps,\n  type TooltipContentProps,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { AXIS, GRID_PROPS, TEXT_SIZE, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { trimLabel } from './core/categoryAxis';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { BORDER, ERROR, MUTED, SERIES, SUCCESS, TEXT } from './core/colors';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { useElementWidth } from './core/useElementWidth';\nimport type { ChartAxisTitleProps, ChartEmptyProps, ChartProps } from './types';\nimport {\n  barText,\n  KIND_WORDS,\n  signed,\n  waterfallBars,\n  type WaterfallBar,\n  type WaterfallDatum,\n} from './waterfall';\n\nexport type { WaterfallDatum } from './waterfall';\n\nexport type WaterfallChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartAxisTitleProps & {\n    /**\n     * The bars, left to right. A step (default) carries a signed `value`. A\n     * `subtotal` is drawn from 0 to the running total at that point. A\n     * `total` is drawn the same way, and a `value` on it sets the running\n     * total to it: an opening balance, or a known balance mid-walk.\n     */\n    data: WaterfallDatum[];\n    /** Format the value axis, the labels and the tooltip. The sign of a step is written apart: the function gets the magnitude. */\n    formatValue?: (value: number) => string;\n    /**\n     * Write the value above each bar. Default: on with 12 bars or fewer in a chart at least\n     * 480px wide, off otherwise (the values stay in the tooltip and the keyboard walk).\n     */\n    showLabels?: boolean;\n    /** Dashed lines from the top of a bar to the next one. Default true. */\n    showConnectors?: boolean;\n    /** Override the colors: increases, decreases, totals and subtotals. Defaults: the theme's success, error and accent. */\n    colors?: { positive?: string; negative?: string; total?: string };\n  };\n\n// Below this width the value labels go and the category names tilt.\nconst NARROW = 480;\nconst MAX_LABELED_BARS = 12;\n// The share of a category's band left empty on each side of a bar, and the\n// widest bar. Recharts places the bar from these; the connectors are drawn\n// from the same numbers.\nconst GAP = 0.19;\nconst MAX_BAR = 64;\n// Pixels one character of a category name takes, at the largest text size.\nconst CHAR_WIDTH = 8;\nconst SUBTOTAL_OPACITY = 0.55;\nconst TILT_HEIGHT = 4.2;\nconst MAX_CHARS = 14;\n\ntype Row = WaterfallBar & { key: string; range: [number, number] };\n\ntype Palette = { positive: string; negative: string; total: string };\n\nconst fillOf = (kind: WaterfallBar['kind'], palette: Palette) =>\n  kind === 'increase' ? palette.positive : kind === 'decrease' ? palette.negative : palette.total;\n\n// The bar is the span between the running total before and after the step; the\n// label above it is drawn here too, so it moves with the bar while it grows.\nconst waterfallShape =\n  (palette: Palette, labels: boolean, format: (value: number) => string) =>\n  (props: BarShapeProps) => {\n    const row = props.payload as Row;\n    const left = Math.min(props.x, props.x + props.width);\n    const top = Math.min(props.y, props.y + props.height);\n    const width = Math.abs(props.width);\n    // A step of 0 is a hairline.\n    const height = Math.max(Math.abs(props.height), 1);\n    if (!(width > 0)) return null;\n    return (\n      <g>\n        <rect\n          x={left}\n          y={top}\n          width={width}\n          height={height}\n          rx={Math.min(3, width / 2, height / 2)}\n          fill={fillOf(row.kind, palette)}\n          fillOpacity={row.kind === 'subtotal' ? SUBTOTAL_OPACITY : 1}\n        />\n        {labels && (\n          <text\n            x={left + width / 2}\n            y={top - 6}\n            textAnchor=\"middle\"\n            fill={TEXT}\n            style={{\n              fontSize: TEXT_SIZE,\n              fontWeight: 600,\n              fontVariantNumeric: 'tabular-nums',\n            }}\n          >\n            {barText(row, format)}\n          </text>\n        )}\n      </g>\n    );\n  };\n\n// From the right edge of a bar, at the running total after it, to the left edge\n// of the next one. Out of the accessibility layer: the bars say it all.\nconst Connectors = ({ bars }: { bars: readonly WaterfallBar[] }) => {\n  const x = useXAxisScale();\n  const y = useYAxisScale();\n  if (!x || !y) return null;\n  const edges = bars.map((_, i) => {\n    const start = x(String(i), { position: 'start' });\n    const end = x(String(i), { position: 'end' });\n    if (start === undefined || end === undefined) return undefined;\n    const band = end - start;\n    const full = Math.round(band * (1 - 2 * GAP));\n    const size = Math.min(full, MAX_BAR);\n    const left = start + band * GAP + (full - size) / 2;\n    return { left, right: left + size };\n  });\n  return (\n    <g aria-hidden data-waterfall-connectors=\"\">\n      {bars.slice(0, -1).map((bar, i) => {\n        const from = edges[i];\n        const to = edges[i + 1];\n        const level = y(bar.running);\n        if (!from || !to || level === undefined) return null;\n        return (\n          <line\n            key={i}\n            x1={from.right}\n            x2={to.left}\n            y1={level}\n            y2={level}\n            stroke={MUTED}\n            strokeOpacity={0.7}\n            strokeWidth={1}\n            strokeDasharray=\"3 3\"\n          />\n        );\n      })}\n    </g>\n  );\n};\n\nexport const WaterfallChart = ({\n  data,\n  formatValue = String,\n  showLabels,\n  showConnectors = true,\n  colors,\n  xTitle,\n  yTitle,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width,\n}: WaterfallChartProps) => {\n  const axis = useAxis();\n  const { ref, width: measured } = useElementWidth();\n  const bars = useMemo(() => waterfallBars(data), [data]);\n  const rows: Row[] = useMemo(\n    () => bars.map((bar, i) => ({ ...bar, key: String(i), range: [bar.low, bar.high] })),\n    [bars]\n  );\n  const name = ariaLabel ?? `Waterfall chart: ${data.map((d) => d.label).join(', ')}`;\n  if (data.length === 0) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n\n  const palette: Palette = {\n    positive: colors?.positive ?? SUCCESS,\n    negative: colors?.negative ?? ERROR,\n    total: colors?.total ?? SERIES[0],\n  };\n  const narrow = measured !== undefined && measured < NARROW;\n  const labels = showLabels ?? (rows.length <= MAX_LABELED_BARS && !narrow);\n  // Names tilt when the chart is narrow, or when they would not fit side by side.\n  const longest = Math.min(MAX_CHARS, Math.max(...rows.map((row) => row.label.length)));\n  const band = measured === undefined ? Infinity : (measured - 56) / rows.length;\n  const tilted = narrow || longest * CHAR_WIDTH > band;\n  const labelAxis = {\n    interval: 0,\n    tickFormatter: (_: unknown, index: number) => trimLabel(rows[index]?.label ?? ''),\n    ...(tilted\n      ? {\n          angle: -40,\n          tick: { ...AXIS.tick, textAnchor: 'end' },\n          height: (xTitle ? 52 : 30) + Math.round(longest * TILT_HEIGHT),\n        }\n      : {}),\n  } as const;\n\n  const tooltip = ({ active, payload }: Partial<TooltipContentProps>) => {\n    const row = payload?.[0]?.payload as Row | undefined;\n    if (!active || !row) return null;\n    const color = fillOf(row.kind, palette);\n    const step = row.kind === 'increase' || row.kind === 'decrease';\n    return (\n      <TooltipCard\n        title={row.label}\n        rows={[\n          {\n            name: KIND_WORDS[row.kind],\n            value: step ? signed(row.value, formatValue) : formatValue(row.running),\n            color,\n          },\n          ...(step\n            ? [{ name: 'Running total', value: formatValue(row.running), color: 'transparent' }]\n            : []),\n        ]}\n      />\n    );\n  };\n\n  return (\n    <div ref={ref} style={{ width: width ?? '100%', maxWidth: '100%' }}>\n      <BarChart\n        {...frameProps({ height, width: '100%', ariaLabel: name })}\n        data={rows}\n        margin={{ top: labels ? 24 : 4, right: 8, bottom: 0, left: 0 }}\n        barCategoryGap={`${GAP * 100}%`}\n      >\n        <CartesianGrid {...GRID_PROPS} />\n        <XAxis dataKey=\"key\" {...axis} {...xAxisTitle(xTitle)} {...labelAxis} />\n        <YAxis width=\"auto\" tickFormatter={formatValue} {...axis} {...yAxisTitle(yTitle)} />\n        <Tooltip\n          content={tooltip}\n          cursor={{ fill: BORDER, fillOpacity: 0.35, radius: 8 }}\n          animationDuration={150}\n        />\n        <Bar\n          name=\"Waterfall\"\n          dataKey=\"range\"\n          maxBarSize={MAX_BAR}\n          shape={waterfallShape(palette, labels, formatValue)}\n          {...ANIMATION}\n        />\n        {showConnectors && <Connectors bars={bars} />}\n        {children}\n      </BarChart>\n    </div>\n  );\n};\n"]}

package/dist/WaterfallChart.js

@@ -0,0 +1,233 @@
+"use client";
+import { trimLabel } from './chunk-HMH6DI7U.js';
+import { useElementWidth } from './chunk-AOSO5QHL.js';
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { useAxis, AXIS, GRID_PROPS, xAxisTitle, yAxisTitle, TEXT_SIZE } from './chunk-RILUG7JB.js';
+import { TooltipCard } from './chunk-VIOSQN4Z.js';
+import { ChartEmpty, frameProps } from './chunk-3N43QT36.js';
+import { SERIES, ERROR, SUCCESS, BORDER, TEXT, MUTED } from './chunk-UATB2IRY.js';
+import { useMemo } from 'react';
+import { BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, useXAxisScale, useYAxisScale } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/waterfall.ts
+var KIND_WORDS = {
+  increase: "Increase",
+  decrease: "Decrease",
+  subtotal: "Subtotal",
+  total: "Total"
+};
+var clean = (value) => value !== void 0 && Number.isFinite(value) ? value : 0;
+var waterfallBars = (data) => {
+  let running = 0;
+  return data.map((datum) => {
+    if (datum.kind === "subtotal" || datum.kind === "total") {
+      if (datum.kind === "total" && datum.value !== void 0) running = clean(datum.value);
+      return {
+        label: datum.label,
+        kind: datum.kind,
+        value: running,
+        low: Math.min(0, running),
+        high: Math.max(0, running),
+        running
+      };
+    }
+    const change = clean(datum.value);
+    const before = running;
+    running += change;
+    return {
+      label: datum.label,
+      kind: change < 0 ? "decrease" : "increase",
+      value: change,
+      low: Math.min(before, running),
+      high: Math.max(before, running),
+      running
+    };
+  });
+};
+var signed = (value, format = String) => `${value < 0 ? "\u2212" : "+"}${format(Math.abs(value))}`;
+var barText = (bar, format = String) => bar.kind === "increase" || bar.kind === "decrease" ? signed(bar.value, format) : format(bar.running);
+var NARROW = 480;
+var MAX_LABELED_BARS = 12;
+var GAP = 0.19;
+var MAX_BAR = 64;
+var CHAR_WIDTH = 8;
+var SUBTOTAL_OPACITY = 0.55;
+var TILT_HEIGHT = 4.2;
+var MAX_CHARS = 14;
+var fillOf = (kind, palette) => kind === "increase" ? palette.positive : kind === "decrease" ? palette.negative : palette.total;
+var waterfallShape = (palette, labels, format) => (props) => {
+  const row = props.payload;
+  const left = Math.min(props.x, props.x + props.width);
+  const top = Math.min(props.y, props.y + props.height);
+  const width = Math.abs(props.width);
+  const height = Math.max(Math.abs(props.height), 1);
+  if (!(width > 0)) return null;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: left,
+        y: top,
+        width,
+        height,
+        rx: Math.min(3, width / 2, height / 2),
+        fill: fillOf(row.kind, palette),
+        fillOpacity: row.kind === "subtotal" ? SUBTOTAL_OPACITY : 1
+      }
+    ),
+    labels && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: left + width / 2,
+        y: top - 6,
+        textAnchor: "middle",
+        fill: TEXT,
+        style: {
+          fontSize: TEXT_SIZE,
+          fontWeight: 600,
+          fontVariantNumeric: "tabular-nums"
+        },
+        children: barText(row, format)
+      }
+    )
+  ] });
+};
+var Connectors = ({ bars }) => {
+  const x = useXAxisScale();
+  const y = useYAxisScale();
+  if (!x || !y) return null;
+  const edges = bars.map((_, i) => {
+    const start = x(String(i), { position: "start" });
+    const end = x(String(i), { position: "end" });
+    if (start === void 0 || end === void 0) return void 0;
+    const band = end - start;
+    const full = Math.round(band * (1 - 2 * GAP));
+    const size = Math.min(full, MAX_BAR);
+    const left = start + band * GAP + (full - size) / 2;
+    return { left, right: left + size };
+  });
+  return /* @__PURE__ */ jsx("g", { "aria-hidden": true, "data-waterfall-connectors": "", children: bars.slice(0, -1).map((bar, i) => {
+    const from = edges[i];
+    const to = edges[i + 1];
+    const level = y(bar.running);
+    if (!from || !to || level === void 0) return null;
+    return /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: from.right,
+        x2: to.left,
+        y1: level,
+        y2: level,
+        stroke: MUTED,
+        strokeOpacity: 0.7,
+        strokeWidth: 1,
+        strokeDasharray: "3 3"
+      },
+      i
+    );
+  }) });
+};
+var WaterfallChart = ({
+  data,
+  formatValue = String,
+  showLabels,
+  showConnectors = true,
+  colors,
+  xTitle,
+  yTitle,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const axis = useAxis();
+  const { ref, width: measured } = useElementWidth();
+  const bars = useMemo(() => waterfallBars(data), [data]);
+  const rows = useMemo(
+    () => bars.map((bar, i) => ({ ...bar, key: String(i), range: [bar.low, bar.high] })),
+    [bars]
+  );
+  const name = ariaLabel ?? `Waterfall chart: ${data.map((d) => d.label).join(", ")}`;
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const palette = {
+    positive: colors?.positive ?? SUCCESS,
+    negative: colors?.negative ?? ERROR,
+    total: colors?.total ?? SERIES[0]
+  };
+  const narrow = measured !== void 0 && measured < NARROW;
+  const labels = showLabels ?? (rows.length <= MAX_LABELED_BARS && !narrow);
+  const longest = Math.min(MAX_CHARS, Math.max(...rows.map((row) => row.label.length)));
+  const band = measured === void 0 ? Infinity : (measured - 56) / rows.length;
+  const tilted = narrow || longest * CHAR_WIDTH > band;
+  const labelAxis = {
+    interval: 0,
+    tickFormatter: (_, index) => trimLabel(rows[index]?.label ?? ""),
+    ...tilted ? {
+      angle: -40,
+      tick: { ...AXIS.tick, textAnchor: "end" },
+      height: (xTitle ? 52 : 30) + Math.round(longest * TILT_HEIGHT)
+    } : {}
+  };
+  const tooltip = ({ active, payload }) => {
+    const row = payload?.[0]?.payload;
+    if (!active || !row) return null;
+    const color = fillOf(row.kind, palette);
+    const step = row.kind === "increase" || row.kind === "decrease";
+    return /* @__PURE__ */ jsx(
+      TooltipCard,
+      {
+        title: row.label,
+        rows: [
+          {
+            name: KIND_WORDS[row.kind],
+            value: step ? signed(row.value, formatValue) : formatValue(row.running),
+            color
+          },
+          ...step ? [{ name: "Running total", value: formatValue(row.running), color: "transparent" }] : []
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx("div", { ref, style: { width: width ?? "100%", maxWidth: "100%" }, children: /* @__PURE__ */ jsxs(
+    BarChart,
+    {
+      ...frameProps({ height, width: "100%", ariaLabel: name }),
+      data: rows,
+      margin: { top: labels ? 24 : 4, right: 8, bottom: 0, left: 0 },
+      barCategoryGap: `${GAP * 100}%`,
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { ...GRID_PROPS }),
+        /* @__PURE__ */ jsx(XAxis, { dataKey: "key", ...axis, ...xAxisTitle(xTitle), ...labelAxis }),
+        /* @__PURE__ */ jsx(YAxis, { width: "auto", tickFormatter: formatValue, ...axis, ...yAxisTitle(yTitle) }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: tooltip,
+            cursor: { fill: BORDER, fillOpacity: 0.35, radius: 8 },
+            animationDuration: 150
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Bar,
+          {
+            name: "Waterfall",
+            dataKey: "range",
+            maxBarSize: MAX_BAR,
+            shape: waterfallShape(palette, labels, formatValue),
+            ...ANIMATION
+          }
+        ),
+        showConnectors && /* @__PURE__ */ jsx(Connectors, { bars }),
+        children
+      ]
+    }
+  ) });
+};
+
+export { WaterfallChart };
+//# sourceMappingURL=WaterfallChart.js.map
+//# sourceMappingURL=WaterfallChart.js.map

package/dist/WaterfallChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/waterfall.ts","../src/WaterfallChart.tsx"],"names":[],"mappings":"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","file":"WaterfallChart.js","sourcesContent":["// The maths of WaterfallChart: the running total, the span each bar covers and\n// the text that names it. No DOM and no colors, so it runs in plain Node.\n\nexport type WaterfallDatum = {\n  label: string;\n  /** A step: the signed change. A total: sets the running total to it (an opening balance). */\n  value?: number;\n  /** Default `step`. `subtotal` and `total` are drawn from 0 to the running total. */\n  kind?: 'step' | 'subtotal' | 'total';\n};\n\n/** What a bar means: a step reads as an increase or a decrease from its sign. */\nexport type WaterfallBarKind = 'increase' | 'decrease' | 'subtotal' | 'total';\n\nexport type WaterfallBar = {\n  label: string;\n  kind: WaterfallBarKind;\n  /** A step: its signed change. A subtotal or a total: the running total it shows. */\n  value: number;\n  /** The bottom and the top of the bar, in the units of the data. */\n  low: number;\n  high: number;\n  /** The running total after this bar. */\n  running: number;\n};\n\n/** The kind in words, for the tooltip and the name a screen reader hears. */\nexport const KIND_WORDS: Record<WaterfallBarKind, string> = {\n  increase: 'Increase',\n  decrease: 'Decrease',\n  subtotal: 'Subtotal',\n  total: 'Total',\n};\n\n// A missing or non-finite value counts as 0.\nconst clean = (value: number | undefined) =>\n  value !== undefined && Number.isFinite(value) ? value : 0;\n\n/**\n * One bar per datum, in the order given. A step moves the running total by its\n * signed `value` and floats between the total before and after it. A subtotal\n * is the running total at that point, from 0, never the sum since the last\n * cut. A total with a `value` sets the running total to it (the opening\n * balance, or a known balance mid-walk); without one it shows the running\n * total. Both are drawn from 0.\n */\nexport const waterfallBars = (data: readonly WaterfallDatum[]): WaterfallBar[] => {\n  let running = 0;\n  return data.map((datum) => {\n    if (datum.kind === 'subtotal' || datum.kind === 'total') {\n      if (datum.kind === 'total' && datum.value !== undefined) running = clean(datum.value);\n      return {\n        label: datum.label,\n        kind: datum.kind,\n        value: running,\n        low: Math.min(0, running),\n        high: Math.max(0, running),\n        running,\n      };\n    }\n    const change = clean(datum.value);\n    const before = running;\n    running += change;\n    return {\n      label: datum.label,\n      kind: change < 0 ? 'decrease' : 'increase',\n      value: change,\n      low: Math.min(before, running),\n      high: Math.max(before, running),\n      running,\n    };\n  });\n};\n\n/** A change with its sign, in text: `+310k`, `−265k` (U+2212). `format` gets the magnitude. */\nexport const signed = (value: number, format: (value: number) => string = String) =>\n  `${value < 0 ? '−' : '+'}${format(Math.abs(value))}`;\n\n/** What is written above a bar: the signed change of a step, the running total of a subtotal or a total. */\nexport const barText = (bar: WaterfallBar, format: (value: number) => string = String) =>\n  bar.kind === 'increase' || bar.kind === 'decrease'\n    ? signed(bar.value, format)\n    : format(bar.running);\n","import { useMemo } from 'react';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Tooltip,\n  useXAxisScale,\n  useYAxisScale,\n  XAxis,\n  YAxis,\n  type BarShapeProps,\n  type TooltipContentProps,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { AXIS, GRID_PROPS, TEXT_SIZE, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { trimLabel } from './core/categoryAxis';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { BORDER, ERROR, MUTED, SERIES, SUCCESS, TEXT } from './core/colors';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { useElementWidth } from './core/useElementWidth';\nimport type { ChartAxisTitleProps, ChartEmptyProps, ChartProps } from './types';\nimport {\n  barText,\n  KIND_WORDS,\n  signed,\n  waterfallBars,\n  type WaterfallBar,\n  type WaterfallDatum,\n} from './waterfall';\n\nexport type { WaterfallDatum } from './waterfall';\n\nexport type WaterfallChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartAxisTitleProps & {\n    /**\n     * The bars, left to right. A step (default) carries a signed `value`. A\n     * `subtotal` is drawn from 0 to the running total at that point. A\n     * `total` is drawn the same way, and a `value` on it sets the running\n     * total to it: an opening balance, or a known balance mid-walk.\n     */\n    data: WaterfallDatum[];\n    /** Format the value axis, the labels and the tooltip. The sign of a step is written apart: the function gets the magnitude. */\n    formatValue?: (value: number) => string;\n    /**\n     * Write the value above each bar. Default: on with 12 bars or fewer in a chart at least\n     * 480px wide, off otherwise (the values stay in the tooltip and the keyboard walk).\n     */\n    showLabels?: boolean;\n    /** Dashed lines from the top of a bar to the next one. Default true. */\n    showConnectors?: boolean;\n    /** Override the colors: increases, decreases, totals and subtotals. Defaults: the theme's success, error and accent. */\n    colors?: { positive?: string; negative?: string; total?: string };\n  };\n\n// Below this width the value labels go and the category names tilt.\nconst NARROW = 480;\nconst MAX_LABELED_BARS = 12;\n// The share of a category's band left empty on each side of a bar, and the\n// widest bar. Recharts places the bar from these; the connectors are drawn\n// from the same numbers.\nconst GAP = 0.19;\nconst MAX_BAR = 64;\n// Pixels one character of a category name takes, at the largest text size.\nconst CHAR_WIDTH = 8;\nconst SUBTOTAL_OPACITY = 0.55;\nconst TILT_HEIGHT = 4.2;\nconst MAX_CHARS = 14;\n\ntype Row = WaterfallBar & { key: string; range: [number, number] };\n\ntype Palette = { positive: string; negative: string; total: string };\n\nconst fillOf = (kind: WaterfallBar['kind'], palette: Palette) =>\n  kind === 'increase' ? palette.positive : kind === 'decrease' ? palette.negative : palette.total;\n\n// The bar is the span between the running total before and after the step; the\n// label above it is drawn here too, so it moves with the bar while it grows.\nconst waterfallShape =\n  (palette: Palette, labels: boolean, format: (value: number) => string) =>\n  (props: BarShapeProps) => {\n    const row = props.payload as Row;\n    const left = Math.min(props.x, props.x + props.width);\n    const top = Math.min(props.y, props.y + props.height);\n    const width = Math.abs(props.width);\n    // A step of 0 is a hairline.\n    const height = Math.max(Math.abs(props.height), 1);\n    if (!(width > 0)) return null;\n    return (\n      <g>\n        <rect\n          x={left}\n          y={top}\n          width={width}\n          height={height}\n          rx={Math.min(3, width / 2, height / 2)}\n          fill={fillOf(row.kind, palette)}\n          fillOpacity={row.kind === 'subtotal' ? SUBTOTAL_OPACITY : 1}\n        />\n        {labels && (\n          <text\n            x={left + width / 2}\n            y={top - 6}\n            textAnchor=\"middle\"\n            fill={TEXT}\n            style={{\n              fontSize: TEXT_SIZE,\n              fontWeight: 600,\n              fontVariantNumeric: 'tabular-nums',\n            }}\n          >\n            {barText(row, format)}\n          </text>\n        )}\n      </g>\n    );\n  };\n\n// From the right edge of a bar, at the running total after it, to the left edge\n// of the next one. Out of the accessibility layer: the bars say it all.\nconst Connectors = ({ bars }: { bars: readonly WaterfallBar[] }) => {\n  const x = useXAxisScale();\n  const y = useYAxisScale();\n  if (!x || !y) return null;\n  const edges = bars.map((_, i) => {\n    const start = x(String(i), { position: 'start' });\n    const end = x(String(i), { position: 'end' });\n    if (start === undefined || end === undefined) return undefined;\n    const band = end - start;\n    const full = Math.round(band * (1 - 2 * GAP));\n    const size = Math.min(full, MAX_BAR);\n    const left = start + band * GAP + (full - size) / 2;\n    return { left, right: left + size };\n  });\n  return (\n    <g aria-hidden data-waterfall-connectors=\"\">\n      {bars.slice(0, -1).map((bar, i) => {\n        const from = edges[i];\n        const to = edges[i + 1];\n        const level = y(bar.running);\n        if (!from || !to || level === undefined) return null;\n        return (\n          <line\n            key={i}\n            x1={from.right}\n            x2={to.left}\n            y1={level}\n            y2={level}\n            stroke={MUTED}\n            strokeOpacity={0.7}\n            strokeWidth={1}\n            strokeDasharray=\"3 3\"\n          />\n        );\n      })}\n    </g>\n  );\n};\n\nexport const WaterfallChart = ({\n  data,\n  formatValue = String,\n  showLabels,\n  showConnectors = true,\n  colors,\n  xTitle,\n  yTitle,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width,\n}: WaterfallChartProps) => {\n  const axis = useAxis();\n  const { ref, width: measured } = useElementWidth();\n  const bars = useMemo(() => waterfallBars(data), [data]);\n  const rows: Row[] = useMemo(\n    () => bars.map((bar, i) => ({ ...bar, key: String(i), range: [bar.low, bar.high] })),\n    [bars]\n  );\n  const name = ariaLabel ?? `Waterfall chart: ${data.map((d) => d.label).join(', ')}`;\n  if (data.length === 0) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n\n  const palette: Palette = {\n    positive: colors?.positive ?? SUCCESS,\n    negative: colors?.negative ?? ERROR,\n    total: colors?.total ?? SERIES[0],\n  };\n  const narrow = measured !== undefined && measured < NARROW;\n  const labels = showLabels ?? (rows.length <= MAX_LABELED_BARS && !narrow);\n  // Names tilt when the chart is narrow, or when they would not fit side by side.\n  const longest = Math.min(MAX_CHARS, Math.max(...rows.map((row) => row.label.length)));\n  const band = measured === undefined ? Infinity : (measured - 56) / rows.length;\n  const tilted = narrow || longest * CHAR_WIDTH > band;\n  const labelAxis = {\n    interval: 0,\n    tickFormatter: (_: unknown, index: number) => trimLabel(rows[index]?.label ?? ''),\n    ...(tilted\n      ? {\n          angle: -40,\n          tick: { ...AXIS.tick, textAnchor: 'end' },\n          height: (xTitle ? 52 : 30) + Math.round(longest * TILT_HEIGHT),\n        }\n      : {}),\n  } as const;\n\n  const tooltip = ({ active, payload }: Partial<TooltipContentProps>) => {\n    const row = payload?.[0]?.payload as Row | undefined;\n    if (!active || !row) return null;\n    const color = fillOf(row.kind, palette);\n    const step = row.kind === 'increase' || row.kind === 'decrease';\n    return (\n      <TooltipCard\n        title={row.label}\n        rows={[\n          {\n            name: KIND_WORDS[row.kind],\n            value: step ? signed(row.value, formatValue) : formatValue(row.running),\n            color,\n          },\n          ...(step\n            ? [{ name: 'Running total', value: formatValue(row.running), color: 'transparent' }]\n            : []),\n        ]}\n      />\n    );\n  };\n\n  return (\n    <div ref={ref} style={{ width: width ?? '100%', maxWidth: '100%' }}>\n      <BarChart\n        {...frameProps({ height, width: '100%', ariaLabel: name })}\n        data={rows}\n        margin={{ top: labels ? 24 : 4, right: 8, bottom: 0, left: 0 }}\n        barCategoryGap={`${GAP * 100}%`}\n      >\n        <CartesianGrid {...GRID_PROPS} />\n        <XAxis dataKey=\"key\" {...axis} {...xAxisTitle(xTitle)} {...labelAxis} />\n        <YAxis width=\"auto\" tickFormatter={formatValue} {...axis} {...yAxisTitle(yTitle)} />\n        <Tooltip\n          content={tooltip}\n          cursor={{ fill: BORDER, fillOpacity: 0.35, radius: 8 }}\n          animationDuration={150}\n        />\n        <Bar\n          name=\"Waterfall\"\n          dataKey=\"range\"\n          maxBarSize={MAX_BAR}\n          shape={waterfallShape(palette, labels, formatValue)}\n          {...ANIMATION}\n        />\n        {showConnectors && <Connectors bars={bars} />}\n        {children}\n      </BarChart>\n    </div>\n  );\n};\n"]}