@umriss-ui/charts 0.15.0 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +43 -3
- package/README.md +18 -8
- package/dist/charts.js +4415 -4309
- package/dist/de.d.ts +8 -5
- package/dist/index.d.ts +76 -195
- package/dist/wording/de.js +2 -0
- package/docs/llms-full.md +120 -218
- package/package.json +4 -3
package/docs/llms-full.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @umriss-ui/charts 0.
|
|
1
|
+
# @umriss-ui/charts 0.34.0
|
|
2
2
|
|
|
3
3
|
> React canvas chart library for data-dense dashboards - line, area, bar, box plot, scatter, control and Pareto charts. Few chart kinds, drawn well, fast.
|
|
4
4
|
|
|
@@ -1407,11 +1407,10 @@ export default function Empty() {
|
|
|
1407
1407
|
|
|
1408
1408
|
##### Read it by keyboard and screen reader
|
|
1409
1409
|
|
|
1410
|
-
A chart with a `Tooltip` is one tab stop: the keys walk its values, and a screen reader hears them; `wording` gives the German words.
|
|
1410
|
+
A chart with a `Tooltip` is one tab stop: the keys walk its values, and a screen reader hears them; `wording` gives the German words, numbers and times.
|
|
1411
1411
|
|
|
1412
1412
|
```tsx
|
|
1413
|
-
import {
|
|
1414
|
-
import { Tooltip, useChart, type ChartView } from "@umriss-ui/charts";
|
|
1413
|
+
import { Tooltip, useChart, type ChartParts } from "@umriss-ui/charts";
|
|
1415
1414
|
import { GERMAN_CHARTS_WORDING } from "@umriss-ui/charts/wording/de";
|
|
1416
1415
|
|
|
1417
1416
|
/* Data from the operations world, written out here so the example runs on its own. */
|
|
@@ -1513,10 +1512,9 @@ function week(serviceId: string, step: number): MetricPoint[] {
|
|
|
1513
1512
|
const SEARCH_WEEK = week("search", 5 * 60_000);
|
|
1514
1513
|
|
|
1515
1514
|
export default function KeyboardAndScreenReader() {
|
|
1516
|
-
// The two charts zoom together: each
|
|
1517
|
-
const
|
|
1518
|
-
const
|
|
1519
|
-
const german = useChart(SEARCH_WEEK, { initialView: view, onViewChange: setView });
|
|
1515
|
+
// The two charts zoom together: each sends the other what the reader did to it.
|
|
1516
|
+
const english: ChartParts<MetricPoint> = useChart(SEARCH_WEEK, { onViewChange: (v) => german.setView(v) });
|
|
1517
|
+
const german: ChartParts<MetricPoint> = useChart(SEARCH_WEEK, { onViewChange: (v) => english.setView(v) });
|
|
1520
1518
|
const { Chart, XAxis, YAxis, Line } = english;
|
|
1521
1519
|
const { Chart: Diagramm } = german;
|
|
1522
1520
|
return (
|
|
@@ -2180,14 +2178,14 @@ Under forced colours the chart draws in the system colours and tells its series
|
|
|
2180
2178
|
| Prop | Type | Default | Description |
|
|
2181
2179
|
|---|---|---|---|
|
|
2182
2180
|
| `width` | `number \| "100%"` | `"100%"` | Width in CSS pixels, or `"100%"` for the host's: the chart measures its host and follows it through a ResizeObserver.<br>Shown in: [Size a chart by its container (Installation)](#/installation/in-its-container) |
|
|
2183
|
-
| `height` | `number` | fills the frame, at least 300 px | Height in CSS pixels, fixed. Left out, the chart fills its frame - a stretched grid cell, a card the grid stretches, a container of definite height - and never goes below 300 px, which is also its height in a frame without one. A different floor goes through `style`'s `minHeight` ([ADR-0050](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0050-a-chart-fills-its-frame-never-below-its-floor.md)).<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and
|
|
2181
|
+
| `height` | `number` | fills the frame, at least 300 px | Height in CSS pixels, fixed. Left out, the chart fills its frame - a stretched grid cell, a card the grid stretches, a container of definite height - and never goes below 300 px, which is also its height in a frame without one. A different floor goes through `style`'s `minHeight` ([ADR-0050](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0050-a-chart-fills-its-frame-never-below-its-floor.md)).<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and 74 more |
|
|
2184
2182
|
| `padding` | `number \| Partial<`[`Padding`](#type-Padding)`>` | — | Outer spacing of the plot area in CSS pixels.<br>Shown in: [Fix the domain and name the ticks (Axis)](#/axis/configuration) |
|
|
2185
2183
|
| `empty` | `ReactNode` | the wording's `empty` | Shown in the middle of the plot area when no visible series has a point to show - no data, only gaps, or every series hidden. Axes and frame stay. Not while `loading`.<br>Shown in: [Say there is nothing to show](#/chart/empty) |
|
|
2186
2184
|
| `loading` | `boolean` | `false` | The rows are on their way, as the table's `loading` says ([ADR-0042](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0042-a-rows-height-never-follows-what-it-shows.md)). A course already drawn stays: it dims after a moment and takes no pointer until the answer is in. Where there is nothing to show, the empty message waits. The plot is `aria-busy` meanwhile.<br>Shown in: [Show that rows are on their way](#/chart/loading) |
|
|
2187
|
-
| `wording` | `Partial<`[`ChartsWording`](#type-ChartsWording)`>` | `DEFAULT_CHARTS_WORDING` | The chart's words ([ADR-0031](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0031-the-charts-carry-their-own-wording.md)); entries left out fall back to English. German: `GERMAN_CHARTS_WORDING` from `@umriss-ui/charts/wording/de`.<br>Shown in: [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) |
|
|
2185
|
+
| `wording` | `Partial<`[`ChartsWording`](#type-ChartsWording)`>` | `DEFAULT_CHARTS_WORDING` | The chart's words ([ADR-0031](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0031-the-charts-carry-their-own-wording.md)); entries left out fall back to English. Its `locale` also formats every number and every date or time label the chart makes itself (`en-GB`, `de-DE`; the browser's language is not read) - a `tickFormat` or `format` of your own stays in charge of its axis or series. German: `GERMAN_CHARTS_WORDING` from `@umriss-ui/charts/wording/de`.<br>Shown in: [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) |
|
|
2188
2186
|
| `encoding` | `"color" \| "marks"` | `"color"` | How series are told apart. `"color"`: by their colour. `"marks"`: by a dash and a marker shape as well - a line, an area and a scatter -, and by a hatch - a bar, a state, a matrix cell, a limit band -, chosen by the same palette place as the colour, so that a reader who does not see the colours still tells them apart; the legend's chips show the same. A caller's own `dash` wins over the place's.<br>Shown in: [Tell series apart without colour](#/chart/told-apart-without-colour), [Mark every kind](#/chart/marks-on-every-kind), [Mark bands, limits and cells](#/chart/bands-limits-and-cells) |
|
|
2189
|
-
| `syncId` | `string` | — | Charts with the same id share the pointer's x position, in domain units: each draws its crosshair there, the tooltip stays with the chart under the pointer. Zoom is not shared this way: charts zoom together by
|
|
2190
|
-
| `children` | `ReactNode` | — | The axes, series and companions of this chart. They draw nothing themselves: each registers its configuration and the scene draws it, and the order in the JSX is the drawing order.<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and
|
|
2187
|
+
| `syncId` | `string` | — | Charts with the same id share the pointer's x position, in domain units: each draws its crosshair there, the tooltip stays with the chart under the pointer. Zoom is not shared this way: charts zoom together by sending each other their view (`useChart`'s `onViewChange` and `setView`).<br>Shown in: [Keep charts in step (Zoom and pan)](#/zoom-and-pan/cursor-sync), [Watch latency against its objective (Scenarios)](#/scenarios/watch-latency-against-its-objective), [Hold the tile length in control (Scenarios)](#/scenarios/hold-the-tile-length-in-control) |
|
|
2188
|
+
| `children` | `ReactNode` | — | The axes, series and companions of this chart. They draw nothing themselves: each registers its configuration and the scene draws it, and the order in the JSX is the drawing order.<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and 74 more |
|
|
2191
2189
|
|
|
2192
2190
|
###### Events
|
|
2193
2191
|
|
|
@@ -2199,7 +2197,7 @@ Under forced colours the chart draws in the system colours and tells its series
|
|
|
2199
2197
|
|
|
2200
2198
|
| Prop | Type | Default | Description |
|
|
2201
2199
|
|---|---|---|---|
|
|
2202
|
-
| `ariaLabel` | `string` | — | Required in DEV through a warning.<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and
|
|
2200
|
+
| `ariaLabel` | `string` | — | Required in DEV through a warning.<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and 74 more |
|
|
2203
2201
|
|
|
2204
2202
|
###### Styling
|
|
2205
2203
|
|
|
@@ -2227,6 +2225,7 @@ Everything the charts put out as text.
|
|
|
2227
2225
|
|
|
2228
2226
|
| Prop | Type | Default | Description |
|
|
2229
2227
|
|---|---|---|---|
|
|
2228
|
+
| `locale` *required* | `string` | — | The BCP 47 tag every number and every date or time label of the chart is formatted in (`en-GB`, `de-DE`). The one input for the locale: the browser's language is not read. The clock stays 24-hour in both. |
|
|
2230
2229
|
| `roleDescription` *required* | `string` | — | What a screen reader calls the plot area that takes the keys (`aria-roledescription`). |
|
|
2231
2230
|
| `empty` *required* | `string` | — | Shown in the plot area when no visible series has a point to show. |
|
|
2232
2231
|
| `seriesList` *required* | `(names: readonly string[]) => string` | — | The summary's visible series, by name. |
|
|
@@ -2234,15 +2233,15 @@ Everything the charts put out as text.
|
|
|
2234
2233
|
| `seriesExtent` *required* | `(name: string, min: string, max: string) => string` | — | The summary's lowest and highest value of one series in that stretch. |
|
|
2235
2234
|
| `limitList` *required* | `(limits: readonly { name: string; value: string }[]) => string` | — | The summary's labelled limits, each with its value in its axis' format (a band's two edges as one value). |
|
|
2236
2235
|
| `readout` *required* | `(x: string, rows: readonly { name: string; value: string; x: string }[]) => string` | — | What is read after a key: the position, then each series with its value (and its own x where it stands on another x axis), the emphasised one first. |
|
|
2237
|
-
| `stackTotal` *required* | `string` | — | The last row of a stack in the tooltip and the readout: the sum of its members at the point
|
|
2238
|
-
| `percent` *required* | `(value: string) => string` | — | A share in a normalised stack, its number already formatted
|
|
2236
|
+
| `stackTotal` *required* | `string` | — | The last row of a stack in the tooltip and the readout: the sum of its members at the point. |
|
|
2237
|
+
| `percent` *required* | `(value: string) => string` | — | A share in a normalised stack, its number already formatted. |
|
|
2239
2238
|
| `walkHelp` *required* | `string` | — | The keys that walk the chart. |
|
|
2240
2239
|
| `selectHelp` *required* | `string` | — | The key that reports the Active point - only where `onSelect` is given. |
|
|
2241
2240
|
| `zoomHelp` *required* | `string` | — | The keys that zoom and pan it - only where the chart can be zoomed. |
|
|
2242
2241
|
| `legendHelp` *required* | `string` | — | The keys of the legend's entries - only where it has one to press. |
|
|
2243
2242
|
| `allShown` *required* | `string` | — | Read out where hiding would leave nothing to see, and every series is shown instead. |
|
|
2244
2243
|
| `showAll` *required* | `string` | — | The control over a zoomed plot that brings every zoomed axis back to its own domain (component-view 04). |
|
|
2245
|
-
| `showData` *required* | `string` | — | The data table's disclosure key, closed and open
|
|
2244
|
+
| `showData` *required* | `string` | — | The data table's disclosure key, closed and open. |
|
|
2246
2245
|
| `hideData` *required* | `string` | — | |
|
|
2247
2246
|
| `positionColumn` *required* | `string` | — | The heading of the table's x column where its axis has no `label`, and of a matrix' row column where its y axis has none. |
|
|
2248
2247
|
| `rowColumn` *required* | `string` | — | |
|
|
@@ -2257,7 +2256,7 @@ Everything the charts put out as text.
|
|
|
2257
2256
|
| `notch` *required* | `string` | — | |
|
|
2258
2257
|
| `count` *required* | `string` | — | |
|
|
2259
2258
|
| `outlierList` *required* | `(values: readonly string[], more: number) => string` | — | |
|
|
2260
|
-
| `downsampled` *required* | `(readings: number) => string` | — | Added to the caption where the table shows the downsampled course
|
|
2259
|
+
| `downsampled` *required* | `(readings: number) => string` | — | Added to the caption where the table shows the downsampled course: how many readings its rows stand for. |
|
|
2261
2260
|
|
|
2262
2261
|
###### `ChartPerf`
|
|
2263
2262
|
|
|
@@ -2948,15 +2947,15 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
2948
2947
|
|
|
2949
2948
|
| Prop | Type | Default | Description |
|
|
2950
2949
|
|---|---|---|---|
|
|
2951
|
-
| `value` *required* | [`AxisField`](#type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and
|
|
2950
|
+
| `value` *required* | [`AxisField`](#type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and 74 more |
|
|
2952
2951
|
| `domain` | `"nice" \| "data" \| readonly [number, number] \| readonly [Date, Date]` | `"nice"` | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed: numbers, on a time axis milliseconds or two `Date`s, on a category axis places. On a `zoomable` axis it is the start: what the axis shows while the chart's view names no span for it.<br>Shown in: [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis), [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader), [Gestures and keys (Zoom and pan)](#/zoom-and-pan/gestures-and-keys) and 10 more |
|
|
2953
2952
|
| `position` | `"bottom" \| "top"` | `"bottom"` | Which edge the axis stands at. A second x axis on the opposite edge is how a series counts in a unit of its own.<br>Shown in: [Add axes for other magnitudes](#/axis/axes), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) |
|
|
2954
2953
|
| `time` | `boolean` | — | The values are instants: milliseconds since the epoch, or with `time` said ISO 8601 strings as an API sends them, read by the platform's rule - a date with a time and no offset is local time, a date alone is UTC; a string that is none is not drawn. Rows that hold a `Date` put the axis in time without `time`. Ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant in milliseconds. `calendar` implies it.<br>Shown in: [Align a second axis to the grid](#/axis/aligned-ticks), [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container) and 36 more |
|
|
2955
2954
|
| `calendar` | `readonly `[`WorkingInterval`](#type-WorkingInterval)`[]` | — | Working calendar: the intervals in which time counts. With it the axis stands in working time - nights and weekends are out, and every removed span gets a break mark. The scale stays affine; the mapping happens in materialisation ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)).<br>Shown in: [Leave out the hours nobody works](#/axis/working-time) |
|
|
2956
|
-
| `zoomable` | `boolean` | `false` | Zoom and pan: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click goes back to `domain`; with the focus on the chart, + and − zoom, Shift with ← or → pans and 0 goes back. The span shown is part of the chart's view, by this axis' `id` (`useChart`'s `initialView`, `onViewChange`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader), [Gestures and keys (Zoom and pan)](#/zoom-and-pan/gestures-and-keys), [Limit the zoom (Zoom and pan)](#/zoom-and-pan/zoom-limits) and 5 more |
|
|
2955
|
+
| `zoomable` | `boolean` | `false` | Zoom and pan: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click goes back to `domain`; with the focus on the chart, + and − zoom, Shift with ← or → pans and 0 goes back. The span shown is part of the chart's view, by this axis' `id` (`useChart`'s `initialView`, `onViewChange`, `setView`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader), [Gestures and keys (Zoom and pan)](#/zoom-and-pan/gestures-and-keys), [Limit the zoom (Zoom and pan)](#/zoom-and-pan/zoom-limits) and 5 more |
|
|
2957
2956
|
| `zoomLimits` | [`ZoomLimits`](#type-ZoomLimits) | at most the data's extent or this axis' own `domain`, whichever is wider, at least three data steps | The narrowest and the widest span zoom may reach, in the axis' units - milliseconds on a time axis.<br>Shown in: [Limit the zoom (Zoom and pan)](#/zoom-and-pan/zoom-limits) |
|
|
2958
2957
|
| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#/axis/axes), [Align a second axis to the grid](#/axis/aligned-ticks), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 7 more |
|
|
2959
|
-
| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and
|
|
2958
|
+
| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and 66 more |
|
|
2960
2959
|
| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Mix series kinds (Chart)](#/chart/mixed) and 8 more |
|
|
2961
2960
|
| `tickFormat` | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 21 more |
|
|
2962
2961
|
| `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#/stateband/one-vehicle), [Give each one a lane (StateBand)](#/stateband/one-lane-each), [See where the vans stand idle (Scenarios)](#/scenarios/see-where-the-vans-stand-idle) |
|
|
@@ -2972,7 +2971,7 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
2972
2971
|
| `alignTicks` | `boolean` | — | On a further y axis: take the first y axis' tick count and widen this axis' domain until its ticks fall on that one's grid lines, the steps still 1-2-5 - one grid serves both. `tickCount` then does not apply; on the first y axis it changes nothing.<br>Shown in: [Align a second axis to the grid](#/axis/aligned-ticks) |
|
|
2973
2972
|
| `position` | `"left" \| "right"` | `"left"` | Which edge the axis stands at. Several y axes per side are stacked outwards, so that extents of clearly different magnitude stay readable.<br>Shown in: [Add axes for other magnitudes](#/axis/axes), [Align a second axis to the grid](#/axis/aligned-ticks), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 7 more |
|
|
2974
2973
|
| `id` | `string` | `"y"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#/axis/axes), [Align a second axis to the grid](#/axis/aligned-ticks), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 7 more |
|
|
2975
|
-
| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and
|
|
2974
|
+
| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and 66 more |
|
|
2976
2975
|
| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Mix series kinds (Chart)](#/chart/mixed) and 8 more |
|
|
2977
2976
|
| `tickFormat` | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 21 more |
|
|
2978
2977
|
| `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#/stateband/one-vehicle), [Give each one a lane (StateBand)](#/stateband/one-lane-each), [See where the vans stand idle (Scenarios)](#/scenarios/see-where-the-vans-stand-idle) |
|
|
@@ -3032,6 +3031,7 @@ schedule's shape.
|
|
|
3032
3031
|
#### Known limits
|
|
3033
3032
|
|
|
3034
3033
|
- No logarithmic and no band scale: compute the logarithm in `value`; a category is a place on the linear scale ([ADR-0032](https://romanhaendler.github.io/umriss-ui/what-umriss-ui-is-not/), [ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).
|
|
3034
|
+
- umriss shows the reader's time ([ADR-0060](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0060-validation-and-a-layout-editor-are-never-time-zones-not-yet.md)).
|
|
3035
3035
|
|
|
3036
3036
|
What umriss deliberately does not build, and why: [ADR-0032](https://romanhaendler.github.io/umriss-ui/what-umriss-ui-is-not/).
|
|
3037
3037
|
|
|
@@ -3045,11 +3045,11 @@ import { useChart } from "@umriss-ui/charts";
|
|
|
3045
3045
|
|
|
3046
3046
|
Demo page: https://romanhaendler.github.io/umriss-ui/charts/zoom-and-pan/
|
|
3047
3047
|
|
|
3048
|
-
`zoomable` on an x axis turns the gestures and keys on; nothing else is needed. The span shown is part of the chart's view ([ADR-0047](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0047-a-component-holds-its-own-view.md)): `useChart(rows, { initialView, onViewChange })` takes a start and reports
|
|
3048
|
+
`zoomable` on an x axis turns the gestures and keys on; nothing else is needed. The span shown is part of the chart's view ([ADR-0047](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0047-a-component-holds-its-own-view.md)): `useChart(rows, { initialView, onViewChange })` takes a start and reports what the reader does, whole, at most once per frame; `setView(view)`, `domains` and `setDomain(axisId, span | null)` stand on what the hook returns. A lone x axis is `"x"`.
|
|
3049
3049
|
|
|
3050
3050
|
Once an axis is zoomed, the chart offers 'Show all' over a corner of its plot - a button of its own, a tab stop beside the plot's, that brings every zoomed axis back and goes. Its words are the wording's `showAll`.
|
|
3051
3051
|
|
|
3052
|
-
Charts stay in step by
|
|
3052
|
+
Charts stay in step by sending each other what the reader did: each chart's `onViewChange` calls the other's `setView`. `setView` is not reported, so two charts linked both ways do not answer each other, and a pan does not jump back. `syncId` shares only the pointer.
|
|
3053
3053
|
|
|
3054
3054
|
A zoom stops at `zoomLimits`; without them at three readings and at the data's extent. A y axis with `domain="visible"` follows the stretch shown.
|
|
3055
3055
|
|
|
@@ -3418,10 +3418,10 @@ export default function VisibleDomain() {
|
|
|
3418
3418
|
|
|
3419
3419
|
##### Keep charts in step
|
|
3420
3420
|
|
|
3421
|
-
Charts with one `syncId` share the pointer;
|
|
3421
|
+
Charts with one `syncId` share the pointer; send each one's `onViewChange` to the others' `setView`, and a zoom in any of them zooms all.
|
|
3422
3422
|
|
|
3423
3423
|
```tsx
|
|
3424
|
-
import { useState } from "react";
|
|
3424
|
+
import { useEffect, useState } from "react";
|
|
3425
3425
|
import { Tooltip, useChart, type ChartView } from "@umriss-ui/charts";
|
|
3426
3426
|
|
|
3427
3427
|
/* Data from the operations world, written out here so the example runs on its own. */
|
|
@@ -3529,21 +3529,29 @@ const CHANNELS = [
|
|
|
3529
3529
|
] as const;
|
|
3530
3530
|
|
|
3531
3531
|
export default function CursorSync() {
|
|
3532
|
-
// The
|
|
3533
|
-
const [
|
|
3532
|
+
// The three share a view: each sends the others what the reader did to it.
|
|
3533
|
+
const [peers] = useState(() => new Map<string, (view: ChartView) => void>());
|
|
3534
3534
|
return (
|
|
3535
3535
|
<div>
|
|
3536
3536
|
{/* Each plot begins where its y axis ends: labels of one width - three
|
|
3537
3537
|
figures here - keep the crosshairs in one column. */}
|
|
3538
3538
|
{CHANNELS.map((c) => (
|
|
3539
|
-
<Channel key={c.name} channel={c}
|
|
3539
|
+
<Channel key={c.name} channel={c} peers={peers} />
|
|
3540
3540
|
))}
|
|
3541
3541
|
</div>
|
|
3542
3542
|
);
|
|
3543
3543
|
}
|
|
3544
3544
|
|
|
3545
|
-
function Channel({ channel: c,
|
|
3546
|
-
const { Chart, XAxis, YAxis, Line } = useChart(IMAGES_WEEK, {
|
|
3545
|
+
function Channel({ channel: c, peers }: { channel: (typeof CHANNELS)[number]; peers: Map<string, (view: ChartView) => void> }) {
|
|
3546
|
+
const { Chart, XAxis, YAxis, Line, setView } = useChart(IMAGES_WEEK, {
|
|
3547
|
+
onViewChange: (view) => {
|
|
3548
|
+
for (const [name, goTo] of peers) if (name !== c.name) goTo(view);
|
|
3549
|
+
},
|
|
3550
|
+
});
|
|
3551
|
+
useEffect(() => {
|
|
3552
|
+
peers.set(c.name, setView);
|
|
3553
|
+
return () => void peers.delete(c.name);
|
|
3554
|
+
}, [peers, c.name, setView]);
|
|
3547
3555
|
return (
|
|
3548
3556
|
<Chart height={140} syncId="images" ariaLabel={`Image service ${c.name} over last week`}>
|
|
3549
3557
|
<XAxis value="t" time domain="data" zoomable />
|
|
@@ -3565,15 +3573,15 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
3565
3573
|
|
|
3566
3574
|
| Prop | Type | Default | Description |
|
|
3567
3575
|
|---|---|---|---|
|
|
3568
|
-
| `value` *required* | [`AxisField`](#type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and
|
|
3576
|
+
| `value` *required* | [`AxisField`](#type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 74 more |
|
|
3569
3577
|
| `domain` | `"nice" \| "data" \| readonly [number, number] \| readonly [Date, Date]` | `"nice"` | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed: numbers, on a time axis milliseconds or two `Date`s, on a category axis places. On a `zoomable` axis it is the start: what the axis shows while the chart's view names no span for it.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 10 more |
|
|
3570
3578
|
| `position` | `"bottom" \| "top"` | `"bottom"` | Which edge the axis stands at. A second x axis on the opposite edge is how a series counts in a unit of its own.<br>Shown in: [Add axes for other magnitudes (Axis)](#/axis/axes), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) |
|
|
3571
3579
|
| `time` | `boolean` | — | The values are instants: milliseconds since the epoch, or with `time` said ISO 8601 strings as an API sends them, read by the platform's rule - a date with a time and no offset is local time, a date alone is UTC; a string that is none is not drawn. Rows that hold a `Date` put the axis in time without `time`. Ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant in milliseconds. `calendar` implies it.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 36 more |
|
|
3572
3580
|
| `calendar` | `readonly `[`WorkingInterval`](#type-WorkingInterval)`[]` | — | Working calendar: the intervals in which time counts. With it the axis stands in working time - nights and weekends are out, and every removed span gets a break mark. The scale stays affine; the mapping happens in materialisation ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)).<br>Shown in: [Leave out the hours nobody works (Axis)](#/axis/working-time) |
|
|
3573
|
-
| `zoomable` | `boolean` | `false` | Zoom and pan: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click goes back to `domain`; with the focus on the chart, + and − zoom, Shift with ← or → pans and 0 goes back. The span shown is part of the chart's view, by this axis' `id` (`useChart`'s `initialView`, `onViewChange`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 5 more |
|
|
3581
|
+
| `zoomable` | `boolean` | `false` | Zoom and pan: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click goes back to `domain`; with the focus on the chart, + and − zoom, Shift with ← or → pans and 0 goes back. The span shown is part of the chart's view, by this axis' `id` (`useChart`'s `initialView`, `onViewChange`, `setView`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 5 more |
|
|
3574
3582
|
| `zoomLimits` | [`ZoomLimits`](#type-ZoomLimits) | at most the data's extent or this axis' own `domain`, whichever is wider, at least three data steps | The narrowest and the widest span zoom may reach, in the axis' units - milliseconds on a time axis.<br>Shown in: [Limit the zoom](#/zoom-and-pan/zoom-limits) |
|
|
3575
3583
|
| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes (Axis)](#/axis/axes), [Align a second axis to the grid (Axis)](#/axis/aligned-ticks), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 7 more |
|
|
3576
|
-
| `label` | `string` | — | Axis title.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and
|
|
3584
|
+
| `label` | `string` | — | Axis title.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 66 more |
|
|
3577
3585
|
| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Keep charts in step](#/zoom-and-pan/cursor-sync), [Fix the domain and name the ticks (Axis)](#/axis/configuration), [Leave out the hours nobody works (Axis)](#/axis/working-time) and 8 more |
|
|
3578
3586
|
| `tickFormat` | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity.<br>Shown in: [Fix the domain and name the ticks (Axis)](#/axis/configuration), [Leave out the hours nobody works (Axis)](#/axis/working-time), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 21 more |
|
|
3579
3587
|
| `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#/stateband/one-vehicle), [Give each one a lane (StateBand)](#/stateband/one-lane-each), [See where the vans stand idle (Scenarios)](#/scenarios/see-where-the-vans-stand-idle) |
|
|
@@ -3585,13 +3593,13 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
3585
3593
|
|
|
3586
3594
|
| Prop | Type | Default | Description |
|
|
3587
3595
|
|---|---|---|---|
|
|
3588
|
-
| `initialView` | [`ChartView`](#/view/type-ChartView) | — | The view to start from,
|
|
3596
|
+
| `initialView` | [`ChartView`](#/view/type-ChartView) | — | The view to start from, read once when the hook first runs; a different value on a later render is ignored, as React ignores a changed `defaultValue`. To go to a view later, call `setView`. The chart remembers none: where a view is kept is the application's decision.<br>Shown in: [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain), [Hide a series from the legend (Legend)](#/legend/hide-a-series) |
|
|
3589
3597
|
|
|
3590
3598
|
###### Events
|
|
3591
3599
|
|
|
3592
3600
|
| Prop | Type | Default | Description |
|
|
3593
3601
|
|---|---|---|---|
|
|
3594
|
-
| `onViewChange` | `(view: `[`ChartView`](#/view/type-ChartView)`) => void` | — | Every change
|
|
3602
|
+
| `onViewChange` | `(view: `[`ChartView`](#/view/type-ChartView)`) => void` | — | Every change the reader makes, once, always the whole view - the one to keep, or to hand another chart's `setView`. A pan or zoom is reported at most once per frame. Not called for the view the chart starts with, nor for one `setView` applies.<br>Shown in: [Keep charts in step](#/zoom-and-pan/cursor-sync), [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader) |
|
|
3595
3603
|
| `onSelect` | `(hit: `[`TooltipHit`](#type-TooltipHit)`<Z>) => void` | — | The reader chose a point: a click on a hit (a tap too), or Enter on the Active point - the same hit the tooltip's `render` receives. Once per click; the end of a drag does not report, and the second click of a double click does not either. The chart holds no selection and draws none: what is chosen is the application's state. Needs a `<Tooltip>`, which makes the hits; the hit does not travel over `syncId`.<br>Shown in: [Choose a hit (Tooltip)](#/tooltip/choose-a-hit) |
|
|
3596
3604
|
|
|
3597
3605
|
##### Types on this page
|
|
@@ -3684,7 +3692,7 @@ A box's further numbers beside its median, by name.
|
|
|
3684
3692
|
|
|
3685
3693
|
###### `BoxExtras<V = number>`
|
|
3686
3694
|
|
|
3687
|
-
The optional numbers of a box
|
|
3695
|
+
The optional numbers of a box by name.
|
|
3688
3696
|
|
|
3689
3697
|
| Prop | Type | Default | Description |
|
|
3690
3698
|
|---|---|---|---|
|
|
@@ -3701,7 +3709,7 @@ What umriss deliberately does not build, and why: [ADR-0032](https://romanhaendl
|
|
|
3701
3709
|
|
|
3702
3710
|
### View
|
|
3703
3711
|
|
|
3704
|
-
How a reader is looking at a chart - the span in view and the hidden series - kept by the chart, reported whole, and
|
|
3712
|
+
How a reader is looking at a chart - the span in view and the hidden series - kept by the chart, reported whole, and gone back to with `setView` to restore it (saved state, a bookmark, a reload).
|
|
3705
3713
|
|
|
3706
3714
|
```ts
|
|
3707
3715
|
import { useChart } from "@umriss-ui/charts";
|
|
@@ -3711,13 +3719,13 @@ Demo page: https://romanhaendler.github.io/umriss-ui/charts/view/
|
|
|
3711
3719
|
|
|
3712
3720
|
A chart holds its own view ([ADR-0047](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0047-a-component-holds-its-own-view.md)): `{ domains, hidden }` - the span each zoomable x axis shows, by axis `id`, and the hidden series, by `name`. Whatever is at its default is absent, so a chart nobody touched reports `{}`.
|
|
3713
3721
|
|
|
3714
|
-
`useChart(rows, { initialView, onViewChange })`: `onViewChange` hears every change once, always the whole view; `initialView` is the start,
|
|
3722
|
+
`useChart(rows, { initialView, onViewChange })`: `onViewChange` hears every change the reader makes once, always the whole view; `initialView` is the start, read once - a different value on a later render is ignored; `setView(view)` goes to a whole view later and is not reported. An axis id or a series name that no longer occurs falls out. Where a view is kept - state, storage, an address - is the application's decision; the chart remembers none.
|
|
3715
3723
|
|
|
3716
3724
|
#### Examples
|
|
3717
3725
|
|
|
3718
3726
|
##### Keep and restore a view
|
|
3719
3727
|
|
|
3720
|
-
`onViewChange` reports the span in view and the hidden series as one view; keep it - here in the browser's storage, so it outlives a reload - and
|
|
3728
|
+
`onViewChange` reports the span in view and the hidden series as one view; keep it - here in the browser's storage, so it outlives a reload - and go back to it with `setView`. Zoom, hide a series, keep, reload, restore.
|
|
3721
3729
|
|
|
3722
3730
|
```tsx
|
|
3723
3731
|
import { useState } from "react";
|
|
@@ -3832,11 +3840,10 @@ function keep(view: ChartView): void {
|
|
|
3832
3840
|
}
|
|
3833
3841
|
|
|
3834
3842
|
export default function KeepAndRestore() {
|
|
3835
|
-
/* The
|
|
3836
|
-
|
|
3837
|
-
const [view, setView] = useState<ChartView>({});
|
|
3843
|
+
/* The chart holds its view; `view` is what it shows now, and `setView`
|
|
3844
|
+
restores a kept one. */
|
|
3838
3845
|
const [kept, setKept] = useState<ChartView | null>(readKept);
|
|
3839
|
-
const { Chart, XAxis, YAxis, Line } = useChart(SERIES[0]!.data
|
|
3846
|
+
const { Chart, XAxis, YAxis, Line, view, setView } = useChart(SERIES[0]!.data);
|
|
3840
3847
|
return (
|
|
3841
3848
|
<>
|
|
3842
3849
|
<Chart height={260} ariaLabel="Latency of three services today">
|
|
@@ -3889,13 +3896,13 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
3889
3896
|
|
|
3890
3897
|
| Prop | Type | Default | Description |
|
|
3891
3898
|
|---|---|---|---|
|
|
3892
|
-
| `initialView` | [`ChartView`](#type-ChartView) | — | The view to start from,
|
|
3899
|
+
| `initialView` | [`ChartView`](#type-ChartView) | — | The view to start from, read once when the hook first runs; a different value on a later render is ignored, as React ignores a changed `defaultValue`. To go to a view later, call `setView`. The chart remembers none: where a view is kept is the application's decision.<br>Shown in: [Fit the y axis to what is visible (Zoom and pan)](#/zoom-and-pan/visible-domain), [Hide a series from the legend (Legend)](#/legend/hide-a-series) |
|
|
3893
3900
|
|
|
3894
3901
|
###### Events
|
|
3895
3902
|
|
|
3896
3903
|
| Prop | Type | Default | Description |
|
|
3897
3904
|
|---|---|---|---|
|
|
3898
|
-
| `onViewChange` | `(view: `[`ChartView`](#type-ChartView)`) => void` | — | Every change
|
|
3905
|
+
| `onViewChange` | `(view: `[`ChartView`](#type-ChartView)`) => void` | — | Every change the reader makes, once, always the whole view - the one to keep, or to hand another chart's `setView`. A pan or zoom is reported at most once per frame. Not called for the view the chart starts with, nor for one `setView` applies.<br>Shown in: [Keep charts in step (Zoom and pan)](#/zoom-and-pan/cursor-sync), [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader) |
|
|
3899
3906
|
| `onSelect` | `(hit: `[`TooltipHit`](#type-TooltipHit)`<Z>) => void` | — | The reader chose a point: a click on a hit (a tap too), or Enter on the Active point - the same hit the tooltip's `render` receives. Once per click; the end of a drag does not report, and the second click of a double click does not either. The chart holds no selection and draws none: what is chosen is the application's state. Needs a `<Tooltip>`, which makes the hits; the hit does not travel over `syncId`.<br>Shown in: [Choose a hit (Tooltip)](#/tooltip/choose-a-hit) |
|
|
3900
3907
|
|
|
3901
3908
|
##### `ChartView`
|
|
@@ -3956,7 +3963,7 @@ A box's further numbers beside its median, by name.
|
|
|
3956
3963
|
|
|
3957
3964
|
###### `BoxExtras<V = number>`
|
|
3958
3965
|
|
|
3959
|
-
The optional numbers of a box
|
|
3966
|
+
The optional numbers of a box by name.
|
|
3960
3967
|
|
|
3961
3968
|
| Prop | Type | Default | Description |
|
|
3962
3969
|
|---|---|---|---|
|
|
@@ -5187,15 +5194,15 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
5187
5194
|
|
|
5188
5195
|
| Prop | Type | Default | Description |
|
|
5189
5196
|
|---|---|---|---|
|
|
5190
|
-
| `value` *required* | [`Value`](#type-Value)`<T>` | — | Height - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [One bar per category](#/bar/per-category), [Group bars side by side](#/bar/grouped), [Show bars above and below zero](#/bar/deviation) and
|
|
5197
|
+
| `value` *required* | [`Value`](#type-Value)`<T>` | — | Height - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [One bar per category](#/bar/per-category), [Group bars side by side](#/bar/grouped), [Show bars above and below zero](#/bar/deviation) and 13 more |
|
|
5191
5198
|
| `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) |
|
|
5192
5199
|
| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) |
|
|
5193
5200
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) |
|
|
5194
|
-
| `name` | `string` | "Series n", after its place in the chart | The name in legend and tooltip. Without one a warning stands in DEV - an unnamed series is a colour nobody can look up.<br>Shown in: [One bar per category](#/bar/per-category), [Group bars side by side](#/bar/grouped), [Show bars above and below zero](#/bar/deviation) and
|
|
5201
|
+
| `name` | `string` | "Series n", after its place in the chart | The name in legend and tooltip. Without one a warning stands in DEV - an unnamed series is a colour nobody can look up.<br>Shown in: [One bar per category](#/bar/per-category), [Group bars side by side](#/bar/grouped), [Show bars above and below zero](#/bar/deviation) and 13 more |
|
|
5195
5202
|
| `format` | `(value: number) => string` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it.<br>Shown in: [Show shares of a whole](#/bar/percent), [Compare the budget with the forecast (Scenarios)](#/scenarios/compare-budget-with-forecast) |
|
|
5196
5203
|
| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Group bars side by side](#/bar/grouped), [See where the vans stand idle (Scenarios)](#/scenarios/see-where-the-vans-stand-idle), [Compare the budget with the forecast (Scenarios)](#/scenarios/compare-budget-with-forecast) |
|
|
5197
5204
|
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. `color` beats it.<br>Shown in: [Compare the budget with the forecast (Scenarios)](#/scenarios/compare-budget-with-forecast) |
|
|
5198
|
-
| `stack` | `string` | — | The stack this series stands in: every Bar and Area with the same id on the same x and y axis stands on the ones registered before it. A gap stacks as zero; negative values stack downward from zero. The tooltip names each series' own value and the stack's total.<br>Shown in: [Stack bars](#/bar/stacked), [Show shares of a whole](#/bar/percent), [
|
|
5205
|
+
| `stack` | `string` | — | The stack this series stands in: every Bar and Area with the same id on the same x and y axis stands on the ones registered before it. A gap stacks as zero; negative values stack downward from zero. The tooltip names each series' own value and the stack's total.<br>Shown in: [Stack bars](#/bar/stacked), [Show shares of a whole](#/bar/percent), [Read a stack's total in the table (Tooltip)](#/tooltip/total-of-a-stack) and 1 more |
|
|
5199
5206
|
| `normalize` | `boolean` | — | On any member of a stack, every x of the stack sums to 100 %: each value becomes its share, and the y axis reads in percent unless it has a `tickFormat`. The total stays the readings' own sum, written in the series' `format`.<br>Shown in: [Show shares of a whole](#/bar/percent) |
|
|
5200
5207
|
| `barWidth` | `number` | `0.8` | Width as a fraction of the step; just under 1, so that neighbours do not touch. Several bar series share this fraction.<br>Shown in: [Group bars side by side](#/bar/grouped), [Count readings into a histogram](#/bar/histogram), [Sort causes and collect the tail (Pareto)](#/pareto/pareto) and 3 more |
|
|
5201
5208
|
|
|
@@ -5236,7 +5243,7 @@ type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
|
|
|
5236
5243
|
|
|
5237
5244
|
#### Known limits
|
|
5238
5245
|
|
|
5239
|
-
-
|
|
5246
|
+
- Horizontal bars are the next kind to come ([ADR-0059](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0059-the-set-of-chart-kinds-is-open.md)); until then a `Matrix` or a `Table` ranks by name.
|
|
5240
5247
|
|
|
5241
5248
|
What umriss deliberately does not build, and why: [ADR-0032](https://romanhaendler.github.io/umriss-ui/what-umriss-ui-is-not/).
|
|
5242
5249
|
|
|
@@ -9526,6 +9533,39 @@ export default function ChooseAHit() {
|
|
|
9526
9533
|
}
|
|
9527
9534
|
```
|
|
9528
9535
|
|
|
9536
|
+
##### Read a stack's total in the table
|
|
9537
|
+
|
|
9538
|
+
The table of a stacked chart ends the stack's members with a Total column - the sum the tooltip shows at the same place, so nobody adds the row up by hand.
|
|
9539
|
+
|
|
9540
|
+
```tsx
|
|
9541
|
+
import { DataTable, Legend, Tooltip, useChart } from "@umriss-ui/charts";
|
|
9542
|
+
|
|
9543
|
+
/* Support tickets opened per working day, by channel - one week, 2 to 6 March. */
|
|
9544
|
+
const TICKETS = [
|
|
9545
|
+
{ day: "Mon 2", mail: 34, chat: 21, phone: 9 },
|
|
9546
|
+
{ day: "Tue 3", mail: 29, chat: 25, phone: 12 },
|
|
9547
|
+
{ day: "Wed 4", mail: 31, chat: 18, phone: 7 },
|
|
9548
|
+
{ day: "Thu 5", mail: 27, chat: 30, phone: 11 },
|
|
9549
|
+
{ day: "Fri 6", mail: 22, chat: 16, phone: 6 },
|
|
9550
|
+
];
|
|
9551
|
+
|
|
9552
|
+
export default function TotalOfAStack() {
|
|
9553
|
+
const { Chart, XAxis, YAxis, Bar } = useChart(TICKETS);
|
|
9554
|
+
return (
|
|
9555
|
+
<Chart height={260} ariaLabel="Tickets opened per working day, by channel">
|
|
9556
|
+
<XAxis value="day" />
|
|
9557
|
+
<YAxis label="Tickets" />
|
|
9558
|
+
<Bar value="mail" name="Mail" stack="tickets" />
|
|
9559
|
+
<Bar value="chat" name="Chat" stack="tickets" />
|
|
9560
|
+
<Bar value="phone" name="Phone" stack="tickets" />
|
|
9561
|
+
<Legend placement="top" />
|
|
9562
|
+
<Tooltip mode="x" />
|
|
9563
|
+
<DataTable />
|
|
9564
|
+
</Chart>
|
|
9565
|
+
);
|
|
9566
|
+
}
|
|
9567
|
+
```
|
|
9568
|
+
|
|
9529
9569
|
#### Keyboard
|
|
9530
9570
|
|
|
9531
9571
|
The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
@@ -9536,7 +9576,7 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
9536
9576
|
|
|
9537
9577
|
| Prop | Type | Default | Description |
|
|
9538
9578
|
|---|---|---|---|
|
|
9539
|
-
| `mode` | `"x" \| "nearest"` | `"x"` | "x": every series at the x position; "nearest": only the nearest point.<br>Shown in: [Report every series or the nearest](#/tooltip/x-or-nearest), [Write the tooltip yourself](#/tooltip/own-content), [Write each value in its unit](#/tooltip/value-format) and
|
|
9579
|
+
| `mode` | `"x" \| "nearest"` | `"x"` | "x": every series at the x position; "nearest": only the nearest point.<br>Shown in: [Report every series or the nearest](#/tooltip/x-or-nearest), [Write the tooltip yourself](#/tooltip/own-content), [Write each value in its unit](#/tooltip/value-format) and 61 more |
|
|
9540
9580
|
| `limits` | `boolean` | `false` | Adds a row for every labelled `LimitLine` and `LimitBand` on the hit's y axis - its label and value in that axis' format - to the built-in tooltip, and the same to what a key reads out. Limits are not series and stay out of the tooltip unless asked for.<br>Shown in: [Read the limits at the hit](#/tooltip/limits) |
|
|
9541
9581
|
| `render` | `(hit: `[`TooltipHit`](#type-TooltipHit)`<T>) => ReactNode` | the built-in tooltip | Render prop for content of one's own. Compared by its source text, like `tickFormat` - with the same closure limit.<br>Shown in: [Write the tooltip yourself](#/tooltip/own-content), [Fix the domain and name the ticks (Axis)](#/axis/configuration) |
|
|
9542
9582
|
|
|
@@ -9544,13 +9584,13 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
9544
9584
|
|
|
9545
9585
|
| Prop | Type | Default | Description |
|
|
9546
9586
|
|---|---|---|---|
|
|
9547
|
-
| `initialView` | [`ChartView`](#/view/type-ChartView) | — | The view to start from,
|
|
9587
|
+
| `initialView` | [`ChartView`](#/view/type-ChartView) | — | The view to start from, read once when the hook first runs; a different value on a later render is ignored, as React ignores a changed `defaultValue`. To go to a view later, call `setView`. The chart remembers none: where a view is kept is the application's decision.<br>Shown in: [Fit the y axis to what is visible (Zoom and pan)](#/zoom-and-pan/visible-domain), [Hide a series from the legend (Legend)](#/legend/hide-a-series) |
|
|
9548
9588
|
|
|
9549
9589
|
###### Events
|
|
9550
9590
|
|
|
9551
9591
|
| Prop | Type | Default | Description |
|
|
9552
9592
|
|---|---|---|---|
|
|
9553
|
-
| `onViewChange` | `(view: `[`ChartView`](#/view/type-ChartView)`) => void` | — | Every change
|
|
9593
|
+
| `onViewChange` | `(view: `[`ChartView`](#/view/type-ChartView)`) => void` | — | Every change the reader makes, once, always the whole view - the one to keep, or to hand another chart's `setView`. A pan or zoom is reported at most once per frame. Not called for the view the chart starts with, nor for one `setView` applies.<br>Shown in: [Keep charts in step (Zoom and pan)](#/zoom-and-pan/cursor-sync), [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader) |
|
|
9554
9594
|
| `onSelect` | `(hit: `[`TooltipHit`](#type-TooltipHit)`<Z>) => void` | — | The reader chose a point: a click on a hit (a tap too), or Enter on the Active point - the same hit the tooltip's `render` receives. Once per click; the end of a drag does not report, and the second click of a double click does not either. The chart holds no selection and draws none: what is chosen is the application's state. Needs a `<Tooltip>`, which makes the hits; the hit does not travel over `syncId`.<br>Shown in: [Choose a hit](#/tooltip/choose-a-hit) |
|
|
9555
9595
|
|
|
9556
9596
|
##### Types on this page
|
|
@@ -9596,7 +9636,7 @@ A box's further numbers beside its median, by name.
|
|
|
9596
9636
|
|
|
9597
9637
|
###### `BoxExtras<V = number>`
|
|
9598
9638
|
|
|
9599
|
-
The optional numbers of a box
|
|
9639
|
+
The optional numbers of a box by name.
|
|
9600
9640
|
|
|
9601
9641
|
| Prop | Type | Default | Description |
|
|
9602
9642
|
|---|---|---|---|
|
|
@@ -9871,7 +9911,7 @@ Every entry of a named series is a button whose `aria-pressed` says whether its
|
|
|
9871
9911
|
|
|
9872
9912
|
| Prop | Type | Default | Description |
|
|
9873
9913
|
|---|---|---|---|
|
|
9874
|
-
| `placement` | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on.<br>Shown in: [Legend above or below](#/legend/above-or-below), [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind) and
|
|
9914
|
+
| `placement` | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on.<br>Shown in: [Legend above or below](#/legend/above-or-below), [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind) and 28 more |
|
|
9875
9915
|
|
|
9876
9916
|
### Benchmark
|
|
9877
9917
|
|
|
@@ -10244,7 +10284,7 @@ From `XAxisProps` — the full table stands on [Axis](#/axis/type-XAxisProps).
|
|
|
10244
10284
|
| [`value`](#/axis/XAxisProps-value) *required* | [`AxisField`](#/axis/type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#/axis/type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`. |
|
|
10245
10285
|
| [`domain`](#/axis/XAxisProps-domain) | `"nice" \| "data" \| readonly [number, number] \| readonly [Date, Date]` | `"nice"` | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed: numbers, on a time axis milliseconds or two `Date`s, on a category axis places. On a `zoomable` axis it is the start: what the axis shows while the chart's view names no span for it. |
|
|
10246
10286
|
| [`time`](#/axis/XAxisProps-time) | `boolean` | — | The values are instants: milliseconds since the epoch, or with `time` said ISO 8601 strings as an API sends them, read by the platform's rule - a date with a time and no offset is local time, a date alone is UTC; a string that is none is not drawn. Rows that hold a `Date` put the axis in time without `time`. Ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant in milliseconds. `calendar` implies it. |
|
|
10247
|
-
| [`zoomable`](#/axis/XAxisProps-zoomable) | `boolean` | `false` | Zoom and pan: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click goes back to `domain`; with the focus on the chart, + and − zoom, Shift with ← or → pans and 0 goes back. The span shown is part of the chart's view, by this axis' `id` (`useChart`'s `initialView`, `onViewChange`, `setDomain`). The plain wheel always scrolls the page. |
|
|
10287
|
+
| [`zoomable`](#/axis/XAxisProps-zoomable) | `boolean` | `false` | Zoom and pan: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click goes back to `domain`; with the focus on the chart, + and − zoom, Shift with ← or → pans and 0 goes back. The span shown is part of the chart's view, by this axis' `id` (`useChart`'s `initialView`, `onViewChange`, `setView`, `setDomain`). The plain wheel always scrolls the page. |
|
|
10248
10288
|
| [`id`](#/axis/XAxisProps-id) | `string` | `"x"` | Axis id, through which series bind themselves. |
|
|
10249
10289
|
| [`label`](#/axis/XAxisProps-label) | `string` | — | Axis title. |
|
|
10250
10290
|
|
|
@@ -10460,15 +10500,6 @@ for a grid up to the next clock change.
|
|
|
10460
10500
|
function localOffset(instant: number): number;
|
|
10461
10501
|
```
|
|
10462
10502
|
|
|
10463
|
-
##### `mapSeries`
|
|
10464
|
-
|
|
10465
|
-
Map a whole series inwards - the route materialisation takes when it wants to
|
|
10466
|
-
go it in one piece. Only the first n values are touched.
|
|
10467
|
-
|
|
10468
|
-
```ts
|
|
10469
|
-
function mapSeries(input: CalendarInput, source: Float64Array, n: number, target: Float64Array): void;
|
|
10470
|
-
```
|
|
10471
|
-
|
|
10472
10503
|
##### `pareto`
|
|
10473
10504
|
|
|
10474
10505
|
Sorts descending, accumulates, collects the tail and finds the cutoff
|
|
@@ -10512,55 +10543,6 @@ colours of
|
|
|
10512
10543
|
function resolveColours<K extends string>(root: Element, colours: Readonly<Record<K, string>>): Record<K, string>;
|
|
10513
10544
|
```
|
|
10514
10545
|
|
|
10515
|
-
##### `ruleOutlier`
|
|
10516
|
-
|
|
10517
|
-
Rule 1 (Nelson 1, Western Electric 1): one point beyond three sigma.
|
|
10518
|
-
Beyond, not on it - a point exactly on the limit violates nothing.
|
|
10519
|
-
|
|
10520
|
-
```ts
|
|
10521
|
-
function ruleOutlier(values: readonly number[], limits: ControlLimits): number[];
|
|
10522
|
-
```
|
|
10523
|
-
|
|
10524
|
-
##### `ruleRun`
|
|
10525
|
-
|
|
10526
|
-
Rule 2 (Nelson 2): a run of points on one side of the centre line. The
|
|
10527
|
-
default length is nine - Nelson. Western Electric counts eight; that is why
|
|
10528
|
-
the length is a parameter and not a literal, so that a works with a rule of
|
|
10529
|
-
its own need not argue with the library.
|
|
10530
|
-
|
|
10531
|
-
```ts
|
|
10532
|
-
function ruleRun(values: readonly number[], limits: ControlLimits, length?: number): number[];
|
|
10533
|
-
```
|
|
10534
|
-
|
|
10535
|
-
##### `ruleTrend`
|
|
10536
|
-
|
|
10537
|
-
Rule 3 (Nelson 3): a run of nothing but rises or nothing but falls. The
|
|
10538
|
-
default length is six points, so five steps - Nelson. Two equal values are
|
|
10539
|
-
neither a rise nor a fall and break the run.
|
|
10540
|
-
|
|
10541
|
-
```ts
|
|
10542
|
-
function ruleTrend(values: readonly number[], length?: number): number[];
|
|
10543
|
-
```
|
|
10544
|
-
|
|
10545
|
-
##### `ruleTwoOfThree`
|
|
10546
|
-
|
|
10547
|
-
Rule 4 (Nelson 5): two of three consecutive points beyond two sigma on the
|
|
10548
|
-
same side. Reported are the points beyond the zone, not the one in between -
|
|
10549
|
-
that one is unremarkable and, marked, would look like a measurement error.
|
|
10550
|
-
|
|
10551
|
-
```ts
|
|
10552
|
-
function ruleTwoOfThree(values: readonly number[], limits: ControlLimits): number[];
|
|
10553
|
-
```
|
|
10554
|
-
|
|
10555
|
-
##### `sigmaFromLimit`
|
|
10556
|
-
|
|
10557
|
-
Sigma calculated back from a limit that stands on paper. For callers whose
|
|
10558
|
-
baseline has been handed down as a centre line and a control limit.
|
|
10559
|
-
|
|
10560
|
-
```ts
|
|
10561
|
-
function sigmaFromLimit(center: number, upper: number): number;
|
|
10562
|
-
```
|
|
10563
|
-
|
|
10564
10546
|
##### `subscribeTheme`
|
|
10565
10547
|
|
|
10566
10548
|
Subscribe to theme invalidations - a switch of `color-scheme` on the
|
|
@@ -10595,26 +10577,6 @@ interval has no next and comes back as itself.
|
|
|
10595
10577
|
function toWallClock(workingTime: number, input: CalendarInput): number;
|
|
10596
10578
|
```
|
|
10597
10579
|
|
|
10598
|
-
##### `toWorkingTime`
|
|
10599
|
-
|
|
10600
|
-
Wall clock time → working time.
|
|
10601
|
-
|
|
10602
|
-
A point in a removed interval is a gap and becomes `NaN` - the encoding every
|
|
10603
|
-
gap of this library already uses, and the drawing loop breaks the mark at it
|
|
10604
|
-
of its own accord. Not the edge of the interval: a measurement from a time
|
|
10605
|
-
which, according to the calendar, did not exist could not be laid there
|
|
10606
|
-
honestly; it would pile up on what really does lie there. The same holds
|
|
10607
|
-
before the first and after the last interval.
|
|
10608
|
-
|
|
10609
|
-
The end of one interval and the beginning of the next fall on the same value:
|
|
10610
|
-
in working time they are neighbours, and the line between two points on
|
|
10611
|
-
either side is drawn. That is not a lie but the whole purpose of the axis; the
|
|
10612
|
-
mark in the axis band tells the reader that time was taken out there.
|
|
10613
|
-
|
|
10614
|
-
```ts
|
|
10615
|
-
function toWorkingTime(wallClock: number, input: CalendarInput): number;
|
|
10616
|
-
```
|
|
10617
|
-
|
|
10618
10580
|
##### `toWorkingTimeClamped`
|
|
10619
10581
|
|
|
10620
10582
|
Wall clock time → working time, but without NaN: whatever lies in removed
|
|
@@ -10622,10 +10584,8 @@ time falls onto the seam that this span collapses onto anyway; whatever lies
|
|
|
10622
10584
|
before the first or after the last interval onto 0 or onto the whole
|
|
10623
10585
|
working time respectively.
|
|
10624
10586
|
|
|
10625
|
-
|
|
10626
|
-
|
|
10627
|
-
with NaN is false, so that a search over a block of NaN silently lands on the
|
|
10628
|
-
wrong point. The clamped value is a POSITION, not a statement: the point
|
|
10587
|
+
The materialised x values must stay ascending: binary search assumes it, and
|
|
10588
|
+
a search over NaN silently lands on the wrong point. The clamped value is a POSITION, not a statement: the point
|
|
10629
10589
|
itself is carried as a gap and is never drawn and never hit.
|
|
10630
10590
|
|
|
10631
10591
|
```ts
|
|
@@ -10676,22 +10636,6 @@ function workingCalendar(intervals: readonly WorkingInterval[]): WorkingCalendar
|
|
|
10676
10636
|
|
|
10677
10637
|
Used on [Axis](#/axis).
|
|
10678
10638
|
|
|
10679
|
-
##### `workingTicks`
|
|
10680
|
-
|
|
10681
|
-
Tick values for an axis extent that already stands in WORKING TIME - the
|
|
10682
|
-
route the axis layout takes.
|
|
10683
|
-
|
|
10684
|
-
The extent is trimmed to the working time that exists (an extent widened to
|
|
10685
|
-
nice boundaries reaches beyond it), calculated back into wall clock time, and
|
|
10686
|
-
the candidates arise there. The step comes from the span in working time and
|
|
10687
|
-
not from the one in wall clock time: roughly one candidate per step of
|
|
10688
|
-
working time survives, and calculated from the wall clock span, four out of
|
|
10689
|
-
ten wanted ticks would be left.
|
|
10690
|
-
|
|
10691
|
-
```ts
|
|
10692
|
-
function workingTicks(input: CalendarInput, from: number, to: number, count: number, offset?: number): number[];
|
|
10693
|
-
```
|
|
10694
|
-
|
|
10695
10639
|
##### `workingTimeTicks`
|
|
10696
10640
|
|
|
10697
10641
|
Ticks for a working time axis, from an extent in WALL CLOCK TIME.
|
|
@@ -10764,42 +10708,6 @@ const DEFAULT_GRADIENT: readonly string[];
|
|
|
10764
10708
|
|
|
10765
10709
|
Used on [Matrix](#/matrix).
|
|
10766
10710
|
|
|
10767
|
-
##### `defaultRules`
|
|
10768
|
-
|
|
10769
|
-
All four rules, with Nelson's run lengths: nine points on one side, six
|
|
10770
|
-
points in succession rising or falling. Western Electric counts eight; both
|
|
10771
|
-
lengths are therefore parameters.
|
|
10772
|
-
|
|
10773
|
-
```ts
|
|
10774
|
-
const defaultRules: RuleOptions;
|
|
10775
|
-
```
|
|
10776
|
-
|
|
10777
|
-
##### `Echoes`
|
|
10778
|
-
|
|
10779
|
-
The views a component reported that may still come back, by their
|
|
10780
|
-
content key - the chart's and the schedule's ([ADR-0047](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0047-a-component-holds-its-own-view.md)), the table holding
|
|
10781
|
-
a copy of its own. An application keeping the view hands
|
|
10782
|
-
it back a frame or more late - by then a pan has moved on, and going to the
|
|
10783
|
-
view handed in would jump back. So a view handed in that equals one
|
|
10784
|
-
reported since the last one handed in, within a second, is the component's
|
|
10785
|
-
own state coming back, not a view to go to. The echoes come in order: one drops
|
|
10786
|
-
itself and every older report, a view from outside drops them all. The
|
|
10787
|
-
second bounds the list where nothing is handed back, and lets such an
|
|
10788
|
-
application still restore a view it kept.
|
|
10789
|
-
|
|
10790
|
-
```ts
|
|
10791
|
-
class Echoes {
|
|
10792
|
-
private reports;
|
|
10793
|
-
/** Notes a view reported, by its key. */
|
|
10794
|
-
reported(key: string): void;
|
|
10795
|
-
/** Whether the view handed in is a report coming back. */
|
|
10796
|
-
has(key: string): boolean;
|
|
10797
|
-
/** Forgets what the view handed in answers. */
|
|
10798
|
-
handed(key: string): void;
|
|
10799
|
-
private at;
|
|
10800
|
-
}
|
|
10801
|
-
```
|
|
10802
|
-
|
|
10803
10711
|
##### `HOUR`
|
|
10804
10712
|
|
|
10805
10713
|
One hour in milliseconds.
|
|
@@ -10839,16 +10747,6 @@ const MINUTE: number;
|
|
|
10839
10747
|
|
|
10840
10748
|
Used on [Scenarios](#/), [Installation](#/installation), [Chart](#/chart), [Axis](#/axis), [Zoom and pan](#/zoom-and-pan), [View](#/view), [Line](#/line), [Area](#/area), [Scatter](#/scatter), [BoxPlot](#/boxplot), [StateBand](#/stateband), [LimitLine](#/limitline), [Tooltip](#/tooltip), [Legend](#/legend) and [Benchmark](#/benchmark).
|
|
10841
10749
|
|
|
10842
|
-
##### `paretoDefaults`
|
|
10843
|
-
|
|
10844
|
-
What [`pareto`](#/api/pareto) assumes where a call says nothing: a cutoff of 80 %, and no
|
|
10845
|
-
collecting of the tail.
|
|
10846
|
-
|
|
10847
|
-
```ts
|
|
10848
|
-
const defaultOptions: Omit<ParetoOptions, "remainderName">;
|
|
10849
|
-
// exported as paretoDefaults
|
|
10850
|
-
```
|
|
10851
|
-
|
|
10852
10750
|
##### `SECOND`
|
|
10853
10751
|
|
|
10854
10752
|
One second in milliseconds, the unit of a time axis.
|
|
@@ -10882,8 +10780,8 @@ An `Area` as the chart holds it once registered.
|
|
|
10882
10780
|
| `format` | `(value: number) => string` | — | The value in the tooltip; before the y axis' `tickFormat`. Compared by its source text, as an accessor is. From `SeriesBase`. |
|
|
10883
10781
|
| `color` | `string` | — | From `SeriesBase`. |
|
|
10884
10782
|
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value: the theme resolves it, in both themes. For series that mean something rather than just being the next one - the violating points of a control chart, say. `color` beats it. From `SeriesBase`. |
|
|
10885
|
-
| `stack` | `string` | — | The stack this series stands in: series with the same id, on the same x and y axis, stack in registration order
|
|
10886
|
-
| `normalize` | `boolean` | — | On any member, the whole stack sums to 100 at every x
|
|
10783
|
+
| `stack` | `string` | — | The stack this series stands in: series with the same id, on the same x and y axis, stack in registration order. From `Stackable`. |
|
|
10784
|
+
| `normalize` | `boolean` | — | On any member, the whole stack sums to 100 at every x. From `Stackable`. |
|
|
10887
10785
|
|
|
10888
10786
|
##### `Assessment`
|
|
10889
10787
|
|
|
@@ -10992,8 +10890,8 @@ A `Bar` as the chart holds it once registered.
|
|
|
10992
10890
|
| `format` | `(value: number) => string` | — | The value in the tooltip; before the y axis' `tickFormat`. Compared by its source text, as an accessor is. From `SeriesBase`. |
|
|
10993
10891
|
| `color` | `string` | — | From `SeriesBase`. |
|
|
10994
10892
|
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value: the theme resolves it, in both themes. For series that mean something rather than just being the next one - the violating points of a control chart, say. `color` beats it. From `SeriesBase`. |
|
|
10995
|
-
| `stack` | `string` | — | The stack this series stands in: series with the same id, on the same x and y axis, stack in registration order
|
|
10996
|
-
| `normalize` | `boolean` | — | On any member, the whole stack sums to 100 at every x
|
|
10893
|
+
| `stack` | `string` | — | The stack this series stands in: series with the same id, on the same x and y axis, stack in registration order. From `Stackable`. |
|
|
10894
|
+
| `normalize` | `boolean` | — | On any member, the whole stack sums to 100 at every x. From `Stackable`. |
|
|
10997
10895
|
|
|
10998
10896
|
##### `Bin`
|
|
10999
10897
|
|
|
@@ -11036,7 +10934,7 @@ is a gap; and its outliers ([ADR-0040](https://github.com/romanhaendler/umriss-u
|
|
|
11036
10934
|
|
|
11037
10935
|
##### `BoxExtras<V = number>`
|
|
11038
10936
|
|
|
11039
|
-
The optional numbers of a box
|
|
10937
|
+
The optional numbers of a box by name.
|
|
11040
10938
|
|
|
11041
10939
|
| Prop | Type | Default | Description |
|
|
11042
10940
|
|---|---|---|---|
|
|
@@ -11109,24 +11007,27 @@ is typed by that `data` instead.
|
|
|
11109
11007
|
|
|
11110
11008
|
| Prop | Type | Default | Description |
|
|
11111
11009
|
|---|---|---|---|
|
|
11112
|
-
| `Chart` *required* | `(props: `[`ChartProps`](#/chart/type-ChartProps)`) => ReactNode` | — | The chart over the hook's rows. One per `useChart`: it holds the view, and a second chart is a second call.<br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and
|
|
11113
|
-
| `XAxis` *required* | `<T = Z>(props: `[`XAxisProps`](#/axis/type-XAxisProps)`<T>) => null` | — | An x axis reads the rows of every series bound to it: the hook's, or with `<XAxis<Row>>` those the series bring as their own `data`.<br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and
|
|
11114
|
-
| `YAxis` *required* | `(props: `[`YAxisProps`](#/axis/type-YAxisProps)`) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and
|
|
11010
|
+
| `Chart` *required* | `(props: `[`ChartProps`](#/chart/type-ChartProps)`) => ReactNode` | — | The chart over the hook's rows. One per `useChart`: it holds the view, and a second chart is a second call.<br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 74 more |
|
|
11011
|
+
| `XAxis` *required* | `<T = Z>(props: `[`XAxisProps`](#/axis/type-XAxisProps)`<T>) => null` | — | An x axis reads the rows of every series bound to it: the hook's, or with `<XAxis<Row>>` those the series bring as their own `data`.<br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 74 more |
|
|
11012
|
+
| `YAxis` *required* | `(props: `[`YAxisProps`](#/axis/type-YAxisProps)`) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 74 more |
|
|
11115
11013
|
| `Line` *required* | `<T = Z>(props: `[`LineProps`](#/line/type-LineProps)`<T>) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 47 more |
|
|
11116
11014
|
| `Area` *required* | `<T = Z>(props: `[`AreaProps`](#/area/type-AreaProps)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 5 more |
|
|
11117
|
-
| `Bar` *required* | `<T = Z>(props: `[`BarProps`](#/bar/type-BarProps)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and
|
|
11015
|
+
| `Bar` *required* | `<T = Z>(props: `[`BarProps`](#/bar/type-BarProps)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 13 more |
|
|
11118
11016
|
| `Scatter` *required* | `<T = Z>(props: `[`ScatterProps`](#/scatter/type-ScatterProps)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 2 more |
|
|
11119
11017
|
| `StateBand` *required* | `<T = Z>(props: `[`StateBandProps`](#/stateband/type-StateBandProps)`<T> & `[`OneLane`](#type-OneLane)`) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [One vehicle through the day (StateBand)](#/stateband/one-vehicle), [Lay a state under a course (StateBand)](#/stateband/under-a-course) and 3 more |
|
|
11120
11018
|
| `Matrix` *required* | `<T = Z>(props: `[`MatrixProps`](#/matrix/type-MatrixProps)`<T>) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Colour cells by their limits (Matrix)](#/matrix/by-limits), [Colour cells along a gradient (Matrix)](#/matrix/gradient) |
|
|
11121
11019
|
| `BoxPlot` *required* | `<T = Z>(props: `[`BoxPlotProps`](#/boxplot/type-BoxPlotProps)`<T>) => null` | — | <br>Shown in: [One box per service (BoxPlot)](#/boxplot/minimal), [A box per hour on a time axis (BoxPlot)](#/boxplot/over-time), [With outliers (BoxPlot)](#/boxplot/outliers) and 4 more |
|
|
11122
|
-
| `view` *required* | [`ChartView`](#/view/type-ChartView) | — | How the reader is looking at the chart
|
|
11020
|
+
| `view` *required* | [`ChartView`](#/view/type-ChartView) | — | How the reader is looking at the chart.<br>Shown in: [Keep and restore a view (View)](#/view/keep-and-restore) |
|
|
11123
11021
|
| `domains` *required* | [`AxisSpans`](#type-AxisSpans) | — | The span each zoomable x axis shows, by axis `id`; an axis absent shows its own `domain`. |
|
|
11022
|
+
| `setView` *required* | `(view: `[`ChartView`](#/view/type-ChartView)`) => void` | — | Goes to a whole view; what it leaves out is shown whole again. Not reported through `onViewChange`: two charts kept in step by `onViewChange: (v) => other.setView(v)` in both directions do not answer each other. A view with the content already shown changes nothing.<br>Shown in: [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader), [Keep charts in step (Zoom and pan)](#/zoom-and-pan/cursor-sync), [Keep and restore a view (View)](#/view/keep-and-restore) |
|
|
11124
11023
|
| `setDomain` *required* | `(axisId: string, span: readonly [number, number] \| null) => void` | — | Puts a span in view on a zoomable x axis - a lone one is `"x"`; `null` shows the axis' own `domain` again. |
|
|
11125
11024
|
| `hidden` *required* | `readonly string[]` | — | The hidden series, by `name`. |
|
|
11126
11025
|
| `toggleSeries` *required* | `(name: string) => void` | — | Hides the series `name`, or shows it where it is hidden - as a click on its legend entry does. Hiding the last series visible shows all. |
|
|
11127
11026
|
| `showOnly` *required* | `(name: string) => void` | — | Hides every series but `name`; all are shown where none carries it.<br>Shown in: [Hide a series from the legend (Legend)](#/legend/hide-a-series) |
|
|
11128
11027
|
| `showAllSeries` *required* | `() => void` | — | Shows every series again.<br>Shown in: [Hide a series from the legend (Legend)](#/legend/hide-a-series) |
|
|
11129
11028
|
|
|
11029
|
+
Used on [Chart](#/chart).
|
|
11030
|
+
|
|
11130
11031
|
##### `ChartPerf`
|
|
11131
11032
|
|
|
11132
11033
|
Measurements of the instrumentation for the benchmark page.
|
|
@@ -11149,6 +11050,7 @@ Everything the charts put out as text.
|
|
|
11149
11050
|
|
|
11150
11051
|
| Prop | Type | Default | Description |
|
|
11151
11052
|
|---|---|---|---|
|
|
11053
|
+
| `locale` *required* | `string` | — | The BCP 47 tag every number and every date or time label of the chart is formatted in (`en-GB`, `de-DE`). The one input for the locale: the browser's language is not read. The clock stays 24-hour in both. |
|
|
11152
11054
|
| `roleDescription` *required* | `string` | — | What a screen reader calls the plot area that takes the keys (`aria-roledescription`). |
|
|
11153
11055
|
| `empty` *required* | `string` | — | Shown in the plot area when no visible series has a point to show. |
|
|
11154
11056
|
| `seriesList` *required* | `(names: readonly string[]) => string` | — | The summary's visible series, by name. |
|
|
@@ -11156,15 +11058,15 @@ Everything the charts put out as text.
|
|
|
11156
11058
|
| `seriesExtent` *required* | `(name: string, min: string, max: string) => string` | — | The summary's lowest and highest value of one series in that stretch. |
|
|
11157
11059
|
| `limitList` *required* | `(limits: readonly { name: string; value: string }[]) => string` | — | The summary's labelled limits, each with its value in its axis' format (a band's two edges as one value). |
|
|
11158
11060
|
| `readout` *required* | `(x: string, rows: readonly { name: string; value: string; x: string }[]) => string` | — | What is read after a key: the position, then each series with its value (and its own x where it stands on another x axis), the emphasised one first. |
|
|
11159
|
-
| `stackTotal` *required* | `string` | — | The last row of a stack in the tooltip and the readout: the sum of its members at the point
|
|
11160
|
-
| `percent` *required* | `(value: string) => string` | — | A share in a normalised stack, its number already formatted
|
|
11061
|
+
| `stackTotal` *required* | `string` | — | The last row of a stack in the tooltip and the readout: the sum of its members at the point. |
|
|
11062
|
+
| `percent` *required* | `(value: string) => string` | — | A share in a normalised stack, its number already formatted. |
|
|
11161
11063
|
| `walkHelp` *required* | `string` | — | The keys that walk the chart. |
|
|
11162
11064
|
| `selectHelp` *required* | `string` | — | The key that reports the Active point - only where `onSelect` is given. |
|
|
11163
11065
|
| `zoomHelp` *required* | `string` | — | The keys that zoom and pan it - only where the chart can be zoomed. |
|
|
11164
11066
|
| `legendHelp` *required* | `string` | — | The keys of the legend's entries - only where it has one to press. |
|
|
11165
11067
|
| `allShown` *required* | `string` | — | Read out where hiding would leave nothing to see, and every series is shown instead. |
|
|
11166
11068
|
| `showAll` *required* | `string` | — | The control over a zoomed plot that brings every zoomed axis back to its own domain (component-view 04). |
|
|
11167
|
-
| `showData` *required* | `string` | — | The data table's disclosure key, closed and open
|
|
11069
|
+
| `showData` *required* | `string` | — | The data table's disclosure key, closed and open. |
|
|
11168
11070
|
| `hideData` *required* | `string` | — | |
|
|
11169
11071
|
| `positionColumn` *required* | `string` | — | The heading of the table's x column where its axis has no `label`, and of a matrix' row column where its y axis has none. |
|
|
11170
11072
|
| `rowColumn` *required* | `string` | — | |
|
|
@@ -11179,13 +11081,13 @@ Everything the charts put out as text.
|
|
|
11179
11081
|
| `notch` *required* | `string` | — | |
|
|
11180
11082
|
| `count` *required* | `string` | — | |
|
|
11181
11083
|
| `outlierList` *required* | `(values: readonly string[], more: number) => string` | — | |
|
|
11182
|
-
| `downsampled` *required* | `(readings: number) => string` | — | Added to the caption where the table shows the downsampled course
|
|
11084
|
+
| `downsampled` *required* | `(readings: number) => string` | — | Added to the caption where the table shows the downsampled course: how many readings its rows stand for. |
|
|
11183
11085
|
|
|
11184
11086
|
##### `ChartView`
|
|
11185
11087
|
|
|
11186
11088
|
Its table stands on [View](#/view/type-ChartView).
|
|
11187
11089
|
|
|
11188
|
-
Used on [
|
|
11090
|
+
Used on [Zoom and pan](#/zoom-and-pan) and [View](#/view).
|
|
11189
11091
|
|
|
11190
11092
|
##### `ControlChartProps`
|
|
11191
11093
|
|
|
@@ -11262,7 +11164,7 @@ to `to`.
|
|
|
11262
11164
|
| `kind` *required* | `"band"` | — | |
|
|
11263
11165
|
| `from` *required* | `number` | — | |
|
|
11264
11166
|
| `to` *required* | `number` | — | |
|
|
11265
|
-
| `axisId` | `string` | — | Axis on which the value lies; without one, the first axis of its orientation
|
|
11167
|
+
| `axisId` | `string` | — | Axis on which the value lies; without one, the first axis of its orientation. From `LimitBase`. |
|
|
11266
11168
|
| `orientation` *required* | [`AxisOrientation`](#type-AxisOrientation)<br>`"x" \| "y"` | — | From `LimitBase`. |
|
|
11267
11169
|
| `severity` *required* | [`Severity`](#type-Severity)<br>`"warning" \| "alarm"` | — | From `LimitBase`. |
|
|
11268
11170
|
| `label` | `string` | — | From `LimitBase`. |
|
|
@@ -11295,7 +11197,7 @@ A `LimitLine` as the chart holds it once registered.
|
|
|
11295
11197
|
|---|---|---|---|
|
|
11296
11198
|
| `kind` *required* | `"line"` | — | |
|
|
11297
11199
|
| `value` *required* | `number` | — | |
|
|
11298
|
-
| `axisId` | `string` | — | Axis on which the value lies; without one, the first axis of its orientation
|
|
11200
|
+
| `axisId` | `string` | — | Axis on which the value lies; without one, the first axis of its orientation. From `LimitBase`. |
|
|
11299
11201
|
| `orientation` *required* | [`AxisOrientation`](#type-AxisOrientation)<br>`"x" \| "y"` | — | From `LimitBase`. |
|
|
11300
11202
|
| `severity` *required* | [`Severity`](#type-Severity)<br>`"warning" \| "alarm"` | — | From `LimitBase`. |
|
|
11301
11203
|
| `label` | `string` | — | From `LimitBase`. |
|
|
@@ -11519,7 +11421,7 @@ The settings of `pareto`, complete; a call gives `ParetoSettings`.
|
|
|
11519
11421
|
|---|---|---|---|
|
|
11520
11422
|
| `cutoff` *required* | `number` | `0.8` | The share whose crossing is sought. Whoever lands exactly on it counts as the crossing: the question is "which reasons make up eighty per cent", and whoever reaches eighty exactly belongs to them. |
|
|
11521
11423
|
| `collectRank` *required* | `number` | `Infinity` | How many items stay on their own. Everything behind that becomes a single entry. Beyond the number of items no remainder arises at all - not an empty one. |
|
|
11522
|
-
| `remainderName` | `string` | none - the caller names it | Name of the collected remainder.
|
|
11424
|
+
| `remainderName` | `string` | none - the caller names it | Name of the collected remainder. The helper has no default wording for it. |
|
|
11523
11425
|
|
|
11524
11426
|
##### `ParetoResult`
|
|
11525
11427
|
|