@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/chunk-FUZW3H5X.js

@@ -0,0 +1,38 @@
+"use client";
+import { useCallback } from 'react';
+
+// src/core/categoryKeys.ts
+var AS_RECHARTS = {
+  ArrowDown: "ArrowLeft",
+  ArrowRight: "ArrowLeft",
+  ArrowUp: "ArrowRight",
+  ArrowLeft: "ArrowRight"
+};
+var remapped = /* @__PURE__ */ new WeakSet();
+var useCategoryKeys = (layout) => useCallback(
+  (svg) => {
+    if (!svg || layout !== "vertical") return;
+    const onKeyDown = (event) => {
+      const key = AS_RECHARTS[event.key];
+      if (!key || remapped.has(event) || event.ctrlKey || event.metaKey || event.altKey) return;
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") event.preventDefault();
+      event.stopPropagation();
+      const copy = new KeyboardEvent("keydown", {
+        key,
+        bubbles: true,
+        cancelable: true,
+        repeat: event.repeat,
+        shiftKey: event.shiftKey
+      });
+      remapped.add(copy);
+      svg.dispatchEvent(copy);
+    };
+    svg.addEventListener("keydown", onKeyDown, true);
+    return () => svg.removeEventListener("keydown", onKeyDown, true);
+  },
+  [layout]
+);
+
+export { useCategoryKeys };
+//# sourceMappingURL=chunk-FUZW3H5X.js.map
+//# sourceMappingURL=chunk-FUZW3H5X.js.map

package/dist/chunk-FUZW3H5X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/categoryKeys.ts"],"names":[],"mappings":";;;;AAWA,IAAM,WAAA,GAAsC;AAAA,EAC1C,SAAA,EAAW,WAAA;AAAA,EACX,UAAA,EAAY,WAAA;AAAA,EACZ,OAAA,EAAS,YAAA;AAAA,EACT,SAAA,EAAW;AACb,CAAA;AAGA,IAAM,QAAA,uBAAe,OAAA,EAAe;AAc7B,IAAM,eAAA,GAAkB,CAAC,MAAA,KAC9B,WAAA;AAAA,EACE,CAAC,GAAA,KAA8B;AAC7B,IAAA,IAAI,CAAC,GAAA,IAAO,MAAA,KAAW,UAAA,EAAY;AACnC,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,MAAA,MAAM,GAAA,GAAM,WAAA,CAAY,KAAA,CAAM,GAAG,CAAA;AACjC,MAAA,IAAI,CAAC,GAAA,IAAO,QAAA,CAAS,GAAA,CAAI,KAAK,CAAA,IAAK,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,MAAA,EAAQ;AACnF,MAAA,IAAI,MAAM,GAAA,KAAQ,SAAA,IAAa,MAAM,GAAA,KAAQ,WAAA,QAAmB,cAAA,EAAe;AAC/E,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,MAAM,IAAA,GAAO,IAAI,aAAA,CAAc,SAAA,EAAW;AAAA,QACxC,GAAA;AAAA,QACA,OAAA,EAAS,IAAA;AAAA,QACT,UAAA,EAAY,IAAA;AAAA,QACZ,QAAQ,KAAA,CAAM,MAAA;AAAA,QACd,UAAU,KAAA,CAAM;AAAA,OACjB,CAAA;AACD,MAAA,QAAA,CAAS,IAAI,IAAI,CAAA;AACjB,MAAA,GAAA,CAAI,cAAc,IAAI,CAAA;AAAA,IACxB,CAAA;AACA,IAAA,GAAA,CAAI,gBAAA,CAAiB,SAAA,EAAW,SAAA,EAAW,IAAI,CAAA;AAC/C,IAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,SAAA,EAAW,WAAW,IAAI,CAAA;AAAA,EACjE,CAAA;AAAA,EACA,CAAC,MAAM;AACT","file":"chunk-FUZW3H5X.js","sourcesContent":["import { useCallback } from 'react';\n\n// Recharts 3.10.1: `keyboardEventsMiddleware` reads ArrowLeft and ArrowRight\n// only, and treats every chart direction but `left-to-right` as reversed.\n// `selectChartDirection` answers `top-to-bottom` for a vertical layout, so\n// there ArrowRight goes back, ArrowLeft goes forward and ArrowUp and ArrowDown\n// do nothing. Remove this once a Recharts release walks the categories\n// downward on ArrowDown.\n\n// The key to hand Recharts for each key pressed: in a vertical layout its\n// ArrowLeft is the next category and its ArrowRight the previous one.\nconst AS_RECHARTS: Record<string, string> = {\n  ArrowDown: 'ArrowLeft',\n  ArrowRight: 'ArrowLeft',\n  ArrowUp: 'ArrowRight',\n  ArrowLeft: 'ArrowRight',\n};\n\n// The events this hook made, which it must let through.\nconst remapped = new WeakSet<Event>();\n\n/**\n * The `ref` of a Recharts chart whose `layout` is `vertical`, the categories on\n * the vertical axis (a horizontal `BarChart`): ArrowDown and ArrowRight move\n * to the next category and ArrowUp and ArrowLeft to the previous one. In a\n * `horizontal` layout the ref does nothing.\n *\n * Recharts reads `event.key` from the keydown that reaches its wrapper, so the\n * arrow key is replaced there by the one Recharts reads the way we want: the\n * original is stopped on the chart and a copy with the other key is dispatched\n * in its place. ArrowUp and ArrowDown walk the chart now, so they no longer\n * scroll the page.\n */\nexport const useCategoryKeys = (layout: 'horizontal' | 'vertical') =>\n  useCallback(\n    (svg: SVGSVGElement | null) => {\n      if (!svg || layout !== 'vertical') return;\n      const onKeyDown = (event: KeyboardEvent) => {\n        const key = AS_RECHARTS[event.key];\n        if (!key || remapped.has(event) || event.ctrlKey || event.metaKey || event.altKey) return;\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') event.preventDefault();\n        event.stopPropagation();\n        const copy = new KeyboardEvent('keydown', {\n          key,\n          bubbles: true,\n          cancelable: true,\n          repeat: event.repeat,\n          shiftKey: event.shiftKey,\n        });\n        remapped.add(copy);\n        svg.dispatchEvent(copy);\n      };\n      svg.addEventListener('keydown', onKeyDown, true);\n      return () => svg.removeEventListener('keydown', onKeyDown, true);\n    },\n    [layout]\n  );\n"]}

package/dist/chunk-GDZLYYL2.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+
+// src/core/roundedBar.tsx
+var roundedRect = (x, y, w, h, [tl, tr, br, bl]) => `M${x + tl},${y}H${x + w - tr}a${tr},${tr} 0 0 1 ${tr},${tr}V${y + h - br}a${br},${br} 0 0 1 ${-br},${br}H${x + bl}a${bl},${bl} 0 0 1 ${-bl},${-bl}V${y + tl}a${tl},${tl} 0 0 1 ${tl},${-tl}Z`;
+var roundedBarShape = ({ layout, radius, dataKey, isOuter, fillFor }) => (props) => {
+  const { x, y, width, height } = props;
+  const row = props.payload ?? {};
+  const fill = fillFor?.(Number(row[dataKey]), props.index) ?? props.fill;
+  const left = Math.min(x, x + width);
+  const top = Math.min(y, y + height);
+  const w = Math.abs(width);
+  const h = Math.abs(height);
+  if (!(w > 0) || !(h > 0)) return null;
+  const negative = Number(row[dataKey]) < 0;
+  const r = !isOuter || isOuter(row) ? Math.min(radius, w / 2, h / 2) : 0;
+  const corners = layout === "horizontal" ? negative ? [0, 0, r, r] : [r, r, 0, 0] : negative ? [r, 0, 0, r] : [0, r, r, 0];
+  return /* @__PURE__ */ jsx("path", { d: roundedRect(left, top, w, h, corners), fill });
+};
+var isOuterInStack = (keys, key) => (row) => {
+  const value = Number(row[key]);
+  return !keys.slice(keys.indexOf(key) + 1).some((other) => Number(row[other]) !== 0 && Number(row[other]) * value > 0);
+};
+
+export { isOuterInStack, roundedBarShape };
+//# sourceMappingURL=chunk-GDZLYYL2.js.map
+//# sourceMappingURL=chunk-GDZLYYL2.js.map

package/dist/chunk-GDZLYYL2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/roundedBar.tsx"],"names":[],"mappings":"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","file":"chunk-GDZLYYL2.js","sourcesContent":["import type { BarShapeProps } from 'recharts';\n\n/** The side of the plot a bar grows from: `horizontal` is a column chart, `vertical` a chart of horizontal bars (Recharts' own words for `layout`). */\nexport type BarLayout = 'horizontal' | 'vertical';\n\n// A rectangle with its own radius at each corner: top-left, top-right,\n// bottom-right, bottom-left.\nconst roundedRect = (\n  x: number,\n  y: number,\n  w: number,\n  h: number,\n  [tl, tr, br, bl]: [number, number, number, number]\n) =>\n  `M${x + tl},${y}H${x + w - tr}a${tr},${tr} 0 0 1 ${tr},${tr}V${y + h - br}` +\n  `a${br},${br} 0 0 1 ${-br},${br}H${x + bl}a${bl},${bl} 0 0 1 ${-bl},${-bl}` +\n  `V${y + tl}a${tl},${tl} 0 0 1 ${tl},${-tl}Z`;\n\ntype RoundedBarOptions = {\n  layout: BarLayout;\n  /** The corner radius of the outer end, in px. */\n  radius: number;\n  /** The key of the series in the data rows, to read the sign of the value. */\n  dataKey: string;\n  /**\n   * Whether this bar is the outer end of its stack in `row`. A bar outside a\n   * stack, or the last of it on its side of the axis, is. Default: always.\n   */\n  isOuter?: (row: Record<string, unknown>) => boolean;\n  /**\n   * The fill of a bar from its value and the index of its category, or\n   * `undefined` for the series' own color.\n   */\n  fillFor?: (value: number, index: number) => string | undefined;\n};\n\n/**\n * The `shape` of a `Bar` that rounds the end away from the axis only: the top\n * of a column, the right of a horizontal bar, and the other end when the value\n * is negative. In a stack only the outermost segment on each side is rounded,\n * so the stack reads as one bar. The radius shrinks to fit a short bar. With\n * `fillFor`, a bar can take a color of its own.\n */\nexport const roundedBarShape =\n  ({ layout, radius, dataKey, isOuter, fillFor }: RoundedBarOptions) =>\n  (props: BarShapeProps) => {\n    const { x, y, width, height } = props;\n    const row = (props.payload ?? {}) as Record<string, unknown>;\n    const fill = fillFor?.(Number(row[dataKey]), props.index) ?? props.fill;\n    // The rectangle has a negative size when the value is below zero.\n    const left = Math.min(x, x + width);\n    const top = Math.min(y, y + height);\n    const w = Math.abs(width);\n    const h = Math.abs(height);\n    if (!(w > 0) || !(h > 0)) return null;\n    const negative = Number(row[dataKey]) < 0;\n    const r = !isOuter || isOuter(row) ? Math.min(radius, w / 2, h / 2) : 0;\n    const corners: [number, number, number, number] =\n      layout === 'horizontal'\n        ? negative\n          ? [0, 0, r, r]\n          : [r, r, 0, 0]\n        : negative\n          ? [r, 0, 0, r]\n          : [0, r, r, 0];\n    return <path d={roundedRect(left, top, w, h, corners)} fill={fill} />;\n  };\n\n/**\n * For a stack, whether the series `key` is the last one drawn on its side of\n * the axis in a row, among the `keys` of the series that are shown.\n */\nexport const isOuterInStack =\n  (keys: readonly string[], key: string) => (row: Record<string, unknown>) => {\n    const value = Number(row[key]);\n    return !keys\n      .slice(keys.indexOf(key) + 1)\n      .some((other) => Number(row[other]) !== 0 && Number(row[other]) * value > 0);\n  };\n"]}

package/dist/chunk-GVTMZYOM.cjs

@@ -0,0 +1,30 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/core/roundedBar.tsx
+var roundedRect = (x, y, w, h, [tl, tr, br, bl]) => `M${x + tl},${y}H${x + w - tr}a${tr},${tr} 0 0 1 ${tr},${tr}V${y + h - br}a${br},${br} 0 0 1 ${-br},${br}H${x + bl}a${bl},${bl} 0 0 1 ${-bl},${-bl}V${y + tl}a${tl},${tl} 0 0 1 ${tl},${-tl}Z`;
+var roundedBarShape = ({ layout, radius, dataKey, isOuter, fillFor }) => (props) => {
+  const { x, y, width, height } = props;
+  const row = props.payload ?? {};
+  const fill = fillFor?.(Number(row[dataKey]), props.index) ?? props.fill;
+  const left = Math.min(x, x + width);
+  const top = Math.min(y, y + height);
+  const w = Math.abs(width);
+  const h = Math.abs(height);
+  if (!(w > 0) || !(h > 0)) return null;
+  const negative = Number(row[dataKey]) < 0;
+  const r = !isOuter || isOuter(row) ? Math.min(radius, w / 2, h / 2) : 0;
+  const corners = layout === "horizontal" ? negative ? [0, 0, r, r] : [r, r, 0, 0] : negative ? [r, 0, 0, r] : [0, r, r, 0];
+  return /* @__PURE__ */ jsxRuntime.jsx("path", { d: roundedRect(left, top, w, h, corners), fill });
+};
+var isOuterInStack = (keys, key) => (row) => {
+  const value = Number(row[key]);
+  return !keys.slice(keys.indexOf(key) + 1).some((other) => Number(row[other]) !== 0 && Number(row[other]) * value > 0);
+};
+
+exports.isOuterInStack = isOuterInStack;
+exports.roundedBarShape = roundedBarShape;
+//# sourceMappingURL=chunk-GVTMZYOM.cjs.map
+//# sourceMappingURL=chunk-GVTMZYOM.cjs.map

package/dist/chunk-GVTMZYOM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/roundedBar.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-GVTMZYOM.cjs","sourcesContent":["import type { BarShapeProps } from 'recharts';\n\n/** The side of the plot a bar grows from: `horizontal` is a column chart, `vertical` a chart of horizontal bars (Recharts' own words for `layout`). */\nexport type BarLayout = 'horizontal' | 'vertical';\n\n// A rectangle with its own radius at each corner: top-left, top-right,\n// bottom-right, bottom-left.\nconst roundedRect = (\n  x: number,\n  y: number,\n  w: number,\n  h: number,\n  [tl, tr, br, bl]: [number, number, number, number]\n) =>\n  `M${x + tl},${y}H${x + w - tr}a${tr},${tr} 0 0 1 ${tr},${tr}V${y + h - br}` +\n  `a${br},${br} 0 0 1 ${-br},${br}H${x + bl}a${bl},${bl} 0 0 1 ${-bl},${-bl}` +\n  `V${y + tl}a${tl},${tl} 0 0 1 ${tl},${-tl}Z`;\n\ntype RoundedBarOptions = {\n  layout: BarLayout;\n  /** The corner radius of the outer end, in px. */\n  radius: number;\n  /** The key of the series in the data rows, to read the sign of the value. */\n  dataKey: string;\n  /**\n   * Whether this bar is the outer end of its stack in `row`. A bar outside a\n   * stack, or the last of it on its side of the axis, is. Default: always.\n   */\n  isOuter?: (row: Record<string, unknown>) => boolean;\n  /**\n   * The fill of a bar from its value and the index of its category, or\n   * `undefined` for the series' own color.\n   */\n  fillFor?: (value: number, index: number) => string | undefined;\n};\n\n/**\n * The `shape` of a `Bar` that rounds the end away from the axis only: the top\n * of a column, the right of a horizontal bar, and the other end when the value\n * is negative. In a stack only the outermost segment on each side is rounded,\n * so the stack reads as one bar. The radius shrinks to fit a short bar. With\n * `fillFor`, a bar can take a color of its own.\n */\nexport const roundedBarShape =\n  ({ layout, radius, dataKey, isOuter, fillFor }: RoundedBarOptions) =>\n  (props: BarShapeProps) => {\n    const { x, y, width, height } = props;\n    const row = (props.payload ?? {}) as Record<string, unknown>;\n    const fill = fillFor?.(Number(row[dataKey]), props.index) ?? props.fill;\n    // The rectangle has a negative size when the value is below zero.\n    const left = Math.min(x, x + width);\n    const top = Math.min(y, y + height);\n    const w = Math.abs(width);\n    const h = Math.abs(height);\n    if (!(w > 0) || !(h > 0)) return null;\n    const negative = Number(row[dataKey]) < 0;\n    const r = !isOuter || isOuter(row) ? Math.min(radius, w / 2, h / 2) : 0;\n    const corners: [number, number, number, number] =\n      layout === 'horizontal'\n        ? negative\n          ? [0, 0, r, r]\n          : [r, r, 0, 0]\n        : negative\n          ? [r, 0, 0, r]\n          : [0, r, r, 0];\n    return <path d={roundedRect(left, top, w, h, corners)} fill={fill} />;\n  };\n\n/**\n * For a stack, whether the series `key` is the last one drawn on its side of\n * the axis in a row, among the `keys` of the series that are shown.\n */\nexport const isOuterInStack =\n  (keys: readonly string[], key: string) => (row: Record<string, unknown>) => {\n    const value = Number(row[key]);\n    return !keys\n      .slice(keys.indexOf(key) + 1)\n      .some((other) => Number(row[other]) !== 0 && Number(row[other]) * value > 0);\n  };\n"]}

package/dist/chunk-GZRMVE4X.cjs

@@ -0,0 +1,131 @@
+"use client";
+'use strict';
+
+var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var useHiddenSeries = () => {
+  const [hidden, setHidden] = react.useState(/* @__PURE__ */ new Set());
+  const toggle = react.useCallback((key) => {
+    setHidden((current) => {
+      const next = new Set(current);
+      if (!next.delete(key)) next.add(key);
+      return next;
+    });
+  }, []);
+  return { hidden, toggle };
+};
+var ChartLegend = ({ payload, hidden, onToggle, column, detail }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "ul",
+  {
+    style: {
+      display: "flex",
+      flexDirection: column ? "column" : "row",
+      flexWrap: "wrap",
+      gap: column ? "0.375rem" : "0.25rem 1rem",
+      margin: 0,
+      padding: 0,
+      listStyle: "none",
+      fontSize: chunkRLHGPHC7_cjs.TEXT_SIZE,
+      color: chunkLT3UC65O_cjs.MUTED
+    },
+    children: payload?.map((entry, index) => {
+      const key = String(entry.dataKey);
+      const figures = detail?.(index);
+      const off = hidden.has(key);
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": !off,
+          onClick: () => onToggle(key),
+          className: "focus-visible:focus-indicator",
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.375rem",
+            padding: "0.125rem 0.25rem",
+            font: "inherit",
+            color: "inherit",
+            background: "none",
+            border: 0,
+            borderRadius: "0.25rem",
+            cursor: "pointer",
+            textDecoration: off ? "line-through" : void 0,
+            // The figures of a column reach its right edge, which aligns them.
+            ...figures && column ? { display: "flex", width: "100%", gap: "0.75rem" } : {}
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: {
+                  width: "0.625rem",
+                  height: "0.625rem",
+                  borderRadius: "50%",
+                  background: entry.color,
+                  // Text keeps its color: dimming it would fail the contrast check.
+                  opacity: off ? 0.35 : 1
+                }
+              }
+            ),
+            figures ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: column ? { flex: 1, textAlign: "start" } : void 0, children: entry.value }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    color: chunkLT3UC65O_cjs.TEXT,
+                    fontWeight: 600,
+                    fontVariantNumeric: "tabular-nums",
+                    textAlign: "end"
+                  },
+                  children: figures.value
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    minWidth: column ? "3.5ch" : void 0,
+                    fontVariantNumeric: "tabular-nums",
+                    textAlign: "end"
+                  },
+                  children: figures.share
+                }
+              )
+            ] }) : entry.value
+          ]
+        }
+      ) }, key);
+    })
+  }
+);
+var GAP = "1rem";
+var legendProps = (position, { hidden, toggle }) => ({
+  position,
+  itemSorter: null,
+  wrapperStyle: {
+    top: { width: "100%", paddingBottom: GAP },
+    bottom: { width: "100%", paddingTop: GAP },
+    left: { paddingRight: GAP },
+    right: { paddingLeft: GAP }
+  }[position],
+  content: /* @__PURE__ */ jsxRuntime.jsx(
+    ChartLegend,
+    {
+      hidden,
+      onToggle: toggle,
+      column: position === "left" || position === "right"
+    }
+  )
+});
+
+exports.ChartLegend = ChartLegend;
+exports.legendProps = legendProps;
+exports.useHiddenSeries = useHiddenSeries;
+//# sourceMappingURL=chunk-GZRMVE4X.cjs.map
+//# sourceMappingURL=chunk-GZRMVE4X.cjs.map

package/dist/chunk-GZRMVE4X.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/ChartLegend.tsx"],"names":["useState","useCallback","jsx","TEXT_SIZE","MUTED","jsxs","Fragment","TEXT"],"mappings":"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","file":"chunk-GZRMVE4X.cjs","sourcesContent":["import { useCallback, useState, type ReactNode } from 'react';\nimport type { LegendPayload, LegendProps } from 'recharts';\nimport type { ChartLegendPosition } from '../types';\nimport { MUTED, TEXT } from './colors';\nimport { TEXT_SIZE } from './axes';\n\n/**\n * The series a click on the legend hid, and the toggle. A hidden series is\n * passed to its graphical item as `hide`, so the axes fit what is left.\n */\nexport const useHiddenSeries = () => {\n  const [hidden, setHidden] = useState<ReadonlySet<string>>(new Set());\n  const toggle = useCallback((key: string) => {\n    setHidden((current) => {\n      const next = new Set(current);\n      if (!next.delete(key)) next.add(key);\n      return next;\n    });\n  }, []);\n  return { hidden, toggle };\n};\n\ntype ChartLegendProps = {\n  /** Given by Recharts: one entry per series, in the order the series are drawn. */\n  payload?: readonly LegendPayload[];\n  /** The keys of the hidden series. */\n  hidden: ReadonlySet<string>;\n  onToggle: (key: string) => void;\n  /** Items in a column (`left`, `right`) or a row (`top`, `bottom`). */\n  column?: boolean;\n  /**\n   * A figure written after the name of the entry at `index`: a value and its\n   * share. In a column the figures sit at the right edge, aligned on their\n   * last digit; in a row they follow the name.\n   */\n  detail?: (index: number) => { value: string; share: string };\n};\n\n/**\n * The legend of every chart: a round chip and the series name in the muted\n * text color, one button per series. A click (or Enter, Space) hides the series\n * and shows it again; the button says which in `aria-pressed`. Pass it as\n * `<Legend content={…} itemSorter={null} />`: Recharts sorts the items by name\n * unless told not to, and the series keep their order.\n */\nexport const ChartLegend = ({ payload, hidden, onToggle, column, detail }: ChartLegendProps) => (\n  <ul\n    style={{\n      display: 'flex',\n      flexDirection: column ? 'column' : 'row',\n      flexWrap: 'wrap',\n      gap: column ? '0.375rem' : '0.25rem 1rem',\n      margin: 0,\n      padding: 0,\n      listStyle: 'none',\n      fontSize: TEXT_SIZE,\n      color: MUTED,\n    }}\n  >\n    {payload?.map((entry, index) => {\n      const key = String(entry.dataKey);\n      const figures = detail?.(index);\n      const off = hidden.has(key);\n      return (\n        <li key={key}>\n          <button\n            type=\"button\"\n            aria-pressed={!off}\n            onClick={() => onToggle(key)}\n            className=\"focus-visible:focus-indicator\"\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: '0.375rem',\n              padding: '0.125rem 0.25rem',\n              font: 'inherit',\n              color: 'inherit',\n              background: 'none',\n              border: 0,\n              borderRadius: '0.25rem',\n              cursor: 'pointer',\n              textDecoration: off ? 'line-through' : undefined,\n              // The figures of a column reach its right edge, which aligns them.\n              ...(figures && column ? { display: 'flex', width: '100%', gap: '0.75rem' } : {}),\n            }}\n          >\n            <span\n              aria-hidden\n              style={{\n                width: '0.625rem',\n                height: '0.625rem',\n                borderRadius: '50%',\n                background: entry.color,\n                // Text keeps its color: dimming it would fail the contrast check.\n                opacity: off ? 0.35 : 1,\n              }}\n            />\n            {figures ? (\n              <>\n                <span style={column ? { flex: 1, textAlign: 'start' } : undefined}>\n                  {entry.value as ReactNode}\n                </span>\n                <span\n                  style={{\n                    color: TEXT,\n                    fontWeight: 600,\n                    fontVariantNumeric: 'tabular-nums',\n                    textAlign: 'end',\n                  }}\n                >\n                  {figures.value}\n                </span>\n                <span\n                  style={{\n                    minWidth: column ? '3.5ch' : undefined,\n                    fontVariantNumeric: 'tabular-nums',\n                    textAlign: 'end',\n                  }}\n                >\n                  {figures.share}\n                </span>\n              </>\n            ) : (\n              (entry.value as ReactNode)\n            )}\n          </button>\n        </li>\n      );\n    })}\n  </ul>\n);\n\nconst GAP = '1rem';\n\n/**\n * The props of the `<Legend>` of a chart: on `position`, the chips and names\n * of `ChartLegend`, in series order, a `GAP` away from the plot.\n */\nexport const legendProps = (\n  position: ChartLegendPosition,\n  { hidden, toggle }: ReturnType<typeof useHiddenSeries>\n): LegendProps => ({\n  position,\n  itemSorter: null,\n  wrapperStyle: {\n    top: { width: '100%', paddingBottom: GAP },\n    bottom: { width: '100%', paddingTop: GAP },\n    left: { paddingRight: GAP },\n    right: { paddingLeft: GAP },\n  }[position],\n  content: (\n    <ChartLegend\n      hidden={hidden}\n      onToggle={toggle}\n      column={position === 'left' || position === 'right'}\n    />\n  ),\n});\n"]}

package/dist/chunk-HMH6DI7U.js

@@ -0,0 +1,27 @@
+"use client";
+import { AXIS } from './chunk-RILUG7JB.js';
+
+// src/core/categoryAxis.ts
+var MAX_CHARS = 14;
+var trimLabel = (value) => {
+  const text = String(value);
+  return text.length > MAX_CHARS ? `${text.slice(0, MAX_CHARS - 1)}\u2026` : text;
+};
+var categoryAxis = (categories, title) => {
+  const longest = Math.max(0, ...categories.map((c) => String(c).length));
+  const tilted = categories.length > 6 && longest > 8;
+  const base = title ? 52 : 30;
+  return {
+    tickFormatter: trimLabel,
+    ...tilted ? {
+      interval: 0,
+      angle: -40,
+      tick: { ...AXIS.tick, textAnchor: "end" },
+      height: base + Math.round(Math.min(longest, MAX_CHARS) * 4.2)
+    } : {}
+  };
+};
+
+export { categoryAxis, trimLabel };
+//# sourceMappingURL=chunk-HMH6DI7U.js.map
+//# sourceMappingURL=chunk-HMH6DI7U.js.map

package/dist/chunk-HMH6DI7U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/categoryAxis.ts"],"names":[],"mappings":";;;;AAEA,IAAM,SAAA,GAAY,EAAA;AAGX,IAAM,SAAA,GAAY,CAAC,KAAA,KAA2B;AACnD,EAAA,MAAM,IAAA,GAAO,OAAO,KAAK,CAAA;AACzB,EAAA,OAAO,IAAA,CAAK,MAAA,GAAS,SAAA,GAAY,CAAA,EAAG,IAAA,CAAK,MAAM,CAAA,EAAG,SAAA,GAAY,CAAC,CAAC,CAAA,MAAA,CAAA,GAAM,IAAA;AACxE;AAOO,IAAM,YAAA,GAAe,CAAC,UAAA,EAA0C,KAAA,KAAmB;AACxF,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,GAAG,UAAA,CAAW,GAAA,CAAI,CAAC,CAAA,KAAM,MAAA,CAAO,CAAC,CAAA,CAAE,MAAM,CAAC,CAAA;AACtE,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,MAAA,GAAS,CAAA,IAAK,OAAA,GAAU,CAAA;AAClD,EAAA,MAAM,IAAA,GAAO,QAAQ,EAAA,GAAK,EAAA;AAC1B,EAAA,OAAO;AAAA,IACL,aAAA,EAAe,SAAA;AAAA,IACf,GAAI,MAAA,GACA;AAAA,MACE,QAAA,EAAU,CAAA;AAAA,MACV,KAAA,EAAO,GAAA;AAAA,MACP,MAAM,EAAE,GAAG,IAAA,CAAK,IAAA,EAAM,YAAY,KAAA,EAAM;AAAA,MACxC,MAAA,EAAQ,OAAO,IAAA,CAAK,KAAA,CAAM,KAAK,GAAA,CAAI,OAAA,EAAS,SAAS,CAAA,GAAI,GAAG;AAAA,QAE9D;AAAC,GACP;AACF","file":"chunk-HMH6DI7U.js","sourcesContent":["import { AXIS } from './axes';\n\nconst MAX_CHARS = 14;\n\n/** A category name cut short with an ellipsis; the tooltip keeps the full name. */\nexport const trimLabel = (value: string | number) => {\n  const text = String(value);\n  return text.length > MAX_CHARS ? `${text.slice(0, MAX_CHARS - 1)}…` : text;\n};\n\n/**\n * The props of a horizontal category `XAxis` that keeps its labels readable:\n * names that would not fit side by side are tilted and cut short, and every one\n * is kept (Recharts would otherwise skip the ones that overlap).\n */\nexport const categoryAxis = (categories: readonly (string | number)[], title?: string) => {\n  const longest = Math.max(0, ...categories.map((c) => String(c).length));\n  const tilted = categories.length > 6 && longest > 8;\n  const base = title ? 52 : 30;\n  return {\n    tickFormatter: trimLabel,\n    ...(tilted\n      ? {\n          interval: 0,\n          angle: -40,\n          tick: { ...AXIS.tick, textAnchor: 'end' },\n          height: base + Math.round(Math.min(longest, MAX_CHARS) * 4.2),\n        }\n      : {}),\n  } as const;\n};\n"]}

package/dist/chunk-ICL5K2CW.js

@@ -0,0 +1,280 @@
+"use client";
+import { textOn } from './chunk-BFEDLXVW.js';
+import { TEXT_SIZE } from './chunk-RILUG7JB.js';
+import { TooltipCard } from './chunk-VIOSQN4Z.js';
+import { MUTED, PANEL, TEXT } from './chunk-UATB2IRY.js';
+import { useRef, useState, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var GAP = 3;
+var RADIUS = 5;
+var LABEL_GAP = 6;
+var TIP_GAP = 6;
+var key = (row, column) => `${row}:${column}`;
+var useLabelStride = (probe, gap) => {
+  const gridRef = useRef(null);
+  const probeRef = useRef(null);
+  const columnRef = useRef(null);
+  const [stride, setStride] = useState(1);
+  useLayoutEffect(() => {
+    const read = () => {
+      const label = probeRef.current?.offsetWidth ?? 0;
+      const column = columnRef.current?.offsetWidth ?? 0;
+      setStride(column > 0 ? Math.max(1, Math.ceil((label + LABEL_GAP) / (column + gap))) : 1);
+    };
+    read();
+    const observer = new ResizeObserver(read);
+    for (const el of [gridRef.current, probeRef.current]) if (el) observer.observe(el);
+    return () => observer.disconnect();
+  }, [probe, gap]);
+  return { gridRef, probeRef, columnRef, stride };
+};
+var HeatGrid = ({
+  rows,
+  columns,
+  cells,
+  cellHeight,
+  ariaLabel,
+  xTitle,
+  yTitle,
+  gap = GAP,
+  cellRadius = RADIUS,
+  columnWidth,
+  labelsAbove = false,
+  thinLabels = true
+}) => {
+  const frame = useRef(null);
+  const longest = columns.reduce((a, b) => b.length > a.length ? b : a, "");
+  const { gridRef, probeRef, columnRef, stride: measured } = useLabelStride(longest, gap);
+  const stride = thinLabels ? measured : 1;
+  const byPosition = new Map(cells.map((cell) => [key(cell.row, cell.column), cell]));
+  const cellsByRow = /* @__PURE__ */ new Map();
+  for (const cell of cells) cellsByRow.set(cell.row, [...cellsByRow.get(cell.row) ?? [], cell]);
+  const inReadingOrder = [...cells].sort((a, b) => a.row - b.row || a.column - b.column);
+  const [roving, setRoving] = useState();
+  const first = inReadingOrder[0];
+  const tabbable = roving && byPosition.has(roving) ? roving : first && key(first.row, first.column);
+  const [hover, setHover] = useState();
+  const [focus, setFocus] = useState();
+  const tip = hover ?? focus;
+  const tipFor = (cell, element) => {
+    const host = frame.current.getBoundingClientRect();
+    const box = element.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 {
+      cell,
+      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,
+      // Not enough room above the cell for the card: it goes under.
+      below: box.top - host.top < 90
+    };
+  };
+  const move = (event) => {
+    const origin = event.target.closest("[data-heat-cell]");
+    if (!origin) return;
+    const row = Number(origin.dataset.row);
+    const column = Number(origin.dataset.column);
+    const step = (dRow, dColumn) => {
+      for (let r = row + dRow, c = column + dColumn; r >= 0 && r < rows.length && c >= 0 && c < columns.length; r += dRow, c += dColumn) {
+        if (byPosition.has(key(r, c))) return key(r, c);
+      }
+    };
+    const edge = (last) => {
+      const pool = event.ctrlKey ? inReadingOrder : inReadingOrder.filter((cell2) => cell2.row === row);
+      const cell = last ? pool.at(-1) : pool[0];
+      return cell && key(cell.row, cell.column);
+    };
+    const targets = {
+      ArrowRight: () => step(0, 1),
+      ArrowLeft: () => step(0, -1),
+      ArrowDown: () => step(1, 0),
+      ArrowUp: () => step(-1, 0),
+      Home: () => edge(false),
+      End: () => edge(true)
+    };
+    const target = targets[event.key];
+    if (!target) return;
+    event.preventDefault();
+    const next = target();
+    if (next) gridRef.current?.querySelector(`[data-position="${next}"]`)?.focus();
+  };
+  const focusIn = (cell, event) => {
+    setRoving(key(cell.row, cell.column));
+    if (event.currentTarget.matches(":focus-visible")) {
+      setFocus(tipFor(cell, event.currentTarget));
+    }
+  };
+  const focusOut = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) setFocus(void 0);
+  };
+  const rowOffset = yTitle ? 2 : 1;
+  const top = labelsAbove ? 1 : 0;
+  const labelsRow = labelsAbove ? 1 : rows.length + 1;
+  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 grid = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: gridRef,
+      role: "grid",
+      "aria-label": ariaLabel,
+      onKeyDown: move,
+      onBlur: focusOut,
+      style: {
+        display: "grid",
+        gridTemplateColumns: `${yTitle ? "auto " : ""}${columnWidth ? "auto" : "fit-content(40%)"} repeat(${columns.length}, ${columnWidth ? `${columnWidth}px` : "minmax(0, 1fr)"})`,
+        gridTemplateRows: `${labelsAbove ? "auto " : ""}repeat(${rows.length}, ${cellHeight ? `${cellHeight}px` : "minmax(0, 1fr)"})${labelsAbove ? "" : " auto"}${xTitle ? " auto" : ""}`,
+        gap,
+        width: columnWidth ? "max-content" : "100%",
+        height: cellHeight ? void 0 : "100%",
+        fontSize: TEXT_SIZE,
+        color: MUTED
+      },
+      children: [
+        yTitle && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              gridRow: `${1 + top} / ${rows.length + 1 + top}`,
+              gridColumn: 1,
+              writingMode: "vertical-rl",
+              transform: "rotate(180deg)",
+              textAlign: "center",
+              alignSelf: "center"
+            },
+            children: yTitle
+          }
+        ),
+        rows.map((name, r) => /* @__PURE__ */ jsxs("div", { role: "row", style: { display: "contents" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              "data-heat-row": "",
+              style: {
+                gridRow: r + 1 + top,
+                gridColumn: rowOffset,
+                alignSelf: "center",
+                paddingRight: "0.5rem",
+                // Stays in view when the grid scrolls sideways under it.
+                ...columnWidth ? { position: "sticky", left: 0, zIndex: 2, background: PANEL } : {},
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              children: name
+            }
+          ),
+          (cellsByRow.get(r) ?? []).map((cell) => {
+            const position = key(cell.row, cell.column);
+            const active = tip?.cell === cell;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "gridcell",
+                "data-heat-cell": "",
+                "data-position": position,
+                "data-row": cell.row,
+                "data-column": cell.column,
+                tabIndex: position === tabbable ? 0 : -1,
+                "aria-label": `${cell.label ? `${cell.label}, ` : ""}${cell.title}: ${cell.value}`,
+                onFocus: (event) => focusIn(cell, event),
+                onMouseEnter: (event) => setHover(tipFor(cell, event.currentTarget)),
+                onMouseLeave: () => setHover(void 0),
+                style: {
+                  gridRow: r + 1 + top,
+                  gridColumn: cell.column + rowOffset + 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  minWidth: 0,
+                  overflow: "hidden",
+                  borderRadius: cellRadius,
+                  background: cell.color,
+                  color: textOn(cell.color),
+                  fontSize: "var(--text-2xs, 0.6875rem)",
+                  fontWeight: 500,
+                  lineHeight: 1,
+                  whiteSpace: "nowrap",
+                  // The same ring for the pointer and the keyboard, in the text color
+                  // since an accent ring would vanish on the cells that are the accent.
+                  outline: active ? `2px solid ${TEXT}` : "none",
+                  zIndex: active ? 1 : void 0
+                },
+                children: cell.text
+              },
+              position
+            );
+          })
+        ] }, r)),
+        columns.map((name, c) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: c === 0 ? columnRef : void 0,
+            "aria-hidden": true,
+            "data-heat-column": "",
+            style: {
+              gridRow: labelsRow,
+              gridColumn: c + rowOffset + 1,
+              display: "flex",
+              justifyContent: thinLabels ? "center" : "flex-start",
+              whiteSpace: "nowrap",
+              minWidth: 0
+            },
+            children: c % stride === 0 ? name : null
+          },
+          c
+        )),
+        xTitle && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              gridRow: (labelsAbove ? rows.length + 1 : labelsRow) + 1,
+              gridColumn: `${rowOffset + 1} / -1`,
+              textAlign: "center"
+            },
+            children: xTitle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: probeRef,
+            "aria-hidden": true,
+            style: { position: "absolute", visibility: "hidden", whiteSpace: "nowrap" },
+            children: longest
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { ref: frame, style: { position: "relative", width: "100%", height: "100%", minWidth: 0 }, children: [
+    columnWidth ? (
+      // The padding leaves room for the focus outline of the cells at the edges,
+      // which the scrolling box would cut.
+      /* @__PURE__ */ jsx("div", { "data-heat-scroll": "", style: { overflowX: "auto", padding: 3 }, children: grid })
+    ) : grid,
+    tip && tipStyle && /* @__PURE__ */ jsx("div", { "data-heat-tooltip": "", "aria-hidden": true, style: tipStyle, children: /* @__PURE__ */ jsx(
+      TooltipCard,
+      {
+        title: tip.cell.title,
+        rows: [{ name: tip.cell.label, value: tip.cell.value, color: tip.cell.color }]
+      }
+    ) })
+  ] });
+};
+
+export { HeatGrid };
+//# sourceMappingURL=chunk-ICL5K2CW.js.map
+//# sourceMappingURL=chunk-ICL5K2CW.js.map