@lilt-ui/charts 0.8.0 → 0.9.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 +17 -0
- package/dist/activity-ring.d.ts +4 -1
- package/dist/chart-context.d.ts +1 -1
- package/dist/engine/lifecycle.d.ts +2 -2
- package/dist/finance.js +382 -378
- package/dist/index.js +2599 -2547
- package/dist/lifecycle/skeleton-exit.d.ts +28 -0
- package/dist/{skeleton-block-Bs6JLXVq.js → skeleton-block-9CpTCbZr.js} +2298 -2269
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.9.0
|
|
4
|
+
|
|
5
|
+
Every chart now leaves its loading skeleton the same way.
|
|
6
|
+
|
|
7
|
+
### Loading
|
|
8
|
+
|
|
9
|
+
- 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.
|
|
10
|
+
- A leaving skeleton keeps exactly the shape it was looping in. Bars no longer flash a different, unanimated skeleton as data lands.
|
|
11
|
+
- The fade always completes; on line, area and bar charts the data starts rising just before it ends, so the plot is never empty.
|
|
12
|
+
- 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.
|
|
13
|
+
|
|
14
|
+
## 0.8.1
|
|
15
|
+
|
|
16
|
+
### Fixes
|
|
17
|
+
|
|
18
|
+
- 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.
|
|
19
|
+
|
|
3
20
|
## 0.8.0
|
|
4
21
|
|
|
5
22
|
A new tooltip, a dotted y axis, a band that lights the hovered column, and a readout that never covers the marks.
|
package/dist/activity-ring.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { SkeletonExitOrigin } from './lifecycle/skeleton-exit';
|
|
1
2
|
import { ReactNode } from 'react';
|
|
2
3
|
import { ChartLoadingStyle, ChartMotion } from './types';
|
|
3
4
|
export interface ActivitySelection<Row> {
|
|
@@ -24,6 +25,8 @@ export interface ActivityRingProps<Row> {
|
|
|
24
25
|
/** `loading` keeps showing the last accepted day until new data is ready. */
|
|
25
26
|
status?: 'ready' | 'loading';
|
|
26
27
|
loadingStyle?: ChartLoadingStyle;
|
|
28
|
+
/** Set while the skeleton leaves (lifecycle/skeleton-exit.tsx): where it sinks to. */
|
|
29
|
+
skeletonLeaving?: SkeletonExitOrigin;
|
|
27
30
|
/** A new key drops the accepted day and any selection. */
|
|
28
31
|
resetKey?: string | number;
|
|
29
32
|
motion?: ChartMotion;
|
|
@@ -43,5 +46,5 @@ export declare function activitySlots<Row>(data: readonly Row[], hour: (row: Row
|
|
|
43
46
|
* The 24-hour dot ring inside `ActivityRingCard`: one column of dots per time slot, filled by
|
|
44
47
|
* how much happened then. One tab stop; arrow keys step around the day and Enter pins a slot.
|
|
45
48
|
*/
|
|
46
|
-
export declare function ActivityRing<Row>({ data, hour, value, maximum, bucketMinutes, dotDensity, unit, formatValue, center, onSelectionChange, status, loadingStyle, resetKey, motion, height, depth, className, 'aria-label': ariaLabel, }: ActivityRingProps<Row>): import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
export declare function ActivityRing<Row>({ data, hour, value, maximum, bucketMinutes, dotDensity, unit, formatValue, center, onSelectionChange, status, loadingStyle, skeletonLeaving, resetKey, motion, height, depth, className, 'aria-label': ariaLabel, }: ActivityRingProps<Row>): import("react/jsx-runtime").JSX.Element;
|
|
47
50
|
export {};
|
package/dist/chart-context.d.ts
CHANGED
|
@@ -89,7 +89,7 @@ export interface ChartContextValue<T> {
|
|
|
89
89
|
revealProgress: number;
|
|
90
90
|
reducedMotion: boolean;
|
|
91
91
|
transitionDuration: number;
|
|
92
|
-
transitionKind: 'initial' | '
|
|
92
|
+
transitionKind: 'initial' | 'matched-update' | 'topology-update' | null;
|
|
93
93
|
axis: {
|
|
94
94
|
x: readonly AxisTick[];
|
|
95
95
|
y: readonly AxisTick[];
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export type LifecyclePhase = 'pending' | 'loading' | '
|
|
1
|
+
export type LifecyclePhase = 'pending' | 'loading' | 'revealing' | 'ready' | 'updating' | 'empty' | 'error';
|
|
2
2
|
export interface LifecycleGeneration {
|
|
3
3
|
next: () => number;
|
|
4
4
|
current: () => number;
|
|
5
5
|
isCurrent: (generation: number) => boolean;
|
|
6
6
|
}
|
|
7
7
|
export declare function createLifecycleGeneration(): LifecycleGeneration;
|
|
8
|
-
export declare function durationForPhase(phase: 'initial' | '
|
|
8
|
+
export declare function durationForPhase(phase: 'initial' | 'matched-update' | 'topology-update', reducedMotion: boolean, animateIn?: boolean): number;
|
|
9
9
|
/** Preserve full data fidelity while avoiding repeated per-sample geometry tweens. */
|
|
10
10
|
export declare function skipDataTweenForWorkload(sampleCount: number, millisecondsSinceLastUpdate: number): boolean;
|