@lilt-ui/charts 0.12.1 → 0.12.2
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 +270 -262
- package/dist/finance.js +2 -2
- package/dist/index.js +2 -2
- package/dist/interaction/comparison-layer.d.ts +3 -1
- package/dist/{report-context-DLA3I57K.js → report-context-CIUa6iiD.js} +1 -0
- package/dist/{skeleton-block-ClcPgFdK.js → skeleton-block-DIgcA9t6.js} +476 -371
- package/dist/styles.css +1 -1
- package/dist/watch.js +1 -1
- package/package.json +85 -85
package/CHANGELOG.md
CHANGED
|
@@ -1,262 +1,270 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
## 0.12.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
-
|
|
8
|
-
- The band
|
|
9
|
-
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
- The
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
## 0.
|
|
32
|
-
|
|
33
|
-
Every chart
|
|
34
|
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
###
|
|
68
|
-
|
|
69
|
-
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
###
|
|
87
|
-
|
|
88
|
-
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
###
|
|
104
|
-
|
|
105
|
-
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
###
|
|
112
|
-
|
|
113
|
-
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
###
|
|
126
|
-
|
|
127
|
-
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
- Line and area
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
###
|
|
156
|
-
|
|
157
|
-
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
-
|
|
166
|
-
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
-
|
|
171
|
-
-
|
|
172
|
-
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
###
|
|
183
|
-
|
|
184
|
-
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
###
|
|
191
|
-
|
|
192
|
-
-
|
|
193
|
-
-
|
|
194
|
-
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
- `
|
|
213
|
-
- `
|
|
214
|
-
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
###
|
|
235
|
-
|
|
236
|
-
- `
|
|
237
|
-
- `
|
|
238
|
-
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
- `
|
|
249
|
-
- `
|
|
250
|
-
-
|
|
251
|
-
- `
|
|
252
|
-
- `
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 0.12.2
|
|
4
|
+
|
|
5
|
+
Range comparisons show where they stand while you draw them.
|
|
6
|
+
|
|
7
|
+
- While a comparison is drawn, each wick shows its x label just above the plot, so you know where to let go. Wicks close together share one label, and the labels blur out as the result lands. Reduced motion only fades them.
|
|
8
|
+
- The comparison band and wicks fade from the top in the first series colour, and each endpoint has a capsule grip with a soft halo.
|
|
9
|
+
- On a ghost card, the badge stands on its own as a rounded glass bar above the header instead of overlapping it.
|
|
10
|
+
|
|
11
|
+
## 0.12.1
|
|
12
|
+
|
|
13
|
+
Pins let go the way you expect, and the hover band wears the colour of what it lights.
|
|
14
|
+
|
|
15
|
+
- Every card that pins (radial, heatmap, funnel, horizontal bar, radar, sankey, scatter, slope, activity ring, and the treemap, calendar, timeline and strip cards) releases its pin on any press that misses the marks: empty plot, elsewhere in the card, or off it, as area and bar charts already did. Escape releases after a mouse pin too. Presses on controls, such as legend items and the period menu, keep the pin.
|
|
16
|
+
- The band behind an inspected column takes that column's colour: a falling candle lights red, a rising one green, and the volume pane follows its bars. With several series in a column, it takes the colour of the one being read.
|
|
17
|
+
- The docs offer `compare` (off, on, or `'badge'`) in Props on every chart that reads change over time.
|
|
18
|
+
- The README covers loading and empty states, long series, and how pins let go, and drops the pre-1.0 upgrade notes.
|
|
19
|
+
|
|
20
|
+
## 0.12.0
|
|
21
|
+
|
|
22
|
+
Hover lands with the column it reads, and every chart moves a little more like a real object.
|
|
23
|
+
|
|
24
|
+
- The crosshair, band, pills and pins share one quick, critically damped spring, so the readout arrives with the column instead of trailing it. Fast moves blur slightly and clear as they land; reduced motion never blurs.
|
|
25
|
+
- Areas lift in on first load, from just below into place on the bars' spring, softly blurred until they land. A new period on an area chart runs left to right instead of moving every point at once.
|
|
26
|
+
- Horizontal bar rows move in one movement: a leaving row fades where it was while the rest close its gap and re-rank together, and rows that cross pass over and under each other instead of clipping through.
|
|
27
|
+
- Bars coloured per row, such as candlestick volume, keep their own colour while they leave.
|
|
28
|
+
- Charts load only the Motion features they use: a minimal line card drops from about 137 kB to 125 kB of gzipped JavaScript. Layout animation, used only where rows or board cards reorder, arrives in its own chunk after first paint.
|
|
29
|
+
- `llms.txt` groups the cards by job with a one-line hint each, and the READMEs end with a two-line prompt that hands Lilt to a coding agent.
|
|
30
|
+
|
|
31
|
+
## 0.11.0
|
|
32
|
+
|
|
33
|
+
Every chart has a quiet empty state, and it can be yours.
|
|
34
|
+
|
|
35
|
+
- A period with no data shows the same empty state on every card family: a still dot field around "No data for this period" by default, or `empty="shape"` for the chart's own outline at a whisper behind the message. Neither moves, so an empty chart never reads as loading.
|
|
36
|
+
- `empty` takes a built-in look, any element of your own, or `null` for nothing. The chart places it in the plot area, inset to the card's padding; an empty card keeps its size. `ChartEmpty` is the built-in look as a component, so `empty={<ChartEmpty>No visits yet</ChartEmpty>}` keeps it with your words. Composed charts take `empty` on `Chart`.
|
|
37
|
+
- Empty cards no longer claim a value: the headline reads a dash instead of 0, a supplied `delta` chip steps aside, and every family uses the same wording. An empty radial card keeps its height instead of collapsing to its header.
|
|
38
|
+
|
|
39
|
+
## 0.10.0
|
|
40
|
+
|
|
41
|
+
Every chart family now moves with one motion language, and cards are softer by default.
|
|
42
|
+
|
|
43
|
+
- Added `TreemapChartCard` for flat or grouped part-to-whole layouts, `CalendarHeatmapCard` for UTC daily activity, `TimelineChartCard` for intervals with overlapping lanes, and `StripChartCard` for strip/beeswarm distributions.
|
|
44
|
+
- All four include flat/depth paint, shared shimmer/draw/breathe skeletons and the existing opacity exit, reduced motion, retained rows during refresh, header composition, keyboard inspection, pin/release, and consumer-owned selection readouts.
|
|
45
|
+
- Treemap has its own showcase page. The other additions live as forms of Heatmap, Range, and Scatter, with matching Preview/Code, data, props, shared settings, and loading controls.
|
|
46
|
+
- Period switches morph on lines and areas. When time or number data changes to rows that share x values with the old ones, such as 7 → 21 days, the chart draws both sets while the x and y domains glide: shared points move to their new places, new days arrive from the edge and dropped days leave through it, in one layer. Unrelated rows still cross-fade; reduced motion still switches instantly.
|
|
47
|
+
- Every chart family moves the same way. Horizontal bar rows blur while they travel to a new rank and drain away on leaving; radial slices land on the spring, departing slices collapse and new ones blur in; activity ring columns regrow dot by dot round the day; progress and stat rings land on the spring; funnel stages, radar vertices and sankey flows reshape from where they are instead of redrawing; scatter points, observation marks (treemap, calendar, timeline, strip) travel on the spring and departing ones shrink away; heatmap and calendar cells re-colour in a diagonal ripple. A light motion blur passes over each family as its period changes (line, area, combo, range, box and finance charts included; live charts excepted), and nothing animates on a plain resize. Data arriving after the last row grows out of it, so a line draws itself forward.
|
|
48
|
+
- Bars snap when the set of bars changes, such as a shorter period. New bars rise out of the floor with a soft blur, rippling in; leaving bars drain back into it and narrow toward the gap, which the rest start closing partway through; bars that stay spring to their new place, width and height. A light motion blur passes over the plot as it happens. Bars are tracked by category on category axes, so a reordered chart moves each bar to its new slot. The first entrance uses the same arrival, so loading a page and changing period feel like one motion. Value-only updates are unchanged, and reduced motion switches instantly.
|
|
49
|
+
- Showing or hiding a line or area series glides the y scale in a single layer while the series fades, instead of cross-fading two charts. Bars and stacks keep their existing transitions.
|
|
50
|
+
- Cards draw Lilt's own period select instead of the native one: a pill that opens a frosted list of periods, with a blur swap of the chosen label, a highlight that travels between options, and the listbox keys (arrows, Home/End, Enter, Escape, type-ahead) returning focus to the pill. `ChartComponentsProvider rangeSelect={…}` swaps in your own select for every card below it, typed by `ChartRangeSelectProps`.
|
|
51
|
+
- Softer cards by default. Elevated cards use a 24px radius and are lifted by tone and a hairline shadow instead of a border. The period select, card actions, delta chip, and axis hover badges are pills. Legend tiles lose their outline. The soft and accent tooltips are frosted glass (opaque under reduced transparency) with an 18px radius. Area fills fade fully to transparent. Colors, palettes, plot backgrounds (dots stay the default), and geometry are unchanged; `--lilt-card-radius` still overrides the radius.
|
|
52
|
+
|
|
53
|
+
## 0.9.2
|
|
54
|
+
|
|
55
|
+
Cards can fit inside an existing dashboard widget without duplicating its heading and legend.
|
|
56
|
+
|
|
57
|
+
### Card composition
|
|
58
|
+
|
|
59
|
+
- Every chart card accepts an optional `title`, an independent `aria-label`, and `header={false}`. Omitted titles render no title element. Hiding the header removes the headline, delta and period controls without reserving their space. Depth summary stats follow the header; order book column headings and stat ring graphics remain.
|
|
60
|
+
- Cards with legend layouts accept `legend={false}` without changing their data, colours or marks. Existing layouts and defaults remain. `surface="ghost"` continues to change only the visual frame.
|
|
61
|
+
- Radial cards keep custom centre content, controlled selection and pointer inspection with the header and legend hidden. The graphic supports keyboard inspection and pinning, with a screen-reader data table and no stale readings while loading.
|
|
62
|
+
|
|
63
|
+
### Fixes
|
|
64
|
+
|
|
65
|
+
- Escape releases a radial pin in every legend layout, including inline, and requests `onSelectedChange(null)` for controlled selection.
|
|
66
|
+
|
|
67
|
+
### Documentation
|
|
68
|
+
|
|
69
|
+
- Family prop tables, card composition guidance, a radial Plot only preview and its generated source, package READMEs, API contract and both LLM references describe the same embedding controls.
|
|
70
|
+
|
|
71
|
+
## 0.9.1
|
|
72
|
+
|
|
73
|
+
Charts fit small dashboard widgets, and category cards share their selection with your page. From a first adoption in an existing app.
|
|
74
|
+
|
|
75
|
+
### Small and fixed-height plots
|
|
76
|
+
|
|
77
|
+
- The floating tooltip is never taller than its plot. A new `Tooltip` `density` prop, `auto` by default, switches to a compact layout when the panel would not fit: values in two columns, Unpin beside the date, and less padding. Custom content and pin actions follow along, and the panel scrolls as a last resort. `compact` and `comfortable` fix it either way.
|
|
78
|
+
- Keyboard inspection no longer opens a second panel over the tooltip. While the observation slider has keyboard focus, the plot takes the focus ring and a shown tooltip carries the key hints in its footer.
|
|
79
|
+
- `adaptive` now documents what it reserves: below 420px the readout under the plot keeps about 130px even at rest. Set `adaptive={false}` for a widget with a fixed height.
|
|
80
|
+
|
|
81
|
+
### Selection you own
|
|
82
|
+
|
|
83
|
+
- `RadialChartCard`, `FunnelChartCard` and `HorizontalBarChartCard` take `selected` and `onSelectedChange`, so outside filters and a click on the chart share one pinned category. The pin follows the category's name through re-ranking and new values, and a category that leaves the data asks you to clear it.
|
|
84
|
+
- `RadialChartCard` takes `colors`, fixed colors by category name, and `center`, which replaces what the middle of a donut shows.
|
|
85
|
+
|
|
86
|
+
### Docs
|
|
87
|
+
|
|
88
|
+
- The API reference describes the cards that ship instead of the standalone families they replaced, explains category identity versus label, and states decimation as it works. A test now fails when a guide names something the package does not export.
|
|
89
|
+
|
|
90
|
+
## 0.9.0
|
|
91
|
+
|
|
92
|
+
Every chart now leaves its loading skeleton the same way.
|
|
93
|
+
|
|
94
|
+
### Loading
|
|
95
|
+
|
|
96
|
+
- When data lands, the skeleton freezes on the frame it is on, whatever point its loop has reached, then sinks toward where the chart grows from as it fades, and the chart makes its own entrance. Line, area, bar, combo, range, box plot, stat sparklines, scatter and the finance charts sink to the plot's floor; horizontal bars, funnels, sankeys, slopes and stat meters to the left edge; radials, radars, heatmaps, activity rings, progress, stat rings and order books to the centre.
|
|
97
|
+
- A leaving skeleton keeps exactly the shape it was looping in. Bars no longer flash a different, unanimated skeleton as data lands.
|
|
98
|
+
- The fade always completes; on line, area and bar charts the data starts rising just before it ends, so the plot is never empty.
|
|
99
|
+
- The exit animates transform and opacity only, so it stays smooth while the chart's first render is busy. Reduced motion and `motion="none"` swap straight to the data.
|
|
100
|
+
|
|
101
|
+
## 0.8.1
|
|
102
|
+
|
|
103
|
+
### Fixes
|
|
104
|
+
|
|
105
|
+
- Data landing on a loading chart no longer flashes the finished chart before its entrance. The skeleton blurs away first, then the chart makes its usual entrance, so the two never share the plot. In 3D the flash showed a full chart for a frame; it is gone in every loading style.
|
|
106
|
+
|
|
107
|
+
## 0.8.0
|
|
108
|
+
|
|
109
|
+
A new tooltip, a dotted y axis, a band that lights the hovered column, and a readout that never covers the marks.
|
|
110
|
+
|
|
111
|
+
### Hover
|
|
112
|
+
|
|
113
|
+
- The tooltip's date sits in a recessed well, and each row reads marker, name, value, with the value right after its name. The panel hugs its rows.
|
|
114
|
+
- With a tooltip or strip readout, the crosshair turns dotted and hovered points become rings. Pills keep their filled hover dots.
|
|
115
|
+
- `hover="strip"` docks the reading in a one-line capsule above the plot, centered on the crosshair, so it never covers the marks. The headline rests, as with the tooltip. `Tooltip` takes `layout: 'strip'`.
|
|
116
|
+
- Bar and column charts light the inspected column with a soft band behind its bars, arriving in step with the bars that light up. `spotlight={false}` turns it off along with the background spotlight.
|
|
117
|
+
- When no pill covers it, the inspected observation's x label brightens.
|
|
118
|
+
|
|
119
|
+
### Axes
|
|
120
|
+
|
|
121
|
+
- `axis="dots"` now labels the y axis: each label sits in a gutter with a node and a dotted leader across the plot, and the value pill sits on the axis. The x axis keeps its dot under every observation. Loading skeletons match.
|
|
122
|
+
|
|
123
|
+
## 0.7.1
|
|
124
|
+
|
|
125
|
+
### Fixes
|
|
126
|
+
|
|
127
|
+
- Charts inside a CSS-transformed container lay out at their real size instead of the scaled one. Charts in dialogs that scale in, zoom-to-fit dashboards and scaled previews were drawn squashed: the Cartesian plot, Sankey, Radar, Scatter, Slope, Activity Ring and the Funnel's depth look. Untransformed charts measure exactly as before.
|
|
128
|
+
|
|
129
|
+
## 0.7.0
|
|
130
|
+
|
|
131
|
+
Long lines and areas stay smooth to hover from a hundred points to a hundred thousand.
|
|
132
|
+
|
|
133
|
+
### Drawing
|
|
134
|
+
|
|
135
|
+
- Line and area marks with more observations than the plot has pixels draw each pixel column's first, last, lowest and highest observation. The ink is the same and every drawn point is a real reading; gaps and provisional or forecast runs keep their edges, and stacked layers still meet.
|
|
136
|
+
- The headline, tiles, hover, comparison, Watch and exports still read every row.
|
|
137
|
+
- `decimate` on `ChartPlot` and Cartesian cards turns this off. It is on by default.
|
|
138
|
+
|
|
139
|
+
### Fixes
|
|
140
|
+
|
|
141
|
+
- Hover no longer rebuilds the plot and reformats every value on each move when a chart is given inline `margins`, as cards do. A 1,000-point, three-layer stacked area hovers at full frame rate instead of about 12 fps.
|
|
142
|
+
- Charts with more than about 125,000 values in total draw instead of showing an empty plot. Domains, summaries, box plots, scatter, slope, portfolio and Watch no longer spread every value into a single call.
|
|
143
|
+
- Line and area runoff paths are reused between renders instead of being rebuilt on every hover.
|
|
144
|
+
|
|
145
|
+
## 0.6.0
|
|
146
|
+
|
|
147
|
+
Charts have three loading styles, with skeletons shaped for each family and refreshed palettes.
|
|
148
|
+
|
|
149
|
+
### Loading
|
|
150
|
+
|
|
151
|
+
- `loadingStyle` accepts `shimmer` (the default), `draw`, or `breathe` on charts and cards, including finance charts. `ChartLoadingStyle` is exported for typed consumers.
|
|
152
|
+
- Loading skeletons follow each chart's geometry, including candles, range marks, rings, funnels, and flows. Moving skeletons share a clock so cards on a page move together.
|
|
153
|
+
- Loading motion respects reduced-motion preferences and `motion="none"`; placeholders do not present invented readings as data.
|
|
154
|
+
|
|
155
|
+
### Palettes
|
|
156
|
+
|
|
157
|
+
- Iris uses violet, rose, and amber; Cobalt uses blue, cyan, and indigo; Emerald uses green, lime, and teal. Default series colors follow Iris, with matching light and dark palettes.
|
|
158
|
+
|
|
159
|
+
## 0.5.0
|
|
160
|
+
|
|
161
|
+
Every chart that can carry it gets depth with one prop, and legends come in five layouts.
|
|
162
|
+
|
|
163
|
+
### Depth
|
|
164
|
+
|
|
165
|
+
- `depth` gives a card depth. Every shape keeps its exact value; depth only adds light, shade and shadow, lit from the upper left.
|
|
166
|
+
- Bars, stacks, Combo and stat card bars become square blocks with a lit top and a shaded side; the front keeps the measured height. `barStyle="isometric"` gives the same look.
|
|
167
|
+
- Range bars, box plots and candle bodies become solid blocks. Box plot whiskers run through the middle of each block and the median wraps around it; candle wicks pass through the body.
|
|
168
|
+
- Radial donuts, pies, half donuts and rings, Progress rings and the stat card ring are lit tubes, with tracks cut into the card as grooves. Angles stay exact.
|
|
169
|
+
- Lines on Line, Area, Combo, stat card, Price, Indicator and Depth charts are lit tubes along their own path, with a soft shadow. Dashed references stay flat.
|
|
170
|
+
- Scatter points are lit spheres; Slope draws a tube between two spheres, and dumbbells match.
|
|
171
|
+
- The Funnel is a pipe: each stage shaded as a cylinder of its own thickness, with curved seams and rounded ends.
|
|
172
|
+
- Sankey flows are lit pipes of their exact width and nodes are small blocks.
|
|
173
|
+
- Heatmap cells are low tiles of one height; color alone still carries the value.
|
|
174
|
+
- Horizontal Bar (`barStyle="isometric"`), the stat card meter and Order book levels are solid blocks; Activity Ring dots are small pucks.
|
|
175
|
+
|
|
176
|
+
### Legends
|
|
177
|
+
|
|
178
|
+
- Cards take `legend`: `tiles` (the default), `inline`, `list` rows, tinted `pills`, or `bars` that draw each value against the largest. Radial keeps its own `list` with shares.
|
|
179
|
+
- `legendSwatch` sets the mark beside each label: `square` (the default), `dot`, or `line`.
|
|
180
|
+
- `Legend` and `ValueLegend` take the same layouts as `variant`, and the marks as `swatch`.
|
|
181
|
+
|
|
182
|
+
### Breaking
|
|
183
|
+
|
|
184
|
+
- `OrderBook` names its level count `levels`; `depth` is the 3D switch on every card.
|
|
185
|
+
|
|
186
|
+
## 0.4.0
|
|
187
|
+
|
|
188
|
+
Every chart works with a finger, and pins shared across linked charts glide from point to point.
|
|
189
|
+
|
|
190
|
+
### Touch
|
|
191
|
+
|
|
192
|
+
- Every chart family now follows your finger: swipe sideways and the highlight moves with it, swipe up or down and the page scrolls as normal, and lift to pin what is under your finger. The click a browser sends after a lift is ignored, so it cannot undo the pin.
|
|
193
|
+
- Press and hold for about a third of a second to glide in any direction without scrolling, which makes vertical layouts usable: Horizontal Bar, Heatmap, and the dumbbell layout of Slope.
|
|
194
|
+
- Horizontal Bar, Funnel, Radial, Slope, Sankey and Heatmap follow whatever is under the finger as it moves, not only where it first landed.
|
|
195
|
+
- Radar and Scatter can be tapped: a tap pins a spoke or dot and a second tap releases it. The Activity Ring reads the time slot from the finger's angle, so a finger can circle it.
|
|
196
|
+
- A long press no longer selects text or opens the system menu.
|
|
197
|
+
|
|
198
|
+
### Pins
|
|
199
|
+
|
|
200
|
+
- Clicking elsewhere on a chart in a sync group moves the shared pin there and every linked chart glides to it. Before, the linked charts treated the press as a click outside them, released the pin, and every chart's crosshair jumped to the new point.
|
|
201
|
+
- Tapping a linked chart moves the shared pin the same way.
|
|
202
|
+
- The crosshair and pins keep sliding when the page stalls for a frame, such as while linked charts re-render together, instead of leaping ahead. The pin marker now moves with the crosshair.
|
|
203
|
+
|
|
204
|
+
## 0.3.0
|
|
205
|
+
|
|
206
|
+
Charts that know what normal looks like, dashboards that arrange themselves around what needs attention, pins shared across linked charts, and segmented axes.
|
|
207
|
+
|
|
208
|
+
### Watch
|
|
209
|
+
|
|
210
|
+
- `normal` on Line and unstacked Area cards watches one series. Layers are off unless set: `limits`, `around` another series with a `tolerance`, `learn` from its own history by `week`, `day`, or `all`, `given` similar conditions, `when` to skip rows such as maintenance, `rules` across series, and `history` to learn from rows the card does not draw.
|
|
211
|
+
- The card draws the normal band, recolors unusual stretches, keeps limits on screen, and says "Unusually low since Tue 2 PM". With `breakdown`, an unusual reading says which segment caused it: "98% of the drop is Mobile Safari".
|
|
212
|
+
- `onNormalChange` reports whether the series is unusual, how badly, why, and since when.
|
|
213
|
+
- `ChartBoard` and `BoardItem`, from `@lilt-ui/charts/watch`, rank cards by what needs attention. Each card carries its state in its glass tab and on its edge: Needs attention with Acknowledge, Seen, Back to normal, or Pinned. Nothing moves while the viewer points at or works inside the board.
|
|
214
|
+
- `toast` alerts the viewer to cards that turn unusual off screen, with View; `memory` marks incidents new since the last visit; `onEvent` and its `show()` feed your own alerts.
|
|
215
|
+
- The engine is exported for custom UI: `evaluateNormal`, `trackNormalStatus`, `explainReadings`, `explainDeviation`, `describeFlag`, `describeExplanation`, `flatline`, `jump`, `boardReducer`, and `rankBoard`.
|
|
216
|
+
- `CardFrameContext` lets a container give the card inside it a tab, an edge tone, and a handle.
|
|
217
|
+
|
|
218
|
+
### Axes
|
|
219
|
+
|
|
220
|
+
- `axis="segmented"` draws rounded segments between ticks instead of one continuous line, with y labels beside them; the segment under the pointer lights up.
|
|
221
|
+
- `axis` takes one preset per axis, e.g. `{ x: 'minimal', y: 'segmented' }`; an axis left out is `minimal`.
|
|
222
|
+
- A segmented axis takes a `gradient` to read as a range: `true` fades the first series' color from faint to full, or pass colors low to high, e.g. `['var(--lilt-positive)', 'var(--lilt-negative)']`.
|
|
223
|
+
|
|
224
|
+
### Pins
|
|
225
|
+
|
|
226
|
+
- A click on a linked card pins every card in its `sync` group. The clicked card shows the pin, the others show a ghost of it that names where it came from, and any of them releases it.
|
|
227
|
+
- Alt-click (Option-click) pins one card only, and Alt+Enter does the same from the keyboard; linked cards keep following the pointer. `model.actions.pin(x, { local: true })` does it in code.
|
|
228
|
+
- Pins travel between points with the crosshair's quick spring, and the pin glyph sits centered in its marker.
|
|
229
|
+
|
|
230
|
+
## 0.2.0
|
|
231
|
+
|
|
232
|
+
Finance charts, range charts, and series that carry more than one value.
|
|
233
|
+
|
|
234
|
+
### Breaking
|
|
235
|
+
|
|
236
|
+
- A series' `interval` is replaced by `fields`: named companion values in the series' unit, such as a forecast's low and high, quartiles, or a candle's open, high, and low. Fields fit the y axis, appear in hover, and range marks read them by ID.
|
|
237
|
+
- `IntervalBand` now names the fields it draws: `<IntervalBand series="revenue" lower="low" upper="high" />`.
|
|
238
|
+
- Tooltip content (`ChartTooltipContext.series[]`) has `fields` instead of `interval`.
|
|
239
|
+
|
|
240
|
+
Cards are unchanged: `forecast={{ from, lower, upper }}` works as before. See "Upgrading from 0.1" in the README.
|
|
241
|
+
|
|
242
|
+
### Finance, from `@lilt-ui/charts/finance`
|
|
243
|
+
|
|
244
|
+
- `CandlestickChartCard`: candles, hollow candles, OHLC bars, or a price area colored by direction, with an optional linked volume pane, a log scale, and live mode. Hover reads the candle's open, high, and low beside its date.
|
|
245
|
+
- `IndicatorChartCard`: simple or exponential averages and Bollinger bands over the price, with RSI, MACD, or volume panes underneath that move together on hover. Each pane reads its own value.
|
|
246
|
+
- `PriceChartCard`: a ticker with its latest price, change, and change in money; `versus` rebases other instruments to percent change on one axis.
|
|
247
|
+
- `DepthChartCard`: how much could trade at each price on the buy and sell side, with the gap between the best prices and the total resting on each side.
|
|
248
|
+
- `OrderBook`: resting orders as an accessible table, each level with a bar sized by the total behind it; changed levels highlight briefly.
|
|
249
|
+
- `PortfolioChartCard`: what an account is worth next to what went into it, with how far it sits below its best value in a linked pane.
|
|
250
|
+
- `Candles`, a primitive that draws any number of candles into a handful of paths.
|
|
251
|
+
- Helpers: `sma`, `ema`, `rsi` (Wilder), `macd`, `bollinger`, `drawdown`, `rebase`, and `depthLevels`.
|
|
252
|
+
- `--lilt-candle-up` and `--lilt-candle-down` tokens, following `--lilt-positive` and `--lilt-negative`.
|
|
253
|
+
|
|
254
|
+
### Charts
|
|
255
|
+
|
|
256
|
+
- `RangeChartCard`: floating bars from low to high, or error bars around a value.
|
|
257
|
+
- `BoxPlotCard`: quartiles, a median, Tukey whiskers, and outliers computed from raw samples. `summarizeBox` returns the same statistics.
|
|
258
|
+
- Primitives: `RangeBar`, `ErrorBar`, and `BoxPlot`.
|
|
259
|
+
- `series.colorAt(row)` colors one bar, candle, range, or point, such as a falling day in red.
|
|
260
|
+
- `y.scale: 'log'` spaces values by ratio, with ticks on 1, 2, and 5.
|
|
261
|
+
- `ReferenceBand axis="y"` shades a range of values, such as RSI 30–70.
|
|
262
|
+
- `ChartPlot slots` gives every observation a bar-width slot, so a line pane lines up with bars or candles beside it.
|
|
263
|
+
|
|
264
|
+
### Fixes
|
|
265
|
+
|
|
266
|
+
- A card `valueFormat` with more than one minimum fraction digit, such as two-decimal prices, no longer throws.
|
|
267
|
+
|
|
268
|
+
## 0.1.0
|
|
269
|
+
|
|
270
|
+
The first release: Area, Line, Bar, Combo, Horizontal bar, Stat, Radial, Progress, Activity ring, Funnel, Heatmap, Scatter, Sankey, Radar, and Slope cards, with linked hover, targets, forecasts, and range comparison.
|