react-native-metrify 0.1.0-alpha.2 → 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.2",
+  "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",