@dhirajpatil2025/report1chart 1.0.0

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@dhirajpatil2025/report1chart",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "description": ""
+}

package/src/index.js

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+
+const ReportChart = ({ baseUrl, token, buttons = [], height = 200 }) => {
+  const [loading, setLoading] = useState(false);
+  const [chartData, setChartData] = useState([]);
+  const [active, setActive] = useState(null);
+  const [error, setError] = useState(null);
+
+  const fetchData = async (btn) => {
+    try {
+      setActive(btn.label);
+      setLoading(true);
+      setError(null);
+
+      const res = await fetch(baseUrl + btn.endpoint, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      const json = await res.json();
+
+      // 🔹 Transform API response INSIDE npm
+      const formatted = json.labels.map((label, i) => ({
+        name: label,
+        value: json.values[i],
+      }));
+
+      setChartData(formatted);
+    } catch (e) {
+      setError('Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View>
+      {/* 🔘 BUTTONS */}
+      <View style={styles.btnRow}>
+        {buttons.map((btn) => (
+          <TouchableOpacity
+            key={btn.label}
+            style={[
+              styles.btn,
+              active === btn.label && styles.activeBtn,
+            ]}
+            onPress={() => fetchData(btn)}
+          >
+            <Text style={styles.btnText}>{btn.label}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+
+      {/* 🔄 LOADING */}
+      {loading && <ActivityIndicator size="large" />}
+
+      {/* ❌ ERROR */}
+      {error && <Text style={styles.error}>{error}</Text>}
+
+      {/* 📊 CHART */}
+      {!loading && chartData.length > 0 && (
+        <View style={[styles.chart, { height }]}>
+          {chartData.map((item, index) => (
+            <View key={index} style={styles.barWrap}>
+              <View
+                style={[
+                  styles.bar,
+                  { height: Math.max(item.value / 1000, 10) },
+                ]}
+              />
+              <Text style={styles.label}>{item.name}</Text>
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default ReportChart;
+
+const styles = StyleSheet.create({
+  btnRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+  },
+  btn: {
+    flex: 1,
+    marginHorizontal: 4,
+    paddingVertical: 8,
+    borderRadius: 6,
+    backgroundColor: '#ddd',
+    alignItems: 'center',
+  },
+  activeBtn: {
+    backgroundColor: '#4CAF50',
+  },
+  btnText: {
+    fontWeight: '600',
+    color: '#000',
+  },
+  chart: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginTop: 12,
+  },
+  barWrap: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  bar: {
+    width: 22,
+    backgroundColor: '#4CAF50',
+    borderRadius: 6,
+  },
+  label: {
+    fontSize: 12,
+    marginTop: 6,
+  },
+  error: {
+    color: 'red',
+    textAlign: 'center',
+    marginTop: 10,
+  },
+});