@umriss-ui/charts 0.6.0 → 0.8.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 +115 -8
- package/README.md +21 -12
- package/dist/charts.css +1 -1
- package/dist/charts.js +1662 -1075
- package/dist/de.d.ts +18 -0
- package/dist/index.d.ts +168 -96
- package/dist/wording/de.js +13 -5
- package/docs/llms-full.md +5318 -0
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -29,6 +29,113 @@ interface was still expected to move before `0.3.0`.
|
|
|
29
29
|
|
|
30
30
|
---
|
|
31
31
|
|
|
32
|
+
## 0.8.0 – Working time (Sep. 2026)
|
|
33
|
+
|
|
34
|
+
### Changed
|
|
35
|
+
|
|
36
|
+
- **Operating time is working time** (ADR-0035). The calendar axis and its
|
|
37
|
+
pure modules speak of working time, not of a plant's operating time. A hard
|
|
38
|
+
cut, without deprecated aliases — rename on upgrade:
|
|
39
|
+
|
|
40
|
+
| Before | After |
|
|
41
|
+
|---|---|
|
|
42
|
+
| `operatingCalendar()` | `workingCalendar()` |
|
|
43
|
+
| `toOperatingTime()` | `toWorkingTime()` |
|
|
44
|
+
| `toOperatingTimeClamped()` | `toWorkingTimeClamped()` |
|
|
45
|
+
| `operatingTicks()` | `workingTicks()` |
|
|
46
|
+
| `operatingTimeTicks()` | `workingTimeTicks()` |
|
|
47
|
+
| `OperatingCalendar` | `WorkingCalendar` |
|
|
48
|
+
| `OperatingInterval` | `WorkingInterval` |
|
|
49
|
+
| `OperatingTimeTick` | `WorkingTimeTick` |
|
|
50
|
+
| `OperatingTimeTick.operatingTime` | `WorkingTimeTick.workingTime` |
|
|
51
|
+
| `RemovedSpan.operatingTime` | `RemovedSpan.workingTime` |
|
|
52
|
+
|
|
53
|
+
`calendar` on `XAxis`/`YAxis`, `CalendarInput`, `calendarFrom`,
|
|
54
|
+
`toWallClock`, `breaks` and `removedIntervals` keep their names.
|
|
55
|
+
|
|
56
|
+
## 0.7.0 – Data table, marks and stacks (Sep. 2026)
|
|
57
|
+
|
|
58
|
+
### Added
|
|
59
|
+
|
|
60
|
+
- **The focus rings under forced colours** (forced-colors 01): the plot's,
|
|
61
|
+
the legend entry's and the data panel's ring carry `outline: 2px solid
|
|
62
|
+
transparent` beside the box-shadow, which forced colours drop.
|
|
63
|
+
- **`docs/llms-full.md`**, the package's documentation as one Markdown file for
|
|
64
|
+
a coding agent, in the npm package and pinned to its version: every demo page
|
|
65
|
+
with its import line, its examples' source, its props tables and why it is
|
|
66
|
+
built as it is, and the declaration of every other export. The same text
|
|
67
|
+
stands online as <https://romanhaendler.github.io/umriss-ui/charts/llms-full.txt>,
|
|
68
|
+
with an index of the pages beside it (`llms.txt`).
|
|
69
|
+
- **`<DataTable />`** (charts-alternatives 01): the chart's values as a table,
|
|
70
|
+
on demand. It puts a disclosure key - "Show data", "Hide data" - at the end
|
|
71
|
+
of the legend, or on a line of its own without one, and the key lays a plain
|
|
72
|
+
`<table>` over the plot area: the visible domain, the x in the first column,
|
|
73
|
+
then one column per visible series, each value in the format the tooltip
|
|
74
|
+
writes it in; a state band names its states, a matrix gets a table of its
|
|
75
|
+
own. Above 500 rows it lists the downsampled course - the first, lowest,
|
|
76
|
+
highest and last value of each stretch - and its caption says how many
|
|
77
|
+
readings the rows stand for. The plot keeps its size beneath and is hidden
|
|
78
|
+
while the table is open.
|
|
79
|
+
- **`Chart encoding="marks"`** (charts-alternatives 02): series told apart
|
|
80
|
+
without colour. Each series takes a dash pattern and a marker shape - a
|
|
81
|
+
line, an area's outline, a scatter's points - or a hatch across its fill - a
|
|
82
|
+
bar, an area -, chosen by the same palette place as its colour, the first
|
|
83
|
+
plain; a caller's own `dash` wins. A state band hatches each state by its
|
|
84
|
+
name, a matrix each step of its colouring, a limit band
|
|
85
|
+
is hatched in its colour. The legend's chips draw the same marks. The
|
|
86
|
+
default, `"color"`, changes nothing.
|
|
87
|
+
- **Forced colours** (charts-alternatives 03): under `forced-colors: active`
|
|
88
|
+
(the Windows contrast mode), which forces every element but no canvas, the
|
|
89
|
+
chart forces itself - its theme resolves to the system colours (`CanvasText`,
|
|
90
|
+
`Canvas`, `GrayText`, `Highlight`), a caller's colour becomes `CanvasText`,
|
|
91
|
+
and encoding by marks switches on whatever `encoding` says. `ResolvedTheme`
|
|
92
|
+
gains `forced`.
|
|
93
|
+
- **`stack` on `Bar` and `Area`** (charts-stacking 01, 02): series with the
|
|
94
|
+
same id on the same axes stand on the ones registered before them. Stacked
|
|
95
|
+
bars take one place in their group; a gap stacks as zero and stays a gap;
|
|
96
|
+
negative values stack downward from zero, apart from the positive. The
|
|
97
|
+
tooltip and the readout name each series' own value and add the stack's
|
|
98
|
+
total as the last row; the data table lists the own values. An area's
|
|
99
|
+
`baseline` is not read in a stack. `TooltipPoint.yValue` of a stacked point
|
|
100
|
+
is its own value, not its top; a tooltip `render` gets no total and sums the
|
|
101
|
+
points itself.
|
|
102
|
+
- **`normalize`** (charts-stacking 03): on any member of a stack, every x sums
|
|
103
|
+
to 100 % - each value its share -, and the y axis reads in percent unless it
|
|
104
|
+
has a `tickFormat`. The total stays the readings' sum, in the series'
|
|
105
|
+
`format`.
|
|
106
|
+
|
|
107
|
+
### Changed
|
|
108
|
+
|
|
109
|
+
- **`ChartsWording`** gains `showData`, `hideData`, `positionColumn`,
|
|
110
|
+
`rowColumn`, `tableCaption`, `downsampled`, `stackTotal` and `percent`,
|
|
111
|
+
German beside them. A
|
|
112
|
+
`Partial<ChartsWording>` passed to `wording` keeps working; a register of
|
|
113
|
+
one's own typed as the whole `ChartsWording` has to add them.
|
|
114
|
+
- **A state's hatch follows its name** (charts-alternatives 04), no longer its
|
|
115
|
+
place in the state list: the first name to come across the chart's bands is
|
|
116
|
+
plain, the next rising, and so on. Two bands that list one state at
|
|
117
|
+
different places hatch it alike, and the legend, which shows it once, agrees
|
|
118
|
+
with both. A single band is hatched as before.
|
|
119
|
+
- **An area's legend chip shows its hatched fill** under encoding by marks
|
|
120
|
+
(charts-alternatives 04): the faint fill with its hatch, the dashed outline
|
|
121
|
+
along its top - as the plot draws it.
|
|
122
|
+
- **The data table thins a state band to its changes** (charts-alternatives
|
|
123
|
+
04): above 500 rows a band keeps its first reading and each where its state
|
|
124
|
+
changes - the positions the keyboard walks -, not its lowest and highest
|
|
125
|
+
state code, which say nothing about a band.
|
|
126
|
+
- **Stacked segments are parted by a line** (charts-stacking 04): 1px in the
|
|
127
|
+
ground's colour - `Canvas` under forced colours - between two stacked bars
|
|
128
|
+
and below each stacked area's outline, in both encodings.
|
|
129
|
+
|
|
130
|
+
### Fixed
|
|
131
|
+
|
|
132
|
+
- **The tooltip's chips under forced colours** (charts-alternatives 04): the
|
|
133
|
+
contrast mode forced their background away and only the names stayed. They
|
|
134
|
+
now draw the legend's marks - a dash and marker, a hatch - in the system
|
|
135
|
+
colours.
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
32
139
|
## 0.6.0 – By keyboard and screen reader (Sep. 2026)
|
|
33
140
|
|
|
34
141
|
### Added
|
|
@@ -118,7 +225,7 @@ gone** - occupancy is drawn by `@umriss-ui/schedule` (ADR-0026).
|
|
|
118
225
|
band came out in the palette's second colour, after three bands in its
|
|
119
226
|
fourth. It now gets the first. A series without a `name` counts its position
|
|
120
227
|
among the series that take a colour.
|
|
121
|
-
- **The
|
|
228
|
+
- **The working-time axis labels in en-GB by level.** Without a
|
|
122
229
|
`tickFormat` it wrote every tick as `dd.MM. HH:mm`; it now labels as the
|
|
123
230
|
time axis does - `15:00`, and the date on the first tick of a new day,
|
|
124
231
|
`17 Mar 06:00` - and the tooltip's x value as `17 Mar 15:23`. Its ticks
|
|
@@ -248,12 +355,12 @@ gone** - occupancy is drawn by `@umriss-ui/schedule` (ADR-0026).
|
|
|
248
355
|
found none and drew nothing, silently. Without an `axisId` a limit now binds
|
|
249
356
|
to the first axis of its orientation - an `<XAxis id="time">` too - and an
|
|
250
357
|
unknown `axisId` is a DEV error, as it is for a series.
|
|
251
|
-
- **The
|
|
358
|
+
- **The working-time axis stands on the local clock.** Its day and half-day
|
|
252
359
|
ticks fell on UTC's midnight and were labelled in local time - "01:00"
|
|
253
360
|
where a day begins, in CET. They now fall on local midnight and noon. Explicit
|
|
254
361
|
`ticks` and the value of an x limit are named on the wall clock, like the
|
|
255
|
-
data, and mapped into
|
|
256
|
-
as
|
|
362
|
+
data, and mapped into working time as the data are; before, both were taken
|
|
363
|
+
as working time and landed far off, or pulled the axis out of shape.
|
|
257
364
|
- **Hit testing where areas and points meet.** Under `mode="nearest"` a state
|
|
258
365
|
band or a matrix cell under the pointer counted as distance zero and beat
|
|
259
366
|
every point; a point within 12 px of the pointer now wins, and the area
|
|
@@ -348,7 +455,7 @@ time arithmetic from here, so what it uses is public now.
|
|
|
348
455
|
`light-dark()` included, resolved to values a canvas can draw in the scheme
|
|
349
456
|
that applies at `root`. **`subscribeTheme(notify)`** tells a canvas when to
|
|
350
457
|
resolve again.
|
|
351
|
-
- **`
|
|
458
|
+
- **`toWorkingTimeClamped`** — wall clock to working time without `NaN`: a
|
|
352
459
|
time in removed time lands on its seam.
|
|
353
460
|
|
|
354
461
|
### No longer a release candidate
|
|
@@ -446,7 +553,7 @@ German defaults stood there regardless:
|
|
|
446
553
|
`"Sonstige"`). Whoever names `collectRank` names `remainderName` with it — in
|
|
447
554
|
the type (`ParetoSettings`) and in DEV as an error. `paretoDefaults` no longer
|
|
448
555
|
contains `remainderName`.
|
|
449
|
-
- The labelling of
|
|
556
|
+
- The labelling of a working-time axis without a `tickFormat` of its own is
|
|
450
557
|
`dd.MM. HH:mm`, set by hand. Previously it came out of
|
|
451
558
|
`toLocaleString(undefined, …)` and looked different on every machine.
|
|
452
559
|
- `"Series n"` remains the last resort for a series without a `name`, but warns
|
|
@@ -486,8 +593,8 @@ ADR-0006 to ADR-0011.
|
|
|
486
593
|
- **`ControlChart`:** the control chart as a composition out of `Line`,
|
|
487
594
|
`LimitLine` and `Scatter` (ADR-0008), and with it the pure modules
|
|
488
595
|
`controlLimits`, `zones`, the four rules and `violations`.
|
|
489
|
-
- **The
|
|
490
|
-
out of `
|
|
596
|
+
- **The working-time axis:** `calendar` on `XAxis`/`YAxis` and the pure modules
|
|
597
|
+
out of `workingTime.ts` — wall clock ↔ working time, ticks, breaks.
|
|
491
598
|
- **`pareto`** as a pure module.
|
|
492
599
|
- **The limit as a rule:** `assess` and `verdictWeight` with their types — the
|
|
493
600
|
same rule as in `@umriss-ui/core`, deliberately there twice (ADR-0006).
|
package/README.md
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Canvas-based charts for data-dense applications: few chart kinds, each one drawn
|
|
4
4
|
properly. Lines, areas, bars, scatters, state bands and matrices compose into
|
|
5
|
-
one chart on shared axes — together with the instruments a
|
|
6
|
-
made of: limit lines and bands, a control chart, a Pareto and
|
|
5
|
+
one chart on shared axes — together with the instruments a monitoring screen is
|
|
6
|
+
made of: limit lines and bands, a control chart, a Pareto and a working-time
|
|
7
7
|
axis.
|
|
8
8
|
|
|
9
9
|
The package depends on **nothing but React**, and it will keep doing so (R-1.2).
|
|
@@ -86,24 +86,28 @@ loaded: Geist when the application has it, the system fonts otherwise.
|
|
|
86
86
|
## What it can do
|
|
87
87
|
|
|
88
88
|
* **Six series kinds** in one chart on shared axes: `Line`, `Area`, `Bar`,
|
|
89
|
-
`Scatter`, `StateBand`, `Matrix`. Occupancy —
|
|
89
|
+
`Scatter`, `StateBand`, `Matrix`. Occupancy — work on people or vehicles, idle time,
|
|
90
90
|
double bookings — is `@umriss-ui/schedule`'s (ADR-0026).
|
|
91
91
|
* **Several axes per orientation**, each with its own extent; only the first
|
|
92
92
|
registered axis per orientation draws a grid.
|
|
93
93
|
* **The instruments**: `LimitLine` and `LimitBand`, `ControlChart` with its four
|
|
94
|
-
rule violations, `pareto()` with a collected remainder, and
|
|
94
|
+
rule violations, `pareto()` with a collected remainder, and a working-time
|
|
95
95
|
axis that takes the empty hours out and marks every removed span.
|
|
96
96
|
* **The pure modules are exported**, not hidden: `assess`, `controlLimits`,
|
|
97
|
-
`zones`, `violations`, `pareto`, `
|
|
97
|
+
`zones`, `violations`, `pareto`, `workingCalendar` and the rest. Whoever
|
|
98
98
|
wants to draw something other than the composition offers should reach the
|
|
99
99
|
arithmetic without rebuilding it.
|
|
100
|
-
* **Performance, measured rather than claimed
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
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`).
|
|
107
111
|
|
|
108
112
|
## More
|
|
109
113
|
|
|
@@ -112,6 +116,11 @@ horizontal bars — stands in the same record, with the reason.
|
|
|
112
116
|
shows running examples with their source and the props table generated from
|
|
113
117
|
`src/`.
|
|
114
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>.
|
|
115
124
|
* [`docs/capabilities.md`](docs/capabilities.md) — every capability with the
|
|
116
125
|
level at which it is proved.
|
|
117
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-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-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-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{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}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}}
|