@sckyzo/cosmos-charts 0.2.0 → 0.3.1

package/dist/RadarChart.js

@@ -0,0 +1,107 @@
+"use client";
+import { useHiddenSeries, legendProps } from './chunk-4AKHZNWP.js';
+import { useElementWidth } from './chunk-AOSO5QHL.js';
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { AXIS, TEXT_SIZE } from './chunk-DI2FBGKM.js';
+import { ChartTooltip } from './chunk-VIOSQN4Z.js';
+import { hasNoData, seriesKey, toRows } from './chunk-UJIV5PVI.js';
+import { ChartEmpty, frameProps } from './chunk-56WD3OHA.js';
+import { GRID, MUTED, BORDER, seriesColor } from './chunk-UATB2IRY.js';
+import { RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Legend, Tooltip, Radar } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/radarSize.ts
+var NAME_BAND = 44;
+var NAME_GAP = 14;
+var NAME_CHAR = 6.5;
+var LEGEND_ROW = 40;
+var LEGEND_COLUMN = 120;
+var MIN_SIZE = 40;
+var radarSize = ({ height, width, categories, legend }) => {
+  const widest = Math.max(0, ...categories.map((name) => name.length)) * NAME_CHAR;
+  const vertical = height - NAME_BAND - (legend === "top" || legend === "bottom" ? LEGEND_ROW : 0);
+  const horizontal = width - 2 * (widest + NAME_GAP) - (legend === "left" || legend === "right" ? LEGEND_COLUMN : 0);
+  return Math.max(MIN_SIZE, Math.floor(Math.min(vertical, horizontal) / 2));
+};
+var RadarChart = ({
+  series,
+  categories,
+  colors,
+  formatValue,
+  showLegend,
+  legendPosition = "top",
+  max,
+  showScale = false,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 340,
+  width
+}) => {
+  const hidden = useHiddenSeries();
+  const { ref: box, width: boxWidth } = useElementWidth();
+  const name = ariaLabel ?? `Radar chart: ${series.map((s) => s.name).join(", ")}`;
+  if (hasNoData(series)) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const legendVisible = showLegend ?? series.length > 1;
+  const radius = typeof height === "number" && boxWidth ? radarSize({
+    height,
+    width: boxWidth,
+    categories,
+    legend: legendVisible ? legendPosition : void 0
+  }) : "70%";
+  return /* @__PURE__ */ jsx("div", { ref: box, style: { width: width ?? "100%", maxWidth: "100%" }, children: /* @__PURE__ */ jsxs(
+    RadarChart$1,
+    {
+      ...frameProps({ height, width: "100%", ariaLabel: name }),
+      data: toRows(categories, series),
+      outerRadius: radius,
+      margin: { top: 0, right: 0, bottom: 0, left: 0 },
+      children: [
+        /* @__PURE__ */ jsx(PolarGrid, { stroke: GRID }),
+        /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: "category", tick: AXIS.tick, tickLine: false }),
+        /* @__PURE__ */ jsx(
+          PolarRadiusAxis,
+          {
+            angle: 90,
+            domain: [0, max ?? "auto"],
+            tickCount: 6,
+            tickFormatter: formatValue,
+            tick: showScale ? { fill: MUTED, style: { fontSize: TEXT_SIZE } } : false,
+            axisLine: false
+          }
+        ),
+        legendVisible && /* @__PURE__ */ jsx(Legend, { ...legendProps(legendPosition, hidden) }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(ChartTooltip, { format: formatValue }),
+            cursor: { stroke: BORDER, strokeDasharray: "4 4" },
+            animationDuration: 150
+          }
+        ),
+        series.map((s, i) => /* @__PURE__ */ jsx(
+          Radar,
+          {
+            name: s.name,
+            dataKey: seriesKey(i),
+            stroke: seriesColor(i, colors),
+            strokeWidth: 2,
+            fill: seriesColor(i, colors),
+            fillOpacity: 0.15,
+            dot: { r: 3, fill: seriesColor(i, colors), fillOpacity: 1, strokeWidth: 0 },
+            hide: hidden.hidden.has(seriesKey(i)),
+            ...ANIMATION
+          },
+          seriesKey(i)
+        )),
+        children
+      ]
+    }
+  ) });
+};
+
+export { RadarChart };
+//# sourceMappingURL=RadarChart.js.map
+//# sourceMappingURL=RadarChart.js.map

package/dist/RadarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radarSize.ts","../src/RadarChart.tsx"],"names":["RechartsRadarChart"],"mappings":";;;;;;;;;;;;;AAMA,IAAM,SAAA,GAAY,EAAA;AAClB,IAAM,QAAA,GAAW,EAAA;AACjB,IAAM,SAAA,GAAY,GAAA;AAElB,IAAM,UAAA,GAAa,EAAA;AACnB,IAAM,aAAA,GAAgB,GAAA;AACtB,IAAM,QAAA,GAAW,EAAA;AAeV,IAAM,YAAY,CAAC,EAAE,QAAQ,KAAA,EAAO,UAAA,EAAY,QAAO,KAA+B;AAC3F,EAAA,MAAM,MAAA,GAAS,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,GAAG,UAAA,CAAW,GAAA,CAAI,CAAC,IAAA,KAAS,IAAA,CAAK,MAAM,CAAC,CAAA,GAAI,SAAA;AACvE,EAAA,MAAM,WAAW,MAAA,GAAS,SAAA,IAAa,WAAW,KAAA,IAAS,MAAA,KAAW,WAAW,UAAA,GAAa,CAAA,CAAA;AAC9F,EAAA,MAAM,UAAA,GACJ,QAAQ,CAAA,IAAK,MAAA,GAAS,aAAa,MAAA,KAAW,MAAA,IAAU,MAAA,KAAW,OAAA,GAAU,aAAA,GAAgB,CAAA,CAAA;AAC/F,EAAA,OAAO,IAAA,CAAK,GAAA,CAAI,QAAA,EAAU,IAAA,CAAK,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,QAAA,EAAU,UAAU,CAAA,GAAI,CAAC,CAAC,CAAA;AAC1E,CAAA;ACSO,IAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,GAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,YAAA,GAAe,SAAA;AAAA,EACf,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,GAAA;AAAA,EACT;AACF,CAAA,KAAuB;AACrB,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,MAAM,EAAE,GAAA,EAAK,GAAA,EAAK,KAAA,EAAO,QAAA,KAAa,eAAA,EAAgB;AACtD,EAAA,MAAM,IAAA,GAAO,SAAA,IAAa,CAAA,aAAA,EAAgB,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAI,CAAA,CAAE,IAAA,CAAK,IAAI,CAAC,CAAA,CAAA;AAC9E,EAAA,IAAI,SAAA,CAAU,MAAM,CAAA,EAAG;AACrB,IAAA,2BAAQ,UAAA,EAAA,EAAW,OAAA,EAAS,cAAc,SAAA,EAAW,IAAA,EAAM,QAAgB,KAAA,EAAc,CAAA;AAAA,EAC3F;AACA,EAAA,MAAM,aAAA,GAAgB,UAAA,IAAc,MAAA,CAAO,MAAA,GAAS,CAAA;AAIpD,EAAA,MAAM,MAAA,GACJ,OAAO,MAAA,KAAW,QAAA,IAAY,WAC1B,SAAA,CAAU;AAAA,IACR,MAAA;AAAA,IACA,KAAA,EAAO,QAAA;AAAA,IACP,UAAA;AAAA,IACA,MAAA,EAAQ,gBAAgB,cAAA,GAAiB;AAAA,GAC1C,CAAA,GACD,KAAA;AACN,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,GAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,KAAA,IAAS,MAAA,EAAQ,QAAA,EAAU,MAAA,EAAO,EAC/D,QAAA,kBAAA,IAAA;AAAA,IAACA,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAW,EAAE,MAAA,EAAQ,OAAO,MAAA,EAAQ,SAAA,EAAW,MAAM,CAAA;AAAA,MACzD,IAAA,EAAM,MAAA,CAAO,UAAA,EAAY,MAAM,CAAA;AAAA,MAC/B,WAAA,EAAa,MAAA;AAAA,MACb,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA,EAAE;AAAA,MAE/C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,QAAQ,IAAA,EAAM,CAAA;AAAA,wBACzB,GAAA,CAAC,kBAAe,OAAA,EAAQ,UAAA,EAAW,MAAM,IAAA,CAAK,IAAA,EAAM,UAAU,KAAA,EAAO,CAAA;AAAA,wBACrE,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,EAAA;AAAA,YACP,MAAA,EAAQ,CAAC,CAAA,EAAG,GAAA,IAAO,MAAM,CAAA;AAAA,YACzB,SAAA,EAAW,CAAA;AAAA,YACX,aAAA,EAAe,WAAA;AAAA,YACf,IAAA,EAAM,SAAA,GAAY,EAAE,IAAA,EAAM,KAAA,EAAO,OAAO,EAAE,QAAA,EAAU,SAAA,EAAU,EAAE,GAAI,KAAA;AAAA,YACpE,QAAA,EAAU;AAAA;AAAA,SACZ;AAAA,QACC,iCAAiB,GAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,WAAA,CAAY,cAAA,EAAgB,MAAM,CAAA,EAAG,CAAA;AAAA,wBACnE,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,OAAA,kBAAS,GAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,WAAA,EAAa,CAAA;AAAA,YAC5C,MAAA,EAAQ,EAAE,MAAA,EAAQ,MAAA,EAAQ,iBAAiB,KAAA,EAAM;AAAA,YACjD,iBAAA,EAAmB;AAAA;AAAA,SACrB;AAAA,QACC,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,qBACd,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,MAAM,CAAA,CAAE,IAAA;AAAA,YACR,OAAA,EAAS,UAAU,CAAC,CAAA;AAAA,YACpB,MAAA,EAAQ,WAAA,CAAY,CAAA,EAAG,MAAM,CAAA;AAAA,YAC7B,WAAA,EAAa,CAAA;AAAA,YACb,IAAA,EAAM,WAAA,CAAY,CAAA,EAAG,MAAM,CAAA;AAAA,YAC3B,WAAA,EAAa,IAAA;AAAA,YACb,GAAA,EAAK,EAAE,CAAA,EAAG,CAAA,EAAG,IAAA,EAAM,WAAA,CAAY,CAAA,EAAG,MAAM,CAAA,EAAG,WAAA,EAAa,CAAA,EAAG,WAAA,EAAa,CAAA,EAAE;AAAA,YAC1E,MAAM,MAAA,CAAO,MAAA,CAAO,GAAA,CAAI,SAAA,CAAU,CAAC,CAAC,CAAA;AAAA,YACnC,GAAG;AAAA,WAAA;AAAA,UATC,UAAU,CAAC;AAAA,SAWnB,CAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ","file":"RadarChart.js","sourcesContent":["import type { ChartLegendPosition } from './types';\n\n// Recharts draws the axis names outside the outer polygon and does not make\n// room for them, so the radius is sized from the smaller side of the plot less\n// the room the names need (12px text): above and below the polygons, and beside\n// them.\nconst NAME_BAND = 44;\nconst NAME_GAP = 14;\nconst NAME_CHAR = 6.5;\n// What a legend takes from the plot, on the side it sits on.\nconst LEGEND_ROW = 40;\nconst LEGEND_COLUMN = 120;\nconst MIN_SIZE = 40;\n\ntype RadarSizeParams = {\n  /** The height and width of the chart, in pixels. */\n  height: number;\n  width: number;\n  categories: readonly string[];\n  /** The side the legend sits on, if it is drawn. */\n  legend?: ChartLegendPosition;\n};\n\n/**\n * The radius, in pixels, of the outer polygon of a radar: the largest one that\n * leaves room for the axis names around it in a chart of this size.\n */\nexport const radarSize = ({ height, width, categories, legend }: RadarSizeParams): number => {\n  const widest = Math.max(0, ...categories.map((name) => name.length)) * NAME_CHAR;\n  const vertical = height - NAME_BAND - (legend === 'top' || legend === 'bottom' ? LEGEND_ROW : 0);\n  const horizontal =\n    width - 2 * (widest + NAME_GAP) - (legend === 'left' || legend === 'right' ? LEGEND_COLUMN : 0);\n  return Math.max(MIN_SIZE, Math.floor(Math.min(vertical, horizontal) / 2));\n};\n","import {\n  Legend,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart as RechartsRadarChart,\n  Tooltip,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { AXIS, TEXT_SIZE } from './core/axes';\nimport { legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { ChartTooltip } from './core/ChartTooltip';\nimport { BORDER, GRID, MUTED, seriesColor } from './core/colors';\nimport { hasNoData, seriesKey, toRows } from './core/data';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { radarSize } from './radarSize';\nimport { useElementWidth } from './core/useElementWidth';\nimport type { ChartEmptyProps, ChartLegendProps, ChartProps } from './types';\n\nexport type RadarChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps & {\n    /** One polygon per series; one value per category, in the same order. */\n    series: { name: string; data: number[] }[];\n    /** The axes, clockwise from the top. */\n    categories: string[];\n    /** Override the default Cosmos palette. */\n    colors?: string[];\n    /** Format the scale labels and the tooltip values. */\n    formatValue?: (value: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n    /** Top of the scale, e.g. 100 for scores. Default: rounded up from the data. */\n    max?: number;\n    /**\n     * Write the scale on the polygons (0, 20 … 100). Default off: the labels sit on the\n     * polygons and the tooltip gives the values. `max` and `formatValue` still apply.\n     */\n    showScale?: boolean;\n  };\n\nexport const RadarChart = ({\n  series,\n  categories,\n  colors,\n  formatValue,\n  showLegend,\n  legendPosition = 'top',\n  max,\n  showScale = false,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 340,\n  width,\n}: RadarChartProps) => {\n  const hidden = useHiddenSeries();\n  const { ref: box, width: boxWidth } = useElementWidth();\n  const name = ariaLabel ?? `Radar chart: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  const legendVisible = showLegend ?? series.length > 1;\n  // The polygons as large as the box allows, less the room of the axis names\n  // and the legend. A height that is not a number of pixels, or a box not\n  // measured yet, leaves it to a share of the plot.\n  const radius =\n    typeof height === 'number' && boxWidth\n      ? radarSize({\n          height,\n          width: boxWidth,\n          categories,\n          legend: legendVisible ? legendPosition : undefined,\n        })\n      : '70%';\n  return (\n    <div ref={box} style={{ width: width ?? '100%', maxWidth: '100%' }}>\n      <RechartsRadarChart\n        {...frameProps({ height, width: '100%', ariaLabel: name })}\n        data={toRows(categories, series)}\n        outerRadius={radius}\n        margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n      >\n        <PolarGrid stroke={GRID} />\n        <PolarAngleAxis dataKey=\"category\" tick={AXIS.tick} tickLine={false} />\n        <PolarRadiusAxis\n          angle={90}\n          domain={[0, max ?? 'auto']}\n          tickCount={6}\n          tickFormatter={formatValue}\n          tick={showScale ? { fill: MUTED, style: { fontSize: TEXT_SIZE } } : false}\n          axisLine={false}\n        />\n        {legendVisible && <Legend {...legendProps(legendPosition, hidden)} />}\n        <Tooltip\n          content={<ChartTooltip format={formatValue} />}\n          cursor={{ stroke: BORDER, strokeDasharray: '4 4' }}\n          animationDuration={150}\n        />\n        {series.map((s, i) => (\n          <Radar\n            key={seriesKey(i)}\n            name={s.name}\n            dataKey={seriesKey(i)}\n            stroke={seriesColor(i, colors)}\n            strokeWidth={2}\n            fill={seriesColor(i, colors)}\n            fillOpacity={0.15}\n            dot={{ r: 3, fill: seriesColor(i, colors), fillOpacity: 1, strokeWidth: 0 }}\n            hide={hidden.hidden.has(seriesKey(i))}\n            {...ANIMATION}\n          />\n        ))}\n        {children}\n      </RechartsRadarChart>\n    </div>\n  );\n};\n"]}

package/dist/RadialBarChart.cjs

@@ -0,0 +1,99 @@
+"use client";
+'use strict';
+
+var chunkAAYHG7YK_cjs = require('./chunk-AAYHG7YK.cjs');
+var chunkX3YZP5WF_cjs = require('./chunk-X3YZP5WF.cjs');
+var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.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 recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var RingTooltip = ({
+  active,
+  payload,
+  format
+}) => {
+  if (!active || !payload?.length) return null;
+  const rows = payload.map((item) => {
+    const ring = item.payload;
+    return { name: ring.name, value: format(ring.raw), color: ring.fill };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkT3K6Q34U_cjs.TooltipCard, { rows });
+};
+var RadialBarChart = ({
+  series,
+  labels,
+  colors,
+  formatValue = chunkAAYHG7YK_cjs.percent,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const [active, setActive] = react.useState();
+  const name = ariaLabel ?? `Radial bar chart: ${labels.join(", ")}`;
+  if (series.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkSR2ESX3R_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const rings = labels.map((label, i) => ({
+    name: label,
+    value: Math.min(100, Math.max(0, series[i])),
+    raw: series[i],
+    fill: chunkLT3UC65O_cjs.seriesColor(i, colors)
+  }));
+  const ring = active === void 0 ? void 0 : rings[active];
+  const average = Math.round(series.reduce((a, b) => a + b, 0) / series.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.RadialBarChart,
+    {
+      ...chunkSR2ESX3R_cjs.frameProps({ height, width, ariaLabel: name }),
+      data: rings,
+      startAngle: 90,
+      endAngle: -270,
+      innerRadius: "40%",
+      outerRadius: "100%",
+      barCategoryGap: "12%",
+      margin: { top: 0, right: 0, bottom: 0, left: 0 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.PolarAngleAxis, { type: "number", domain: [0, 100], tick: false, axisLine: false }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.PolarRadiusAxis, { type: "category", dataKey: "name", reversed: true, tick: false, axisLine: false }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.RadialBar,
+          {
+            dataKey: "value",
+            background: { fill: chunkLT3UC65O_cjs.TRACK },
+            cornerRadius: 6,
+            onMouseEnter: (_, index) => setActive(index),
+            onMouseLeave: () => setActive(void 0),
+            ...chunkTYQWZR3S_cjs.ANIMATION
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkX3YZP5WF_cjs.CenterText,
+          {
+            value: formatValue(ring ? ring.raw : average),
+            label: ring ? ring.name : "Avg",
+            valueSize: "var(--text-xl, 1.25rem)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: /* @__PURE__ */ jsxRuntime.jsx(RingTooltip, { format: formatValue }),
+            cursor: false,
+            animationDuration: 150
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+exports.RadialBarChart = RadialBarChart;
+//# sourceMappingURL=RadialBarChart.cjs.map
+//# sourceMappingURL=RadialBarChart.cjs.map

package/dist/RadialBarChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RadialBarChart.tsx"],"names":["jsx","TooltipCard","percent","useState","ChartEmpty","seriesColor","jsxs","RechartsRadialBarChart","frameProps","PolarAngleAxis","PolarRadiusAxis","RadialBar","TRACK","ANIMATION","CenterText","Tooltip"],"mappings":"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","file":"RadialBarChart.cjs","sourcesContent":["import { useState } from 'react';\nimport {\n  PolarAngleAxis,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart as RechartsRadialBarChart,\n  Tooltip,\n} from 'recharts';\nimport type { TooltipContentProps } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { TRACK, seriesColor } from './core/colors';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { percent } from './core/gauge';\nimport { CenterText } from './core/radial';\nimport type { ChartEmptyProps, ChartProps } from './types';\n\nexport type RadialBarChartProps = ChartProps &\n  ChartEmptyProps & {\n    series: number[];\n    labels: string[];\n    /** Override the default Cosmos palette. */\n    colors?: string[];\n    /** Format the ring values and their average, on the 0–100 scale of the rings. Default: `78%`. */\n    formatValue?: (value: number) => string;\n  };\n\ntype Ring = { name: string; value: number; raw: number; fill: string };\n\nconst RingTooltip = ({\n  active,\n  payload,\n  format,\n}: Partial<TooltipContentProps> & { format: (value: number) => string }) => {\n  if (!active || !payload?.length) return null;\n  const rows = payload.map((item) => {\n    const ring = item.payload as Ring;\n    return { name: ring.name, value: format(ring.raw), color: ring.fill };\n  });\n  return <TooltipCard rows={rows} />;\n};\n\nexport const RadialBarChart = ({\n  series,\n  labels,\n  colors,\n  formatValue = percent,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width,\n}: RadialBarChartProps) => {\n  // The ring the pointer is on, shown in the center in place of the average.\n  const [active, setActive] = useState<number>();\n  const name = ariaLabel ?? `Radial bar chart: ${labels.join(', ')}`;\n  if (series.length === 0) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  // The arcs stop at the ends of the 0–100 scale; the center and the tooltip give the value.\n  const rings: Ring[] = labels.map((label, i) => ({\n    name: label,\n    value: Math.min(100, Math.max(0, series[i])),\n    raw: series[i],\n    fill: seriesColor(i, colors),\n  }));\n  const ring = active === undefined ? undefined : rings[active];\n  const average = Math.round(series.reduce((a, b) => a + b, 0) / series.length);\n  return (\n    <RechartsRadialBarChart\n      {...frameProps({ height, width, ariaLabel: name })}\n      data={rings}\n      // From the top, clockwise.\n      startAngle={90}\n      endAngle={-270}\n      innerRadius=\"40%\"\n      outerRadius=\"100%\"\n      barCategoryGap=\"12%\"\n      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n    >\n      <PolarAngleAxis type=\"number\" domain={[0, 100]} tick={false} axisLine={false} />\n      {/* The first series is the outer ring. */}\n      <PolarRadiusAxis type=\"category\" dataKey=\"name\" reversed tick={false} axisLine={false} />\n      <RadialBar\n        dataKey=\"value\"\n        background={{ fill: TRACK }}\n        cornerRadius={6}\n        onMouseEnter={(_, index) => setActive(index)}\n        onMouseLeave={() => setActive(undefined)}\n        {...ANIMATION}\n      />\n      <CenterText\n        value={formatValue(ring ? ring.raw : average)}\n        label={ring ? ring.name : 'Avg'}\n        valueSize=\"var(--text-xl, 1.25rem)\"\n      />\n      <Tooltip\n        content={<RingTooltip format={formatValue} />}\n        cursor={false}\n        animationDuration={150}\n      />\n      {children}\n    </RechartsRadialBarChart>\n  );\n};\n"]}

package/dist/RadialBarChart.js

@@ -0,0 +1,97 @@
+"use client";
+import { percent } from './chunk-OCD6JIIX.js';
+import { CenterText } from './chunk-URNXLVSK.js';
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { TooltipCard } from './chunk-VIOSQN4Z.js';
+import { ChartEmpty, frameProps } from './chunk-56WD3OHA.js';
+import { seriesColor, TRACK } from './chunk-UATB2IRY.js';
+import { useState } from 'react';
+import { RadialBarChart as RadialBarChart$1, PolarAngleAxis, PolarRadiusAxis, RadialBar, Tooltip } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var RingTooltip = ({
+  active,
+  payload,
+  format
+}) => {
+  if (!active || !payload?.length) return null;
+  const rows = payload.map((item) => {
+    const ring = item.payload;
+    return { name: ring.name, value: format(ring.raw), color: ring.fill };
+  });
+  return /* @__PURE__ */ jsx(TooltipCard, { rows });
+};
+var RadialBarChart = ({
+  series,
+  labels,
+  colors,
+  formatValue = percent,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const [active, setActive] = useState();
+  const name = ariaLabel ?? `Radial bar chart: ${labels.join(", ")}`;
+  if (series.length === 0) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const rings = labels.map((label, i) => ({
+    name: label,
+    value: Math.min(100, Math.max(0, series[i])),
+    raw: series[i],
+    fill: seriesColor(i, colors)
+  }));
+  const ring = active === void 0 ? void 0 : rings[active];
+  const average = Math.round(series.reduce((a, b) => a + b, 0) / series.length);
+  return /* @__PURE__ */ jsxs(
+    RadialBarChart$1,
+    {
+      ...frameProps({ height, width, ariaLabel: name }),
+      data: rings,
+      startAngle: 90,
+      endAngle: -270,
+      innerRadius: "40%",
+      outerRadius: "100%",
+      barCategoryGap: "12%",
+      margin: { top: 0, right: 0, bottom: 0, left: 0 },
+      children: [
+        /* @__PURE__ */ jsx(PolarAngleAxis, { type: "number", domain: [0, 100], tick: false, axisLine: false }),
+        /* @__PURE__ */ jsx(PolarRadiusAxis, { type: "category", dataKey: "name", reversed: true, tick: false, axisLine: false }),
+        /* @__PURE__ */ jsx(
+          RadialBar,
+          {
+            dataKey: "value",
+            background: { fill: TRACK },
+            cornerRadius: 6,
+            onMouseEnter: (_, index) => setActive(index),
+            onMouseLeave: () => setActive(void 0),
+            ...ANIMATION
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CenterText,
+          {
+            value: formatValue(ring ? ring.raw : average),
+            label: ring ? ring.name : "Avg",
+            valueSize: "var(--text-xl, 1.25rem)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(RingTooltip, { format: formatValue }),
+            cursor: false,
+            animationDuration: 150
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+export { RadialBarChart };
+//# sourceMappingURL=RadialBarChart.js.map
+//# sourceMappingURL=RadialBarChart.js.map

package/dist/RadialBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RadialBarChart.tsx"],"names":["RechartsRadialBarChart"],"mappings":"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","file":"RadialBarChart.js","sourcesContent":["import { useState } from 'react';\nimport {\n  PolarAngleAxis,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart as RechartsRadialBarChart,\n  Tooltip,\n} from 'recharts';\nimport type { TooltipContentProps } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { TRACK, seriesColor } from './core/colors';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { percent } from './core/gauge';\nimport { CenterText } from './core/radial';\nimport type { ChartEmptyProps, ChartProps } from './types';\n\nexport type RadialBarChartProps = ChartProps &\n  ChartEmptyProps & {\n    series: number[];\n    labels: string[];\n    /** Override the default Cosmos palette. */\n    colors?: string[];\n    /** Format the ring values and their average, on the 0–100 scale of the rings. Default: `78%`. */\n    formatValue?: (value: number) => string;\n  };\n\ntype Ring = { name: string; value: number; raw: number; fill: string };\n\nconst RingTooltip = ({\n  active,\n  payload,\n  format,\n}: Partial<TooltipContentProps> & { format: (value: number) => string }) => {\n  if (!active || !payload?.length) return null;\n  const rows = payload.map((item) => {\n    const ring = item.payload as Ring;\n    return { name: ring.name, value: format(ring.raw), color: ring.fill };\n  });\n  return <TooltipCard rows={rows} />;\n};\n\nexport const RadialBarChart = ({\n  series,\n  labels,\n  colors,\n  formatValue = percent,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width,\n}: RadialBarChartProps) => {\n  // The ring the pointer is on, shown in the center in place of the average.\n  const [active, setActive] = useState<number>();\n  const name = ariaLabel ?? `Radial bar chart: ${labels.join(', ')}`;\n  if (series.length === 0) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  // The arcs stop at the ends of the 0–100 scale; the center and the tooltip give the value.\n  const rings: Ring[] = labels.map((label, i) => ({\n    name: label,\n    value: Math.min(100, Math.max(0, series[i])),\n    raw: series[i],\n    fill: seriesColor(i, colors),\n  }));\n  const ring = active === undefined ? undefined : rings[active];\n  const average = Math.round(series.reduce((a, b) => a + b, 0) / series.length);\n  return (\n    <RechartsRadialBarChart\n      {...frameProps({ height, width, ariaLabel: name })}\n      data={rings}\n      // From the top, clockwise.\n      startAngle={90}\n      endAngle={-270}\n      innerRadius=\"40%\"\n      outerRadius=\"100%\"\n      barCategoryGap=\"12%\"\n      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n    >\n      <PolarAngleAxis type=\"number\" domain={[0, 100]} tick={false} axisLine={false} />\n      {/* The first series is the outer ring. */}\n      <PolarRadiusAxis type=\"category\" dataKey=\"name\" reversed tick={false} axisLine={false} />\n      <RadialBar\n        dataKey=\"value\"\n        background={{ fill: TRACK }}\n        cornerRadius={6}\n        onMouseEnter={(_, index) => setActive(index)}\n        onMouseLeave={() => setActive(undefined)}\n        {...ANIMATION}\n      />\n      <CenterText\n        value={formatValue(ring ? ring.raw : average)}\n        label={ring ? ring.name : 'Avg'}\n        valueSize=\"var(--text-xl, 1.25rem)\"\n      />\n      <Tooltip\n        content={<RingTooltip format={formatValue} />}\n        cursor={false}\n        animationDuration={150}\n      />\n      {children}\n    </RechartsRadialBarChart>\n  );\n};\n"]}

package/dist/RangeBarChart.cjs

@@ -0,0 +1,218 @@
+"use client";
+'use strict';
+
+var chunkF2PMFYJ5_cjs = require('./chunk-F2PMFYJ5.cjs');
+var chunkXUGQ6VXO_cjs = require('./chunk-XUGQ6VXO.cjs');
+var chunkRCDTBZC2_cjs = require('./chunk-RCDTBZC2.cjs');
+var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
+var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
+var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
+var chunkK3R7JGOW_cjs = require('./chunk-K3R7JGOW.cjs');
+var chunkSR2ESX3R_cjs = require('./chunk-SR2ESX3R.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var UTC_DATE_TIME = new Intl.DateTimeFormat("en-GB", {
+  day: "2-digit",
+  month: "short",
+  hour: "2-digit",
+  minute: "2-digit",
+  hourCycle: "h23",
+  timeZone: "UTC"
+});
+var UTC_DAY = new Intl.DateTimeFormat("en-GB", {
+  day: "2-digit",
+  month: "short",
+  timeZone: "UTC"
+});
+var UTC_TIME = new Intl.DateTimeFormat("en-GB", {
+  hour: "2-digit",
+  minute: "2-digit",
+  hourCycle: "h23",
+  timeZone: "UTC"
+});
+var defaultFormatDate = (timestamp) => UTC_DATE_TIME.format(timestamp);
+var HOUR = 36e5;
+var DAY = 24 * HOUR;
+var STEPS = [HOUR, 2 * HOUR, 3 * HOUR, 6 * HOUR, 12 * HOUR, DAY, 2 * DAY, 7 * DAY, 30 * DAY];
+var timeTicks = (min, max) => {
+  const step = STEPS.find((s) => (max - min) / s <= 8) ?? STEPS[STEPS.length - 1];
+  const first = Math.floor(min / step) * step;
+  const last = Math.max(Math.ceil(max / step) * step, first + step);
+  return Array.from({ length: Math.round((last - first) / step) + 1 }, (_, i) => first + i * step);
+};
+var tickLabel = (timestamp) => timestamp % DAY === 0 ? UTC_DAY.format(timestamp) : UTC_TIME.format(timestamp);
+var GROUP_KEY = "all";
+var rangesShape = (key, colors, visible) => (props) => {
+  const { x, y, width, height } = props;
+  const row = props.payload;
+  const bounds = row[key];
+  if (!bounds) return null;
+  const [low, high] = bounds;
+  const span = high - low || 1;
+  const lane = Math.abs(height);
+  const top = Math.min(y, y + height);
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: row.ranges.filter((r) => visible(r.series) && (key === GROUP_KEY || key === chunkK3R7JGOW_cjs.seriesKey(r.series))).map((r, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      x: x + (r.start - low) / span * width,
+      y: top,
+      width: Math.max((r.end - r.start) / span * width, 2),
+      height: lane,
+      rx: 3,
+      fill: colors(r.series)
+    },
+    i
+  )) });
+};
+var SeriesLegend = ({
+  entries,
+  hidden,
+  onToggle,
+  column
+}) => /* @__PURE__ */ jsxRuntime.jsx(chunkRCDTBZC2_cjs.ChartLegend, { payload: entries, hidden, onToggle, column });
+var RangeBarChart = ({
+  series,
+  groupRows = false,
+  colors,
+  formatDate = defaultFormatDate,
+  xTitle,
+  yTitle,
+  referenceLines,
+  referenceBands,
+  showLegend,
+  legendPosition = "top",
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const hidden = chunkRCDTBZC2_cjs.useHiddenSeries();
+  const axis = chunkG4WOPX4D_cjs.useAxis();
+  const categoryKeys = chunkF2PMFYJ5_cjs.useCategoryKeys("vertical");
+  const name = ariaLabel ?? `Range chart: ${series.map((s) => s.name).join(", ")}`;
+  if (chunkK3R7JGOW_cjs.hasNoData(series)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkSR2ESX3R_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const categories = [...new Set(series.flatMap((s) => s.data.map((p) => p.x)))];
+  const all = series.flatMap((s) => s.data.flatMap((p) => p.y));
+  const ticks = timeTicks(Math.min(...all), Math.max(...all));
+  const color = (index) => chunkLT3UC65O_cjs.seriesColor(index, colors);
+  const visible = (index) => !hidden.hidden.has(chunkK3R7JGOW_cjs.seriesKey(index));
+  const rows = categories.map((category) => {
+    const ranges = series.flatMap(
+      (s, index) => s.data.filter((p) => p.x === category).map((p) => ({ series: index, start: p.y[0], end: p.y[1] }))
+    );
+    const bounds = (of) => of.length > 0 ? [Math.min(...of.map((r) => r.start)), Math.max(...of.map((r) => r.end))] : void 0;
+    return {
+      category,
+      ranges,
+      [GROUP_KEY]: bounds(ranges),
+      ...Object.fromEntries(
+        series.map((_, index) => [
+          chunkK3R7JGOW_cjs.seriesKey(index),
+          bounds(ranges.filter((r) => r.series === index))
+        ])
+      )
+    };
+  });
+  const tooltip = ({ active, payload, label }) => {
+    const row = payload?.[0]?.payload;
+    if (!active || !row) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkT3K6Q34U_cjs.TooltipCard,
+      {
+        title: label,
+        rows: row.ranges.filter((r) => visible(r.series)).map((r) => ({
+          name: series[r.series].name,
+          value: `${formatDate(r.start)} \u2013 ${formatDate(r.end)}`,
+          color: color(r.series)
+        }))
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.BarChart,
+    {
+      ref: categoryKeys,
+      ...chunkSR2ESX3R_cjs.frameProps({ height, width, ariaLabel: name }),
+      data: rows,
+      layout: "vertical",
+      margin: { top: 4, right: 16, bottom: 0, left: 0 },
+      barGap: 2,
+      barCategoryGap: "20%",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { stroke: chunkLT3UC65O_cjs.GRID, strokeDasharray: "4 4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            type: "number",
+            domain: [ticks[0], ticks[ticks.length - 1]],
+            ticks,
+            tickFormatter: tickLabel,
+            ...axis,
+            ...chunkG4WOPX4D_cjs.xAxisTitle(xTitle)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { type: "category", dataKey: "category", width: "auto", ...axis, ...chunkG4WOPX4D_cjs.yAxisTitle(yTitle) }),
+        (showLegend ?? series.length > 1) && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Legend,
+          {
+            ...chunkRCDTBZC2_cjs.legendProps(legendPosition, hidden),
+            content: /* @__PURE__ */ jsxRuntime.jsx(
+              SeriesLegend,
+              {
+                entries: series.map((s, index) => ({
+                  value: s.name,
+                  type: "circle",
+                  color: color(index),
+                  dataKey: chunkK3R7JGOW_cjs.seriesKey(index)
+                })),
+                hidden: hidden.hidden,
+                onToggle: hidden.toggle,
+                column: legendPosition === "left" || legendPosition === "right"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: tooltip,
+            cursor: { fill: chunkLT3UC65O_cjs.BORDER, fillOpacity: 0.35, radius: 8 },
+            animationDuration: 150
+          }
+        ),
+        groupRows ? /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            name: "Ranges",
+            dataKey: GROUP_KEY,
+            maxBarSize: 32,
+            shape: rangesShape(GROUP_KEY, color, visible),
+            ...chunkTYQWZR3S_cjs.ANIMATION
+          }
+        ) : series.map((s, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            name: s.name,
+            dataKey: chunkK3R7JGOW_cjs.seriesKey(index),
+            maxBarSize: 28,
+            shape: rangesShape(chunkK3R7JGOW_cjs.seriesKey(index), color, visible),
+            hide: !visible(index),
+            ...chunkTYQWZR3S_cjs.ANIMATION
+          },
+          chunkK3R7JGOW_cjs.seriesKey(index)
+        )),
+        chunkXUGQ6VXO_cjs.referenceMarks({ referenceLines, referenceBands, axis: "x" }),
+        children
+      ]
+    }
+  );
+};
+
+exports.RangeBarChart = RangeBarChart;
+//# sourceMappingURL=RangeBarChart.cjs.map
+//# sourceMappingURL=RangeBarChart.cjs.map

package/dist/RangeBarChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RangeBarChart.tsx"],"names":["jsx","seriesKey","ChartLegend","useHiddenSeries","useAxis","useCategoryKeys","hasNoData","ChartEmpty","seriesColor","TooltipCard","jsxs","BarChart","frameProps","CartesianGrid","GRID","XAxis","xAxisTitle","YAxis","yAxisTitle","Legend","legendProps","Tooltip","BORDER","Bar","ANIMATION","referenceMarks"],"mappings":"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","file":"RangeBarChart.cjs","sourcesContent":["import type { ComponentProps } from 'react';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Tooltip,\n  XAxis,\n  YAxis,\n  type BarShapeProps,\n  type LegendPayload,\n  type TooltipContentProps,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { useCategoryKeys } from './core/categoryKeys';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { ChartLegend, legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { BORDER, GRID, seriesColor } from './core/colors';\nimport { hasNoData, seriesKey } from './core/data';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { referenceMarks } from './core/reference';\nimport type {\n  ChartAxisTitleProps,\n  ChartEmptyProps,\n  ChartLegendProps,\n  ChartProps,\n  ChartReferenceProps,\n} from './types';\n\nexport type RangeBarPoint = {\n  /** Row label: the service, rack or host the range belongs to. */\n  x: string;\n  /** Start and end, as timestamps in milliseconds. */\n  y: [number, number];\n};\n\nexport type RangeBarChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartAxisTitleProps &\n  ChartReferenceProps & {\n    /** One series per kind of range (maintenance, deploy, incident…), drawn on a time axis. */\n    series: { name: string; data: RangeBarPoint[] }[];\n    /** Draw every series of a row on one lane, instead of one lane per series. */\n    groupRows?: boolean;\n    /** Override the default Cosmos palette. */\n    colors?: string[];\n    /** Format the start and end times in the tooltip. Default: `14 Oct, 02:00`, in UTC like the axis. */\n    formatDate?: (timestamp: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n  };\n\n// The axis labels are UTC, so the default tooltip is too.\nconst UTC_DATE_TIME = new Intl.DateTimeFormat('en-GB', {\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n  hourCycle: 'h23',\n  timeZone: 'UTC',\n});\nconst UTC_DAY = new Intl.DateTimeFormat('en-GB', {\n  day: '2-digit',\n  month: 'short',\n  timeZone: 'UTC',\n});\nconst UTC_TIME = new Intl.DateTimeFormat('en-GB', {\n  hour: '2-digit',\n  minute: '2-digit',\n  hourCycle: 'h23',\n  timeZone: 'UTC',\n});\n\nconst defaultFormatDate = (timestamp: number) => UTC_DATE_TIME.format(timestamp);\n\nconst HOUR = 3_600_000;\nconst DAY = 24 * HOUR;\nconst STEPS = [HOUR, 2 * HOUR, 3 * HOUR, 6 * HOUR, 12 * HOUR, DAY, 2 * DAY, 7 * DAY, 30 * DAY];\n\n/** Round UTC ticks that cover `[min, max]`: the first step that leaves at most eight of them. */\nconst timeTicks = (min: number, max: number) => {\n  const step = STEPS.find((s) => (max - min) / s <= 8) ?? STEPS[STEPS.length - 1];\n  const first = Math.floor(min / step) * step;\n  const last = Math.max(Math.ceil(max / step) * step, first + step);\n  return Array.from({ length: Math.round((last - first) / step) + 1 }, (_, i) => first + i * step);\n};\n\n/** A tick label: the day at midnight, the time otherwise. */\nconst tickLabel = (timestamp: number) =>\n  timestamp % DAY === 0 ? UTC_DAY.format(timestamp) : UTC_TIME.format(timestamp);\n\ntype Range = { series: number; start: number; end: number };\ntype Row = { category: string; ranges: Range[] } & Record<string, unknown>;\n\nconst GROUP_KEY = 'all';\n\n// A bar's value is the span from the first start to the last end of what it\n// draws in a row, so Recharts sizes and places it; the ranges inside are drawn\n// by the shape, at the same scale.\nconst rangesShape =\n  (key: string, colors: (series: number) => string, visible: (series: number) => boolean) =>\n  (props: BarShapeProps) => {\n    const { x, y, width, height } = props;\n    const row = props.payload as Row;\n    const bounds = row[key] as [number, number] | undefined;\n    if (!bounds) return null;\n    const [low, high] = bounds;\n    const span = high - low || 1;\n    const lane = Math.abs(height);\n    const top = Math.min(y, y + height);\n    return (\n      <g>\n        {row.ranges\n          .filter((r) => visible(r.series) && (key === GROUP_KEY || key === seriesKey(r.series)))\n          .map((r, i) => (\n            <rect\n              key={i}\n              x={x + ((r.start - low) / span) * width}\n              y={top}\n              width={Math.max(((r.end - r.start) / span) * width, 2)}\n              height={lane}\n              rx={3}\n              fill={colors(r.series)}\n            />\n          ))}\n      </g>\n    );\n  };\n\n// One legend entry per series, whichever way the bars are drawn: Recharts' own\n// entries (one per bar) are left aside.\nconst SeriesLegend = ({\n  entries,\n  hidden,\n  onToggle,\n  column,\n}: { entries: LegendPayload[] } & Omit<ComponentProps<typeof ChartLegend>, 'payload'>) => (\n  <ChartLegend payload={entries} hidden={hidden} onToggle={onToggle} column={column} />\n);\n\nexport const RangeBarChart = ({\n  series,\n  groupRows = false,\n  colors,\n  formatDate = defaultFormatDate,\n  xTitle,\n  yTitle,\n  referenceLines,\n  referenceBands,\n  showLegend,\n  legendPosition = 'top',\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width,\n}: RangeBarChartProps) => {\n  const hidden = useHiddenSeries();\n  const axis = useAxis();\n  // Recharts names the layout after the axis the categories sit on.\n  const categoryKeys = useCategoryKeys('vertical');\n  const name = ariaLabel ?? `Range chart: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n\n  const categories = [...new Set(series.flatMap((s) => s.data.map((p) => p.x)))];\n  const all = series.flatMap((s) => s.data.flatMap((p) => p.y));\n  const ticks = timeTicks(Math.min(...all), Math.max(...all));\n  const color = (index: number) => seriesColor(index, colors);\n  const visible = (index: number) => !hidden.hidden.has(seriesKey(index));\n\n  const rows: Row[] = categories.map((category) => {\n    const ranges = series.flatMap((s, index) =>\n      s.data\n        .filter((p) => p.x === category)\n        .map((p) => ({ series: index, start: p.y[0], end: p.y[1] }))\n    );\n    const bounds = (of: Range[]) =>\n      of.length > 0\n        ? ([Math.min(...of.map((r) => r.start)), Math.max(...of.map((r) => r.end))] as const)\n        : undefined;\n    return {\n      category,\n      ranges,\n      [GROUP_KEY]: bounds(ranges),\n      ...Object.fromEntries(\n        series.map((_, index) => [\n          seriesKey(index),\n          bounds(ranges.filter((r) => r.series === index)),\n        ])\n      ),\n    };\n  });\n\n  const tooltip = ({ active, payload, label }: Partial<TooltipContentProps>) => {\n    const row = payload?.[0]?.payload as Row | undefined;\n    if (!active || !row) return null;\n    return (\n      <TooltipCard\n        title={label}\n        rows={row.ranges\n          .filter((r) => visible(r.series))\n          .map((r) => ({\n            name: series[r.series].name,\n            value: `${formatDate(r.start)} – ${formatDate(r.end)}`,\n            color: color(r.series),\n          }))}\n      />\n    );\n  };\n\n  return (\n    <BarChart\n      ref={categoryKeys}\n      {...frameProps({ height, width, ariaLabel: name })}\n      data={rows}\n      layout=\"vertical\"\n      margin={{ top: 4, right: 16, bottom: 0, left: 0 }}\n      barGap={2}\n      barCategoryGap=\"20%\"\n    >\n      {/* Time runs left to right: vertical grid lines, plus a line between rows. */}\n      <CartesianGrid stroke={GRID} strokeDasharray=\"4 4\" />\n      <XAxis\n        type=\"number\"\n        domain={[ticks[0], ticks[ticks.length - 1]]}\n        ticks={ticks}\n        tickFormatter={tickLabel}\n        {...axis}\n        {...xAxisTitle(xTitle)}\n      />\n      <YAxis type=\"category\" dataKey=\"category\" width=\"auto\" {...axis} {...yAxisTitle(yTitle)} />\n      {(showLegend ?? series.length > 1) && (\n        <Legend\n          {...legendProps(legendPosition, hidden)}\n          content={\n            <SeriesLegend\n              entries={series.map((s, index) => ({\n                value: s.name,\n                type: 'circle',\n                color: color(index),\n                dataKey: seriesKey(index),\n              }))}\n              hidden={hidden.hidden}\n              onToggle={hidden.toggle}\n              column={legendPosition === 'left' || legendPosition === 'right'}\n            />\n          }\n        />\n      )}\n      <Tooltip\n        content={tooltip}\n        cursor={{ fill: BORDER, fillOpacity: 0.35, radius: 8 }}\n        animationDuration={150}\n      />\n      {groupRows ? (\n        <Bar\n          name=\"Ranges\"\n          dataKey={GROUP_KEY}\n          maxBarSize={32}\n          shape={rangesShape(GROUP_KEY, color, visible)}\n          {...ANIMATION}\n        />\n      ) : (\n        series.map((s, index) => (\n          <Bar\n            key={seriesKey(index)}\n            name={s.name}\n            dataKey={seriesKey(index)}\n            maxBarSize={28}\n            shape={rangesShape(seriesKey(index), color, visible)}\n            hide={!visible(index)}\n            {...ANIMATION}\n          />\n        ))\n      )}\n      {referenceMarks({ referenceLines, referenceBands, axis: 'x' })}\n      {children}\n    </BarChart>\n  );\n};\n"]}