@umriss-ui/charts 0.3.0-rc.0 → 0.3.0-rc.1
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 +28 -5
- package/README.md +16 -14
- package/dist/charts.css +1 -1
- package/dist/charts.js +645 -630
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -21,13 +21,36 @@ specs; the document itself came into being only with
|
|
|
21
21
|
`library-audit` 08. They are grouped by unit of delivery, not by commit, and were
|
|
22
22
|
never published.
|
|
23
23
|
|
|
24
|
-
**Release candidates.** `0.3.0-rc.0`
|
|
25
|
-
|
|
24
|
+
**Release candidates.** `0.3.0-rc.0` was the first version on the registry and
|
|
25
|
+
`0.3.0-rc.1` is the current one, under the tag `next`:
|
|
26
|
+
`pnpm add @umriss-ui/charts@next`. A release
|
|
26
27
|
candidate promises nothing a `0.x` does not already fail to promise; it says the
|
|
27
28
|
interface is still expected to move before `0.3.0`.
|
|
28
29
|
|
|
29
30
|
---
|
|
30
31
|
|
|
32
|
+
## 0.3.0-rc.1 – Styles that load themselves, and touch nothing else (Sep. 2026)
|
|
33
|
+
|
|
34
|
+
Delivery report for `.scratch/styles-without-side-effects/spec.md`, the charts'
|
|
35
|
+
share (ADR-0021).
|
|
36
|
+
|
|
37
|
+
### Changed
|
|
38
|
+
|
|
39
|
+
- **No stylesheet import any more.** `dist/charts.js` imports its own
|
|
40
|
+
stylesheet; `@umriss-ui/charts/styles.css` stays exported and is optional.
|
|
41
|
+
- **The classes are `uc-*`.** Every `kc-*` class of the DOM - `.kc-root`,
|
|
42
|
+
`.kc-plot`, `.kc-axis`, `.kc-tooltip` and the rest - is `uc-*`. A selector an
|
|
43
|
+
application wrote against them changes its prefix.
|
|
44
|
+
- **Cascade layer.** The rules lie in `umriss.components` and select only the
|
|
45
|
+
chart's own elements.
|
|
46
|
+
- **Light and dark follow `color-scheme`.** Canvas colours are resolved through
|
|
47
|
+
the browser, so a `light-dark()` token draws in the scheme that applies. The
|
|
48
|
+
resolved theme is read anew when an attribute of `<html>` changes (a
|
|
49
|
+
`style="color-scheme: …"`, a class) or the system preference does;
|
|
50
|
+
`invalidateTheme()` stays for a switch on another ancestor.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
31
54
|
## 0.3.0-rc.0 – One language, one scope (Sep. 2026)
|
|
32
55
|
|
|
33
56
|
Delivery report for `.scratch/english-and-umriss-ui/spec.md`, the charts' share.
|
|
@@ -69,7 +92,7 @@ case table and that test therefore moved in a single commit; a divergence stays
|
|
|
69
92
|
red test and not a report from the field.
|
|
70
93
|
|
|
71
94
|
`--uc-color-alarm` is unchanged. What moved beside the model is
|
|
72
|
-
`.
|
|
95
|
+
`.uc-limit-label[data-severity="warnung"]`, which now reads `"warning"` — the
|
|
73
96
|
same word `tone` has carried all along.
|
|
74
97
|
|
|
75
98
|
## 0.3.0-rc.0 – Where the library contradicted itself (Sep. 2026)
|
|
@@ -104,10 +127,10 @@ on first mounting as before in JSX order, after that a returning series gets its
|
|
|
104
127
|
colour back. A series without a `name` still takes the colour of its position and
|
|
105
128
|
warns in DEV when that shifts. Drawing happens unchanged in registration order.
|
|
106
129
|
|
|
107
|
-
**`role="img"` and `aria-label` stand at the plot area** (`.
|
|
130
|
+
**`role="img"` and `aria-label` stand at the plot area** (`.uc-plot`), no longer
|
|
108
131
|
at the root. The root contains the legend, and the descendants of an image are
|
|
109
132
|
presentation to a screen reader — the legend was unreachable. Whoever looked for
|
|
110
|
-
the role at `.
|
|
133
|
+
the role at `.uc-root` finds it one level deeper.
|
|
111
134
|
|
|
112
135
|
### New
|
|
113
136
|
|
package/README.md
CHANGED
|
@@ -24,15 +24,10 @@ React 18 or 19 as a peer, and nothing else. `@umriss-ui/core` is **not** a
|
|
|
24
24
|
dependency and not a peer dependency — if an application uses both packages, it
|
|
25
25
|
does so because it chose to, not because this one required it (ADR-0020).
|
|
26
26
|
|
|
27
|
-
No fonts are shipped either. The charts use Geist when the application loads it
|
|
28
|
-
(`@fontsource/geist-sans`, `@fontsource/geist-mono`) and the system fonts
|
|
29
|
-
otherwise.
|
|
30
|
-
|
|
31
27
|
## The smallest chart that runs
|
|
32
28
|
|
|
33
29
|
```tsx
|
|
34
30
|
import { Chart, Line, XAxis, YAxis, Tooltip } from "@umriss-ui/charts";
|
|
35
|
-
import "@umriss-ui/charts/styles.css";
|
|
36
31
|
|
|
37
32
|
interface Point {
|
|
38
33
|
t: number;
|
|
@@ -61,15 +56,22 @@ export function Course() {
|
|
|
61
56
|
A series is an element, not an entry in a configuration object: the order in the
|
|
62
57
|
JSX decides what lies over what, and at the same time the palette colour.
|
|
63
58
|
|
|
64
|
-
##
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
59
|
+
## Styles
|
|
60
|
+
|
|
61
|
+
Nothing to import. `dist/charts.js` loads its own stylesheet; the axes, ticks,
|
|
62
|
+
legend and tooltip are DOM and take their values from it, and only the series
|
|
63
|
+
are drawn on canvas. The stylesheet touches nothing but the chart's own `uc-`
|
|
64
|
+
elements and lies in the layer `umriss.components`, so an application's CSS
|
|
65
|
+
wins. `@umriss-ui/charts/styles.css` stays exported for setups that link
|
|
66
|
+
stylesheets by hand.
|
|
67
|
+
|
|
68
|
+
**Colours** come from `--uc-*` variables that fall back to the tokens of
|
|
69
|
+
`@umriss-ui/core` where they exist and to literals where they do not. **Light and
|
|
70
|
+
dark** follow the application's `color-scheme`: the canvas colours are resolved
|
|
71
|
+
anew when the root element's attributes or the system preference change;
|
|
72
|
+
`invalidateTheme()` covers a switch made on another ancestor. **Fonts** are not
|
|
73
|
+
loaded: Geist when the application has it, the system fonts otherwise.
|
|
74
|
+
**Browsers:** Chrome 123, Firefox 120, Safari 17.5 or newer.
|
|
73
75
|
|
|
74
76
|
## What it can do
|
|
75
77
|
|
package/dist/charts.css
CHANGED
|
@@ -1 +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-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-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-radius: 6px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);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:1.25;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:1.25;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-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:1.35;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:2px;corner-shape:squircle}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 80ms ease-out;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:12px;line-height:1.35;color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:11.5px;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:2px;corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(prefers-reduced-motion:reduce){.uc-tooltip{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:1.25;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}}
|