@sckyzo/cosmos-charts 0.3.1 → 0.4.1

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to `@sckyzo/cosmos-charts` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.1](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-charts@0.4.0...@sckyzo/cosmos-charts@0.4.1) (2026-10-31)
+
+
+### Bug Fixes
+
+* **charts:** fade a scrolling heat grid and drop values that don't fit ([e8ff4ab](https://github.com/SckyzO/cosmos/commit/e8ff4ab015777ac6e2d6ef015d324e412370f00a))
+* **charts:** keep room for the lowest label of a RealtimeChart ([5dac109](https://github.com/SckyzO/cosmos/commit/5dac10929560e8034543c80a78c965285ee53336))
+* **charts:** put a reference band's label at the bottom of the band ([13ee80b](https://github.com/SckyzO/cosmos/commit/13ee80b338034903b0f940abfbfb5acbfb641f1c))
+
+## [0.4.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-charts@0.3.1...@sckyzo/cosmos-charts@0.4.0) (2026-10-30)
+
+
+### Documentation
+
+* **charts:** add the `@source` line to the install steps ([80f1687](https://github.com/SckyzO/cosmos/commit/80f16872bb9e68ad13924034a15eb6d2a123695b))
+
 ## [0.3.1](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-charts@0.3.0...@sckyzo/cosmos-charts@0.3.1) (2026-10-30)
 
 

package/README.md

@@ -2,41 +2,31 @@
 
 [![npm](https://img.shields.io/npm/v/@sckyzo/cosmos-charts)](https://www.npmjs.com/package/@sckyzo/cosmos-charts)
 
-Cosmos charts — opinionated chart wrappers themed for the Cosmos design system, drawn with [Recharts](https://recharts.github.io/).
+Cosmos charts: opinionated chart wrappers themed for the Cosmos design system, drawn with
+[Recharts](https://recharts.github.io/). Kept in a dedicated package so that `@sckyzo/cosmos-react`
+consumers who don't render charts don't ship a chart library.
 
-Kept in a dedicated subpackage so that `@sckyzo/cosmos-react` consumers who don't render charts don't ship a chart library.
-
-Each chart is a module of its own and the package declares no side effects, so a bundler ships the charts you import and leaves the others out: `import { DonutChart } from '@sckyzo/cosmos-charts'` brings the donut, not the line or bar charts. `recharts` is a dependency of the package, installed with it. So are `d3-geo` and `topojson-client`, which only `WorldMap` loads: a bundler leaves them out unless you import it.
+Each chart is a module of its own and the package declares no side effects, so a bundler ships
+the charts you import and leaves the others out.
 
 ## Install
 
 ```bash
-pnpm add @sckyzo/cosmos-charts
-pnpm add react react-dom   # peers, react 19+
+npm install @sckyzo/cosmos-charts
+npm install react react-dom   # peers, react 19+
 ```
 
-## How the charts are drawn
-
-Every chart is drawn with Recharts, except `HeatmapChart` and `FunnelChart`, drawn in HTML and SVG (Recharts has no heatmap, and its bars cannot be joined by a flow), and `WorldMap`, an SVG of its own (Recharts has no map). The rules every chart follows:
-
-- **Colors are CSS variables** handed straight to the SVG, with a hex fallback: a theme, accent or text size switch on `<html>` repaints the chart with no observer and no redraw. `@sckyzo/cosmos-theme` always emits what the charts read (`--color-brand-500`, the status and semantic colors, `--color-chart-2` to `--color-chart-8`).
-- **The default palette** is the accent, then seven hues. Each accent lists its own seven in the theme CSS, skipping the hues that look like it (the teal accent has no teal series), and none of the first four reads as a status. `colors` overrides it.
-- **Text** is 12px at the normal text size and follows the text size setting; the font is inherited, and the axes make room for their labels again once a web font has loaded.
-- **The tooltip and the legend are React**: a series name, a category or a title with markup shows as written. The legend keeps the series order, and an item is a button that hides and shows its series (Enter and Space work).
-- **`children`** takes Recharts elements drawn inside the chart, after the ones it builds, for what a chart has no prop for.
-
-```tsx
-import { ReferenceLine } from 'recharts';
+The three Cosmos packages share one version number: install the same version of each. The charts
+read their colors from the CSS variables of `@sckyzo/cosmos-theme`, so they follow its themes and
+accents; without the theme CSS they fall back to a built-in palette. To set the theme up, see
+[Getting started](https://github.com/SckyzO/cosmos/blob/main/docs/getting-started.md). A few
+charts carry Tailwind 4 classes, so point Tailwind at this package too, in the CSS file that
+imports it, next to the `@source` line for `@sckyzo/cosmos-react`:
 
-<LineAreaChart series={series} categories={hours} yTitle="CPU usage (%)">
-  <ReferenceLine y={80} stroke="var(--color-status-warn)" strokeDasharray="6 4" />
-</LineAreaChart>;
+```css
+@source '../node_modules/@sckyzo/cosmos-charts/dist/**/*.{js,cjs}';
 ```
 
-`children` reads the chart's data and axes, so a `y` is in the units of the series. Add `recharts` to your app at the version this package depends on (`3.10.1`): two copies of Recharts do not share a chart's context, and the elements would not find it. Pass CSS variables for colors (`var(--color-status-warn)`) and they follow the theme.
-
-Animation is short (500 ms) and off under `prefers-reduced-motion`. A chart fills the width it is given and never widens its parent (`width` caps it).
-
 ## Use
 
 ```tsx
@@ -48,90 +38,15 @@ import { LineAreaChart } from '@sckyzo/cosmos-charts';
 />;
 ```
 
-The default palette is eight categorical colors, the accent first and then hues apart from each other (cyan, violet, pink, slate, orange, teal, lime): green, amber and red are kept out of the first four places so that series never read as statuses, and treemap tiles take their color from their name. A chart whose series are statuses passes the status colors as `colors`: `['var(--color-success-500)', 'var(--color-warning-500)', 'var(--color-error-500)']`, or `--color-status-warn` and `--color-status-crit` for the monitoring statuses. Without the theme CSS, the charts fall back to the hex values of `COSMOS_PALETTE`; `COSMOS_BRAND` is the default blue, and `readableOn(color)` picks the white or black text that reads on a `#rrggbb` color.
-
-Most charts take `colors`, which overrides the Cosmos palette, and `formatValue`, which formats the values in their labels and tooltips (a unit, a precision). `formatValue` can be any function: a new one on every render redraws nothing. The gauges (`GradientRadial`, `SemiCircleGauge`, `StrokedGauge`) also take `min` and `max` (default 0 and 100), a `color` for the arc (the accent by default; on `GradientRadial` the color the arc starts from), and show a percent unless given a `formatValue`. A gauge is an image named by its label and value (`ariaLabel` replaces the label in the name). `SemiCircleGauge` keeps the accent unless given `warnAt` or `critAt`, in the units of the value, which color its arc by status: the theme's success color below `warnAt`, its warning color from `warnAt` and its critical color from `critAt` (`color` replaces either). It also takes `showRange`, which writes `min` and `max` under the ends of its arc, and its `height` (a number of pixels, 120 by default) is the most it takes: the arc is as wide as its box allows, up to that height. It draws a mark across its arc at `target` (a value on the scale of `min` and `max`, stopped at an end when out of range), and the target joins its name after the value (`Load: 67%, target 80%`).
-
-The charts with a horizontal and a vertical axis (`LineAreaChart`, `BarChart`, `MixedChart`, `HeatmapChart`, `BoxPlotChart`, `RangeBarChart`, `RealtimeChart`, `ScatterChart`, `BubbleChart` and `WaterfallChart`) take `xTitle`, drawn under the horizontal axis, and `yTitle`, drawn beside the vertical one, as plain text: a horizontal `BarChart` puts its values on the horizontal axis. `MixedChart` also takes `yRightTitle` for its second axis. Its series are `column`, `line` or `area` (a filled line, behind the columns), and `stackedColumns` piles the columns on each other, apart on each axis. `RealtimeChart` only has an x axis with `showTimeAxis`.
-
-`LineAreaChart`, `BarChart`, `MixedChart`, `ScatterChart`, `BubbleChart`, `BoxPlotChart` and `RangeBarChart` take `referenceLines` and `referenceBands`: `{ value, label?, intent?, dashed? }` draws a line across the plot at a value of the value axis, `{ from, to, label?, intent? }` shades the plot between two values, behind the series. The value axis is the vertical one, the horizontal one on horizontal bars and boxes, and the time axis of `RangeBarChart` (the values are timestamps in milliseconds); `MixedChart` reads its left axis, or its right one when no series is on the left. `intent` (`neutral`, the default, `warning`, `danger` or `success`) picks the color from the theme, so a theme switch repaints it; a label is plain text that follows the text size. A mark outside the data makes the axis reach it. For a diagonal line, a vertical one or anything else, `children` takes a Recharts `ReferenceLine`.
-
-`LineAreaChart` draws an area under each line; `variant="line"` draws the lines alone, `stacked` piles the series on each other, `markers` puts a dot on every point, and a series can take `style: 'dashed'` or `'step'` (a line that jumps from one value to the next) in place of the smooth curve.
-
-`BarChart` colors each bar from its value with `colorByValue(value, index)` (a threshold, a ranking; `undefined` keeps the series color), gives each category a color of the palette with `distributed`, and draws the bars below zero in `negativeColor`; that is the order of precedence, and the tooltip chip of a bar follows the bar.
-
-`Sparkline` draws an `area` (default), a `line` or `bar` columns; the bar scale starts at zero (the lower of 0 and the lowest value, unless `min` is set) and the values below zero hang under a dashed zero line in the danger color. It takes `label` and `formatValue` for its tooltip, and `min` and `max` to pin its scale: it fits its own data otherwise, so sparklines read against each other (the rows of a table) share the same two. In a KPI tile, pass it to the `chart` slot of `KpiCard` (`@sckyzo/cosmos-react`): `<KpiCard label="Requests/s" value="2.3k" chart={<Sparkline data={data} />} />`. The two packages do not depend on each other, so the chart is yours to pass.
-
-`RealtimeChart` takes `min` and `max` for its y axis (0 and 100 by default), `showTimeAxis` to label the x axis with the time of each sample, and `warnLabel` and `critLabel` to rename the threshold labels.
-
-`TreemapChart` writes the value of each tile under its name when given `showValues`, and draws its group headers in the card's colors. Its tiles take the text color that reads on them (white or black). `children` are drawn over the tiles, in the chart's own SVG space.
-
-`HeatmapChart` is a grid of rounded cells, not a Recharts chart, so it takes no `children`. Its default scale is five steps of the accent mixed over the card, each told apart from the next and the lowest still a cell of its own on a dark card; `colors` replaces the steps and `ranges` sets thresholds with their own colors (a value on a bound shared by two ranges takes the later one). The grid is one tab stop: the arrow keys move between cells and show the tooltip of the cell they land on, Home and End go to the ends of the row, Ctrl+Home and Ctrl+End to the ends of the grid. Each cell is named `row, column: value` for screen readers.
-
-`CalendarChart` is a day-by-day heatmap built on the same grid, so it takes no `children` either. `data` is `{ day: 'YYYY-MM-DD', value }[]` (a day listed twice adds up, a day with no entry is empty), `from` and `to` bound the days shown. The `calendar` layout draws one block per year, with the months named above their first full week and Mon / Wed / Fri beside the rows; `range` draws one continuous grid, with larger cells when it is short. Weeks start on Monday, or on Sunday with `weekStart={0}`; `locale` names the months, weekdays and dates. Days are read and drawn in UTC. The scale is the neutral track for a day with nothing, then four steps of the accent (the dark themes use lower shares and a light accent for the top one) splitting `(0, max]` evenly, with a "Less … More" key under the grid, right-aligned with it (`lessLabel` and `moreLabel` replace the words). A grid wider than its box scrolls inside it, the weekday names staying in view. The title and the total are the host's. Keyboard as `HeatmapChart`, one tab stop per year block.
-
-`BumpChart` draws how a ranking changes over periods: `series` is `{ name, data: { x, rank }[] }[]`, 1 is the top, and the periods are every `x` once in the order they first appear. A series that enters late has no point before it enters, and ties are allowed (tied series are drawn apart around their rank). Each name is written at both ends of its line with its color, so there is no legend; on a narrow chart (under 560px) only the right-hand names stay, cut short, and where the periods get too close for the discs the points become dots. `points` is `rank` (default, a disc with the rank in it) or `dot`. A pointer over a line, a point or a name, or the arrows Up and Down on the keyboard (Escape lets go), gives that series a thicker line and fades the others. The tooltip, which Left and Right walk period by period, gives the period, the rank and the change from the previous period in words (`unchanged vs May`, `up 2 vs Apr`, `down 1 vs Mar`, `new entry`), never by color alone. `formatValue` formats the rank in the tooltip, and `children` takes Recharts elements, where a `y` is a rank.
-
-`FunnelChart` draws one centred bar per stage, as wide as its value against the largest stage (the first, unless a stage grows), joined to the next by a translucent flow. The stages keep the order given and are never sorted: a stage larger than the one before it is allowed, and shows a rate over 100%. The names sit on the left; on the right, the value, a chip with the rate from the previous stage (`65.4%`, `100%` for the first) and, beside it, the rate from the first (`20.5% of Visits`); `showConversion={false}` leaves the values alone. The accent fades from the first stage to the last, and `colors` gives one color per stage instead. `formatValue` formats the values, percentages always have one decimal. In a box under 520px wide each name and value go on one line above their bar, and the rate from the first stage stays in the tooltip. Like `HeatmapChart` it is HTML and SVG, not a Recharts chart, so it takes no `children`: the flow joins two bars at their own edges, which a Recharts bar can't be drawn to do. It is one tab stop: the arrow keys, Home and End walk the stages and show the tooltip of the one they land on. Stages that are all at 0 draw `emptyMessage`.
-
-`WaterfallChart` walks a running total through gains and losses: `data` is `{ label, value?, kind? }[]`. A step (the default `kind`) carries a signed `value` and floats between the total before and after it; a `subtotal` is drawn from 0 to the running total at that point (never the sum since the last cut); a `total` is drawn the same way, and a `value` on it sets the running total to it, which is how an opening balance, or a known balance mid-walk, is written. A step without a `value` counts as 0. Increases take the theme's success color, decreases its error color and totals the accent (subtotals the same, lighter); `colors: { positive, negative, total }` overrides them. The color is never alone: the value above a bar and the tooltip carry the sign (`+310k`, `−265k`, with a real minus; `formatValue` gets the magnitude) and the kind in words (Increase, Decrease, Subtotal, Total), and the tooltip of a step adds the running total after it. `showLabels` forces the values above the bars on or off (by default they show with 12 bars or fewer in a chart at least 480px wide), `showConnectors` (default on) draws the dashed line from the top of a bar to the next one. Below 480px the category names tilt. It takes `xTitle`, `yTitle` and `children`.
-
-`WorldMap` colors the countries of a world map by value: `data` is `{ FR: 16400, US: 48200 }`, keyed by ISO 3166-1 alpha-2 code in upper case, and `geography` is a TopoJSON `Topology` with a `countries` object. The package ships no map data: you pass `world-atlas` (ISC), and the `110m` file is enough for a dashboard card (105 kB, 39 kB gzipped; `countries-50m.json` draws the small countries too). Antarctica is left out, and a code the map does not hold is not drawn.
-
-```tsx
-import { WorldMap } from '@sckyzo/cosmos-charts';
-import type { Topology } from 'topojson-specification';
-import world from 'world-atlas/countries-110m.json';
-
-// An imported JSON file is typed as plain strings: the cast says it is a Topology.
-<WorldMap
-  data={{ FR: 16400, US: 48200, DE: 21300 }}
-  geography={world as unknown as Topology}
-  label="visitors"
-  formatValue={(value) => `${(value / 1000).toFixed(1)}k`}
-/>;
-```
-
-The scale has five steps of the accent, cut by quantiles of the values so that each holds about as many countries (a linear scale lets one large country wash the others out); a country without a value is gray. `min` and `max` clamp every value before the steps are cut, so a value over `max` counts as `max`: they pin the ends of the scale, and the legend starts at `min`. The legend gives the lower bound of each step (`2.7k+`, through `formatValue`) and a "No data" swatch; `showLegend={false}` hides it. It is its own SVG, so it takes no `children`, and a map with no value (an empty `data`, or no code the map holds) draws the bare map, with no legend and no `emptyMessage`. The map scales with the width it is given and keeps its proportions (about 2:1) unless `height` is set. It is one tab stop: the arrow keys walk the countries that have a value, largest first (Home and End go to the largest and the smallest), the one in focus is outlined and shows its card, and `onSelect(code)` is called by a click, or by Enter or Space on the country in focus. For screen readers the map is an image named by `ariaLabel`, and a visually hidden table (country, value, largest first) lists the data. `geography` needs `@types/topojson-specification` for its type, installed with the package.
-
-`RadarChart` draws its polygons as large as its box allows and leaves the scale (0, 20 … 100) off them unless given `showScale`. `DonutChart` writes the total in the middle, and the value and name of the slice under the pointer in its place (`centerValue` and `centerLabel` replace the sum and "Total"; `variant="pie"` fills the disc and writes nothing in it; `legendValues` adds each slice's value and its share, in whole percents that add up to 100, to the legend, in columns when the legend is on a side); `RadialBarChart` does the same with the average and the ring.
-
-The charts that draw a legend take `legendPosition` (`top`, `right`, `bottom` or `left`): the legend sits above the plot by default, below the donut on `DonutChart`. `left` and `right` are the sides of the screen, not of the line: a chart keeps its left-to-right axis in a right-to-left page, and its legend stays where you put it.
-
-A chart with no series, or only empty ones, draws `emptyMessage` (default `No data`, an empty string for nothing) in place of the plot. The gauges, which always have a value, and `RealtimeChart`, which fills its own window, have no such prop.
-
-For what a chart has no prop for, every chart but `HeatmapChart`, `CalendarChart`, `FunnelChart` and `WorldMap` takes `children` (see above).
-
-Every chart takes an `ariaLabel`, the name screen readers read for it. Without one, the chart is named from its type and its series. Tab reaches a chart, and the arrow keys move from point to point and announce each one: ArrowRight goes to the next point, ArrowLeft to the previous one, and on a chart with its categories on the vertical axis (a horizontal `BarChart` or `BoxPlotChart`, `RangeBarChart`) ArrowDown and ArrowRight go to the next category and ArrowUp and ArrowLeft to the previous one. The gauges and `Sparkline` show a single value or a trend: they are named images, out of the tab order.
-
-## Charts shipped
+## Documentation
 
-| Chart                          | Notes                                                         |
-| ------------------------------ | ------------------------------------------------------------- |
-| `BarChart`                     | Vertical or horizontal bars, grouped or stacked               |
-| `RangeBarChart`                | Time ranges per row on a time axis (timeline)                 |
-| `MixedChart`                   | Columns and lines, optional second y axis                     |
-| `LineAreaChart`                | Smooth area + gradient fill, legend when 2+ series            |
-| `RealtimeChart`                | Live updates with WARN/CRIT threshold lines                   |
-| `RadialBarChart`               | Multi-series radial gauge                                     |
-| `GradientRadial`               | Single gradient radial                                        |
-| `SemiCircleGauge`              | Half-donut gauge                                              |
-| `StrokedGauge`                 | Dashed-stroke radial                                          |
-| `DonutChart`                   | Donut, legend below by default                                |
-| `Sparkline`                    | Mini line, area or bar trend, no axes                         |
-| `TreemapChart`                 | Repartition treemap                                           |
-| `HeatmapChart`                 | Rows × columns colored by value buckets or ranges (HTML grid) |
-| `CalendarChart`                | Day-by-day heatmap over a year or any range (HTML grid)       |
-| `BumpChart`                    | Rankings over periods, names at both ends (Recharts)          |
-| `RadarChart`                   | One polygon per series over named axes                        |
-| `ScatterChart` / `BubbleChart` | Numeric x/y points; bubble size as a 3rd measure              |
-| `BoxPlotChart`                 | Min/quartiles/max boxes, vertical or horizontal               |
-| `FunnelChart`                  | Centred bars joined by a flow, with the conversion per stage  |
-| `WaterfallChart`               | Running total through gains, losses, subtotals and totals     |
-| `WorldMap`                     | Countries colored by value in five quantile steps (own SVG)   |
+- [Charts guide](https://github.com/SckyzO/cosmos/blob/main/docs/guides/charts.md): how the colors follow the theme, the props every chart
+  shares, and each chart type.
+- [Storybook](https://sckyzo.github.io/cosmos/?path=/docs/charts-line-area--docs): every chart with
+  its stories.
 
 ## License
 
-MIT — see [LICENSE](../../LICENSE).
+MIT, see [LICENSE](https://github.com/SckyzO/cosmos/blob/main/LICENSE).
 
 The charts are drawn with [Recharts](https://github.com/recharts/recharts) (MIT), which pulls in modules of [d3](https://d3js.org/) (ISC, and BSD-3-Clause for `d3-ease`). `WorldMap` also uses [d3-geo](https://github.com/d3/d3-geo) (ISC) and [topojson-client](https://github.com/topojson/topojson-client) (ISC). Their licenses apply to the code they ship. `d3-geo` ships ES modules only, so the CommonJS build carries it inside `WorldMap.cjs`, with the `d3-array` and `internmap` it pulls; `THIRD_PARTY_NOTICES.md` holds their licenses.

package/dist/BarChart.cjs

@@ -3,7 +3,7 @@
 
 var chunkGVTMZYOM_cjs = require('./chunk-GVTMZYOM.cjs');
 var chunkF2PMFYJ5_cjs = require('./chunk-F2PMFYJ5.cjs');
-var chunkXUGQ6VXO_cjs = require('./chunk-XUGQ6VXO.cjs');
+var chunkRGDENOKY_cjs = require('./chunk-RGDENOKY.cjs');
 var chunkXMFBVMW7_cjs = require('./chunk-XMFBVMW7.cjs');
 var chunkRCDTBZC2_cjs = require('./chunk-RCDTBZC2.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
@@ -125,7 +125,7 @@ var BarChart = ({
             key
           );
         }),
-        chunkXUGQ6VXO_cjs.referenceMarks({ referenceLines, referenceBands, axis: horizontal ? "x" : "y" }),
+        chunkRGDENOKY_cjs.referenceMarks({ referenceLines, referenceBands, axis: horizontal ? "x" : "y" }),
         children
       ]
     }

package/dist/BarChart.js

@@ -1,7 +1,7 @@
 "use client";
 import { roundedBarShape, isOuterInStack } from './chunk-GDZLYYL2.js';
 import { useCategoryKeys } from './chunk-FUZW3H5X.js';
-import { referenceMarks } from './chunk-ESVGCUJN.js';
+import { referenceMarks } from './chunk-RXCGQ5QQ.js';
 import { trimLabel, categoryAxis } from './chunk-YMRNTIOK.js';
 import { useHiddenSeries, legendProps } from './chunk-4AKHZNWP.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';

package/dist/BoxPlotChart.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var chunkF2PMFYJ5_cjs = require('./chunk-F2PMFYJ5.cjs');
-var chunkXUGQ6VXO_cjs = require('./chunk-XUGQ6VXO.cjs');
+var chunkRGDENOKY_cjs = require('./chunk-RGDENOKY.cjs');
 var chunkXMFBVMW7_cjs = require('./chunk-XMFBVMW7.cjs');
 var chunkRCDTBZC2_cjs = require('./chunk-RCDTBZC2.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
@@ -202,7 +202,7 @@ var BoxPlotChart = ({
           },
           chunkK3R7JGOW_cjs.seriesKey(index)
         )),
-        chunkXUGQ6VXO_cjs.referenceMarks({ referenceLines, referenceBands, axis: horizontal ? "x" : "y" }),
+        chunkRGDENOKY_cjs.referenceMarks({ referenceLines, referenceBands, axis: horizontal ? "x" : "y" }),
         children
       ]
     }

package/dist/BoxPlotChart.js

@@ -1,6 +1,6 @@
 "use client";
 import { useCategoryKeys } from './chunk-FUZW3H5X.js';
-import { referenceMarks } from './chunk-ESVGCUJN.js';
+import { referenceMarks } from './chunk-RXCGQ5QQ.js';
 import { trimLabel, categoryAxis } from './chunk-YMRNTIOK.js';
 import { useHiddenSeries, legendProps } from './chunk-4AKHZNWP.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';

package/dist/CalendarChart.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkZWHCUYIN_cjs = require('./chunk-ZWHCUYIN.cjs');
+var chunkGBJPNJWM_cjs = require('./chunk-GBJPNJWM.cjs');
 require('./chunk-DBZQI4HM.cjs');
 var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
 require('./chunk-T3K6Q34U.cjs');
@@ -161,7 +161,7 @@ var CalendarChart = ({
         grids.map(({ block, metrics: m, columns, cells, label }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-calendar-block": "", style: { minWidth: 0 }, children: [
           blocks.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 0.25rem", fontWeight: 600, color: chunkLT3UC65O_cjs.TEXT }, children: block.year }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkZWHCUYIN_cjs.HeatGrid,
+            chunkGBJPNJWM_cjs.HeatGrid,
             {
               rows,
               columns,

package/dist/CalendarChart.js

@@ -1,5 +1,5 @@
 "use client";
-import { HeatGrid } from './chunk-UL3SNXQR.js';
+import { HeatGrid } from './chunk-V56L4SNY.js';
 import './chunk-BFEDLXVW.js';
 import { TEXT_SIZE } from './chunk-DI2FBGKM.js';
 import './chunk-VIOSQN4Z.js';

package/dist/HeatmapChart.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkZWHCUYIN_cjs = require('./chunk-ZWHCUYIN.cjs');
+var chunkGBJPNJWM_cjs = require('./chunk-GBJPNJWM.cjs');
 require('./chunk-DBZQI4HM.cjs');
 var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
 require('./chunk-T3K6Q34U.cjs');
@@ -128,7 +128,7 @@ var HeatmapChart = ({
       children: [
         legend,
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: "1 1 0", minWidth: 0, minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkZWHCUYIN_cjs.HeatGrid,
+          chunkGBJPNJWM_cjs.HeatGrid,
           {
             rows: series.map((s) => s.name),
             columns: categories.map(String),

package/dist/HeatmapChart.js

@@ -1,5 +1,5 @@
 "use client";
-import { HeatGrid } from './chunk-UL3SNXQR.js';
+import { HeatGrid } from './chunk-V56L4SNY.js';
 import './chunk-BFEDLXVW.js';
 import { TEXT_SIZE } from './chunk-DI2FBGKM.js';
 import './chunk-VIOSQN4Z.js';

package/dist/LineAreaChart.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkXUGQ6VXO_cjs = require('./chunk-XUGQ6VXO.cjs');
+var chunkRGDENOKY_cjs = require('./chunk-RGDENOKY.cjs');
 var chunkRCDTBZC2_cjs = require('./chunk-RCDTBZC2.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
 var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
@@ -86,7 +86,7 @@ var LineAreaChart = ({
             chunkK3R7JGOW_cjs.seriesKey(i)
           );
         }),
-        chunkXUGQ6VXO_cjs.referenceMarks({ referenceLines, referenceBands }),
+        chunkRGDENOKY_cjs.referenceMarks({ referenceLines, referenceBands }),
         children
       ]
     }

package/dist/LineAreaChart.js

@@ -1,5 +1,5 @@
 "use client";
-import { referenceMarks } from './chunk-ESVGCUJN.js';
+import { referenceMarks } from './chunk-RXCGQ5QQ.js';
 import { useHiddenSeries, legendProps } from './chunk-4AKHZNWP.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';
 import { useAxis, GRID_PROPS, xAxisTitle, yAxisTitle } from './chunk-DI2FBGKM.js';

package/dist/MixedChart.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var chunkGVTMZYOM_cjs = require('./chunk-GVTMZYOM.cjs');
-var chunkXUGQ6VXO_cjs = require('./chunk-XUGQ6VXO.cjs');
+var chunkRGDENOKY_cjs = require('./chunk-RGDENOKY.cjs');
 var chunkXMFBVMW7_cjs = require('./chunk-XMFBVMW7.cjs');
 var chunkRCDTBZC2_cjs = require('./chunk-RCDTBZC2.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
@@ -183,7 +183,7 @@ var MixedChart = ({
             key
           );
         }),
-        chunkXUGQ6VXO_cjs.referenceMarks({ referenceLines, referenceBands, axisId: sides[0] }),
+        chunkRGDENOKY_cjs.referenceMarks({ referenceLines, referenceBands, axisId: sides[0] }),
         children
       ]
     }

package/dist/MixedChart.js

@@ -1,6 +1,6 @@
 "use client";
 import { roundedBarShape, isOuterInStack } from './chunk-GDZLYYL2.js';
-import { referenceMarks } from './chunk-ESVGCUJN.js';
+import { referenceMarks } from './chunk-RXCGQ5QQ.js';
 import { categoryAxis } from './chunk-YMRNTIOK.js';
 import { useHiddenSeries, legendProps } from './chunk-4AKHZNWP.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';

package/dist/RangeBarChart.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var chunkF2PMFYJ5_cjs = require('./chunk-F2PMFYJ5.cjs');
-var chunkXUGQ6VXO_cjs = require('./chunk-XUGQ6VXO.cjs');
+var chunkRGDENOKY_cjs = require('./chunk-RGDENOKY.cjs');
 var chunkRCDTBZC2_cjs = require('./chunk-RCDTBZC2.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
 var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
@@ -206,7 +206,7 @@ var RangeBarChart = ({
           },
           chunkK3R7JGOW_cjs.seriesKey(index)
         )),
-        chunkXUGQ6VXO_cjs.referenceMarks({ referenceLines, referenceBands, axis: "x" }),
+        chunkRGDENOKY_cjs.referenceMarks({ referenceLines, referenceBands, axis: "x" }),
         children
       ]
     }

package/dist/RangeBarChart.js

@@ -1,6 +1,6 @@
 "use client";
 import { useCategoryKeys } from './chunk-FUZW3H5X.js';
-import { referenceMarks } from './chunk-ESVGCUJN.js';
+import { referenceMarks } from './chunk-RXCGQ5QQ.js';
 import { useHiddenSeries, legendProps, ChartLegend } from './chunk-4AKHZNWP.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';
 import { useAxis, xAxisTitle, yAxisTitle } from './chunk-DI2FBGKM.js';

package/dist/RealtimeChart.cjs

@@ -112,7 +112,7 @@ var RealtimeChart = ({
         ariaLabel: ariaLabel ?? "Live values, newest on the right"
       }),
       data: samples,
-      margin: { top: 4, right: 12, bottom: 0, left: 0 },
+      margin: { top: 4, right: 12, bottom: showTimeAxis ? 0 : 10, left: 0 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...chunkG4WOPX4D_cjs.GRID_PROPS }),
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/RealtimeChart.cjs.map

@@ -1 +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"]}
+{"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":";;;;;;;;;;;AA8CA,IAAM,KAAA,GAAQ,IAAI,IAAA,CAAK,cAAA,CAAe,OAAA,EAAS;AAAA,EAC7C,IAAA,EAAM,SAAA;AAAA,EACN,MAAA,EAAQ,SAAA;AAAA,EACR,MAAA,EAAQ,SAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAC,CAAA;AACD,IAAM,KAAA,GAAQ,CAAC,SAAA,KAAsB,KAAA,CAAM,OAAO,SAAS,CAAA;AAG3D,IAAM,YAAY,CAAC,EAAE,CAAA,EAAG,KAAA,EAAO,OAAM,qBACnCA,cAAA;AAAA,EAACC,sBAAA;AAAA,EAAA;AAAA,IACC,CAAA;AAAA,IACA,MAAA,EAAQ,KAAA;AAAA,IACR,WAAA,EAAa,GAAA;AAAA,IACb,eAAA,EAAgB,KAAA;AAAA,IAChB,KAAA,EACE,KAAA,KAAU,EAAA,GACN,MAAA,GACA;AAAA,MACE,KAAA,EAAO,KAAA;AAAA,MACP,QAAA,EAAU,gBAAA;AAAA,MACV,MAAA,EAAQ,CAAA;AAAA;AAAA,MAER,IAAA,EAAMC,sBAAA;AAAA,MACN,OAAO,EAAE,IAAA,EAAMA,wBAAM,QAAA,EAAUC,2BAAA,EAAW,YAAY,GAAA;AAAI;AAC5D;AAER,CAAA;AAIF,IAAM,yBAAyB,MAAM;AACnC,EAAA,IAAI,IAAA,GAAO,EAAA;AACX,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,IAAA,CAAS,IAAA,CAAK,MAAA,EAAO,GAAI,GAAA,IAAO,CAAA;AAChC,IAAA,IAAA,GAAO,KAAK,GAAA,CAAI,EAAA,EAAI,KAAK,GAAA,CAAI,EAAA,EAAI,IAAI,CAAC,CAAA;AACtC,IAAA,OAAO,IAAA,CAAK,MAAM,IAAI,CAAA;AAAA,EACxB,CAAA;AACF,CAAA;AAEO,IAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,UAAA,GAAa,GAAA;AAAA,EACb,UAAA,GAAa,EAAA;AAAA,EACb,GAAA,GAAM,CAAA;AAAA,EACN,GAAA,GAAM,GAAA;AAAA,EACN,aAAA,GAAgB,EAAA;AAAA,EAChB,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY,MAAA;AAAA,EACZ,SAAA,GAAY,MAAA;AAAA,EACZ,YAAA,GAAe,KAAA;AAAA,EACf,MAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,GAAA;AAAA,EACT;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,OAAOC,yBAAA,EAAQ;AACrB,EAAA,MAAM,CAAC,gBAAgB,CAAA,GAAIC,cAAA,CAAS,sBAAsB,CAAA;AAC1D,EAAA,MAAM,WAAW,SAAA,IAAa,gBAAA;AAG9B,EAAA,MAAM,CAAC,SAAS,CAAA,GAAIA,cAAA,CAAS,KAAK,GAAG,CAAA;AACrC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,cAAA;AAAA,IAAmB,MAC/C,MAAM,IAAA,CAAK,EAAE,QAAQ,UAAA,EAAW,EAAG,CAAC,CAAA,EAAG,KAAA,MAAW;AAAA,MAChD,IAAA,EAAM,SAAA,GAAA,CAAa,UAAA,GAAa,CAAA,GAAI,KAAA,IAAS,UAAA;AAAA,MAC7C,OAAO,QAAA;AAAS,KAClB,CAAE;AAAA,GACJ;AAIA,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAS,UAAU,CAAA;AACnD,EAAA,IAAI,aAAa,UAAA,EAAY;AAC3B,IAAA,WAAA,CAAY,UAAU,CAAA;AACtB,IAAA,MAAM,OAAA,GAAU,aAAa,OAAA,CAAQ,MAAA;AACrC,IAAA,MAAM,MAAA,GAAS,OAAA,CAAQ,CAAC,CAAA,EAAG,IAAA,IAAQ,SAAA;AACnC,IAAA,UAAA;AAAA,MACE,WAAW,CAAA,GACP,OAAA,CAAQ,MAAM,OAAA,CAAQ,MAAA,GAAS,UAAU,CAAA,GACzC;AAAA,QACE,GAAG,MAAM,IAAA,CAAK,EAAE,QAAQ,OAAA,EAAQ,EAAG,CAAC,CAAA,EAAG,KAAA,MAAW;AAAA,UAChD,IAAA,EAAM,MAAA,GAAA,CAAU,OAAA,GAAU,KAAA,IAAS,UAAA;AAAA,UACnC,OAAO,QAAA;AAAS,SAClB,CAAE,CAAA;AAAA,QACF,GAAG;AAAA;AACL,KACN;AAAA,EACF;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,EAAA,GAAK,YAAY,MAAM;AAC3B,MAAA,UAAA,CAAW,CAAC,OAAA,KAAY,CAAC,GAAG,OAAA,CAAQ,MAAM,CAAC,CAAA,EAAG,EAAE,IAAA,EAAM,KAAK,GAAA,EAAI,EAAG,OAAO,QAAA,EAAS,EAAG,CAAC,CAAA;AAAA,IACxF,GAAG,UAAU,CAAA;AACb,IAAA,OAAO,MAAM,cAAc,EAAE,CAAA;AAAA,EAC/B,CAAA,EAAG,CAAC,QAAA,EAAU,UAAU,CAAC,CAAA;AAEzB,EAAA,MAAM,SAAS,WAAA,IAAe,MAAA;AAG9B,EAAA,MAAM,OAAA,GAAU,CAAC,EAAE,MAAA,EAAQ,SAAQ,KAAoC;AACrE,IAAA,MAAM,MAAA,GAAS,OAAA,GAAU,CAAC,CAAA,EAAG,OAAA;AAC7B,IAAA,IAAI,CAAC,MAAA,IAAU,CAAC,MAAA,EAAQ,OAAO,IAAA;AAC/B,IAAA,uBACEN,cAAA;AAAA,MAACO,6BAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA,GAAe,KAAA,CAAM,MAAA,CAAO,IAAI,CAAA,GAAI,MAAA;AAAA,QAC3C,IAAA,EAAM,CAAC,EAAE,IAAA,EAAM,SAAS,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA,EAAG,KAAA,EAAOC,wBAAA,CAAO,CAAC,GAAG;AAAA;AAAA,KACzE;AAAA,EAEJ,CAAA;AAEA,EAAA,uBACEC,eAAA;AAAA,IAACC,kBAAA;AAAA,IAAA;AAAA,MACE,GAAGC,4BAAA,CAAW;AAAA,QACb,MAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAW,SAAA,IAAa;AAAA,OACzB,CAAA;AAAA,MACD,IAAA,EAAM,OAAA;AAAA,MAGN,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,KAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,YAAA,GAAe,CAAA,GAAI,EAAA,EAAI,IAAA,EAAM,CAAA,EAAE;AAAA,MAEpE,QAAA,EAAA;AAAA,wBAAAX,cAAA,CAACY,sBAAA,EAAA,EAAe,GAAGC,4BAAA,EAAY,CAAA;AAAA,wBAE/Bb,cAAA;AAAA,UAACc,cAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,MAAA;AAAA,YACR,IAAA,EAAK,QAAA;AAAA,YACL,MAAA,EAAQ,CAAC,SAAA,EAAW,SAAS,CAAA;AAAA,YAC7B,MAAM,CAAC,YAAA;AAAA,YACP,aAAA,EAAe,KAAA;AAAA,YACd,GAAG,IAAA;AAAA,YACH,GAAI,YAAA,GAAeC,4BAAA,CAAW,MAAM,IAAI;AAAC;AAAA,SAC5C;AAAA,wBACAf,cAAA;AAAA,UAACgB,cAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,CAAC,GAAA,EAAK,GAAG,CAAA;AAAA,YACjB,iBAAA,EAAiB,IAAA;AAAA,YAEjB,QAAA,EAAU,CAAA;AAAA,YACV,KAAA,EAAM,MAAA;AAAA,YACN,aAAA,EAAe,WAAA;AAAA,YACd,GAAG,IAAA;AAAA,YACH,GAAGC,6BAAW,MAAM;AAAA;AAAA,SACvB;AAAA,uCACC,SAAA,EAAA,EAAU,CAAA,EAAG,eAAe,KAAA,EAAO,SAAA,EAAW,OAAOC,6BAAA,EAAa,CAAA;AAAA,uCAClE,SAAA,EAAA,EAAU,CAAA,EAAG,eAAe,KAAA,EAAO,SAAA,EAAW,OAAOC,6BAAA,EAAa,CAAA;AAAA,wBACnEnB,cAAA;AAAA,UAACoB,gBAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,OAAA;AAAA,YACT,MAAA,EAAQ,EAAE,MAAA,EAAQC,wBAAA,EAAQ,iBAAiB,KAAA,EAAM;AAAA,YACjD,iBAAA,EAAmB;AAAA;AAAA,SACrB;AAAA,wBACArB,cAAA;AAAA,UAACsB,aAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,OAAA;AAAA,YACL,OAAA,EAAQ,OAAA;AAAA,YACR,IAAA,EAAK,UAAA;AAAA,YACL,MAAA,EAAQd,yBAAO,CAAC,CAAA;AAAA,YAChB,WAAA,EAAa,CAAA;AAAA,YACb,GAAA,EAAK,KAAA;AAAA,YACL,SAAA,EAAW,EAAE,CAAA,EAAG,CAAA,EAAG,IAAA,EAAMe,uBAAA,EAAO,MAAA,EAAQf,wBAAA,CAAO,CAAC,CAAA,EAAG,WAAA,EAAa,GAAA,EAAI;AAAA,YAEpE,iBAAA,EAAmB;AAAA;AAAA,SACrB;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ","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      // The label of the lowest value is centred on the bottom edge of the plot: without the time\n      // axis under it, the chart keeps room for its lower half, which was cut.\n      margin={{ top: 4, right: 12, bottom: showTimeAxis ? 0 : 10, 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

@@ -110,7 +110,7 @@ var RealtimeChart = ({
         ariaLabel: ariaLabel ?? "Live values, newest on the right"
       }),
       data: samples,
-      margin: { top: 4, right: 12, bottom: 0, left: 0 },
+      margin: { top: 4, right: 12, bottom: showTimeAxis ? 0 : 10, left: 0 },
       children: [
         /* @__PURE__ */ jsx(CartesianGrid, { ...GRID_PROPS }),
         /* @__PURE__ */ jsx(

package/dist/RealtimeChart.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/RealtimeChart.tsx"],"names":[],"mappings":";;;;;;;;;AA8CA,IAAM,KAAA,GAAQ,IAAI,IAAA,CAAK,cAAA,CAAe,OAAA,EAAS;AAAA,EAC7C,IAAA,EAAM,SAAA;AAAA,EACN,MAAA,EAAQ,SAAA;AAAA,EACR,MAAA,EAAQ,SAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAC,CAAA;AACD,IAAM,KAAA,GAAQ,CAAC,SAAA,KAAsB,KAAA,CAAM,OAAO,SAAS,CAAA;AAG3D,IAAM,YAAY,CAAC,EAAE,CAAA,EAAG,KAAA,EAAO,OAAM,qBACnC,GAAA;AAAA,EAAC,aAAA;AAAA,EAAA;AAAA,IACC,CAAA;AAAA,IACA,MAAA,EAAQ,KAAA;AAAA,IACR,WAAA,EAAa,GAAA;AAAA,IACb,eAAA,EAAgB,KAAA;AAAA,IAChB,KAAA,EACE,KAAA,KAAU,EAAA,GACN,MAAA,GACA;AAAA,MACE,KAAA,EAAO,KAAA;AAAA,MACP,QAAA,EAAU,gBAAA;AAAA,MACV,MAAA,EAAQ,CAAA;AAAA;AAAA,MAER,IAAA,EAAM,IAAA;AAAA,MACN,OAAO,EAAE,IAAA,EAAM,MAAM,QAAA,EAAU,SAAA,EAAW,YAAY,GAAA;AAAI;AAC5D;AAER,CAAA;AAIF,IAAM,yBAAyB,MAAM;AACnC,EAAA,IAAI,IAAA,GAAO,EAAA;AACX,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,IAAA,CAAS,IAAA,CAAK,MAAA,EAAO,GAAI,GAAA,IAAO,CAAA;AAChC,IAAA,IAAA,GAAO,KAAK,GAAA,CAAI,EAAA,EAAI,KAAK,GAAA,CAAI,EAAA,EAAI,IAAI,CAAC,CAAA;AACtC,IAAA,OAAO,IAAA,CAAK,MAAM,IAAI,CAAA;AAAA,EACxB,CAAA;AACF,CAAA;AAEO,IAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,UAAA,GAAa,GAAA;AAAA,EACb,UAAA,GAAa,EAAA;AAAA,EACb,GAAA,GAAM,CAAA;AAAA,EACN,GAAA,GAAM,GAAA;AAAA,EACN,aAAA,GAAgB,EAAA;AAAA,EAChB,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY,MAAA;AAAA,EACZ,SAAA,GAAY,MAAA;AAAA,EACZ,YAAA,GAAe,KAAA;AAAA,EACf,MAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,GAAA;AAAA,EACT;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,CAAC,gBAAgB,CAAA,GAAI,QAAA,CAAS,sBAAsB,CAAA;AAC1D,EAAA,MAAM,WAAW,SAAA,IAAa,gBAAA;AAG9B,EAAA,MAAM,CAAC,SAAS,CAAA,GAAI,QAAA,CAAS,KAAK,GAAG,CAAA;AACrC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA;AAAA,IAAmB,MAC/C,MAAM,IAAA,CAAK,EAAE,QAAQ,UAAA,EAAW,EAAG,CAAC,CAAA,EAAG,KAAA,MAAW;AAAA,MAChD,IAAA,EAAM,SAAA,GAAA,CAAa,UAAA,GAAa,CAAA,GAAI,KAAA,IAAS,UAAA;AAAA,MAC7C,OAAO,QAAA;AAAS,KAClB,CAAE;AAAA,GACJ;AAIA,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,UAAU,CAAA;AACnD,EAAA,IAAI,aAAa,UAAA,EAAY;AAC3B,IAAA,WAAA,CAAY,UAAU,CAAA;AACtB,IAAA,MAAM,OAAA,GAAU,aAAa,OAAA,CAAQ,MAAA;AACrC,IAAA,MAAM,MAAA,GAAS,OAAA,CAAQ,CAAC,CAAA,EAAG,IAAA,IAAQ,SAAA;AACnC,IAAA,UAAA;AAAA,MACE,WAAW,CAAA,GACP,OAAA,CAAQ,MAAM,OAAA,CAAQ,MAAA,GAAS,UAAU,CAAA,GACzC;AAAA,QACE,GAAG,MAAM,IAAA,CAAK,EAAE,QAAQ,OAAA,EAAQ,EAAG,CAAC,CAAA,EAAG,KAAA,MAAW;AAAA,UAChD,IAAA,EAAM,MAAA,GAAA,CAAU,OAAA,GAAU,KAAA,IAAS,UAAA;AAAA,UACnC,OAAO,QAAA;AAAS,SAClB,CAAE,CAAA;AAAA,QACF,GAAG;AAAA;AACL,KACN;AAAA,EACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,EAAA,GAAK,YAAY,MAAM;AAC3B,MAAA,UAAA,CAAW,CAAC,OAAA,KAAY,CAAC,GAAG,OAAA,CAAQ,MAAM,CAAC,CAAA,EAAG,EAAE,IAAA,EAAM,KAAK,GAAA,EAAI,EAAG,OAAO,QAAA,EAAS,EAAG,CAAC,CAAA;AAAA,IACxF,GAAG,UAAU,CAAA;AACb,IAAA,OAAO,MAAM,cAAc,EAAE,CAAA;AAAA,EAC/B,CAAA,EAAG,CAAC,QAAA,EAAU,UAAU,CAAC,CAAA;AAEzB,EAAA,MAAM,SAAS,WAAA,IAAe,MAAA;AAG9B,EAAA,MAAM,OAAA,GAAU,CAAC,EAAE,MAAA,EAAQ,SAAQ,KAAoC;AACrE,IAAA,MAAM,MAAA,GAAS,OAAA,GAAU,CAAC,CAAA,EAAG,OAAA;AAC7B,IAAA,IAAI,CAAC,MAAA,IAAU,CAAC,MAAA,EAAQ,OAAO,IAAA;AAC/B,IAAA,uBACE,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA,GAAe,KAAA,CAAM,MAAA,CAAO,IAAI,CAAA,GAAI,MAAA;AAAA,QAC3C,IAAA,EAAM,CAAC,EAAE,IAAA,EAAM,SAAS,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA,EAAG,KAAA,EAAO,MAAA,CAAO,CAAC,GAAG;AAAA;AAAA,KACzE;AAAA,EAEJ,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA,CAAW;AAAA,QACb,MAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAW,SAAA,IAAa;AAAA,OACzB,CAAA;AAAA,MACD,IAAA,EAAM,OAAA;AAAA,MAGN,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,KAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,YAAA,GAAe,CAAA,GAAI,EAAA,EAAI,IAAA,EAAM,CAAA,EAAE;AAAA,MAEpE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,UAAA,EAAY,CAAA;AAAA,wBAE/B,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,MAAA;AAAA,YACR,IAAA,EAAK,QAAA;AAAA,YACL,MAAA,EAAQ,CAAC,SAAA,EAAW,SAAS,CAAA;AAAA,YAC7B,MAAM,CAAC,YAAA;AAAA,YACP,aAAA,EAAe,KAAA;AAAA,YACd,GAAG,IAAA;AAAA,YACH,GAAI,YAAA,GAAe,UAAA,CAAW,MAAM,IAAI;AAAC;AAAA,SAC5C;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,CAAC,GAAA,EAAK,GAAG,CAAA;AAAA,YACjB,iBAAA,EAAiB,IAAA;AAAA,YAEjB,QAAA,EAAU,CAAA;AAAA,YACV,KAAA,EAAM,MAAA;AAAA,YACN,aAAA,EAAe,WAAA;AAAA,YACd,GAAG,IAAA;AAAA,YACH,GAAG,WAAW,MAAM;AAAA;AAAA,SACvB;AAAA,4BACC,SAAA,EAAA,EAAU,CAAA,EAAG,eAAe,KAAA,EAAO,SAAA,EAAW,OAAO,WAAA,EAAa,CAAA;AAAA,4BAClE,SAAA,EAAA,EAAU,CAAA,EAAG,eAAe,KAAA,EAAO,SAAA,EAAW,OAAO,WAAA,EAAa,CAAA;AAAA,wBACnE,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,OAAA;AAAA,YACT,MAAA,EAAQ,EAAE,MAAA,EAAQ,MAAA,EAAQ,iBAAiB,KAAA,EAAM;AAAA,YACjD,iBAAA,EAAmB;AAAA;AAAA,SACrB;AAAA,wBACA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,OAAA;AAAA,YACL,OAAA,EAAQ,OAAA;AAAA,YACR,IAAA,EAAK,UAAA;AAAA,YACL,MAAA,EAAQ,OAAO,CAAC,CAAA;AAAA,YAChB,WAAA,EAAa,CAAA;AAAA,YACb,GAAA,EAAK,KAAA;AAAA,YACL,SAAA,EAAW,EAAE,CAAA,EAAG,CAAA,EAAG,IAAA,EAAM,KAAA,EAAO,MAAA,EAAQ,MAAA,CAAO,CAAC,CAAA,EAAG,WAAA,EAAa,GAAA,EAAI;AAAA,YAEpE,iBAAA,EAAmB;AAAA;AAAA,SACrB;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ","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      // The label of the lowest value is centred on the bottom edge of the plot: without the time\n      // axis under it, the chart keeps room for its lower half, which was cut.\n      margin={{ top: 4, right: 12, bottom: showTimeAxis ? 0 : 10, 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/ScatterChart.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkXUGQ6VXO_cjs = require('./chunk-XUGQ6VXO.cjs');
+var chunkRGDENOKY_cjs = require('./chunk-RGDENOKY.cjs');
 var chunkRCDTBZC2_cjs = require('./chunk-RCDTBZC2.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
 var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
@@ -115,7 +115,7 @@ var XYChart = ({
             chunkK3R7JGOW_cjs.seriesKey(index)
           );
         }),
-        chunkXUGQ6VXO_cjs.referenceMarks({ referenceLines, referenceBands }),
+        chunkRGDENOKY_cjs.referenceMarks({ referenceLines, referenceBands }),
         children
       ]
     }

package/dist/ScatterChart.js

@@ -1,5 +1,5 @@
 "use client";
-import { referenceMarks } from './chunk-ESVGCUJN.js';
+import { referenceMarks } from './chunk-RXCGQ5QQ.js';
 import { useHiddenSeries, legendProps } from './chunk-4AKHZNWP.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';
 import { useAxis, xAxisTitle, yAxisTitle } from './chunk-DI2FBGKM.js';