@lilt-ui/charts 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.9.0
+
+Every chart now leaves its loading skeleton the same way.
+
+### Loading
+
+- 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.
+- A leaving skeleton keeps exactly the shape it was looping in. Bars no longer flash a different, unanimated skeleton as data lands.
+- The fade always completes; on line, area and bar charts the data starts rising just before it ends, so the plot is never empty.
+- 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.
+
 ## 0.8.1
 
 ### Fixes

package/dist/activity-ring.d.ts

@@ -1,3 +1,4 @@
+import { SkeletonExitOrigin } from './lifecycle/skeleton-exit';
 import { ReactNode } from 'react';
 import { ChartLoadingStyle, ChartMotion } from './types';
 export interface ActivitySelection<Row> {
@@ -24,6 +25,8 @@ export interface ActivityRingProps<Row> {
     /** `loading` keeps showing the last accepted day until new data is ready. */
     status?: 'ready' | 'loading';
     loadingStyle?: ChartLoadingStyle;
+    /** Set while the skeleton leaves (lifecycle/skeleton-exit.tsx): where it sinks to. */
+    skeletonLeaving?: SkeletonExitOrigin;
     /** A new key drops the accepted day and any selection. */
     resetKey?: string | number;
     motion?: ChartMotion;
@@ -43,5 +46,5 @@ export declare function activitySlots<Row>(data: readonly Row[], hour: (row: Row
  * The 24-hour dot ring inside `ActivityRingCard`: one column of dots per time slot, filled by
  * how much happened then. One tab stop; arrow keys step around the day and Enter pins a slot.
  */
-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;
+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;
 export {};