@umriss-ui/charts 0.10.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +122 -0
  2. package/README.md +22 -6
  3. package/dist/charts.css +1 -1
  4. package/dist/charts.js +2781 -2515
  5. package/dist/de.d.ts +8 -0
  6. package/dist/index.d.ts +245 -173
  7. package/dist/wording/de.js +11 -8
  8. package/docs/llms-full.md +2380 -1535
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -29,6 +29,128 @@ interface was still expected to move before `0.3.0`.
29
29
 
30
30
  ---
31
31
 
32
+ ## 0.11.0 – A chart bound to its rows, with a view of its own (Oct. 2026)
33
+
34
+ Two efforts in one break, released together with `@umriss-ui/table` and
35
+ `@umriss-ui/schedule`. A chart is declared through `useChart(rows)`, as a
36
+ table is through `useTable`, and every series and axis reads its rows through
37
+ `value` - a field name the compiler checks, or a function (ADR-0048). And the
38
+ chart holds its own **view**: the span each zoomable x axis shows and the
39
+ hidden series, taken as a start and reported whole (ADR-0047) - zoom, the
40
+ legend's toggle and a way back cost a caller no state of its own any more. The
41
+ old shape is removed, not deprecated; the table below says what stands in
42
+ each place.
43
+
44
+ ### Changed
45
+
46
+ **Moving over.** Every export and prop that went, and what stands in its
47
+ place:
48
+
49
+ | Was | Is |
50
+ |---|---|
51
+ | `import { Chart } from "@umriss-ui/charts"`, `<Chart data={rows}>` | `const { Chart } = useChart(rows)`, `<Chart>` without `data` - one `Chart` per `useChart`, a second chart is a second call |
52
+ | `import { XAxis, YAxis }` | `const { XAxis, YAxis } = useChart(rows)` |
53
+ | `import { Line, Area, Bar, Scatter, StateBand, Matrix, BoxPlot }` | the same names from `useChart(rows)`; a series with its own `data` is still one, typed by that `data` |
54
+ | `ChartProps<T>`, `ChartProps.data` | `ChartProps`, without a type parameter and without `data` |
55
+ | `accessor={(d: Row) => d.a}` on `Line`, `Area`, `Bar`, `Scatter`, `StateBand` | `value="a"` - a field name of the row, or a function where a field does not suffice; required |
56
+ | `XAxis accessor` | `XAxis value`; an axis over series that bring their own `data` names their row: `<XAxis<Row> value="t" />` |
57
+ | `YAxis accessor`, `YAxisProps<T>` | nothing - along y the series place their rows; `YAxisProps` has no type parameter |
58
+ | `Matrix accessor` (the row) | `Matrix value`, as the y position on every kind |
59
+ | `Matrix value` (the colour) | `Matrix level`; `MatrixSeriesConfig.value` is `MatrixSeriesConfig.level` |
60
+ | `TooltipPoint.value` of a matrix cell (its colour) | `TooltipPoint.level`; `yValue` stays the cell's row |
61
+ | `ControlChart accessor` | `ControlChart value`, a field name or a function |
62
+ | `hidden` on every series kind, `SeriesBase.hidden` | the view's `hidden`, by the series' `name`: `initialView: { hidden: ["…"] }`, or `toggleSeries`, `showOnly`, `showAllSeries` from `useChart` |
63
+ | `Legend onToggle` | nothing - the legend toggles by itself; the change arrives in `onViewChange` |
64
+ | `XAxis onDomainChange` | `XAxis zoomable`; the span arrives in `onViewChange` as `view.domains[axisId]` - a lone x axis is `"x"` |
65
+ | a zoomed `XAxis domain` handed back (controlled) | `initialView: { domains: { x: span } }` or `setDomain("x", span)`; `domain` stays the axis' configuration and is a zoomable axis' start |
66
+ | clamping the proposed domain in the handler | `XAxis zoomLimits={{ min, max }}`; without it at most the data's extent or the axis' own `domain`, whichever is wider, at least three data steps; a span equal to the axis' own domain is no part of the view |
67
+ | `AxisConfig.onDomainChange` | `AxisConfig.zoomable`, `AxisConfig.zoomLimits` |
68
+ | the type `Accessor<T>`, `ListAccessor<T>` | `ValueFunction<T>`, `ListFunction<T>` - the function form of `Value<T>` and `ListValue<T>`, same shape |
69
+
70
+ - **`Chart`, the axes and the series kinds are no exports of their own.**
71
+ `useChart(rows)` hands them out, typed at the row; their props stay public
72
+ types. `Tooltip`, `Legend`, `DataTable`, `LimitLine` and `LimitBand` read no
73
+ row and are imported as before. A `Chart` taken from one `useChart` and
74
+ drawn twice at once warns in DEV: it holds the view, and two charts are two
75
+ calls.
76
+ - **`value` replaces `accessor` everywhere**, and is required on every series
77
+ kind and on `XAxis`. A field name is checked by the compiler against the
78
+ row's number fields; it is compared by its name, so a switched name
79
+ redraws. A function is compared by its source text, as `accessor` was (see
80
+ `docs/capabilities.md`, "Known limits"). The named channels - `baseline`,
81
+ the box's five numbers, `mean`, `count`, the notch, `outliers` (a list
82
+ field) - take a field name as well.
83
+ - **The legend toggles by default.** Every entry of a named series is a
84
+ button with `aria-pressed`; a click hides or shows the series at once, a
85
+ state's entry every band showing it. A series without a `name` cannot be
86
+ hidden and its entry stays text. A legend that should not toggle has no
87
+ switch; a caller who kept the legend static by leaving out `onToggle` now
88
+ gets the buttons.
89
+ - **A zoom is the chart's own.** Wheel, pinch, drag and the keys move the
90
+ span on an `XAxis zoomable` at once, within `zoomLimits`; nothing is
91
+ proposed to the caller any more. The double click and the key `0` go back
92
+ to the axis' own `domain` - before, they proposed the whole data range. A
93
+ pan keeps its width and is not clamped; a view handed in or set is taken as
94
+ given.
95
+ - **`ChartsWording` has three more keys**: `legendHelp`, `allShown` and
96
+ `showAll`. A complete wording object of one's own needs them; a
97
+ `Partial<ChartsWording>` handed to `Chart wording` does not. `zoomHelp`
98
+ says what `0` does now: "0 goes back to the axis' own span." / "0 kehrt
99
+ zum eigenen Bereich der Achse zurück."
100
+
101
+ ### Added
102
+
103
+ - **`useChart(rows, { initialView, onViewChange })`** - the chart and its
104
+ parts over the rows, each keeping its identity over the renders, with the
105
+ chart's view and its setters: `view`, `domains`, `setDomain(axisId, span |
106
+ null)` (`null` = the axis' own `domain`), `hidden`, `toggleSeries(name)`,
107
+ `showOnly(name)`, `showAllSeries()`.
108
+ - `initialView` is the view to start from, and to go to whenever one
109
+ differing in content from the last one handed in arrives; the same view
110
+ again changes nothing, and what it leaves out is reset. Axis ids and
111
+ series names the chart does not carry fall out. **A known limit:** a view
112
+ handed in that equals one the chart reported less than a second ago, and
113
+ that has not come back yet, is taken for the chart's own report coming
114
+ back late and is not applied - so that two charts in step do not jump back
115
+ mid-pan. An application that restores a just-reported view within that
116
+ second sees no change.
117
+ - `onViewChange(view)` hears every change of the view once, always the
118
+ whole view, a pan or zoom at most once per frame; not the view the chart
119
+ starts with. Charts keep in step by handing each other what they report;
120
+ `syncId` keeps sharing the pointer only.
121
+ - **`XAxis zoomable` and `zoomLimits: { min, max }`** - zoom and pan by Ctrl/⌘
122
+ + wheel, pinch, drag, a horizontal or Shift wheel and, with the focus on the
123
+ chart, + − Shift+←/→ and 0; without `zoomable` nothing zooms and the plain
124
+ wheel stays the page's.
125
+ - **'Show all'**: once a zoomable x axis shows a span of its own, a quiet
126
+ button over the plot area's corner (top right; bottom right under a legend
127
+ or the data key above) brings every zoomed axis back, reported once, and
128
+ goes. A tab stop of its own after the plot's, handing the focus to the plot
129
+ as it goes; its label is the wording's `showAll` ("Show all" / "Alles
130
+ zeigen"); `--uc-*` tokens only, kept under forced colours, no transition
131
+ under reduced motion.
132
+ - **The legend's gestures**: a double click, Alt/⌥+click or Shift+Enter on
133
+ an entry shows only that series (a state's entry: its bands), and on the
134
+ only one visible shows all again. Whatever would hide every series shows
135
+ all instead, and the polite live region says so (`allShown`); the plot's
136
+ summary names Shift+Enter (`legendHelp`). A view handed in is taken as
137
+ given and may hide every series.
138
+ - **Types**: `ChartParts`, `ChartOptions`, `ChartView`, `AxisSpans`,
139
+ `ZoomLimits`, and the forms a value takes - `Value`, `NumberField`,
140
+ `ListValue`, `ListField`.
141
+ - **`Echoes`** - the rule that tells a view reported and handed back late
142
+ from one handed in, which `@umriss-ui/schedule` takes from here (ADR-0022)
143
+ instead of a copy of its own.
144
+ - **The demo** has the pages 'Zoom and pan', 'Legend' (split from 'Tooltip &
145
+ Legend', which is 'Tooltip' now) and 'View' (a view kept across a reload
146
+ and restored), all in the rubric Chart. The zoom and legend examples moved
147
+ there; their old anchors - `/axis/#zoom-and-pan`, `/axis/#visible-domain`,
148
+ `/chart/#cursor-sync`, `/tooltip/#toggling-legend`,
149
+ `/tooltip/#legend-placement` - land on them. Every example declares its
150
+ chart through `useChart` and `value`.
151
+
152
+ ---
153
+
32
154
  ## 0.10.0 – Every export explained, and a limit's colour at its label (Oct. 2026)
33
155
 
34
156
  The package explains itself where it is used: every export carries a comment,
package/README.md CHANGED
@@ -23,7 +23,7 @@ does so because it chose to, not because this one required it (ADR-0020).
23
23
  ## The smallest chart that runs
24
24
 
25
25
  ```tsx
26
- import { Chart, Line, XAxis, YAxis, Tooltip } from "@umriss-ui/charts";
26
+ import { Tooltip, useChart } from "@umriss-ui/charts";
27
27
 
28
28
  interface Point {
29
29
  t: number;
@@ -38,17 +38,26 @@ const DATA: Point[] = [
38
38
  ];
39
39
 
40
40
  export function Course() {
41
+ const { Chart, XAxis, YAxis, Line } = useChart(DATA);
41
42
  return (
42
- <Chart data={DATA} height={280} ariaLabel="Course of one series">
43
- <XAxis accessor={(d: Point) => d.t} label="Index" />
44
- <YAxis accessor={(d: Point) => d.a} />
45
- <Line accessor={(d: Point) => d.a} name="Series A" />
43
+ <Chart height={280} ariaLabel="Course of one series">
44
+ <XAxis value="t" label="Index" />
45
+ <YAxis />
46
+ <Line value="a" name="Series A" />
46
47
  <Tooltip />
47
48
  </Chart>
48
49
  );
49
50
  }
50
51
  ```
51
52
 
53
+ `useChart(rows)` binds the chart to its rows, as `useTable` binds a table: it
54
+ hands back `Chart`, the axes and every series kind, typed at the row, so that
55
+ `value` is a field name the compiler checks - or a function where a field does
56
+ not suffice. A series with its own `data` is typed by that data instead, and
57
+ an x axis that reads such rows names their type: `<XAxis<Row> value="t" />`.
58
+ A y axis reads no value: its series place the rows along y. `Tooltip`, `Legend`, `DataTable`, `LimitLine` and `LimitBand` read no row and
59
+ are imported as they are (ADR-0048).
60
+
52
61
  A series is an element, not an entry in a configuration object: the order in the
53
62
  JSX decides what lies over what, and at the same time the palette colour.
54
63
 
@@ -63,7 +72,7 @@ words are English; German comes from its own subpath:
63
72
  ```tsx
64
73
  import { GERMAN_CHARTS_WORDING } from "@umriss-ui/charts/wording/de";
65
74
 
66
- <Chart data={DATA} ariaLabel="Verlauf" wording={GERMAN_CHARTS_WORDING}>…</Chart>
75
+ <Chart ariaLabel="Verlauf" wording={GERMAN_CHARTS_WORDING}>…</Chart>
67
76
  ```
68
77
 
69
78
  ## Styles
@@ -90,6 +99,13 @@ loaded: Geist when the application has it, the system fonts otherwise.
90
99
  double bookings — is `@umriss-ui/schedule`'s (ADR-0026).
91
100
  * **Several axes per orientation**, each with its own extent; only the first
92
101
  registered axis per orientation draws a grid.
102
+ * **The chart holds its own view** (ADR-0047): an `XAxis zoomable` zooms and
103
+ pans by wheel, pinch, drag and keys within its `zoomLimits`, and a 'Show
104
+ all' button brings the whole back; the legend hides and shows a series on a
105
+ click and shows only it on a double click. `useChart(rows, { initialView,
106
+ onViewChange })` takes a start and reports every change, always the whole
107
+ view - charts in step hand each other theirs; `setDomain`, `toggleSeries`,
108
+ `showOnly` and `showAllSeries` stand on what the hook hands back.
93
109
  * **The instruments**: `LimitLine` and `LimitBand`, `ControlChart` with its four
94
110
  rule violations, `pareto()` with a collected remainder, and a working-time
95
111
  axis that takes the empty hours out and marks every removed span.
package/dist/charts.css CHANGED
@@ -1 +1 @@
1
- @layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.uc-root,.uc-root:before,.uc-root:after{box-sizing:border-box}.uc-plot,.uc-plot:before,.uc-plot:after{box-sizing:border-box}.uc-sr,.uc-sr:before,.uc-sr:after{box-sizing:border-box}.uc-axes,.uc-axes:before,.uc-axes:after{box-sizing:border-box}.uc-axis,.uc-axis:before,.uc-axis:after{box-sizing:border-box}.uc-axis-line,.uc-axis-line:before,.uc-axis-line:after{box-sizing:border-box}.uc-axis-y,.uc-axis-y:before,.uc-axis-y:after{box-sizing:border-box}.uc-axis-left,.uc-axis-left:before,.uc-axis-left:after{box-sizing:border-box}.uc-axis-right,.uc-axis-right:before,.uc-axis-right:after{box-sizing:border-box}.uc-axis-x,.uc-axis-x:before,.uc-axis-x:after{box-sizing:border-box}.uc-axis-bottom,.uc-axis-bottom:before,.uc-axis-bottom:after{box-sizing:border-box}.uc-axis-top,.uc-axis-top:before,.uc-axis-top:after{box-sizing:border-box}.uc-tick,.uc-tick:before,.uc-tick:after{box-sizing:border-box}.uc-tick-mark,.uc-tick-mark:before,.uc-tick-mark:after{box-sizing:border-box}.uc-tick-label,.uc-tick-label:before,.uc-tick-label:after{box-sizing:border-box}.uc-axis-title,.uc-axis-title:before,.uc-axis-title:after{box-sizing:border-box}.uc-empty,.uc-empty:before,.uc-empty:after{box-sizing:border-box}.uc-legend,.uc-legend:before,.uc-legend:after{box-sizing:border-box}.uc-legend-top,.uc-legend-top:before,.uc-legend-top:after{box-sizing:border-box}.uc-legend-bottom,.uc-legend-bottom:before,.uc-legend-bottom:after{box-sizing:border-box}.uc-legend-item,.uc-legend-item:before,.uc-legend-item:after{box-sizing:border-box}.uc-legend-chip,.uc-legend-chip:before,.uc-legend-chip:after{box-sizing:border-box}.uc-legend-mark,.uc-legend-mark:before,.uc-legend-mark:after{box-sizing:border-box}.uc-data-key,.uc-data-key:before,.uc-data-key:after{box-sizing:border-box}.uc-data-panel,.uc-data-panel:before,.uc-data-panel:after{box-sizing:border-box}.uc-data-table,.uc-data-table:before,.uc-data-table:after{box-sizing:border-box}.uc-tooltip,.uc-tooltip:before,.uc-tooltip:after{box-sizing:border-box}.uc-tooltip-head,.uc-tooltip-head:before,.uc-tooltip-head:after{box-sizing:border-box}.uc-tooltip-list,.uc-tooltip-list:before,.uc-tooltip-list:after{box-sizing:border-box}.uc-tooltip-row,.uc-tooltip-row:before,.uc-tooltip-row:after{box-sizing:border-box}.uc-tooltip-chip,.uc-tooltip-chip:before,.uc-tooltip-chip:after{box-sizing:border-box}.uc-tooltip-name,.uc-tooltip-name:before,.uc-tooltip-name:after{box-sizing:border-box}.uc-tooltip-total,.uc-tooltip-total:before,.uc-tooltip-total:after{box-sizing:border-box}.uc-tooltip-part,.uc-tooltip-part:before,.uc-tooltip-part:after{box-sizing:border-box}.uc-tooltip-x,.uc-tooltip-x:before,.uc-tooltip-x:after{box-sizing:border-box}.uc-tooltip-value,.uc-tooltip-value:before,.uc-tooltip-value:after{box-sizing:border-box}.uc-measure,.uc-measure:before,.uc-measure:after{box-sizing:border-box}.uc-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-limit-mark,.uc-limit-mark:before,.uc-limit-mark:after{box-sizing:border-box}.uc-break,.uc-break:before,.uc-break:after{box-sizing:border-box}.uc-root{--uc-color-axis: var(--u-edge-color-strong, rgba(23, 23, 23, .17));--uc-color-grid: var(--u-hairline, rgba(23, 23, 23, .06));--uc-color-text: var(--u-color-text-muted, #71717a);--uc-color-bg: var(--u-color-surface, #ffffff);--uc-font: var( --u-font-sans, "Geist Sans", "Geist", -apple-system, "Segoe UI", system-ui, sans-serif );--uc-font-mono: var( --u-font-mono, "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace );--uc-color-warning: var(--u-color-warning, #8a5c00);--uc-color-alarm: var(--u-color-danger, #b13636);--uc-color-ok: var(--u-color-success, #217a4b);--uc-series-1: var(--u-chart-1, #2563eb);--uc-series-2: var(--u-chart-2, #db2777);--uc-series-3: var(--u-chart-3, #059669);--uc-series-4: var(--u-chart-4, #d97706);--uc-series-5: var(--u-chart-5, #7c3aed);--uc-series-6: var(--u-chart-6, #0891b2);--uc-size-tick: 11.5px;--uc-size-title: 12px;--uc-size-legend: 12.5px;--uc-size-tooltip: 12px;--uc-leading-label: 1.25;--uc-leading-text: 1.35;--uc-radius: 6px;--uc-radius-chip: 2px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);--uc-focus-ring: var(--u-focus-ring, 0 0 0 2px #0e7d72);--uc-color-hover: var(--u-color-surface-sunken, #f4f4f5);--uc-color-pressed: var(--u-color-surface-pressed, #e9e9eb);--uc-transition-state: var(--u-transition, .12s cubic-bezier(.22, 1, .36, 1));--uc-transition: 80ms var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));position:relative;display:flex;flex-direction:column;font-family:var(--uc-font);color:var(--uc-color-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.uc-plot{position:relative;flex:1 1 auto;min-height:0;min-width:0}.uc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.uc-plot:focus{outline:none}.uc-plot:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-plot>canvas{box-sizing:border-box}.uc-plot>canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;pointer-events:none}.uc-axes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item{transition:none}}.uc-measure{position:absolute;top:0;left:0;right:auto;bottom:auto;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone],.uc-limit-label[data-own]{color:var(--uc-color-text)}.uc-limit-mark{display:inline-block;width:10px;margin-right:4px;vertical-align:middle;border-top:2px dashed currentColor}.uc-limit-label[data-role=control]>.uc-limit-mark{border-top-style:solid}.uc-limit-label[data-role=zone]>.uc-limit-mark{border-top-style:dotted}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break:before,.uc-break:after{content:"";position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break:before{left:1px}.uc-break:after{left:4px}}
1
+ @layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.uc-root,.uc-root:before,.uc-root:after{box-sizing:border-box}.uc-plot,.uc-plot:before,.uc-plot:after{box-sizing:border-box}.uc-sr,.uc-sr:before,.uc-sr:after{box-sizing:border-box}.uc-axes,.uc-axes:before,.uc-axes:after{box-sizing:border-box}.uc-axis,.uc-axis:before,.uc-axis:after{box-sizing:border-box}.uc-axis-line,.uc-axis-line:before,.uc-axis-line:after{box-sizing:border-box}.uc-axis-y,.uc-axis-y:before,.uc-axis-y:after{box-sizing:border-box}.uc-axis-left,.uc-axis-left:before,.uc-axis-left:after{box-sizing:border-box}.uc-axis-right,.uc-axis-right:before,.uc-axis-right:after{box-sizing:border-box}.uc-axis-x,.uc-axis-x:before,.uc-axis-x:after{box-sizing:border-box}.uc-axis-bottom,.uc-axis-bottom:before,.uc-axis-bottom:after{box-sizing:border-box}.uc-axis-top,.uc-axis-top:before,.uc-axis-top:after{box-sizing:border-box}.uc-tick,.uc-tick:before,.uc-tick:after{box-sizing:border-box}.uc-tick-mark,.uc-tick-mark:before,.uc-tick-mark:after{box-sizing:border-box}.uc-tick-label,.uc-tick-label:before,.uc-tick-label:after{box-sizing:border-box}.uc-axis-title,.uc-axis-title:before,.uc-axis-title:after{box-sizing:border-box}.uc-empty,.uc-empty:before,.uc-empty:after{box-sizing:border-box}.uc-legend,.uc-legend:before,.uc-legend:after{box-sizing:border-box}.uc-legend-top,.uc-legend-top:before,.uc-legend-top:after{box-sizing:border-box}.uc-legend-bottom,.uc-legend-bottom:before,.uc-legend-bottom:after{box-sizing:border-box}.uc-legend-item,.uc-legend-item:before,.uc-legend-item:after{box-sizing:border-box}.uc-legend-chip,.uc-legend-chip:before,.uc-legend-chip:after{box-sizing:border-box}.uc-legend-mark,.uc-legend-mark:before,.uc-legend-mark:after{box-sizing:border-box}.uc-show-all,.uc-show-all:before,.uc-show-all:after{box-sizing:border-box}.uc-show-all-bottom,.uc-show-all-bottom:before,.uc-show-all-bottom:after{box-sizing:border-box}.uc-data-key,.uc-data-key:before,.uc-data-key:after{box-sizing:border-box}.uc-data-panel,.uc-data-panel:before,.uc-data-panel:after{box-sizing:border-box}.uc-data-table,.uc-data-table:before,.uc-data-table:after{box-sizing:border-box}.uc-tooltip,.uc-tooltip:before,.uc-tooltip:after{box-sizing:border-box}.uc-tooltip-head,.uc-tooltip-head:before,.uc-tooltip-head:after{box-sizing:border-box}.uc-tooltip-list,.uc-tooltip-list:before,.uc-tooltip-list:after{box-sizing:border-box}.uc-tooltip-row,.uc-tooltip-row:before,.uc-tooltip-row:after{box-sizing:border-box}.uc-tooltip-chip,.uc-tooltip-chip:before,.uc-tooltip-chip:after{box-sizing:border-box}.uc-tooltip-name,.uc-tooltip-name:before,.uc-tooltip-name:after{box-sizing:border-box}.uc-tooltip-total,.uc-tooltip-total:before,.uc-tooltip-total:after{box-sizing:border-box}.uc-tooltip-part,.uc-tooltip-part:before,.uc-tooltip-part:after{box-sizing:border-box}.uc-tooltip-x,.uc-tooltip-x:before,.uc-tooltip-x:after{box-sizing:border-box}.uc-tooltip-value,.uc-tooltip-value:before,.uc-tooltip-value:after{box-sizing:border-box}.uc-measure,.uc-measure:before,.uc-measure:after{box-sizing:border-box}.uc-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-limit-mark,.uc-limit-mark:before,.uc-limit-mark:after{box-sizing:border-box}.uc-break,.uc-break:before,.uc-break:after{box-sizing:border-box}.uc-root{--uc-color-axis: var(--u-edge-color-strong, rgba(23, 23, 23, .17));--uc-color-grid: var(--u-hairline, rgba(23, 23, 23, .06));--uc-color-text: var(--u-color-text-muted, #71717a);--uc-color-bg: var(--u-color-surface, #ffffff);--uc-font: var( --u-font-sans, "Geist Sans", "Geist", -apple-system, "Segoe UI", system-ui, sans-serif );--uc-font-mono: var( --u-font-mono, "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace );--uc-color-warning: var(--u-color-warning, #8a5c00);--uc-color-alarm: var(--u-color-danger, #b13636);--uc-color-ok: var(--u-color-success, #217a4b);--uc-series-1: var(--u-chart-1, #2563eb);--uc-series-2: var(--u-chart-2, #db2777);--uc-series-3: var(--u-chart-3, #059669);--uc-series-4: var(--u-chart-4, #d97706);--uc-series-5: var(--u-chart-5, #7c3aed);--uc-series-6: var(--u-chart-6, #0891b2);--uc-size-tick: 11.5px;--uc-size-title: 12px;--uc-size-legend: 12.5px;--uc-size-tooltip: 12px;--uc-leading-label: 1.25;--uc-leading-text: 1.35;--uc-radius: 6px;--uc-radius-chip: 2px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);--uc-focus-ring: var(--u-focus-ring, 0 0 0 2px #0e7d72);--uc-color-hover: var(--u-color-surface-sunken, #f4f4f5);--uc-color-pressed: var(--u-color-surface-pressed, #e9e9eb);--uc-transition-state: var(--u-transition, .12s cubic-bezier(.22, 1, .36, 1));--uc-transition: 80ms var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));position:relative;display:flex;flex-direction:column;font-family:var(--uc-font);color:var(--uc-color-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.uc-plot{position:relative;flex:1 1 auto;min-height:0;min-width:0}.uc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.uc-plot:focus{outline:none}.uc-plot:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-plot>canvas{box-sizing:border-box}.uc-plot>canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;pointer-events:none}.uc-axes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-show-all{position:absolute;top:0;left:0;z-index:1;translate:calc(-100% - 6px) 6px;padding:2px 8px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);font:inherit;font-size:var(--uc-size-tick);line-height:var(--uc-leading-text);color:var(--uc-color-text);white-space:nowrap;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}.uc-show-all-bottom{translate:calc(-100% - 6px) calc(-100% - 6px)}.uc-show-all:hover{background:var(--uc-color-hover)}.uc-show-all:active{background:var(--uc-color-pressed)}.uc-show-all:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot,.uc-root:has(>.uc-data-panel)>.uc-show-all{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item,.uc-show-all{transition:none}}.uc-measure{position:absolute;top:0;left:0;right:auto;bottom:auto;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone],.uc-limit-label[data-own]{color:var(--uc-color-text)}.uc-limit-mark{display:inline-block;width:10px;margin-right:4px;vertical-align:middle;border-top:2px dashed currentColor}.uc-limit-label[data-role=control]>.uc-limit-mark{border-top-style:solid}.uc-limit-label[data-role=zone]>.uc-limit-mark{border-top-style:dotted}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break:before,.uc-break:after{content:"";position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break:before{left:1px}.uc-break:after{left:4px}}