@sckyzo/cosmos-charts 0.0.2 → 0.2.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import 'apexcharts/line';
-import ReactApexChart from 'react-apexcharts/core';
+import ReactApexChart13 from 'react-apexcharts/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import 'apexcharts/features/annotations';
 import 'apexcharts/radialBar';
@@ -8,41 +8,101 @@ import 'apexcharts/donut';
 import 'apexcharts/features/legend';
 import 'apexcharts/treemap';
 import 'apexcharts/bar';
+import 'apexcharts/heatmap';
+import 'apexcharts/radar';
+import 'apexcharts/boxPlot';
+import 'apexcharts/rangeBar';
 
 var COSMOS_BRAND = "#465fff";
 var COSMOS_PALETTE = ["#465fff", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
+var DARK_THEME_CLASSES = ["dark", "deep-blue"];
+var BRAND_SCALE_LIGHT = [100, 300, 400, 500, 700];
+var BRAND_SCALE_DARK = [900, 700, 500, 400, 300];
+var BLUE_STEPS = {
+  100: "#dde9ff",
+  300: "#9cb9ff",
+  400: "#7592ff",
+  500: COSMOS_BRAND,
+  700: "#2a31d8",
+  900: "#262e89"
+};
 var detectDark = () => {
   if (typeof document === "undefined") return false;
-  return document.documentElement.classList.contains("dark");
+  const { classList } = document.documentElement;
+  return DARK_THEME_CLASSES.some((c) => classList.contains(c));
+};
+var readCssVar = (name, fallback) => {
+  if (typeof document === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
 };
-var useDarkMode = () => {
-  const [dark, setDark] = useState(detectDark);
+var readChartColors = () => {
+  const dark = detectDark();
+  return {
+    dark,
+    brand: readCssVar("--color-brand-500", COSMOS_BRAND),
+    brandScale: (dark ? BRAND_SCALE_DARK : BRAND_SCALE_LIGHT).map(
+      (step) => readCssVar(`--color-brand-${step}`, BLUE_STEPS[step])
+    ),
+    // The card background (`bg-white dark:bg-gray-900`).
+    surface: dark ? readCssVar("--color-gray-900", "#111827") : readCssVar("--color-white", "#fff"),
+    grid: dark ? readCssVar("--color-gray-800", "#1f2937") : readCssVar("--color-gray-200", "#e5e7eb"),
+    axis: dark ? readCssVar("--color-gray-400", "#9ca3af") : readCssVar("--color-gray-500", "#6b7280")
+  };
+};
+var useHtmlAppearance = (read) => {
+  const [value, setValue] = useState(read);
   useEffect(() => {
     if (typeof document === "undefined") return;
-    const observer = new MutationObserver(() => setDark(detectDark()));
+    const observer = new MutationObserver(() => setValue(read));
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["class"]
+      attributeFilter: ["class", "data-accent"]
     });
     return () => observer.disconnect();
-  }, []);
-  return dark;
+  }, [read]);
+  return value;
 };
+var useDarkMode = () => useHtmlAppearance(detectDark);
 var useChartTheme = () => {
-  const dark = useDarkMode();
+  const {
+    dark,
+    brand,
+    brandScale,
+    surface,
+    grid: gridColor,
+    axis
+  } = useHtmlAppearance(readChartColors);
   const grid = {
-    borderColor: dark ? "#1f2937" : "#e5e7eb",
+    borderColor: gridColor,
     strokeDashArray: 4
   };
   const axisLabels = {
     style: {
-      colors: dark ? "#9ca3af" : "#6b7280",
+      colors: axis,
       fontSize: "11px",
       fontFamily: "inherit"
     }
   };
-  return { dark, grid, axisLabels, brand: COSMOS_BRAND, palette: COSMOS_PALETTE };
+  return {
+    dark,
+    grid,
+    axisLabels,
+    brand,
+    brandScale,
+    surface,
+    palette: [brand, ...COSMOS_PALETTE.slice(1)]
+  };
+};
+
+// src/escape.ts
+var ENTITIES = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
 };
+var escapeHtml = (value) => String(value).replace(/[&<>"']/g, (char) => ENTITIES[char]);
 var LineAreaChart = ({
   series,
   categories,
@@ -62,17 +122,28 @@ var LineAreaChart = ({
     stroke: { curve: "smooth", width: 2 },
     fill: { type: "gradient", gradient: { opacityFrom: 0.45, opacityTo: 0.05 } },
     grid,
+    // One labels object per axis: ApexCharts writes the x-axis category
+    // formatter onto it, which blanked the y labels on the next update.
     xaxis: {
       categories,
-      labels: axisLabels,
+      labels: { ...axisLabels },
       axisBorder: { show: false },
       axisTicks: { show: false }
     },
-    yaxis: { labels: axisLabels },
+    yaxis: { labels: { ...axisLabels } },
     legend: { show: false },
-    tooltip: { theme: "dark" }
+    // The tooltip is HTML: escape the category and the series name. ApexCharts
+    // hands the x formatter the point's position on the axis (1, 2, …), not
+    // its category, so read the category back by index.
+    tooltip: {
+      theme: "dark",
+      x: {
+        formatter: (v, opts) => escapeHtml(opts === void 0 ? v : categories[opts.dataPointIndex] ?? v)
+      },
+      y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } }
+    }
   };
-  return /* @__PURE__ */ jsx(ReactApexChart, { type: "area", options, series, height, width });
+  return /* @__PURE__ */ jsx(ReactApexChart13, { type: "area", options, series, height, width });
 };
 var defaultGenerator = /* @__PURE__ */ (() => {
   let last = 50;
@@ -135,7 +206,7 @@ var RealtimeChart = ({
     tooltip: { theme: "dark" }
   };
   return /* @__PURE__ */ jsx(
-    ReactApexChart,
+    ReactApexChart13,
     {
       type: "line",
       options,
@@ -172,7 +243,7 @@ var RadialBarChart = ({
     }
   };
   return /* @__PURE__ */ jsx(
-    ReactApexChart,
+    ReactApexChart13,
     {
       type: "radialBar",
       options,
@@ -217,7 +288,7 @@ var GradientRadial = ({
     labels: [label]
   };
   return /* @__PURE__ */ jsx(
-    ReactApexChart,
+    ReactApexChart13,
     {
       type: "radialBar",
       options,
@@ -252,7 +323,7 @@ var SemiCircleGauge = ({
     labels: [label]
   };
   return /* @__PURE__ */ jsx(
-    ReactApexChart,
+    ReactApexChart13,
     {
       type: "radialBar",
       options,
@@ -286,7 +357,7 @@ var StrokedGauge = ({
     labels: [label]
   };
   return /* @__PURE__ */ jsx(
-    ReactApexChart,
+    ReactApexChart13,
     {
       type: "radialBar",
       options,
@@ -308,7 +379,9 @@ var DonutChart = ({
     chart: { type: "donut", fontFamily: "inherit" },
     colors: palette,
     labels,
-    legend: { position: rightLegend ? "right" : "bottom" },
+    // The legend and the tooltip are HTML: escape the labels.
+    legend: { position: rightLegend ? "right" : "bottom", formatter: (name) => escapeHtml(name) },
+    tooltip: { y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } } },
     dataLabels: { enabled: false },
     plotOptions: {
       pie: {
@@ -316,7 +389,7 @@ var DonutChart = ({
       }
     }
   };
-  return /* @__PURE__ */ jsx(ReactApexChart, { type: "donut", options, series, height, width });
+  return /* @__PURE__ */ jsx(ReactApexChart13, { type: "donut", options, series, height, width });
 };
 var DonutRightLegend = (props) => /* @__PURE__ */ jsx(DonutChart, { ...props, rightLegend: true });
 var Sparkline = ({
@@ -335,7 +408,7 @@ var Sparkline = ({
     tooltip: { fixed: { enabled: false }, x: { show: false }, marker: { show: false } }
   };
   return /* @__PURE__ */ jsx(
-    ReactApexChart,
+    ReactApexChart13,
     {
       type: variant,
       options,
@@ -381,7 +454,7 @@ var TreemapChart = ({ series, height = 320, width = "100%" }) => {
     plotOptions: { treemap: { distributed: true, enableShades: false } }
   };
   return /* @__PURE__ */ jsx(
-    ReactApexChart,
+    ReactApexChart13,
     {
       type: "treemap",
       options,
@@ -446,18 +519,628 @@ var BarChart = ({
       position: "top",
       horizontalAlign: "right",
       labels: { colors: axisLabels.style.colors },
-      markers: { size: 5 }
+      markers: { size: 5 },
+      formatter: (name) => escapeHtml(name)
     },
+    // Tooltips and the legend are HTML: escape names, categories and values.
     tooltip: {
       theme: "dark",
-      y: { formatter: (v) => valueFormatter(Number(v)) }
+      x: { formatter: (v) => escapeHtml(v) },
+      y: {
+        formatter: (v) => escapeHtml(valueFormatter(Number(v))),
+        title: { formatter: (name) => `${escapeHtml(name)}: ` }
+      }
     },
     fill: { opacity: 1 },
     stroke: { show: false }
   };
-  return /* @__PURE__ */ jsx(ReactApexChart, { type: "bar", options, series, height, width });
+  return /* @__PURE__ */ jsx(ReactApexChart13, { type: "bar", options, series, height, width });
+};
+var NICE_STEPS = [1, 2, 2.5, 3, 4, 5, 6, 8, 10];
+var niceStep = (value) => {
+  const magnitude = 10 ** Math.floor(Math.log10(value));
+  const step = NICE_STEPS.find((m) => m * magnitude >= value) ?? 10;
+  return step * magnitude;
+};
+var round = (value) => Number(value.toPrecision(12));
+var evenRanges = (values, colors) => {
+  const finite = values.filter(Number.isFinite);
+  if (finite.length === 0 || colors.length === 0) return [];
+  const min = finite.reduce((a, b) => Math.min(a, b));
+  const max = finite.reduce((a, b) => Math.max(a, b));
+  let step = niceStep((max - min) / colors.length || Math.abs(max) || 1);
+  let start = Math.floor(min / step) * step;
+  while (start + step * colors.length < max) {
+    step = niceStep(step * 1.001);
+    start = Math.floor(min / step) * step;
+  }
+  return colors.map((color, i) => ({
+    from: round(start + step * i),
+    to: round(start + step * (i + 1)),
+    color
+  }));
+};
+var textColorOn = (color) => {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color)?.[1];
+  if (!hex) return void 0;
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.2 ? "#101828" : "#ffffff";
+};
+var HeatmapChart = ({
+  series,
+  categories,
+  colors,
+  ranges,
+  formatValue,
+  showValues = false,
+  showLegend = true,
+  height = 320,
+  width = "100%"
+}) => {
+  const { axisLabels, brandScale, surface } = useChartTheme();
+  const valueFormatter = formatValue ?? ((v) => String(v));
+  const colorRanges = (ranges ?? evenRanges(
+    series.flatMap((s) => s.data),
+    colors ?? brandScale
+  )).map((range) => ({
+    ...range,
+    name: range.name ?? `${valueFormatter(range.from)} \u2013 ${valueFormatter(range.to)}`,
+    foreColor: textColorOn(range.color)
+  }));
+  const options = {
+    chart: {
+      type: "heatmap",
+      toolbar: { show: false },
+      fontFamily: "inherit"
+    },
+    dataLabels: {
+      enabled: showValues,
+      formatter: (v) => valueFormatter(Number(v)),
+      style: { fontSize: "11px", fontWeight: 500 }
+    },
+    plotOptions: {
+      heatmap: {
+        radius: 3,
+        // The ranges carry the exact colors: no shading on top of them.
+        enableShades: false,
+        colorScale: { ranges: colorRanges }
+      }
+    },
+    // Gaps between the cells, in the card's color.
+    stroke: { width: 2, colors: [surface] },
+    grid: { show: false },
+    // One labels object per axis: ApexCharts mutates them. Narrow columns
+    // skip the labels that would overlap instead of rotating them into a
+    // pile; the tooltip still names every column.
+    xaxis: {
+      categories,
+      labels: { ...axisLabels, rotate: 0 },
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+      tooltip: { enabled: false }
+    },
+    // ApexCharts draws the first series at the bottom; read top-down instead.
+    yaxis: { reversed: true, labels: { ...axisLabels } },
+    legend: {
+      show: showLegend,
+      position: "top",
+      horizontalAlign: "right",
+      labels: { colors: axisLabels.style.colors },
+      // The default stroke outlines the swatches in white, glaring in dark themes.
+      markers: { size: 5, strokeWidth: 0 },
+      formatter: (name) => escapeHtml(name)
+    },
+    // The tooltip and the legend are HTML: escape row names, categories,
+    // range names and values. The title is the hovered column's category.
+    tooltip: {
+      theme: "dark",
+      x: {
+        show: true,
+        formatter: (v, opts) => escapeHtml(opts === void 0 ? v : categories[opts.dataPointIndex] ?? v)
+      },
+      y: {
+        formatter: (v) => escapeHtml(valueFormatter(Number(v))),
+        title: { formatter: (name) => `${escapeHtml(name)}: ` }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart13,
+    {
+      type: "heatmap",
+      options,
+      series,
+      height,
+      width
+    }
+  );
+};
+var RadarChart = ({
+  series,
+  categories,
+  colors,
+  formatValue,
+  showLegend,
+  max,
+  height = 340,
+  width = "100%"
+}) => {
+  const { grid, axisLabels, palette } = useChartTheme();
+  const legendVisible = showLegend ?? series.length > 1;
+  const valueFormatter = formatValue ?? ((v) => String(v));
+  const options = {
+    chart: {
+      type: "radar",
+      toolbar: { show: false },
+      fontFamily: "inherit"
+    },
+    colors: colors ?? palette,
+    dataLabels: { enabled: false },
+    stroke: { width: 2 },
+    fill: { opacity: 0.15 },
+    // The tooltip is hit-tested on the markers: keep them.
+    markers: { size: 3, strokeWidth: 0 },
+    // ApexCharts reserves part of an axis name's width only, so on a narrow
+    // chart the names at the side vertices ran off the edge. No effect on a
+    // wide chart: its size follows the height.
+    grid: { padding: { left: 24, right: 24 } },
+    plotOptions: {
+      radar: {
+        polygons: {
+          strokeColors: grid?.borderColor,
+          connectorColors: grid?.borderColor,
+          fill: { colors: ["transparent"] }
+        }
+      }
+    },
+    // One labels object per axis: ApexCharts mutates them.
+    xaxis: { categories, labels: { ...axisLabels } },
+    yaxis: {
+      max,
+      labels: { ...axisLabels, formatter: (val) => valueFormatter(Number(val)) }
+    },
+    legend: {
+      show: legendVisible,
+      position: "top",
+      horizontalAlign: "right",
+      labels: { colors: axisLabels.style.colors },
+      // The default stroke outlines the swatches in white, glaring in dark themes.
+      markers: { size: 5, strokeWidth: 0 },
+      formatter: (name) => escapeHtml(name)
+    },
+    // The tooltip and the legend are HTML: escape names, categories and
+    // values. The title is the hovered axis.
+    tooltip: {
+      theme: "dark",
+      x: {
+        formatter: (v, opts) => escapeHtml(opts === void 0 ? v : categories[opts.dataPointIndex] ?? v)
+      },
+      y: {
+        formatter: (v) => escapeHtml(valueFormatter(Number(v))),
+        title: { formatter: (name) => `${escapeHtml(name)}: ` }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(ReactApexChart13, { type: "radar", options, series, height, width });
+};
+
+// src/tooltip.ts
+var line = (content) => `<div class="apexcharts-tooltip-series-group apexcharts-active" style="display:flex">${content}</div>`;
+var tooltipHtml = ({ title, series, rows }) => (title === void 0 ? "" : `<div class="apexcharts-tooltip-title">${escapeHtml(title)}</div>`) + (series === void 0 ? "" : line(
+  `<span class="apexcharts-tooltip-marker" style="background-color:${escapeHtml(series.color)};border-radius:50%"></span><span class="apexcharts-tooltip-text-y-label">${escapeHtml(series.name)}</span>`
+)) + rows.map(
+  ([label, value]) => line(
+    `<span class="apexcharts-tooltip-text-y-label">${escapeHtml(label)}:</span><span class="apexcharts-tooltip-text-y-value">${escapeHtml(value)}</span>`
+  )
+).join("");
+var formatNumber = (value) => String(Number(value.toFixed(2)));
+var niceAxis = (values, pad = 0, ticks = 5) => {
+  const low = Math.min(...values);
+  const high = Math.max(...values);
+  const margin = (high - low) * pad;
+  const min = low >= 0 ? Math.max(low - margin, 0) : low - margin;
+  const max = high <= 0 ? Math.min(high + margin, 0) : high + margin;
+  if (!(max > min)) return {};
+  const rough = (max - min) / ticks;
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const step = [1, 2, 2.5, 5, 10].map((f) => f * magnitude).find((s) => s >= rough) ?? rough;
+  const round2 = (value) => Number(value.toPrecision(12));
+  const niceMin = round2(Math.floor(min / step) * step);
+  const niceMax = round2(Math.ceil(max / step) * step);
+  return { min: niceMin, max: niceMax, tickAmount: Math.round((niceMax - niceMin) / step) };
+};
+var xyOptions = ({ grid, axisLabels, palette }, {
+  series,
+  xTitle,
+  yTitle,
+  colors,
+  formatX = formatNumber,
+  formatY = formatNumber,
+  showLegend
+}, { pad = 0, extraRows = () => [] } = {}) => {
+  const seriesColors = colors ?? palette;
+  const points = series.flatMap(({ data }) => data);
+  const axisTitle = (text) => text === void 0 ? void 0 : {
+    text,
+    style: {
+      color: axisLabels.style.colors,
+      fontSize: "12px",
+      fontFamily: "inherit",
+      fontWeight: 500
+    }
+  };
+  return {
+    chart: { toolbar: { show: false }, zoom: { enabled: false }, fontFamily: "inherit" },
+    colors: seriesColors,
+    dataLabels: { enabled: false },
+    grid,
+    // One labels object per axis: ApexCharts writes formatters onto them.
+    // Axis labels and titles are SVG text and stay unescaped.
+    xaxis: {
+      type: "numeric",
+      ...niceAxis(
+        points.map(({ x }) => x),
+        pad
+      ),
+      title: axisTitle(xTitle),
+      labels: { ...axisLabels, formatter: (value) => formatX(Number(value)) },
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+      // The x-axis tooltip is HTML and repeats the x value of the tooltip.
+      tooltip: { enabled: false }
+    },
+    yaxis: {
+      ...niceAxis(
+        points.map(({ y }) => y),
+        pad
+      ),
+      title: axisTitle(yTitle),
+      labels: { ...axisLabels, formatter: (value) => formatY(value) }
+    },
+    legend: {
+      show: showLegend ?? series.length > 1,
+      position: "top",
+      horizontalAlign: "right",
+      labels: { colors: axisLabels.style.colors },
+      markers: { size: 5 },
+      formatter: (name) => escapeHtml(name)
+    },
+    // The tooltip is HTML: tooltipHtml escapes the label, the series name and
+    // the values.
+    tooltip: {
+      theme: "dark",
+      custom: ({ seriesIndex, dataPointIndex }) => {
+        const { name, data } = series[seriesIndex];
+        const point = data[dataPointIndex];
+        return tooltipHtml({
+          title: point.label,
+          series: { name, color: seriesColors[seriesIndex % seriesColors.length] },
+          rows: [
+            [xTitle ?? "x", formatX(point.x)],
+            [yTitle ?? "y", formatY(point.y)],
+            ...extraRows(point)
+          ]
+        });
+      }
+    }
+  };
+};
+var ScatterChart = ({ height = 320, width = "100%", ...props }) => {
+  const base = xyOptions(useChartTheme(), props);
+  const options = {
+    ...base,
+    chart: { ...base.chart, type: "scatter" },
+    markers: { size: 6, strokeWidth: 0, hover: { sizeOffset: 2 } }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart13,
+    {
+      type: "scatter",
+      options,
+      series: props.series,
+      height,
+      width
+    }
+  );
+};
+var BubbleChart = ({
+  sizeTitle = "Size",
+  formatSize = formatNumber,
+  height = 320,
+  width = "100%",
+  ...props
+}) => {
+  const theme = useChartTheme();
+  const base = xyOptions(theme, props, {
+    // Room for the bubbles at the edges of the plot.
+    pad: 0.08,
+    extraRows: (point) => [[sizeTitle, formatSize(point.z)]]
+  });
+  const options = {
+    ...base,
+    chart: { ...base.chart, type: "bubble" },
+    plotOptions: { bubble: { minBubbleRadius: 4 } },
+    // Translucent bubbles, outlined in their own color (ApexCharts' white
+    // outline glares on the dark themes), keep the overlapping ones readable.
+    fill: { opacity: 0.55 },
+    markers: { strokeWidth: 1, strokeColors: props.colors ?? theme.palette }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart13,
+    {
+      type: "bubble",
+      options,
+      series: props.series,
+      height,
+      width
+    }
+  );
+};
+var ROWS = [
+  ["Max", 4],
+  ["Q3", 3],
+  ["Median", 2],
+  ["Q1", 1],
+  ["Min", 0]
+];
+var BoxPlotChart = ({
+  series,
+  categories,
+  orientation = "vertical",
+  colors,
+  formatValue,
+  showLegend,
+  height = 320,
+  width = "100%"
+}) => {
+  const { grid, axisLabels, palette } = useChartTheme();
+  const horizontal = orientation === "horizontal";
+  const seriesColors = colors ?? palette;
+  const valueFormatter = formatValue ?? ((v) => String(v));
+  const categoryLabels = () => ({ ...axisLabels });
+  const valueLabels = () => ({
+    ...axisLabels,
+    formatter: (value) => valueFormatter(Number(value))
+  });
+  const options = {
+    chart: {
+      type: "boxPlot",
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      fontFamily: "inherit"
+    },
+    colors: seriesColors,
+    plotOptions: {
+      bar: { horizontal, columnWidth: "50%", barHeight: "50%" },
+      // Both halves take the series color: a translucent fill, and an outline,
+      // median and whiskers drawn in the full color (ApexCharts' defaults are
+      // fixed colors, with a near-black stroke lost on the dark themes).
+      boxPlot: { colors: { upper: seriesColors, lower: seriesColors } }
+    },
+    fill: { opacity: 0.35 },
+    stroke: { width: 1.5, colors: seriesColors },
+    grid,
+    xaxis: {
+      labels: horizontal ? valueLabels() : categoryLabels(),
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+      // The x-axis tooltip is HTML and repeats the tooltip title.
+      tooltip: { enabled: false }
+    },
+    yaxis: { labels: horizontal ? categoryLabels() : valueLabels() },
+    // Horizontal, the value labels sit side by side and run into each other
+    // on a phone: keep three of them.
+    responsive: horizontal ? [{ breakpoint: 640, options: { xaxis: { tickAmount: 2 } } }] : [],
+    legend: {
+      show: showLegend ?? series.length > 1,
+      position: "top",
+      horizontalAlign: "right",
+      labels: { colors: axisLabels.style.colors },
+      markers: { size: 5 },
+      formatter: (name) => escapeHtml(name)
+    },
+    // ApexCharts' own box plot tooltip prints the values raw. This one is
+    // HTML too: tooltipHtml escapes the category, the series name and values.
+    tooltip: {
+      theme: "dark",
+      custom: ({ seriesIndex, dataPointIndex }) => {
+        const { name, data } = series[seriesIndex];
+        const summary = data[dataPointIndex];
+        return tooltipHtml({
+          title: categories[dataPointIndex],
+          series: series.length > 1 ? { name, color: seriesColors[seriesIndex % seriesColors.length] } : void 0,
+          rows: ROWS.map(([label, index]) => [label, valueFormatter(summary[index])])
+        });
+      }
+    }
+  };
+  const chartSeries = series.map(({ name, data }) => ({
+    name,
+    data: data.map((y, index) => ({ x: categories[index], y }))
+  }));
+  return /* @__PURE__ */ jsx(
+    ReactApexChart13,
+    {
+      type: "boxPlot",
+      options,
+      series: chartSeries,
+      height,
+      width
+    }
+  );
+};
+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 defaultFormatDate = (timestamp) => UTC_DATE_TIME.format(timestamp);
+var RangeBarChart = ({
+  series,
+  groupRows = false,
+  colors,
+  formatDate = defaultFormatDate,
+  showLegend,
+  height = 320,
+  width = "100%"
+}) => {
+  const { grid, axisLabels, palette } = useChartTheme();
+  const seriesColors = colors ?? palette;
+  const legendVisible = showLegend ?? series.length > 1;
+  const lanes = groupRows ? 1 : series.length;
+  const tooltip = ({
+    seriesIndex,
+    dataPointIndex
+  }) => {
+    const s = series[seriesIndex];
+    const point = s?.data[dataPointIndex];
+    if (!point) return "";
+    const [start, end] = point.y;
+    return tooltipHtml({
+      title: point.x,
+      series: { name: s.name, color: seriesColors[seriesIndex % seriesColors.length] },
+      rows: [
+        ["Start", formatDate(start)],
+        ["End", formatDate(end)]
+      ]
+    });
+  };
+  const options = {
+    chart: {
+      type: "rangeBar",
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      fontFamily: "inherit"
+    },
+    colors: seriesColors,
+    dataLabels: { enabled: false },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        // Without groupRows each series gets its own lane in the row: give
+        // the bars more of their (thinner) lane.
+        barHeight: lanes > 1 ? "80%" : "60%",
+        borderRadius: 3,
+        borderRadiusApplication: "around",
+        rangeBarGroupRows: groupRows
+      }
+    },
+    // Time runs left to right: vertical grid lines, plus a line between rows.
+    grid: { ...grid, xaxis: { lines: { show: true } }, yaxis: { lines: { show: true } } },
+    // One labels object per axis: ApexCharts mutates them.
+    xaxis: {
+      type: "datetime",
+      labels: { ...axisLabels, datetimeUTC: true },
+      axisBorder: { show: false },
+      axisTicks: { show: false }
+    },
+    yaxis: { labels: { ...axisLabels } },
+    legend: {
+      show: legendVisible,
+      position: "top",
+      horizontalAlign: "right",
+      labels: { colors: axisLabels.style.colors },
+      markers: { size: 5 },
+      formatter: (name) => escapeHtml(name)
+    },
+    tooltip: { theme: "dark", custom: tooltip },
+    fill: { opacity: 1 }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart13,
+    {
+      type: "rangeBar",
+      options,
+      series,
+      height,
+      width
+    }
+  );
+};
+var SIDES = ["left", "right"];
+var axisOf = (s) => s.axis ?? "left";
+var MixedChart = ({
+  series,
+  categories,
+  colors,
+  formatValue,
+  formatRightValue,
+  showLegend,
+  height = 320,
+  width = "100%"
+}) => {
+  const { grid, axisLabels, palette } = useChartTheme();
+  const legendVisible = showLegend ?? series.length > 1;
+  const formatters = { left: formatValue, right: formatRightValue };
+  const usedSides = SIDES.filter((side) => series.some((s) => axisOf(s) === side));
+  const sides = usedSides.length > 0 ? usedSides : SIDES.slice(0, 1);
+  const yaxis = sides.map((side) => ({
+    seriesName: sides.length > 1 ? series.filter((s) => axisOf(s) === side).map((s) => s.name) : void 0,
+    opposite: side === "right",
+    labels: { ...axisLabels, formatter: formatters[side] }
+  }));
+  const options = {
+    chart: {
+      type: "line",
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      fontFamily: "inherit"
+    },
+    colors: colors ?? palette,
+    dataLabels: { enabled: false },
+    // Lines only: columns have no stroke. monotoneCubic stays smooth without
+    // overshooting the samples, so a latency line never dips below its data.
+    stroke: { width: series.map((s) => s.type === "line" ? 3 : 0), curve: "monotoneCubic" },
+    plotOptions: {
+      bar: { columnWidth: "55%", borderRadius: 4, borderRadiusApplication: "end" }
+    },
+    grid,
+    xaxis: {
+      categories,
+      labels: { ...axisLabels },
+      axisBorder: { show: false },
+      axisTicks: { show: false }
+    },
+    yaxis,
+    legend: {
+      show: legendVisible,
+      position: "top",
+      horizontalAlign: "right",
+      labels: { colors: axisLabels.style.colors },
+      markers: { size: 5 },
+      // ApexCharts stacks the series of each y axis in a column of their own:
+      // keep one row, like the other charts.
+      clusterGroupedSeries: false,
+      formatter: (name) => escapeHtml(name)
+    },
+    // The tooltip is HTML: escape the category, the series names and the
+    // values. ApexCharts hands the x formatter the point's position on a line
+    // chart's axis, not its category, so read the category back by index.
+    tooltip: {
+      theme: "dark",
+      x: {
+        formatter: (v, opts) => escapeHtml(opts === void 0 ? v : categories[opts.dataPointIndex] ?? v)
+      },
+      y: {
+        formatter: (v, opts) => {
+          const s = opts && series[opts.seriesIndex];
+          const format = (s && formatters[axisOf(s)]) ?? String;
+          return escapeHtml(format(Number(v)));
+        },
+        title: { formatter: (name) => `${escapeHtml(name)}: ` }
+      }
+    },
+    fill: { opacity: 1 }
+  };
+  return /* @__PURE__ */ jsx(ReactApexChart13, { type: "line", options, series, height, width });
 };
 
-export { BarChart, COSMOS_BRAND, COSMOS_PALETTE, DonutChart, DonutRightLegend, GradientRadial, LineAreaChart, RadialBarChart, RealtimeChart, SemiCircleGauge, Sparkline, SparklineGroup, StrokedGauge, TreemapChart, useChartTheme, useDarkMode };
+export { BarChart, BoxPlotChart, BubbleChart, COSMOS_BRAND, COSMOS_PALETTE, DonutChart, DonutRightLegend, GradientRadial, HeatmapChart, LineAreaChart, MixedChart, RadarChart, RadialBarChart, RangeBarChart, RealtimeChart, ScatterChart, SemiCircleGauge, Sparkline, SparklineGroup, StrokedGauge, TreemapChart, useChartTheme, useDarkMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map