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

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.1.0-alpha.4] - 2026-01-22
+
+### Fixed
+- Corrected documentation examples to match actual API implementation
+- Fixed KPI, Gauge, LineChart, BarChart, PieChart, AreaChart, Sparkline, and Progress widget examples
+- All widget examples now correctly show `data={{}}` prop pattern instead of flat props
+- Removed invalid `expo-template` reference from package.json scripts
+
 ## [0.1.0] - 2026-01-21
 
 ### Added

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
 
@@ -209,12 +269,14 @@ interface BaseWidgetProps {
 
 ```tsx
 <KPI
-  value={1234}
-  label="Revenue"
-  trend={12.5}            // Percentage change
-  format="currency"       // 'number' | 'currency' | 'percentage'
-  currency="USD"          // Currency code for formatting
-  precision={2}           // Decimal places
+  data={{
+    value: 1234,
+    label: "Revenue",
+    trend: 12.5,          // Percentage change
+    format: "currency",   // 'number' | 'currency' | 'percentage'
+    currency: "USD",      // Currency code for formatting
+    precision: 2,         // Decimal places
+  }}
   width={200}
 />
 ```
@@ -223,13 +285,23 @@ interface BaseWidgetProps {
 
 ```tsx
 <LineChart
-  data={[10, 25, 15, 40, 30]}
-  labels={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+  data={{
+    series: [
+      {
+        data: [
+          { x: 0, y: 10 },
+          { x: 1, y: 25 },
+          { x: 2, y: 15 },
+          { x: 3, y: 40 },
+          { x: 4, y: 30 },
+        ],
+        color: "#007AFF",
+        label: "Sales",
+      },
+    ],
+  }}
   width={300}
   height={200}
-  curved={true}           // Use curved lines
-  showGrid={true}         // Show background grid
-  showPoints={true}       // Show data points
 />
 ```
 
@@ -237,14 +309,18 @@ interface BaseWidgetProps {
 
 ```tsx
 <Gauge
-  value={75}
-  min={0}
-  max={100}
+  data={{
+    value: 75,
+    max: 100,
+    label: "Progress",
+    unit: "%",
+  }}
   width={200}
   height={200}
-  variant="semi"          // 'full' | 'semi'
+  startAngle={-120}       // Start angle in degrees
+  endAngle={120}          // End angle in degrees
   showValue={true}
-  unit="%"
+  showLabel={true}
 />
 ```
 
@@ -311,21 +387,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.4",
   "description": "Mobile-first SVG chart library for React Native, Expo, and React Native Web",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -26,8 +26,7 @@
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run clean && npm run build",
     "dev": "tsc --project tsconfig.build.json --watch",
-    "pack:test": "npm pack --dry-run",
-    "example": "cd examples/expo-template && npm start"
+    "pack:test": "npm pack --dry-run"
   },
   "keywords": [
     "react-native",