react-native-metrify 0.1.0-alpha.1 → 0.1.0-alpha.3

package/README.md

@@ -88,24 +88,48 @@ export default function Dashboard() {
   return (
     <View>
       <KPI
-        value={1234}
-        label="Total Sales"
-        trend={12.5}
-        format="currency"
+        data={{
+          value: 1234,
+          label: 'Total Sales',
+          delta: 12.5,
+          trend: 'up',
+          format: 'currency',
+          currency: 'USD',
+        }}
+        width={300}
+        height={120}
       />
 
       <LineChart
-        data={[10, 25, 15, 40, 30, 55, 45]}
+        data={{
+          series: [{
+            data: [
+              { x: 0, y: 10 },
+              { x: 1, y: 25 },
+              { x: 2, y: 15 },
+              { x: 3, y: 40 },
+              { x: 4, y: 30 },
+              { x: 5, y: 55 },
+              { x: 6, y: 45 },
+            ],
+            color: '#007AFF',
+          }],
+        }}
         width={300}
         height={200}
       />
 
       <Gauge
-        value={75}
-        min={0}
-        max={100}
+        data={{
+          value: 75,
+          max: 100,
+          label: 'Progress',
+          unit: '%',
+        }}
         width={200}
         height={200}
+        startAngle={-120}
+        endAngle={120}
       />
     </View>
   );
@@ -114,41 +138,77 @@ export default function Dashboard() {
 
 ## 📊 Available Charts
 
-### Core Widgets
-- **KPI** - Display key metrics with trends and formatting
-- **Gauge** - Circular or semi-circular gauge charts
-- **Progress** - Linear progress bars with variants
-- **Sparkline** - Minimal inline charts
-
-### Line & Area Charts
-- **LineChart** - Single or multi-line charts
-- **AreaChart** - Filled area charts
-- **MultiLineSparkline** - Compact multi-line visualization
-
-### Bar Charts
-- **BarChart** - Vertical bar charts
-- **HorizontalBarChart** - Horizontal bar charts
-- **StackedBarChart** - Stacked bar visualization
-- **GroupedBarChart** - Side-by-side bars
-- **WaterfallChart** - Cumulative change visualization
-
-### Distribution & Comparison
-- **PieChart** - Pie and donut charts
-- **FunnelChart** - Conversion funnel visualization
-- **Histogram** - Distribution frequency charts
-- **BoxPlot** - Statistical box and whisker plots
-
-### Scientific & Advanced
-- **ScatterPlot** - X-Y scatter charts with optional bubbles
-- **BubbleChart** - Multi-dimensional bubble visualization
-- **Heatmap** - Grid-based heat intensity maps
-- **RadarChart** - Multi-axis spider charts
-- **CandlestickChart** - Financial OHLC charts
-
-### Hierarchical & Flow
-- **Treemap** - Hierarchical rectangle visualization
-- **SunburstChart** - Radial hierarchical charts
-- **SankeyDiagram** - Flow and relationship visualization
+### Widget Showcase
+
+<table>
+  <tr>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/chvvkrishnakumar/react-native-metrify/main/docs/images/widgets/core-widgets.png" width="400" alt="Core Widgets"/><br/>
+      <b>Core Widgets</b><br/>
+      <sub>KPI • Gauge • Progress • Sparkline</sub>
+    </td>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/chvvkrishnakumar/react-native-metrify/main/docs/images/widgets/line-area-charts.png" width="400" alt="Line & Area Charts"/><br/>
+      <b>Line & Area Charts</b><br/>
+      <sub>LineChart • AreaChart • MultiLineSparkline</sub>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/chvvkrishnakumar/react-native-metrify/main/docs/images/widgets/bar-charts.png" width="400" alt="Bar Charts"/><br/>
+      <b>Bar Charts</b><br/>
+      <sub>BarChart • HorizontalBarChart • StackedBarChart</sub>
+    </td>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/chvvkrishnakumar/react-native-metrify/main/docs/images/widgets/bar-charts-2.png" width="400" alt="More Bar Charts"/><br/>
+      <b>More Bar Charts</b><br/>
+      <sub>GroupedBarChart • Histogram • WaterfallChart</sub>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/chvvkrishnakumar/react-native-metrify/main/docs/images/widgets/distribution-charts.png" width="400" alt="Distribution Charts"/><br/>
+      <b>Distribution Charts</b><br/>
+      <sub>PieChart • FunnelChart</sub>
+    </td>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/chvvkrishnakumar/react-native-metrify/main/docs/images/widgets/scientific-charts.png" width="400" alt="Scientific Charts"/><br/>
+      <b>Scientific Charts</b><br/>
+      <sub>ScatterPlot • BubbleChart • Heatmap</sub>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/chvvkrishnakumar/react-native-metrify/main/docs/images/widgets/advanced-charts.png" width="400" alt="Advanced Charts"/><br/>
+      <b>Advanced Charts</b><br/>
+      <sub>RadarChart • CandlestickChart</sub>
+    </td>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/chvvkrishnakumar/react-native-metrify/main/docs/images/widgets/treemap-sunburst-chart.png" width="400" alt="Hierarchical Charts"/><br/>
+      <b>Hierarchical Charts</b><br/>
+      <sub>Treemap • SunburstChart</sub>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" colspan="2">
+      <img src="https://raw.githubusercontent.com/chvvkrishnakumar/react-native-metrify/main/docs/images/widgets/sankey-diagram.png" width="400" alt="Flow Diagram"/><br/>
+      <b>Flow Diagram</b><br/>
+      <sub>SankeyDiagram</sub>
+    </td>
+  </tr>
+</table>
+
+### All Chart Types
+
+**Bar Charts:** BarChart, HorizontalBarChart, StackedBarChart, GroupedBarChart, WaterfallChart, Histogram
+
+**Line & Area:** LineChart, AreaChart, MultiLineSparkline
+
+**Distribution:** PieChart, FunnelChart, BoxPlot
+
+**Scientific:** ScatterPlot, BubbleChart, Heatmap, RadarChart, CandlestickChart
+
+**Hierarchical:** Treemap, SunburstChart, SankeyDiagram
 
 ## 🎨 Theming
 
@@ -311,21 +371,21 @@ MIT © [Krishna Kumar](https://github.com/chvvkrishnakumar)
 ## 🔗 Links
 
 - [Documentation](https://github.com/chvvkrishnakumar/react-native-metrify#readme)
-- [Examples](./examples/)
+- [Examples](https://github.com/chvvkrishnakumar/react-native-metrify/tree/main/examples/basic-demo)
 - [Changelog](./CHANGELOG.md)
 - [Issues](https://github.com/chvvkrishnakumar/react-native-metrify/issues)
 
 ## 💡 Examples
 
-Check out the [examples directory](./examples/expo-template/) for a full-featured demo app showcasing all chart types.
+Check out the [examples directory](https://github.com/chvvkrishnakumar/react-native-metrify/tree/main/examples/basic-demo) for complete working examples:
 
-To run the example:
+- **AllWidgetsDashboard.tsx** - All 24 widgets in one scrollable file
+- **KPIExample.tsx** - 7 KPI variations
+- **GaugeExample.tsx** - 6 Gauge variations  
+- **DashboardExample.tsx** - Real-world dashboard
+- **API_REFERENCE.md** - Complete type reference
 
-```bash
-cd examples/expo-template
-npm install
-npm start
-```
+Copy any example directly into your app and start using it!
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-metrify",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "description": "Mobile-first SVG chart library for React Native, Expo, and React Native Web",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -14,7 +14,6 @@
   },
   "files": [
     "dist",
-    "src",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"

package/src/core/animation/index.ts

@@ -1,113 +0,0 @@
-/**
- * Animation helpers - Simple version without reanimated
- * For full animation support, use react-native-reanimated separately
- */
-import { useEffect } from 'react';
-import { AnimationConfig } from '../types';
-
-// Type for shared value (compatible with reanimated)
-export type SharedValue<T = number> = { value: T };
-
-// Simple implementations (no animations, just values)
-export const useSharedValue = <T = number>(initialValue: T): SharedValue<T> => {
-  return { value: initialValue };
-};
-
-export const withTiming = (value: any, config?: any) => value;
-export const withSpring = (value: any, config?: any) => value;
-
-export const Easing = {
-  linear: (t: number) => t,
-  ease: (t: number) => t,
-  quad: (t: number) => t * t,
-  cubic: (t: number) => t * t * t,
-  bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => t,
-  in: (easing: (t: number) => number) => easing,
-  out: (easing: (t: number) => number) => (t: number) => 1 - easing(1 - t),
-  inOut: (easing: (t: number) => number) => (t: number) =>
-    t < 0.5 ? easing(t * 2) / 2 : 1 - easing((1 - t) * 2) / 2,
-};
-
-/**
- * Default timing configuration
- */
-export const DEFAULT_TIMING_CONFIG = {
-  duration: 300,
-  easing: Easing.out(Easing.cubic),
-};
-
-/**
- * Default spring configuration
- */
-export const DEFAULT_SPRING_CONFIG = {
-  damping: 15,
-  stiffness: 150,
-  mass: 1,
-};
-
-/**
- * Hook that creates an animated value that transitions to a target
- * @param target - Target value to animate to
- * @param config - Animation configuration
- */
-export function useAnimatedValue(
-  target: number,
-  config: AnimationConfig = {}
-): SharedValue<number> {
-  const animatedValue = useSharedValue(target);
-  
-  useEffect(() => {
-    animatedValue.value = withTiming(target, {
-      duration: config.duration ?? DEFAULT_TIMING_CONFIG.duration,
-      easing: DEFAULT_TIMING_CONFIG.easing,
-    });
-  }, [target, config.duration, animatedValue]);
-  
-  return animatedValue;
-}
-
-/**
- * Hook that creates an animated progress value (0 to normalized)
- * @param value - Current value
- * @param max - Maximum value
- * @param config - Animation configuration
- */
-export function useAnimatedProgress(
-  value: number,
-  max: number,
-  config: AnimationConfig = {}
-): SharedValue<number> {
-  const normalized = max > 0 ? Math.min(value / max, 1) : 0;
-  return useAnimatedValue(normalized, config);
-}
-
-/**
- * Hook that creates a spring-animated value
- * @param target - Target value to animate to
- */
-export function useSpringValue(target: number): SharedValue<number> {
-  const animatedValue = useSharedValue(target);
-  
-  useEffect(() => {
-    animatedValue.value = withSpring(target, DEFAULT_SPRING_CONFIG);
-  }, [target, animatedValue]);
-  
-  return animatedValue;
-}
-
-/**
- * Creates timing config for manual animations
- */
-export function useTimingConfig(config: AnimationConfig = {}) {
-  return {
-    duration: config.duration ?? DEFAULT_TIMING_CONFIG.duration,
-    easing: DEFAULT_TIMING_CONFIG.easing,
-  };
-}
-
-/**
- * Creates spring config for manual animations
- */
-export function useSpringConfig() {
-  return DEFAULT_SPRING_CONFIG;
-}

package/src/core/animation/index.web.ts

@@ -1,112 +0,0 @@
-/**
- * Animation helpers for widgets (Web version - no reanimated)
- * Uses basic React state for web compatibility
- */
-import { useEffect } from 'react';
-import { AnimationConfig } from '../types';
-
-// Type for shared value (web compatible)
-export type SharedValue<T> = { value: T };
-
-// Web-compatible stubs for reanimated functions
-export const useSharedValue = <T,>(initialValue: T): SharedValue<T> => {
-  return { value: initialValue };
-};
-
-export const withTiming = (value: number, config?: any) => {
-  return value;
-};
-
-export const withSpring = (value: number, config?: any) => {
-  return value;
-};
-
-export const withDelay = (delay: number, animation: any) => {
-  return animation;
-};
-
-export const withSequence = (...animations: any[]) => {
-  return animations[animations.length - 1];
-};
-
-export const withRepeat = (animation: any, numberOfReps?: number, reverse?: boolean) => {
-  return animation;
-};
-
-export const Easing = {
-  linear: (t: number) => t,
-  ease: (t: number) => t,
-  quad: (t: number) => t * t,
-  cubic: (t: number) => t * t * t,
-  bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => t,
-  in: (easing: (t: number) => number) => easing,
-  out: (easing: (t: number) => number) => (t: number) => 1 - easing(1 - t),
-  inOut: (easing: (t: number) => number) => (t: number) =>
-    t < 0.5 ? easing(t * 2) / 2 : 1 - easing((1 - t) * 2) / 2,
-};
-
-/**
- * Default timing configuration
- */
-export const DEFAULT_TIMING_CONFIG = {
-  duration: 300,
-  easing: Easing.linear,
-};
-
-/**
- * Default spring configuration
- */
-export const DEFAULT_SPRING_CONFIG = {
-  damping: 15,
-  stiffness: 150,
-  mass: 1,
-};
-
-/**
- * Hook to animate value changes (web version)
- */
-export function useAnimatedValue(
-  target: number,
-  config: AnimationConfig = {}
-): SharedValue<number> {
-  // On web, just return the value directly
-  // Full animation support requires additional setup
-  return useSharedValue(target);
-}
-
-/**
- * Hook that creates an animated progress value (0 to normalized)
- */
-export function useAnimatedProgress(
-  value: number,
-  max: number,
-  config: AnimationConfig = {}
-): SharedValue<number> {
-  const normalized = max > 0 ? Math.min(value / max, 1) : 0;
-  return useAnimatedValue(normalized, config);
-}
-
-/**
- * Hook that creates a spring-animated value
- */
-export function useSpringValue(target: number): SharedValue<number> {
-  return useSharedValue(target);
-}
-
-/**
- * Creates timing config for manual animations
- */
-export function useTimingConfig(config: AnimationConfig = {}) {
-  return {
-    duration: config.duration ?? DEFAULT_TIMING_CONFIG.duration,
-    easing: DEFAULT_TIMING_CONFIG.easing,
-  };
-}
-
-/**
- * Creates spring config for manual animations
- */
-export function useSpringConfig() {
-  return DEFAULT_SPRING_CONFIG;
-}
-

package/src/core/hooks/index.ts

@@ -1,66 +0,0 @@
-/**
- * Reusable hooks for widgets
- */
-import { useMemo } from 'react';
-import { Theme } from '../types';
-import { useTheme } from '../theme';
-
-/**
- * Hook to get widget dimensions with defaults
- */
-export function useWidgetDimensions(
-  width?: number,
-  height?: number,
-  defaultWidth: number = 300,
-  defaultHeight: number = 200
-) {
-  return useMemo(
-    () => ({
-      width: width ?? defaultWidth,
-      height: height ?? defaultHeight,
-    }),
-    [width, height, defaultWidth, defaultHeight]
-  );
-}
-
-/**
- * Hook to merge theme overrides
- */
-export function useWidgetTheme(themeOverride?: Theme): Theme {
-  const contextTheme = useTheme();
-  return themeOverride ?? contextTheme;
-}
-
-/**
- * Hook for widget padding calculations
- */
-export function useWidgetPadding(theme: Theme) {
-  return useMemo(
-    () => ({
-      top: theme.spacing.md,
-      right: theme.spacing.md,
-      bottom: theme.spacing.md,
-      left: theme.spacing.md,
-      horizontal: theme.spacing.md * 2,
-      vertical: theme.spacing.md * 2,
-    }),
-    [theme.spacing.md]
-  );
-}
-
-/**
- * Hook to calculate inner dimensions after padding
- */
-export function useInnerDimensions(
-  width: number,
-  height: number,
-  padding: { horizontal: number; vertical: number }
-) {
-  return useMemo(
-    () => ({
-      width: Math.max(0, width - padding.horizontal),
-      height: Math.max(0, height - padding.vertical),
-    }),
-    [width, height, padding.horizontal, padding.vertical]
-  );
-}

package/src/core/index.ts

@@ -1,26 +0,0 @@
-/**
- * Core package - Foundation for all widgets
- * NO SVG dependencies allowed here
- */
-
-// Math utilities
-export * from './math';
-
-// Layout utilities
-export * from './layout';
-
-// Theme system
-export * from './theme';
-
-// Animation helpers
-export * from './animation';
-
-// Hooks
-export * from './hooks';
-
-// Types
-export * from './types';
-
-// Utils
-export * from './utils/time';
-export * from './utils/responsive';

package/src/core/layout/index.ts

@@ -1,101 +0,0 @@
-/**
- * Layout utilities for widget positioning and sizing
- */
-
-export interface Box {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface Point {
-  x: number;
-  y: number;
-}
-
-/**
- * Calculate center point of a box
- */
-export function getCenter(box: Box): Point {
-  return {
-    x: box.x + box.width / 2,
-    y: box.y + box.height / 2,
-  };
-}
-
-/**
- * Calculate bounding box for a set of points
- */
-export function getBoundingBox(points: Point[]): Box {
-  if (points.length === 0) {
-    return { x: 0, y: 0, width: 0, height: 0 };
-  }
-
-  const xs = points.map(p => p.x);
-  const ys = points.map(p => p.y);
-  
-  const minX = Math.min(...xs);
-  const maxX = Math.max(...xs);
-  const minY = Math.min(...ys);
-  const maxY = Math.max(...ys);
-
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-  };
-}
-
-/**
- * Apply padding to a box
- */
-export function applyPadding(
-  box: Box,
-  padding: { top: number; right: number; bottom: number; left: number }
-): Box {
-  return {
-    x: box.x + padding.left,
-    y: box.y + padding.top,
-    width: Math.max(0, box.width - padding.left - padding.right),
-    height: Math.max(0, box.height - padding.top - padding.bottom),
-  };
-}
-
-/**
- * Calculate aspect ratio
- */
-export function getAspectRatio(width: number, height: number): number {
-  return height > 0 ? width / height : 1;
-}
-
-/**
- * Scale box to fit within constraints while maintaining aspect ratio
- */
-export function fitBox(
-  box: Box,
-  maxWidth: number,
-  maxHeight: number
-): Box {
-  const aspectRatio = getAspectRatio(box.width, box.height);
-  const maxAspectRatio = getAspectRatio(maxWidth, maxHeight);
-
-  let width = maxWidth;
-  let height = maxHeight;
-
-  if (aspectRatio > maxAspectRatio) {
-    // Box is wider than container
-    height = width / aspectRatio;
-  } else {
-    // Box is taller than container
-    width = height * aspectRatio;
-  }
-
-  return {
-    x: box.x,
-    y: box.y,
-    width,
-    height,
-  };
-}