@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/HeatmapChart.cjs

@@ -0,0 +1,146 @@
+"use client";
+'use strict';
+
+var chunkTPH5T3DA_cjs = require('./chunk-TPH5T3DA.cjs');
+require('./chunk-DBZQI4HM.cjs');
+var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.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 jsxRuntime = require('react/jsx-runtime');
+
+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 rangeOf = (value, ranges) => [...ranges].reverse().find((range) => value >= range.from && value <= range.to);
+var legendStyle = (position) => {
+  const column = position === "left" || position === "right";
+  return {
+    display: "flex",
+    flexDirection: column ? "column" : "row",
+    flexWrap: "wrap",
+    gap: column ? "0.375rem" : "0.25rem 1rem",
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    fontSize: chunkRLHGPHC7_cjs.TEXT_SIZE,
+    color: chunkLT3UC65O_cjs.MUTED
+  };
+};
+var SIDES = {
+  top: { flexDirection: "column" },
+  bottom: { flexDirection: "column-reverse" },
+  left: { flexDirection: "row" },
+  right: { flexDirection: "row-reverse" }
+};
+var HeatmapChart = ({
+  series,
+  categories,
+  colors,
+  ranges,
+  formatValue = String,
+  xTitle,
+  yTitle,
+  showValues = false,
+  showLegend = true,
+  legendPosition = "top",
+  emptyMessage = "No data",
+  ariaLabel,
+  height = 320,
+  width
+}) => {
+  const name = ariaLabel ?? `Heatmap: ${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 colorRanges = (ranges ?? evenRanges(
+    series.flatMap((s) => s.data),
+    colors ?? chunkLT3UC65O_cjs.SEQUENTIAL
+  )).map((range) => ({
+    ...range,
+    name: range.name ?? `${formatValue(range.from)} \u2013 ${formatValue(range.to)}`
+  }));
+  const cells = series.flatMap(
+    (s, row) => s.data.flatMap(
+      (value, column) => Number.isFinite(value) ? [
+        {
+          row,
+          column,
+          color: rangeOf(value, colorRanges)?.color ?? chunkLT3UC65O_cjs.seriesColor(row),
+          title: String(categories[column] ?? column),
+          label: s.name,
+          value: formatValue(value),
+          text: showValues ? formatValue(value) : void 0
+        }
+      ] : []
+    )
+  );
+  const legend = showLegend && /* @__PURE__ */ jsxRuntime.jsx("ul", { "data-heat-legend": "", style: legendStyle(legendPosition), children: colorRanges.map((range, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        style: {
+          width: "0.625rem",
+          height: "0.625rem",
+          borderRadius: 3,
+          background: range.color
+        }
+      }
+    ),
+    range.name
+  ] }, i)) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "1rem",
+        width: width ?? "100%",
+        height,
+        maxWidth: "100%",
+        ...SIDES[legendPosition]
+      },
+      children: [
+        legend,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: "1 1 0", minWidth: 0, minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkTPH5T3DA_cjs.HeatGrid,
+          {
+            rows: series.map((s) => s.name),
+            columns: categories.map(String),
+            cells,
+            ariaLabel: name,
+            xTitle,
+            yTitle
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+exports.HeatmapChart = HeatmapChart;
+//# sourceMappingURL=HeatmapChart.cjs.map
+//# sourceMappingURL=HeatmapChart.cjs.map

package/dist/HeatmapChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/HeatmapChart.tsx"],"names":["TEXT_SIZE","MUTED","hasNoData","ChartEmpty","SEQUENTIAL","seriesColor","jsx","jsxs","HeatGrid"],"mappings":"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","file":"HeatmapChart.cjs","sourcesContent":["import type { CSSProperties } from 'react';\nimport { TEXT_SIZE } from './core/axes';\nimport { MUTED, SEQUENTIAL, seriesColor } from './core/colors';\nimport { hasNoData } from './core/data';\nimport { ChartEmpty } from './core/frame';\nimport { HeatGrid, type HeatCell } from './core/HeatGrid';\nimport type {\n  ChartAxisTitleProps,\n  ChartEmptyProps,\n  ChartLegendPosition,\n  ChartLegendProps,\n  ChartProps,\n} from './types';\n\nexport type HeatmapColorRange = {\n  /** Lowest value of the range, inclusive. */\n  from: number;\n  /** Highest value of the range, inclusive. A value on a shared bound takes the later range. */\n  to: number;\n  color: string;\n  /** Legend label. Default: `from – to`, formatted with `formatValue`. */\n  name?: string;\n};\n\nexport type HeatmapChartProps = Omit<ChartProps, 'children'> &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartAxisTitleProps & {\n    /** One row per series, drawn top to bottom; one value per category. */\n    series: { name: string; data: number[] }[];\n    categories: (string | number)[];\n    /**\n     * Color steps, low to high, spread over the data range in buckets with\n     * round bounds. Default: five steps of the current accent, mixed over the\n     * card.\n     */\n    colors?: string[];\n    /**\n     * Explicit color ranges (thresholds such as OK / WARN / CRIT), which take\n     * precedence over `colors`. Cover every value: a cell outside all ranges\n     * falls back to a series color.\n     */\n    ranges?: HeatmapColorRange[];\n    /** Format the values in the tooltip, the legend and the cells. */\n    formatValue?: (value: number) => string;\n    /** Print each value inside its cell. */\n    showValues?: boolean;\n    /** Show the color legend. Default true. */\n    showLegend?: boolean;\n  };\n\n// Round bucket sizes, × 10^n. Finer than 1-2-5 so that the buckets fit the\n// data instead of leaving the top colors unused.\nconst NICE_STEPS = [1, 2, 2.5, 3, 4, 5, 6, 8, 10];\n\n/** The smallest round bucket size that is at least `value`. */\nconst niceStep = (value: number): number => {\n  const magnitude = 10 ** Math.floor(Math.log10(value));\n  const step = NICE_STEPS.find((m) => m * magnitude >= value) ?? 10;\n  return step * magnitude;\n};\n\n// Drops the float noise of `start + i * step` (0.30000000000000004).\nconst round = (value: number) => Number(value.toPrecision(12));\n\n/** `colors.length` contiguous ranges with round bounds covering every value. */\nconst evenRanges = (values: number[], colors: string[]): HeatmapColorRange[] => {\n  const finite = values.filter(Number.isFinite);\n  if (finite.length === 0 || colors.length === 0) return [];\n  const min = finite.reduce((a, b) => Math.min(a, b));\n  const max = finite.reduce((a, b) => Math.max(a, b));\n  let step = niceStep((max - min) / colors.length || Math.abs(max) || 1);\n  let start = Math.floor(min / step) * step;\n  // Flooring the start can leave the top value out: take the next round step.\n  while (start + step * colors.length < max) {\n    step = niceStep(step * 1.001);\n    start = Math.floor(min / step) * step;\n  }\n  return colors.map((color, i) => ({\n    from: round(start + step * i),\n    to: round(start + step * (i + 1)),\n    color,\n  }));\n};\n\n/** The range a value falls in; on a bound shared by two ranges, the later one. */\nconst rangeOf = (value: number, ranges: HeatmapColorRange[]) =>\n  [...ranges].reverse().find((range) => value >= range.from && value <= range.to);\n\nconst legendStyle = (position: ChartLegendPosition): CSSProperties => {\n  const column = position === 'left' || position === 'right';\n  return {\n    display: 'flex',\n    flexDirection: column ? 'column' : 'row',\n    flexWrap: 'wrap',\n    gap: column ? '0.375rem' : '0.25rem 1rem',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n    fontSize: TEXT_SIZE,\n    color: MUTED,\n  };\n};\n\nconst SIDES: Record<ChartLegendPosition, CSSProperties> = {\n  top: { flexDirection: 'column' },\n  bottom: { flexDirection: 'column-reverse' },\n  left: { flexDirection: 'row' },\n  right: { flexDirection: 'row-reverse' },\n};\n\nexport const HeatmapChart = ({\n  series,\n  categories,\n  colors,\n  ranges,\n  formatValue = String,\n  xTitle,\n  yTitle,\n  showValues = false,\n  showLegend = true,\n  legendPosition = 'top',\n  emptyMessage = 'No data',\n  ariaLabel,\n  height = 320,\n  width,\n}: HeatmapChartProps) => {\n  const name = ariaLabel ?? `Heatmap: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  const colorRanges = (\n    ranges ??\n    evenRanges(\n      series.flatMap((s) => s.data),\n      colors ?? SEQUENTIAL\n    )\n  ).map((range) => ({\n    ...range,\n    name: range.name ?? `${formatValue(range.from)} – ${formatValue(range.to)}`,\n  }));\n  const cells = series.flatMap((s, row) =>\n    s.data.flatMap((value, column): HeatCell[] =>\n      Number.isFinite(value)\n        ? [\n            {\n              row,\n              column,\n              color: rangeOf(value, colorRanges)?.color ?? seriesColor(row),\n              title: String(categories[column] ?? column),\n              label: s.name,\n              value: formatValue(value),\n              text: showValues ? formatValue(value) : undefined,\n            },\n          ]\n        : []\n    )\n  );\n  const legend = showLegend && (\n    <ul data-heat-legend=\"\" style={legendStyle(legendPosition)}>\n      {colorRanges.map((range, i) => (\n        <li key={i} style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>\n          <span\n            aria-hidden\n            style={{\n              width: '0.625rem',\n              height: '0.625rem',\n              borderRadius: 3,\n              background: range.color,\n            }}\n          />\n          {range.name}\n        </li>\n      ))}\n    </ul>\n  );\n  return (\n    <div\n      style={{\n        display: 'flex',\n        gap: '1rem',\n        width: width ?? '100%',\n        height,\n        maxWidth: '100%',\n        ...SIDES[legendPosition],\n      }}\n    >\n      {legend}\n      <div style={{ flex: '1 1 0', minWidth: 0, minHeight: 0 }}>\n        <HeatGrid\n          rows={series.map((s) => s.name)}\n          columns={categories.map(String)}\n          cells={cells}\n          ariaLabel={name}\n          xTitle={xTitle}\n          yTitle={yTitle}\n        />\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/HeatmapChart.js

@@ -0,0 +1,144 @@
+"use client";
+import { HeatGrid } from './chunk-ICL5K2CW.js';
+import './chunk-BFEDLXVW.js';
+import { TEXT_SIZE } from './chunk-RILUG7JB.js';
+import './chunk-VIOSQN4Z.js';
+import { hasNoData } from './chunk-UJIV5PVI.js';
+import { ChartEmpty } from './chunk-3N43QT36.js';
+import { seriesColor, SEQUENTIAL, MUTED } from './chunk-UATB2IRY.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+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 rangeOf = (value, ranges) => [...ranges].reverse().find((range) => value >= range.from && value <= range.to);
+var legendStyle = (position) => {
+  const column = position === "left" || position === "right";
+  return {
+    display: "flex",
+    flexDirection: column ? "column" : "row",
+    flexWrap: "wrap",
+    gap: column ? "0.375rem" : "0.25rem 1rem",
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    fontSize: TEXT_SIZE,
+    color: MUTED
+  };
+};
+var SIDES = {
+  top: { flexDirection: "column" },
+  bottom: { flexDirection: "column-reverse" },
+  left: { flexDirection: "row" },
+  right: { flexDirection: "row-reverse" }
+};
+var HeatmapChart = ({
+  series,
+  categories,
+  colors,
+  ranges,
+  formatValue = String,
+  xTitle,
+  yTitle,
+  showValues = false,
+  showLegend = true,
+  legendPosition = "top",
+  emptyMessage = "No data",
+  ariaLabel,
+  height = 320,
+  width
+}) => {
+  const name = ariaLabel ?? `Heatmap: ${series.map((s) => s.name).join(", ")}`;
+  if (hasNoData(series)) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const colorRanges = (ranges ?? evenRanges(
+    series.flatMap((s) => s.data),
+    colors ?? SEQUENTIAL
+  )).map((range) => ({
+    ...range,
+    name: range.name ?? `${formatValue(range.from)} \u2013 ${formatValue(range.to)}`
+  }));
+  const cells = series.flatMap(
+    (s, row) => s.data.flatMap(
+      (value, column) => Number.isFinite(value) ? [
+        {
+          row,
+          column,
+          color: rangeOf(value, colorRanges)?.color ?? seriesColor(row),
+          title: String(categories[column] ?? column),
+          label: s.name,
+          value: formatValue(value),
+          text: showValues ? formatValue(value) : void 0
+        }
+      ] : []
+    )
+  );
+  const legend = showLegend && /* @__PURE__ */ jsx("ul", { "data-heat-legend": "", style: legendStyle(legendPosition), children: colorRanges.map((range, i) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        style: {
+          width: "0.625rem",
+          height: "0.625rem",
+          borderRadius: 3,
+          background: range.color
+        }
+      }
+    ),
+    range.name
+  ] }, i)) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "1rem",
+        width: width ?? "100%",
+        height,
+        maxWidth: "100%",
+        ...SIDES[legendPosition]
+      },
+      children: [
+        legend,
+        /* @__PURE__ */ jsx("div", { style: { flex: "1 1 0", minWidth: 0, minHeight: 0 }, children: /* @__PURE__ */ jsx(
+          HeatGrid,
+          {
+            rows: series.map((s) => s.name),
+            columns: categories.map(String),
+            cells,
+            ariaLabel: name,
+            xTitle,
+            yTitle
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+export { HeatmapChart };
+//# sourceMappingURL=HeatmapChart.js.map
+//# sourceMappingURL=HeatmapChart.js.map

package/dist/HeatmapChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/HeatmapChart.tsx"],"names":[],"mappings":"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","file":"HeatmapChart.js","sourcesContent":["import type { CSSProperties } from 'react';\nimport { TEXT_SIZE } from './core/axes';\nimport { MUTED, SEQUENTIAL, seriesColor } from './core/colors';\nimport { hasNoData } from './core/data';\nimport { ChartEmpty } from './core/frame';\nimport { HeatGrid, type HeatCell } from './core/HeatGrid';\nimport type {\n  ChartAxisTitleProps,\n  ChartEmptyProps,\n  ChartLegendPosition,\n  ChartLegendProps,\n  ChartProps,\n} from './types';\n\nexport type HeatmapColorRange = {\n  /** Lowest value of the range, inclusive. */\n  from: number;\n  /** Highest value of the range, inclusive. A value on a shared bound takes the later range. */\n  to: number;\n  color: string;\n  /** Legend label. Default: `from – to`, formatted with `formatValue`. */\n  name?: string;\n};\n\nexport type HeatmapChartProps = Omit<ChartProps, 'children'> &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartAxisTitleProps & {\n    /** One row per series, drawn top to bottom; one value per category. */\n    series: { name: string; data: number[] }[];\n    categories: (string | number)[];\n    /**\n     * Color steps, low to high, spread over the data range in buckets with\n     * round bounds. Default: five steps of the current accent, mixed over the\n     * card.\n     */\n    colors?: string[];\n    /**\n     * Explicit color ranges (thresholds such as OK / WARN / CRIT), which take\n     * precedence over `colors`. Cover every value: a cell outside all ranges\n     * falls back to a series color.\n     */\n    ranges?: HeatmapColorRange[];\n    /** Format the values in the tooltip, the legend and the cells. */\n    formatValue?: (value: number) => string;\n    /** Print each value inside its cell. */\n    showValues?: boolean;\n    /** Show the color legend. Default true. */\n    showLegend?: boolean;\n  };\n\n// Round bucket sizes, × 10^n. Finer than 1-2-5 so that the buckets fit the\n// data instead of leaving the top colors unused.\nconst NICE_STEPS = [1, 2, 2.5, 3, 4, 5, 6, 8, 10];\n\n/** The smallest round bucket size that is at least `value`. */\nconst niceStep = (value: number): number => {\n  const magnitude = 10 ** Math.floor(Math.log10(value));\n  const step = NICE_STEPS.find((m) => m * magnitude >= value) ?? 10;\n  return step * magnitude;\n};\n\n// Drops the float noise of `start + i * step` (0.30000000000000004).\nconst round = (value: number) => Number(value.toPrecision(12));\n\n/** `colors.length` contiguous ranges with round bounds covering every value. */\nconst evenRanges = (values: number[], colors: string[]): HeatmapColorRange[] => {\n  const finite = values.filter(Number.isFinite);\n  if (finite.length === 0 || colors.length === 0) return [];\n  const min = finite.reduce((a, b) => Math.min(a, b));\n  const max = finite.reduce((a, b) => Math.max(a, b));\n  let step = niceStep((max - min) / colors.length || Math.abs(max) || 1);\n  let start = Math.floor(min / step) * step;\n  // Flooring the start can leave the top value out: take the next round step.\n  while (start + step * colors.length < max) {\n    step = niceStep(step * 1.001);\n    start = Math.floor(min / step) * step;\n  }\n  return colors.map((color, i) => ({\n    from: round(start + step * i),\n    to: round(start + step * (i + 1)),\n    color,\n  }));\n};\n\n/** The range a value falls in; on a bound shared by two ranges, the later one. */\nconst rangeOf = (value: number, ranges: HeatmapColorRange[]) =>\n  [...ranges].reverse().find((range) => value >= range.from && value <= range.to);\n\nconst legendStyle = (position: ChartLegendPosition): CSSProperties => {\n  const column = position === 'left' || position === 'right';\n  return {\n    display: 'flex',\n    flexDirection: column ? 'column' : 'row',\n    flexWrap: 'wrap',\n    gap: column ? '0.375rem' : '0.25rem 1rem',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n    fontSize: TEXT_SIZE,\n    color: MUTED,\n  };\n};\n\nconst SIDES: Record<ChartLegendPosition, CSSProperties> = {\n  top: { flexDirection: 'column' },\n  bottom: { flexDirection: 'column-reverse' },\n  left: { flexDirection: 'row' },\n  right: { flexDirection: 'row-reverse' },\n};\n\nexport const HeatmapChart = ({\n  series,\n  categories,\n  colors,\n  ranges,\n  formatValue = String,\n  xTitle,\n  yTitle,\n  showValues = false,\n  showLegend = true,\n  legendPosition = 'top',\n  emptyMessage = 'No data',\n  ariaLabel,\n  height = 320,\n  width,\n}: HeatmapChartProps) => {\n  const name = ariaLabel ?? `Heatmap: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  const colorRanges = (\n    ranges ??\n    evenRanges(\n      series.flatMap((s) => s.data),\n      colors ?? SEQUENTIAL\n    )\n  ).map((range) => ({\n    ...range,\n    name: range.name ?? `${formatValue(range.from)} – ${formatValue(range.to)}`,\n  }));\n  const cells = series.flatMap((s, row) =>\n    s.data.flatMap((value, column): HeatCell[] =>\n      Number.isFinite(value)\n        ? [\n            {\n              row,\n              column,\n              color: rangeOf(value, colorRanges)?.color ?? seriesColor(row),\n              title: String(categories[column] ?? column),\n              label: s.name,\n              value: formatValue(value),\n              text: showValues ? formatValue(value) : undefined,\n            },\n          ]\n        : []\n    )\n  );\n  const legend = showLegend && (\n    <ul data-heat-legend=\"\" style={legendStyle(legendPosition)}>\n      {colorRanges.map((range, i) => (\n        <li key={i} style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>\n          <span\n            aria-hidden\n            style={{\n              width: '0.625rem',\n              height: '0.625rem',\n              borderRadius: 3,\n              background: range.color,\n            }}\n          />\n          {range.name}\n        </li>\n      ))}\n    </ul>\n  );\n  return (\n    <div\n      style={{\n        display: 'flex',\n        gap: '1rem',\n        width: width ?? '100%',\n        height,\n        maxWidth: '100%',\n        ...SIDES[legendPosition],\n      }}\n    >\n      {legend}\n      <div style={{ flex: '1 1 0', minWidth: 0, minHeight: 0 }}>\n        <HeatGrid\n          rows={series.map((s) => s.name)}\n          columns={categories.map(String)}\n          cells={cells}\n          ariaLabel={name}\n          xTitle={xTitle}\n          yTitle={yTitle}\n        />\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/LineAreaChart.cjs

@@ -0,0 +1,98 @@
+"use client";
+'use strict';
+
+var chunkZ4LZFMDH_cjs = require('./chunk-Z4LZFMDH.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 react = require('react');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DASH = "6 4";
+var LineAreaChart = ({
+  series,
+  categories,
+  colors,
+  formatValue,
+  xTitle,
+  yTitle,
+  referenceLines,
+  referenceBands,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 280,
+  width,
+  showLegend,
+  legendPosition = "top",
+  variant = "area",
+  stacked = false,
+  markers = false
+}) => {
+  const uid = chunkK3R7JGOW_cjs.safeId(react.useId());
+  const hidden = chunkGZRMVE4X_cjs.useHiddenSeries();
+  const axis = chunkRLHGPHC7_cjs.useAxis();
+  const name = ariaLabel ?? `Area chart: ${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 legendVisible = showLegend ?? series.length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.AreaChart,
+    {
+      ...chunk6NRRABPF_cjs.frameProps({ height, width, ariaLabel: name }),
+      data: chunkK3R7JGOW_cjs.toRows(categories, series),
+      margin: { top: 4, right: 8, bottom: 0, left: 0 },
+      children: [
+        variant === "area" && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: series.map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: `${uid}-${i}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: chunkLT3UC65O_cjs.seriesColor(i, colors), stopOpacity: 0.32 }),
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: chunkLT3UC65O_cjs.seriesColor(i, colors), stopOpacity: 0 })
+        ] }, chunkK3R7JGOW_cjs.seriesKey(i))) }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...chunkRLHGPHC7_cjs.GRID_PROPS }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "category", ...axis, ...chunkRLHGPHC7_cjs.xAxisTitle(xTitle) }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { width: "auto", tickFormatter: formatValue, ...axis, ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle) }),
+        legendVisible && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { ...chunkGZRMVE4X_cjs.legendProps(legendPosition, hidden) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: /* @__PURE__ */ jsxRuntime.jsx(chunkT3K6Q34U_cjs.ChartTooltip, { format: formatValue }),
+            cursor: { stroke: chunkLT3UC65O_cjs.BORDER, strokeDasharray: "4 4" },
+            animationDuration: 150
+          }
+        ),
+        series.map((s, i) => {
+          const color = chunkLT3UC65O_cjs.seriesColor(i, colors);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Area,
+            {
+              name: s.name,
+              dataKey: chunkK3R7JGOW_cjs.seriesKey(i),
+              type: s.style === "step" ? "step" : "monotone",
+              stroke: color,
+              strokeWidth: 2.25,
+              strokeDasharray: s.style === "dashed" ? DASH : void 0,
+              stackId: stacked ? "stack" : void 0,
+              fill: variant === "area" ? `url(#${uid}-${i})` : "none",
+              dot: markers ? { r: 3.5, fill: chunkLT3UC65O_cjs.PANEL, stroke: color, strokeWidth: 2 } : false,
+              activeDot: { r: 5, fill: chunkLT3UC65O_cjs.PANEL, stroke: color, strokeWidth: 2.5 },
+              hide: hidden.hidden.has(chunkK3R7JGOW_cjs.seriesKey(i)),
+              ...chunkTYQWZR3S_cjs.ANIMATION
+            },
+            chunkK3R7JGOW_cjs.seriesKey(i)
+          );
+        }),
+        chunkZ4LZFMDH_cjs.referenceMarks({ referenceLines, referenceBands }),
+        children
+      ]
+    }
+  );
+};
+
+exports.LineAreaChart = LineAreaChart;
+//# sourceMappingURL=LineAreaChart.cjs.map
+//# sourceMappingURL=LineAreaChart.cjs.map

package/dist/LineAreaChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/LineAreaChart.tsx"],"names":["safeId","useId","useHiddenSeries","useAxis","hasNoData","ChartEmpty","jsxs","AreaChart","frameProps","toRows","jsx","seriesColor","seriesKey","CartesianGrid","GRID_PROPS","XAxis","xAxisTitle","YAxis","yAxisTitle","Legend","legendProps","Tooltip","ChartTooltip","BORDER","Area","PANEL","ANIMATION","referenceMarks"],"mappings":"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","file":"LineAreaChart.cjs","sourcesContent":["import { useId } from 'react';\nimport { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { GRID_PROPS, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { ChartTooltip } from './core/ChartTooltip';\nimport { legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { BORDER, PANEL, seriesColor } from './core/colors';\nimport { hasNoData, safeId, seriesKey, toRows } 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 LineAreaChartVariant = 'area' | 'line';\n\n/** How a series is drawn: a `solid` smooth curve, a `dashed` one, or a `step` line that jumps from value to value. */\nexport type LineAreaChartSeriesStyle = 'solid' | 'dashed' | 'step';\n\n// The dash of a `dashed` series, as the reference lines have it.\nconst DASH = '6 4';\n\nexport type LineAreaChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartAxisTitleProps &\n  ChartReferenceProps & {\n    series: {\n      name: string;\n      data: number[];\n      /** `solid` (default), `dashed` or `step`: a line that jumps from one value to the next, such as a quota or a replica count. */\n      style?: LineAreaChartSeriesStyle;\n    }[];\n    categories: (string | number)[];\n    /** Override the default Cosmos palette. */\n    colors?: string[];\n    /** Format the y-axis labels and the tooltip values. */\n    formatValue?: (value: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n    /** `area` (default) fills under each line with a gradient; `line` draws the lines alone. */\n    variant?: LineAreaChartVariant;\n    /** Pile the series on each other, so the top line is the sum: the share of each in a total. */\n    stacked?: boolean;\n    /** Mark every data point with a dot. Default off: a dot appears under the pointer only. */\n    markers?: boolean;\n  };\n\nexport const LineAreaChart = ({\n  series,\n  categories,\n  colors,\n  formatValue,\n  xTitle,\n  yTitle,\n  referenceLines,\n  referenceBands,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 280,\n  width,\n  showLegend,\n  legendPosition = 'top',\n  variant = 'area',\n  stacked = false,\n  markers = false,\n}: LineAreaChartProps) => {\n  const uid = safeId(useId());\n  const hidden = useHiddenSeries();\n  const axis = useAxis();\n  const name = ariaLabel ?? `Area chart: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  const legendVisible = showLegend ?? series.length > 1;\n  return (\n    <AreaChart\n      {...frameProps({ height, width, ariaLabel: name })}\n      data={toRows(categories, series)}\n      margin={{ top: 4, right: 8, bottom: 0, left: 0 }}\n    >\n      {variant === 'area' && (\n        <defs>\n          {series.map((_, i) => (\n            <linearGradient key={seriesKey(i)} id={`${uid}-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={seriesColor(i, colors)} stopOpacity={0.32} />\n              <stop offset=\"100%\" stopColor={seriesColor(i, colors)} stopOpacity={0} />\n            </linearGradient>\n          ))}\n        </defs>\n      )}\n      <CartesianGrid {...GRID_PROPS} />\n      <XAxis dataKey=\"category\" {...axis} {...xAxisTitle(xTitle)} />\n      <YAxis width=\"auto\" tickFormatter={formatValue} {...axis} {...yAxisTitle(yTitle)} />\n      {legendVisible && <Legend {...legendProps(legendPosition, hidden)} />}\n      <Tooltip\n        content={<ChartTooltip format={formatValue} />}\n        cursor={{ stroke: BORDER, strokeDasharray: '4 4' }}\n        animationDuration={150}\n      />\n      {series.map((s, i) => {\n        const color = seriesColor(i, colors);\n        return (\n          <Area\n            key={seriesKey(i)}\n            name={s.name}\n            dataKey={seriesKey(i)}\n            type={s.style === 'step' ? 'step' : 'monotone'}\n            stroke={color}\n            strokeWidth={2.25}\n            strokeDasharray={s.style === 'dashed' ? DASH : undefined}\n            stackId={stacked ? 'stack' : undefined}\n            fill={variant === 'area' ? `url(#${uid}-${i})` : 'none'}\n            dot={markers ? { r: 3.5, fill: PANEL, stroke: color, strokeWidth: 2 } : false}\n            activeDot={{ r: 5, fill: PANEL, stroke: color, strokeWidth: 2.5 }}\n            hide={hidden.hidden.has(seriesKey(i))}\n            {...ANIMATION}\n          />\n        );\n      })}\n      {referenceMarks({ referenceLines, referenceBands })}\n      {children}\n    </AreaChart>\n  );\n};\n"]}

package/dist/LineAreaChart.js

@@ -0,0 +1,96 @@
+"use client";
+import { referenceMarks } from './chunk-SGG7XKOY.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 { safeId, hasNoData, seriesKey, toRows } from './chunk-UJIV5PVI.js';
+import { ChartEmpty, frameProps } from './chunk-3N43QT36.js';
+import { seriesColor, BORDER, PANEL } from './chunk-UATB2IRY.js';
+import { useId } from 'react';
+import { AreaChart, CartesianGrid, XAxis, YAxis, Legend, Tooltip, Area } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DASH = "6 4";
+var LineAreaChart = ({
+  series,
+  categories,
+  colors,
+  formatValue,
+  xTitle,
+  yTitle,
+  referenceLines,
+  referenceBands,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 280,
+  width,
+  showLegend,
+  legendPosition = "top",
+  variant = "area",
+  stacked = false,
+  markers = false
+}) => {
+  const uid = safeId(useId());
+  const hidden = useHiddenSeries();
+  const axis = useAxis();
+  const name = ariaLabel ?? `Area chart: ${series.map((s) => s.name).join(", ")}`;
+  if (hasNoData(series)) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const legendVisible = showLegend ?? series.length > 1;
+  return /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      ...frameProps({ height, width, ariaLabel: name }),
+      data: toRows(categories, series),
+      margin: { top: 4, right: 8, bottom: 0, left: 0 },
+      children: [
+        variant === "area" && /* @__PURE__ */ jsx("defs", { children: series.map((_, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `${uid}-${i}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: seriesColor(i, colors), stopOpacity: 0.32 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: seriesColor(i, colors), stopOpacity: 0 })
+        ] }, seriesKey(i))) }),
+        /* @__PURE__ */ jsx(CartesianGrid, { ...GRID_PROPS }),
+        /* @__PURE__ */ jsx(XAxis, { dataKey: "category", ...axis, ...xAxisTitle(xTitle) }),
+        /* @__PURE__ */ jsx(YAxis, { width: "auto", tickFormatter: formatValue, ...axis, ...yAxisTitle(yTitle) }),
+        legendVisible && /* @__PURE__ */ jsx(Legend, { ...legendProps(legendPosition, hidden) }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(ChartTooltip, { format: formatValue }),
+            cursor: { stroke: BORDER, strokeDasharray: "4 4" },
+            animationDuration: 150
+          }
+        ),
+        series.map((s, i) => {
+          const color = seriesColor(i, colors);
+          return /* @__PURE__ */ jsx(
+            Area,
+            {
+              name: s.name,
+              dataKey: seriesKey(i),
+              type: s.style === "step" ? "step" : "monotone",
+              stroke: color,
+              strokeWidth: 2.25,
+              strokeDasharray: s.style === "dashed" ? DASH : void 0,
+              stackId: stacked ? "stack" : void 0,
+              fill: variant === "area" ? `url(#${uid}-${i})` : "none",
+              dot: markers ? { r: 3.5, fill: PANEL, stroke: color, strokeWidth: 2 } : false,
+              activeDot: { r: 5, fill: PANEL, stroke: color, strokeWidth: 2.5 },
+              hide: hidden.hidden.has(seriesKey(i)),
+              ...ANIMATION
+            },
+            seriesKey(i)
+          );
+        }),
+        referenceMarks({ referenceLines, referenceBands }),
+        children
+      ]
+    }
+  );
+};
+
+export { LineAreaChart };
+//# sourceMappingURL=LineAreaChart.js.map
+//# sourceMappingURL=LineAreaChart.js.map

package/dist/LineAreaChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/LineAreaChart.tsx"],"names":[],"mappings":"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","file":"LineAreaChart.js","sourcesContent":["import { useId } from 'react';\nimport { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { GRID_PROPS, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { ChartTooltip } from './core/ChartTooltip';\nimport { legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { BORDER, PANEL, seriesColor } from './core/colors';\nimport { hasNoData, safeId, seriesKey, toRows } 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 LineAreaChartVariant = 'area' | 'line';\n\n/** How a series is drawn: a `solid` smooth curve, a `dashed` one, or a `step` line that jumps from value to value. */\nexport type LineAreaChartSeriesStyle = 'solid' | 'dashed' | 'step';\n\n// The dash of a `dashed` series, as the reference lines have it.\nconst DASH = '6 4';\n\nexport type LineAreaChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartAxisTitleProps &\n  ChartReferenceProps & {\n    series: {\n      name: string;\n      data: number[];\n      /** `solid` (default), `dashed` or `step`: a line that jumps from one value to the next, such as a quota or a replica count. */\n      style?: LineAreaChartSeriesStyle;\n    }[];\n    categories: (string | number)[];\n    /** Override the default Cosmos palette. */\n    colors?: string[];\n    /** Format the y-axis labels and the tooltip values. */\n    formatValue?: (value: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n    /** `area` (default) fills under each line with a gradient; `line` draws the lines alone. */\n    variant?: LineAreaChartVariant;\n    /** Pile the series on each other, so the top line is the sum: the share of each in a total. */\n    stacked?: boolean;\n    /** Mark every data point with a dot. Default off: a dot appears under the pointer only. */\n    markers?: boolean;\n  };\n\nexport const LineAreaChart = ({\n  series,\n  categories,\n  colors,\n  formatValue,\n  xTitle,\n  yTitle,\n  referenceLines,\n  referenceBands,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 280,\n  width,\n  showLegend,\n  legendPosition = 'top',\n  variant = 'area',\n  stacked = false,\n  markers = false,\n}: LineAreaChartProps) => {\n  const uid = safeId(useId());\n  const hidden = useHiddenSeries();\n  const axis = useAxis();\n  const name = ariaLabel ?? `Area chart: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  const legendVisible = showLegend ?? series.length > 1;\n  return (\n    <AreaChart\n      {...frameProps({ height, width, ariaLabel: name })}\n      data={toRows(categories, series)}\n      margin={{ top: 4, right: 8, bottom: 0, left: 0 }}\n    >\n      {variant === 'area' && (\n        <defs>\n          {series.map((_, i) => (\n            <linearGradient key={seriesKey(i)} id={`${uid}-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={seriesColor(i, colors)} stopOpacity={0.32} />\n              <stop offset=\"100%\" stopColor={seriesColor(i, colors)} stopOpacity={0} />\n            </linearGradient>\n          ))}\n        </defs>\n      )}\n      <CartesianGrid {...GRID_PROPS} />\n      <XAxis dataKey=\"category\" {...axis} {...xAxisTitle(xTitle)} />\n      <YAxis width=\"auto\" tickFormatter={formatValue} {...axis} {...yAxisTitle(yTitle)} />\n      {legendVisible && <Legend {...legendProps(legendPosition, hidden)} />}\n      <Tooltip\n        content={<ChartTooltip format={formatValue} />}\n        cursor={{ stroke: BORDER, strokeDasharray: '4 4' }}\n        animationDuration={150}\n      />\n      {series.map((s, i) => {\n        const color = seriesColor(i, colors);\n        return (\n          <Area\n            key={seriesKey(i)}\n            name={s.name}\n            dataKey={seriesKey(i)}\n            type={s.style === 'step' ? 'step' : 'monotone'}\n            stroke={color}\n            strokeWidth={2.25}\n            strokeDasharray={s.style === 'dashed' ? DASH : undefined}\n            stackId={stacked ? 'stack' : undefined}\n            fill={variant === 'area' ? `url(#${uid}-${i})` : 'none'}\n            dot={markers ? { r: 3.5, fill: PANEL, stroke: color, strokeWidth: 2 } : false}\n            activeDot={{ r: 5, fill: PANEL, stroke: color, strokeWidth: 2.5 }}\n            hide={hidden.hidden.has(seriesKey(i))}\n            {...ANIMATION}\n          />\n        );\n      })}\n      {referenceMarks({ referenceLines, referenceBands })}\n      {children}\n    </AreaChart>\n  );\n};\n"]}