@sckyzo/cosmos-charts 0.2.0 → 0.3.1

package/dist/FunnelChart.cjs

@@ -0,0 +1,424 @@
+"use client";
+'use strict';
+
+var chunkIW6EWB26_cjs = require('./chunk-IW6EWB26.cjs');
+var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
+var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
+var chunkSR2ESX3R_cjs = require('./chunk-SR2ESX3R.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/funnel.ts
+var clean = (value) => Number.isFinite(value) && value > 0 ? value : 0;
+var isEmptyFunnel = (stages) => stages.every((stage) => clean(stage.value) === 0);
+var funnelRows = (stages) => {
+  const values = stages.map((stage) => clean(stage.value));
+  const widest = Math.max(0, ...values);
+  const rate = (value, over) => over > 0 ? value / over : null;
+  return stages.map((stage, i) => ({
+    label: stage.label,
+    value: values[i],
+    share: widest > 0 ? values[i] / widest : 0,
+    fromPrevious: i === 0 ? 1 : rate(values[i], values[i - 1]),
+    fromFirst: rate(values[i], values[0])
+  }));
+};
+var formatRate = (rate) => rate === null ? "\u2013" : `${(rate * 100).toFixed(1)}%`;
+var FADE_FLOOR = 42;
+var fadeShare = (index, count) => count <= 1 ? 100 : Math.round((100 - (100 - FADE_FLOOR) * index / (count - 1)) * 10) / 10;
+var flowPoints = (upper, lower) => {
+  const edge = (share) => [(100 - 100 * share) / 2, (100 + 100 * share) / 2];
+  const [topLeft, topRight] = edge(upper);
+  const [bottomLeft, bottomRight] = edge(lower);
+  return `${topLeft},0 ${topRight},0 ${bottomRight},1 ${bottomLeft},1`;
+};
+var BAR = "1.875rem";
+var BAR_NARROW = "1.5rem";
+var FLOW = "1.75rem";
+var FLOW_NARROW = "1.25rem";
+var FLOW_OPACITY = 0.14;
+var NARROW = 520;
+var TIP_GAP = 6;
+var textStyle = {
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+};
+var FunnelChart = ({
+  stages,
+  colors,
+  formatValue = String,
+  showConversion = true,
+  emptyMessage = "No data",
+  ariaLabel,
+  height,
+  width
+}) => {
+  const name = ariaLabel ?? `Funnel: ${stages.map((stage2) => stage2.label).join(", ")}`;
+  const frame = react.useRef(null);
+  const list = react.useRef(null);
+  const { ref: measure, width: measured } = chunkIW6EWB26_cjs.useElementWidth();
+  const frameRef = react.useCallback(
+    (element) => {
+      frame.current = element;
+      measure(element);
+    },
+    [measure]
+  );
+  const [roving, setRoving] = react.useState(0);
+  const [hover, setHover] = react.useState();
+  const [focus, setFocus] = react.useState();
+  if (isEmptyFunnel(stages)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkSR2ESX3R_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height: height ?? 160, width });
+  }
+  const rows = funnelRows(stages);
+  const first = rows[0];
+  const narrow = measured !== void 0 && measured < NARROW;
+  const bar = narrow ? BAR_NARROW : BAR;
+  const flow = narrow ? FLOW_NARROW : FLOW;
+  const tabbable = Math.min(roving, rows.length - 1);
+  const tip = hover ?? focus;
+  const color = (i) => colors?.length ? chunkLT3UC65O_cjs.seriesColor(i, colors) : `color-mix(in oklab, ${chunkLT3UC65O_cjs.SERIES[0]} ${fadeShare(i, rows.length)}%, ${chunkLT3UC65O_cjs.PANEL})`;
+  const flowColor = (i) => colors?.length ? chunkLT3UC65O_cjs.seriesColor(i, colors) : chunkLT3UC65O_cjs.SERIES[0];
+  const chip = (row, i) => i === 0 ? "100%" : formatRate(row.fromPrevious);
+  const note = (row) => `${formatRate(row.fromFirst)} of ${first.label}`;
+  const nameOf = (row, i) => [
+    `${row.label}: ${formatValue(row.value)}`,
+    ...showConversion && i > 0 ? [`${formatRate(row.fromPrevious)} of previous stage`, note(row)] : []
+  ].join(", ");
+  const tipFor = (index, item) => {
+    const host = frame.current.getBoundingClientRect();
+    const box = (item.querySelector("[data-funnel-bar]") ?? item).getBoundingClientRect();
+    const middle = box.left - host.left + box.width / 2;
+    const align = middle < host.width / 3 ? "start" : middle > 2 * host.width / 3 ? "end" : "center";
+    return {
+      index,
+      x: { start: box.left - host.left, center: middle, end: box.right - host.left }[align],
+      top: box.top - host.top,
+      bottom: box.bottom - host.top,
+      align,
+      below: box.top - host.top < 110
+    };
+  };
+  const move = (event) => {
+    const origin = event.target.closest("[data-funnel-stage]");
+    if (!origin) return;
+    const index = Number(origin.dataset.index);
+    const targets = {
+      ArrowDown: index + 1,
+      ArrowRight: index + 1,
+      ArrowUp: index - 1,
+      ArrowLeft: index - 1,
+      Home: 0,
+      End: rows.length - 1
+    };
+    const target = targets[event.key];
+    if (target === void 0) return;
+    event.preventDefault();
+    list.current?.querySelector(
+      `[data-index="${Math.min(Math.max(target, 0), rows.length - 1)}"]`
+    )?.focus();
+  };
+  const focusIn = (index, event) => {
+    setRoving(index);
+    if (event.currentTarget.matches(":focus-visible")) {
+      setFocus(tipFor(index, event.currentTarget));
+    }
+  };
+  const focusOut = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) setFocus(void 0);
+  };
+  const tipRow = tip && rows[tip.index];
+  const tipStyle = tip && {
+    position: "absolute",
+    left: tip.x,
+    top: tip.below ? tip.bottom + TIP_GAP : tip.top - TIP_GAP,
+    transform: `translate(${{ start: "0", center: "-50%", end: "-100%" }[tip.align]}, ${tip.below ? "0" : "-100%"})`,
+    zIndex: 10,
+    pointerEvents: "none"
+  };
+  const label = (row, extra) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-funnel-name": "",
+      style: { fontSize: chunkG4WOPX4D_cjs.TEXT_SIZE, color: chunkLT3UC65O_cjs.MUTED, minWidth: 0, ...textStyle, ...extra },
+      children: row.label
+    }
+  );
+  const figures = (row, i) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-funnel-value": "",
+        style: {
+          fontSize: "var(--text-sm, 0.875rem)",
+          fontWeight: 600,
+          color: chunkLT3UC65O_cjs.TEXT,
+          fontVariantNumeric: "tabular-nums",
+          whiteSpace: "nowrap"
+        },
+        children: formatValue(row.value)
+      }
+    ),
+    showConversion && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-funnel-chip": "",
+        style: {
+          fontSize: chunkG4WOPX4D_cjs.TEXT_SIZE,
+          fontWeight: 600,
+          color: chunkLT3UC65O_cjs.TEXT,
+          background: chunkLT3UC65O_cjs.TRACK,
+          padding: "0.0625rem 0.4375rem",
+          borderRadius: 999,
+          fontVariantNumeric: "tabular-nums",
+          whiteSpace: "nowrap"
+        },
+        children: chip(row, i)
+      }
+    ),
+    showConversion && i > 0 && !narrow && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-funnel-note": "",
+        style: { fontSize: chunkG4WOPX4D_cjs.TEXT_SIZE, color: chunkLT3UC65O_cjs.MUTED, minWidth: 0, ...textStyle },
+        children: note(row)
+      }
+    )
+  ] });
+  const flowSvg = (i, style) => /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      "data-funnel-flow": "",
+      viewBox: "0 0 100 1",
+      preserveAspectRatio: "none",
+      style: { display: "block", ...style },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "polygon",
+        {
+          points: flowPoints(rows[i - 1].share, rows[i].share),
+          fill: flowColor(i - 1),
+          fillOpacity: FLOW_OPACITY
+        }
+      )
+    }
+  );
+  const barBox = (i) => ({
+    width: `${rows[i].share * 100}%`,
+    minWidth: rows[i].value > 0 ? 3 : 0,
+    height: bar,
+    borderRadius: 6,
+    background: color(i),
+    // The same ring for the pointer and the keyboard, in the text color: an
+    // accent ring would vanish on a bar that is the accent.
+    outline: tip?.index === i ? `2px solid ${chunkLT3UC65O_cjs.TEXT}` : "none",
+    outlineOffset: 1
+  });
+  const stage = (row, i) => {
+    const common = {
+      "data-funnel-stage": "",
+      "data-index": i,
+      tabIndex: i === tabbable ? 0 : -1,
+      "aria-label": nameOf(row, i),
+      onFocus: (event) => focusIn(i, event),
+      onMouseEnter: (event) => setHover(tipFor(i, event.currentTarget)),
+      onMouseLeave: () => setHover(void 0)
+    };
+    if (narrow) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          ...common,
+          style: {
+            display: "grid",
+            gridTemplateColumns: "minmax(0, 1fr) auto",
+            gridTemplateRows: "1fr auto",
+            columnGap: "0.75rem",
+            outline: "none"
+          },
+          children: [
+            i > 0 && flowSvg(i, { gridRow: 1, gridColumn: "1 / -1", width: "100%", height: "100%" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: {
+                  gridRow: 1,
+                  gridColumn: 1,
+                  alignSelf: "end",
+                  display: "flex",
+                  minWidth: 0,
+                  padding: `${i > 0 ? flow : "0"} 0 0.25rem`
+                },
+                children: label(row, { color: chunkLT3UC65O_cjs.TEXT })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: {
+                  gridRow: 1,
+                  gridColumn: 2,
+                  alignSelf: "end",
+                  display: "flex",
+                  alignItems: "baseline",
+                  gap: "0.5rem",
+                  padding: `${i > 0 ? flow : "0"} 0 0.25rem`
+                },
+                children: figures(row, i)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                style: { gridRow: 2, gridColumn: "1 / -1", display: "flex", justifyContent: "center" },
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-funnel-bar": "", style: barBox(i) })
+              }
+            )
+          ]
+        },
+        i
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        ...common,
+        style: {
+          display: "grid",
+          gridColumn: "1 / -1",
+          gridTemplateColumns: "subgrid",
+          outline: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                gridColumn: 1,
+                alignSelf: "end",
+                height: bar,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
+                minWidth: 0
+              },
+              children: label(row)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "aria-hidden": true,
+              style: {
+                gridColumn: 2,
+                position: "relative",
+                display: "flex",
+                alignItems: "flex-end",
+                justifyContent: "center",
+                minHeight: i === 0 ? bar : `calc(${bar} + ${flow})`,
+                minWidth: 0
+              },
+              children: [
+                i > 0 && flowSvg(i, {
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  width: "100%",
+                  height: `calc(100% - ${bar})`
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { "data-funnel-bar": "", style: barBox(i) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                gridColumn: 3,
+                alignSelf: "end",
+                height: bar,
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                minWidth: 0
+              },
+              children: figures(row, i)
+            }
+          )
+        ]
+      },
+      i
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: frameRef,
+      style: {
+        // The stages keep their order under `dir="rtl"`, as a chart's axis does.
+        direction: "ltr",
+        position: "relative",
+        width: width ?? "100%",
+        height,
+        maxWidth: "100%",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "ul",
+          {
+            ref: list,
+            role: "list",
+            "aria-label": name,
+            onKeyDown: move,
+            onBlur: focusOut,
+            style: {
+              display: "grid",
+              gridTemplateColumns: narrow ? "minmax(0, 1fr)" : "fit-content(30%) minmax(0, 1fr) fit-content(45%)",
+              gridTemplateRows: `auto repeat(${rows.length - 1}, minmax(min-content, 1fr))`,
+              columnGap: "1rem",
+              width: "100%",
+              height: height === void 0 ? void 0 : "100%",
+              margin: 0,
+              padding: 0,
+              listStyle: "none"
+            },
+            children: rows.map(stage)
+          }
+        ),
+        tip && tipRow && tipStyle && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-funnel-tooltip": "", "aria-hidden": true, style: tipStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkT3K6Q34U_cjs.TooltipCard,
+          {
+            title: tipRow.label,
+            rows: [
+              { name: "Value", value: formatValue(tipRow.value), color: color(tip.index) },
+              ...showConversion && tip.index > 0 ? [
+                {
+                  name: "Of previous stage",
+                  value: formatRate(tipRow.fromPrevious),
+                  color: color(tip.index)
+                },
+                {
+                  name: `Of ${first.label}`,
+                  value: formatRate(tipRow.fromFirst),
+                  color: color(tip.index)
+                }
+              ] : []
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+exports.FunnelChart = FunnelChart;
+//# sourceMappingURL=FunnelChart.cjs.map
+//# sourceMappingURL=FunnelChart.cjs.map

package/dist/FunnelChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/funnel.ts","../src/FunnelChart.tsx"],"names":["stage","useRef","useElementWidth","useCallback","useState","jsx","ChartEmpty","seriesColor","SERIES","PANEL","TEXT_SIZE","MUTED","jsxs","Fragment","TEXT","TRACK","TooltipCard"],"mappings":"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","file":"FunnelChart.cjs","sourcesContent":["// The maths of FunnelChart: bar widths, conversion rates and the flow between\n// two bars. No DOM and no colors, so it runs in plain Node.\n\nexport type FunnelStage = { label: string; value: number };\n\nexport type FunnelRow = {\n  label: string;\n  /** The value drawn: a negative or non-finite one counts as 0. */\n  value: number;\n  /** Width of the bar, 0 to 1, against the largest stage. */\n  share: number;\n  /** Rate from the previous stage; 1 for the first. `null` when the previous stage is 0. */\n  fromPrevious: number | null;\n  /** Rate from the first stage; `null` when the first stage is 0. */\n  fromFirst: number | null;\n};\n\nconst clean = (value: number) => (Number.isFinite(value) && value > 0 ? value : 0);\n\n/** Whether there is nothing to draw: no stage, or only stages at 0. */\nexport const isEmptyFunnel = (stages: readonly FunnelStage[]): boolean =>\n  stages.every((stage) => clean(stage.value) === 0);\n\n/**\n * One row per stage, in the order given. A bar is as wide as its value against\n * the largest stage, which is the first one unless a stage grows (a merge of\n * sources, say): that stage then has a rate over 1 and the widest bar, so no\n * bar ever leaves the box. A rate over a stage at 0 is `null`.\n */\nexport const funnelRows = (stages: readonly FunnelStage[]): FunnelRow[] => {\n  const values = stages.map((stage) => clean(stage.value));\n  const widest = Math.max(0, ...values);\n  const rate = (value: number, over: number) => (over > 0 ? value / over : null);\n  return stages.map((stage, i) => ({\n    label: stage.label,\n    value: values[i],\n    share: widest > 0 ? values[i] / widest : 0,\n    fromPrevious: i === 0 ? 1 : rate(values[i], values[i - 1]),\n    fromFirst: rate(values[i], values[0]),\n  }));\n};\n\n/** A rate as a percentage with one decimal (`0.654` is `65.4%`); `–` when there is none. */\nexport const formatRate = (rate: number | null): string =>\n  rate === null ? '–' : `${(rate * 100).toFixed(1)}%`;\n\n// What the last bar keeps of the accent: still 1.5:1 against the card in the dark themes (see SEQUENTIAL).\nconst FADE_FLOOR = 42;\n\n/** How much of the accent stage `index` of `count` keeps, in percent: 100 for the first, 42 for the last. */\nexport const fadeShare = (index: number, count: number): number =>\n  count <= 1 ? 100 : Math.round((100 - ((100 - FADE_FLOOR) * index) / (count - 1)) * 10) / 10;\n\n/**\n * The `points` of the flow from a bar to the next, in a box 100 wide and 1\n * tall, stretched to the gap between the two bars: the top edge is the upper\n * bar's width, the bottom edge the lower bar's, both centred.\n */\nexport const flowPoints = (upper: number, lower: number): string => {\n  const edge = (share: number) => [(100 - 100 * share) / 2, (100 + 100 * share) / 2];\n  const [topLeft, topRight] = edge(upper);\n  const [bottomLeft, bottomRight] = edge(lower);\n  return `${topLeft},0 ${topRight},0 ${bottomRight},1 ${bottomLeft},1`;\n};\n","import {\n  useCallback,\n  useRef,\n  useState,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { MUTED, PANEL, SERIES, TEXT, TRACK, seriesColor } from './core/colors';\nimport { ChartEmpty } from './core/frame';\nimport { useElementWidth } from './core/useElementWidth';\nimport {\n  fadeShare,\n  flowPoints,\n  formatRate,\n  funnelRows,\n  isEmptyFunnel,\n  type FunnelRow,\n} from './funnel';\nimport { TEXT_SIZE } from './core/axes';\nimport type { ChartEmptyProps, ChartProps } from './types';\n\nexport type { FunnelStage } from './funnel';\n\nexport type FunnelChartProps = Omit<ChartProps, 'children'> &\n  ChartEmptyProps & {\n    /**\n     * The stages, drawn top to bottom in the order given: the wrapper does not\n     * sort them. Each bar is as wide as its value against the largest stage,\n     * which is the first one unless a stage grows.\n     */\n    stages: { label: string; value: number }[];\n    /**\n     * One color per stage, cycling when there are fewer. Default: the accent,\n     * fading from the first stage to the last.\n     */\n    colors?: string[];\n    /** Format the values, in the labels and the tooltip. Percentages always have one decimal. */\n    formatValue?: (value: number) => string;\n    /**\n     * Show the conversion: a chip with the rate from the previous stage, the\n     * rate from the first stage beside it, and both in the tooltip. Off, only\n     * the values show. Default true.\n     */\n    showConversion?: boolean;\n  };\n\n// A bar is 30px at the normal size and 24px on a narrow box; the flow takes\n// the rest of the stage's row, at least this much.\nconst BAR = '1.875rem';\nconst BAR_NARROW = '1.5rem';\nconst FLOW = '1.75rem';\nconst FLOW_NARROW = '1.25rem';\nconst FLOW_OPACITY = 0.14;\n// Below this width the names and values go above their bar.\nconst NARROW = 520;\n// Room the tooltip card leaves the bar.\nconst TIP_GAP = 6;\n\ntype Tip = {\n  index: number;\n  x: number;\n  top: number;\n  bottom: number;\n  align: 'start' | 'center' | 'end';\n  below: boolean;\n};\n\nconst textStyle: CSSProperties = {\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n};\n\nexport const FunnelChart = ({\n  stages,\n  colors,\n  formatValue = String,\n  showConversion = true,\n  emptyMessage = 'No data',\n  ariaLabel,\n  height,\n  width,\n}: FunnelChartProps) => {\n  const name = ariaLabel ?? `Funnel: ${stages.map((stage) => stage.label).join(', ')}`;\n  const frame = useRef<HTMLDivElement | null>(null);\n  const list = useRef<HTMLUListElement>(null);\n  const { ref: measure, width: measured } = useElementWidth();\n  // The box is read for the tooltip's position and measured for the layout.\n  const frameRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      frame.current = element;\n      measure(element);\n    },\n    [measure]\n  );\n  const [roving, setRoving] = useState(0);\n  const [hover, setHover] = useState<Tip>();\n  const [focus, setFocus] = useState<Tip>();\n  if (isEmptyFunnel(stages)) {\n    return (\n      <ChartEmpty message={emptyMessage} ariaLabel={name} height={height ?? 160} width={width} />\n    );\n  }\n\n  const rows = funnelRows(stages);\n  const first = rows[0];\n  const narrow = measured !== undefined && measured < NARROW;\n  const bar = narrow ? BAR_NARROW : BAR;\n  const flow = narrow ? FLOW_NARROW : FLOW;\n  const tabbable = Math.min(roving, rows.length - 1);\n  const tip = hover ?? focus;\n\n  const color = (i: number) =>\n    colors?.length\n      ? seriesColor(i, colors)\n      : `color-mix(in oklab, ${SERIES[0]} ${fadeShare(i, rows.length)}%, ${PANEL})`;\n  const flowColor = (i: number) => (colors?.length ? seriesColor(i, colors) : SERIES[0]);\n\n  const chip = (row: FunnelRow, i: number) => (i === 0 ? '100%' : formatRate(row.fromPrevious));\n  const note = (row: FunnelRow) => `${formatRate(row.fromFirst)} of ${first.label}`;\n  const nameOf = (row: FunnelRow, i: number) =>\n    [\n      `${row.label}: ${formatValue(row.value)}`,\n      ...(showConversion && i > 0\n        ? [`${formatRate(row.fromPrevious)} of previous stage`, note(row)]\n        : []),\n    ].join(', ');\n\n  const tipFor = (index: number, item: HTMLElement): Tip => {\n    const host = (frame.current as HTMLElement).getBoundingClientRect();\n    const box = (item.querySelector('[data-funnel-bar]') ?? item).getBoundingClientRect();\n    const middle = box.left - host.left + box.width / 2;\n    // The card hangs from the side of the bar nearest the middle of the chart,\n    // so it never leaves the box.\n    const align =\n      middle < host.width / 3 ? 'start' : middle > (2 * host.width) / 3 ? 'end' : 'center';\n    return {\n      index,\n      x: { start: box.left - host.left, center: middle, end: box.right - host.left }[align],\n      top: box.top - host.top,\n      bottom: box.bottom - host.top,\n      align,\n      below: box.top - host.top < 110,\n    };\n  };\n\n  const move = (event: KeyboardEvent<HTMLUListElement>) => {\n    const origin = (event.target as HTMLElement).closest<HTMLElement>('[data-funnel-stage]');\n    if (!origin) return;\n    const index = Number(origin.dataset.index);\n    const targets: Record<string, number> = {\n      ArrowDown: index + 1,\n      ArrowRight: index + 1,\n      ArrowUp: index - 1,\n      ArrowLeft: index - 1,\n      Home: 0,\n      End: rows.length - 1,\n    };\n    const target = targets[event.key];\n    if (target === undefined) return;\n    event.preventDefault();\n    list.current\n      ?.querySelector<HTMLElement>(\n        `[data-index=\"${Math.min(Math.max(target, 0), rows.length - 1)}\"]`\n      )\n      ?.focus();\n  };\n\n  const focusIn = (index: number, event: FocusEvent<HTMLElement>) => {\n    setRoving(index);\n    // A click focuses a stage too, and would leave its tooltip up: only the keyboard shows it.\n    if (event.currentTarget.matches(':focus-visible')) {\n      setFocus(tipFor(index, event.currentTarget));\n    }\n  };\n  const focusOut = (event: FocusEvent<HTMLUListElement>) => {\n    if (!event.currentTarget.contains(event.relatedTarget)) setFocus(undefined);\n  };\n\n  const tipRow = tip && rows[tip.index];\n  const tipStyle: CSSProperties | undefined = tip && {\n    position: 'absolute',\n    left: tip.x,\n    top: tip.below ? tip.bottom + TIP_GAP : tip.top - TIP_GAP,\n    transform: `translate(${{ start: '0', center: '-50%', end: '-100%' }[tip.align]}, ${tip.below ? '0' : '-100%'})`,\n    zIndex: 10,\n    pointerEvents: 'none',\n  };\n\n  const label = (row: FunnelRow, extra?: CSSProperties) => (\n    <span\n      data-funnel-name=\"\"\n      style={{ fontSize: TEXT_SIZE, color: MUTED, minWidth: 0, ...textStyle, ...extra }}\n    >\n      {row.label}\n    </span>\n  );\n  const figures = (row: FunnelRow, i: number) => (\n    <>\n      <span\n        data-funnel-value=\"\"\n        style={{\n          fontSize: 'var(--text-sm, 0.875rem)',\n          fontWeight: 600,\n          color: TEXT,\n          fontVariantNumeric: 'tabular-nums',\n          whiteSpace: 'nowrap',\n        }}\n      >\n        {formatValue(row.value)}\n      </span>\n      {showConversion && (\n        <span\n          data-funnel-chip=\"\"\n          style={{\n            fontSize: TEXT_SIZE,\n            fontWeight: 600,\n            color: TEXT,\n            background: TRACK,\n            padding: '0.0625rem 0.4375rem',\n            borderRadius: 999,\n            fontVariantNumeric: 'tabular-nums',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {chip(row, i)}\n        </span>\n      )}\n      {showConversion && i > 0 && !narrow && (\n        <span\n          data-funnel-note=\"\"\n          style={{ fontSize: TEXT_SIZE, color: MUTED, minWidth: 0, ...textStyle }}\n        >\n          {note(row)}\n        </span>\n      )}\n    </>\n  );\n\n  const flowSvg = (i: number, style: CSSProperties) => (\n    <svg\n      aria-hidden\n      data-funnel-flow=\"\"\n      viewBox=\"0 0 100 1\"\n      preserveAspectRatio=\"none\"\n      style={{ display: 'block', ...style }}\n    >\n      <polygon\n        points={flowPoints(rows[i - 1].share, rows[i].share)}\n        fill={flowColor(i - 1)}\n        fillOpacity={FLOW_OPACITY}\n      />\n    </svg>\n  );\n\n  const barBox = (i: number): CSSProperties => ({\n    width: `${rows[i].share * 100}%`,\n    minWidth: rows[i].value > 0 ? 3 : 0,\n    height: bar,\n    borderRadius: 6,\n    background: color(i),\n    // The same ring for the pointer and the keyboard, in the text color: an\n    // accent ring would vanish on a bar that is the accent.\n    outline: tip?.index === i ? `2px solid ${TEXT}` : 'none',\n    outlineOffset: 1,\n  });\n\n  const stage = (row: FunnelRow, i: number): ReactNode => {\n    const common = {\n      'data-funnel-stage': '',\n      'data-index': i,\n      tabIndex: i === tabbable ? 0 : -1,\n      'aria-label': nameOf(row, i),\n      onFocus: (event: FocusEvent<HTMLElement>) => focusIn(i, event),\n      onMouseEnter: (event: MouseEvent<HTMLElement>) => setHover(tipFor(i, event.currentTarget)),\n      onMouseLeave: () => setHover(undefined),\n    };\n    if (narrow) {\n      return (\n        <li\n          key={i}\n          {...common}\n          style={{\n            display: 'grid',\n            gridTemplateColumns: 'minmax(0, 1fr) auto',\n            gridTemplateRows: '1fr auto',\n            columnGap: '0.75rem',\n            outline: 'none',\n          }}\n        >\n          {i > 0 && flowSvg(i, { gridRow: 1, gridColumn: '1 / -1', width: '100%', height: '100%' })}\n          <span\n            aria-hidden\n            style={{\n              gridRow: 1,\n              gridColumn: 1,\n              alignSelf: 'end',\n              display: 'flex',\n              minWidth: 0,\n              padding: `${i > 0 ? flow : '0'} 0 0.25rem`,\n            }}\n          >\n            {label(row, { color: TEXT })}\n          </span>\n          <span\n            aria-hidden\n            style={{\n              gridRow: 1,\n              gridColumn: 2,\n              alignSelf: 'end',\n              display: 'flex',\n              alignItems: 'baseline',\n              gap: '0.5rem',\n              padding: `${i > 0 ? flow : '0'} 0 0.25rem`,\n            }}\n          >\n            {figures(row, i)}\n          </span>\n          <div\n            aria-hidden\n            style={{ gridRow: 2, gridColumn: '1 / -1', display: 'flex', justifyContent: 'center' }}\n          >\n            <div data-funnel-bar=\"\" style={barBox(i)} />\n          </div>\n        </li>\n      );\n    }\n    return (\n      <li\n        key={i}\n        {...common}\n        style={{\n          display: 'grid',\n          gridColumn: '1 / -1',\n          gridTemplateColumns: 'subgrid',\n          outline: 'none',\n        }}\n      >\n        <span\n          aria-hidden\n          style={{\n            gridColumn: 1,\n            alignSelf: 'end',\n            height: bar,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'flex-end',\n            minWidth: 0,\n          }}\n        >\n          {label(row)}\n        </span>\n        <div\n          aria-hidden\n          style={{\n            gridColumn: 2,\n            position: 'relative',\n            display: 'flex',\n            alignItems: 'flex-end',\n            justifyContent: 'center',\n            minHeight: i === 0 ? bar : `calc(${bar} + ${flow})`,\n            minWidth: 0,\n          }}\n        >\n          {i > 0 &&\n            flowSvg(i, {\n              position: 'absolute',\n              left: 0,\n              top: 0,\n              width: '100%',\n              height: `calc(100% - ${bar})`,\n            })}\n          <div data-funnel-bar=\"\" style={barBox(i)} />\n        </div>\n        <span\n          aria-hidden\n          style={{\n            gridColumn: 3,\n            alignSelf: 'end',\n            height: bar,\n            display: 'flex',\n            alignItems: 'center',\n            gap: '0.5rem',\n            minWidth: 0,\n          }}\n        >\n          {figures(row, i)}\n        </span>\n      </li>\n    );\n  };\n\n  return (\n    <div\n      ref={frameRef}\n      style={{\n        // The stages keep their order under `dir=\"rtl\"`, as a chart's axis does.\n        direction: 'ltr',\n        position: 'relative',\n        width: width ?? '100%',\n        height,\n        maxWidth: '100%',\n        minWidth: 0,\n      }}\n    >\n      <ul\n        ref={list}\n        role=\"list\"\n        aria-label={name}\n        onKeyDown={move}\n        onBlur={focusOut}\n        style={{\n          display: 'grid',\n          gridTemplateColumns: narrow\n            ? 'minmax(0, 1fr)'\n            : 'fit-content(30%) minmax(0, 1fr) fit-content(45%)',\n          gridTemplateRows: `auto repeat(${rows.length - 1}, minmax(min-content, 1fr))`,\n          columnGap: '1rem',\n          width: '100%',\n          height: height === undefined ? undefined : '100%',\n          margin: 0,\n          padding: 0,\n          listStyle: 'none',\n        }}\n      >\n        {rows.map(stage)}\n      </ul>\n      {tip && tipRow && tipStyle && (\n        <div data-funnel-tooltip=\"\" aria-hidden style={tipStyle}>\n          <TooltipCard\n            title={tipRow.label}\n            rows={[\n              { name: 'Value', value: formatValue(tipRow.value), color: color(tip.index) },\n              ...(showConversion && tip.index > 0\n                ? [\n                    {\n                      name: 'Of previous stage',\n                      value: formatRate(tipRow.fromPrevious),\n                      color: color(tip.index),\n                    },\n                    {\n                      name: `Of ${first.label}`,\n                      value: formatRate(tipRow.fromFirst),\n                      color: color(tip.index),\n                    },\n                  ]\n                : []),\n            ]}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}