@umriss-ui/charts 0.5.0 → 0.7.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 +114 -0
- package/README.md +27 -7
- package/dist/charts.css +1 -1
- package/dist/charts.js +2686 -1689
- package/dist/de.d.ts +47 -0
- package/dist/index.d.ts +108 -5
- package/dist/wording/de.d.ts +2 -0
- package/dist/wording/de.js +21 -0
- package/docs/llms-full.md +4031 -0
- package/package.json +7 -2
package/CHANGELOG.md
CHANGED
|
@@ -29,6 +29,120 @@ interface was still expected to move before `0.3.0`.
|
|
|
29
29
|
|
|
30
30
|
---
|
|
31
31
|
|
|
32
|
+
## 0.7.0 – Data table, marks and stacks (Sep. 2026)
|
|
33
|
+
|
|
34
|
+
### Added
|
|
35
|
+
|
|
36
|
+
- **The focus rings under forced colours** (forced-colors 01): the plot's,
|
|
37
|
+
the legend entry's and the data panel's ring carry `outline: 2px solid
|
|
38
|
+
transparent` beside the box-shadow, which forced colours drop.
|
|
39
|
+
- **`docs/llms-full.md`**, the package's documentation as one Markdown file for
|
|
40
|
+
a coding agent, in the npm package and pinned to its version: every demo page
|
|
41
|
+
with its import line, its examples' source, its props tables and why it is
|
|
42
|
+
built as it is, and the declaration of every other export. The same text
|
|
43
|
+
stands online as <https://romanhaendler.github.io/umriss-ui/charts/llms-full.txt>,
|
|
44
|
+
with an index of the pages beside it (`llms.txt`).
|
|
45
|
+
- **`<DataTable />`** (charts-alternatives 01): the chart's values as a table,
|
|
46
|
+
on demand. It puts a disclosure key - "Show data", "Hide data" - at the end
|
|
47
|
+
of the legend, or on a line of its own without one, and the key lays a plain
|
|
48
|
+
`<table>` over the plot area: the visible domain, the x in the first column,
|
|
49
|
+
then one column per visible series, each value in the format the tooltip
|
|
50
|
+
writes it in; a state band names its states, a matrix gets a table of its
|
|
51
|
+
own. Above 500 rows it lists the downsampled course - the first, lowest,
|
|
52
|
+
highest and last value of each stretch - and its caption says how many
|
|
53
|
+
readings the rows stand for. The plot keeps its size beneath and is hidden
|
|
54
|
+
while the table is open.
|
|
55
|
+
- **`Chart encoding="marks"`** (charts-alternatives 02): series told apart
|
|
56
|
+
without colour. Each series takes a dash pattern and a marker shape - a
|
|
57
|
+
line, an area's outline, a scatter's points - or a hatch across its fill - a
|
|
58
|
+
bar, an area -, chosen by the same palette place as its colour, the first
|
|
59
|
+
plain; a caller's own `dash` wins. A state band hatches each state by its
|
|
60
|
+
name, a matrix each step of its colouring, a limit band
|
|
61
|
+
is hatched in its colour. The legend's chips draw the same marks. The
|
|
62
|
+
default, `"color"`, changes nothing.
|
|
63
|
+
- **Forced colours** (charts-alternatives 03): under `forced-colors: active`
|
|
64
|
+
(the Windows contrast mode), which forces every element but no canvas, the
|
|
65
|
+
chart forces itself - its theme resolves to the system colours (`CanvasText`,
|
|
66
|
+
`Canvas`, `GrayText`, `Highlight`), a caller's colour becomes `CanvasText`,
|
|
67
|
+
and encoding by marks switches on whatever `encoding` says. `ResolvedTheme`
|
|
68
|
+
gains `forced`.
|
|
69
|
+
- **`stack` on `Bar` and `Area`** (charts-stacking 01, 02): series with the
|
|
70
|
+
same id on the same axes stand on the ones registered before them. Stacked
|
|
71
|
+
bars take one place in their group; a gap stacks as zero and stays a gap;
|
|
72
|
+
negative values stack downward from zero, apart from the positive. The
|
|
73
|
+
tooltip and the readout name each series' own value and add the stack's
|
|
74
|
+
total as the last row; the data table lists the own values. An area's
|
|
75
|
+
`baseline` is not read in a stack. `TooltipPoint.yValue` of a stacked point
|
|
76
|
+
is its own value, not its top; a tooltip `render` gets no total and sums the
|
|
77
|
+
points itself.
|
|
78
|
+
- **`normalize`** (charts-stacking 03): on any member of a stack, every x sums
|
|
79
|
+
to 100 % - each value its share -, and the y axis reads in percent unless it
|
|
80
|
+
has a `tickFormat`. The total stays the readings' sum, in the series'
|
|
81
|
+
`format`.
|
|
82
|
+
|
|
83
|
+
### Changed
|
|
84
|
+
|
|
85
|
+
- **`ChartsWording`** gains `showData`, `hideData`, `positionColumn`,
|
|
86
|
+
`rowColumn`, `tableCaption`, `downsampled`, `stackTotal` and `percent`,
|
|
87
|
+
German beside them. A
|
|
88
|
+
`Partial<ChartsWording>` passed to `wording` keeps working; a register of
|
|
89
|
+
one's own typed as the whole `ChartsWording` has to add them.
|
|
90
|
+
- **A state's hatch follows its name** (charts-alternatives 04), no longer its
|
|
91
|
+
place in the state list: the first name to come across the chart's bands is
|
|
92
|
+
plain, the next rising, and so on. Two bands that list one state at
|
|
93
|
+
different places hatch it alike, and the legend, which shows it once, agrees
|
|
94
|
+
with both. A single band is hatched as before.
|
|
95
|
+
- **An area's legend chip shows its hatched fill** under encoding by marks
|
|
96
|
+
(charts-alternatives 04): the faint fill with its hatch, the dashed outline
|
|
97
|
+
along its top - as the plot draws it.
|
|
98
|
+
- **The data table thins a state band to its changes** (charts-alternatives
|
|
99
|
+
04): above 500 rows a band keeps its first reading and each where its state
|
|
100
|
+
changes - the positions the keyboard walks -, not its lowest and highest
|
|
101
|
+
state code, which say nothing about a band.
|
|
102
|
+
- **Stacked segments are parted by a line** (charts-stacking 04): 1px in the
|
|
103
|
+
ground's colour - `Canvas` under forced colours - between two stacked bars
|
|
104
|
+
and below each stacked area's outline, in both encodings.
|
|
105
|
+
|
|
106
|
+
### Fixed
|
|
107
|
+
|
|
108
|
+
- **The tooltip's chips under forced colours** (charts-alternatives 04): the
|
|
109
|
+
contrast mode forced their background away and only the names stayed. They
|
|
110
|
+
now draw the legend's marks - a dash and marker, a hatch - in the system
|
|
111
|
+
colours.
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
## 0.6.0 – By keyboard and screen reader (Sep. 2026)
|
|
116
|
+
|
|
117
|
+
### Added
|
|
118
|
+
|
|
119
|
+
- **A chart with a `<Tooltip>` is one tab stop** (ADR-0030). Its plot area
|
|
120
|
+
takes the focus as `role="application"` with a role description, and the
|
|
121
|
+
keys walk its **Active point**: ←/→ from position to position, Home/End to
|
|
122
|
+
the ends of the visible domain, PageUp/PageDown by a tenth of it, ↑/↓ to
|
|
123
|
+
the next series, which is emphasised and read first. A matrix walks cell by
|
|
124
|
+
cell. Escape clears the point, leaving the chart clears it too.
|
|
125
|
+
- **The Active point is one for pointer and keyboard**: the last input wins,
|
|
126
|
+
the tooltip, markers and `syncId` crosshair are the pointer's own.
|
|
127
|
+
- **A polite readout** speaks what the tooltip shows once the keys rest - never
|
|
128
|
+
after a pointer move - and **a summary** describes the plot: its series, the
|
|
129
|
+
visible stretch, each series' range in it and the keys.
|
|
130
|
+
- **Zoom and pan by key** where the x axis has `onDomainChange`: `+`/`−` zoom
|
|
131
|
+
around the Active point, Shift+←/→ pan by a tenth, `0` asks for the data.
|
|
132
|
+
- **`wording` on `Chart`** with the new `ChartsWording` register and
|
|
133
|
+
`DEFAULT_CHARTS_WORDING` (ADR-0031); German as `GERMAN_CHARTS_WORDING` from
|
|
134
|
+
the subpath **`@umriss-ui/charts/wording/de`**. `empty` keeps winning over it.
|
|
135
|
+
|
|
136
|
+
### Changed
|
|
137
|
+
|
|
138
|
+
- **A chart with a tooltip no longer reports `role="img"`**: it is an
|
|
139
|
+
application a screen reader enters. Without a tooltip nothing changed.
|
|
140
|
+
- A chart renders two visually hidden elements beside its plot area - the
|
|
141
|
+
readout and the summary - and the plot's `aria-describedby` points at the
|
|
142
|
+
summary.
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
32
146
|
## 0.5.0 – Tokens for type and motion, a legend that answers (Sep. 2026)
|
|
33
147
|
|
|
34
148
|
### Added
|
package/README.md
CHANGED
|
@@ -55,6 +55,17 @@ JSX decides what lies over what, and at the same time the palette colour.
|
|
|
55
55
|
On a touch screen a tap shows the tooltip, and a tap on empty plot or outside
|
|
56
56
|
the chart takes it away; a finger swiping over the chart scrolls the page.
|
|
57
57
|
|
|
58
|
+
**By keyboard and screen reader**, a chart with a `<Tooltip>` is one tab stop:
|
|
59
|
+
the arrows walk its values, ↑/↓ choose the series read first, and a screen
|
|
60
|
+
reader hears each value once the keys rest and a summary of the whole. The
|
|
61
|
+
words are English; German comes from its own subpath:
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { GERMAN_CHARTS_WORDING } from "@umriss-ui/charts/wording/de";
|
|
65
|
+
|
|
66
|
+
<Chart data={DATA} ariaLabel="Verlauf" wording={GERMAN_CHARTS_WORDING}>…</Chart>
|
|
67
|
+
```
|
|
68
|
+
|
|
58
69
|
## Styles
|
|
59
70
|
|
|
60
71
|
Nothing to import. `dist/charts.js` loads its own stylesheet; the axes, ticks,
|
|
@@ -86,13 +97,17 @@ loaded: Geist when the application has it, the system fonts otherwise.
|
|
|
86
97
|
`zones`, `violations`, `pareto`, `operatingCalendar` and the rest. Whoever
|
|
87
98
|
wants to draw something other than the composition offers should reach the
|
|
88
99
|
arithmetic without rebuilding it.
|
|
89
|
-
* **Performance, measured rather than claimed
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
100
|
+
* **Performance, measured rather than claimed**, up to three series of a
|
|
101
|
+
million points, with the hover at 60 FPS throughout. The figures, the
|
|
102
|
+
measuring run and its conditions stand once, in
|
|
103
|
+
[`docs/capabilities.md`](docs/capabilities.md) under "Performance" — they are
|
|
104
|
+
not repeated here, so that a new measurement has one place to go.
|
|
105
|
+
|
|
106
|
+
What it deliberately cannot do — animations, a log or category scale,
|
|
107
|
+
horizontal bars, pie and radar — stands in the same record, with the reason,
|
|
108
|
+
and across all five packages in
|
|
109
|
+
[ADR-0032](../../docs/adr/0032-what-umriss-is-not.md). Stacking is not among
|
|
110
|
+
them: bars and areas stack (`stack`, `normalize`).
|
|
96
111
|
|
|
97
112
|
## More
|
|
98
113
|
|
|
@@ -101,6 +116,11 @@ scale, horizontal bars — stands in the same record, with the reason.
|
|
|
101
116
|
shows running examples with their source and the props table generated from
|
|
102
117
|
`src/`.
|
|
103
118
|
* [`CHANGELOG.md`](CHANGELOG.md) — what changes for a caller.
|
|
119
|
+
* **For a coding agent**: `docs/llms-full.md` inside the installed package —
|
|
120
|
+
the demo as one Markdown file, pinned to the installed version: every page
|
|
121
|
+
with its examples' source, its props tables and why it is built as it is,
|
|
122
|
+
and the declaration of every other export. Online, for the latest version:
|
|
123
|
+
<https://romanhaendler.github.io/umriss-ui/charts/llms.txt>.
|
|
104
124
|
* [`docs/capabilities.md`](docs/capabilities.md) — every capability with the
|
|
105
125
|
level at which it is proved.
|
|
106
126
|
* [`../../docs/design-language.md`](../../docs/design-language.md) — the design
|
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-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-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-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-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-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-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}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:none;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-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-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]{color:var(--uc-color-text)}.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-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-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-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-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-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]{color:var(--uc-color-text)}.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}}
|