@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,1146 +1,25 @@
-import { useState, useEffect } from 'react';
-import 'apexcharts/line';
-import ReactApexChart13 from 'react-apexcharts/core';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import 'apexcharts/features/annotations';
-import 'apexcharts/radialBar';
-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;
-  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 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(() => setValue(read));
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class", "data-accent"]
-    });
-    return () => observer.disconnect();
-  }, [read]);
-  return value;
-};
-var useDarkMode = () => useHtmlAppearance(detectDark);
-var useChartTheme = () => {
-  const {
-    dark,
-    brand,
-    brandScale,
-    surface,
-    grid: gridColor,
-    axis
-  } = useHtmlAppearance(readChartColors);
-  const grid = {
-    borderColor: gridColor,
-    strokeDashArray: 4
-  };
-  const axisLabels = {
-    style: {
-      colors: axis,
-      fontSize: "11px",
-      fontFamily: "inherit"
-    }
-  };
-  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,
-  height = 280,
-  width = "100%"
-}) => {
-  const { grid, axisLabels, palette } = useChartTheme();
-  const options = {
-    chart: {
-      type: "area",
-      toolbar: { show: false },
-      zoom: { enabled: false },
-      fontFamily: "inherit"
-    },
-    colors: palette,
-    dataLabels: { enabled: false },
-    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 },
-      axisBorder: { show: false },
-      axisTicks: { show: false }
-    },
-    yaxis: { labels: { ...axisLabels } },
-    legend: { show: false },
-    // 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(ReactApexChart13, { type: "area", options, series, height, width });
-};
-var defaultGenerator = /* @__PURE__ */ (() => {
-  let last = 50;
-  return () => {
-    last += (Math.random() - 0.5) * 8;
-    last = Math.max(20, Math.min(95, last));
-    return Math.round(last);
-  };
-})();
-var RealtimeChart = ({
-  generator = defaultGenerator,
-  intervalMs = 2e3,
-  windowSize = 30,
-  warnThreshold = 70,
-  critThreshold = 85,
-  height = 240,
-  width = "100%"
-}) => {
-  const { grid, axisLabels, brand } = useChartTheme();
-  const [series, setSeries] = useState(() => Array.from({ length: windowSize }, () => generator()));
-  useEffect(() => {
-    const id = setInterval(() => {
-      setSeries((current) => [...current.slice(1), generator()]);
-    }, intervalMs);
-    return () => clearInterval(id);
-  }, [generator, intervalMs]);
-  const options = {
-    chart: {
-      type: "line",
-      animations: { enabled: true, dynamicAnimation: { enabled: true, speed: 800 } },
-      toolbar: { show: false },
-      zoom: { enabled: false },
-      fontFamily: "inherit"
-    },
-    colors: [brand],
-    stroke: { curve: "smooth", width: 2 },
-    dataLabels: { enabled: false },
-    grid,
-    xaxis: {
-      type: "numeric",
-      labels: { show: false },
-      axisBorder: { show: false },
-      axisTicks: { show: false }
-    },
-    yaxis: { min: 0, max: 100, labels: axisLabels },
-    annotations: {
-      yaxis: [
-        {
-          y: warnThreshold,
-          borderColor: "#f59e0b",
-          label: { text: "WARN", style: { color: "#fff", background: "#f59e0b" } }
-        },
-        {
-          y: critThreshold,
-          borderColor: "#ef4444",
-          label: { text: "CRIT", style: { color: "#fff", background: "#ef4444" } }
-        }
-      ]
-    },
-    tooltip: { theme: "dark" }
-  };
-  return /* @__PURE__ */ jsx(
-    ReactApexChart13,
-    {
-      type: "line",
-      options,
-      series: [{ name: "value", data: series }],
-      height,
-      width
-    }
-  );
-};
-var RadialBarChart = ({
-  series,
-  labels,
-  height = 320,
-  width = "100%"
-}) => {
-  const { palette } = useChartTheme();
-  const options = {
-    chart: { type: "radialBar", fontFamily: "inherit" },
-    colors: palette,
-    labels,
-    plotOptions: {
-      radialBar: {
-        track: { background: "rgba(150,150,150,0.15)" },
-        dataLabels: {
-          name: { fontSize: "12px" },
-          value: { fontSize: "14px", formatter: (v) => `${v}%` },
-          total: {
-            show: true,
-            label: "Avg",
-            formatter: () => `${Math.round(series.reduce((a, b) => a + b, 0) / series.length)}%`
-          }
-        }
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    ReactApexChart13,
-    {
-      type: "radialBar",
-      options,
-      series,
-      height,
-      width
-    }
-  );
-};
-var GradientRadial = ({
-  value,
-  label = "Score",
-  height = 280,
-  width = "100%"
-}) => {
-  const { brand } = useChartTheme();
-  const options = {
-    chart: { type: "radialBar", fontFamily: "inherit" },
-    colors: [brand],
-    fill: {
-      type: "gradient",
-      gradient: {
-        shade: "dark",
-        type: "horizontal",
-        shadeIntensity: 0.5,
-        gradientToColors: ["#10b981"],
-        inverseColors: false,
-        opacityFrom: 1,
-        opacityTo: 1,
-        stops: [0, 100]
-      }
-    },
-    plotOptions: {
-      radialBar: {
-        hollow: { size: "70%" },
-        dataLabels: {
-          name: { fontSize: "12px", offsetY: -10 },
-          value: { fontSize: "32px", fontWeight: 700, formatter: (v) => `${v}%` }
-        }
-      }
-    },
-    labels: [label]
-  };
-  return /* @__PURE__ */ jsx(
-    ReactApexChart13,
-    {
-      type: "radialBar",
-      options,
-      series: [value],
-      height,
-      width
-    }
-  );
-};
-var SemiCircleGauge = ({
-  value,
-  label = "",
-  color,
-  height = 200,
-  width = "100%"
-}) => {
-  const { brand } = useChartTheme();
-  const options = {
-    chart: { type: "radialBar", fontFamily: "inherit", sparkline: { enabled: true } },
-    colors: [color ?? brand],
-    plotOptions: {
-      radialBar: {
-        startAngle: -90,
-        endAngle: 90,
-        track: { background: "rgba(150,150,150,0.15)", strokeWidth: "100%" },
-        dataLabels: {
-          name: { offsetY: -10, fontSize: "12px" },
-          value: { offsetY: -45, fontSize: "24px", fontWeight: 700, formatter: (v) => `${v}%` }
-        }
-      }
-    },
-    labels: [label]
-  };
-  return /* @__PURE__ */ jsx(
-    ReactApexChart13,
-    {
-      type: "radialBar",
-      options,
-      series: [value],
-      height,
-      width
-    }
-  );
-};
-var StrokedGauge = ({
-  value,
-  label = "",
-  height = 280,
-  width = "100%"
-}) => {
-  const { brand } = useChartTheme();
-  const options = {
-    chart: { type: "radialBar", fontFamily: "inherit" },
-    colors: [brand],
-    stroke: { lineCap: "round", dashArray: 4 },
-    plotOptions: {
-      radialBar: {
-        hollow: { size: "70%" },
-        track: { background: "rgba(150,150,150,0.15)", strokeWidth: "100%" },
-        dataLabels: {
-          name: { fontSize: "12px", offsetY: -10 },
-          value: { fontSize: "32px", fontWeight: 700, formatter: (v) => `${v}%` }
-        }
-      }
-    },
-    labels: [label]
-  };
-  return /* @__PURE__ */ jsx(
-    ReactApexChart13,
-    {
-      type: "radialBar",
-      options,
-      series: [value],
-      height,
-      width
-    }
-  );
-};
-var DonutChart = ({
-  series,
-  labels,
-  rightLegend = false,
-  height = 280,
-  width = "100%"
-}) => {
-  const { palette } = useChartTheme();
-  const options = {
-    chart: { type: "donut", fontFamily: "inherit" },
-    colors: palette,
-    labels,
-    // 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: {
-        donut: { size: "68%", labels: { show: true, total: { show: true, label: "Total" } } }
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(ReactApexChart13, { type: "donut", options, series, height, width });
-};
-var DonutRightLegend = (props) => /* @__PURE__ */ jsx(DonutChart, { ...props, rightLegend: true });
-var Sparkline = ({
-  data,
-  color,
-  variant = "area",
-  height = 60,
-  width = "100%"
-}) => {
-  const { brand } = useChartTheme();
-  const options = {
-    chart: { sparkline: { enabled: true }, fontFamily: "inherit", type: variant },
-    colors: [color ?? brand],
-    stroke: { curve: "smooth", width: 2 },
-    fill: variant === "area" ? { type: "gradient", gradient: { opacityFrom: 0.45, opacityTo: 0.05 } } : void 0,
-    tooltip: { fixed: { enabled: false }, x: { show: false }, marker: { show: false } }
-  };
-  return /* @__PURE__ */ jsx(
-    ReactApexChart13,
-    {
-      type: variant,
-      options,
-      series: [{ name: "value", data }],
-      height,
-      width
-    }
-  );
-};
-var SparklineGroup = ({
-  items,
-  className
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className,
-    style: {
-      display: "grid",
-      gap: "1rem",
-      gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))"
-    },
-    children: items.map((it) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900",
-        children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400", children: it.label }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 text-2xl font-bold text-gray-900 dark:text-white", children: it.value }),
-          /* @__PURE__ */ jsx(Sparkline, { data: it.data, color: it.color, height: 50 })
-        ]
-      },
-      it.label
-    ))
-  }
-);
-var TreemapChart = ({ series, height = 320, width = "100%" }) => {
-  const { palette } = useChartTheme();
-  const options = {
-    chart: { type: "treemap", fontFamily: "inherit", toolbar: { show: false } },
-    colors: palette,
-    legend: { show: false },
-    dataLabels: { enabled: true, style: { fontSize: "12px" } },
-    plotOptions: { treemap: { distributed: true, enableShades: false } }
-  };
-  return /* @__PURE__ */ jsx(
-    ReactApexChart13,
-    {
-      type: "treemap",
-      options,
-      series,
-      height,
-      width
-    }
-  );
-};
-var BarChart = ({
-  series,
-  categories,
-  orientation = "vertical",
-  stacked = false,
-  colors,
-  formatValue,
-  showLegend,
-  borderRadius = 4,
-  height = 320,
-  width = "100%"
-}) => {
-  const { grid, axisLabels, palette } = useChartTheme();
-  const horizontal = orientation === "horizontal";
-  const legendVisible = showLegend ?? series.length > 1;
-  const valueFormatter = formatValue ?? ((v) => String(v));
-  const options = {
-    chart: {
-      type: "bar",
-      toolbar: { show: false },
-      zoom: { enabled: false },
-      stacked,
-      fontFamily: "inherit"
-    },
-    colors: colors ?? palette,
-    dataLabels: { enabled: false },
-    plotOptions: {
-      bar: {
-        horizontal,
-        borderRadius,
-        borderRadiusApplication: "end",
-        columnWidth: "55%"
-      }
-    },
-    grid,
-    xaxis: {
-      categories,
-      labels: {
-        ...axisLabels,
-        formatter: horizontal ? (val) => valueFormatter(Number(val)) : void 0
-      },
-      axisBorder: { show: false },
-      axisTicks: { show: false }
-    },
-    yaxis: {
-      labels: {
-        ...axisLabels,
-        formatter: horizontal ? void 0 : (val) => valueFormatter(Number(val))
-      }
-    },
-    legend: {
-      show: legendVisible,
-      position: "top",
-      horizontalAlign: "right",
-      labels: { colors: axisLabels.style.colors },
-      markers: { size: 5 },
-      formatter: (name) => escapeHtml(name)
-    },
-    // Tooltips and the legend are HTML: escape names, categories and values.
-    tooltip: {
-      theme: "dark",
-      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(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, BoxPlotChart, BubbleChart, COSMOS_BRAND, COSMOS_PALETTE, DonutChart, DonutRightLegend, GradientRadial, HeatmapChart, LineAreaChart, MixedChart, RadarChart, RadialBarChart, RangeBarChart, RealtimeChart, ScatterChart, SemiCircleGauge, Sparkline, SparklineGroup, StrokedGauge, TreemapChart, useChartTheme, useDarkMode };
+"use client";
+export * from './theme.js';
+export * from './LineAreaChart.js';
+export * from './RealtimeChart.js';
+export * from './RadialBarChart.js';
+export * from './GradientRadial.js';
+export * from './SemiCircleGauge.js';
+export * from './StrokedGauge.js';
+export * from './DonutChart.js';
+export * from './Sparkline.js';
+export * from './TreemapChart.js';
+export * from './BarChart.js';
+export * from './HeatmapChart.js';
+export * from './CalendarChart.js';
+export * from './RadarChart.js';
+export * from './ScatterChart.js';
+export * from './BoxPlotChart.js';
+export * from './RangeBarChart.js';
+export * from './MixedChart.js';
+export * from './BumpChart.js';
+export * from './FunnelChart.js';
+export * from './WaterfallChart.js';
+export * from './WorldMap.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map