@umriss-ui/charts 0.41.0 → 0.41.1
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 +7 -0
- package/README.md +2 -5
- package/docs/llms-full.md +464 -502
- package/package.json +3 -3
package/docs/llms-full.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# @umriss-ui/charts 0.41.
|
|
1
|
+
# @umriss-ui/charts 0.41.1
|
|
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
|
|
|
5
|
-
Install with `npm install @umriss-ui/charts`. This text is generated from the package's demo
|
|
5
|
+
Install with `npm install @umriss-ui/charts`. This text is generated from the package's demo: every page with its import line, its examples - the source exactly as it runs, with the package name where the demo imports its own source - its props tables generated from the code, and what it deliberately does not do.
|
|
6
6
|
|
|
7
7
|
## Scenarios
|
|
8
8
|
|
|
@@ -1055,21 +1055,19 @@ Install the package, draw a first chart and size it in its container. Read this
|
|
|
1055
1055
|
npm install @umriss-ui/charts
|
|
1056
1056
|
```
|
|
1057
1057
|
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
The command installs the package alone: React 19 or newer is its only peer and stays the application's own, and the package depends on nothing else. The stylesheet comes with the JavaScript, so there is nothing to import - `@umriss-ui/charts/styles.css` is there for setups that link stylesheets by hand. Its colours, type and sizes are `--uc-` tokens that fall back onto core's; [core's Theming page](https://romanhaendler.github.io/umriss-ui/core/theming/#charts-tokens) lists them all.
|
|
1058
|
+
The command installs the package alone: React 19 or newer is its only peer and stays the application's own, and the package depends on nothing else. The stylesheet comes with the JavaScript, so there is nothing to import - `@umriss-ui/charts/styles.css` is there for setups that link stylesheets by hand. Its colours, type and sizes are `--uc-` tokens that fall back onto core's; core's Theming page lists them all.
|
|
1061
1059
|
|
|
1062
1060
|
A chart takes its container's width and follows it; give it a `height` (300 px without one). `useChart(rows)` hands out `Chart`, its axes and its series, typed at the row; each reads its value from a row through `value`, a field name or a function - a value that is `null`, `undefined` or not finite is a gap, never a zero.
|
|
1063
1061
|
|
|
1064
1062
|
An instant is a `Date`, milliseconds since 1970, or - where the x axis says `time` - the ISO string an API sends ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). On a time axis the ticks stand on the viewer's local clock, so a day begins at local midnight. The words are English; German comes from `@umriss-ui/charts/wording/de`.
|
|
1065
1063
|
|
|
1066
|
-
The charts take German per chart: `wording={GERMAN_CHARTS_WORDING}` from `@umriss-ui/charts/wording/de`, as [the keyboard and screen reader example](
|
|
1064
|
+
The charts take German per chart: `wording={GERMAN_CHARTS_WORDING}` from `@umriss-ui/charts/wording/de`, as [the keyboard and screen reader example](#chart-1) shows. They read no language provider, so this demo has no EN/DE switch in its header.
|
|
1067
1065
|
|
|
1068
1066
|
#### Examples
|
|
1069
1067
|
|
|
1070
1068
|
##### Draw a first chart
|
|
1071
1069
|
|
|
1072
|
-
Hand [`useChart`](
|
|
1070
|
+
Hand [`useChart`](#api-index-1) the rows as they come, then give its `Chart` an axis per direction and a series; the x axis and the series read a row through `value`. With `time` the axis reads the instants an API sends as text.
|
|
1073
1071
|
|
|
1074
1072
|
```tsx
|
|
1075
1073
|
import { Tooltip, useChart } from "@umriss-ui/charts";
|
|
@@ -1232,44 +1230,44 @@ export default function InItsContainer() {
|
|
|
1232
1230
|
|
|
1233
1231
|
#### Keyboard
|
|
1234
1232
|
|
|
1235
|
-
The keys of [Chart](
|
|
1233
|
+
The keys of [Chart](#chart-1) apply here.
|
|
1236
1234
|
|
|
1237
1235
|
#### Props on this page
|
|
1238
1236
|
|
|
1239
|
-
From `ChartProps` — the full table stands on [Chart](
|
|
1237
|
+
From `ChartProps` — the full table stands on [Chart](#chart-1).
|
|
1240
1238
|
|
|
1241
1239
|
| Prop | Type | Default | Description |
|
|
1242
1240
|
|---|---|---|---|
|
|
1243
|
-
| [`width`](
|
|
1244
|
-
| [`height`](
|
|
1245
|
-
| [`children`](
|
|
1241
|
+
| [`width`](#chart-1) | `number \| "100%"` | `"100%"` | Width in CSS pixels, or `"100%"` for the host's: the chart measures its host and follows it through a ResizeObserver. |
|
|
1242
|
+
| [`height`](#chart-1) | `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)). |
|
|
1243
|
+
| [`children`](#chart-1) | `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. |
|
|
1246
1244
|
|
|
1247
1245
|
###### Accessibility
|
|
1248
1246
|
|
|
1249
1247
|
| Prop | Type | Default | Description |
|
|
1250
1248
|
|---|---|---|---|
|
|
1251
|
-
| [`ariaLabel`](
|
|
1249
|
+
| [`ariaLabel`](#chart-1) | `string` | — | Required in DEV through a warning. |
|
|
1252
1250
|
|
|
1253
|
-
From `XAxisProps` — the full table stands on [Axis](
|
|
1251
|
+
From `XAxisProps` — the full table stands on [Axis](#axis).
|
|
1254
1252
|
|
|
1255
1253
|
| Prop | Type | Default | Description |
|
|
1256
1254
|
|---|---|---|---|
|
|
1257
|
-
| [`value`](
|
|
1258
|
-
| [`time`](
|
|
1259
|
-
| [`label`](
|
|
1255
|
+
| [`value`](#axis) *required* | [`AxisField`](#axis)`<T> \| ((d: T, index: number) => `[`AxisValue`](#axis)`)` | — | 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" />`. |
|
|
1256
|
+
| [`time`](#axis) | `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. |
|
|
1257
|
+
| [`label`](#axis) | `string` | — | Axis title. |
|
|
1260
1258
|
|
|
1261
|
-
From `YAxisProps` — the full table stands on [Axis](
|
|
1259
|
+
From `YAxisProps` — the full table stands on [Axis](#axis).
|
|
1262
1260
|
|
|
1263
1261
|
| Prop | Type | Default | Description |
|
|
1264
1262
|
|---|---|---|---|
|
|
1265
|
-
| [`label`](
|
|
1263
|
+
| [`label`](#axis) | `string` | — | Axis title. |
|
|
1266
1264
|
|
|
1267
|
-
From `LineProps` — the full table stands on [Line](
|
|
1265
|
+
From `LineProps` — the full table stands on [Line](#line).
|
|
1268
1266
|
|
|
1269
1267
|
| Prop | Type | Default | Description |
|
|
1270
1268
|
|---|---|---|---|
|
|
1271
|
-
| [`value`](
|
|
1272
|
-
| [`name`](
|
|
1269
|
+
| [`value`](#line) *required* | [`Value`](#line)`<T>` | — | Y value - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap. |
|
|
1270
|
+
| [`name`](#line) | `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. |
|
|
1273
1271
|
|
|
1274
1272
|
## Chart
|
|
1275
1273
|
|
|
@@ -1283,11 +1281,9 @@ Holds the rows and draws the series on shared axes, one chart for every kind a s
|
|
|
1283
1281
|
import { useChart } from "@umriss-ui/charts";
|
|
1284
1282
|
```
|
|
1285
1283
|
|
|
1286
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/chart/
|
|
1287
|
-
|
|
1288
1284
|
Series and axes are children, and their order in the JSX is the drawing order and the colour order. The marks are drawn on canvas; axes, legend and tooltip are elements a screen reader and a test can read ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)).
|
|
1289
1285
|
|
|
1290
|
-
With a `Tooltip` the plot is one tab stop: the keys walk its values and a screen reader hears them ([ADR-0030](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0030-a-chart-is-one-tab-stop-that-walks-its-hits.md)). `syncId` shares the pointer between charts; zoom is shared through the view, on [Zoom and pan](
|
|
1286
|
+
With a `Tooltip` the plot is one tab stop: the keys walk its values and a screen reader hears them ([ADR-0030](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0030-a-chart-is-one-tab-stop-that-walks-its-hits.md)). `syncId` shares the pointer between charts; zoom is shared through the view, on [Zoom and pan](#zoom-and-pan).
|
|
1291
1287
|
|
|
1292
1288
|
#### Examples
|
|
1293
1289
|
|
|
@@ -2167,7 +2163,7 @@ export default function SeriesFromLongRows() {
|
|
|
2167
2163
|
|
|
2168
2164
|
The plot is an image named by `ariaLabel` and described by a summary: the series, the visible stretch and each series' lowest and highest value in it. With a `Tooltip` it becomes one tab stop, the role `application` read as "chart", and the summary adds the keys. Pass `ariaLabel`: without it the plot has no name, and the development build warns.
|
|
2169
2165
|
|
|
2170
|
-
When a key comes to rest, a polite live region beside the plot reads the active position and every series' value there, as the tooltip shows it; a pointer announces nothing. A reader who wants every value at once opens the `DataTable` (on [Tooltip](
|
|
2166
|
+
When a key comes to rest, a polite live region beside the plot reads the active position and every series' value there, as the tooltip shows it; a pointer announces nothing. A reader who wants every value at once opens the `DataTable` (on [Tooltip](#tooltip)), a plain table of what the chart shows.
|
|
2171
2167
|
|
|
2172
2168
|
Under forced colours the chart draws in the system colours and tells its series apart by their marks instead of by colour. With reduced motion the tooltip appears without fading in.
|
|
2173
2169
|
|
|
@@ -2177,27 +2173,27 @@ Under forced colours the chart draws in the system colours and tells its series
|
|
|
2177
2173
|
|
|
2178
2174
|
| Prop | Type | Default | Description |
|
|
2179
2175
|
|---|---|---|---|
|
|
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)](
|
|
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](
|
|
2182
|
-
| `padding` | `number \| Partial
|
|
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](
|
|
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](
|
|
2185
|
-
| `wording` | `Partial
|
|
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](
|
|
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)](
|
|
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](
|
|
2176
|
+
| `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) |
|
|
2177
|
+
| `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-1), [Say there is nothing to show](#chart-1), [Read it by keyboard and screen reader](#chart-1) and 74 more |
|
|
2178
|
+
| `padding` | `number \| Partial<``Padding``>` | — | Outer spacing of the plot area in CSS pixels.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
|
|
2179
|
+
| `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-1) |
|
|
2180
|
+
| `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-1) |
|
|
2181
|
+
| `wording` | `Partial<``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-1) |
|
|
2182
|
+
| `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-1), [Mark every kind](#chart-1), [Mark bands, limits and cells](#chart-1) |
|
|
2183
|
+
| `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), [Watch latency against its objective (Scenarios)](#watch-latency-against-its-objective), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
2184
|
+
| `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-1), [Say there is nothing to show](#chart-1), [Read it by keyboard and screen reader](#chart-1) and 74 more |
|
|
2189
2185
|
|
|
2190
2186
|
###### Events
|
|
2191
2187
|
|
|
2192
2188
|
| Prop | Type | Default | Description |
|
|
2193
2189
|
|---|---|---|---|
|
|
2194
|
-
| `onPerf` | `(perf:
|
|
2190
|
+
| `onPerf` | `(perf: ``ChartPerf``) => void` | — | Instrumentation for the benchmark page; not needed otherwise.<br>Shown in: [Measure a million points (Benchmark)](#benchmark), [Draw a week of seconds (Benchmark)](#benchmark) |
|
|
2195
2191
|
|
|
2196
2192
|
###### Accessibility
|
|
2197
2193
|
|
|
2198
2194
|
| Prop | Type | Default | Description |
|
|
2199
2195
|
|---|---|---|---|
|
|
2200
|
-
| `ariaLabel` | `string` | — | Required in DEV through a warning.<br>Shown in: [Mix series kinds](
|
|
2196
|
+
| `ariaLabel` | `string` | — | Required in DEV through a warning.<br>Shown in: [Mix series kinds](#chart-1), [Say there is nothing to show](#chart-1), [Read it by keyboard and screen reader](#chart-1) and 74 more |
|
|
2201
2197
|
|
|
2202
2198
|
###### Styling
|
|
2203
2199
|
|
|
@@ -2214,10 +2210,10 @@ Space in CSS pixels on each side of a rectangle.
|
|
|
2214
2210
|
|
|
2215
2211
|
| Prop | Type | Default | Description |
|
|
2216
2212
|
|---|---|---|---|
|
|
2217
|
-
| `top` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
2218
|
-
| `right` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
2219
|
-
| `bottom` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
2220
|
-
| `left` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
2213
|
+
| `top` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
|
|
2214
|
+
| `right` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
|
|
2215
|
+
| `bottom` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
|
|
2216
|
+
| `left` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
|
|
2221
2217
|
|
|
2222
2218
|
###### `ChartsWording`
|
|
2223
2219
|
|
|
@@ -2264,16 +2260,16 @@ Measurements of the instrumentation for the benchmark page.
|
|
|
2264
2260
|
|
|
2265
2261
|
| Prop | Type | Default | Description |
|
|
2266
2262
|
|---|---|---|---|
|
|
2267
|
-
| `materializeMs` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](
|
|
2268
|
-
| `seriesDrawMs` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](
|
|
2269
|
-
| `points` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](
|
|
2263
|
+
| `materializeMs` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](#benchmark) |
|
|
2264
|
+
| `seriesDrawMs` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](#benchmark), [Draw a week of seconds (Benchmark)](#benchmark) |
|
|
2265
|
+
| `points` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](#benchmark) |
|
|
2270
2266
|
|
|
2271
2267
|
#### Known limits
|
|
2272
2268
|
|
|
2273
2269
|
- No error state of its own: where the rows could not be loaded, show an `Alert` from @umriss-ui/core. Waiting for them is `loading`.
|
|
2274
|
-
- No pie, donut, radar or candlestick, no smoothing, animation or export, no WebGL ([ADR-0032](https://
|
|
2270
|
+
- No pie, donut, radar or candlestick, no smoothing, animation or export, no WebGL ([ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md)).
|
|
2275
2271
|
|
|
2276
|
-
What umriss deliberately does not build, and why: [ADR-0032](https://
|
|
2272
|
+
What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md).
|
|
2277
2273
|
|
|
2278
2274
|
### Axis
|
|
2279
2275
|
|
|
@@ -2283,11 +2279,9 @@ What a value is measured against: extent, ticks and labels, categories, several
|
|
|
2283
2279
|
import { useChart, workingCalendar } from "@umriss-ui/charts";
|
|
2284
2280
|
```
|
|
2285
2281
|
|
|
2286
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/axis/
|
|
2287
|
-
|
|
2288
2282
|
Every scale is linear. An axis reads what its rows hold: a number is a position, a string a category, which gets a place, a tick and its name ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)); a working calendar maps time before it is drawn and marks every seam it took out ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)).
|
|
2289
2283
|
|
|
2290
|
-
An x axis zooms where it is `zoomable`; `domain` is then where it starts. That has a page of its own, [Zoom and pan](
|
|
2284
|
+
An x axis zooms where it is `zoomable`; `domain` is then where it starts. That has a page of its own, [Zoom and pan](#zoom-and-pan).
|
|
2291
2285
|
|
|
2292
2286
|
#### Examples
|
|
2293
2287
|
|
|
@@ -2939,7 +2933,7 @@ export default function Categories() {
|
|
|
2939
2933
|
|
|
2940
2934
|
#### Keyboard
|
|
2941
2935
|
|
|
2942
|
-
The keys of [Chart](
|
|
2936
|
+
The keys of [Chart](#chart-1) apply here.
|
|
2943
2937
|
|
|
2944
2938
|
#### API
|
|
2945
2939
|
|
|
@@ -2947,37 +2941,37 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
2947
2941
|
|
|
2948
2942
|
| Prop | Type | Default | Description |
|
|
2949
2943
|
|---|---|---|---|
|
|
2950
|
-
| `value` *required* |
|
|
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](
|
|
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](
|
|
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](
|
|
2954
|
-
| `calendar` | `readonly
|
|
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)](
|
|
2956
|
-
| `zoomLimits` |
|
|
2957
|
-
| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](
|
|
2958
|
-
| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](
|
|
2959
|
-
| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](
|
|
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](
|
|
2961
|
-
| `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](
|
|
2962
|
-
| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. An axis that reads categories needs none - every category has its tick.<br>Shown in: [Bind every kind of series to a second axis](
|
|
2963
|
-
| `categories` | `readonly string[]` | — | The categories of the axis, in their order. Without it they stand in the order the rows first bring them. With it the list is the order and the extent: a category no row carries keeps its empty place, and a row whose category is not listed is not drawn - DEV names it. It makes the axis a category axis whatever the rows hold ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).<br>Shown in: [Fix the order and keep an empty place](
|
|
2964
|
-
| `categoryLabel` | `(category: string) => string` | the category itself | What is written for a category - under its tick, in the tooltip, the readout and the data table - where the rows hold a key and not a name. Two categories may share a label and keep two places. Compared by its source text, as `tickFormat` is.<br>Shown in: [Fix the order and keep an empty place](
|
|
2944
|
+
| `value` *required* | `AxisField``<T> \| ((d: T, index: number) => ``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), [Add axes for other magnitudes](#axis), [Leave out the hours nobody works](#axis) and 74 more |
|
|
2945
|
+
| `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), [Read it by keyboard and screen reader (Chart)](#chart-1), [Gestures and keys (Zoom and pan)](#zoom-and-pan) and 11 more |
|
|
2946
|
+
| `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), [Bind every kind of series to a second axis](#axis) |
|
|
2947
|
+
| `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), [Draw a first chart (Installation)](#installation), [Size a chart by its container (Installation)](#installation) and 36 more |
|
|
2948
|
+
| `calendar` | `readonly ``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) |
|
|
2949
|
+
| `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-1), [Gestures and keys (Zoom and pan)](#zoom-and-pan), [Limit the zoom (Zoom and pan)](#zoom-and-pan) and 6 more |
|
|
2950
|
+
| `zoomLimits` | `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) |
|
|
2951
|
+
| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#axis), [Align a second axis to the grid](#axis), [Bind every kind of series to a second axis](#axis) and 7 more |
|
|
2952
|
+
| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#axis), [Add axes for other magnitudes](#axis), [Leave out the hours nobody works](#axis) and 66 more |
|
|
2953
|
+
| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Mix series kinds (Chart)](#chart-1) and 8 more |
|
|
2954
|
+
| `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), [Leave out the hours nobody works](#axis), [Bind every kind of series to a second axis](#axis) and 21 more |
|
|
2955
|
+
| `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#stateband), [Give each one a lane (StateBand)](#stateband), [See where the vans stand idle (Scenarios)](#see-where-the-vans-stand-idle) |
|
|
2956
|
+
| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. An axis that reads categories needs none - every category has its tick.<br>Shown in: [Bind every kind of series to a second axis](#axis), [Mark bands, limits and cells (Chart)](#chart-1), [Compare progress with a plan (Line)](#line) and 7 more |
|
|
2957
|
+
| `categories` | `readonly string[]` | — | The categories of the axis, in their order. Without it they stand in the order the rows first bring them. With it the list is the order and the extent: a category no row carries keeps its empty place, and a row whose category is not listed is not drawn - DEV names it. It makes the axis a category axis whatever the rows hold ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).<br>Shown in: [Fix the order and keep an empty place](#axis) |
|
|
2958
|
+
| `categoryLabel` | `(category: string) => string` | the category itself | What is written for a category - under its tick, in the tooltip, the readout and the data table - where the rows hold a key and not a name. Two categories may share a label and keep two places. Compared by its source text, as `tickFormat` is.<br>Shown in: [Fix the order and keep an empty place](#axis), [Tell series apart without colour (Chart)](#chart-1), [Legend above or below (Legend)](#legend) and 1 more |
|
|
2965
2959
|
|
|
2966
2960
|
##### `YAxisProps`
|
|
2967
2961
|
|
|
2968
2962
|
| Prop | Type | Default | Description |
|
|
2969
2963
|
|---|---|---|---|
|
|
2970
|
-
| `domain` | `"nice" \| "data" \| "visible" \| readonly [number, number]` | `"nice"` | As on the x axis, and `"visible"`: what the series show inside their x axis' domain - a zoomed hour gets the hour's range, not the week's -, widened to ticks as `"nice"` is. Where the x domain is not fixed that is every point.<br>Shown in: [Fix the domain and name the ticks](
|
|
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](
|
|
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](
|
|
2973
|
-
| `id` | `string` | `"y"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](
|
|
2974
|
-
| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](
|
|
2975
|
-
| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](
|
|
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](
|
|
2977
|
-
| `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](
|
|
2978
|
-
| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. An axis that reads categories needs none - every category has its tick.<br>Shown in: [Bind every kind of series to a second axis](
|
|
2979
|
-
| `categories` | `readonly string[]` | — | The categories of the axis, in their order. Without it they stand in the order the rows first bring them. With it the list is the order and the extent: a category no row carries keeps its empty place, and a row whose category is not listed is not drawn - DEV names it. It makes the axis a category axis whatever the rows hold ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).<br>Shown in: [Fix the order and keep an empty place](
|
|
2980
|
-
| `categoryLabel` | `(category: string) => string` | the category itself | What is written for a category - under its tick, in the tooltip, the readout and the data table - where the rows hold a key and not a name. Two categories may share a label and keep two places. Compared by its source text, as `tickFormat` is.<br>Shown in: [Fix the order and keep an empty place](
|
|
2964
|
+
| `domain` | `"nice" \| "data" \| "visible" \| readonly [number, number]` | `"nice"` | As on the x axis, and `"visible"`: what the series show inside their x axis' domain - a zoomed hour gets the hour's range, not the week's -, widened to ticks as `"nice"` is. Where the x domain is not fixed that is every point.<br>Shown in: [Fix the domain and name the ticks](#axis), [Bind every kind of series to a second axis](#axis), [Mark bands, limits and cells (Chart)](#chart-1) and 11 more |
|
|
2965
|
+
| `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) |
|
|
2966
|
+
| `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), [Align a second axis to the grid](#axis), [Bind every kind of series to a second axis](#axis) and 7 more |
|
|
2967
|
+
| `id` | `string` | `"y"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#axis), [Align a second axis to the grid](#axis), [Bind every kind of series to a second axis](#axis) and 7 more |
|
|
2968
|
+
| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#axis), [Add axes for other magnitudes](#axis), [Leave out the hours nobody works](#axis) and 66 more |
|
|
2969
|
+
| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Mix series kinds (Chart)](#chart-1) and 8 more |
|
|
2970
|
+
| `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), [Leave out the hours nobody works](#axis), [Bind every kind of series to a second axis](#axis) and 21 more |
|
|
2971
|
+
| `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#stateband), [Give each one a lane (StateBand)](#stateband), [See where the vans stand idle (Scenarios)](#see-where-the-vans-stand-idle) |
|
|
2972
|
+
| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. An axis that reads categories needs none - every category has its tick.<br>Shown in: [Bind every kind of series to a second axis](#axis), [Mark bands, limits and cells (Chart)](#chart-1), [Compare progress with a plan (Line)](#line) and 7 more |
|
|
2973
|
+
| `categories` | `readonly string[]` | — | The categories of the axis, in their order. Without it they stand in the order the rows first bring them. With it the list is the order and the extent: a category no row carries keeps its empty place, and a row whose category is not listed is not drawn - DEV names it. It makes the axis a category axis whatever the rows hold ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).<br>Shown in: [Fix the order and keep an empty place](#axis) |
|
|
2974
|
+
| `categoryLabel` | `(category: string) => string` | the category itself | What is written for a category - under its tick, in the tooltip, the readout and the data table - where the rows hold a key and not a name. Two categories may share a label and keep two places. Compared by its source text, as `tickFormat` is.<br>Shown in: [Fix the order and keep an empty place](#axis), [Tell series apart without colour (Chart)](#chart-1), [Legend above or below (Legend)](#legend) and 1 more |
|
|
2981
2975
|
|
|
2982
2976
|
##### Types on this page
|
|
2983
2977
|
|
|
@@ -3025,15 +3019,15 @@ schedule's shape.
|
|
|
3025
3019
|
|
|
3026
3020
|
| Prop | Type | Default | Description |
|
|
3027
3021
|
|---|---|---|---|
|
|
3028
|
-
| `min` *required* | `number` | — | <br>Shown in: [Limit the zoom (Zoom and pan)](
|
|
3029
|
-
| `max` *required* | `number` | — | <br>Shown in: [Limit the zoom (Zoom and pan)](
|
|
3022
|
+
| `min` *required* | `number` | — | <br>Shown in: [Limit the zoom (Zoom and pan)](#zoom-and-pan) |
|
|
3023
|
+
| `max` *required* | `number` | — | <br>Shown in: [Limit the zoom (Zoom and pan)](#zoom-and-pan) |
|
|
3030
3024
|
|
|
3031
3025
|
#### Known limits
|
|
3032
3026
|
|
|
3033
|
-
- No logarithmic and no band scale: compute the logarithm in `value`; a category is a place on the linear scale ([ADR-0032](https://
|
|
3027
|
+
- No logarithmic and no band scale: compute the logarithm in `value`; a category is a place on the linear scale ([ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md), [ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).
|
|
3034
3028
|
- 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
3029
|
|
|
3036
|
-
What umriss deliberately does not build, and why: [ADR-0032](https://
|
|
3030
|
+
What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md).
|
|
3037
3031
|
|
|
3038
3032
|
### Zoom and pan
|
|
3039
3033
|
|
|
@@ -3043,8 +3037,6 @@ Look closer at a stretch of a long series and move along it (zoom, pan, a viewpo
|
|
|
3043
3037
|
import { useChart } from "@umriss-ui/charts";
|
|
3044
3038
|
```
|
|
3045
3039
|
|
|
3046
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/zoom-and-pan/
|
|
3047
|
-
|
|
3048
3040
|
`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
3041
|
|
|
3050
3042
|
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`.
|
|
@@ -3565,7 +3557,7 @@ function Channel({ channel: c, peers }: { channel: (typeof CHANNELS)[number]; pe
|
|
|
3565
3557
|
|
|
3566
3558
|
#### Keyboard
|
|
3567
3559
|
|
|
3568
|
-
The keys of [Chart](
|
|
3560
|
+
The keys of [Chart](#chart-1) apply here.
|
|
3569
3561
|
|
|
3570
3562
|
#### API
|
|
3571
3563
|
|
|
@@ -3573,34 +3565,34 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
3573
3565
|
|
|
3574
3566
|
| Prop | Type | Default | Description |
|
|
3575
3567
|
|---|---|---|---|
|
|
3576
|
-
| `value` *required* |
|
|
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](
|
|
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)](
|
|
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](
|
|
3580
|
-
| `calendar` | `readonly
|
|
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](
|
|
3582
|
-
| `zoomLimits` |
|
|
3583
|
-
| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes (Axis)](
|
|
3584
|
-
| `label` | `string` | — | Axis title.<br>Shown in: [Gestures and keys](
|
|
3585
|
-
| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Keep charts in step](
|
|
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)](
|
|
3587
|
-
| `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](
|
|
3588
|
-
| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. An axis that reads categories needs none - every category has its tick.<br>Shown in: [Bind every kind of series to a second axis (Axis)](
|
|
3589
|
-
| `categories` | `readonly string[]` | — | The categories of the axis, in their order. Without it they stand in the order the rows first bring them. With it the list is the order and the extent: a category no row carries keeps its empty place, and a row whose category is not listed is not drawn - DEV names it. It makes the axis a category axis whatever the rows hold ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).<br>Shown in: [Fix the order and keep an empty place (Axis)](
|
|
3590
|
-
| `categoryLabel` | `(category: string) => string` | the category itself | What is written for a category - under its tick, in the tooltip, the readout and the data table - where the rows hold a key and not a name. Two categories may share a label and keep two places. Compared by its source text, as `tickFormat` is.<br>Shown in: [Fix the order and keep an empty place (Axis)](
|
|
3568
|
+
| `value` *required* | `AxisField``<T> \| ((d: T, index: number) => ``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), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 74 more |
|
|
3569
|
+
| `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), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 11 more |
|
|
3570
|
+
| `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), [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
3571
|
+
| `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), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 36 more |
|
|
3572
|
+
| `calendar` | `readonly ``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) |
|
|
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`, `setView`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Gestures and keys](#zoom-and-pan), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 6 more |
|
|
3574
|
+
| `zoomLimits` | `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) |
|
|
3575
|
+
| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes (Axis)](#axis), [Align a second axis to the grid (Axis)](#axis), [Bind every kind of series to a second axis (Axis)](#axis) and 7 more |
|
|
3576
|
+
| `label` | `string` | — | Axis title.<br>Shown in: [Gestures and keys](#zoom-and-pan), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 66 more |
|
|
3577
|
+
| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Keep charts in step](#zoom-and-pan), [Fix the domain and name the ticks (Axis)](#axis), [Leave out the hours nobody works (Axis)](#axis) and 8 more |
|
|
3578
|
+
| `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), [Leave out the hours nobody works (Axis)](#axis), [Bind every kind of series to a second axis (Axis)](#axis) and 21 more |
|
|
3579
|
+
| `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#stateband), [Give each one a lane (StateBand)](#stateband), [See where the vans stand idle (Scenarios)](#see-where-the-vans-stand-idle) |
|
|
3580
|
+
| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. An axis that reads categories needs none - every category has its tick.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis), [Mark bands, limits and cells (Chart)](#chart-1), [Compare progress with a plan (Line)](#line) and 7 more |
|
|
3581
|
+
| `categories` | `readonly string[]` | — | The categories of the axis, in their order. Without it they stand in the order the rows first bring them. With it the list is the order and the extent: a category no row carries keeps its empty place, and a row whose category is not listed is not drawn - DEV names it. It makes the axis a category axis whatever the rows hold ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).<br>Shown in: [Fix the order and keep an empty place (Axis)](#axis) |
|
|
3582
|
+
| `categoryLabel` | `(category: string) => string` | the category itself | What is written for a category - under its tick, in the tooltip, the readout and the data table - where the rows hold a key and not a name. Two categories may share a label and keep two places. Compared by its source text, as `tickFormat` is.<br>Shown in: [Fix the order and keep an empty place (Axis)](#axis), [Tell series apart without colour (Chart)](#chart-1), [Legend above or below (Legend)](#legend) and 1 more |
|
|
3591
3583
|
|
|
3592
3584
|
##### `ChartOptions<Z = unknown>`
|
|
3593
3585
|
|
|
3594
3586
|
| Prop | Type | Default | Description |
|
|
3595
3587
|
|---|---|---|---|
|
|
3596
|
-
| `initialView` | [`ChartView`](
|
|
3588
|
+
| `initialView` | [`ChartView`](#view) | — | 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), [Hide a series from the legend (Legend)](#legend) |
|
|
3597
3589
|
|
|
3598
3590
|
###### Events
|
|
3599
3591
|
|
|
3600
3592
|
| Prop | Type | Default | Description |
|
|
3601
3593
|
|---|---|---|---|
|
|
3602
|
-
| `onViewChange` | `(view: `[`ChartView`](
|
|
3603
|
-
| `onSelect` | `(hit:
|
|
3594
|
+
| `onViewChange` | `(view: `[`ChartView`](#view)`) => 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), [Read it by keyboard and screen reader (Chart)](#chart-1) |
|
|
3595
|
+
| `onSelect` | `(hit: ``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) |
|
|
3604
3596
|
|
|
3605
3597
|
##### Types on this page
|
|
3606
3598
|
|
|
@@ -3648,8 +3640,8 @@ schedule's shape.
|
|
|
3648
3640
|
|
|
3649
3641
|
| Prop | Type | Default | Description |
|
|
3650
3642
|
|---|---|---|---|
|
|
3651
|
-
| `min` *required* | `number` | — | <br>Shown in: [Limit the zoom](
|
|
3652
|
-
| `max` *required* | `number` | — | <br>Shown in: [Limit the zoom](
|
|
3643
|
+
| `min` *required* | `number` | — | <br>Shown in: [Limit the zoom](#zoom-and-pan) |
|
|
3644
|
+
| `max` *required* | `number` | — | <br>Shown in: [Limit the zoom](#zoom-and-pan) |
|
|
3653
3645
|
|
|
3654
3646
|
###### `TooltipHit<T = unknown>`
|
|
3655
3647
|
|
|
@@ -3658,8 +3650,8 @@ A custom tooltip's `render` receives it.
|
|
|
3658
3650
|
|
|
3659
3651
|
| Prop | Type | Default | Description |
|
|
3660
3652
|
|---|---|---|---|
|
|
3661
|
-
| `xValue` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
3662
|
-
| `points` *required* | `readonly
|
|
3653
|
+
| `xValue` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Write the tooltip yourself (Tooltip)](#tooltip), [Choose a hit (Tooltip)](#tooltip) |
|
|
3654
|
+
| `points` *required* | `readonly ``TooltipPoint``<T>[]` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Write the tooltip yourself (Tooltip)](#tooltip), [Choose a hit (Tooltip)](#tooltip) |
|
|
3663
3655
|
| `xPx` *required* | `number` | — | Pixel position of the crosshair (snapped to the data point). |
|
|
3664
3656
|
| `yPx` *required* | `number` | — | Pixel position of the primary hit. |
|
|
3665
3657
|
|
|
@@ -3669,15 +3661,15 @@ One hit per series in the tooltip.
|
|
|
3669
3661
|
|
|
3670
3662
|
| Prop | Type | Default | Description |
|
|
3671
3663
|
|---|---|---|---|
|
|
3672
|
-
| `seriesName` *required* | `string` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
3664
|
+
| `seriesName` *required* | `string` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Write the tooltip yourself (Tooltip)](#tooltip), [Choose a hit (Tooltip)](#tooltip) |
|
|
3673
3665
|
| `color` *required* | `string` | — | |
|
|
3674
3666
|
| `xValue` *required* | `number` | — | The point's x value on its own x axis - with several x axes it can differ from the hit's. |
|
|
3675
|
-
| `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
3676
|
-
| `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself (Tooltip)](
|
|
3667
|
+
| `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Choose a hit (Tooltip)](#tooltip) |
|
|
3668
|
+
| `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself (Tooltip)](#tooltip) |
|
|
3677
3669
|
| `index` *required* | `number` | — | |
|
|
3678
3670
|
| `level` | `number` | — | Only for the matrix: its level, out of the level channel. It stands here and not in yValue, because yValue is the position on the y axis - for a matrix therefore the row. Putting both into one field would be exactly the overloading [ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md) is written against. |
|
|
3679
3671
|
| `segment` | `{ from: number; to: number; label: string }` | — | Only for state series: the section being pointed at. A duration does not stand here - it is the difference of two numbers the entry already carries, and formatting it would presuppose knowing what the x axis means. The caller knows that, not this library. |
|
|
3680
|
-
| `box` |
|
|
3672
|
+
| `box` | `BoxNumbers`` & Partial<``BoxExtras``` > & { /** As the caller gave them; only where the series has `outliers`. */ outliers?: readonly number[]; } `` | — | Only for a box: its further numbers; yValue is its median. Fields of their own for the reason `level` has one ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
|
|
3681
3673
|
|
|
3682
3674
|
###### `BoxNumbers<V = number>`
|
|
3683
3675
|
|
|
@@ -3705,7 +3697,7 @@ The optional numbers of a box by name.
|
|
|
3705
3697
|
|
|
3706
3698
|
- No zoom along y, no rectangle zoom and no navigator: the x span is the one zoom there is.
|
|
3707
3699
|
|
|
3708
|
-
What umriss deliberately does not build, and why: [ADR-0032](https://
|
|
3700
|
+
What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md).
|
|
3709
3701
|
|
|
3710
3702
|
### View
|
|
3711
3703
|
|
|
@@ -3715,8 +3707,6 @@ How a reader is looking at a chart - the span in view and the hidden series - ke
|
|
|
3715
3707
|
import { useChart } from "@umriss-ui/charts";
|
|
3716
3708
|
```
|
|
3717
3709
|
|
|
3718
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/view/
|
|
3719
|
-
|
|
3720
3710
|
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 `{}`.
|
|
3721
3711
|
|
|
3722
3712
|
`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.
|
|
@@ -3888,7 +3878,7 @@ export default function KeepAndRestore() {
|
|
|
3888
3878
|
|
|
3889
3879
|
#### Keyboard
|
|
3890
3880
|
|
|
3891
|
-
The keys of [Chart](
|
|
3881
|
+
The keys of [Chart](#chart-1) apply here.
|
|
3892
3882
|
|
|
3893
3883
|
#### API
|
|
3894
3884
|
|
|
@@ -3896,21 +3886,21 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
3896
3886
|
|
|
3897
3887
|
| Prop | Type | Default | Description |
|
|
3898
3888
|
|---|---|---|---|
|
|
3899
|
-
| `initialView` |
|
|
3889
|
+
| `initialView` | `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), [Hide a series from the legend (Legend)](#legend) |
|
|
3900
3890
|
|
|
3901
3891
|
###### Events
|
|
3902
3892
|
|
|
3903
3893
|
| Prop | Type | Default | Description |
|
|
3904
3894
|
|---|---|---|---|
|
|
3905
|
-
| `onViewChange` | `(view:
|
|
3906
|
-
| `onSelect` | `(hit:
|
|
3895
|
+
| `onViewChange` | `(view: ``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), [Read it by keyboard and screen reader (Chart)](#chart-1) |
|
|
3896
|
+
| `onSelect` | `(hit: ``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) |
|
|
3907
3897
|
|
|
3908
3898
|
##### `ChartView`
|
|
3909
3899
|
|
|
3910
3900
|
| Prop | Type | Default | Description |
|
|
3911
3901
|
|---|---|---|---|
|
|
3912
|
-
| `domains` |
|
|
3913
|
-
| `hidden` | `readonly string[]` | — | The hidden series, by `name`; a series without one cannot be hidden. A name no series carries falls out.<br>Shown in: [Hide a series from the legend (Legend)](
|
|
3902
|
+
| `domains` | `AxisSpans` | — | The span each zoomable x axis shows, by axis `id` - a lone x axis is `"x"`. An axis absent here shows its own `domain`. An id that names no zoomable x axis falls out.<br>Shown in: [Fit the y axis to what is visible (Zoom and pan)](#zoom-and-pan) |
|
|
3903
|
+
| `hidden` | `readonly string[]` | — | The hidden series, by `name`; a series without one cannot be hidden. A name no series carries falls out.<br>Shown in: [Hide a series from the legend (Legend)](#legend) |
|
|
3914
3904
|
|
|
3915
3905
|
##### Types on this page
|
|
3916
3906
|
|
|
@@ -3921,8 +3911,8 @@ A custom tooltip's `render` receives it.
|
|
|
3921
3911
|
|
|
3922
3912
|
| Prop | Type | Default | Description |
|
|
3923
3913
|
|---|---|---|---|
|
|
3924
|
-
| `xValue` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
3925
|
-
| `points` *required* | `readonly
|
|
3914
|
+
| `xValue` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Write the tooltip yourself (Tooltip)](#tooltip), [Choose a hit (Tooltip)](#tooltip) |
|
|
3915
|
+
| `points` *required* | `readonly ``TooltipPoint``<T>[]` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Write the tooltip yourself (Tooltip)](#tooltip), [Choose a hit (Tooltip)](#tooltip) |
|
|
3926
3916
|
| `xPx` *required* | `number` | — | Pixel position of the crosshair (snapped to the data point). |
|
|
3927
3917
|
| `yPx` *required* | `number` | — | Pixel position of the primary hit. |
|
|
3928
3918
|
|
|
@@ -3940,15 +3930,15 @@ One hit per series in the tooltip.
|
|
|
3940
3930
|
|
|
3941
3931
|
| Prop | Type | Default | Description |
|
|
3942
3932
|
|---|---|---|---|
|
|
3943
|
-
| `seriesName` *required* | `string` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
3933
|
+
| `seriesName` *required* | `string` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Write the tooltip yourself (Tooltip)](#tooltip), [Choose a hit (Tooltip)](#tooltip) |
|
|
3944
3934
|
| `color` *required* | `string` | — | |
|
|
3945
3935
|
| `xValue` *required* | `number` | — | The point's x value on its own x axis - with several x axes it can differ from the hit's. |
|
|
3946
|
-
| `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
3947
|
-
| `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself (Tooltip)](
|
|
3936
|
+
| `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Choose a hit (Tooltip)](#tooltip) |
|
|
3937
|
+
| `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself (Tooltip)](#tooltip) |
|
|
3948
3938
|
| `index` *required* | `number` | — | |
|
|
3949
3939
|
| `level` | `number` | — | Only for the matrix: its level, out of the level channel. It stands here and not in yValue, because yValue is the position on the y axis - for a matrix therefore the row. Putting both into one field would be exactly the overloading [ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md) is written against. |
|
|
3950
3940
|
| `segment` | `{ from: number; to: number; label: string }` | — | Only for state series: the section being pointed at. A duration does not stand here - it is the difference of two numbers the entry already carries, and formatting it would presuppose knowing what the x axis means. The caller knows that, not this library. |
|
|
3951
|
-
| `box` |
|
|
3941
|
+
| `box` | `BoxNumbers`` & Partial<``BoxExtras``` > & { /** As the caller gave them; only where the series has `outliers`. */ outliers?: readonly number[]; } `` | — | Only for a box: its further numbers; yValue is its median. Fields of their own for the reason `level` has one ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
|
|
3952
3942
|
|
|
3953
3943
|
###### `BoxNumbers<V = number>`
|
|
3954
3944
|
|
|
@@ -3976,7 +3966,7 @@ The optional numbers of a box by name.
|
|
|
3976
3966
|
|
|
3977
3967
|
- The active point and the open data table are not part of the view: they are where the reader is, not how the chart is looked at.
|
|
3978
3968
|
|
|
3979
|
-
What umriss deliberately does not build, and why: [ADR-0032](https://
|
|
3969
|
+
What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md).
|
|
3980
3970
|
|
|
3981
3971
|
## Series
|
|
3982
3972
|
|
|
@@ -3990,8 +3980,6 @@ Joins the readings of a series into a course (a line chart, a trend). Reach for
|
|
|
3990
3980
|
import { useChart } from "@umriss-ui/charts";
|
|
3991
3981
|
```
|
|
3992
3982
|
|
|
3993
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/line/
|
|
3994
|
-
|
|
3995
3983
|
A missing reading breaks the line; nothing is drawn across a gap. With `step` a value holds until the next one, for things logged only when they change.
|
|
3996
3984
|
|
|
3997
3985
|
#### Examples
|
|
@@ -4436,7 +4424,7 @@ export default function BurnDown() {
|
|
|
4436
4424
|
|
|
4437
4425
|
#### Keyboard
|
|
4438
4426
|
|
|
4439
|
-
The keys of [Chart](
|
|
4427
|
+
The keys of [Chart](#chart-1) apply here.
|
|
4440
4428
|
|
|
4441
4429
|
#### API
|
|
4442
4430
|
|
|
@@ -4444,18 +4432,18 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
4444
4432
|
|
|
4445
4433
|
| Prop | Type | Default | Description |
|
|
4446
4434
|
|---|---|---|---|
|
|
4447
|
-
| `value` *required* |
|
|
4448
|
-
| `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Add axes for other magnitudes (Axis)](
|
|
4449
|
-
| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Hold a value until it changes](
|
|
4450
|
-
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Several series and a gap](
|
|
4451
|
-
| `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 series](
|
|
4452
|
-
| `format` | `(value: number) => string` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it.<br>Shown in: [Write each value in its unit (Tooltip)](
|
|
4453
|
-
| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Compare progress with a plan](
|
|
4454
|
-
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it.<br>Shown in: [Compare the budget with the forecast (Scenarios)](
|
|
4455
|
-
| `strokeWidth` | `number` | `1.5` | Line width in CSS pixels.<br>Shown in: [Hold a value until it changes](
|
|
4456
|
-
| `dash` | `readonly number[]` | a solid line | Dash pattern as a run of lengths in CSS pixels.<br>Shown in: [Several series and a gap](
|
|
4457
|
-
| `markers` | `"auto" \| "always" \| "never"` | `"auto"` | When the individual points are drawn as marks: `auto` every point up to 60 points and above that only a point between two gaps - it has no line to be seen by - `always`, or `never`, not even that one.<br>Shown in: [Compare progress with a plan](
|
|
4458
|
-
| `step` | `boolean` | — | Sample-and-hold: each value holds as a horizontal until the next sample and jumps there - a target, a digital signal. A gap ends the hold at its x. The tooltip reports the sample the hold began with.<br>Shown in: [Hold a value until it changes](
|
|
4435
|
+
| `value` *required* | `Value``<T>` | — | Y value - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [One series](#line), [Several series and a gap](#line), [Hold a value until it changes](#line) and 47 more |
|
|
4436
|
+
| `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Add axes for other magnitudes (Axis)](#axis), [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
4437
|
+
| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Hold a value until it changes](#line), [Add axes for other magnitudes (Axis)](#axis), [Align a second axis to the grid (Axis)](#axis) and 4 more |
|
|
4438
|
+
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Several series and a gap](#line), [Hold a value until it changes](#line), [Tell series apart without colour (Chart)](#chart-1) and 6 more |
|
|
4439
|
+
| `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 series](#line), [Several series and a gap](#line), [Hold a value until it changes](#line) and 47 more |
|
|
4440
|
+
| `format` | `(value: number) => string` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it.<br>Shown in: [Write each value in its unit (Tooltip)](#tooltip), [Show the values as a table (Tooltip)](#tooltip), [Table a long series (Tooltip)](#tooltip) and 1 more |
|
|
4441
|
+
| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Compare progress with a plan](#line), [Fix the domain and name the ticks (Axis)](#axis), [Watch latency against its objective (Scenarios)](#watch-latency-against-its-objective) and 1 more |
|
|
4442
|
+
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it.<br>Shown in: [Compare the budget with the forecast (Scenarios)](#compare-the-budget-with-the-forecast) |
|
|
4443
|
+
| `strokeWidth` | `number` | `1.5` | Line width in CSS pixels.<br>Shown in: [Hold a value until it changes](#line), [Compare progress with a plan](#line), [Mix series kinds (Chart)](#chart-1) and 9 more |
|
|
4444
|
+
| `dash` | `readonly number[]` | a solid line | Dash pattern as a run of lengths in CSS pixels.<br>Shown in: [Several series and a gap](#line), [Compare progress with a plan](#line), [Add axes for other magnitudes (Axis)](#axis) and 1 more |
|
|
4445
|
+
| `markers` | `"auto" \| "always" \| "never"` | `"auto"` | When the individual points are drawn as marks: `auto` every point up to 60 points and above that only a point between two gaps - it has no line to be seen by - `always`, or `never`, not even that one.<br>Shown in: [Compare progress with a plan](#line), [Draw a series per group of long rows (Chart)](#chart-1), [Fix the domain and name the ticks (Axis)](#axis) and 4 more |
|
|
4446
|
+
| `step` | `boolean` | — | Sample-and-hold: each value holds as a horizontal until the next sample and jumps there - a target, a digital signal. A gap ends the hold at its x. The tooltip reports the sample the hold began with.<br>Shown in: [Hold a value until it changes](#line) |
|
|
4459
4447
|
|
|
4460
4448
|
##### Types on this page
|
|
4461
4449
|
|
|
@@ -4494,9 +4482,9 @@ type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
|
|
|
4494
4482
|
|
|
4495
4483
|
#### Known limits
|
|
4496
4484
|
|
|
4497
|
-
- No smoothing: a curve between two readings would invent values nobody measured ([ADR-0032](https://
|
|
4485
|
+
- No smoothing: a curve between two readings would invent values nobody measured ([ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md)).
|
|
4498
4486
|
|
|
4499
|
-
What umriss deliberately does not build, and why: [ADR-0032](https://
|
|
4487
|
+
What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md).
|
|
4500
4488
|
|
|
4501
4489
|
### Area
|
|
4502
4490
|
|
|
@@ -4506,8 +4494,6 @@ A filled course (an area chart): down to zero for a quantity, between two edges
|
|
|
4506
4494
|
import { useChart } from "@umriss-ui/charts";
|
|
4507
4495
|
```
|
|
4508
4496
|
|
|
4509
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/area/
|
|
4510
|
-
|
|
4511
4497
|
Without `baseline` the foot is 0 and stays in the y extent. A range's lower edge is the `baseline` of the same series, not a second series - where either edge is missing, the fill has a hole.
|
|
4512
4498
|
|
|
4513
4499
|
#### Examples
|
|
@@ -4894,7 +4880,7 @@ export default function Shares() {
|
|
|
4894
4880
|
|
|
4895
4881
|
#### Keyboard
|
|
4896
4882
|
|
|
4897
|
-
The keys of [Chart](
|
|
4883
|
+
The keys of [Chart](#chart-1) apply here.
|
|
4898
4884
|
|
|
4899
4885
|
#### API
|
|
4900
4886
|
|
|
@@ -4902,20 +4888,20 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
4902
4888
|
|
|
4903
4889
|
| Prop | Type | Default | Description |
|
|
4904
4890
|
|---|---|---|---|
|
|
4905
|
-
| `value` *required* |
|
|
4906
|
-
| `baseline` |
|
|
4907
|
-
| `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](
|
|
4908
|
-
| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](
|
|
4909
|
-
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Fill a range between two edges](
|
|
4910
|
-
| `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: [Fill down to zero](
|
|
4911
|
-
| `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 the whole over time](
|
|
4891
|
+
| `value` *required* | `Value``<T>` | — | Upper edge - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [Fill down to zero](#area), [Fill a range between two edges](#area), [Stack areas](#area) and 5 more |
|
|
4892
|
+
| `baseline` | `Value``<T>` | a fixed baseline at 0 | Lower edge - a number field of the row or a function of it. In a `stack` the stack below is the lower edge, and this is not read.<br>Shown in: [Fill a range between two edges](#area), [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1) |
|
|
4893
|
+
| `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
4894
|
+
| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
4895
|
+
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Fill a range between two edges](#area), [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
4896
|
+
| `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: [Fill down to zero](#area), [Fill a range between two edges](#area), [Stack areas](#area) and 5 more |
|
|
4897
|
+
| `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 the whole over time](#area) |
|
|
4912
4898
|
| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value. |
|
|
4913
4899
|
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. `color` beats it. |
|
|
4914
|
-
| `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 areas](
|
|
4915
|
-
| `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 the whole over time](
|
|
4916
|
-
| `fillOpacity` | `number` | `0.18` | Opacity of the fill, from 0 to 1; the outline stays fully opaque.<br>Shown in: [Fill down to zero](
|
|
4917
|
-
| `strokeWidth` | `number` | `1.5` | Width of the outline along the upper edge in CSS pixels; 0 leaves it out.<br>Shown in: [Fill down to zero](
|
|
4918
|
-
| `dash` | `readonly number[]` | a solid outline | Dash pattern of the outline as a run of lengths in CSS pixels. The fill stays whole.<br>Shown in: [Fill a range between two edges](
|
|
4900
|
+
| `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 areas](#area), [Show shares of the whole over time](#area) |
|
|
4901
|
+
| `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 the whole over time](#area) |
|
|
4902
|
+
| `fillOpacity` | `number` | `0.18` | Opacity of the fill, from 0 to 1; the outline stays fully opaque.<br>Shown in: [Fill down to zero](#area), [Stack areas](#area), [Show shares of the whole over time](#area) |
|
|
4903
|
+
| `strokeWidth` | `number` | `1.5` | Width of the outline along the upper edge in CSS pixels; 0 leaves it out.<br>Shown in: [Fill down to zero](#area), [Fill a range between two edges](#area), [Stack areas](#area) and 2 more |
|
|
4904
|
+
| `dash` | `readonly number[]` | a solid outline | Dash pattern of the outline as a run of lengths in CSS pixels. The fill stays whole.<br>Shown in: [Fill a range between two edges](#area) |
|
|
4919
4905
|
|
|
4920
4906
|
##### Types on this page
|
|
4921
4907
|
|
|
@@ -4960,8 +4946,6 @@ Bars along the x axis (a bar or column chart): one per category, grouped side by
|
|
|
4960
4946
|
import { useChart, bin } from "@umriss-ui/charts";
|
|
4961
4947
|
```
|
|
4962
4948
|
|
|
4963
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/bar/
|
|
4964
|
-
|
|
4965
4949
|
The x axis reads the category from the row - a cost centre, a weekday - and gives each a place, a tick and its name ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)); a number or an instant places a bar as well. A bar's foot is 0, so one series carries both signs. `bin()` counts values into the rows of a histogram: each bin's `from`, `to`, middle `x` and `count`, a value on an edge in the bin that edge starts, the last bin closed, values that are not numbers skipped; a `domain` is taken as given and what lies outside it is left out.
|
|
4966
4950
|
|
|
4967
4951
|
#### Examples
|
|
@@ -5186,7 +5170,7 @@ export default function Histogram() {
|
|
|
5186
5170
|
|
|
5187
5171
|
#### Keyboard
|
|
5188
5172
|
|
|
5189
|
-
The keys of [Chart](
|
|
5173
|
+
The keys of [Chart](#chart-1) apply here.
|
|
5190
5174
|
|
|
5191
5175
|
#### API
|
|
5192
5176
|
|
|
@@ -5194,17 +5178,17 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
5194
5178
|
|
|
5195
5179
|
| Prop | Type | Default | Description |
|
|
5196
5180
|
|---|---|---|---|
|
|
5197
|
-
| `value` *required* |
|
|
5198
|
-
| `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](
|
|
5199
|
-
| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](
|
|
5200
|
-
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Bind every kind of series to a second axis (Axis)](
|
|
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](
|
|
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](
|
|
5203
|
-
| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Group bars side by side](
|
|
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)](
|
|
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](
|
|
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](
|
|
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](
|
|
5181
|
+
| `value` *required* | `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), [Group bars side by side](#bar), [Show bars above and below zero](#bar) and 13 more |
|
|
5182
|
+
| `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
5183
|
+
| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
5184
|
+
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
5185
|
+
| `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), [Group bars side by side](#bar), [Show bars above and below zero](#bar) and 13 more |
|
|
5186
|
+
| `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), [Compare the budget with the forecast (Scenarios)](#compare-the-budget-with-the-forecast) |
|
|
5187
|
+
| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Group bars side by side](#bar), [See where the vans stand idle (Scenarios)](#see-where-the-vans-stand-idle), [Compare the budget with the forecast (Scenarios)](#compare-the-budget-with-the-forecast) |
|
|
5188
|
+
| `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)](#compare-the-budget-with-the-forecast) |
|
|
5189
|
+
| `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), [Show shares of a whole](#bar), [Read a stack's total in the table (Tooltip)](#tooltip) and 1 more |
|
|
5190
|
+
| `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) |
|
|
5191
|
+
| `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), [Count readings into a histogram](#bar), [Sort causes and collect the tail (Pareto)](#pareto) and 3 more |
|
|
5208
5192
|
|
|
5209
5193
|
##### Types on this page
|
|
5210
5194
|
|
|
@@ -5245,7 +5229,7 @@ type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
|
|
|
5245
5229
|
|
|
5246
5230
|
- 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.
|
|
5247
5231
|
|
|
5248
|
-
What umriss deliberately does not build, and why: [ADR-0032](https://
|
|
5232
|
+
What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md).
|
|
5249
5233
|
|
|
5250
5234
|
### Scatter
|
|
5251
5235
|
|
|
@@ -5255,8 +5239,6 @@ Single readings as points, joined by nothing (a scatter plot, dots). Reach for i
|
|
|
5255
5239
|
import { useChart } from "@umriss-ui/charts";
|
|
5256
5240
|
```
|
|
5257
5241
|
|
|
5258
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/scatter/
|
|
5259
|
-
|
|
5260
5242
|
#### Examples
|
|
5261
5243
|
|
|
5262
5244
|
##### Plot single measurements
|
|
@@ -5499,7 +5481,7 @@ export default function AgainstATarget() {
|
|
|
5499
5481
|
|
|
5500
5482
|
#### Keyboard
|
|
5501
5483
|
|
|
5502
|
-
The keys of [Chart](
|
|
5484
|
+
The keys of [Chart](#chart-1) apply here.
|
|
5503
5485
|
|
|
5504
5486
|
#### API
|
|
5505
5487
|
|
|
@@ -5507,15 +5489,15 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
5507
5489
|
|
|
5508
5490
|
| Prop | Type | Default | Description |
|
|
5509
5491
|
|---|---|---|---|
|
|
5510
|
-
| `value` *required* |
|
|
5511
|
-
| `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](
|
|
5512
|
-
| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](
|
|
5513
|
-
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Bind every kind of series to a second axis (Axis)](
|
|
5514
|
-
| `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: [Plot single measurements](
|
|
5492
|
+
| `value` *required* | `Value``<T>` | — | Y value - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [Plot single measurements](#scatter), [Mark samples that miss a target](#scatter), [Mix series kinds (Chart)](#chart-1) and 3 more |
|
|
5493
|
+
| `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
5494
|
+
| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
5495
|
+
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
|
|
5496
|
+
| `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: [Plot single measurements](#scatter), [Mark samples that miss a target](#scatter), [Mix series kinds (Chart)](#chart-1) and 3 more |
|
|
5515
5497
|
| `format` | `(value: number) => string` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it. |
|
|
5516
5498
|
| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value. |
|
|
5517
|
-
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it.<br>Shown in: [Mark samples that miss a target](
|
|
5518
|
-
| `radius` | `number` | `3` | Point radius in CSS pixels.<br>Shown in: [Plot single measurements](
|
|
5499
|
+
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it.<br>Shown in: [Mark samples that miss a target](#scatter) |
|
|
5500
|
+
| `radius` | `number` | `3` | Point radius in CSS pixels.<br>Shown in: [Plot single measurements](#scatter), [Mark samples that miss a target](#scatter) |
|
|
5519
5501
|
|
|
5520
5502
|
##### Types on this page
|
|
5521
5503
|
|
|
@@ -5560,8 +5542,6 @@ A distribution per position (a box plot, box-and-whisker): quartiles, median and
|
|
|
5560
5542
|
import { useChart } from "@umriss-ui/charts";
|
|
5561
5543
|
```
|
|
5562
5544
|
|
|
5563
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/boxplot/
|
|
5564
|
-
|
|
5565
5545
|
Every number is the caller's: `median`, the two quartiles and where each whisker ends. The library computes none of them and names no quartile method or whisker rule, so a box aggregated in a database draws as well as one computed in the browser.
|
|
5566
5546
|
|
|
5567
5547
|
A box stands on the x axis as a bar does: a group is a category the axis reads from the row, and a time axis carries a box per hour ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). A missing median is a gap - no box is drawn there.
|
|
@@ -6024,7 +6004,7 @@ export default function Detailed() {
|
|
|
6024
6004
|
|
|
6025
6005
|
#### Keyboard
|
|
6026
6006
|
|
|
6027
|
-
The keys of [Chart](
|
|
6007
|
+
The keys of [Chart](#chart-1) apply here.
|
|
6028
6008
|
|
|
6029
6009
|
#### API
|
|
6030
6010
|
|
|
@@ -6032,24 +6012,24 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
6032
6012
|
|
|
6033
6013
|
| Prop | Type | Default | Description |
|
|
6034
6014
|
|---|---|---|---|
|
|
6035
|
-
| `median` *required* |
|
|
6036
|
-
| `lowerQuartile` *required* |
|
|
6037
|
-
| `upperQuartile` *required* |
|
|
6038
|
-
| `lowerWhisker` *required* |
|
|
6039
|
-
| `upperWhisker` *required* |
|
|
6040
|
-
| `outliers` |
|
|
6041
|
-
| `mean` |
|
|
6042
|
-
| `notchLower` |
|
|
6043
|
-
| `notchUpper` |
|
|
6044
|
-
| `count` |
|
|
6015
|
+
| `median` *required* | `Value``<T>` | — | The line across the box; null/undefined/NaN/±Infinity means a gap - no box is drawn there, whatever the other numbers say.<br>Shown in: [One box per service](#boxplot), [A box per hour on a time axis](#boxplot), [With outliers](#boxplot) and 4 more |
|
|
6016
|
+
| `lowerQuartile` *required* | `Value``<T>` | — | The box's lower edge.<br>Shown in: [One box per service](#boxplot), [A box per hour on a time axis](#boxplot), [With outliers](#boxplot) and 4 more |
|
|
6017
|
+
| `upperQuartile` *required* | `Value``<T>` | — | The box's upper edge.<br>Shown in: [One box per service](#boxplot), [A box per hour on a time axis](#boxplot), [With outliers](#boxplot) and 4 more |
|
|
6018
|
+
| `lowerWhisker` *required* | `Value``<T>` | — | Where the lower whisker ends - the caller's rule, not the minimum.<br>Shown in: [One box per service](#boxplot), [A box per hour on a time axis](#boxplot), [With outliers](#boxplot) and 4 more |
|
|
6019
|
+
| `upperWhisker` *required* | `Value``<T>` | — | Where the upper whisker ends - the caller's rule, not the maximum.<br>Shown in: [One box per service](#boxplot), [A box per hour on a time axis](#boxplot), [With outliers](#boxplot) and 4 more |
|
|
6020
|
+
| `outliers` | `ListValue``<T>` | — | The values beyond the whiskers, per box: an array, empty or missing where there are none. Drawn with their box in its colour - one beyond three IQR of the box's own quartiles as a ring -, read in its tooltip and table row, never hit on their own ([ADR-0040](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0040-a-box-carries-its-outliers.md)).<br>Shown in: [With outliers](#boxplot) |
|
|
6021
|
+
| `mean` | `Value``<T>` | — | The mean, drawn as a small ×: beside the median it shows a skew.<br>Shown in: [Mean and notches: do two medians differ?](#boxplot) |
|
|
6022
|
+
| `notchLower` | `Value``<T>` | — | The notch's lower bound - usually of a confidence interval of the median. Both bounds or neither: one alone warns in DEV and is not drawn.<br>Shown in: [Mean and notches: do two medians differ?](#boxplot) |
|
|
6023
|
+
| `notchUpper` | `Value``<T>` | — | The notch's upper bound; see `notchLower`.<br>Shown in: [Mean and notches: do two medians differ?](#boxplot) |
|
|
6024
|
+
| `count` | `Value``<T>` | — | How many values stand behind the box; read in the tooltip and the table, not drawn.<br>Shown in: [Mean and notches: do two medians differ?](#boxplot) |
|
|
6045
6025
|
| `xAxisId` | `string` | `"x"` | Binding to an x axis. |
|
|
6046
6026
|
| `yAxisId` | `string` | `"y"` | Binding to a y axis. |
|
|
6047
|
-
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Before and after, side by side](
|
|
6048
|
-
| `name` | `string` | "Series n", after its place in the chart | The name in legend and tooltip. Without one a warning stands in DEV.<br>Shown in: [One box per service](
|
|
6049
|
-
| `format` | `(value: number) => string` | the y axis' `tickFormat`, else the built-in number format | Every number of the box as the tooltip and the table write it.<br>Shown in: [Mean and notches: do two medians differ?](
|
|
6027
|
+
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Before and after, side by side](#boxplot), [Against the objective](#boxplot) |
|
|
6028
|
+
| `name` | `string` | "Series n", after its place in the chart | The name in legend and tooltip. Without one a warning stands in DEV.<br>Shown in: [One box per service](#boxplot), [A box per hour on a time axis](#boxplot), [With outliers](#boxplot) and 4 more |
|
|
6029
|
+
| `format` | `(value: number) => string` | the y axis' `tickFormat`, else the built-in number format | Every number of the box as the tooltip and the table write it.<br>Shown in: [Mean and notches: do two medians differ?](#boxplot) |
|
|
6050
6030
|
| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value. |
|
|
6051
|
-
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. `color` beats it. Set by the caller: a box out of its specification is the caller's judgement, not the library's.<br>Shown in: [Against the objective](
|
|
6052
|
-
| `boxWidth` | `number` | `0.8` | Width as a fraction of the step, as a bar's: boxes and bars on one x axis share this fraction and stand side by side.<br>Shown in: [Mean and notches: do two medians differ?](
|
|
6031
|
+
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. `color` beats it. Set by the caller: a box out of its specification is the caller's judgement, not the library's.<br>Shown in: [Against the objective](#boxplot) |
|
|
6032
|
+
| `boxWidth` | `number` | `0.8` | Width as a fraction of the step, as a bar's: boxes and bars on one x axis share this fraction and stand side by side.<br>Shown in: [Mean and notches: do two medians differ?](#boxplot), [A box per shift, its medians as a line](#boxplot) |
|
|
6053
6033
|
|
|
6054
6034
|
##### Types on this page
|
|
6055
6035
|
|
|
@@ -6120,7 +6100,7 @@ type ListFunction<T> = (d: T, index: number) => readonly number[] | null | undef
|
|
|
6120
6100
|
|
|
6121
6101
|
- No horizontal boxes, no violin or jittered points, no box width by count: a density is smoothing, a jitter a picture that does not repeat.
|
|
6122
6102
|
|
|
6123
|
-
What umriss deliberately does not build, and why: [ADR-0032](https://
|
|
6103
|
+
What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.41.1/docs/adr/0032-what-umriss-is-not.md).
|
|
6124
6104
|
|
|
6125
6105
|
### StateBand
|
|
6126
6106
|
|
|
@@ -6130,8 +6110,6 @@ What something was doing over time, as a band of coloured segments (a status tim
|
|
|
6130
6110
|
import { useChart } from "@umriss-ui/charts";
|
|
6131
6111
|
```
|
|
6132
6112
|
|
|
6133
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/stateband/
|
|
6134
|
-
|
|
6135
6113
|
`value` gives a state's place in `states`, which fixes the order, the name and the colour in one place ([ADR-0007](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0007-a-state-is-a-number.md)). Each segment runs to the next reading; a `null` leaves a hole, never a colour for unknown.
|
|
6136
6114
|
|
|
6137
6115
|
Several bands share one axis as lanes: each names its `lane`, and the y axis lists one per name, the first at the top ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). On a numeric y axis `laneFrom` and `laneTo` give a lane its edges instead.
|
|
@@ -6701,7 +6679,7 @@ export default function OneLaneEach() {
|
|
|
6701
6679
|
|
|
6702
6680
|
#### Keyboard
|
|
6703
6681
|
|
|
6704
|
-
The keys of [Chart](
|
|
6682
|
+
The keys of [Chart](#chart-1) apply here.
|
|
6705
6683
|
|
|
6706
6684
|
#### API
|
|
6707
6685
|
|
|
@@ -6709,15 +6687,15 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
6709
6687
|
|
|
6710
6688
|
| Prop | Type | Default | Description |
|
|
6711
6689
|
|---|---|---|---|
|
|
6712
|
-
| `value` *required* |
|
|
6713
|
-
| `states` *required* | `readonly
|
|
6690
|
+
| `value` *required* | `Value``<T>` | — | Index of the state in `states` - a number field of the row or a function of it; null/undefined/NaN/±Infinity is a gap - and a gap stays a hole, it gets no colour for "unknown". A colour would be a claim about the interval.<br>Shown in: [One vehicle through the day](#stateband), [Lay a state under a course](#stateband), [Give each one a lane](#stateband) and 4 more |
|
|
6691
|
+
| `states` *required* | `readonly ``StateEntry``[]` | — | The closed set of states, in the order of their codes.<br>Shown in: [One vehicle through the day](#stateband), [Lay a state under a course](#stateband), [Give each one a lane](#stateband) and 4 more |
|
|
6714
6692
|
| `xAxisId` | `string` | — | Binding to an x axis. |
|
|
6715
|
-
| `yAxisId` | `string` | — | Binding to a y axis.<br>Shown in: [Lay a state under a course](
|
|
6716
|
-
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Lay a state under a course](
|
|
6717
|
-
| `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 vehicle through the day](
|
|
6718
|
-
| `lane` | `string` | — | The lane by its name: a category of the y axis, whose place the band takes, as wide as a bar is. The y axis then lists a lane per name, the first at the top, in the bands' order or its own `categories` ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). Not together with `laneFrom` or `laneTo`.<br>Shown in: [Give each one a lane](
|
|
6719
|
-
| `laneFrom` | `number` | the beginning of the axis' domain | Lower edge of the lane in domain units of a numeric y axis.<br>Shown in: [Lay a state under a course](
|
|
6720
|
-
| `laneTo` | `number` | the end of the axis' domain | Upper edge of the lane in domain units of a numeric y axis.<br>Shown in: [Lay a state under a course](
|
|
6693
|
+
| `yAxisId` | `string` | — | Binding to a y axis.<br>Shown in: [Lay a state under a course](#stateband), [Mark bands, limits and cells (Chart)](#chart-1), [Read limits above the states (LimitLine)](#limitline) |
|
|
6694
|
+
| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Lay a state under a course](#stateband), [Give each one a lane](#stateband), [Mark bands, limits and cells (Chart)](#chart-1) and 2 more |
|
|
6695
|
+
| `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 vehicle through the day](#stateband), [Lay a state under a course](#stateband), [Give each one a lane](#stateband) and 4 more |
|
|
6696
|
+
| `lane` | `string` | — | The lane by its name: a category of the y axis, whose place the band takes, as wide as a bar is. The y axis then lists a lane per name, the first at the top, in the bands' order or its own `categories` ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). Not together with `laneFrom` or `laneTo`.<br>Shown in: [Give each one a lane](#stateband), [Mark bands, limits and cells (Chart)](#chart-1), [Read limits above the states (LimitLine)](#limitline) and 1 more |
|
|
6697
|
+
| `laneFrom` | `number` | the beginning of the axis' domain | Lower edge of the lane in domain units of a numeric y axis.<br>Shown in: [Lay a state under a course](#stateband) |
|
|
6698
|
+
| `laneTo` | `number` | the end of the axis' domain | Upper edge of the lane in domain units of a numeric y axis.<br>Shown in: [Lay a state under a course](#stateband) |
|
|
6721
6699
|
|
|
6722
6700
|
##### Types on this page
|
|
6723
6701
|
|
|
@@ -6771,8 +6749,6 @@ One value per cell across two axes (a heatmap), coloured by its limits or along
|
|
|
6771
6749
|
import { useChart, DEFAULT_GRADIENT } from "@umriss-ui/charts";
|
|
6772
6750
|
```
|
|
6773
6751
|
|
|
6774
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/matrix/
|
|
6775
|
-
|
|
6776
6752
|
`value` places a cell's row, as it places every series along y - a string names the row, and the y axis lists one per name, the first at the top ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)); `level` decides its colour. A cell without a level stays a hole, not a zero. The tooltip carries the level as text, since colour alone carries no number.
|
|
6777
6753
|
|
|
6778
6754
|
#### Examples
|
|
@@ -6951,7 +6927,7 @@ export default function Gradient() {
|
|
|
6951
6927
|
|
|
6952
6928
|
#### Keyboard
|
|
6953
6929
|
|
|
6954
|
-
The keys of [Chart](
|
|
6930
|
+
The keys of [Chart](#chart-1) apply here.
|
|
6955
6931
|
|
|
6956
6932
|
#### API
|
|
6957
6933
|
|
|
@@ -6959,14 +6935,14 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
6959
6935
|
|
|
6960
6936
|
| Prop | Type | Default | Description |
|
|
6961
6937
|
|---|---|---|---|
|
|
6962
|
-
| `value` *required* |
|
|
6963
|
-
| `level` *required* |
|
|
6964
|
-
| `coloring` |
|
|
6938
|
+
| `value` *required* | `AxisField``<T, number \| string \| null \| undefined> \| ((d: T, index: number) => number \| string \| null \| undefined)` | — | The row on the y axis - a field of the data's row or a function of it. A number is a position, as every series' y is; a string is a category: the y axis then has a named row per distinct one, the first at the top, in the order the data bring them or the y axis' `categories` ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). Never an instant: a `Date` is refused.<br>Shown in: [Colour cells by their limits](#matrix), [Colour cells along a gradient](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) and 1 more |
|
|
6939
|
+
| `level` *required* | `Value``<T>` | — | The level that decides the colour - a number field of the row or a function of it. A missing level is a hole, not a zero.<br>Shown in: [Colour cells by their limits](#matrix), [Colour cells along a gradient](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) and 1 more |
|
|
6940
|
+
| `coloring` | `MatrixColoring` | `{ kind: "gradient", stops: DEFAULT_GRADIENT }` | How the level colours a cell: by assessment against limits, or across a gradient.<br>Shown in: [Colour cells by their limits](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) |
|
|
6965
6941
|
| `xAxisId` | `string` | `"x"` | Binding to an x axis. |
|
|
6966
6942
|
| `yAxisId` | `string` | `"y"` | Binding to a y axis. |
|
|
6967
6943
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data. |
|
|
6968
|
-
| `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: [Colour cells by their limits](
|
|
6969
|
-
| `format` | `(value: number) => string` | the built-in number format | The level as the tooltip writes it. The y axis' `tickFormat` writes the row, not the level.<br>Shown in: [Colour cells by their limits](
|
|
6944
|
+
| `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: [Colour cells by their limits](#matrix), [Colour cells along a gradient](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) and 1 more |
|
|
6945
|
+
| `format` | `(value: number) => string` | the built-in number format | The level as the tooltip writes it. The y axis' `tickFormat` writes the row, not the level.<br>Shown in: [Colour cells by their limits](#matrix) |
|
|
6970
6946
|
|
|
6971
6947
|
##### Types on this page
|
|
6972
6948
|
|
|
@@ -7063,7 +7039,7 @@ target.
|
|
|
7063
7039
|
|
|
7064
7040
|
| Prop | Type | Default | Description |
|
|
7065
7041
|
|---|---|---|---|
|
|
7066
|
-
| `limits` | `readonly
|
|
7042
|
+
| `limits` | `readonly ``Limit``[]` | — | In any order; none, one or several.<br>Shown in: [Colour cells by their limits](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) |
|
|
7067
7043
|
| `target` | `number` | — | |
|
|
7068
7044
|
|
|
7069
7045
|
###### `Limit`
|
|
@@ -7075,9 +7051,9 @@ free of a `null` on the other edge.
|
|
|
7075
7051
|
|
|
7076
7052
|
| Prop | Type | Default | Description |
|
|
7077
7053
|
|---|---|---|---|
|
|
7078
|
-
| `value` *required* | `number` | — | <br>Shown in: [Colour cells by their limits](
|
|
7079
|
-
| `side` *required* |
|
|
7080
|
-
| `severity` *required* |
|
|
7054
|
+
| `value` *required* | `number` | — | <br>Shown in: [Colour cells by their limits](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) |
|
|
7055
|
+
| `side` *required* | `Side`<br>`"upper" \| "lower"` | — | <br>Shown in: [Colour cells by their limits](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) |
|
|
7056
|
+
| `severity` *required* | `Severity`<br>`"warning" \| "alarm"` | — | <br>Shown in: [Colour cells by their limits](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) |
|
|
7081
7057
|
|
|
7082
7058
|
###### `Side`
|
|
7083
7059
|
|
|
@@ -7110,8 +7086,6 @@ The limits a course is read against (a threshold, a reference line): a line abov
|
|
|
7110
7086
|
import { LimitLine, LimitBand } from "@umriss-ui/charts";
|
|
7111
7087
|
```
|
|
7112
7088
|
|
|
7113
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/limitline/
|
|
7114
|
-
|
|
7115
7089
|
A limit's tone follows its `severity`, never a colour of its own. The model is the one `@umriss-ui/core` uses for its verdicts, so a chart and a tile agree ([ADR-0006](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0006-the-limit-model-lives-in-both-packages.md)).
|
|
7116
7090
|
|
|
7117
7091
|
#### Examples
|
|
@@ -7971,7 +7945,7 @@ export default function SpecificationAndControl() {
|
|
|
7971
7945
|
|
|
7972
7946
|
#### Keyboard
|
|
7973
7947
|
|
|
7974
|
-
The keys of [Chart](
|
|
7948
|
+
The keys of [Chart](#chart-1) apply here.
|
|
7975
7949
|
|
|
7976
7950
|
#### API
|
|
7977
7951
|
|
|
@@ -7979,38 +7953,38 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
7979
7953
|
|
|
7980
7954
|
| Prop | Type | Default | Description |
|
|
7981
7955
|
|---|---|---|---|
|
|
7982
|
-
| `value` *required* | `number \| Date` | — | Where the line lies, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`.<br>Shown in: [Draw a limit](
|
|
7983
|
-
| `axisId` | `string` | the first axis of the orientation | Axis on which the value lies.<br>Shown in: [Sort causes and collect the tail (Pareto)](
|
|
7984
|
-
| `orientation` | `"x" \| "y"` | `"y"` | Whether the value lies on the x or on the y axis - a limit is nearly always a value and not a moment.<br>Shown in: [Mark moments and windows along time](
|
|
7985
|
-
| `severity` |
|
|
7986
|
-
| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is.<br>Shown in: [Draw a limit](
|
|
7987
|
-
| `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. The line or band takes it; its label keeps the axis's text colour, which stays legible in both themes, and a short stroke before the text in the line's pattern takes this colour.<br>Shown in: [Mark moments and windows along time](
|
|
7988
|
-
| `inExtent` | `boolean` | `true` | Whether the value widens the axis extent, so that the limit is certainly visible.<br>Shown in: [Sort causes and collect the tail (Pareto)](
|
|
7956
|
+
| `value` *required* | `number \| Date` | — | Where the line lies, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 11 more |
|
|
7957
|
+
| `axisId` | `string` | the first axis of the orientation | Axis on which the value lies.<br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto) |
|
|
7958
|
+
| `orientation` | `"x" \| "y"` | `"y"` | Whether the value lies on the x or on the y axis - a limit is nearly always a value and not a moment.<br>Shown in: [Mark moments and windows along time](#limitline) |
|
|
7959
|
+
| `severity` | `Severity`<br>`"warning" \| "alarm"` | `"alarm"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 10 more |
|
|
7960
|
+
| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 11 more |
|
|
7961
|
+
| `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. The line or band takes it; its label keeps the axis's text colour, which stays legible in both themes, and a short stroke before the text in the line's pattern takes this colour.<br>Shown in: [Mark moments and windows along time](#limitline) |
|
|
7962
|
+
| `inExtent` | `boolean` | `true` | Whether the value widens the axis extent, so that the limit is certainly visible.<br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto), [Watch latency against its objective (Scenarios)](#watch-latency-against-its-objective), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
7989
7963
|
|
|
7990
7964
|
###### Accessibility
|
|
7991
7965
|
|
|
7992
7966
|
| Prop | Type | Default | Description |
|
|
7993
7967
|
|---|---|---|---|
|
|
7994
|
-
| `role` |
|
|
7968
|
+
| `role` | `LimitRole`<br>`"specification" \| "control" \| "zone"` | `"specification"` | A chosen specification limit or a calculated control limit. They look different because they mean different things ([ADR-0008](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0008-control-limits-are-not-specification-limits.md)).<br>Shown in: [Set specification and control limits side by side](#limitline) |
|
|
7995
7969
|
|
|
7996
7970
|
##### `LimitBandProps`
|
|
7997
7971
|
|
|
7998
7972
|
| Prop | Type | Default | Description |
|
|
7999
7973
|
|---|---|---|---|
|
|
8000
|
-
| `from` *required* | `number \| Date` | — | Lower edge of the band, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`.<br>Shown in: [Lay a band under the series](
|
|
8001
|
-
| `to` *required* | `number \| Date` | — | Upper edge, in domain units of its axis. A band drawn backwards (`from` above `to`) is drawn between the two all the same - the pair is a range, not a direction.<br>Shown in: [Lay a band under the series](
|
|
8002
|
-
| `axisId` | `string` | the first axis of the orientation | Axis on which the value lies.<br>Shown in: [Sort causes and collect the tail (Pareto)](
|
|
8003
|
-
| `orientation` | `"x" \| "y"` | `"y"` | Whether the value lies on the x or on the y axis - a limit is nearly always a value and not a moment.<br>Shown in: [Mark moments and windows along time](
|
|
8004
|
-
| `severity` |
|
|
8005
|
-
| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is.<br>Shown in: [Draw a limit](
|
|
8006
|
-
| `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. The line or band takes it; its label keeps the axis's text colour, which stays legible in both themes, and a short stroke before the text in the line's pattern takes this colour.<br>Shown in: [Mark moments and windows along time](
|
|
8007
|
-
| `inExtent` | `boolean` | `true` | Whether the value widens the axis extent, so that the limit is certainly visible.<br>Shown in: [Sort causes and collect the tail (Pareto)](
|
|
7974
|
+
| `from` *required* | `number \| Date` | — | Lower edge of the band, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`.<br>Shown in: [Lay a band under the series](#limitline), [Read limits above the states](#limitline), [Watch a kiln zone against its tolerance](#limitline) and 5 more |
|
|
7975
|
+
| `to` *required* | `number \| Date` | — | Upper edge, in domain units of its axis. A band drawn backwards (`from` above `to`) is drawn between the two all the same - the pair is a range, not a direction.<br>Shown in: [Lay a band under the series](#limitline), [Read limits above the states](#limitline), [Watch a kiln zone against its tolerance](#limitline) and 5 more |
|
|
7976
|
+
| `axisId` | `string` | the first axis of the orientation | Axis on which the value lies.<br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto) |
|
|
7977
|
+
| `orientation` | `"x" \| "y"` | `"y"` | Whether the value lies on the x or on the y axis - a limit is nearly always a value and not a moment.<br>Shown in: [Mark moments and windows along time](#limitline) |
|
|
7978
|
+
| `severity` | `Severity`<br>`"warning" \| "alarm"` | `"warning"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 10 more |
|
|
7979
|
+
| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 11 more |
|
|
7980
|
+
| `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. The line or band takes it; its label keeps the axis's text colour, which stays legible in both themes, and a short stroke before the text in the line's pattern takes this colour.<br>Shown in: [Mark moments and windows along time](#limitline) |
|
|
7981
|
+
| `inExtent` | `boolean` | `true` | Whether the value widens the axis extent, so that the limit is certainly visible.<br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto), [Watch latency against its objective (Scenarios)](#watch-latency-against-its-objective), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
8008
7982
|
|
|
8009
7983
|
###### Accessibility
|
|
8010
7984
|
|
|
8011
7985
|
| Prop | Type | Default | Description |
|
|
8012
7986
|
|---|---|---|---|
|
|
8013
|
-
| `role` |
|
|
7987
|
+
| `role` | `LimitRole`<br>`"specification" \| "control" \| "zone"` | `"specification"` | A chosen specification limit or a calculated control limit. They look different because they mean different things ([ADR-0008](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0008-control-limits-are-not-specification-limits.md)).<br>Shown in: [Set specification and control limits side by side](#limitline) |
|
|
8014
7988
|
|
|
8015
7989
|
##### Types on this page
|
|
8016
7990
|
|
|
@@ -8046,8 +8020,6 @@ Centre line, control limits and the rule violations of a process (an SPC or Shew
|
|
|
8046
8020
|
import { ControlChart, controlLimits, violations } from "@umriss-ui/charts";
|
|
8047
8021
|
```
|
|
8048
8022
|
|
|
8049
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/controlchart/
|
|
8050
|
-
|
|
8051
8023
|
Control limits are computed from a named reference window, never from what happens to be visible; specification limits are chosen and drawn with `LimitLine` ([ADR-0008](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0008-control-limits-are-not-specification-limits.md)).
|
|
8052
8024
|
|
|
8053
8025
|
The rules - outlier, run, trend, two of three - are exported as plain functions, so the violations can stand beside the chart as text.
|
|
@@ -8618,7 +8590,7 @@ export default function ChooseTheRules() {
|
|
|
8618
8590
|
|
|
8619
8591
|
#### Keyboard
|
|
8620
8592
|
|
|
8621
|
-
The keys of [Chart](
|
|
8593
|
+
The keys of [Chart](#chart-1) apply here.
|
|
8622
8594
|
|
|
8623
8595
|
#### API
|
|
8624
8596
|
|
|
@@ -8626,26 +8598,26 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
8626
8598
|
|
|
8627
8599
|
| Prop | Type | Default | Description |
|
|
8628
8600
|
|---|---|---|---|
|
|
8629
|
-
| `value` *required* |
|
|
8630
|
-
| `data` *required* | `readonly T[]` | — | Required: the limits arise out of these values, not out of what happens to be visible.<br>Shown in: [Chart a process against its control limits](
|
|
8631
|
-
| `origin` *required* |
|
|
8601
|
+
| `value` *required* | `Value``<T>` | — | The values of the chart - a number field of its `data`'s rows or a function of them.<br>Shown in: [Chart a process against its control limits](#controlchart), [List the rule violations](#controlchart), [Choose the rules](#controlchart) and 1 more |
|
|
8602
|
+
| `data` *required* | `readonly T[]` | — | Required: the limits arise out of these values, not out of what happens to be visible.<br>Shown in: [Chart a process against its control limits](#controlchart), [List the rule violations](#controlchart), [Choose the rules](#controlchart) and 1 more |
|
|
8603
|
+
| `origin` *required* | `ControlLimitOrigin` | — | Given, or from a named reference window - never tacitly from everything on the screen ([ADR-0008](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0008-control-limits-are-not-specification-limits.md)).<br>Shown in: [Chart a process against its control limits](#controlchart), [List the rule violations](#controlchart), [Choose the rules](#controlchart) and 1 more |
|
|
8632
8604
|
| `xAxisId` | `string` | `"x"` | Binding to an x axis. |
|
|
8633
8605
|
| `yAxisId` | `string` | `"y"` | Binding to a y axis. |
|
|
8634
|
-
| `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: [Chart a process against its control limits](
|
|
8606
|
+
| `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: [Chart a process against its control limits](#controlchart), [List the rule violations](#controlchart), [Choose the rules](#controlchart) and 1 more |
|
|
8635
8607
|
| `format` | `(value: number) => string` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it - on the line and on the violations. |
|
|
8636
8608
|
| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value. |
|
|
8637
8609
|
| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value for the line; the theme resolves it. The violations are always "alarm". |
|
|
8638
|
-
| `rules` | `Partial
|
|
8639
|
-
| `zoneLines` | `boolean` | `true` | The faint zone lines at one and two sigma. Rule 4 is about the two-sigma zone; without them a reader cannot check it.<br>Shown in: [Choose the rules](
|
|
8640
|
-
| `labelUpper` | `string` | no label | Label of the upper control limit in the axis band. The package brings no text along, not even "UCL" and "LCL".<br>Shown in: [Chart a process against its control limits](
|
|
8641
|
-
| `labelLower` | `string` | no label | The same for the lower control limit. Named separately because a chart may well want one of the two labelled and not the other.<br>Shown in: [Chart a process against its control limits](
|
|
8642
|
-
| `violationName` | `string` | "Series n", after its place in the chart | Name of the scatter of violations in the legend and the tooltip. Without one a legend warns once in DEV. Before this, a German suffix stood on the name of the chart.<br>Shown in: [Chart a process against its control limits](
|
|
8610
|
+
| `rules` | `Partial<``RuleOptions``>` | — | Switchable one by one; run lengths are parameters.<br>Shown in: [Choose the rules](#controlchart) |
|
|
8611
|
+
| `zoneLines` | `boolean` | `true` | The faint zone lines at one and two sigma. Rule 4 is about the two-sigma zone; without them a reader cannot check it.<br>Shown in: [Choose the rules](#controlchart) |
|
|
8612
|
+
| `labelUpper` | `string` | no label | Label of the upper control limit in the axis band. The package brings no text along, not even "UCL" and "LCL".<br>Shown in: [Chart a process against its control limits](#controlchart), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
8613
|
+
| `labelLower` | `string` | no label | The same for the lower control limit. Named separately because a chart may well want one of the two labelled and not the other.<br>Shown in: [Chart a process against its control limits](#controlchart), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
8614
|
+
| `violationName` | `string` | "Series n", after its place in the chart | Name of the scatter of violations in the legend and the tooltip. Without one a legend warns once in DEV. Before this, a German suffix stood on the name of the chart.<br>Shown in: [Chart a process against its control limits](#controlchart), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
8643
8615
|
|
|
8644
8616
|
###### Events
|
|
8645
8617
|
|
|
8646
8618
|
| Prop | Type | Default | Description |
|
|
8647
8619
|
|---|---|---|---|
|
|
8648
|
-
| `onViolations` | `(found: readonly
|
|
8620
|
+
| `onViolations` | `(found: readonly ``Violation``[]) => void` | — | The violations as data - they can be listed beside the chart as well as marked on it.<br>Shown in: [List the rule violations](#controlchart), [Choose the rules](#controlchart) |
|
|
8649
8621
|
|
|
8650
8622
|
##### Types on this page
|
|
8651
8623
|
|
|
@@ -8667,7 +8639,7 @@ type ControlLimitOrigin =
|
|
|
8667
8639
|
/** From a baseline the caller has fixed. Taken as it is - even where the
|
|
8668
8640
|
series would yield something else out of itself. */
|
|
8669
8641
|
| { readonly kind: "given"; readonly center: number; readonly sigma: number }
|
|
8670
|
-
/** From exactly this index range of the series, half-open
|
|
8642
|
+
/** From exactly this index range of the series, half-open from, to). */
|
|
8671
8643
|
| { readonly kind: "referenceWindow"; readonly from: number; readonly to: number };
|
|
8672
8644
|
```
|
|
8673
8645
|
|
|
@@ -8690,8 +8662,8 @@ A rule and the indices it violates.
|
|
|
8690
8662
|
|
|
8691
8663
|
| Prop | Type | Default | Description |
|
|
8692
8664
|
|---|---|---|---|
|
|
8693
|
-
| `rule` *required* | [`RuleName
|
|
8694
|
-
| `indices` *required* | `readonly number[]` | — | <br>Shown in: [List the rule violations](
|
|
8665
|
+
| `rule` *required* | [`RuleName`<br>`"outlier" \| "run" \| "trend" \| "twoOfThree"` | — | <br>Shown in: [List the rule violations](#controlchart), [Choose the rules](#controlchart), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
8666
|
+
| `indices` *required* | `readonly number[]` | — | <br>Shown in: [List the rule violations](#controlchart), [Choose the rules](#controlchart), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
8695
8667
|
|
|
8696
8668
|
###### `NumberField<T>`
|
|
8697
8669
|
|
|
@@ -8733,8 +8705,6 @@ Causes sorted by weight with a cumulative line (a Pareto chart). Reach for it af
|
|
|
8733
8705
|
import { pareto } from "@umriss-ui/charts";
|
|
8734
8706
|
```
|
|
8735
8707
|
|
|
8736
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/pareto/
|
|
8737
|
-
|
|
8738
8708
|
`pareto()` sorts, adds up and folds the tail into one entry that stands last whatever its size; the bars, the line and the second axis are yours to compose.
|
|
8739
8709
|
|
|
8740
8710
|
#### Examples
|
|
@@ -8787,90 +8757,90 @@ export default function ParetoExample() {
|
|
|
8787
8757
|
|
|
8788
8758
|
#### Keyboard
|
|
8789
8759
|
|
|
8790
|
-
The keys of [Chart](
|
|
8760
|
+
The keys of [Chart](#chart-1) apply here.
|
|
8791
8761
|
|
|
8792
8762
|
#### Props on this page
|
|
8793
8763
|
|
|
8794
|
-
From `ChartProps` — the full table stands on [Chart](
|
|
8764
|
+
From `ChartProps` — the full table stands on [Chart](#chart-1).
|
|
8795
8765
|
|
|
8796
8766
|
| Prop | Type | Default | Description |
|
|
8797
8767
|
|---|---|---|---|
|
|
8798
|
-
| [`height`](
|
|
8799
|
-
| [`children`](
|
|
8768
|
+
| [`height`](#chart-1) | `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)). |
|
|
8769
|
+
| [`children`](#chart-1) | `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. |
|
|
8800
8770
|
|
|
8801
8771
|
###### Accessibility
|
|
8802
8772
|
|
|
8803
8773
|
| Prop | Type | Default | Description |
|
|
8804
8774
|
|---|---|---|---|
|
|
8805
|
-
| [`ariaLabel`](
|
|
8775
|
+
| [`ariaLabel`](#chart-1) | `string` | — | Required in DEV through a warning. |
|
|
8806
8776
|
|
|
8807
|
-
From `XAxisProps` — the full table stands on [Axis](
|
|
8777
|
+
From `XAxisProps` — the full table stands on [Axis](#axis).
|
|
8808
8778
|
|
|
8809
8779
|
| Prop | Type | Default | Description |
|
|
8810
8780
|
|---|---|---|---|
|
|
8811
|
-
| [`value`](
|
|
8812
|
-
| [`id`](
|
|
8813
|
-
| [`label`](
|
|
8814
|
-
| [`tickFormat`](
|
|
8781
|
+
| [`value`](#axis) *required* | [`AxisField`](#axis)`<T> \| ((d: T, index: number) => `[`AxisValue`](#axis)`)` | — | 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" />`. |
|
|
8782
|
+
| [`id`](#axis) | `string` | `"x"` | Axis id, through which series bind themselves. |
|
|
8783
|
+
| [`label`](#axis) | `string` | — | Axis title. |
|
|
8784
|
+
| [`tickFormat`](#axis) | `(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. |
|
|
8815
8785
|
|
|
8816
|
-
From `YAxisProps` — the full table stands on [Axis](
|
|
8786
|
+
From `YAxisProps` — the full table stands on [Axis](#axis).
|
|
8817
8787
|
|
|
8818
8788
|
| Prop | Type | Default | Description |
|
|
8819
8789
|
|---|---|---|---|
|
|
8820
|
-
| [`domain`](
|
|
8821
|
-
| [`position`](
|
|
8822
|
-
| [`id`](
|
|
8823
|
-
| [`label`](
|
|
8824
|
-
| [`tickFormat`](
|
|
8790
|
+
| [`domain`](#axis) | `"nice" \| "data" \| "visible" \| readonly [number, number]` | `"nice"` | As on the x axis, and `"visible"`: what the series show inside their x axis' domain - a zoomed hour gets the hour's range, not the week's -, widened to ticks as `"nice"` is. Where the x domain is not fixed that is every point. |
|
|
8791
|
+
| [`position`](#axis) | `"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. |
|
|
8792
|
+
| [`id`](#axis) | `string` | `"y"` | Axis id, through which series bind themselves. |
|
|
8793
|
+
| [`label`](#axis) | `string` | — | Axis title. |
|
|
8794
|
+
| [`tickFormat`](#axis) | `(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. |
|
|
8825
8795
|
|
|
8826
|
-
From `LineProps` — the full table stands on [Line](
|
|
8796
|
+
From `LineProps` — the full table stands on [Line](#line).
|
|
8827
8797
|
|
|
8828
8798
|
| Prop | Type | Default | Description |
|
|
8829
8799
|
|---|---|---|---|
|
|
8830
|
-
| [`value`](
|
|
8831
|
-
| [`yAxisId`](
|
|
8832
|
-
| [`name`](
|
|
8833
|
-
| [`strokeWidth`](
|
|
8834
|
-
| [`markers`](
|
|
8800
|
+
| [`value`](#line) *required* | [`Value`](#line)`<T>` | — | Y value - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap. |
|
|
8801
|
+
| [`yAxisId`](#line) | `string` | `"y"` | Binding to a y axis. |
|
|
8802
|
+
| [`name`](#line) | `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. |
|
|
8803
|
+
| [`strokeWidth`](#line) | `number` | `1.5` | Line width in CSS pixels. |
|
|
8804
|
+
| [`markers`](#line) | `"auto" \| "always" \| "never"` | `"auto"` | When the individual points are drawn as marks: `auto` every point up to 60 points and above that only a point between two gaps - it has no line to be seen by - `always`, or `never`, not even that one. |
|
|
8835
8805
|
|
|
8836
|
-
From `BarProps` — the full table stands on [Bar](
|
|
8806
|
+
From `BarProps` — the full table stands on [Bar](#bar).
|
|
8837
8807
|
|
|
8838
8808
|
| Prop | Type | Default | Description |
|
|
8839
8809
|
|---|---|---|---|
|
|
8840
|
-
| [`value`](
|
|
8841
|
-
| [`name`](
|
|
8842
|
-
| [`barWidth`](
|
|
8810
|
+
| [`value`](#bar) *required* | [`Value`](#bar)`<T>` | — | Height - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap. |
|
|
8811
|
+
| [`name`](#bar) | `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. |
|
|
8812
|
+
| [`barWidth`](#bar) | `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. |
|
|
8843
8813
|
|
|
8844
|
-
From `LimitLineProps` — the full table stands on [LimitLine](
|
|
8814
|
+
From `LimitLineProps` — the full table stands on [LimitLine](#limitline).
|
|
8845
8815
|
|
|
8846
8816
|
| Prop | Type | Default | Description |
|
|
8847
8817
|
|---|---|---|---|
|
|
8848
|
-
| [`value`](
|
|
8849
|
-
| [`axisId`](
|
|
8850
|
-
| [`severity`](
|
|
8851
|
-
| [`label`](
|
|
8852
|
-
| [`inExtent`](
|
|
8818
|
+
| [`value`](#limitline) *required* | `number \| Date` | — | Where the line lies, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`. |
|
|
8819
|
+
| [`axisId`](#limitline) | `string` | the first axis of the orientation | Axis on which the value lies. |
|
|
8820
|
+
| [`severity`](#limitline) | [`Severity`](#limitline)<br>`"warning" \| "alarm"` | `"alarm"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise. |
|
|
8821
|
+
| [`label`](#limitline) | `string` | — | What the value means. A line at 90 does not say what 90 is. |
|
|
8822
|
+
| [`inExtent`](#limitline) | `boolean` | `true` | Whether the value widens the axis extent, so that the limit is certainly visible. |
|
|
8853
8823
|
|
|
8854
|
-
From `LimitBandProps` — the full table stands on [LimitLine](
|
|
8824
|
+
From `LimitBandProps` — the full table stands on [LimitLine](#limitline).
|
|
8855
8825
|
|
|
8856
8826
|
| Prop | Type | Default | Description |
|
|
8857
8827
|
|---|---|---|---|
|
|
8858
|
-
| [`axisId`](
|
|
8859
|
-
| [`severity`](
|
|
8860
|
-
| [`label`](
|
|
8861
|
-
| [`inExtent`](
|
|
8828
|
+
| [`axisId`](#limitline) | `string` | the first axis of the orientation | Axis on which the value lies. |
|
|
8829
|
+
| [`severity`](#limitline) | [`Severity`](#limitline)<br>`"warning" \| "alarm"` | `"warning"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise. |
|
|
8830
|
+
| [`label`](#limitline) | `string` | — | What the value means. A line at 90 does not say what 90 is. |
|
|
8831
|
+
| [`inExtent`](#limitline) | `boolean` | `true` | Whether the value widens the axis extent, so that the limit is certainly visible. |
|
|
8862
8832
|
|
|
8863
|
-
From `TooltipProps` — the full table stands on [Tooltip](
|
|
8833
|
+
From `TooltipProps` — the full table stands on [Tooltip](#tooltip).
|
|
8864
8834
|
|
|
8865
8835
|
| Prop | Type | Default | Description |
|
|
8866
8836
|
|---|---|---|---|
|
|
8867
|
-
| [`mode`](
|
|
8837
|
+
| [`mode`](#tooltip) | `"x" \| "nearest"` | `"x"` | "x": every series at the x position; "nearest": only the nearest point. |
|
|
8868
8838
|
|
|
8869
|
-
From `LegendProps` — the full table stands on [Legend](
|
|
8839
|
+
From `LegendProps` — the full table stands on [Legend](#legend).
|
|
8870
8840
|
|
|
8871
8841
|
| Prop | Type | Default | Description |
|
|
8872
8842
|
|---|---|---|---|
|
|
8873
|
-
| [`placement`](
|
|
8843
|
+
| [`placement`](#legend) | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on. |
|
|
8874
8844
|
|
|
8875
8845
|
## Around the chart
|
|
8876
8846
|
|
|
@@ -8884,8 +8854,6 @@ What a hover reports (a hover card), and the values as a table for a reader who
|
|
|
8884
8854
|
import { Tooltip, DataTable } from "@umriss-ui/charts";
|
|
8885
8855
|
```
|
|
8886
8856
|
|
|
8887
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/tooltip/
|
|
8888
|
-
|
|
8889
8857
|
The crosshair snaps to a reading, never between two. The data table's key stands at the end of the legend.
|
|
8890
8858
|
|
|
8891
8859
|
`useChart(rows, { onSelect })` hears a click or tap on a hit and Enter on the Active point, with the hit a custom `render` receives - once, never at the end of a drag, and for a double click only on its first click. The chart keeps and draws no selection; it needs a `Tooltip` for its hits and does not send the hit over `syncId`.
|
|
@@ -9568,7 +9536,7 @@ export default function TotalOfAStack() {
|
|
|
9568
9536
|
|
|
9569
9537
|
#### Keyboard
|
|
9570
9538
|
|
|
9571
|
-
The keys of [Chart](
|
|
9539
|
+
The keys of [Chart](#chart-1) apply here.
|
|
9572
9540
|
|
|
9573
9541
|
#### API
|
|
9574
9542
|
|
|
@@ -9576,22 +9544,22 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
|
|
|
9576
9544
|
|
|
9577
9545
|
| Prop | Type | Default | Description |
|
|
9578
9546
|
|---|---|---|---|
|
|
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](
|
|
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](
|
|
9581
|
-
| `render` | `(hit:
|
|
9547
|
+
| `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), [Write the tooltip yourself](#tooltip), [Write each value in its unit](#tooltip) and 61 more |
|
|
9548
|
+
| `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) |
|
|
9549
|
+
| `render` | `(hit: ``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), [Fix the domain and name the ticks (Axis)](#axis) |
|
|
9582
9550
|
|
|
9583
9551
|
##### `ChartOptions<Z = unknown>`
|
|
9584
9552
|
|
|
9585
9553
|
| Prop | Type | Default | Description |
|
|
9586
9554
|
|---|---|---|---|
|
|
9587
|
-
| `initialView` | [`ChartView`](
|
|
9555
|
+
| `initialView` | [`ChartView`](#view) | — | 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), [Hide a series from the legend (Legend)](#legend) |
|
|
9588
9556
|
|
|
9589
9557
|
###### Events
|
|
9590
9558
|
|
|
9591
9559
|
| Prop | Type | Default | Description |
|
|
9592
9560
|
|---|---|---|---|
|
|
9593
|
-
| `onViewChange` | `(view: `[`ChartView`](
|
|
9594
|
-
| `onSelect` | `(hit:
|
|
9561
|
+
| `onViewChange` | `(view: `[`ChartView`](#view)`) => 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), [Read it by keyboard and screen reader (Chart)](#chart-1) |
|
|
9562
|
+
| `onSelect` | `(hit: ``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) |
|
|
9595
9563
|
|
|
9596
9564
|
##### Types on this page
|
|
9597
9565
|
|
|
@@ -9602,8 +9570,8 @@ A custom tooltip's `render` receives it.
|
|
|
9602
9570
|
|
|
9603
9571
|
| Prop | Type | Default | Description |
|
|
9604
9572
|
|---|---|---|---|
|
|
9605
|
-
| `xValue` *required* | `number` | — | <br>Shown in: [Write the tooltip yourself](
|
|
9606
|
-
| `points` *required* | `readonly
|
|
9573
|
+
| `xValue` *required* | `number` | — | <br>Shown in: [Write the tooltip yourself](#tooltip), [Choose a hit](#tooltip), [Fix the domain and name the ticks (Axis)](#axis) |
|
|
9574
|
+
| `points` *required* | `readonly ``TooltipPoint``<T>[]` | — | <br>Shown in: [Write the tooltip yourself](#tooltip), [Choose a hit](#tooltip), [Fix the domain and name the ticks (Axis)](#axis) |
|
|
9607
9575
|
| `xPx` *required* | `number` | — | Pixel position of the crosshair (snapped to the data point). |
|
|
9608
9576
|
| `yPx` *required* | `number` | — | Pixel position of the primary hit. |
|
|
9609
9577
|
|
|
@@ -9613,15 +9581,15 @@ One hit per series in the tooltip.
|
|
|
9613
9581
|
|
|
9614
9582
|
| Prop | Type | Default | Description |
|
|
9615
9583
|
|---|---|---|---|
|
|
9616
|
-
| `seriesName` *required* | `string` | — | <br>Shown in: [Write the tooltip yourself](
|
|
9584
|
+
| `seriesName` *required* | `string` | — | <br>Shown in: [Write the tooltip yourself](#tooltip), [Choose a hit](#tooltip), [Fix the domain and name the ticks (Axis)](#axis) |
|
|
9617
9585
|
| `color` *required* | `string` | — | |
|
|
9618
9586
|
| `xValue` *required* | `number` | — | The point's x value on its own x axis - with several x axes it can differ from the hit's. |
|
|
9619
|
-
| `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Choose a hit](
|
|
9620
|
-
| `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself](
|
|
9587
|
+
| `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Choose a hit](#tooltip), [Fix the domain and name the ticks (Axis)](#axis) |
|
|
9588
|
+
| `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself](#tooltip) |
|
|
9621
9589
|
| `index` *required* | `number` | — | |
|
|
9622
9590
|
| `level` | `number` | — | Only for the matrix: its level, out of the level channel. It stands here and not in yValue, because yValue is the position on the y axis - for a matrix therefore the row. Putting both into one field would be exactly the overloading [ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md) is written against. |
|
|
9623
9591
|
| `segment` | `{ from: number; to: number; label: string }` | — | Only for state series: the section being pointed at. A duration does not stand here - it is the difference of two numbers the entry already carries, and formatting it would presuppose knowing what the x axis means. The caller knows that, not this library. |
|
|
9624
|
-
| `box` |
|
|
9592
|
+
| `box` | `BoxNumbers`` & Partial<``BoxExtras``` > & { /** As the caller gave them; only where the series has `outliers`. */ outliers?: readonly number[]; } `` | — | Only for a box: its further numbers; yValue is its median. Fields of their own for the reason `level` has one ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
|
|
9625
9593
|
|
|
9626
9594
|
###### `BoxNumbers<V = number>`
|
|
9627
9595
|
|
|
@@ -9653,9 +9621,7 @@ What the colours mean (a key), and a switch for every series: a click hides it a
|
|
|
9653
9621
|
import { Legend, useChart } from "@umriss-ui/charts";
|
|
9654
9622
|
```
|
|
9655
9623
|
|
|
9656
|
-
|
|
9657
|
-
|
|
9658
|
-
The legend toggles by default: every entry of a named series is a button that says whether its series is shown. The hidden series are part of the chart's view, by `name` - no state of yours, and kept like the rest of the view, on [View](#/view). A series without a name cannot be hidden; its entry only explains.
|
|
9624
|
+
The legend toggles by default: every entry of a named series is a button that says whether its series is shown. The hidden series are part of the chart's view, by `name` - no state of yours, and kept like the rest of the view, on [View](#view). A series without a name cannot be hidden; its entry only explains.
|
|
9659
9625
|
|
|
9660
9626
|
A double click, Alt/⌥+click or Shift+Enter on an entry shows only its series; on the only one visible, all again. A click acts at once rather than wait for a second, so a double click first toggles the series and back - its result is the same either way.
|
|
9661
9627
|
|
|
@@ -9899,7 +9865,7 @@ export default function LegendPlacement() {
|
|
|
9899
9865
|
| `Enter Space` | Hide the entry's series, or show it again. |
|
|
9900
9866
|
| `Shift+Enter` | Show only the entry's series; on the only one visible, all again. |
|
|
9901
9867
|
|
|
9902
|
-
The keys of [Chart](
|
|
9868
|
+
The keys of [Chart](#chart-1) apply here.
|
|
9903
9869
|
|
|
9904
9870
|
#### Accessibility
|
|
9905
9871
|
|
|
@@ -9911,7 +9877,7 @@ Every entry of a named series is a button whose `aria-pressed` says whether its
|
|
|
9911
9877
|
|
|
9912
9878
|
| Prop | Type | Default | Description |
|
|
9913
9879
|
|---|---|---|---|
|
|
9914
|
-
| `placement` | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on.<br>Shown in: [Legend above or below](
|
|
9880
|
+
| `placement` | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on.<br>Shown in: [Legend above or below](#legend), [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1) and 28 more |
|
|
9915
9881
|
|
|
9916
9882
|
### Benchmark
|
|
9917
9883
|
|
|
@@ -9921,8 +9887,6 @@ Millions of points, measured in this browser rather than claimed: the time to pr
|
|
|
9921
9887
|
import { useChart } from "@umriss-ui/charts";
|
|
9922
9888
|
```
|
|
9923
9889
|
|
|
9924
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/benchmark/
|
|
9925
|
-
|
|
9926
9890
|
A hover redraws only the overlay layer, so the frame rate stays up over a million points. The figures in `packages/charts/docs/capabilities.md` come from here.
|
|
9927
9891
|
|
|
9928
9892
|
#### Examples
|
|
@@ -10317,105 +10281,105 @@ export default function WeekOfSeconds() {
|
|
|
10317
10281
|
|
|
10318
10282
|
#### Keyboard
|
|
10319
10283
|
|
|
10320
|
-
The keys of [Chart](
|
|
10284
|
+
The keys of [Chart](#chart-1) apply here.
|
|
10321
10285
|
|
|
10322
10286
|
#### Props on this page
|
|
10323
10287
|
|
|
10324
|
-
From `ChartProps` — the full table stands on [Chart](
|
|
10288
|
+
From `ChartProps` — the full table stands on [Chart](#chart-1).
|
|
10325
10289
|
|
|
10326
10290
|
| Prop | Type | Default | Description |
|
|
10327
10291
|
|---|---|---|---|
|
|
10328
|
-
| [`height`](
|
|
10329
|
-
| [`children`](
|
|
10292
|
+
| [`height`](#chart-1) | `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)). |
|
|
10293
|
+
| [`children`](#chart-1) | `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. |
|
|
10330
10294
|
|
|
10331
10295
|
###### Events
|
|
10332
10296
|
|
|
10333
10297
|
| Prop | Type | Default | Description |
|
|
10334
10298
|
|---|---|---|---|
|
|
10335
|
-
| [`onPerf`](
|
|
10299
|
+
| [`onPerf`](#chart-1) | `(perf: `[`ChartPerf`](#chart-1)`) => void` | — | Instrumentation for the benchmark page; not needed otherwise. |
|
|
10336
10300
|
|
|
10337
10301
|
###### Accessibility
|
|
10338
10302
|
|
|
10339
10303
|
| Prop | Type | Default | Description |
|
|
10340
10304
|
|---|---|---|---|
|
|
10341
|
-
| [`ariaLabel`](
|
|
10305
|
+
| [`ariaLabel`](#chart-1) | `string` | — | Required in DEV through a warning. |
|
|
10342
10306
|
|
|
10343
|
-
From `XAxisProps` — the full table stands on [Axis](
|
|
10307
|
+
From `XAxisProps` — the full table stands on [Axis](#axis).
|
|
10344
10308
|
|
|
10345
10309
|
| Prop | Type | Default | Description |
|
|
10346
10310
|
|---|---|---|---|
|
|
10347
|
-
| [`value`](
|
|
10348
|
-
| [`domain`](
|
|
10349
|
-
| [`time`](
|
|
10350
|
-
| [`zoomable`](
|
|
10351
|
-
| [`id`](
|
|
10352
|
-
| [`label`](
|
|
10311
|
+
| [`value`](#axis) *required* | [`AxisField`](#axis)`<T> \| ((d: T, index: number) => `[`AxisValue`](#axis)`)` | — | 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" />`. |
|
|
10312
|
+
| [`domain`](#axis) | `"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. |
|
|
10313
|
+
| [`time`](#axis) | `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. |
|
|
10314
|
+
| [`zoomable`](#axis) | `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. |
|
|
10315
|
+
| [`id`](#axis) | `string` | `"x"` | Axis id, through which series bind themselves. |
|
|
10316
|
+
| [`label`](#axis) | `string` | — | Axis title. |
|
|
10353
10317
|
|
|
10354
|
-
From `YAxisProps` — the full table stands on [Axis](
|
|
10318
|
+
From `YAxisProps` — the full table stands on [Axis](#axis).
|
|
10355
10319
|
|
|
10356
10320
|
| Prop | Type | Default | Description |
|
|
10357
10321
|
|---|---|---|---|
|
|
10358
|
-
| [`domain`](
|
|
10359
|
-
| [`position`](
|
|
10360
|
-
| [`id`](
|
|
10361
|
-
| [`label`](
|
|
10322
|
+
| [`domain`](#axis) | `"nice" \| "data" \| "visible" \| readonly [number, number]` | `"nice"` | As on the x axis, and `"visible"`: what the series show inside their x axis' domain - a zoomed hour gets the hour's range, not the week's -, widened to ticks as `"nice"` is. Where the x domain is not fixed that is every point. |
|
|
10323
|
+
| [`position`](#axis) | `"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. |
|
|
10324
|
+
| [`id`](#axis) | `string` | `"y"` | Axis id, through which series bind themselves. |
|
|
10325
|
+
| [`label`](#axis) | `string` | — | Axis title. |
|
|
10362
10326
|
|
|
10363
|
-
From `LineProps` — the full table stands on [Line](
|
|
10327
|
+
From `LineProps` — the full table stands on [Line](#line).
|
|
10364
10328
|
|
|
10365
10329
|
| Prop | Type | Default | Description |
|
|
10366
10330
|
|---|---|---|---|
|
|
10367
|
-
| [`value`](
|
|
10368
|
-
| [`yAxisId`](
|
|
10369
|
-
| [`name`](
|
|
10331
|
+
| [`value`](#line) *required* | [`Value`](#line)`<T>` | — | Y value - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap. |
|
|
10332
|
+
| [`yAxisId`](#line) | `string` | `"y"` | Binding to a y axis. |
|
|
10333
|
+
| [`name`](#line) | `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. |
|
|
10370
10334
|
|
|
10371
|
-
From `AreaProps` — the full table stands on [Area](
|
|
10335
|
+
From `AreaProps` — the full table stands on [Area](#area).
|
|
10372
10336
|
|
|
10373
10337
|
| Prop | Type | Default | Description |
|
|
10374
10338
|
|---|---|---|---|
|
|
10375
|
-
| [`value`](
|
|
10376
|
-
| [`name`](
|
|
10339
|
+
| [`value`](#area) *required* | [`Value`](#area)`<T>` | — | Upper edge - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap. |
|
|
10340
|
+
| [`name`](#area) | `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. |
|
|
10377
10341
|
|
|
10378
|
-
From `BarProps` — the full table stands on [Bar](
|
|
10342
|
+
From `BarProps` — the full table stands on [Bar](#bar).
|
|
10379
10343
|
|
|
10380
10344
|
| Prop | Type | Default | Description |
|
|
10381
10345
|
|---|---|---|---|
|
|
10382
|
-
| [`value`](
|
|
10383
|
-
| [`name`](
|
|
10346
|
+
| [`value`](#bar) *required* | [`Value`](#bar)`<T>` | — | Height - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap. |
|
|
10347
|
+
| [`name`](#bar) | `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. |
|
|
10384
10348
|
|
|
10385
|
-
From `ScatterProps` — the full table stands on [Scatter](
|
|
10349
|
+
From `ScatterProps` — the full table stands on [Scatter](#scatter).
|
|
10386
10350
|
|
|
10387
10351
|
| Prop | Type | Default | Description |
|
|
10388
10352
|
|---|---|---|---|
|
|
10389
|
-
| [`value`](
|
|
10390
|
-
| [`name`](
|
|
10353
|
+
| [`value`](#scatter) *required* | [`Value`](#scatter)`<T>` | — | Y value - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap. |
|
|
10354
|
+
| [`name`](#scatter) | `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. |
|
|
10391
10355
|
|
|
10392
|
-
From `StateBandProps` — the full table stands on [StateBand](
|
|
10356
|
+
From `StateBandProps` — the full table stands on [StateBand](#stateband).
|
|
10393
10357
|
|
|
10394
10358
|
| Prop | Type | Default | Description |
|
|
10395
10359
|
|---|---|---|---|
|
|
10396
|
-
| [`value`](
|
|
10397
|
-
| [`states`](
|
|
10398
|
-
| [`name`](
|
|
10360
|
+
| [`value`](#stateband) *required* | [`Value`](#stateband)`<T>` | — | Index of the state in `states` - a number field of the row or a function of it; null/undefined/NaN/±Infinity is a gap - and a gap stays a hole, it gets no colour for "unknown". A colour would be a claim about the interval. |
|
|
10361
|
+
| [`states`](#stateband) *required* | `readonly `[`StateEntry`](#stateband)`[]` | — | The closed set of states, in the order of their codes. |
|
|
10362
|
+
| [`name`](#stateband) | `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. |
|
|
10399
10363
|
|
|
10400
|
-
From `MatrixProps` — the full table stands on [Matrix](
|
|
10364
|
+
From `MatrixProps` — the full table stands on [Matrix](#matrix).
|
|
10401
10365
|
|
|
10402
10366
|
| Prop | Type | Default | Description |
|
|
10403
10367
|
|---|---|---|---|
|
|
10404
|
-
| [`value`](
|
|
10405
|
-
| [`level`](
|
|
10406
|
-
| [`name`](
|
|
10368
|
+
| [`value`](#matrix) *required* | [`AxisField`](#matrix)`<T, number \| string \| null \| undefined> \| ((d: T, index: number) => number \| string \| null \| undefined)` | — | The row on the y axis - a field of the data's row or a function of it. A number is a position, as every series' y is; a string is a category: the y axis then has a named row per distinct one, the first at the top, in the order the data bring them or the y axis' `categories` ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). Never an instant: a `Date` is refused. |
|
|
10369
|
+
| [`level`](#matrix) *required* | [`Value`](#matrix)`<T>` | — | The level that decides the colour - a number field of the row or a function of it. A missing level is a hole, not a zero. |
|
|
10370
|
+
| [`name`](#matrix) | `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. |
|
|
10407
10371
|
|
|
10408
|
-
From `TooltipProps` — the full table stands on [Tooltip](
|
|
10372
|
+
From `TooltipProps` — the full table stands on [Tooltip](#tooltip).
|
|
10409
10373
|
|
|
10410
10374
|
| Prop | Type | Default | Description |
|
|
10411
10375
|
|---|---|---|---|
|
|
10412
|
-
| [`mode`](
|
|
10376
|
+
| [`mode`](#tooltip) | `"x" \| "nearest"` | `"x"` | "x": every series at the x position; "nearest": only the nearest point. |
|
|
10413
10377
|
|
|
10414
|
-
From `LegendProps` — the full table stands on [Legend](
|
|
10378
|
+
From `LegendProps` — the full table stands on [Legend](#legend).
|
|
10415
10379
|
|
|
10416
10380
|
| Prop | Type | Default | Description |
|
|
10417
10381
|
|---|---|---|---|
|
|
10418
|
-
| [`placement`](
|
|
10382
|
+
| [`placement`](#legend) | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on. |
|
|
10419
10383
|
|
|
10420
10384
|
## API index
|
|
10421
10385
|
|
|
@@ -10425,15 +10389,13 @@ Every name the package exports, in one place.
|
|
|
10425
10389
|
|
|
10426
10390
|
Everything `@umriss-ui/charts` exports, with its signature. A component's props stand on its own page.
|
|
10427
10391
|
|
|
10428
|
-
Demo page: https://romanhaendler.github.io/umriss-ui/charts/api/
|
|
10429
|
-
|
|
10430
10392
|
#### Components
|
|
10431
10393
|
|
|
10432
10394
|
##### `ControlChart`
|
|
10433
10395
|
|
|
10434
|
-
[ControlChart](
|
|
10396
|
+
[ControlChart](#controlchart) – Centre line, control limits and the rule violations of a process (an SPC or Shewhart chart). Reach for it to see a process drift before it leaves its specification.
|
|
10435
10397
|
|
|
10436
|
-
Used on [Scenarios](
|
|
10398
|
+
Used on [Scenarios](#scenarios) and [ControlChart](#controlchart).
|
|
10437
10399
|
|
|
10438
10400
|
##### `DataTable`
|
|
10439
10401
|
|
|
@@ -10446,32 +10408,32 @@ at once. Place it inside a `Chart`.
|
|
|
10446
10408
|
function DataTable(): ReactNode;
|
|
10447
10409
|
```
|
|
10448
10410
|
|
|
10449
|
-
Used on [Chart](
|
|
10411
|
+
Used on [Chart](#chart-1), [BoxPlot](#boxplot) and [Tooltip](#tooltip).
|
|
10450
10412
|
|
|
10451
10413
|
##### `Legend`
|
|
10452
10414
|
|
|
10453
|
-
[Legend](
|
|
10415
|
+
[Legend](#legend) – What the colours mean (a key), and a switch for every series: a click hides it and shows it again, a double click shows only it (a solo).
|
|
10454
10416
|
|
|
10455
|
-
Used on [Scenarios](
|
|
10417
|
+
Used on [Scenarios](#scenarios), [Chart](#chart-1), [Axis](#axis), [View](#view), [Line](#line), [Area](#area), [Bar](#bar), [Scatter](#scatter), [BoxPlot](#boxplot), [StateBand](#stateband), [LimitLine](#limitline), [Pareto](#pareto), [Tooltip](#tooltip), [Legend](#legend) and [Benchmark](#benchmark).
|
|
10456
10418
|
|
|
10457
10419
|
##### `LimitBand`
|
|
10458
10420
|
|
|
10459
|
-
[LimitLine](
|
|
10421
|
+
[LimitLine](#limitline) – A limit drawn as a band between two values of an axis - a tolerance or a
|
|
10460
10422
|
zone. Otherwise a `LimitLine`.
|
|
10461
10423
|
|
|
10462
|
-
Used on [Scenarios](
|
|
10424
|
+
Used on [Scenarios](#scenarios), [Chart](#chart-1), [LimitLine](#limitline) and [Tooltip](#tooltip).
|
|
10463
10425
|
|
|
10464
10426
|
##### `LimitLine`
|
|
10465
10427
|
|
|
10466
|
-
[LimitLine](
|
|
10428
|
+
[LimitLine](#limitline) – The limits a course is read against (a threshold, a reference line): a line above the series, a band beneath them. Reach for it for objectives, budgets and alert levels.
|
|
10467
10429
|
|
|
10468
|
-
Used on [Scenarios](
|
|
10430
|
+
Used on [Scenarios](#scenarios), [Chart](#chart-1), [Scatter](#scatter), [BoxPlot](#boxplot), [LimitLine](#limitline), [ControlChart](#controlchart), [Pareto](#pareto) and [Tooltip](#tooltip).
|
|
10469
10431
|
|
|
10470
10432
|
##### `Tooltip`
|
|
10471
10433
|
|
|
10472
|
-
[Tooltip](
|
|
10434
|
+
[Tooltip](#tooltip) – What a hover reports (a hover card), and the values as a table for a reader who wants them all at once.
|
|
10473
10435
|
|
|
10474
|
-
Used on [Scenarios](
|
|
10436
|
+
Used on [Scenarios](#scenarios), [Installation](#installation), [Chart](#chart-1), [Axis](#axis), [Zoom and pan](#zoom-and-pan), [View](#view), [Line](#line), [Area](#area), [Bar](#bar), [Scatter](#scatter), [BoxPlot](#boxplot), [StateBand](#stateband), [Matrix](#matrix), [LimitLine](#limitline), [ControlChart](#controlchart), [Pareto](#pareto), [Tooltip](#tooltip), [Legend](#legend) and [Benchmark](#benchmark).
|
|
10475
10437
|
|
|
10476
10438
|
#### Hooks
|
|
10477
10439
|
|
|
@@ -10490,7 +10452,7 @@ the setters that change them.
|
|
|
10490
10452
|
function useChart<Z>(rows: readonly Z[], options?: ChartOptions<Z>): ChartParts<Z>;
|
|
10491
10453
|
```
|
|
10492
10454
|
|
|
10493
|
-
Used on [Scenarios](
|
|
10455
|
+
Used on [Scenarios](#scenarios), [Installation](#installation), [Chart](#chart-1), [Axis](#axis), [Zoom and pan](#zoom-and-pan), [View](#view), [Line](#line), [Area](#area), [Bar](#bar), [Scatter](#scatter), [BoxPlot](#boxplot), [StateBand](#stateband), [Matrix](#matrix), [LimitLine](#limitline), [ControlChart](#controlchart), [Pareto](#pareto), [Tooltip](#tooltip), [Legend](#legend) and [Benchmark](#benchmark).
|
|
10494
10456
|
|
|
10495
10457
|
#### Functions
|
|
10496
10458
|
|
|
@@ -10533,7 +10495,7 @@ function bin(values: readonly (number | null | undefined)[], options?: BinOption
|
|
|
10533
10495
|
function bin<T>(rows: readonly T[], value: (row: T) => number | null | undefined, options?: BinOptions): Bin[];
|
|
10534
10496
|
```
|
|
10535
10497
|
|
|
10536
|
-
Used on [Bar](
|
|
10498
|
+
Used on [Bar](#bar).
|
|
10537
10499
|
|
|
10538
10500
|
##### `breaks`
|
|
10539
10501
|
|
|
@@ -10565,7 +10527,7 @@ chart then draws no line instead of bursting.
|
|
|
10565
10527
|
function controlLimits(values: readonly number[], origin: ControlLimitOrigin): ControlLimits;
|
|
10566
10528
|
```
|
|
10567
10529
|
|
|
10568
|
-
Used on [Scenarios](
|
|
10530
|
+
Used on [Scenarios](#scenarios), [LimitLine](#limitline) and [ControlChart](#controlchart).
|
|
10569
10531
|
|
|
10570
10532
|
##### `invalidateTheme`
|
|
10571
10533
|
|
|
@@ -10604,7 +10566,7 @@ which is the third biggest problem.
|
|
|
10604
10566
|
function pareto(items: readonly ParetoItem[], options?: ParetoSettings): ParetoResult;
|
|
10605
10567
|
```
|
|
10606
10568
|
|
|
10607
|
-
Used on [Pareto](
|
|
10569
|
+
Used on [Pareto](#pareto).
|
|
10608
10570
|
|
|
10609
10571
|
##### `removedIntervals`
|
|
10610
10572
|
|
|
@@ -10634,7 +10596,7 @@ function resolveColours<K extends string>(root: Element, colours: Readonly<Recor
|
|
|
10634
10596
|
Subscribe to theme invalidations - a switch of `color-scheme` on the
|
|
10635
10597
|
document, the system's preference, or `invalidateTheme()`. The scenes of
|
|
10636
10598
|
the charts use it, and so does any canvas that resolved its colours with
|
|
10637
|
-
[`resolveColours`](
|
|
10599
|
+
[`resolveColours`](#api-index-1). Returns the unsubscribe.
|
|
10638
10600
|
|
|
10639
10601
|
```ts
|
|
10640
10602
|
function subscribeTheme(notify: () => void): () => void;
|
|
@@ -10707,7 +10669,7 @@ listed beside the chart as well as marked on it.
|
|
|
10707
10669
|
function violations(values: readonly number[], limits: ControlLimits, options?: Partial<RuleOptions>): Violation[];
|
|
10708
10670
|
```
|
|
10709
10671
|
|
|
10710
|
-
Used on [Scenarios](
|
|
10672
|
+
Used on [Scenarios](#scenarios) and [ControlChart](#controlchart).
|
|
10711
10673
|
|
|
10712
10674
|
##### `workingCalendar`
|
|
10713
10675
|
|
|
@@ -10720,7 +10682,7 @@ unambiguous.
|
|
|
10720
10682
|
function workingCalendar(intervals: readonly WorkingInterval[]): WorkingCalendar;
|
|
10721
10683
|
```
|
|
10722
10684
|
|
|
10723
|
-
Used on [Axis](
|
|
10685
|
+
Used on [Axis](#axis).
|
|
10724
10686
|
|
|
10725
10687
|
##### `workingTimeTicks`
|
|
10726
10688
|
|
|
@@ -10755,7 +10717,7 @@ reader cannot check it against a chart that does not show it.
|
|
|
10755
10717
|
function zones(limits: ControlLimits, multiples?: readonly number[]): Zone[];
|
|
10756
10718
|
```
|
|
10757
10719
|
|
|
10758
|
-
Used on [ControlChart](
|
|
10720
|
+
Used on [ControlChart](#controlchart).
|
|
10759
10721
|
|
|
10760
10722
|
#### Constants
|
|
10761
10723
|
|
|
@@ -10768,7 +10730,7 @@ is an hour longer or shorter.
|
|
|
10768
10730
|
const DAY: number;
|
|
10769
10731
|
```
|
|
10770
10732
|
|
|
10771
|
-
Used on [Scenarios](
|
|
10733
|
+
Used on [Scenarios](#scenarios), [Chart](#chart-1), [Axis](#axis), [Zoom and pan](#zoom-and-pan), [StateBand](#stateband), [Tooltip](#tooltip) and [Benchmark](#benchmark).
|
|
10772
10734
|
|
|
10773
10735
|
##### `DEFAULT_CHARTS_WORDING`
|
|
10774
10736
|
|
|
@@ -10776,7 +10738,7 @@ The instance shipped by default. English; German is
|
|
|
10776
10738
|
`GERMAN_CHARTS_WORDING` in `@umriss-ui/charts/wording/de`. A chart takes
|
|
10777
10739
|
its own through `wording`.
|
|
10778
10740
|
|
|
10779
|
-
Every entry, with its value, stands in the table
|
|
10741
|
+
Every entry, with its value, stands in the table Charts wording on core's Language page.
|
|
10780
10742
|
|
|
10781
10743
|
```ts
|
|
10782
10744
|
const DEFAULT_CHARTS_WORDING: ChartsWording;
|
|
@@ -10792,7 +10754,7 @@ restriction - whoever has a scale of their own names it.
|
|
|
10792
10754
|
const DEFAULT_GRADIENT: readonly string[];
|
|
10793
10755
|
```
|
|
10794
10756
|
|
|
10795
|
-
Used on [Matrix](
|
|
10757
|
+
Used on [Matrix](#matrix).
|
|
10796
10758
|
|
|
10797
10759
|
##### `HOUR`
|
|
10798
10760
|
|
|
@@ -10802,7 +10764,7 @@ One hour in milliseconds.
|
|
|
10802
10764
|
const HOUR: number;
|
|
10803
10765
|
```
|
|
10804
10766
|
|
|
10805
|
-
Used on [Chart](
|
|
10767
|
+
Used on [Chart](#chart-1), [Axis](#axis), [Zoom and pan](#zoom-and-pan), [Area](#area), [BoxPlot](#boxplot), [Tooltip](#tooltip) and [Benchmark](#benchmark).
|
|
10806
10768
|
|
|
10807
10769
|
##### `LinearScale`
|
|
10808
10770
|
|
|
@@ -10831,7 +10793,7 @@ One minute in milliseconds.
|
|
|
10831
10793
|
const MINUTE: number;
|
|
10832
10794
|
```
|
|
10833
10795
|
|
|
10834
|
-
Used on [Scenarios](
|
|
10796
|
+
Used on [Scenarios](#scenarios), [Installation](#installation), [Chart](#chart-1), [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).
|
|
10835
10797
|
|
|
10836
10798
|
##### `SECOND`
|
|
10837
10799
|
|
|
@@ -10845,7 +10807,7 @@ const SECOND = 1000;
|
|
|
10845
10807
|
|
|
10846
10808
|
##### `AreaProps`
|
|
10847
10809
|
|
|
10848
|
-
Its table stands on [Area](
|
|
10810
|
+
Its table stands on [Area](#area).
|
|
10849
10811
|
|
|
10850
10812
|
##### `AreaSeriesConfig<T = unknown>`
|
|
10851
10813
|
|
|
@@ -10854,11 +10816,11 @@ An `Area` as the chart holds it once registered.
|
|
|
10854
10816
|
| Prop | Type | Default | Description |
|
|
10855
10817
|
|---|---|---|---|
|
|
10856
10818
|
| `kind` *required* | `"area"` | — | |
|
|
10857
|
-
| `baseline` |
|
|
10819
|
+
| `baseline` | `ValueFunction``<T>` | — | Lower edge; without a value the fixed baseline 0. |
|
|
10858
10820
|
| `fillOpacity` *required* | `number` | — | Opacity of the fill; the outline stays fully opaque. |
|
|
10859
10821
|
| `strokeWidth` *required* | `number` | — | |
|
|
10860
10822
|
| `dash` | `readonly number[]` | — | Dash pattern of the outline. |
|
|
10861
|
-
| `accessor` *required* |
|
|
10823
|
+
| `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
|
|
10862
10824
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
|
|
10863
10825
|
| `xAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
10864
10826
|
| `yAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
@@ -10875,8 +10837,8 @@ The verdict and what led to it.
|
|
|
10875
10837
|
|
|
10876
10838
|
| Prop | Type | Default | Description |
|
|
10877
10839
|
|---|---|---|---|
|
|
10878
|
-
| `verdict` *required* |
|
|
10879
|
-
| `limit` |
|
|
10840
|
+
| `verdict` *required* | `Verdict`<br>`"ok" \| "unknown" \| "warning" \| "alarm"` | — | |
|
|
10841
|
+
| `limit` | `Limit` | — | The violated limit - the same object the caller passed in, so that it can be recognised against the caller's own data. Absent where none is violated. |
|
|
10880
10842
|
| `excess` | `number` | — | The amount beyond the bound, always positive. Absent where none is violated. |
|
|
10881
10843
|
| `deviation` | `number` | — | The signed distance from the target. Absent where none is set - a missing target yields no deviation of zero. Two fields and not one: excess and deviation are two numbers, and a single field meaning the one thing when a bound is violated and the other otherwise reads well and is wrong at three in the morning. |
|
|
10882
10844
|
|
|
@@ -10887,9 +10849,9 @@ An `XAxis` or `YAxis` as the chart holds it once registered.
|
|
|
10887
10849
|
| Prop | Type | Default | Description |
|
|
10888
10850
|
|---|---|---|---|
|
|
10889
10851
|
| `id` *required* | `string` | — | |
|
|
10890
|
-
| `orientation` *required* |
|
|
10891
|
-
| `position` *required* |
|
|
10892
|
-
| `accessor` | `(d: T, index: number) =>
|
|
10852
|
+
| `orientation` *required* | `AxisOrientation`<br>`"x" \| "y"` | — | |
|
|
10853
|
+
| `position` *required* | `AxisPosition`<br>`"bottom" \| "top" \| "left" \| "right"` | — | |
|
|
10854
|
+
| `accessor` | `(d: T, index: number) => ``AxisValue` | — | Where a row lies along the axis; an x axis' only - along y the series place their rows. A number is a position or an instant, a string a category, a `Date` an instant ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). |
|
|
10893
10855
|
| `label` | `string` | — | |
|
|
10894
10856
|
| `tickCount` | `number` | — | |
|
|
10895
10857
|
| `tickFormat` | `(v: number) => string` | — | |
|
|
@@ -10899,10 +10861,10 @@ An `XAxis` or `YAxis` as the chart holds it once registered.
|
|
|
10899
10861
|
| `categories` | `readonly string[]` | — | The categories of the axis, in their order: the list is the order and the extent, and makes the axis a category axis ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). |
|
|
10900
10862
|
| `categoryLabel` | `(category: string) => string` | — | What is written for a category, wherever it is written. |
|
|
10901
10863
|
| `time` | `boolean` | — | The values are instants - milliseconds, and where this is said ISO 8601 strings as well: ticks on local boundaries, labels by level. A calendar implies it, and so do rows that bring a `Date` ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). |
|
|
10902
|
-
| `calendar` | `readonly
|
|
10864
|
+
| `calendar` | `readonly ``WorkingInterval``[]` | — | Working calendar: the intervals in which time counts. With it, materialisation maps wall clock time onto working time before the scale calculates - the scale stays affine ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)). |
|
|
10903
10865
|
| `alignTicks` | `boolean` | — | y axes only: this axis' ticks on the first y axis' grid. |
|
|
10904
10866
|
| `zoomable` | `boolean` | — | x axes only: wheel, drag, pinch, double click and the zoom keys move the span the chart's view holds for this axis ([ADR-0047](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0047-a-component-holds-its-own-view.md)). |
|
|
10905
|
-
| `zoomLimits` |
|
|
10867
|
+
| `zoomLimits` | `ZoomLimits` | at most the data's extent, at least three data steps | x axes only: the narrowest and the widest span zoom may reach. |
|
|
10906
10868
|
|
|
10907
10869
|
##### `AxisField<T, V = AxisValue>`
|
|
10908
10870
|
|
|
@@ -10958,7 +10920,7 @@ type AxisValue = number | string | Date | null | undefined;
|
|
|
10958
10920
|
|
|
10959
10921
|
##### `BarProps`
|
|
10960
10922
|
|
|
10961
|
-
Its table stands on [Bar](
|
|
10923
|
+
Its table stands on [Bar](#bar).
|
|
10962
10924
|
|
|
10963
10925
|
##### `BarSeriesConfig<T = unknown>`
|
|
10964
10926
|
|
|
@@ -10968,7 +10930,7 @@ A `Bar` as the chart holds it once registered.
|
|
|
10968
10930
|
|---|---|---|---|
|
|
10969
10931
|
| `kind` *required* | `"bar"` | — | |
|
|
10970
10932
|
| `barWidth` *required* | `number` | — | Width as a fraction of the step; the group shares this fraction. |
|
|
10971
|
-
| `accessor` *required* |
|
|
10933
|
+
| `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
|
|
10972
10934
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
|
|
10973
10935
|
| `xAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
10974
10936
|
| `yAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
@@ -10996,7 +10958,7 @@ The settings of `bin`.
|
|
|
10996
10958
|
|
|
10997
10959
|
| Prop | Type | Default | Description |
|
|
10998
10960
|
|---|---|---|---|
|
|
10999
|
-
| `width` | `number` | — | The width of a bin. Wins over `count`. Without a `domain` the edges are multiples of it.<br>Shown in: [Count readings into a histogram (Bar)](
|
|
10961
|
+
| `width` | `number` | — | The width of a bin. Wins over `count`. Without a `domain` the edges are multiples of it.<br>Shown in: [Count readings into a histogram (Bar)](#bar) |
|
|
11000
10962
|
| `count` | `number` | `10` | About how many bins: the width becomes the next 1-2-5 step, so the number comes out near it and not exactly - with a `domain`, exactly. |
|
|
11001
10963
|
| `domain` | `readonly [number, number]` | — | The span the bins cover, the first edge on its start and the last on its end. Values outside it are left out, not clamped into the end bins. |
|
|
11002
10964
|
|
|
@@ -11042,7 +11004,7 @@ A box's further numbers beside its median, by name.
|
|
|
11042
11004
|
|
|
11043
11005
|
##### `BoxPlotProps`
|
|
11044
11006
|
|
|
11045
|
-
Its table stands on [BoxPlot](
|
|
11007
|
+
Its table stands on [BoxPlot](#boxplot).
|
|
11046
11008
|
|
|
11047
11009
|
##### `BoxSeriesConfig<T = unknown>`
|
|
11048
11010
|
|
|
@@ -11053,17 +11015,17 @@ chose - the library draws them and computes none.
|
|
|
11053
11015
|
| Prop | Type | Default | Description |
|
|
11054
11016
|
|---|---|---|---|
|
|
11055
11017
|
| `kind` *required* | `"box"` | — | |
|
|
11056
|
-
| `lowerQuartile` *required* |
|
|
11057
|
-
| `upperQuartile` *required* |
|
|
11058
|
-
| `lowerWhisker` *required* |
|
|
11059
|
-
| `upperWhisker` *required* |
|
|
11060
|
-
| `outliers` |
|
|
11061
|
-
| `mean` |
|
|
11062
|
-
| `notchLower` |
|
|
11063
|
-
| `notchUpper` |
|
|
11064
|
-
| `count` |
|
|
11018
|
+
| `lowerQuartile` *required* | `ValueFunction``<T>` | — | |
|
|
11019
|
+
| `upperQuartile` *required* | `ValueFunction``<T>` | — | |
|
|
11020
|
+
| `lowerWhisker` *required* | `ValueFunction``<T>` | — | |
|
|
11021
|
+
| `upperWhisker` *required* | `ValueFunction``<T>` | — | |
|
|
11022
|
+
| `outliers` | `ListFunction``<T>` | — | The values beyond the whiskers, per box ([ADR-0040](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0040-a-box-carries-its-outliers.md)). |
|
|
11023
|
+
| `mean` | `ValueFunction``<T>` | — | |
|
|
11024
|
+
| `notchLower` | `ValueFunction``<T>` | — | Both bounds or neither (CONTEXT.md: Notch). |
|
|
11025
|
+
| `notchUpper` | `ValueFunction``<T>` | — | |
|
|
11026
|
+
| `count` | `ValueFunction``<T>` | — | How many values stand behind the box; no y value. |
|
|
11065
11027
|
| `boxWidth` *required* | `number` | — | Width as a fraction of the step; boxes and bars on one x axis share it. |
|
|
11066
|
-
| `accessor` *required* |
|
|
11028
|
+
| `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
|
|
11067
11029
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
|
|
11068
11030
|
| `xAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
11069
11031
|
| `yAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
@@ -11083,7 +11045,7 @@ type CalendarInput = WorkingCalendar | readonly WorkingInterval[];
|
|
|
11083
11045
|
|
|
11084
11046
|
##### `ChartOptions`
|
|
11085
11047
|
|
|
11086
|
-
Its table stands on [Zoom and pan](
|
|
11048
|
+
Its table stands on [Zoom and pan](#zoom-and-pan).
|
|
11087
11049
|
|
|
11088
11050
|
##### `ChartParts<Z>`
|
|
11089
11051
|
|
|
@@ -11093,26 +11055,26 @@ is typed by that `data` instead.
|
|
|
11093
11055
|
|
|
11094
11056
|
| Prop | Type | Default | Description |
|
|
11095
11057
|
|---|---|---|---|
|
|
11096
|
-
| `Chart` *required* | `(props: `[`ChartProps`](
|
|
11097
|
-
| `XAxis` *required* | `<T = Z>(props: `[`XAxisProps`](
|
|
11098
|
-
| `YAxis` *required* | `(props: `[`YAxisProps`](
|
|
11099
|
-
| `Line` *required* | `<T = Z>(props: `[`LineProps`](
|
|
11100
|
-
| `Area` *required* | `<T = Z>(props: `[`AreaProps`](
|
|
11101
|
-
| `Bar` *required* | `<T = Z>(props: `[`BarProps`](
|
|
11102
|
-
| `Scatter` *required* | `<T = Z>(props: `[`ScatterProps`](
|
|
11103
|
-
| `StateBand` *required* | `<T = Z>(props: `[`StateBandProps`](
|
|
11104
|
-
| `Matrix` *required* | `<T = Z>(props: `[`MatrixProps`](
|
|
11105
|
-
| `BoxPlot` *required* | `<T = Z>(props: `[`BoxPlotProps`](
|
|
11106
|
-
| `view` *required* | [`ChartView`](
|
|
11107
|
-
| `domains` *required* |
|
|
11108
|
-
| `setView` *required* | `(view: `[`ChartView`](
|
|
11109
|
-
| `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.<br>Shown in: [Measure a million points (Benchmark)](
|
|
11058
|
+
| `Chart` *required* | `(props: `[`ChartProps`](#chart-1)`) => 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), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 74 more |
|
|
11059
|
+
| `XAxis` *required* | `<T = Z>(props: `[`XAxisProps`](#axis)`<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), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 74 more |
|
|
11060
|
+
| `YAxis` *required* | `(props: `[`YAxisProps`](#axis)`) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#installation), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 74 more |
|
|
11061
|
+
| `Line` *required* | `<T = Z>(props: `[`LineProps`](#line)`<T>) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#installation), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 47 more |
|
|
11062
|
+
| `Area` *required* | `<T = Z>(props: `[`AreaProps`](#area)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1), [Bind every kind of series to a second axis (Axis)](#axis) and 5 more |
|
|
11063
|
+
| `Bar` *required* | `<T = Z>(props: `[`BarProps`](#bar)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1), [Bind every kind of series to a second axis (Axis)](#axis) and 13 more |
|
|
11064
|
+
| `Scatter` *required* | `<T = Z>(props: `[`ScatterProps`](#scatter)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1), [Bind every kind of series to a second axis (Axis)](#axis) and 3 more |
|
|
11065
|
+
| `StateBand` *required* | `<T = Z>(props: `[`StateBandProps`](#stateband)`<T> & ``OneLane``) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#chart-1), [One vehicle through the day (StateBand)](#stateband), [Lay a state under a course (StateBand)](#stateband) and 4 more |
|
|
11066
|
+
| `Matrix` *required* | `<T = Z>(props: `[`MatrixProps`](#matrix)`<T>) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#chart-1), [Colour cells by their limits (Matrix)](#matrix), [Colour cells along a gradient (Matrix)](#matrix) and 1 more |
|
|
11067
|
+
| `BoxPlot` *required* | `<T = Z>(props: `[`BoxPlotProps`](#boxplot)`<T>) => null` | — | <br>Shown in: [One box per service (BoxPlot)](#boxplot), [A box per hour on a time axis (BoxPlot)](#boxplot), [With outliers (BoxPlot)](#boxplot) and 4 more |
|
|
11068
|
+
| `view` *required* | [`ChartView`](#view) | — | How the reader is looking at the chart.<br>Shown in: [Keep and restore a view (View)](#view) |
|
|
11069
|
+
| `domains` *required* | `AxisSpans` | — | The span each zoomable x axis shows, by axis `id`; an axis absent shows its own `domain`. |
|
|
11070
|
+
| `setView` *required* | `(view: `[`ChartView`](#view)`) => 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-1), [Keep charts in step (Zoom and pan)](#zoom-and-pan), [Keep and restore a view (View)](#view) |
|
|
11071
|
+
| `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.<br>Shown in: [Measure a million points (Benchmark)](#benchmark) |
|
|
11110
11072
|
| `hidden` *required* | `readonly string[]` | — | The hidden series, by `name`. |
|
|
11111
11073
|
| `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. |
|
|
11112
|
-
| `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)](
|
|
11113
|
-
| `showAllSeries` *required* | `() => void` | — | Shows every series again.<br>Shown in: [Hide a series from the legend (Legend)](
|
|
11074
|
+
| `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) |
|
|
11075
|
+
| `showAllSeries` *required* | `() => void` | — | Shows every series again.<br>Shown in: [Hide a series from the legend (Legend)](#legend) |
|
|
11114
11076
|
|
|
11115
|
-
Used on [Chart](
|
|
11077
|
+
Used on [Chart](#chart-1).
|
|
11116
11078
|
|
|
11117
11079
|
##### `ChartPerf`
|
|
11118
11080
|
|
|
@@ -11120,15 +11082,15 @@ Measurements of the instrumentation for the benchmark page.
|
|
|
11120
11082
|
|
|
11121
11083
|
| Prop | Type | Default | Description |
|
|
11122
11084
|
|---|---|---|---|
|
|
11123
|
-
| `materializeMs` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](
|
|
11124
|
-
| `seriesDrawMs` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](
|
|
11125
|
-
| `points` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](
|
|
11085
|
+
| `materializeMs` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](#benchmark) |
|
|
11086
|
+
| `seriesDrawMs` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](#benchmark), [Draw a week of seconds (Benchmark)](#benchmark) |
|
|
11087
|
+
| `points` *required* | `number` | — | <br>Shown in: [Measure a million points (Benchmark)](#benchmark) |
|
|
11126
11088
|
|
|
11127
|
-
Used on [Benchmark](
|
|
11089
|
+
Used on [Benchmark](#benchmark).
|
|
11128
11090
|
|
|
11129
11091
|
##### `ChartProps`
|
|
11130
11092
|
|
|
11131
|
-
Its table stands on [Chart](
|
|
11093
|
+
Its table stands on [Chart](#chart-1).
|
|
11132
11094
|
|
|
11133
11095
|
##### `ChartsWording`
|
|
11134
11096
|
|
|
@@ -11171,13 +11133,13 @@ Everything the charts put out as text.
|
|
|
11171
11133
|
|
|
11172
11134
|
##### `ChartView`
|
|
11173
11135
|
|
|
11174
|
-
Its table stands on [View](
|
|
11136
|
+
Its table stands on [View](#view).
|
|
11175
11137
|
|
|
11176
|
-
Used on [Zoom and pan](
|
|
11138
|
+
Used on [Zoom and pan](#zoom-and-pan) and [View](#view).
|
|
11177
11139
|
|
|
11178
11140
|
##### `ControlChartProps`
|
|
11179
11141
|
|
|
11180
|
-
Its table stands on [ControlChart](
|
|
11142
|
+
Its table stands on [ControlChart](#controlchart).
|
|
11181
11143
|
|
|
11182
11144
|
##### `ControlLimitOrigin`
|
|
11183
11145
|
|
|
@@ -11198,10 +11160,10 @@ Centre line, estimated spread and the control limits at three sigma.
|
|
|
11198
11160
|
|
|
11199
11161
|
| Prop | Type | Default | Description |
|
|
11200
11162
|
|---|---|---|---|
|
|
11201
|
-
| `center` *required* | `number` | — | <br>Shown in: [Set specification and control limits side by side (LimitLine)](
|
|
11163
|
+
| `center` *required* | `number` | — | <br>Shown in: [Set specification and control limits side by side (LimitLine)](#limitline) |
|
|
11202
11164
|
| `sigma` *required* | `number` | — | Estimated spread of a single value, not the distance to the limit. |
|
|
11203
|
-
| `upper` *required* | `number` | — | <br>Shown in: [Set specification and control limits side by side (LimitLine)](
|
|
11204
|
-
| `lower` *required* | `number` | — | <br>Shown in: [Set specification and control limits side by side (LimitLine)](
|
|
11165
|
+
| `upper` *required* | `number` | — | <br>Shown in: [Set specification and control limits side by side (LimitLine)](#limitline) |
|
|
11166
|
+
| `lower` *required* | `number` | — | <br>Shown in: [Set specification and control limits side by side (LimitLine)](#limitline) |
|
|
11205
11167
|
|
|
11206
11168
|
##### `DataTableGroup`
|
|
11207
11169
|
|
|
@@ -11225,7 +11187,7 @@ A `Legend` as the chart holds it once registered.
|
|
|
11225
11187
|
|
|
11226
11188
|
##### `LegendProps`
|
|
11227
11189
|
|
|
11228
|
-
Its table stands on [Legend](
|
|
11190
|
+
Its table stands on [Legend](#legend).
|
|
11229
11191
|
|
|
11230
11192
|
##### `Limit`
|
|
11231
11193
|
|
|
@@ -11236,9 +11198,9 @@ free of a `null` on the other edge.
|
|
|
11236
11198
|
|
|
11237
11199
|
| Prop | Type | Default | Description |
|
|
11238
11200
|
|---|---|---|---|
|
|
11239
|
-
| `value` *required* | `number` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](
|
|
11240
|
-
| `side` *required* |
|
|
11241
|
-
| `severity` *required* |
|
|
11201
|
+
| `value` *required* | `number` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#chart-1), [Colour cells by their limits (Matrix)](#matrix) |
|
|
11202
|
+
| `side` *required* | `Side`<br>`"upper" \| "lower"` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#chart-1), [Colour cells by their limits (Matrix)](#matrix) |
|
|
11203
|
+
| `severity` *required* | `Severity`<br>`"warning" \| "alarm"` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#chart-1), [Colour cells by their limits (Matrix)](#matrix) |
|
|
11242
11204
|
|
|
11243
11205
|
##### `LimitBandConfig`
|
|
11244
11206
|
|
|
@@ -11251,8 +11213,8 @@ to `to`.
|
|
|
11251
11213
|
| `from` *required* | `number` | — | |
|
|
11252
11214
|
| `to` *required* | `number` | — | |
|
|
11253
11215
|
| `axisId` | `string` | — | Axis on which the value lies; without one, the first axis of its orientation. From `LimitBase`. |
|
|
11254
|
-
| `orientation` *required* |
|
|
11255
|
-
| `severity` *required* |
|
|
11216
|
+
| `orientation` *required* | `AxisOrientation`<br>`"x" \| "y"` | — | From `LimitBase`. |
|
|
11217
|
+
| `severity` *required* | `Severity`<br>`"warning" \| "alarm"` | — | From `LimitBase`. |
|
|
11256
11218
|
| `label` | `string` | — | From `LimitBase`. |
|
|
11257
11219
|
| `color` | `string` | — | A colour of its own; without one, that of the role or of the severity out of the theme. From `LimitBase`. |
|
|
11258
11220
|
| `inExtent` *required* | `boolean` | — | Pulls the extent of the axis along. Default true: an excluded limit yields a chart that looks right and does not show its most important line - and that nobody notices. A squashed plot is noticed at once. From `LimitBase`. |
|
|
@@ -11261,11 +11223,11 @@ to `to`.
|
|
|
11261
11223
|
|
|
11262
11224
|
| Prop | Type | Default | Description |
|
|
11263
11225
|
|---|---|---|---|
|
|
11264
|
-
| `role` *required* |
|
|
11226
|
+
| `role` *required* | `LimitRole`<br>`"specification" \| "control" \| "zone"` | — | From `LimitBase`. |
|
|
11265
11227
|
|
|
11266
11228
|
##### `LimitBandProps`
|
|
11267
11229
|
|
|
11268
|
-
Its table stands on [LimitLine](
|
|
11230
|
+
Its table stands on [LimitLine](#limitline).
|
|
11269
11231
|
|
|
11270
11232
|
##### `LimitConfig`
|
|
11271
11233
|
|
|
@@ -11284,8 +11246,8 @@ A `LimitLine` as the chart holds it once registered.
|
|
|
11284
11246
|
| `kind` *required* | `"line"` | — | |
|
|
11285
11247
|
| `value` *required* | `number` | — | |
|
|
11286
11248
|
| `axisId` | `string` | — | Axis on which the value lies; without one, the first axis of its orientation. From `LimitBase`. |
|
|
11287
|
-
| `orientation` *required* |
|
|
11288
|
-
| `severity` *required* |
|
|
11249
|
+
| `orientation` *required* | `AxisOrientation`<br>`"x" \| "y"` | — | From `LimitBase`. |
|
|
11250
|
+
| `severity` *required* | `Severity`<br>`"warning" \| "alarm"` | — | From `LimitBase`. |
|
|
11289
11251
|
| `label` | `string` | — | From `LimitBase`. |
|
|
11290
11252
|
| `color` | `string` | — | A colour of its own; without one, that of the role or of the severity out of the theme. From `LimitBase`. |
|
|
11291
11253
|
| `inExtent` *required* | `boolean` | — | Pulls the extent of the axis along. Default true: an excluded limit yields a chart that looks right and does not show its most important line - and that nobody notices. A squashed plot is noticed at once. From `LimitBase`. |
|
|
@@ -11294,11 +11256,11 @@ A `LimitLine` as the chart holds it once registered.
|
|
|
11294
11256
|
|
|
11295
11257
|
| Prop | Type | Default | Description |
|
|
11296
11258
|
|---|---|---|---|
|
|
11297
|
-
| `role` *required* |
|
|
11259
|
+
| `role` *required* | `LimitRole`<br>`"specification" \| "control" \| "zone"` | — | From `LimitBase`. |
|
|
11298
11260
|
|
|
11299
11261
|
##### `LimitLineProps`
|
|
11300
11262
|
|
|
11301
|
-
Its table stands on [LimitLine](
|
|
11263
|
+
Its table stands on [LimitLine](#limitline).
|
|
11302
11264
|
|
|
11303
11265
|
##### `LimitRole`
|
|
11304
11266
|
|
|
@@ -11324,14 +11286,14 @@ target.
|
|
|
11324
11286
|
|
|
11325
11287
|
| Prop | Type | Default | Description |
|
|
11326
11288
|
|---|---|---|---|
|
|
11327
|
-
| `limits` | `readonly
|
|
11289
|
+
| `limits` | `readonly ``Limit``[]` | — | In any order; none, one or several.<br>Shown in: [Mark bands, limits and cells (Chart)](#chart-1), [Colour cells by their limits (Matrix)](#matrix) |
|
|
11328
11290
|
| `target` | `number` | — | |
|
|
11329
11291
|
|
|
11330
|
-
Used on [Scenarios](
|
|
11292
|
+
Used on [Scenarios](#scenarios).
|
|
11331
11293
|
|
|
11332
11294
|
##### `LineProps`
|
|
11333
11295
|
|
|
11334
|
-
Its table stands on [Line](
|
|
11296
|
+
Its table stands on [Line](#line).
|
|
11335
11297
|
|
|
11336
11298
|
##### `LineSeriesConfig<T = unknown>`
|
|
11337
11299
|
|
|
@@ -11344,7 +11306,7 @@ A `Line` as the chart holds it once registered.
|
|
|
11344
11306
|
| `dash` | `readonly number[]` | — | |
|
|
11345
11307
|
| `markers` *required* | `"auto" \| "always" \| "never"` | — | |
|
|
11346
11308
|
| `step` | `boolean` | — | Sample-and-hold: each value holds until the next sample. |
|
|
11347
|
-
| `accessor` *required* |
|
|
11309
|
+
| `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
|
|
11348
11310
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
|
|
11349
11311
|
| `xAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
11350
11312
|
| `yAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
@@ -11394,7 +11356,7 @@ Gaps (null/undefined/NaN/±Infinity out of the accessor) are encoded as NaN.
|
|
|
11394
11356
|
| `y` *required* | `Float64Array` | — | |
|
|
11395
11357
|
| `y0` *required* | `Float64Array \| null` | — | Lower edge, where the baseline is an accessor of its own; otherwise null. A fixed baseline needs no channel - it is a number. |
|
|
11396
11358
|
| `w` *required* | `Float64Array \| null` | — | Level channel: the third value per point, which today only the matrix needs. Named rather than overloading y0 - a property that only some kinds carry does not belong in the shared type with a comment ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). null for every kind that does not use it. |
|
|
11397
|
-
| `box` *required* |
|
|
11359
|
+
| `box` *required* | `BoxChannels`` \| null` | — | A box's further numbers beside its median in y; null for every other kind ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
|
|
11398
11360
|
| `length` *required* | `number` | — | |
|
|
11399
11361
|
|
|
11400
11362
|
##### `MatrixColoring`
|
|
@@ -11421,7 +11383,7 @@ type MatrixColoring =
|
|
|
11421
11383
|
|
|
11422
11384
|
##### `MatrixProps`
|
|
11423
11385
|
|
|
11424
|
-
Its table stands on [Matrix](
|
|
11386
|
+
Its table stands on [Matrix](#matrix).
|
|
11425
11387
|
|
|
11426
11388
|
##### `MatrixSeriesConfig<T = unknown>`
|
|
11427
11389
|
|
|
@@ -11433,9 +11395,9 @@ series kind whose base accessor reads more than a number.
|
|
|
11433
11395
|
| Prop | Type | Default | Description |
|
|
11434
11396
|
|---|---|---|---|
|
|
11435
11397
|
| `kind` *required* | `"matrix"` | — | |
|
|
11436
|
-
| `level` *required* |
|
|
11437
|
-
| `coloring` *required* |
|
|
11438
|
-
| `accessor` *required* |
|
|
11398
|
+
| `level` *required* | `ValueFunction``<T>` | — | The level that decides the colour - the third channel ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). The base accessor yields the row position, not this level. |
|
|
11399
|
+
| `coloring` *required* | `MatrixColoring` | — | |
|
|
11400
|
+
| `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
|
|
11439
11401
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
|
|
11440
11402
|
| `xAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
11441
11403
|
| `yAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
@@ -11472,10 +11434,10 @@ Space in CSS pixels on each side of a rectangle.
|
|
|
11472
11434
|
|
|
11473
11435
|
| Prop | Type | Default | Description |
|
|
11474
11436
|
|---|---|---|---|
|
|
11475
|
-
| `top` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
11476
|
-
| `right` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
11477
|
-
| `bottom` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
11478
|
-
| `left` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
11437
|
+
| `top` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
|
|
11438
|
+
| `right` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
|
|
11439
|
+
| `bottom` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
|
|
11440
|
+
| `left` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
|
|
11479
11441
|
|
|
11480
11442
|
##### `ParetoEntry`
|
|
11481
11443
|
|
|
@@ -11487,7 +11449,7 @@ An item, the way it is drawn.
|
|
|
11487
11449
|
| `value` *required* | `number` | — | |
|
|
11488
11450
|
| `index` *required* | `number` | — | The entry's rank from 0, in the order drawn - its place on an x axis that reads `name`, and an x value for one that reads numbers. |
|
|
11489
11451
|
| `share` *required* | `number` | — | Share of the total, 0…1. |
|
|
11490
|
-
| `cumulative` *required* | `number` | — | Cumulative share up to and including this entry, 0…1. Exactly 1 at the last entry.<br>Shown in: [Sort causes and collect the tail (Pareto)](
|
|
11452
|
+
| `cumulative` *required* | `number` | — | Cumulative share up to and including this entry, 0…1. Exactly 1 at the last entry.<br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto) |
|
|
11491
11453
|
| `remainder` *required* | `boolean` | — | The collected tail. Exactly one entry can be this, and it always stands last. |
|
|
11492
11454
|
|
|
11493
11455
|
##### `ParetoItem`
|
|
@@ -11516,7 +11478,7 @@ where the cutoff is crossed.
|
|
|
11516
11478
|
|
|
11517
11479
|
| Prop | Type | Default | Description |
|
|
11518
11480
|
|---|---|---|---|
|
|
11519
|
-
| `entries` *required* | `readonly
|
|
11481
|
+
| `entries` *required* | `readonly ``ParetoEntry``[]` | — | <br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto) |
|
|
11520
11482
|
| `total` *required* | `number` | — | Total of the drawn entries - after collecting, the same as before. |
|
|
11521
11483
|
| `cutoffIndex` *required* | `number` | — | Index of the first entry whose cumulative share reaches the cutoff; -1 when it is never reached. |
|
|
11522
11484
|
|
|
@@ -11580,7 +11542,7 @@ Name of a rule, the way it is switched on and off in `violations`.
|
|
|
11580
11542
|
type RuleName = "outlier" | "run" | "trend" | "twoOfThree";
|
|
11581
11543
|
```
|
|
11582
11544
|
|
|
11583
|
-
Used on [Scenarios](
|
|
11545
|
+
Used on [Scenarios](#scenarios) and [ControlChart](#controlchart).
|
|
11584
11546
|
|
|
11585
11547
|
##### `RuleOptions`
|
|
11586
11548
|
|
|
@@ -11621,7 +11583,7 @@ interface Scale {
|
|
|
11621
11583
|
|
|
11622
11584
|
##### `ScatterProps`
|
|
11623
11585
|
|
|
11624
|
-
Its table stands on [Scatter](
|
|
11586
|
+
Its table stands on [Scatter](#scatter).
|
|
11625
11587
|
|
|
11626
11588
|
##### `ScatterSeriesConfig<T = unknown>`
|
|
11627
11589
|
|
|
@@ -11631,7 +11593,7 @@ A `Scatter` as the chart holds it once registered.
|
|
|
11631
11593
|
|---|---|---|---|
|
|
11632
11594
|
| `kind` *required* | `"scatter"` | — | |
|
|
11633
11595
|
| `radius` *required* | `number` | — | Point radius in CSS pixels. |
|
|
11634
|
-
| `accessor` *required* |
|
|
11596
|
+
| `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
|
|
11635
11597
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
|
|
11636
11598
|
| `xAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
11637
11599
|
| `yAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
@@ -11647,7 +11609,7 @@ which axes it stands on, and how it is named and coloured.
|
|
|
11647
11609
|
|
|
11648
11610
|
| Prop | Type | Default | Description |
|
|
11649
11611
|
|---|---|---|---|
|
|
11650
|
-
| `accessor` *required* |
|
|
11612
|
+
| `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. |
|
|
11651
11613
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data. |
|
|
11652
11614
|
| `xAxisId` *required* | `string` | — | |
|
|
11653
11615
|
| `yAxisId` *required* | `string` | — | |
|
|
@@ -11701,7 +11663,7 @@ type Side = "upper" | "lower";
|
|
|
11701
11663
|
|
|
11702
11664
|
##### `StateBandProps`
|
|
11703
11665
|
|
|
11704
|
-
Its table stands on [StateBand](
|
|
11666
|
+
Its table stands on [StateBand](#stateband).
|
|
11705
11667
|
|
|
11706
11668
|
##### `StateEntry`
|
|
11707
11669
|
|
|
@@ -11720,11 +11682,11 @@ an index into `states`.
|
|
|
11720
11682
|
| Prop | Type | Default | Description |
|
|
11721
11683
|
|---|---|---|---|
|
|
11722
11684
|
| `kind` *required* | `"state"` | — | |
|
|
11723
|
-
| `states` *required* | `readonly
|
|
11685
|
+
| `states` *required* | `readonly ``StateEntry``[]` | — | The closed set of states. The accessor yields the index into it - a number, not a key ([ADR-0007](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0007-a-state-is-a-number.md)). |
|
|
11724
11686
|
| `lane` | `string` | — | The lane by its name: a category of the y axis, whose place the band takes ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). |
|
|
11725
11687
|
| `laneFrom` | `number` | — | Lower edge of the lane in domain units of the y axis; without a value the beginning of the axis domain. |
|
|
11726
11688
|
| `laneTo` | `number` | — | Upper edge of the lane; without a value the end of the axis domain. |
|
|
11727
|
-
| `accessor` *required* |
|
|
11689
|
+
| `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
|
|
11728
11690
|
| `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
|
|
11729
11691
|
| `xAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
11730
11692
|
| `yAxisId` *required* | `string` | — | From `SeriesBase`. |
|
|
@@ -11741,7 +11703,7 @@ A `Tooltip` as the chart holds it once registered.
|
|
|
11741
11703
|
|---|---|---|---|
|
|
11742
11704
|
| `mode` *required* | `"x" \| "nearest"` | — | |
|
|
11743
11705
|
| `limits` | `boolean` | — | |
|
|
11744
|
-
| `render` | `(hit:
|
|
11706
|
+
| `render` | `(hit: ``TooltipHit``<T>) => ReactNode` | — | |
|
|
11745
11707
|
|
|
11746
11708
|
##### `TooltipHit<T = unknown>`
|
|
11747
11709
|
|
|
@@ -11750,12 +11712,12 @@ A custom tooltip's `render` receives it.
|
|
|
11750
11712
|
|
|
11751
11713
|
| Prop | Type | Default | Description |
|
|
11752
11714
|
|---|---|---|---|
|
|
11753
|
-
| `xValue` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
11754
|
-
| `points` *required* | `readonly
|
|
11715
|
+
| `xValue` *required* | `number` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Write the tooltip yourself (Tooltip)](#tooltip), [Choose a hit (Tooltip)](#tooltip) |
|
|
11716
|
+
| `points` *required* | `readonly ``TooltipPoint``<T>[]` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Write the tooltip yourself (Tooltip)](#tooltip), [Choose a hit (Tooltip)](#tooltip) |
|
|
11755
11717
|
| `xPx` *required* | `number` | — | Pixel position of the crosshair (snapped to the data point). |
|
|
11756
11718
|
| `yPx` *required* | `number` | — | Pixel position of the primary hit. |
|
|
11757
11719
|
|
|
11758
|
-
Used on [Axis](
|
|
11720
|
+
Used on [Axis](#axis) and [Tooltip](#tooltip).
|
|
11759
11721
|
|
|
11760
11722
|
##### `TooltipPoint<T = unknown>`
|
|
11761
11723
|
|
|
@@ -11763,19 +11725,19 @@ One hit per series in the tooltip.
|
|
|
11763
11725
|
|
|
11764
11726
|
| Prop | Type | Default | Description |
|
|
11765
11727
|
|---|---|---|---|
|
|
11766
|
-
| `seriesName` *required* | `string` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
11728
|
+
| `seriesName` *required* | `string` | — | <br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Write the tooltip yourself (Tooltip)](#tooltip), [Choose a hit (Tooltip)](#tooltip) |
|
|
11767
11729
|
| `color` *required* | `string` | — | |
|
|
11768
11730
|
| `xValue` *required* | `number` | — | The point's x value on its own x axis - with several x axes it can differ from the hit's. |
|
|
11769
|
-
| `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Fix the domain and name the ticks (Axis)](
|
|
11770
|
-
| `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself (Tooltip)](
|
|
11731
|
+
| `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Choose a hit (Tooltip)](#tooltip) |
|
|
11732
|
+
| `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself (Tooltip)](#tooltip) |
|
|
11771
11733
|
| `index` *required* | `number` | — | |
|
|
11772
11734
|
| `level` | `number` | — | Only for the matrix: its level, out of the level channel. It stands here and not in yValue, because yValue is the position on the y axis - for a matrix therefore the row. Putting both into one field would be exactly the overloading [ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md) is written against. |
|
|
11773
11735
|
| `segment` | `{ from: number; to: number; label: string }` | — | Only for state series: the section being pointed at. A duration does not stand here - it is the difference of two numbers the entry already carries, and formatting it would presuppose knowing what the x axis means. The caller knows that, not this library. |
|
|
11774
|
-
| `box` |
|
|
11736
|
+
| `box` | `BoxNumbers`` & Partial<``BoxExtras``` > & { /** As the caller gave them; only where the series has `outliers`. */ outliers?: readonly number[]; } `` | — | Only for a box: its further numbers; yValue is its median. Fields of their own for the reason `level` has one ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
|
|
11775
11737
|
|
|
11776
11738
|
##### `TooltipProps`
|
|
11777
11739
|
|
|
11778
|
-
Its table stands on [Tooltip](
|
|
11740
|
+
Its table stands on [Tooltip](#tooltip).
|
|
11779
11741
|
|
|
11780
11742
|
##### `Value<T>`
|
|
11781
11743
|
|
|
@@ -11817,10 +11779,10 @@ A rule and the indices it violates.
|
|
|
11817
11779
|
|
|
11818
11780
|
| Prop | Type | Default | Description |
|
|
11819
11781
|
|---|---|---|---|
|
|
11820
|
-
| `rule` *required* |
|
|
11821
|
-
| `indices` *required* | `readonly number[]` | — | <br>Shown in: [List the rule violations (ControlChart)](
|
|
11782
|
+
| `rule` *required* | `RuleName`<br>`"outlier" \| "run" \| "trend" \| "twoOfThree"` | — | <br>Shown in: [List the rule violations (ControlChart)](#controlchart), [Choose the rules (ControlChart)](#controlchart), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
11783
|
+
| `indices` *required* | `readonly number[]` | — | <br>Shown in: [List the rule violations (ControlChart)](#controlchart), [Choose the rules (ControlChart)](#controlchart), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
|
|
11822
11784
|
|
|
11823
|
-
Used on [ControlChart](
|
|
11785
|
+
Used on [ControlChart](#controlchart).
|
|
11824
11786
|
|
|
11825
11787
|
##### `WorkingCalendar`
|
|
11826
11788
|
|
|
@@ -11834,7 +11796,7 @@ thing about the frame.
|
|
|
11834
11796
|
|
|
11835
11797
|
| Prop | Type | Default | Description |
|
|
11836
11798
|
|---|---|---|---|
|
|
11837
|
-
| `intervals` *required* | `readonly
|
|
11799
|
+
| `intervals` *required* | `readonly ``WorkingInterval``[]` | — | |
|
|
11838
11800
|
| `offsets` *required* | `readonly number[]` | — | Working time accumulated before the respective interval begins. |
|
|
11839
11801
|
| `total` *required* | `number` | — | The whole working time - the axis' extent is [0, total]. |
|
|
11840
11802
|
|
|
@@ -11859,11 +11821,11 @@ A tick: where it stands on the clock and where it lies on the axis.
|
|
|
11859
11821
|
|
|
11860
11822
|
##### `XAxisProps`
|
|
11861
11823
|
|
|
11862
|
-
Its table stands on [Axis](
|
|
11824
|
+
Its table stands on [Axis](#axis).
|
|
11863
11825
|
|
|
11864
11826
|
##### `YAxisProps`
|
|
11865
11827
|
|
|
11866
|
-
Its table stands on [Axis](
|
|
11828
|
+
Its table stands on [Axis](#axis).
|
|
11867
11829
|
|
|
11868
11830
|
##### `Zone`
|
|
11869
11831
|
|
|
@@ -11875,7 +11837,7 @@ A zone line: k times sigma above and below the centre line.
|
|
|
11875
11837
|
| `upper` *required* | `number` | — | |
|
|
11876
11838
|
| `lower` *required* | `number` | — | |
|
|
11877
11839
|
|
|
11878
|
-
Used on [Scenarios](
|
|
11840
|
+
Used on [Scenarios](#scenarios), [Axis](#axis), [LimitLine](#limitline) and [ControlChart](#controlchart).
|
|
11879
11841
|
|
|
11880
11842
|
##### `ZoomLimits`
|
|
11881
11843
|
|
|
@@ -11884,10 +11846,10 @@ schedule's shape.
|
|
|
11884
11846
|
|
|
11885
11847
|
| Prop | Type | Default | Description |
|
|
11886
11848
|
|---|---|---|---|
|
|
11887
|
-
| `min` *required* | `number` | — | <br>Shown in: [Limit the zoom (Zoom and pan)](
|
|
11888
|
-
| `max` *required* | `number` | — | <br>Shown in: [Limit the zoom (Zoom and pan)](
|
|
11849
|
+
| `min` *required* | `number` | — | <br>Shown in: [Limit the zoom (Zoom and pan)](#zoom-and-pan) |
|
|
11850
|
+
| `max` *required* | `number` | — | <br>Shown in: [Limit the zoom (Zoom and pan)](#zoom-and-pan) |
|
|
11889
11851
|
|
|
11890
|
-
Used on [Zoom and pan](
|
|
11852
|
+
Used on [Zoom and pan](#zoom-and-pan).
|
|
11891
11853
|
|
|
11892
11854
|
#### @umriss-ui/charts/wording/de
|
|
11893
11855
|
|
|
@@ -11896,10 +11858,10 @@ Used on [Zoom and pan](#/zoom-and-pan).
|
|
|
11896
11858
|
The German instance, for a chart's `wording`. Complete, because it is
|
|
11897
11859
|
typed `ChartsWording`.
|
|
11898
11860
|
|
|
11899
|
-
Every entry, with its value, stands in the table
|
|
11861
|
+
Every entry, with its value, stands in the table Charts wording on core's Language page.
|
|
11900
11862
|
|
|
11901
11863
|
```ts
|
|
11902
11864
|
const GERMAN_CHARTS_WORDING: ChartsWording;
|
|
11903
11865
|
```
|
|
11904
11866
|
|
|
11905
|
-
Used on [Installation](
|
|
11867
|
+
Used on [Installation](#installation) and [Chart](#chart-1).
|