liveline 0.0.3 → 0.0.4
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/README.md +22 -1
- package/dist/index.cjs +385 -95
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +386 -96
- package/package.json +9 -10
package/README.md
CHANGED
|
@@ -66,6 +66,16 @@ The component fills its parent container. Set a height on the parent. Pass `data
|
|
|
66
66
|
| `valueMomentumColor` | `boolean` | `false` | Color the value text green/red by momentum |
|
|
67
67
|
| `degen` | `boolean \| DegenOptions` | `false` | Burst particles + chart shake on momentum swings |
|
|
68
68
|
|
|
69
|
+
**State**
|
|
70
|
+
|
|
71
|
+
| Prop | Type | Default | Description |
|
|
72
|
+
|------|------|---------|-------------|
|
|
73
|
+
| `loading` | `boolean` | `false` | Breathing line animation — use while waiting for data |
|
|
74
|
+
| `paused` | `boolean` | `false` | Smoothly freeze chart scrolling; resume catches up to real time |
|
|
75
|
+
| `emptyText` | `string` | `'No data to display'` | Text shown in the empty state |
|
|
76
|
+
|
|
77
|
+
When `loading` flips to `false` with data present, the flat loading line morphs into the actual chart shape (line, fill, grid, and badge all animate in). When `data` is empty and `loading` is `false`, a minimal "No data" empty state is shown.
|
|
78
|
+
|
|
69
79
|
**Time**
|
|
70
80
|
|
|
71
81
|
| Prop | Type | Default | Description |
|
|
@@ -143,6 +153,17 @@ The component fills its parent container. Set a height on the parent. Pass `data
|
|
|
143
153
|
/>
|
|
144
154
|
```
|
|
145
155
|
|
|
156
|
+
### Loading + pause
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
<Liveline
|
|
160
|
+
data={data}
|
|
161
|
+
value={value}
|
|
162
|
+
loading={isConnecting}
|
|
163
|
+
paused={!isTabVisible}
|
|
164
|
+
/>
|
|
165
|
+
```
|
|
166
|
+
|
|
146
167
|
### Orderbook (orderbook data + particles)
|
|
147
168
|
|
|
148
169
|
```tsx
|
|
@@ -160,7 +181,7 @@ The component fills its parent container. Set a height on the parent. Pass `data
|
|
|
160
181
|
|
|
161
182
|
- **Canvas rendering** — single `<canvas>` element, no DOM nodes per data point
|
|
162
183
|
- **requestAnimationFrame** loop pauses when the tab is hidden
|
|
163
|
-
- **
|
|
184
|
+
- **Fritsch-Carlson monotone splines** for smooth curves — no overshoots beyond local min/max
|
|
164
185
|
- **Frame-rate-independent lerp** on value, Y-axis range, badge color, and scrub opacity
|
|
165
186
|
- **ResizeObserver** tracks container size — no per-frame layout reads
|
|
166
187
|
- **Theme derivation** — full palette from one accent color + light/dark mode
|