@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/BarChart.js

@@ -0,0 +1,135 @@
+"use client";
+import { roundedBarShape, isOuterInStack } from './chunk-GDZLYYL2.js';
+import { useCategoryKeys } from './chunk-FUZW3H5X.js';
+import { referenceMarks } from './chunk-SGG7XKOY.js';
+import { trimLabel, categoryAxis } from './chunk-HMH6DI7U.js';
+import { useHiddenSeries, legendProps } from './chunk-6ALKZLN2.js';
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { useAxis, GRID_PROPS, xAxisTitle, yAxisTitle } from './chunk-RILUG7JB.js';
+import { ChartTooltip } from './chunk-VIOSQN4Z.js';
+import { hasNoData, seriesKey, toRows } from './chunk-UJIV5PVI.js';
+import { ChartEmpty, frameProps } from './chunk-3N43QT36.js';
+import { BORDER, seriesColor } from './chunk-UATB2IRY.js';
+import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Legend, Tooltip, Bar } from 'recharts';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var BarChart = ({
+  series,
+  categories,
+  orientation = "vertical",
+  stacked = false,
+  colors,
+  formatValue,
+  xTitle,
+  yTitle,
+  referenceLines,
+  referenceBands,
+  showLegend,
+  legendPosition = "top",
+  borderRadius = 4,
+  colorByValue,
+  distributed = false,
+  negativeColor,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const hidden = useHiddenSeries();
+  const axis = useAxis();
+  const categoryKeys = useCategoryKeys(orientation === "horizontal" ? "vertical" : "horizontal");
+  const name = ariaLabel ?? `Bar chart: ${series.map((s) => s.name).join(", ")}`;
+  if (hasNoData(series)) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const horizontal = orientation === "horizontal";
+  const layout = horizontal ? "vertical" : "horizontal";
+  const fillFor = colorByValue || negativeColor !== void 0 || distributed ? (value, index) => colorByValue?.(value, index) ?? (negativeColor !== void 0 && value < 0 ? negativeColor : distributed ? seriesColor(index, colors) : void 0) : void 0;
+  const shown = series.map((_, i) => seriesKey(i)).filter((key) => !hidden.hidden.has(key));
+  return /* @__PURE__ */ jsxs(
+    BarChart$1,
+    {
+      ref: categoryKeys,
+      ...frameProps({ height, width, ariaLabel: name }),
+      data: toRows(categories, series),
+      layout,
+      stackOffset: "sign",
+      margin: { top: 4, right: 8, bottom: 0, left: 0 },
+      barGap: 4,
+      barCategoryGap: "22%",
+      children: [
+        /* @__PURE__ */ jsx(
+          CartesianGrid,
+          {
+            ...GRID_PROPS,
+            ...horizontal ? { horizontal: false, vertical: true } : {}
+          }
+        ),
+        horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(XAxis, { type: "number", tickFormatter: formatValue, ...axis, ...xAxisTitle(xTitle) }),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              type: "category",
+              dataKey: "category",
+              width: "auto",
+              tickFormatter: trimLabel,
+              ...axis,
+              ...yAxisTitle(yTitle)
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "category",
+              ...axis,
+              ...xAxisTitle(xTitle),
+              ...categoryAxis(categories, xTitle)
+            }
+          ),
+          /* @__PURE__ */ jsx(YAxis, { width: "auto", tickFormatter: formatValue, ...axis, ...yAxisTitle(yTitle) })
+        ] }),
+        (showLegend ?? series.length > 1) && /* @__PURE__ */ jsx(Legend, { ...legendProps(legendPosition, hidden) }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(ChartTooltip, { format: formatValue, colorOf: fillFor }),
+            cursor: { fill: BORDER, fillOpacity: 0.35, radius: 8 },
+            animationDuration: 150
+          }
+        ),
+        series.map((s, i) => {
+          const key = seriesKey(i);
+          return /* @__PURE__ */ jsx(
+            Bar,
+            {
+              name: s.name,
+              dataKey: key,
+              fill: seriesColor(i, colors),
+              stackId: stacked ? "stack" : void 0,
+              maxBarSize: 44,
+              shape: roundedBarShape({
+                layout,
+                radius: borderRadius,
+                dataKey: key,
+                isOuter: stacked ? isOuterInStack(shown, key) : void 0,
+                fillFor
+              }),
+              hide: hidden.hidden.has(key),
+              ...ANIMATION
+            },
+            key
+          );
+        }),
+        referenceMarks({ referenceLines, referenceBands, axis: horizontal ? "x" : "y" }),
+        children
+      ]
+    }
+  );
+};
+
+export { BarChart };
+//# sourceMappingURL=BarChart.js.map
+//# sourceMappingURL=BarChart.js.map

package/dist/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/BarChart.tsx"],"names":["RechartsBarChart"],"mappings":"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","file":"BarChart.js","sourcesContent":["import {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  Legend,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { GRID_PROPS, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { categoryAxis, trimLabel } from './core/categoryAxis';\nimport { useCategoryKeys } from './core/categoryKeys';\nimport { ChartTooltip } from './core/ChartTooltip';\nimport { legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { BORDER, seriesColor } from './core/colors';\nimport { hasNoData, seriesKey, toRows } from './core/data';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { referenceMarks } from './core/reference';\nimport { isOuterInStack, roundedBarShape } from './core/roundedBar';\nimport type {\n  ChartAxisTitleProps,\n  ChartEmptyProps,\n  ChartLegendProps,\n  ChartProps,\n  ChartReferenceProps,\n} from './types';\n\nexport type BarChartOrientation = 'vertical' | 'horizontal';\n\nexport type BarChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartAxisTitleProps &\n  ChartReferenceProps & {\n    series: { name: string; data: number[] }[];\n    categories: (string | number)[];\n    /** `vertical` (default) draws bars upward; `horizontal` draws them rightward. */\n    orientation?: BarChartOrientation;\n    /** Stack multi-series bars instead of grouping them side-by-side. */\n    stacked?: boolean;\n    /** Override the default Cosmos palette. */\n    colors?: string[];\n    /** Format the numeric axis labels and the tooltip values. */\n    formatValue?: (value: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n    /** Radius, in px, of the end of a bar away from the axis; only the outer end of a stack is rounded. Default 4. */\n    borderRadius?: number;\n    /**\n     * The color of a bar from its value and the index of its category, for a threshold or a\n     * ranking. Return `undefined` to keep the color the other rules give. Applies to every\n     * series; the tooltip chip of a bar follows it, the legend keeps the series color.\n     */\n    colorByValue?: (value: number, index: number) => string | undefined;\n    /** One palette color per category (`colors` cycles), instead of one per series. For a single series. */\n    distributed?: boolean;\n    /** The color of the bars below zero, for diverging bars. `colorByValue` wins over it. */\n    negativeColor?: string;\n  };\n\nexport const BarChart = ({\n  series,\n  categories,\n  orientation = 'vertical',\n  stacked = false,\n  colors,\n  formatValue,\n  xTitle,\n  yTitle,\n  referenceLines,\n  referenceBands,\n  showLegend,\n  legendPosition = 'top',\n  borderRadius = 4,\n  colorByValue,\n  distributed = false,\n  negativeColor,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width,\n}: BarChartProps) => {\n  const hidden = useHiddenSeries();\n  const axis = useAxis();\n  // Recharts names the layout after the axis the categories sit on.\n  const categoryKeys = useCategoryKeys(orientation === 'horizontal' ? 'vertical' : 'horizontal');\n  const name = ariaLabel ?? `Bar 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 horizontal = orientation === 'horizontal';\n  // Recharts names the layout after the axis the categories sit on.\n  const layout = horizontal ? 'vertical' : 'horizontal';\n  // A bar's own color, in order of precedence: colorByValue, negativeColor, distributed.\n  const fillFor =\n    colorByValue || negativeColor !== undefined || distributed\n      ? (value: number, index: number) =>\n          colorByValue?.(value, index) ??\n          (negativeColor !== undefined && value < 0\n            ? negativeColor\n            : distributed\n              ? seriesColor(index, colors)\n              : undefined)\n      : undefined;\n  const shown = series.map((_, i) => seriesKey(i)).filter((key) => !hidden.hidden.has(key));\n  return (\n    <RechartsBarChart\n      ref={categoryKeys}\n      {...frameProps({ height, width, ariaLabel: name })}\n      data={toRows(categories, series)}\n      layout={layout}\n      // Stacks of both signs: the negative values stack down from zero, apart from the positive ones.\n      stackOffset=\"sign\"\n      margin={{ top: 4, right: 8, bottom: 0, left: 0 }}\n      barGap={4}\n      barCategoryGap=\"22%\"\n    >\n      <CartesianGrid\n        {...GRID_PROPS}\n        {...(horizontal ? { horizontal: false, vertical: true } : {})}\n      />\n      {horizontal ? (\n        <>\n          <XAxis type=\"number\" tickFormatter={formatValue} {...axis} {...xAxisTitle(xTitle)} />\n          <YAxis\n            type=\"category\"\n            dataKey=\"category\"\n            width=\"auto\"\n            tickFormatter={trimLabel}\n            {...axis}\n            {...yAxisTitle(yTitle)}\n          />\n        </>\n      ) : (\n        <>\n          <XAxis\n            dataKey=\"category\"\n            {...axis}\n            {...xAxisTitle(xTitle)}\n            {...categoryAxis(categories, xTitle)}\n          />\n          <YAxis width=\"auto\" tickFormatter={formatValue} {...axis} {...yAxisTitle(yTitle)} />\n        </>\n      )}\n      {(showLegend ?? series.length > 1) && <Legend {...legendProps(legendPosition, hidden)} />}\n      <Tooltip\n        content={<ChartTooltip format={formatValue} colorOf={fillFor} />}\n        cursor={{ fill: BORDER, fillOpacity: 0.35, radius: 8 }}\n        animationDuration={150}\n      />\n      {series.map((s, i) => {\n        const key = seriesKey(i);\n        return (\n          <Bar\n            key={key}\n            name={s.name}\n            dataKey={key}\n            fill={seriesColor(i, colors)}\n            stackId={stacked ? 'stack' : undefined}\n            maxBarSize={44}\n            shape={roundedBarShape({\n              layout,\n              radius: borderRadius,\n              dataKey: key,\n              isOuter: stacked ? isOuterInStack(shown, key) : undefined,\n              fillFor,\n            })}\n            hide={hidden.hidden.has(key)}\n            {...ANIMATION}\n          />\n        );\n      })}\n      {referenceMarks({ referenceLines, referenceBands, axis: horizontal ? 'x' : 'y' })}\n      {children}\n    </RechartsBarChart>\n  );\n};\n"]}

package/dist/BoxPlotChart.cjs

@@ -0,0 +1,214 @@
+"use client";
+'use strict';
+
+var chunkF2PMFYJ5_cjs = require('./chunk-F2PMFYJ5.cjs');
+var chunkZ4LZFMDH_cjs = require('./chunk-Z4LZFMDH.cjs');
+var chunk6BKLL7LZ_cjs = require('./chunk-6BKLL7LZ.cjs');
+var chunkGZRMVE4X_cjs = require('./chunk-GZRMVE4X.cjs');
+var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
+var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
+var chunkK3R7JGOW_cjs = require('./chunk-K3R7JGOW.cjs');
+var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ROWS = [
+  ["Max", 4],
+  ["Q3", 3],
+  ["Median", 2],
+  ["Q1", 1],
+  ["Min", 0]
+];
+var summaryKey = (index) => `box${index}`;
+var boxShape = (index, color, horizontal) => (props) => {
+  const { x, y, width, height } = props;
+  const row = props.payload;
+  const summary = row[summaryKey(index)];
+  if (!summary) return null;
+  const [min, q1, median, q3, max] = summary;
+  const span = max - min || 1;
+  const left = Math.min(x, x + width);
+  const top = Math.min(y, y + height);
+  const w = Math.abs(width);
+  const h = Math.abs(height);
+  const at = (v) => horizontal ? left + (v - min) / span * w : top + (max - v) / span * h;
+  const mid = horizontal ? top + h / 2 : left + w / 2;
+  const size = horizontal ? h : w;
+  const cap = size * 0.25;
+  const point = (value, across) => horizontal ? { x: at(value), y: across } : { x: across, y: at(value) };
+  const line = (from, to, key, wide = 1.5) => /* @__PURE__ */ jsxRuntime.jsx("line", { x1: from.x, y1: from.y, x2: to.x, y2: to.y, stroke: color, strokeWidth: wide }, key);
+  const [boxStart, boxEnd] = [at(q1), at(q3)];
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    line(point(min, mid), point(q1, mid), "lower"),
+    line(point(q3, mid), point(max, mid), "upper"),
+    line(point(min, mid - cap), point(min, mid + cap), "min"),
+    line(point(max, mid - cap), point(max, mid + cap), "max"),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: horizontal ? Math.min(boxStart, boxEnd) : mid - size / 2,
+        y: horizontal ? mid - size / 2 : Math.min(boxStart, boxEnd),
+        width: horizontal ? Math.abs(boxEnd - boxStart) : size,
+        height: horizontal ? size : Math.abs(boxEnd - boxStart),
+        rx: 2,
+        fill: color,
+        fillOpacity: 0.35,
+        stroke: color,
+        strokeWidth: 1.5
+      }
+    ),
+    line(point(median, mid - size / 2), point(median, mid + size / 2), "median", 2.5)
+  ] });
+};
+var BoxPlotChart = ({
+  series,
+  categories,
+  orientation = "vertical",
+  colors,
+  formatValue = String,
+  xTitle,
+  yTitle,
+  referenceLines,
+  referenceBands,
+  showLegend,
+  legendPosition = "top",
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const hidden = chunkGZRMVE4X_cjs.useHiddenSeries();
+  const axis = chunkRLHGPHC7_cjs.useAxis();
+  const categoryKeys = chunkF2PMFYJ5_cjs.useCategoryKeys(orientation === "horizontal" ? "vertical" : "horizontal");
+  const name = ariaLabel ?? `Box plot: ${series.map((s) => s.name).join(", ")}`;
+  if (chunkK3R7JGOW_cjs.hasNoData(series)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const horizontal = orientation === "horizontal";
+  const rows = categories.map((category, i) => ({
+    category,
+    ...Object.fromEntries(
+      series.flatMap((s, index) => {
+        const summary = s.data[i];
+        return summary ? [
+          [summaryKey(index), summary],
+          [chunkK3R7JGOW_cjs.seriesKey(index), [summary[0], summary[4]]]
+        ] : [];
+      })
+    )
+  }));
+  const tooltip = ({ active, payload, label }) => {
+    const row = payload?.[0]?.payload;
+    if (!active || !row) return null;
+    const lines = series.flatMap((s, index) => {
+      const summary = row[summaryKey(index)];
+      if (!summary || hidden.hidden.has(chunkK3R7JGOW_cjs.seriesKey(index))) return [];
+      const color = chunkLT3UC65O_cjs.seriesColor(index, colors);
+      return [
+        ...series.length > 1 ? [{ name: s.name, value: "", color }] : [],
+        ...ROWS.map(([title, at]) => ({
+          name: title,
+          value: formatValue(summary[at]),
+          color: series.length > 1 ? "transparent" : color
+        }))
+      ];
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkT3K6Q34U_cjs.TooltipCard, { title: label, rows: lines });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.BarChart,
+    {
+      ref: categoryKeys,
+      ...chunk6NRRABPF_cjs.frameProps({ height, width, ariaLabel: name }),
+      data: rows,
+      layout: horizontal ? "vertical" : "horizontal",
+      margin: { top: 4, right: 12, bottom: 0, left: 0 },
+      barGap: 4,
+      barCategoryGap: "22%",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.CartesianGrid,
+          {
+            ...chunkRLHGPHC7_cjs.GRID_PROPS,
+            ...horizontal ? { horizontal: false, vertical: true } : {}
+          }
+        ),
+        horizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.XAxis,
+            {
+              type: "number",
+              domain: ["auto", "auto"],
+              tickFormatter: formatValue,
+              ...axis,
+              ...chunkRLHGPHC7_cjs.xAxisTitle(xTitle)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              type: "category",
+              dataKey: "category",
+              width: "auto",
+              tickFormatter: chunk6BKLL7LZ_cjs.trimLabel,
+              ...axis,
+              ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle)
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.XAxis,
+            {
+              dataKey: "category",
+              ...axis,
+              ...chunkRLHGPHC7_cjs.xAxisTitle(xTitle),
+              ...chunk6BKLL7LZ_cjs.categoryAxis(categories, xTitle)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              type: "number",
+              domain: ["auto", "auto"],
+              width: "auto",
+              tickFormatter: formatValue,
+              ...axis,
+              ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle)
+            }
+          )
+        ] }),
+        (showLegend ?? series.length > 1) && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { ...chunkGZRMVE4X_cjs.legendProps(legendPosition, hidden) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: tooltip,
+            cursor: { fill: chunkLT3UC65O_cjs.BORDER, fillOpacity: 0.35, radius: 8 },
+            animationDuration: 150
+          }
+        ),
+        series.map((s, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            name: s.name,
+            dataKey: chunkK3R7JGOW_cjs.seriesKey(index),
+            fill: chunkLT3UC65O_cjs.seriesColor(index, colors),
+            maxBarSize: 56,
+            shape: boxShape(index, chunkLT3UC65O_cjs.seriesColor(index, colors), horizontal),
+            hide: hidden.hidden.has(chunkK3R7JGOW_cjs.seriesKey(index)),
+            ...chunkTYQWZR3S_cjs.ANIMATION
+          },
+          chunkK3R7JGOW_cjs.seriesKey(index)
+        )),
+        chunkZ4LZFMDH_cjs.referenceMarks({ referenceLines, referenceBands, axis: horizontal ? "x" : "y" }),
+        children
+      ]
+    }
+  );
+};
+
+exports.BoxPlotChart = BoxPlotChart;
+//# sourceMappingURL=BoxPlotChart.cjs.map
+//# sourceMappingURL=BoxPlotChart.cjs.map

package/dist/BoxPlotChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/BoxPlotChart.tsx"],"names":["jsx","useHiddenSeries","useAxis","useCategoryKeys","hasNoData","ChartEmpty","seriesKey","seriesColor","TooltipCard","jsxs","BarChart","frameProps","CartesianGrid","GRID_PROPS","Fragment","XAxis","xAxisTitle","YAxis","trimLabel","yAxisTitle","categoryAxis","Legend","legendProps","Tooltip","BORDER","Bar","ANIMATION","referenceMarks"],"mappings":"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","file":"BoxPlotChart.cjs","sourcesContent":["import {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Tooltip,\n  XAxis,\n  YAxis,\n  type BarShapeProps,\n  type TooltipContentProps,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { GRID_PROPS, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { categoryAxis, trimLabel } from './core/categoryAxis';\nimport { useCategoryKeys } from './core/categoryKeys';\nimport { TooltipCard, type TooltipRow } from './core/ChartTooltip';\nimport { legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { BORDER, 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 BoxPlotChartOrientation = 'vertical' | 'horizontal';\n\n/** One box, the five-number summary of a distribution. */\nexport type BoxPlotSummary = [min: number, q1: number, median: number, q3: number, max: number];\n\nexport type BoxPlotChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartAxisTitleProps &\n  ChartReferenceProps & {\n    /** One summary per category, in the order of `categories`. */\n    series: { name: string; data: BoxPlotSummary[] }[];\n    categories: string[];\n    /** `vertical` (default) draws boxes upward; `horizontal` draws them rightward. */\n    orientation?: BoxPlotChartOrientation;\n    /** Override the default Cosmos palette, one color per series. */\n    colors?: string[];\n    /** Format the value axis labels and the tooltip values. */\n    formatValue?: (value: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n  };\n\n// Top to bottom, the way a vertical box reads.\nconst ROWS = [\n  ['Max', 4],\n  ['Q3', 3],\n  ['Median', 2],\n  ['Q1', 1],\n  ['Min', 0],\n] as const;\n\nconst summaryKey = (index: number) => `box${index}`;\n\ntype Row = { category: string } & Record<string, unknown>;\n\n// A bar's value is the span of the whiskers, so Recharts sizes and places it\n// and fits the value axis to it; the shape draws the box, the median and the\n// whiskers at the same scale. Recharts has no box plot of its own.\nconst boxShape = (index: number, color: string, horizontal: boolean) => (props: BarShapeProps) => {\n  const { x, y, width, height } = props;\n  const row = props.payload as Row;\n  const summary = row[summaryKey(index)] as BoxPlotSummary | undefined;\n  if (!summary) return null;\n  const [min, q1, median, q3, max] = summary;\n  const span = max - min || 1;\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  // Position of a value along the value axis, and the cross-axis center.\n  const at = (v: number) =>\n    horizontal ? left + ((v - min) / span) * w : top + ((max - v) / span) * h;\n  const mid = horizontal ? top + h / 2 : left + w / 2;\n  const size = horizontal ? h : w;\n  const cap = size * 0.25;\n  const point = (value: number, across: number) =>\n    horizontal ? { x: at(value), y: across } : { x: across, y: at(value) };\n  const line = (\n    from: { x: number; y: number },\n    to: { x: number; y: number },\n    key: string,\n    wide = 1.5\n  ) => (\n    <line key={key} x1={from.x} y1={from.y} x2={to.x} y2={to.y} stroke={color} strokeWidth={wide} />\n  );\n  const [boxStart, boxEnd] = [at(q1), at(q3)];\n  return (\n    <g>\n      {line(point(min, mid), point(q1, mid), 'lower')}\n      {line(point(q3, mid), point(max, mid), 'upper')}\n      {line(point(min, mid - cap), point(min, mid + cap), 'min')}\n      {line(point(max, mid - cap), point(max, mid + cap), 'max')}\n      <rect\n        x={horizontal ? Math.min(boxStart, boxEnd) : mid - size / 2}\n        y={horizontal ? mid - size / 2 : Math.min(boxStart, boxEnd)}\n        width={horizontal ? Math.abs(boxEnd - boxStart) : size}\n        height={horizontal ? size : Math.abs(boxEnd - boxStart)}\n        rx={2}\n        fill={color}\n        fillOpacity={0.35}\n        stroke={color}\n        strokeWidth={1.5}\n      />\n      {line(point(median, mid - size / 2), point(median, mid + size / 2), 'median', 2.5)}\n    </g>\n  );\n};\n\n/** Distributions per category (min, quartiles, median, max), e.g. response times per service. */\nexport const BoxPlotChart = ({\n  series,\n  categories,\n  orientation = 'vertical',\n  colors,\n  formatValue = String,\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}: BoxPlotChartProps) => {\n  const hidden = useHiddenSeries();\n  const axis = useAxis();\n  // Recharts names the layout after the axis the categories sit on.\n  const categoryKeys = useCategoryKeys(orientation === 'horizontal' ? 'vertical' : 'horizontal');\n  const name = ariaLabel ?? `Box plot: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  const horizontal = orientation === 'horizontal';\n  const rows: Row[] = categories.map((category, i) => ({\n    category,\n    ...Object.fromEntries(\n      series.flatMap((s, index) => {\n        const summary = s.data[i];\n        return summary\n          ? [\n              [summaryKey(index), summary],\n              [seriesKey(index), [summary[0], summary[4]]],\n            ]\n          : [];\n      })\n    ),\n  }));\n\n  // The category, then the five numbers of each series shown, headed by its name when there are several.\n  const tooltip = ({ active, payload, label }: Partial<TooltipContentProps>) => {\n    const row = payload?.[0]?.payload as Row | undefined;\n    if (!active || !row) return null;\n    const lines = series.flatMap((s, index): TooltipRow[] => {\n      const summary = row[summaryKey(index)] as BoxPlotSummary | undefined;\n      if (!summary || hidden.hidden.has(seriesKey(index))) return [];\n      const color = seriesColor(index, colors);\n      return [\n        ...(series.length > 1 ? [{ name: s.name, value: '', color }] : []),\n        ...ROWS.map(([title, at]) => ({\n          name: title,\n          value: formatValue(summary[at]),\n          color: series.length > 1 ? 'transparent' : color,\n        })),\n      ];\n    });\n    return <TooltipCard title={label} rows={lines} />;\n  };\n\n  return (\n    <BarChart\n      ref={categoryKeys}\n      {...frameProps({ height, width, ariaLabel: name })}\n      data={rows}\n      // Recharts names the layout after the axis the categories sit on.\n      layout={horizontal ? 'vertical' : 'horizontal'}\n      margin={{ top: 4, right: 12, bottom: 0, left: 0 }}\n      barGap={4}\n      barCategoryGap=\"22%\"\n    >\n      <CartesianGrid\n        {...GRID_PROPS}\n        {...(horizontal ? { horizontal: false, vertical: true } : {})}\n      />\n      {horizontal ? (\n        <>\n          <XAxis\n            type=\"number\"\n            domain={['auto', 'auto']}\n            tickFormatter={formatValue}\n            {...axis}\n            {...xAxisTitle(xTitle)}\n          />\n          <YAxis\n            type=\"category\"\n            dataKey=\"category\"\n            width=\"auto\"\n            tickFormatter={trimLabel}\n            {...axis}\n            {...yAxisTitle(yTitle)}\n          />\n        </>\n      ) : (\n        <>\n          <XAxis\n            dataKey=\"category\"\n            {...axis}\n            {...xAxisTitle(xTitle)}\n            {...categoryAxis(categories, xTitle)}\n          />\n          <YAxis\n            type=\"number\"\n            domain={['auto', 'auto']}\n            width=\"auto\"\n            tickFormatter={formatValue}\n            {...axis}\n            {...yAxisTitle(yTitle)}\n          />\n        </>\n      )}\n      {(showLegend ?? series.length > 1) && <Legend {...legendProps(legendPosition, hidden)} />}\n      <Tooltip\n        content={tooltip}\n        cursor={{ fill: BORDER, fillOpacity: 0.35, radius: 8 }}\n        animationDuration={150}\n      />\n      {series.map((s, index) => (\n        <Bar\n          key={seriesKey(index)}\n          name={s.name}\n          dataKey={seriesKey(index)}\n          fill={seriesColor(index, colors)}\n          maxBarSize={56}\n          shape={boxShape(index, seriesColor(index, colors), horizontal)}\n          hide={hidden.hidden.has(seriesKey(index))}\n          {...ANIMATION}\n        />\n      ))}\n      {referenceMarks({ referenceLines, referenceBands, axis: horizontal ? 'x' : 'y' })}\n      {children}\n    </BarChart>\n  );\n};\n"]}

package/dist/BoxPlotChart.js

@@ -0,0 +1,212 @@
+"use client";
+import { useCategoryKeys } from './chunk-FUZW3H5X.js';
+import { referenceMarks } from './chunk-SGG7XKOY.js';
+import { trimLabel, categoryAxis } from './chunk-HMH6DI7U.js';
+import { useHiddenSeries, legendProps } from './chunk-6ALKZLN2.js';
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { useAxis, GRID_PROPS, xAxisTitle, yAxisTitle } from './chunk-RILUG7JB.js';
+import { TooltipCard } from './chunk-VIOSQN4Z.js';
+import { hasNoData, seriesKey } from './chunk-UJIV5PVI.js';
+import { ChartEmpty, frameProps } from './chunk-3N43QT36.js';
+import { BORDER, seriesColor } from './chunk-UATB2IRY.js';
+import { BarChart, CartesianGrid, XAxis, YAxis, Legend, Tooltip, Bar } from 'recharts';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ROWS = [
+  ["Max", 4],
+  ["Q3", 3],
+  ["Median", 2],
+  ["Q1", 1],
+  ["Min", 0]
+];
+var summaryKey = (index) => `box${index}`;
+var boxShape = (index, color, horizontal) => (props) => {
+  const { x, y, width, height } = props;
+  const row = props.payload;
+  const summary = row[summaryKey(index)];
+  if (!summary) return null;
+  const [min, q1, median, q3, max] = summary;
+  const span = max - min || 1;
+  const left = Math.min(x, x + width);
+  const top = Math.min(y, y + height);
+  const w = Math.abs(width);
+  const h = Math.abs(height);
+  const at = (v) => horizontal ? left + (v - min) / span * w : top + (max - v) / span * h;
+  const mid = horizontal ? top + h / 2 : left + w / 2;
+  const size = horizontal ? h : w;
+  const cap = size * 0.25;
+  const point = (value, across) => horizontal ? { x: at(value), y: across } : { x: across, y: at(value) };
+  const line = (from, to, key, wide = 1.5) => /* @__PURE__ */ jsx("line", { x1: from.x, y1: from.y, x2: to.x, y2: to.y, stroke: color, strokeWidth: wide }, key);
+  const [boxStart, boxEnd] = [at(q1), at(q3)];
+  return /* @__PURE__ */ jsxs("g", { children: [
+    line(point(min, mid), point(q1, mid), "lower"),
+    line(point(q3, mid), point(max, mid), "upper"),
+    line(point(min, mid - cap), point(min, mid + cap), "min"),
+    line(point(max, mid - cap), point(max, mid + cap), "max"),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: horizontal ? Math.min(boxStart, boxEnd) : mid - size / 2,
+        y: horizontal ? mid - size / 2 : Math.min(boxStart, boxEnd),
+        width: horizontal ? Math.abs(boxEnd - boxStart) : size,
+        height: horizontal ? size : Math.abs(boxEnd - boxStart),
+        rx: 2,
+        fill: color,
+        fillOpacity: 0.35,
+        stroke: color,
+        strokeWidth: 1.5
+      }
+    ),
+    line(point(median, mid - size / 2), point(median, mid + size / 2), "median", 2.5)
+  ] });
+};
+var BoxPlotChart = ({
+  series,
+  categories,
+  orientation = "vertical",
+  colors,
+  formatValue = String,
+  xTitle,
+  yTitle,
+  referenceLines,
+  referenceBands,
+  showLegend,
+  legendPosition = "top",
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const hidden = useHiddenSeries();
+  const axis = useAxis();
+  const categoryKeys = useCategoryKeys(orientation === "horizontal" ? "vertical" : "horizontal");
+  const name = ariaLabel ?? `Box plot: ${series.map((s) => s.name).join(", ")}`;
+  if (hasNoData(series)) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const horizontal = orientation === "horizontal";
+  const rows = categories.map((category, i) => ({
+    category,
+    ...Object.fromEntries(
+      series.flatMap((s, index) => {
+        const summary = s.data[i];
+        return summary ? [
+          [summaryKey(index), summary],
+          [seriesKey(index), [summary[0], summary[4]]]
+        ] : [];
+      })
+    )
+  }));
+  const tooltip = ({ active, payload, label }) => {
+    const row = payload?.[0]?.payload;
+    if (!active || !row) return null;
+    const lines = series.flatMap((s, index) => {
+      const summary = row[summaryKey(index)];
+      if (!summary || hidden.hidden.has(seriesKey(index))) return [];
+      const color = seriesColor(index, colors);
+      return [
+        ...series.length > 1 ? [{ name: s.name, value: "", color }] : [],
+        ...ROWS.map(([title, at]) => ({
+          name: title,
+          value: formatValue(summary[at]),
+          color: series.length > 1 ? "transparent" : color
+        }))
+      ];
+    });
+    return /* @__PURE__ */ jsx(TooltipCard, { title: label, rows: lines });
+  };
+  return /* @__PURE__ */ jsxs(
+    BarChart,
+    {
+      ref: categoryKeys,
+      ...frameProps({ height, width, ariaLabel: name }),
+      data: rows,
+      layout: horizontal ? "vertical" : "horizontal",
+      margin: { top: 4, right: 12, bottom: 0, left: 0 },
+      barGap: 4,
+      barCategoryGap: "22%",
+      children: [
+        /* @__PURE__ */ jsx(
+          CartesianGrid,
+          {
+            ...GRID_PROPS,
+            ...horizontal ? { horizontal: false, vertical: true } : {}
+          }
+        ),
+        horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              type: "number",
+              domain: ["auto", "auto"],
+              tickFormatter: formatValue,
+              ...axis,
+              ...xAxisTitle(xTitle)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              type: "category",
+              dataKey: "category",
+              width: "auto",
+              tickFormatter: trimLabel,
+              ...axis,
+              ...yAxisTitle(yTitle)
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "category",
+              ...axis,
+              ...xAxisTitle(xTitle),
+              ...categoryAxis(categories, xTitle)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              type: "number",
+              domain: ["auto", "auto"],
+              width: "auto",
+              tickFormatter: formatValue,
+              ...axis,
+              ...yAxisTitle(yTitle)
+            }
+          )
+        ] }),
+        (showLegend ?? series.length > 1) && /* @__PURE__ */ jsx(Legend, { ...legendProps(legendPosition, hidden) }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: tooltip,
+            cursor: { fill: BORDER, fillOpacity: 0.35, radius: 8 },
+            animationDuration: 150
+          }
+        ),
+        series.map((s, index) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            name: s.name,
+            dataKey: seriesKey(index),
+            fill: seriesColor(index, colors),
+            maxBarSize: 56,
+            shape: boxShape(index, seriesColor(index, colors), horizontal),
+            hide: hidden.hidden.has(seriesKey(index)),
+            ...ANIMATION
+          },
+          seriesKey(index)
+        )),
+        referenceMarks({ referenceLines, referenceBands, axis: horizontal ? "x" : "y" }),
+        children
+      ]
+    }
+  );
+};
+
+export { BoxPlotChart };
+//# sourceMappingURL=BoxPlotChart.js.map
+//# sourceMappingURL=BoxPlotChart.js.map

package/dist/BoxPlotChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/BoxPlotChart.tsx"],"names":[],"mappings":"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","file":"BoxPlotChart.js","sourcesContent":["import {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Tooltip,\n  XAxis,\n  YAxis,\n  type BarShapeProps,\n  type TooltipContentProps,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { GRID_PROPS, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { categoryAxis, trimLabel } from './core/categoryAxis';\nimport { useCategoryKeys } from './core/categoryKeys';\nimport { TooltipCard, type TooltipRow } from './core/ChartTooltip';\nimport { legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { BORDER, 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 BoxPlotChartOrientation = 'vertical' | 'horizontal';\n\n/** One box, the five-number summary of a distribution. */\nexport type BoxPlotSummary = [min: number, q1: number, median: number, q3: number, max: number];\n\nexport type BoxPlotChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartAxisTitleProps &\n  ChartReferenceProps & {\n    /** One summary per category, in the order of `categories`. */\n    series: { name: string; data: BoxPlotSummary[] }[];\n    categories: string[];\n    /** `vertical` (default) draws boxes upward; `horizontal` draws them rightward. */\n    orientation?: BoxPlotChartOrientation;\n    /** Override the default Cosmos palette, one color per series. */\n    colors?: string[];\n    /** Format the value axis labels and the tooltip values. */\n    formatValue?: (value: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n  };\n\n// Top to bottom, the way a vertical box reads.\nconst ROWS = [\n  ['Max', 4],\n  ['Q3', 3],\n  ['Median', 2],\n  ['Q1', 1],\n  ['Min', 0],\n] as const;\n\nconst summaryKey = (index: number) => `box${index}`;\n\ntype Row = { category: string } & Record<string, unknown>;\n\n// A bar's value is the span of the whiskers, so Recharts sizes and places it\n// and fits the value axis to it; the shape draws the box, the median and the\n// whiskers at the same scale. Recharts has no box plot of its own.\nconst boxShape = (index: number, color: string, horizontal: boolean) => (props: BarShapeProps) => {\n  const { x, y, width, height } = props;\n  const row = props.payload as Row;\n  const summary = row[summaryKey(index)] as BoxPlotSummary | undefined;\n  if (!summary) return null;\n  const [min, q1, median, q3, max] = summary;\n  const span = max - min || 1;\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  // Position of a value along the value axis, and the cross-axis center.\n  const at = (v: number) =>\n    horizontal ? left + ((v - min) / span) * w : top + ((max - v) / span) * h;\n  const mid = horizontal ? top + h / 2 : left + w / 2;\n  const size = horizontal ? h : w;\n  const cap = size * 0.25;\n  const point = (value: number, across: number) =>\n    horizontal ? { x: at(value), y: across } : { x: across, y: at(value) };\n  const line = (\n    from: { x: number; y: number },\n    to: { x: number; y: number },\n    key: string,\n    wide = 1.5\n  ) => (\n    <line key={key} x1={from.x} y1={from.y} x2={to.x} y2={to.y} stroke={color} strokeWidth={wide} />\n  );\n  const [boxStart, boxEnd] = [at(q1), at(q3)];\n  return (\n    <g>\n      {line(point(min, mid), point(q1, mid), 'lower')}\n      {line(point(q3, mid), point(max, mid), 'upper')}\n      {line(point(min, mid - cap), point(min, mid + cap), 'min')}\n      {line(point(max, mid - cap), point(max, mid + cap), 'max')}\n      <rect\n        x={horizontal ? Math.min(boxStart, boxEnd) : mid - size / 2}\n        y={horizontal ? mid - size / 2 : Math.min(boxStart, boxEnd)}\n        width={horizontal ? Math.abs(boxEnd - boxStart) : size}\n        height={horizontal ? size : Math.abs(boxEnd - boxStart)}\n        rx={2}\n        fill={color}\n        fillOpacity={0.35}\n        stroke={color}\n        strokeWidth={1.5}\n      />\n      {line(point(median, mid - size / 2), point(median, mid + size / 2), 'median', 2.5)}\n    </g>\n  );\n};\n\n/** Distributions per category (min, quartiles, median, max), e.g. response times per service. */\nexport const BoxPlotChart = ({\n  series,\n  categories,\n  orientation = 'vertical',\n  colors,\n  formatValue = String,\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}: BoxPlotChartProps) => {\n  const hidden = useHiddenSeries();\n  const axis = useAxis();\n  // Recharts names the layout after the axis the categories sit on.\n  const categoryKeys = useCategoryKeys(orientation === 'horizontal' ? 'vertical' : 'horizontal');\n  const name = ariaLabel ?? `Box plot: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  const horizontal = orientation === 'horizontal';\n  const rows: Row[] = categories.map((category, i) => ({\n    category,\n    ...Object.fromEntries(\n      series.flatMap((s, index) => {\n        const summary = s.data[i];\n        return summary\n          ? [\n              [summaryKey(index), summary],\n              [seriesKey(index), [summary[0], summary[4]]],\n            ]\n          : [];\n      })\n    ),\n  }));\n\n  // The category, then the five numbers of each series shown, headed by its name when there are several.\n  const tooltip = ({ active, payload, label }: Partial<TooltipContentProps>) => {\n    const row = payload?.[0]?.payload as Row | undefined;\n    if (!active || !row) return null;\n    const lines = series.flatMap((s, index): TooltipRow[] => {\n      const summary = row[summaryKey(index)] as BoxPlotSummary | undefined;\n      if (!summary || hidden.hidden.has(seriesKey(index))) return [];\n      const color = seriesColor(index, colors);\n      return [\n        ...(series.length > 1 ? [{ name: s.name, value: '', color }] : []),\n        ...ROWS.map(([title, at]) => ({\n          name: title,\n          value: formatValue(summary[at]),\n          color: series.length > 1 ? 'transparent' : color,\n        })),\n      ];\n    });\n    return <TooltipCard title={label} rows={lines} />;\n  };\n\n  return (\n    <BarChart\n      ref={categoryKeys}\n      {...frameProps({ height, width, ariaLabel: name })}\n      data={rows}\n      // Recharts names the layout after the axis the categories sit on.\n      layout={horizontal ? 'vertical' : 'horizontal'}\n      margin={{ top: 4, right: 12, bottom: 0, left: 0 }}\n      barGap={4}\n      barCategoryGap=\"22%\"\n    >\n      <CartesianGrid\n        {...GRID_PROPS}\n        {...(horizontal ? { horizontal: false, vertical: true } : {})}\n      />\n      {horizontal ? (\n        <>\n          <XAxis\n            type=\"number\"\n            domain={['auto', 'auto']}\n            tickFormatter={formatValue}\n            {...axis}\n            {...xAxisTitle(xTitle)}\n          />\n          <YAxis\n            type=\"category\"\n            dataKey=\"category\"\n            width=\"auto\"\n            tickFormatter={trimLabel}\n            {...axis}\n            {...yAxisTitle(yTitle)}\n          />\n        </>\n      ) : (\n        <>\n          <XAxis\n            dataKey=\"category\"\n            {...axis}\n            {...xAxisTitle(xTitle)}\n            {...categoryAxis(categories, xTitle)}\n          />\n          <YAxis\n            type=\"number\"\n            domain={['auto', 'auto']}\n            width=\"auto\"\n            tickFormatter={formatValue}\n            {...axis}\n            {...yAxisTitle(yTitle)}\n          />\n        </>\n      )}\n      {(showLegend ?? series.length > 1) && <Legend {...legendProps(legendPosition, hidden)} />}\n      <Tooltip\n        content={tooltip}\n        cursor={{ fill: BORDER, fillOpacity: 0.35, radius: 8 }}\n        animationDuration={150}\n      />\n      {series.map((s, index) => (\n        <Bar\n          key={seriesKey(index)}\n          name={s.name}\n          dataKey={seriesKey(index)}\n          fill={seriesColor(index, colors)}\n          maxBarSize={56}\n          shape={boxShape(index, seriesColor(index, colors), horizontal)}\n          hide={hidden.hidden.has(seriesKey(index))}\n          {...ANIMATION}\n        />\n      ))}\n      {referenceMarks({ referenceLines, referenceBands, axis: horizontal ? 'x' : 'y' })}\n      {children}\n    </BarChart>\n  );\n};\n"]}