@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/RangeBarChart.js

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

package/dist/RangeBarChart.js.map

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

package/dist/RealtimeChart.cjs

@@ -0,0 +1,173 @@
+"use client";
+'use strict';
+
+var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.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 CLOCK = new Intl.DateTimeFormat("en-GB", {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hourCycle: "h23"
+});
+var clock = (timestamp) => CLOCK.format(timestamp);
+var Threshold = ({ y, label, color }) => /* @__PURE__ */ jsxRuntime.jsx(
+  recharts.ReferenceLine,
+  {
+    y,
+    stroke: color,
+    strokeWidth: 1.5,
+    strokeDasharray: "6 4",
+    label: label === "" ? void 0 : {
+      value: label,
+      position: "insideTopRight",
+      offset: 4,
+      // Text on the card, whatever the status color: it reads on every theme.
+      fill: chunkLT3UC65O_cjs.TEXT,
+      style: { fill: chunkLT3UC65O_cjs.TEXT, fontSize: chunkRLHGPHC7_cjs.TEXT_SIZE, fontWeight: 600 }
+    }
+  }
+);
+var createDefaultGenerator = () => {
+  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,
+  intervalMs = 2e3,
+  windowSize = 30,
+  min = 0,
+  max = 100,
+  warnThreshold = 70,
+  critThreshold = 85,
+  warnLabel = "WARN",
+  critLabel = "CRIT",
+  showTimeAxis = false,
+  xTitle,
+  yTitle,
+  formatValue,
+  ariaLabel,
+  children,
+  height = 240,
+  width
+}) => {
+  const axis = chunkRLHGPHC7_cjs.useAxis();
+  const [defaultGenerator] = react.useState(createDefaultGenerator);
+  const generate = generator ?? defaultGenerator;
+  const [mountedAt] = react.useState(Date.now);
+  const [samples, setSamples] = react.useState(
+    () => Array.from({ length: windowSize }, (_, index) => ({
+      time: mountedAt - (windowSize - 1 - index) * intervalMs,
+      value: generate()
+    }))
+  );
+  const [sizedFor, setSizedFor] = react.useState(windowSize);
+  if (sizedFor !== windowSize) {
+    setSizedFor(windowSize);
+    const missing = windowSize - samples.length;
+    const oldest = samples[0]?.time ?? mountedAt;
+    setSamples(
+      missing <= 0 ? samples.slice(samples.length - windowSize) : [
+        ...Array.from({ length: missing }, (_, index) => ({
+          time: oldest - (missing - index) * intervalMs,
+          value: generate()
+        })),
+        ...samples
+      ]
+    );
+  }
+  react.useEffect(() => {
+    const id = setInterval(() => {
+      setSamples((current) => [...current.slice(1), { time: Date.now(), value: generate() }]);
+    }, intervalMs);
+    return () => clearInterval(id);
+  }, [generate, intervalMs]);
+  const format = formatValue ?? String;
+  const tooltip = ({ active, payload }) => {
+    const sample = payload?.[0]?.payload;
+    if (!active || !sample) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkT3K6Q34U_cjs.TooltipCard,
+      {
+        title: showTimeAxis ? clock(sample.time) : void 0,
+        rows: [{ name: "value", value: format(sample.value), color: chunkLT3UC65O_cjs.SERIES[0] }]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.LineChart,
+    {
+      ...chunk6NRRABPF_cjs.frameProps({
+        height,
+        width,
+        ariaLabel: ariaLabel ?? "Live values, newest on the right"
+      }),
+      data: samples,
+      margin: { top: 4, right: 12, bottom: 0, left: 0 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...chunkRLHGPHC7_cjs.GRID_PROPS }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            dataKey: "time",
+            type: "number",
+            domain: ["dataMin", "dataMax"],
+            hide: !showTimeAxis,
+            tickFormatter: clock,
+            ...axis,
+            ...showTimeAxis ? chunkRLHGPHC7_cjs.xAxisTitle(xTitle) : {}
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            domain: [min, max],
+            allowDataOverflow: true,
+            interval: 0,
+            width: "auto",
+            tickFormatter: formatValue,
+            ...axis,
+            ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Threshold, { y: warnThreshold, label: warnLabel, color: chunkLT3UC65O_cjs.STATUS_WARN }),
+        /* @__PURE__ */ jsxRuntime.jsx(Threshold, { y: critThreshold, label: critLabel, color: chunkLT3UC65O_cjs.STATUS_CRIT }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: tooltip,
+            cursor: { stroke: chunkLT3UC65O_cjs.BORDER, strokeDasharray: "4 4" },
+            animationDuration: 0
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Line,
+          {
+            name: "value",
+            dataKey: "value",
+            type: "monotone",
+            stroke: chunkLT3UC65O_cjs.SERIES[0],
+            strokeWidth: 2,
+            dot: false,
+            activeDot: { r: 5, fill: chunkLT3UC65O_cjs.PANEL, stroke: chunkLT3UC65O_cjs.SERIES[0], strokeWidth: 2.5 },
+            isAnimationActive: false
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+exports.RealtimeChart = RealtimeChart;
+//# sourceMappingURL=RealtimeChart.cjs.map
+//# sourceMappingURL=RealtimeChart.cjs.map

package/dist/RealtimeChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RealtimeChart.tsx"],"names":["jsx","ReferenceLine","TEXT","TEXT_SIZE","useAxis","useState","useEffect","TooltipCard","SERIES","jsxs","LineChart","frameProps","CartesianGrid","GRID_PROPS","XAxis","xAxisTitle","YAxis","yAxisTitle","STATUS_WARN","STATUS_CRIT","Tooltip","BORDER","Line","PANEL"],"mappings":"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","file":"RealtimeChart.cjs","sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  CartesianGrid,\n  Line,\n  LineChart,\n  ReferenceLine,\n  Tooltip,\n  XAxis,\n  YAxis,\n  type TooltipContentProps,\n} from 'recharts';\nimport { GRID_PROPS, TEXT_SIZE, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { BORDER, PANEL, SERIES, STATUS_CRIT, STATUS_WARN, TEXT } from './core/colors';\nimport { frameProps } from './core/frame';\nimport type { ChartAxisTitleProps, ChartProps } from './types';\n\nexport type RealtimeChartProps = ChartProps &\n  ChartAxisTitleProps & {\n    /** Sample generator — defaults to a noisy walk between 30 and 80. */\n    generator?: () => number;\n    /** Interval in ms — defaults to 2000. */\n    intervalMs?: number;\n    windowSize?: number;\n    /** Bottom of the y axis. Default 0. */\n    min?: number;\n    /** Top of the y axis, above `min`. Default 100. */\n    max?: number;\n    warnThreshold?: number;\n    critThreshold?: number;\n    /** Text of the warning threshold's label. Default `WARN`; an empty string draws the line alone. */\n    warnLabel?: string;\n    /** Text of the critical threshold's label. Default `CRIT`; an empty string draws the line alone. */\n    critLabel?: string;\n    /**\n     * Label the x axis with the time of each sample (`14:03:25`, in local time), and the\n     * tooltip with it, and `xTitle` has an axis to name. Default off: no x axis.\n     */\n    showTimeAxis?: boolean;\n    /** Format the y-axis labels and the tooltip values. */\n    formatValue?: (value: number) => string;\n  };\n\ntype Sample = { time: number; value: number };\n\n// The time axis reads as a clock.\nconst CLOCK = new Intl.DateTimeFormat('en-GB', {\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n  hourCycle: 'h23',\n});\nconst clock = (timestamp: number) => CLOCK.format(timestamp);\n\n/** A threshold: a line in its status color, and a label on it unless `label` is empty. */\nconst Threshold = ({ y, label, color }: { y: number; label: string; color: string }) => (\n  <ReferenceLine\n    y={y}\n    stroke={color}\n    strokeWidth={1.5}\n    strokeDasharray=\"6 4\"\n    label={\n      label === ''\n        ? undefined\n        : {\n            value: label,\n            position: 'insideTopRight',\n            offset: 4,\n            // Text on the card, whatever the status color: it reads on every theme.\n            fill: TEXT,\n            style: { fill: TEXT, fontSize: TEXT_SIZE, fontWeight: 600 },\n          }\n    }\n  />\n);\n\n// One walk per chart: a module-level one made every instance continue the last.\nconst createDefaultGenerator = () => {\n  let last = 50;\n  return () => {\n    last += (Math.random() - 0.5) * 8;\n    last = Math.max(20, Math.min(95, last));\n    return Math.round(last);\n  };\n};\n\nexport const RealtimeChart = ({\n  generator,\n  intervalMs = 2000,\n  windowSize = 30,\n  min = 0,\n  max = 100,\n  warnThreshold = 70,\n  critThreshold = 85,\n  warnLabel = 'WARN',\n  critLabel = 'CRIT',\n  showTimeAxis = false,\n  xTitle,\n  yTitle,\n  formatValue,\n  ariaLabel,\n  children,\n  height = 240,\n  width,\n}: RealtimeChartProps) => {\n  const axis = useAxis();\n  const [defaultGenerator] = useState(createDefaultGenerator);\n  const generate = generator ?? defaultGenerator;\n  // Each sample with the time it was taken, for the time axis. A window that\n  // starts full is dated as if it had been filled at the sampling pace.\n  const [mountedAt] = useState(Date.now);\n  const [samples, setSamples] = useState<Sample[]>(() =>\n    Array.from({ length: windowSize }, (_, index) => ({\n      time: mountedAt - (windowSize - 1 - index) * intervalMs,\n      value: generate(),\n    }))\n  );\n\n  // A new windowSize trims the oldest samples or prepends new ones. Adjusted\n  // while rendering, which React redoes at once without painting the old window.\n  const [sizedFor, setSizedFor] = useState(windowSize);\n  if (sizedFor !== windowSize) {\n    setSizedFor(windowSize);\n    const missing = windowSize - samples.length;\n    const oldest = samples[0]?.time ?? mountedAt;\n    setSamples(\n      missing <= 0\n        ? samples.slice(samples.length - windowSize)\n        : [\n            ...Array.from({ length: missing }, (_, index) => ({\n              time: oldest - (missing - index) * intervalMs,\n              value: generate(),\n            })),\n            ...samples,\n          ]\n    );\n  }\n\n  useEffect(() => {\n    const id = setInterval(() => {\n      setSamples((current) => [...current.slice(1), { time: Date.now(), value: generate() }]);\n    }, intervalMs);\n    return () => clearInterval(id);\n  }, [generate, intervalMs]);\n\n  const format = formatValue ?? String;\n\n  // The card of the sample under the pointer, with its time when the axis shows it.\n  const tooltip = ({ active, payload }: Partial<TooltipContentProps>) => {\n    const sample = payload?.[0]?.payload as Sample | undefined;\n    if (!active || !sample) return null;\n    return (\n      <TooltipCard\n        title={showTimeAxis ? clock(sample.time) : undefined}\n        rows={[{ name: 'value', value: format(sample.value), color: SERIES[0] }]}\n      />\n    );\n  };\n\n  return (\n    <LineChart\n      {...frameProps({\n        height,\n        width,\n        ariaLabel: ariaLabel ?? 'Live values, newest on the right',\n      })}\n      data={samples}\n      margin={{ top: 4, right: 12, bottom: 0, left: 0 }}\n    >\n      <CartesianGrid {...GRID_PROPS} />\n      {/* The samples are not on a scale of their own unless the axis is the clock. */}\n      <XAxis\n        dataKey=\"time\"\n        type=\"number\"\n        domain={['dataMin', 'dataMax']}\n        hide={!showTimeAxis}\n        tickFormatter={clock}\n        {...axis}\n        {...(showTimeAxis ? xAxisTitle(xTitle) : {})}\n      />\n      <YAxis\n        domain={[min, max]}\n        allowDataOverflow\n        // The bottom tick is `min`: keep it.\n        interval={0}\n        width=\"auto\"\n        tickFormatter={formatValue}\n        {...axis}\n        {...yAxisTitle(yTitle)}\n      />\n      <Threshold y={warnThreshold} label={warnLabel} color={STATUS_WARN} />\n      <Threshold y={critThreshold} label={critLabel} color={STATUS_CRIT} />\n      <Tooltip\n        content={tooltip}\n        cursor={{ stroke: BORDER, strokeDasharray: '4 4' }}\n        animationDuration={0}\n      />\n      <Line\n        name=\"value\"\n        dataKey=\"value\"\n        type=\"monotone\"\n        stroke={SERIES[0]}\n        strokeWidth={2}\n        dot={false}\n        activeDot={{ r: 5, fill: PANEL, stroke: SERIES[0], strokeWidth: 2.5 }}\n        // A new sample moves the window: no animation, so the line redraws steadily.\n        isAnimationActive={false}\n      />\n      {children}\n    </LineChart>\n  );\n};\n"]}

package/dist/RealtimeChart.js

@@ -0,0 +1,171 @@
+"use client";
+import { useAxis, GRID_PROPS, xAxisTitle, yAxisTitle, TEXT_SIZE } from './chunk-RILUG7JB.js';
+import { TooltipCard } from './chunk-VIOSQN4Z.js';
+import { frameProps } from './chunk-3N43QT36.js';
+import { STATUS_WARN, STATUS_CRIT, BORDER, SERIES, PANEL, TEXT } from './chunk-UATB2IRY.js';
+import { useState, useEffect } from 'react';
+import { LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line, ReferenceLine } from 'recharts';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CLOCK = new Intl.DateTimeFormat("en-GB", {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hourCycle: "h23"
+});
+var clock = (timestamp) => CLOCK.format(timestamp);
+var Threshold = ({ y, label, color }) => /* @__PURE__ */ jsx(
+  ReferenceLine,
+  {
+    y,
+    stroke: color,
+    strokeWidth: 1.5,
+    strokeDasharray: "6 4",
+    label: label === "" ? void 0 : {
+      value: label,
+      position: "insideTopRight",
+      offset: 4,
+      // Text on the card, whatever the status color: it reads on every theme.
+      fill: TEXT,
+      style: { fill: TEXT, fontSize: TEXT_SIZE, fontWeight: 600 }
+    }
+  }
+);
+var createDefaultGenerator = () => {
+  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,
+  intervalMs = 2e3,
+  windowSize = 30,
+  min = 0,
+  max = 100,
+  warnThreshold = 70,
+  critThreshold = 85,
+  warnLabel = "WARN",
+  critLabel = "CRIT",
+  showTimeAxis = false,
+  xTitle,
+  yTitle,
+  formatValue,
+  ariaLabel,
+  children,
+  height = 240,
+  width
+}) => {
+  const axis = useAxis();
+  const [defaultGenerator] = useState(createDefaultGenerator);
+  const generate = generator ?? defaultGenerator;
+  const [mountedAt] = useState(Date.now);
+  const [samples, setSamples] = useState(
+    () => Array.from({ length: windowSize }, (_, index) => ({
+      time: mountedAt - (windowSize - 1 - index) * intervalMs,
+      value: generate()
+    }))
+  );
+  const [sizedFor, setSizedFor] = useState(windowSize);
+  if (sizedFor !== windowSize) {
+    setSizedFor(windowSize);
+    const missing = windowSize - samples.length;
+    const oldest = samples[0]?.time ?? mountedAt;
+    setSamples(
+      missing <= 0 ? samples.slice(samples.length - windowSize) : [
+        ...Array.from({ length: missing }, (_, index) => ({
+          time: oldest - (missing - index) * intervalMs,
+          value: generate()
+        })),
+        ...samples
+      ]
+    );
+  }
+  useEffect(() => {
+    const id = setInterval(() => {
+      setSamples((current) => [...current.slice(1), { time: Date.now(), value: generate() }]);
+    }, intervalMs);
+    return () => clearInterval(id);
+  }, [generate, intervalMs]);
+  const format = formatValue ?? String;
+  const tooltip = ({ active, payload }) => {
+    const sample = payload?.[0]?.payload;
+    if (!active || !sample) return null;
+    return /* @__PURE__ */ jsx(
+      TooltipCard,
+      {
+        title: showTimeAxis ? clock(sample.time) : void 0,
+        rows: [{ name: "value", value: format(sample.value), color: SERIES[0] }]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    LineChart,
+    {
+      ...frameProps({
+        height,
+        width,
+        ariaLabel: ariaLabel ?? "Live values, newest on the right"
+      }),
+      data: samples,
+      margin: { top: 4, right: 12, bottom: 0, left: 0 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { ...GRID_PROPS }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "time",
+            type: "number",
+            domain: ["dataMin", "dataMax"],
+            hide: !showTimeAxis,
+            tickFormatter: clock,
+            ...axis,
+            ...showTimeAxis ? xAxisTitle(xTitle) : {}
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            domain: [min, max],
+            allowDataOverflow: true,
+            interval: 0,
+            width: "auto",
+            tickFormatter: formatValue,
+            ...axis,
+            ...yAxisTitle(yTitle)
+          }
+        ),
+        /* @__PURE__ */ jsx(Threshold, { y: warnThreshold, label: warnLabel, color: STATUS_WARN }),
+        /* @__PURE__ */ jsx(Threshold, { y: critThreshold, label: critLabel, color: STATUS_CRIT }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: tooltip,
+            cursor: { stroke: BORDER, strokeDasharray: "4 4" },
+            animationDuration: 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Line,
+          {
+            name: "value",
+            dataKey: "value",
+            type: "monotone",
+            stroke: SERIES[0],
+            strokeWidth: 2,
+            dot: false,
+            activeDot: { r: 5, fill: PANEL, stroke: SERIES[0], strokeWidth: 2.5 },
+            isAnimationActive: false
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+export { RealtimeChart };
+//# sourceMappingURL=RealtimeChart.js.map
+//# sourceMappingURL=RealtimeChart.js.map

package/dist/RealtimeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RealtimeChart.tsx"],"names":[],"mappings":"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","file":"RealtimeChart.js","sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  CartesianGrid,\n  Line,\n  LineChart,\n  ReferenceLine,\n  Tooltip,\n  XAxis,\n  YAxis,\n  type TooltipContentProps,\n} from 'recharts';\nimport { GRID_PROPS, TEXT_SIZE, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { BORDER, PANEL, SERIES, STATUS_CRIT, STATUS_WARN, TEXT } from './core/colors';\nimport { frameProps } from './core/frame';\nimport type { ChartAxisTitleProps, ChartProps } from './types';\n\nexport type RealtimeChartProps = ChartProps &\n  ChartAxisTitleProps & {\n    /** Sample generator — defaults to a noisy walk between 30 and 80. */\n    generator?: () => number;\n    /** Interval in ms — defaults to 2000. */\n    intervalMs?: number;\n    windowSize?: number;\n    /** Bottom of the y axis. Default 0. */\n    min?: number;\n    /** Top of the y axis, above `min`. Default 100. */\n    max?: number;\n    warnThreshold?: number;\n    critThreshold?: number;\n    /** Text of the warning threshold's label. Default `WARN`; an empty string draws the line alone. */\n    warnLabel?: string;\n    /** Text of the critical threshold's label. Default `CRIT`; an empty string draws the line alone. */\n    critLabel?: string;\n    /**\n     * Label the x axis with the time of each sample (`14:03:25`, in local time), and the\n     * tooltip with it, and `xTitle` has an axis to name. Default off: no x axis.\n     */\n    showTimeAxis?: boolean;\n    /** Format the y-axis labels and the tooltip values. */\n    formatValue?: (value: number) => string;\n  };\n\ntype Sample = { time: number; value: number };\n\n// The time axis reads as a clock.\nconst CLOCK = new Intl.DateTimeFormat('en-GB', {\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n  hourCycle: 'h23',\n});\nconst clock = (timestamp: number) => CLOCK.format(timestamp);\n\n/** A threshold: a line in its status color, and a label on it unless `label` is empty. */\nconst Threshold = ({ y, label, color }: { y: number; label: string; color: string }) => (\n  <ReferenceLine\n    y={y}\n    stroke={color}\n    strokeWidth={1.5}\n    strokeDasharray=\"6 4\"\n    label={\n      label === ''\n        ? undefined\n        : {\n            value: label,\n            position: 'insideTopRight',\n            offset: 4,\n            // Text on the card, whatever the status color: it reads on every theme.\n            fill: TEXT,\n            style: { fill: TEXT, fontSize: TEXT_SIZE, fontWeight: 600 },\n          }\n    }\n  />\n);\n\n// One walk per chart: a module-level one made every instance continue the last.\nconst createDefaultGenerator = () => {\n  let last = 50;\n  return () => {\n    last += (Math.random() - 0.5) * 8;\n    last = Math.max(20, Math.min(95, last));\n    return Math.round(last);\n  };\n};\n\nexport const RealtimeChart = ({\n  generator,\n  intervalMs = 2000,\n  windowSize = 30,\n  min = 0,\n  max = 100,\n  warnThreshold = 70,\n  critThreshold = 85,\n  warnLabel = 'WARN',\n  critLabel = 'CRIT',\n  showTimeAxis = false,\n  xTitle,\n  yTitle,\n  formatValue,\n  ariaLabel,\n  children,\n  height = 240,\n  width,\n}: RealtimeChartProps) => {\n  const axis = useAxis();\n  const [defaultGenerator] = useState(createDefaultGenerator);\n  const generate = generator ?? defaultGenerator;\n  // Each sample with the time it was taken, for the time axis. A window that\n  // starts full is dated as if it had been filled at the sampling pace.\n  const [mountedAt] = useState(Date.now);\n  const [samples, setSamples] = useState<Sample[]>(() =>\n    Array.from({ length: windowSize }, (_, index) => ({\n      time: mountedAt - (windowSize - 1 - index) * intervalMs,\n      value: generate(),\n    }))\n  );\n\n  // A new windowSize trims the oldest samples or prepends new ones. Adjusted\n  // while rendering, which React redoes at once without painting the old window.\n  const [sizedFor, setSizedFor] = useState(windowSize);\n  if (sizedFor !== windowSize) {\n    setSizedFor(windowSize);\n    const missing = windowSize - samples.length;\n    const oldest = samples[0]?.time ?? mountedAt;\n    setSamples(\n      missing <= 0\n        ? samples.slice(samples.length - windowSize)\n        : [\n            ...Array.from({ length: missing }, (_, index) => ({\n              time: oldest - (missing - index) * intervalMs,\n              value: generate(),\n            })),\n            ...samples,\n          ]\n    );\n  }\n\n  useEffect(() => {\n    const id = setInterval(() => {\n      setSamples((current) => [...current.slice(1), { time: Date.now(), value: generate() }]);\n    }, intervalMs);\n    return () => clearInterval(id);\n  }, [generate, intervalMs]);\n\n  const format = formatValue ?? String;\n\n  // The card of the sample under the pointer, with its time when the axis shows it.\n  const tooltip = ({ active, payload }: Partial<TooltipContentProps>) => {\n    const sample = payload?.[0]?.payload as Sample | undefined;\n    if (!active || !sample) return null;\n    return (\n      <TooltipCard\n        title={showTimeAxis ? clock(sample.time) : undefined}\n        rows={[{ name: 'value', value: format(sample.value), color: SERIES[0] }]}\n      />\n    );\n  };\n\n  return (\n    <LineChart\n      {...frameProps({\n        height,\n        width,\n        ariaLabel: ariaLabel ?? 'Live values, newest on the right',\n      })}\n      data={samples}\n      margin={{ top: 4, right: 12, bottom: 0, left: 0 }}\n    >\n      <CartesianGrid {...GRID_PROPS} />\n      {/* The samples are not on a scale of their own unless the axis is the clock. */}\n      <XAxis\n        dataKey=\"time\"\n        type=\"number\"\n        domain={['dataMin', 'dataMax']}\n        hide={!showTimeAxis}\n        tickFormatter={clock}\n        {...axis}\n        {...(showTimeAxis ? xAxisTitle(xTitle) : {})}\n      />\n      <YAxis\n        domain={[min, max]}\n        allowDataOverflow\n        // The bottom tick is `min`: keep it.\n        interval={0}\n        width=\"auto\"\n        tickFormatter={formatValue}\n        {...axis}\n        {...yAxisTitle(yTitle)}\n      />\n      <Threshold y={warnThreshold} label={warnLabel} color={STATUS_WARN} />\n      <Threshold y={critThreshold} label={critLabel} color={STATUS_CRIT} />\n      <Tooltip\n        content={tooltip}\n        cursor={{ stroke: BORDER, strokeDasharray: '4 4' }}\n        animationDuration={0}\n      />\n      <Line\n        name=\"value\"\n        dataKey=\"value\"\n        type=\"monotone\"\n        stroke={SERIES[0]}\n        strokeWidth={2}\n        dot={false}\n        activeDot={{ r: 5, fill: PANEL, stroke: SERIES[0], strokeWidth: 2.5 }}\n        // A new sample moves the window: no animation, so the line redraws steadily.\n        isAnimationActive={false}\n      />\n      {children}\n    </LineChart>\n  );\n};\n"]}