react-native-metrify 0.1.0-alpha.4 → 0.1.0-beta.2

package/CHANGELOG.md

@@ -2,6 +2,88 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.1.0-beta.2] - 2026-01-27
+
+**🎨 Animation System Overhaul**
+
+This release brings a complete animation upgrade to all 24 widgets, making them more dynamic and visually impressive.
+
+### 🚀 New Features
+- **All 24 widgets now have element-level animations** - No more basic fade in/out!
+- **New AnimatedPolygon primitive** - Consistent with AnimatedPath and AnimatedCircle for stroke drawing effects
+- **RadarChart drawing animation** - Polygon now draws like LineChart using strokeDasharray/strokeDashoffset
+- **11 widgets upgraded** with dynamic animations:
+  - **Histogram**: Bars grow from baseline with stagger
+  - **StackedBarChart**: Stacked bars grow up with stagger
+  - **WaterfallChart**: Bars grow up/down with stagger
+  - **CandlestickChart**: Candles grow from center price
+  - **FunnelChart**: Segments fade in with stagger
+  - **Heatmap**: Cells appear one by one
+  - **Treemap**: Rectangles fade in with stagger
+  - **BoxPlot**: Boxes scale + whiskers extend
+  - **SankeyDiagram**: Flow paths and nodes animate
+  - **SunburstChart**: Arc segments sweep clockwise
+  - **RadarChart**: Polygon draws with stroke animation
+
+### 🎬 Animation Types by Widget
+- **Bar Growth** (7 widgets): BarChart, GroupedBarChart, HorizontalBarChart, StackedBarChart, WaterfallChart, Histogram
+- **Path/Stroke Drawing** (8 widgets): LineChart, AreaChart, Sparkline, MultiLineSparkline, Gauge, Progress, PieChart, RadarChart
+- **Scale/Pop** (3 widgets): ScatterPlot, BubbleChart, RadarChart
+- **Element Stagger** (8 widgets): FunnelChart, Heatmap, Treemap, CandlestickChart, BoxPlot, SankeyDiagram, SunburstChart, KPI
+
+### 🐛 Bug Fixes
+- Fixed animation count bugs in 9 widgets (was using hardcoded values like 10, 20, 50)
+- Fixed RadarChart to use actual `dataPolygons.length` instead of hardcoded 10
+- Fixed worklet closure issues in complex animations
+- All widgets now properly calculate perimeter/length for stroke animations
+
+### 🔧 Technical Improvements
+- Moved `useStaggeredAnimation` calls to after data calculation
+- All animations now use actual element counts dynamically
+- Removed hardcoded animation counts that caused rendering issues
+- Created reusable AnimatedPolygon primitive in renderer-svg
+- Consistent animation architecture across all widget types
+
+### ⚠️ Breaking Changes
+- None! All changes are backwards compatible.
+
+---
+
+## [0.1.0-beta.1] - 2026-01-23
+
+**🎉 Beta Release - Significant API Improvements**
+
+This release includes major improvements and consolidations. Moving to beta indicates the API is stabilizing.
+
+### 🚀 New Features
+- **LineChart**: Added `filled` prop to create area charts (replaces AreaChart)
+- **LineChart**: Added `showGradient` prop for beautiful gradient fills when `filled={true}`
+- **ScatterPlot**: Added X-axis labels and grid lines for better data visualization
+- **BubbleChart**: Added X-axis labels and grid lines for better data visualization
+
+### 🐛 Bug Fixes
+- **LineChart**: Fixed duplicate X-axis labels when using multiple `dataKeys`
+- **ScatterPlot**: Now shows meaningful X-axis metrics instead of just dots
+- **BubbleChart**: Better visual differentiation from ScatterPlot
+
+### ⚠️ Deprecations
+- **AreaChart**: Now deprecated in favor of `LineChart` with `filled={true}`
+  - AreaChart still works (backward compatible) but is now just a wrapper around LineChart
+  - Migration: Replace `<AreaChart ... />` with `<LineChart ... filled={true} />`
+
+### 📚 Documentation
+- Updated README.md with LineChart area chart examples
+- Updated API_REFERENCE.md with new props and deprecation notices
+- Updated SIMPLE_API_GUIDE.md with consolidated LineChart/AreaChart usage
+- Added migration examples for AreaChart → LineChart
+
+### 🔧 Technical Improvements
+- Reduced code duplication (~200 lines) by consolidating AreaChart into LineChart
+- Improved TypeScript types - AreaChart now uses LineChart types directly
+- Better axis rendering with proper X-axis support across scatter-based charts
+
+---
+
 ## [0.1.0-alpha.4] - 2026-01-22
 
 ### Fixed

package/README.md

@@ -4,22 +4,22 @@
 
 [![npm version](https://img.shields.io/npm/v/react-native-metrify.svg)](https://www.npmjs.com/package/react-native-metrify)
 
-## ⚠️ Alpha Release
+## ⚠️ Beta Release
 
-**This package is in early alpha.** The core functionality works, but the library is under active development.
+**This package is in beta.** The core functionality works, but the library is under active development.
 
 - ✅ 24 chart types implemented and working
 - ✅ TypeScript support with full type definitions
 - ✅ Responsive font sizing
+- ✅ Complete examples and demos available in `examples/basic-demo/`
 - ⚠️ Limited testing coverage
-- ⚠️ APIs may change in future versions
-- 🚧 Examples and demos coming soon
+- ⚠️ APIs may change in future versions (beta release)
 
 **Installation:**
 ```bash
-npm install react-native-metrify@alpha
+npm install react-native-metrify@beta
 # or
-yarn add react-native-metrify@alpha
+yarn add react-native-metrify@beta
 ```
 
 Feedback and contributions welcome!
@@ -31,7 +31,7 @@ A comprehensive, performance-focused chart library built specifically for React
 
 - 🎨 **24+ Chart Types** - KPI, Gauge, Line, Bar, Pie, Area, Scatter, Heatmap, and more
 - 📱 **Mobile-First** - Optimized for small screens and touch interactions
-- ⚡ **High Performance** - UI thread animations with react-native-reanimated
+- ⚡ **High Performance** - Element-level animations on UI thread (60 FPS)
 - 🎭 **Theme Support** - Built-in light/dark themes with customization
 - 📦 **Zero Config** - Sensible defaults, minimal API surface
 - 🔧 **TypeScript** - Full type definitions included
@@ -41,7 +41,7 @@ A comprehensive, performance-focused chart library built specifically for React
 ## 📦 Installation
 
 ```bash
-npm install react-native-metrify@alpha
+npm install react-native-metrify@beta
 ```
 
 ### Peer Dependencies
@@ -80,6 +80,68 @@ export default function App() {
 
 ### 2. Use any chart component
 
+#### Simple API (Recommended)
+
+```tsx
+import { LineChart, AreaChart, BarChart } from 'react-native-metrify';
+import { View } from 'react-native';
+
+// Your data - just a simple array of objects!
+const data = [
+  { name: 'Jan', sales: 4000, expenses: 2400 },
+  { name: 'Feb', sales: 3000, expenses: 1398 },
+  { name: 'Mar', sales: 2000, expenses: 9800 },
+  { name: 'Apr', sales: 2780, expenses: 3908 },
+  { name: 'May', sales: 1890, expenses: 4800 },
+  { name: 'Jun', sales: 2390, expenses: 3800 },
+];
+
+export default function Dashboard() {
+  return (
+    <View>
+      {/* LineChart - Just specify data and keys! */}
+      <LineChart
+        data={data}
+        xKey="name"
+        dataKeys={['sales', 'expenses']}
+        colors={['#82ca9d', '#ff7c7c']}
+        labels={['Sales', 'Expenses']}
+        width={350}
+        height={250}
+        showGrid
+        showLegend
+      />
+
+      {/* LineChart as Area Chart - Just add filled prop! */}
+      <LineChart
+        data={data}
+        xKey="name"
+        dataKeys={['revenue']}
+        colors={['#8884d8']}
+        width={350}
+        height={250}
+        filled={true}        // Makes it an area chart!
+        showGradient={true}  // Beautiful gradient fill
+      />
+
+      {/* BarChart - Single value per item */}
+      <BarChart
+        data={data}
+        xKey="name"
+        dataKey="sales"
+        width={350}
+        height={250}
+        showValues
+      />
+    </View>
+  );
+}
+```
+
+#### Advanced API (Full Control)
+
+For more control, you can still use the original API:
+
 ```tsx
 import { KPI, LineChart, Gauge } from 'react-native-metrify';
 import { View } from 'react-native';
@@ -136,6 +198,62 @@ export default function Dashboard() {
 }
 ```
 
+## ✨ Smooth Animations
+
+All widgets include beautiful, element-level animations powered by react-native-reanimated:
+
+```tsx
+// Animations enabled by default
+<Gauge
+  data={{ value: 75, max: 100, label: 'Progress' }}
+  animated={true}  // Arc sweeps smoothly from 0° to 75°
+/>
+
+<KPI
+  data={{ value: 1234, label: 'Revenue', format: 'currency' }}
+  animated={true}  // Numbers count up smoothly
+/>
+
+<BarChart
+  data={salesData}
+  xKey="month"
+  dataKey="sales"
+  animated={true}  // Bars grow from baseline with stagger
+/>
+
+<LineChart
+  data={trendData}
+  xKey="date"
+  dataKeys={['revenue', 'profit']}
+  animated={true}  // Lines draw across the chart
+/>
+
+<RadarChart
+  data={radarData}
+  animated={true}  // Polygon draws around perimeter
+/>
+
+<StackedBarChart
+  data={stackedData}
+  animated={true}  // Stacked segments grow together
+/>
+```
+
+### Animation Types
+All 24 widgets have element-level animations:
+- **📊 Bar Growth** (7 widgets) - Bars grow from 0 to full height with stagger
+- **✏️ Path Drawing** (8 widgets) - Lines/arcs draw using stroke animation
+- **⭕ Scale/Pop** (3 widgets) - Elements scale from center outward
+- **🎬 Element Stagger** (8 widgets) - Items appear one by one
+
+**Performance:**
+- ⚡ 60 FPS on UI thread (no JS thread blocking)
+- 🎯 Dynamic animations based on actual data
+- 🔄 Calculated perimeter/length for stroke animations
+- 🎨 Customizable duration and easing
+
+Disable animations anytime with `animated={false}`.
+
 ## 📊 Available Charts
 
 ### Widget Showcase
@@ -202,7 +320,7 @@ export default function Dashboard() {
 
 **Bar Charts:** BarChart, HorizontalBarChart, StackedBarChart, GroupedBarChart, WaterfallChart, Histogram
 
-**Line & Area:** LineChart, AreaChart, MultiLineSparkline
+**Line & Area:** LineChart (with area support), MultiLineSparkline, ~~AreaChart~~ (deprecated, use LineChart with `filled={true}`)
 
 **Distribution:** PieChart, FunnelChart, BoxPlot
 
@@ -210,6 +328,104 @@ export default function Dashboard() {
 
 **Hierarchical:** Treemap, SunburstChart, SankeyDiagram
 
+## 💡 Simple API (Data-Driven)
+
+We've made it super easy to use charts! Inspired by Recharts, you can now pass your data directly without manual transformation.
+
+### Before vs After
+
+**❌ Old Way (Complex):**
+```tsx
+// Had to manually transform your data
+const chartData = {
+  series: [
+    {
+      data: data.map(d => ({ x: d.month, y: d.sales })),
+      color: '#82ca9d',
+      label: 'Sales'
+    },
+    {
+      data: data.map(d => ({ x: d.month, y: d.expenses })),
+      color: '#ff7c7c',
+      label: 'Expenses'
+    }
+  ]
+};
+
+<LineChart data={chartData} width={350} height={250} />
+```
+
+**✅ New Way (Simple):**
+```tsx
+// Just pass your data and specify the keys!
+<LineChart
+  data={data}
+  xKey="month"
+  dataKeys={['sales', 'expenses']}
+  colors={['#82ca9d', '#ff7c7c']}
+  labels={['Sales', 'Expenses']}
+  width={350}
+  height={250}
+/>
+```
+
+### Supported Charts
+
+The Simple API is available for **ALL** chart types:
+
+**Line & Area:** LineChart, AreaChart  
+**Bar Charts:** BarChart, GroupedBarChart, StackedBarChart, HorizontalBarChart  
+**Pie & Distribution:** PieChart, FunnelChart  
+**Scatter:** ScatterPlot, BubbleChart  
+**Multi-Axis:** RadarChart  
+**Statistical:** Heatmap, BoxPlot, Histogram  
+**Financial:** WaterfallChart, CandlestickChart  
+
+### Quick Examples
+
+```tsx
+// LineChart - Multiple series
+<LineChart data={data} xKey="month" dataKeys={['sales', 'expenses']} />
+
+// LineChart as Area Chart - Just add filled prop
+<LineChart data={data} xKey="month" dataKeys={['revenue']} filled={true} showGradient />
+
+// AreaChart still works (deprecated, uses LineChart internally)
+<AreaChart data={data} xKey="month" dataKeys={['revenue']} />
+
+// BarChart - Single value
+<BarChart data={data} xKey="category" dataKey="revenue" />
+
+// PieChart - Segments
+<PieChart data={data} labelKey="category" valueKey="amount" />
+
+// ScatterPlot - X/Y coordinates
+<ScatterPlot data={data} xKey="x" yKey="y" />
+
+// RadarChart - Multi-axis comparison
+<RadarChart data={data} categoryKey="skill" dataKeys={['you', 'teamAvg']} />
+
+// Heatmap - Grid visualization
+<Heatmap data={data} xKey="day" yKey="hour" valueKey="activity" />
+
+// And 15+ more charts!
+```
+
+### Full Documentation
+
+📖 **[Complete Simple API Reference →](./examples/API_REFERENCE.md)**
+
+See all chart types with detailed examples in `examples/API_REFERENCE.md`
+
+### Benefits
+
+✓ **60% less code** - No manual data transformation needed  
+✓ **Works with ALL charts** - Consistent API across 20+ chart types  
+✓ **Familiar API** - Similar to Recharts and other popular charting libraries  
+✓ **Backward compatible** - Old API still works perfectly  
+✓ **Automatic colors** - Uses a nice default palette if you don't specify colors  
+✓ **TypeScript support** - Full type safety with autocomplete
+
 ## 🎨 Theming
 
 ### Using Built-in Themes
@@ -283,7 +499,30 @@ interface BaseWidgetProps {
 
 ### LineChart Component
 
+**New in v0.1.0-beta.1:** LineChart now supports area charts with the `filled` prop!
+
 ```tsx
+// Regular Line Chart
+<LineChart
+  data={data}
+  xKey="month"
+  dataKeys={['sales', 'expenses']}
+  width={350}
+  height={250}
+/>
+
+// Area Chart (filled line chart)
+<LineChart
+  data={data}
+  xKey="month"
+  dataKeys={['revenue']}
+  width={350}
+  height={250}
+  filled={true}        // Enable area fill
+  showGradient={true}  // Show gradient (optional)
+/>
+
+// Legacy API still works
 <LineChart
   data={{
     series: [
@@ -360,7 +599,7 @@ Text automatically scales based on widget dimensions:
 ## 🎯 Design Philosophy
 
 - **Mobile-First**: Optimized for small screens and touch interactions
-- **Performance**: UI thread animations with react-native-reanimated
+- **Performance**: UI thread animations with react-native-reanimated for smooth 60 FPS animations
 - **Type-Safe**: Full TypeScript support with inference
 - **Zero Config**: Sensible defaults, minimal API surface
 

package/dist/cjs/core/hooks/index.js

@@ -1,4 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWidgetDimensions = useWidgetDimensions;
 exports.useWidgetTheme = useWidgetTheme;
@@ -47,4 +61,8 @@ function useInnerDimensions(width, height, padding) {
         height: Math.max(0, height - padding.vertical),
     }), [width, height, padding.horizontal, padding.vertical]);
 }
+/**
+ * Export animation hooks
+ */
+__exportStar(require("./useChartAnimation"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/core/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/hooks/index.ts"],"names":[],"mappings":";;AAUA,kDAaC;AAKD,wCAGC;AAKD,4CAYC;AAKD,gDAYC;AAjED;;GAEG;AACH,iCAAgC;AAEhC,oCAAoC;AAEpC;;GAEG;AACH,SAAgB,mBAAmB,CACjC,KAAc,EACd,MAAe,EACf,eAAuB,GAAG,EAC1B,gBAAwB,GAAG;IAE3B,OAAO,IAAA,eAAO,EACZ,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,KAAK,IAAI,YAAY;QAC5B,MAAM,EAAE,MAAM,IAAI,aAAa;KAChC,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,CAAC,CAC7C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,cAAc,CAAC,aAAqB;IAClD,MAAM,YAAY,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAChC,OAAO,aAAa,IAAI,YAAY,CAAC;AACvC,CAAC;AAED;;GAEG;AACH,SAAgB,gBAAgB,CAAC,KAAY;IAC3C,OAAO,IAAA,eAAO,EACZ,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;QACrB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;QACvB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;QACxB,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;QACtB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC;QAChC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC;KAC/B,CAAC,EACF,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CACnB,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,kBAAkB,CAChC,KAAa,EACb,MAAc,EACd,OAAiD;IAEjD,OAAO,IAAA,eAAO,EACZ,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC;QAC9C,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC;KAC/C,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC,CACtD,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAUA,kDAaC;AAKD,wCAGC;AAKD,4CAYC;AAKD,gDAYC;AAjED;;GAEG;AACH,iCAAgC;AAEhC,oCAAoC;AAEpC;;GAEG;AACH,SAAgB,mBAAmB,CACjC,KAAc,EACd,MAAe,EACf,eAAuB,GAAG,EAC1B,gBAAwB,GAAG;IAE3B,OAAO,IAAA,eAAO,EACZ,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,KAAK,IAAI,YAAY;QAC5B,MAAM,EAAE,MAAM,IAAI,aAAa;KAChC,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,CAAC,CAC7C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,cAAc,CAAC,aAAqB;IAClD,MAAM,YAAY,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAChC,OAAO,aAAa,IAAI,YAAY,CAAC;AACvC,CAAC;AAED;;GAEG;AACH,SAAgB,gBAAgB,CAAC,KAAY;IAC3C,OAAO,IAAA,eAAO,EACZ,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;QACrB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;QACvB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;QACxB,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;QACtB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC;QAChC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC;KAC/B,CAAC,EACF,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CACnB,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,kBAAkB,CAChC,KAAa,EACb,MAAc,EACd,OAAiD;IAEjD,OAAO,IAAA,eAAO,EACZ,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC;QAC9C,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC;KAC/C,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC,CACtD,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,sDAAoC"}

package/dist/cjs/core/hooks/useChartAnimation.js

@@ -0,0 +1,215 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEntryAnimation = useEntryAnimation;
+exports.useValueAnimation = useValueAnimation;
+exports.usePathDrawAnimation = usePathDrawAnimation;
+exports.useScaleAnimation = useScaleAnimation;
+exports.useStaggeredAnimation = useStaggeredAnimation;
+exports.useRotationAnimation = useRotationAnimation;
+exports.estimatePathLength = estimatePathLength;
+/**
+ * Chart animation hooks using react-native-reanimated
+ */
+const react_1 = require("react");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const DEFAULT_DURATION = 500;
+const DEFAULT_DELAY = 0;
+/**
+ * Get easing function based on type
+ * Using Recharts-style easing curves
+ */
+function getEasing(type) {
+    switch (type) {
+        case 'linear':
+            return react_native_reanimated_1.Easing.linear;
+        case 'ease-in':
+            return react_native_reanimated_1.Easing.in(react_native_reanimated_1.Easing.cubic);
+        case 'ease-out':
+            return react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic);
+        case 'spring':
+            return react_native_reanimated_1.Easing.elastic(1.2); // Bouncy spring
+        case 'ease-in-out':
+        default:
+            return react_native_reanimated_1.Easing.bezier(0.4, 0, 0.2, 1); // Recharts default easing
+    }
+}
+/**
+ * Hook for entry animations (fade in, scale, etc.)
+ */
+function useEntryAnimation(options = {}) {
+    const { enabled = true, duration = DEFAULT_DURATION, delay = DEFAULT_DELAY, easing = 'ease-in-out', } = options;
+    const progress = (0, react_native_reanimated_1.useSharedValue)(enabled ? 0 : 1);
+    (0, react_1.useEffect)(() => {
+        if (enabled) {
+            if (easing === 'spring') {
+                progress.value = (0, react_native_reanimated_1.withSpring)(1, {
+                    damping: 15,
+                    stiffness: 100,
+                });
+            }
+            else {
+                progress.value = (0, react_native_reanimated_1.withTiming)(1, {
+                    duration,
+                    easing: getEasing(easing),
+                });
+            }
+        }
+    }, [enabled, duration, easing, progress]);
+    return progress;
+}
+/**
+ * Hook for value animations (numbers, progress bars, etc.)
+ * Handles both initial animation AND data updates
+ * When targetValue changes, it smoothly transitions to the new value
+ */
+function useValueAnimation(targetValue, options = {}) {
+    const { enabled = true, duration = DEFAULT_DURATION, delay = DEFAULT_DELAY, easing = 'ease-in-out', } = options;
+    const animatedValue = (0, react_native_reanimated_1.useSharedValue)(enabled ? 0 : targetValue);
+    const isFirstMount = (0, react_native_reanimated_1.useSharedValue)(true);
+    (0, react_1.useEffect)(() => {
+        if (enabled) {
+            // On first mount, animate from 0
+            // On data change, animate from current value to new value
+            const startValue = isFirstMount.value ? 0 : animatedValue.value;
+            if (easing === 'spring') {
+                animatedValue.value = (0, react_native_reanimated_1.withSpring)(targetValue, {
+                    damping: 15,
+                    stiffness: 100,
+                });
+            }
+            else {
+                animatedValue.value = (0, react_native_reanimated_1.withTiming)(targetValue, {
+                    duration: isFirstMount.value ? duration : duration * 0.6, // Faster for updates
+                    easing: getEasing(easing),
+                });
+            }
+            isFirstMount.value = false;
+        }
+        else {
+            animatedValue.value = targetValue;
+        }
+    }, [targetValue, enabled, duration, easing, animatedValue, isFirstMount]);
+    return animatedValue;
+}
+/**
+ * Hook for true path drawing animation (SVG paths)
+ * Returns strokeDasharray and animated strokeDashoffset for Recharts-style line drawing
+ * The line literally draws from start to finish
+ * Handles both initial draw AND data changes (path morphs smoothly)
+ */
+function usePathDrawAnimation(pathLength, options = {}) {
+    const { enabled = true, duration = 1000, // Longer for smooth drawing effect
+    delay = DEFAULT_DELAY, easing = 'ease-in-out', } = options;
+    // Start with line fully hidden (offset = pathLength)
+    // Animate to fully visible (offset = 0)
+    const dashOffset = (0, react_native_reanimated_1.useSharedValue)(enabled ? pathLength : 0);
+    const isFirstMount = (0, react_native_reanimated_1.useSharedValue)(true);
+    (0, react_1.useEffect)(() => {
+        if (enabled && pathLength > 0) {
+            if (isFirstMount.value) {
+                // First mount: draw from start
+                dashOffset.value = pathLength;
+                dashOffset.value = (0, react_native_reanimated_1.withTiming)(0, {
+                    duration,
+                    easing: getEasing(easing),
+                });
+                isFirstMount.value = false;
+            }
+            else {
+                // Data change: quickly redraw (path morphs via SVG, we just flash the animation)
+                // Brief redraw effect to show data changed
+                dashOffset.value = pathLength * 0.3; // Start from 30% hidden
+                dashOffset.value = (0, react_native_reanimated_1.withTiming)(0, {
+                    duration: duration * 0.4, // Faster for updates
+                    easing: getEasing(easing),
+                });
+            }
+        }
+        else {
+            dashOffset.value = 0;
+        }
+    }, [enabled, duration, easing, dashOffset, pathLength, isFirstMount]);
+    return {
+        dashArray: pathLength,
+        dashOffset,
+    };
+}
+/**
+ * Hook for scale-in animation (circles, points, markers)
+ * Recharts-style: starts small and scales to full size
+ */
+function useScaleAnimation(options = {}) {
+    const { enabled = true, duration = DEFAULT_DURATION, delay = DEFAULT_DELAY, easing = 'ease-out', } = options;
+    const scale = (0, react_native_reanimated_1.useSharedValue)(enabled ? 0 : 1);
+    (0, react_1.useEffect)(() => {
+        if (enabled) {
+            scale.value = (0, react_native_reanimated_1.withTiming)(1, {
+                duration,
+                easing: getEasing(easing),
+            });
+        }
+    }, [enabled, duration, easing, scale]);
+    return scale;
+}
+/**
+ * Hook for staggered animations (multiple items with delay)
+ */
+function useStaggeredAnimation(itemCount, options = {}) {
+    const { enabled = true, duration = DEFAULT_DURATION, easing = 'ease-in-out', } = options;
+    const staggerDelay = duration / itemCount / 2; // Half duration spread across items
+    const progresses = Array.from({ length: itemCount }, (_, index) => {
+        const progress = (0, react_native_reanimated_1.useSharedValue)(enabled ? 0 : 1);
+        (0, react_1.useEffect)(() => {
+            if (enabled) {
+                progress.value = (0, react_native_reanimated_1.withTiming)(1, {
+                    duration,
+                    easing: getEasing(easing),
+                });
+            }
+        }, [enabled, duration, easing]);
+        return progress;
+    });
+    return progresses;
+}
+/**
+ * Hook for rotation animation (gauges, pie charts, etc.)
+ */
+function useRotationAnimation(targetRotation, options = {}) {
+    const { enabled = true, duration = DEFAULT_DURATION, easing = 'spring', } = options;
+    const rotation = (0, react_native_reanimated_1.useSharedValue)(enabled ? 0 : targetRotation);
+    (0, react_1.useEffect)(() => {
+        if (enabled) {
+            if (easing === 'spring') {
+                rotation.value = (0, react_native_reanimated_1.withSpring)(targetRotation, {
+                    damping: 12,
+                    stiffness: 80,
+                });
+            }
+            else {
+                rotation.value = (0, react_native_reanimated_1.withTiming)(targetRotation, {
+                    duration,
+                    easing: getEasing(easing),
+                });
+            }
+        }
+        else {
+            rotation.value = targetRotation;
+        }
+    }, [targetRotation, enabled, duration, easing, rotation]);
+    return rotation;
+}
+/**
+ * Estimate SVG path length
+ * Since we can't measure paths in React Native, we estimate based on data points
+ */
+function estimatePathLength(dataPoints, width, height) {
+    if (dataPoints < 2)
+        return 0;
+    // Estimate: sum of diagonal distances between points
+    // Rough approximation: width + height gives us a reasonable path length estimate
+    const avgSegmentLength = width / (dataPoints - 1);
+    const avgHeight = height / 2; // Average vertical movement
+    const estimatedSegmentLength = Math.sqrt(avgSegmentLength ** 2 + (avgHeight / dataPoints) ** 2);
+    return dataPoints * estimatedSegmentLength;
+}
+//# sourceMappingURL=useChartAnimation.js.map

package/dist/cjs/core/hooks/useChartAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartAnimation.js","sourceRoot":"","sources":["../../../../src/core/hooks/useChartAnimation.ts"],"names":[],"mappings":"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"}