@umriss-ui/charts 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -29,6 +29,55 @@ interface was still expected to move before `0.3.0`.
 
 ---
 
+## 0.12.0 – A chart that is loading says so (Oct. 2026)
+
+A chart takes `loading`, as the table does (ADR-0042). Over a course already
+drawn, the course stays and dims. Over nothing to show, a silhouette of the
+chart to come stands in the plot and shimmers, where the chart used to say
+"No data" before the first rows. A chart without `loading` behaves exactly as
+before.
+
+### Added
+
+- **`Chart loading`.** Over a course already drawn:
+  - The course stays and dims after `--u-delay-stale`. A limit's label dims
+    with its line; the axes stay as they are.
+  - The plot takes no pointer until the answer is in: no tooltip, no drag, no
+    wheel zoom. An open tooltip and a drag under way end when the reload
+    begins.
+  - A chart in a `syncId` group neither shares a position nor draws one.
+  - The keys still walk and zoom, and the legend and "Show all" stay usable:
+    they change the view, not the data.
+  - Leaving, the course comes back at once.
+- **The silhouette.** Over nothing to show (no rows, only gaps, or every
+  series hidden), a quiet outline of the chart to come stands in the plot:
+  - Columns for a bar or box plot, a soft wave for a line or scatter, the wave
+    filled for an area, strips otherwise. The first series in drawing order
+    decides.
+  - One band sweeps across every shape at a constant speed, whatever the
+    chart's width.
+  - While it stands, `empty` waits, and the axes show no ticks: before its
+    rows a chart has no range.
+  - When the answer is laid out, the silhouette fades out and the course
+    fades in. "No data" never shows in between.
+  - With reduced motion it stands still and goes at once. Under forced colours
+    its shapes take `GrayText`.
+- **The plot is `aria-busy`** while the chart is loading, from the server's
+  HTML on. The silhouette is hidden from a screen reader.
+- **Four tokens** on `.uc-root`, each falling back on core's where it is
+  loaded:
+  - `--uc-delay-stale` (`--u-delay-stale`, 200ms): how long a reloaded course
+    waits before it dims.
+  - `--uc-silhouette`: the shapes' colour, 10 % of the text colour.
+  - `--uc-ease-swell` (`--u-ease-swell`): the band's easing.
+  - `--uc-fade` (`--u-duration-medium` and `--u-ease-out`): the fade between
+    silhouette and course.
+
+  The plot's `data-stale` and `data-arriving` are not part of the styling API
+  (ADR-0045).
+
+---
+
 ## 0.11.0 – A chart bound to its rows, with a view of its own (Oct. 2026)
 
 Two efforts in one break, released together with `@umriss-ui/table` and

package/README.md

@@ -106,6 +106,9 @@ loaded: Geist when the application has it, the system fonts otherwise.
   onViewChange })` takes a start and reports every change, always the whole
   view - charts in step hand each other theirs; `setDomain`, `toggleSeries`,
   `showOnly` and `showAllSeries` stand on what the hook hands back.
+* **A chart that is loading says so**, as the table does: `loading` keeps
+  and dims a course already drawn, and where there is nothing yet a
+  silhouette of the chart to come shimmers in the plot (ADR-0042).
 * **The instruments**: `LimitLine` and `LimitBand`, `ControlChart` with its four
   rule violations, `pareto()` with a collected remainder, and a working-time
   axis that takes the empty hours out and marks every removed span.

package/dist/charts.css

@@ -1 +1 @@
-@layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.uc-root,.uc-root:before,.uc-root:after{box-sizing:border-box}.uc-plot,.uc-plot:before,.uc-plot:after{box-sizing:border-box}.uc-sr,.uc-sr:before,.uc-sr:after{box-sizing:border-box}.uc-axes,.uc-axes:before,.uc-axes:after{box-sizing:border-box}.uc-axis,.uc-axis:before,.uc-axis:after{box-sizing:border-box}.uc-axis-line,.uc-axis-line:before,.uc-axis-line:after{box-sizing:border-box}.uc-axis-y,.uc-axis-y:before,.uc-axis-y:after{box-sizing:border-box}.uc-axis-left,.uc-axis-left:before,.uc-axis-left:after{box-sizing:border-box}.uc-axis-right,.uc-axis-right:before,.uc-axis-right:after{box-sizing:border-box}.uc-axis-x,.uc-axis-x:before,.uc-axis-x:after{box-sizing:border-box}.uc-axis-bottom,.uc-axis-bottom:before,.uc-axis-bottom:after{box-sizing:border-box}.uc-axis-top,.uc-axis-top:before,.uc-axis-top:after{box-sizing:border-box}.uc-tick,.uc-tick:before,.uc-tick:after{box-sizing:border-box}.uc-tick-mark,.uc-tick-mark:before,.uc-tick-mark:after{box-sizing:border-box}.uc-tick-label,.uc-tick-label:before,.uc-tick-label:after{box-sizing:border-box}.uc-axis-title,.uc-axis-title:before,.uc-axis-title:after{box-sizing:border-box}.uc-empty,.uc-empty:before,.uc-empty:after{box-sizing:border-box}.uc-legend,.uc-legend:before,.uc-legend:after{box-sizing:border-box}.uc-legend-top,.uc-legend-top:before,.uc-legend-top:after{box-sizing:border-box}.uc-legend-bottom,.uc-legend-bottom:before,.uc-legend-bottom:after{box-sizing:border-box}.uc-legend-item,.uc-legend-item:before,.uc-legend-item:after{box-sizing:border-box}.uc-legend-chip,.uc-legend-chip:before,.uc-legend-chip:after{box-sizing:border-box}.uc-legend-mark,.uc-legend-mark:before,.uc-legend-mark:after{box-sizing:border-box}.uc-show-all,.uc-show-all:before,.uc-show-all:after{box-sizing:border-box}.uc-show-all-bottom,.uc-show-all-bottom:before,.uc-show-all-bottom:after{box-sizing:border-box}.uc-data-key,.uc-data-key:before,.uc-data-key:after{box-sizing:border-box}.uc-data-panel,.uc-data-panel:before,.uc-data-panel:after{box-sizing:border-box}.uc-data-table,.uc-data-table:before,.uc-data-table:after{box-sizing:border-box}.uc-tooltip,.uc-tooltip:before,.uc-tooltip:after{box-sizing:border-box}.uc-tooltip-head,.uc-tooltip-head:before,.uc-tooltip-head:after{box-sizing:border-box}.uc-tooltip-list,.uc-tooltip-list:before,.uc-tooltip-list:after{box-sizing:border-box}.uc-tooltip-row,.uc-tooltip-row:before,.uc-tooltip-row:after{box-sizing:border-box}.uc-tooltip-chip,.uc-tooltip-chip:before,.uc-tooltip-chip:after{box-sizing:border-box}.uc-tooltip-name,.uc-tooltip-name:before,.uc-tooltip-name:after{box-sizing:border-box}.uc-tooltip-total,.uc-tooltip-total:before,.uc-tooltip-total:after{box-sizing:border-box}.uc-tooltip-part,.uc-tooltip-part:before,.uc-tooltip-part:after{box-sizing:border-box}.uc-tooltip-x,.uc-tooltip-x:before,.uc-tooltip-x:after{box-sizing:border-box}.uc-tooltip-value,.uc-tooltip-value:before,.uc-tooltip-value:after{box-sizing:border-box}.uc-measure,.uc-measure:before,.uc-measure:after{box-sizing:border-box}.uc-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-limit-mark,.uc-limit-mark:before,.uc-limit-mark:after{box-sizing:border-box}.uc-break,.uc-break:before,.uc-break:after{box-sizing:border-box}.uc-root{--uc-color-axis: var(--u-edge-color-strong, rgba(23, 23, 23, .17));--uc-color-grid: var(--u-hairline, rgba(23, 23, 23, .06));--uc-color-text: var(--u-color-text-muted, #71717a);--uc-color-bg: var(--u-color-surface, #ffffff);--uc-font: var( --u-font-sans, "Geist Sans", "Geist", -apple-system, "Segoe UI", system-ui, sans-serif );--uc-font-mono: var( --u-font-mono, "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace );--uc-color-warning: var(--u-color-warning, #8a5c00);--uc-color-alarm: var(--u-color-danger, #b13636);--uc-color-ok: var(--u-color-success, #217a4b);--uc-series-1: var(--u-chart-1, #2563eb);--uc-series-2: var(--u-chart-2, #db2777);--uc-series-3: var(--u-chart-3, #059669);--uc-series-4: var(--u-chart-4, #d97706);--uc-series-5: var(--u-chart-5, #7c3aed);--uc-series-6: var(--u-chart-6, #0891b2);--uc-size-tick: 11.5px;--uc-size-title: 12px;--uc-size-legend: 12.5px;--uc-size-tooltip: 12px;--uc-leading-label: 1.25;--uc-leading-text: 1.35;--uc-radius: 6px;--uc-radius-chip: 2px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);--uc-focus-ring: var(--u-focus-ring, 0 0 0 2px #0e7d72);--uc-color-hover: var(--u-color-surface-sunken, #f4f4f5);--uc-color-pressed: var(--u-color-surface-pressed, #e9e9eb);--uc-transition-state: var(--u-transition, .12s cubic-bezier(.22, 1, .36, 1));--uc-transition: 80ms var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));position:relative;display:flex;flex-direction:column;font-family:var(--uc-font);color:var(--uc-color-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.uc-plot{position:relative;flex:1 1 auto;min-height:0;min-width:0}.uc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.uc-plot:focus{outline:none}.uc-plot:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-plot>canvas{box-sizing:border-box}.uc-plot>canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;pointer-events:none}.uc-axes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-show-all{position:absolute;top:0;left:0;z-index:1;translate:calc(-100% - 6px) 6px;padding:2px 8px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);font:inherit;font-size:var(--uc-size-tick);line-height:var(--uc-leading-text);color:var(--uc-color-text);white-space:nowrap;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}.uc-show-all-bottom{translate:calc(-100% - 6px) calc(-100% - 6px)}.uc-show-all:hover{background:var(--uc-color-hover)}.uc-show-all:active{background:var(--uc-color-pressed)}.uc-show-all:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot,.uc-root:has(>.uc-data-panel)>.uc-show-all{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item,.uc-show-all{transition:none}}.uc-measure{position:absolute;top:0;left:0;right:auto;bottom:auto;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone],.uc-limit-label[data-own]{color:var(--uc-color-text)}.uc-limit-mark{display:inline-block;width:10px;margin-right:4px;vertical-align:middle;border-top:2px dashed currentColor}.uc-limit-label[data-role=control]>.uc-limit-mark{border-top-style:solid}.uc-limit-label[data-role=zone]>.uc-limit-mark{border-top-style:dotted}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break:before,.uc-break:after{content:"";position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break:before{left:1px}.uc-break:after{left:4px}}
+@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;top:0;right:0;bottom:0;left: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;top:0;right:0;bottom:0;left:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-show-all{position:absolute;top:0;left:0;z-index:1;translate:calc(-100% - 6px) 6px;padding:2px 8px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);font:inherit;font-size:var(--uc-size-tick);line-height:var(--uc-leading-text);color:var(--uc-color-text);white-space:nowrap;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}.uc-show-all-bottom{translate:calc(-100% - 6px) calc(-100% - 6px)}.uc-show-all:hover{background:var(--uc-color-hover)}.uc-show-all:active{background:var(--uc-color-pressed)}.uc-show-all:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot,.uc-root:has(>.uc-data-panel)>.uc-show-all{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item,.uc-show-all{transition:none}.uc-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;top:0;left:0;right:auto;bottom:auto;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone],.uc-limit-label[data-own]{color:var(--uc-color-text)}.uc-limit-mark{display:inline-block;width:10px;margin-right:4px;vertical-align:middle;border-top:2px dashed currentColor}.uc-limit-label[data-role=control]>.uc-limit-mark{border-top-style:solid}.uc-limit-label[data-role=zone]>.uc-limit-mark{border-top-style:dotted}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break:before,.uc-break:after{content:"";position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break:before{left:1px}.uc-break:after{left:4px}}