@umriss-ui/charts 0.41.1 → 0.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -5
- package/README.md +86 -6
- package/dist/charts.css +1 -1
- package/dist/charts.js +1612 -1580
- package/dist/index.d.ts +42 -21
- package/docs/llms-full.md +458 -163
- package/package.json +6 -4
package/CHANGELOG.md
CHANGED
|
@@ -4,11 +4,12 @@ This document describes what changes for **callers** of the package: exports,
|
|
|
4
4
|
props, behaviour.
|
|
5
5
|
|
|
6
6
|
**The numbers.** The middle digit rises when something is added; the last one
|
|
7
|
-
when something is repaired.
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
when something is repaired. The six packages are released in step, and a rename
|
|
8
|
+
keeps its old name for one further minor, with a warning, before the minor after
|
|
9
|
+
it removes the name ([the upgrade promise, ADR-0066](../../docs/adr/0066-one-number-peers-over-the-minor-a-rename-lives-one-minor.md)).
|
|
10
|
+
**Whatever changes existing behaviour stands under a heading "Changed" of its
|
|
11
|
+
own**, no matter which digit rose, with a `Migration:` line. Whoever reads only
|
|
12
|
+
one section before an upgrade reads that one.
|
|
12
13
|
|
|
13
14
|
From 0.34.0 the packages share one number - five, and six from 0.40.0, when the dashboard joined: they are released together, and a package without a change of its own still gets a heading for it.
|
|
14
15
|
|
|
@@ -29,12 +30,40 @@ interface was still expected to move before `0.3.0`.
|
|
|
29
30
|
|
|
30
31
|
---
|
|
31
32
|
|
|
33
|
+
## 0.43.0 – A chart's root, and Intl's options for its numbers (Oct. 2026)
|
|
34
|
+
|
|
35
|
+
### Added
|
|
36
|
+
|
|
37
|
+
- **A series' `format` and an axis' `tickFormat` also take `NumberOptions`** - the options of `Intl.NumberFormat` plus `decimals` - written in the wording's locale and compared by value, so an equal inline object does not relabel the axis (ADR-0069). On an axis the step's places stay unless the options set digits, so a currency axis reads "€0", "€500", "€1,000". The tooltip, the data table, the limit rows, the readout and the spoken text follow.
|
|
38
|
+
- **An example drills down from years to months to days over `onSelect`**, the stack of levels in the application's state: the chart keeps no level (ADR-0056).
|
|
39
|
+
|
|
40
|
+
### Changed
|
|
41
|
+
|
|
42
|
+
- **`Chart` takes the attributes of a `<div>` and a `ref`** (ADR-0068): `ref`, `id` and `data-*` reach the root element - `data-*` was dropped silently before - and `aria-label` and `aria-labelledby` name the plot. A caller's `aria-describedby` now comes after the plot's own summary.
|
|
43
|
+
- Migration: nothing to change for a ref or a class; a test that looked for the caller's description first finds the summary's id first.
|
|
44
|
+
- **`ariaLabel` on `Chart` is renamed `aria-label`.** `ariaLabel` stays as a deprecated alias and warns once in development; 0.44.0 removes it. `aria-labelledby` pointing at a heading satisfies the name too.
|
|
45
|
+
- Migration: write `aria-label`, or point `aria-labelledby` at a heading.
|
|
46
|
+
- **The built-in number formats no longer write a negative zero:** -0.0004 on a one-place axis reads "0.0".
|
|
47
|
+
- Migration: nothing to change; a test that expected "-0" reads "0".
|
|
48
|
+
- **Under a finger the legend entries and the show-all key are hit in a square of 24 px**, and the legend's row gap becomes 10 px so one line's pads do not cover the next line's entries (ADR-0070).
|
|
49
|
+
- Migration: nothing to change; under touch a wrapped legend stands 2 px taller per line.
|
|
50
|
+
|
|
51
|
+
## 0.42.0 – A chart under test in jsdom (Oct. 2026)
|
|
52
|
+
|
|
53
|
+
### Added
|
|
54
|
+
|
|
55
|
+
- **A chart is testable in jsdom.** The new "Testing" section gives the Vitest and Jest lines in full - a charts-only application installs no core - with a setup file whose ResizeObserver reports a fixed size and whose `getContext` stub keeps jsdom quiet; `.` and `./wording/de` carry a `default` condition for Jest's resolver. The release check runs a test of a legend and the data table from those blocks under both runners.
|
|
56
|
+
- **The README names `--u-chart-1` to `--u-chart-6`** as the palette a brand changes, beside core's brand file.
|
|
57
|
+
- **TypeScript 5.4 or newer**, stated in the Install section (the declarations use `NoInfer`); the release check compiles a strict consumer under 5.4 as well as the current TypeScript.
|
|
58
|
+
|
|
32
59
|
## 0.41.1 – The documentation runs where the code is (Oct. 2026)
|
|
33
60
|
|
|
34
61
|
### Changed
|
|
35
62
|
|
|
36
63
|
- **The documentation is no longer hosted.** The site on GitHub Pages is gone, and the package's `homepage` now names its README on GitHub. The running documentation of this version opens from a checkout of the tag `charts-v0.41.1` with `pnpm install` and `pnpm start`, at `http://localhost:4170/umriss-ui/` - the repository README says how, under "See it running".
|
|
64
|
+
- Migration: nothing to change; a bookmark or link to the old hosted site no longer resolves - open the documentation from a checkout of the tag, as described above.
|
|
37
65
|
- **`docs/llms-full.md` in the package stands on its own:** a link to another page points at that page's heading in the same file, a link to a place on the site that the file does not hold keeps only its text, and ADR-0032 is linked at this version's tag.
|
|
66
|
+
- Migration: nothing to change; look at any tool that read `docs/llms-full.md` and followed its links to the site, which now find the heading in the same file.
|
|
38
67
|
|
|
39
68
|
## 0.41.0 – Limits read as values, and Jest loads the charts (Oct. 2026)
|
|
40
69
|
|
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ lint rule over `packages/charts/src/**` holds that fast.
|
|
|
16
16
|
pnpm add @umriss-ui/charts
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
React 19 or newer as a peer, and nothing else. `@umriss-ui/core` is **not** a
|
|
19
|
+
React 19 or newer as a peer, and nothing else. TypeScript 5.4 or newer (the declarations use `NoInfer`). `@umriss-ui/core` is **not** a
|
|
20
20
|
dependency and not a peer dependency — if an application uses both packages, it
|
|
21
21
|
does so because it chose to, not because this one required it (ADR-0020).
|
|
22
22
|
|
|
@@ -24,8 +24,11 @@ The package ships ES2022 syntax; an application that serves older browsers
|
|
|
24
24
|
transpiles it itself.
|
|
25
25
|
|
|
26
26
|
Every entry, `./wording/de` included, begins with `"use client"`, the directive a framework
|
|
27
|
-
with Server Components reads to treat a module as client code.
|
|
28
|
-
|
|
27
|
+
with Server Components reads to treat a module as client code. A chart is declared by its hook,
|
|
28
|
+
`useChart`, so the declaration lives in a Client Component file: a Server Component renders that
|
|
29
|
+
file and hands it the rows. On a server a chart gives its labelled frame and an empty canvas; the
|
|
30
|
+
drawing arrives after mount. No test runs inside such a framework: the charts are rendered to a
|
|
31
|
+
string in a test.
|
|
29
32
|
|
|
30
33
|
## The smallest chart that runs
|
|
31
34
|
|
|
@@ -47,7 +50,7 @@ const DATA: Point[] = [
|
|
|
47
50
|
export function Course() {
|
|
48
51
|
const { Chart, XAxis, YAxis, Line } = useChart(DATA);
|
|
49
52
|
return (
|
|
50
|
-
<Chart height={280}
|
|
53
|
+
<Chart height={280} aria-label="Course of one series">
|
|
51
54
|
<XAxis value="t" label="Index" />
|
|
52
55
|
<YAxis />
|
|
53
56
|
<Line value="a" name="Series A" />
|
|
@@ -65,6 +68,8 @@ an x axis that reads such rows names their type: `<XAxis<Row> value="t" />`.
|
|
|
65
68
|
A y axis reads no value: its series place the rows along y. `Tooltip`, `Legend`, `DataTable`, `LimitLine` and `LimitBand` read no row and
|
|
66
69
|
are imported as they are (ADR-0048).
|
|
67
70
|
|
|
71
|
+
The chart is a composite (ADR-0068): `ref`, `className`, `style`, `id` and `data-*` reach its root `<div>`; `aria-label` and `aria-labelledby` name the plot, and your `aria-describedby` is added after the plot's own summary. `ariaLabel` still works for one further minor and warns once in development.
|
|
72
|
+
|
|
68
73
|
A series is an element, not an entry in a configuration object: the order in the
|
|
69
74
|
JSX decides what lies over what, and at the same time the palette colour.
|
|
70
75
|
|
|
@@ -85,7 +90,7 @@ wording is the one input - the browser's language is not read:
|
|
|
85
90
|
```tsx
|
|
86
91
|
import { GERMAN_CHARTS_WORDING } from "@umriss-ui/charts/wording/de";
|
|
87
92
|
|
|
88
|
-
<Chart
|
|
93
|
+
<Chart aria-label="Verlauf" wording={GERMAN_CHARTS_WORDING}>…</Chart>
|
|
89
94
|
```
|
|
90
95
|
|
|
91
96
|
## Styles
|
|
@@ -98,7 +103,8 @@ wins. `@umriss-ui/charts/styles.css` stays exported for setups that link
|
|
|
98
103
|
stylesheets by hand.
|
|
99
104
|
|
|
100
105
|
**Colours** come from `--uc-*` variables that fall back to the tokens of
|
|
101
|
-
`@umriss-ui/core` where they exist and to literals where they do not.
|
|
106
|
+
`@umriss-ui/core` where they exist and to literals where they do not. The palette is `--u-chart-1` to
|
|
107
|
+
`--u-chart-6`; core's README holds a brand file that sets them, light and dark. **Light and
|
|
102
108
|
dark** follow the application's `color-scheme`: the canvas colours are resolved
|
|
103
109
|
anew when the root element's attributes or the system preference change;
|
|
104
110
|
`invalidateTheme()` covers a switch made on another ancestor. **Fonts** are not
|
|
@@ -164,6 +170,80 @@ next kind to come (ADR-0059).
|
|
|
164
170
|
* [`../../docs/design-language.md`](../../docs/design-language.md) — the design
|
|
165
171
|
language all five packages share.
|
|
166
172
|
|
|
173
|
+
## Testing
|
|
174
|
+
|
|
175
|
+
Tested: Vitest 5 and Jest 30 (with babel-jest), both on jsdom. happy-dom and Jest 29 may work and are
|
|
176
|
+
not promised. `check:dist` runs a test of the installed package in a Vitest project and a Jest project
|
|
177
|
+
that hold exactly the files below. A chart-only application installs no core, so the lines are given in
|
|
178
|
+
full here.
|
|
179
|
+
|
|
180
|
+
**Vitest** needs one line, `server.deps.inline`: Vitest hands a dependency to Node, and Node cannot
|
|
181
|
+
import the stylesheet that the package's JavaScript imports (`Unknown file extension ".css"`). Inlined,
|
|
182
|
+
Vitest's own pipeline handles it.
|
|
183
|
+
|
|
184
|
+
```ts vitest.config.ts
|
|
185
|
+
import { defineConfig } from "vitest/config";
|
|
186
|
+
|
|
187
|
+
export default defineConfig({
|
|
188
|
+
test: {
|
|
189
|
+
environment: "jsdom",
|
|
190
|
+
globals: true,
|
|
191
|
+
setupFiles: ["./umriss.setup.js"],
|
|
192
|
+
server: { deps: { inline: [/@umriss-ui/] } },
|
|
193
|
+
},
|
|
194
|
+
});
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
**Jest** needs two settings: `moduleNameMapper` maps every stylesheet to an empty module, and
|
|
198
|
+
`transformIgnorePatterns` lets babel-jest compile the package, which ships ES modules. Babel's config
|
|
199
|
+
must apply to `node_modules`, so it is a root `babel.config.*`, not a `.babelrc`.
|
|
200
|
+
|
|
201
|
+
```js jest.config.cjs
|
|
202
|
+
module.exports = {
|
|
203
|
+
testEnvironment: "jsdom",
|
|
204
|
+
setupFilesAfterEnv: ["<rootDir>/umriss.setup.js"],
|
|
205
|
+
moduleNameMapper: { "\\.css$": "<rootDir>/css-stub.cjs" },
|
|
206
|
+
transformIgnorePatterns: ["/node_modules/(?!(@umriss-ui)/)"],
|
|
207
|
+
};
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
```js css-stub.cjs
|
|
211
|
+
module.exports = {};
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
```js babel.config.cjs
|
|
215
|
+
module.exports = {
|
|
216
|
+
presets: [
|
|
217
|
+
["@babel/preset-env", { targets: { node: "current" } }],
|
|
218
|
+
["@babel/preset-react", { runtime: "automatic" }],
|
|
219
|
+
],
|
|
220
|
+
};
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
**Next.js** with `next/jest`: put the umriss packages in `transpilePackages`; the preset stubs the
|
|
224
|
+
stylesheets and compiles the packages itself.
|
|
225
|
+
|
|
226
|
+
**The setup file** gives jsdom what a chart needs to lay out. jsdom measures nothing, so the
|
|
227
|
+
`ResizeObserver` reports a fixed size (600 x 280) for whatever it observes; without a size the chart
|
|
228
|
+
stays empty, and neither the legend nor "Show data" appears. jsdom has no canvas, so `getContext`
|
|
229
|
+
returns `null`, which a chart copes with. The file is the same for both runners:
|
|
230
|
+
|
|
231
|
+
```js umriss.setup.js
|
|
232
|
+
globalThis.ResizeObserver = class {
|
|
233
|
+
constructor(callback) {
|
|
234
|
+
this.callback = callback;
|
|
235
|
+
}
|
|
236
|
+
observe(target) {
|
|
237
|
+
const box = { inlineSize: 600, blockSize: 280 };
|
|
238
|
+
this.callback([{ target, contentRect: { width: 600, height: 280 }, contentBoxSize: [box] }], this);
|
|
239
|
+
}
|
|
240
|
+
unobserve() {}
|
|
241
|
+
disconnect() {}
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
HTMLCanvasElement.prototype.getContext = () => null;
|
|
245
|
+
```
|
|
246
|
+
|
|
167
247
|
## Licence
|
|
168
248
|
|
|
169
249
|
MIT — see [`LICENSE`](LICENSE).
|
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-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-layer-series,.uc-layer-series:before,.uc-layer-series:after{box-sizing:border-box}.uc-silhouette,.uc-silhouette:before,.uc-silhouette:after{box-sizing:border-box}.uc-silhouette-ground,.uc-silhouette-ground:before,.uc-silhouette-ground:after{box-sizing:border-box}.uc-silhouette-glint,.uc-silhouette-glint:before,.uc-silhouette-glint:after{box-sizing:border-box}.uc-silhouette-band,.uc-silhouette-band:before,.uc-silhouette-band: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-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));--uc-delay-stale: var(--u-delay-stale, .2s);--uc-silhouette: color-mix(in srgb, var(--u-color-text, #18181b) 10%, transparent);--uc-ease-swell: var(--u-ease-swell, ease-in-out);--uc-fade: var(--u-duration-medium, .24s) 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;inset:0;display:block;pointer-events:none}.uc-plot[data-stale]{pointer-events:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{opacity:.5;transition:opacity var(--uc-transition-state) var(--uc-delay-stale)}.uc-silhouette{position:absolute;pointer-events:none;transition:opacity var(--uc-fade)}.uc-silhouette[data-leaving]{opacity:0}.uc-silhouette>svg{box-sizing:border-box}.uc-silhouette>svg{display:block}.uc-silhouette-ground{fill:var(--uc-silhouette)}.uc-silhouette-glint{stop-color:var(--uc-color-bg)}.uc-silhouette-band{animation:uc-silhouette-sweep var(--uc-ease-swell) infinite}@keyframes uc-silhouette-sweep{0%{transform:translate(0)}80%{transform:translate(var(--uc-travel))}to{transform:translate(var(--uc-travel))}}.uc-plot[data-arriving]>.uc-layer-series{animation:uc-silhouette-arrive var(--uc-fade)}@keyframes uc-silhouette-arrive{0%{opacity:0}}@media(forced-colors:active){.uc-silhouette-ground{fill:GrayText}.uc-silhouette-band{display:none}}.uc-axes{position:absolute;inset: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;inset: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-silhouette-band{display:none}.uc-silhouette{transition:none}.uc-plot[data-arriving]>.uc-layer-series{animation:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{transition-duration:0s}}.uc-measure{position:absolute;inset:0 auto auto 0;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-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-layer-series,.uc-layer-series:before,.uc-layer-series:after{box-sizing:border-box}.uc-silhouette,.uc-silhouette:before,.uc-silhouette:after{box-sizing:border-box}.uc-silhouette-ground,.uc-silhouette-ground:before,.uc-silhouette-ground:after{box-sizing:border-box}.uc-silhouette-glint,.uc-silhouette-glint:before,.uc-silhouette-glint:after{box-sizing:border-box}.uc-silhouette-band,.uc-silhouette-band:before,.uc-silhouette-band: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-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));--uc-delay-stale: var(--u-delay-stale, .2s);--uc-silhouette: color-mix(in srgb, var(--u-color-text, #18181b) 10%, transparent);--uc-ease-swell: var(--u-ease-swell, ease-in-out);--uc-fade: var(--u-duration-medium, .24s) 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;inset:0;display:block;pointer-events:none}.uc-plot[data-stale]{pointer-events:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{opacity:.5;transition:opacity var(--uc-transition-state) var(--uc-delay-stale)}.uc-silhouette{position:absolute;pointer-events:none;transition:opacity var(--uc-fade)}.uc-silhouette[data-leaving]{opacity:0}.uc-silhouette>svg{box-sizing:border-box}.uc-silhouette>svg{display:block}.uc-silhouette-ground{fill:var(--uc-silhouette)}.uc-silhouette-glint{stop-color:var(--uc-color-bg)}.uc-silhouette-band{animation:uc-silhouette-sweep var(--uc-ease-swell) infinite}@keyframes uc-silhouette-sweep{0%{transform:translate(0)}80%{transform:translate(var(--uc-travel))}to{transform:translate(var(--uc-travel))}}.uc-plot[data-arriving]>.uc-layer-series{animation:uc-silhouette-arrive var(--uc-fade)}@keyframes uc-silhouette-arrive{0%{opacity:0}}@media(forced-colors:active){.uc-silhouette-ground{fill:GrayText}.uc-silhouette-band{display:none}}.uc-axes{position:absolute;inset: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;inset: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(pointer:coarse){.uc-legend{row-gap:10px}button.uc-legend-item,.uc-show-all{position:relative}.uc-show-all{position:absolute}button.uc-legend-item:after{box-sizing:border-box}button.uc-legend-item:after,.uc-show-all:after{content:"";position:absolute;inset:-4px 0}}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item,.uc-show-all{transition:none}.uc-silhouette-band{display:none}.uc-silhouette{transition:none}.uc-plot[data-arriving]>.uc-layer-series{animation:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{transition-duration:0s}}.uc-measure{position:absolute;inset:0 auto auto 0;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}}
|