@dhirajpatil2025/report1chart 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhirajpatil2025/report1chart",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "src/index.js",
   "publishConfig": {
     "access": "public"

package/src/components/ChartView.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const ChartView = ({ data, height }) => (
+  <View style={[styles.chart, { height }]}>
+    {data.map((item, i) => (
+      <View key={i} style={styles.barWrap}>
+        <View style={[styles.bar, { height: item.value / 1000 }]} />
+        <Text style={styles.label}>{item.name}</Text>
+      </View>
+    ))}
+  </View>
+);
+
+export default ChartView;
+
+const styles = StyleSheet.create({
+  chart: { flexDirection: 'row', alignItems: 'flex-end' },
+  barWrap: { flex: 1, alignItems: 'center' },
+  bar: { width: 22, backgroundColor: '#4CAF50', borderRadius: 6 },
+  label: { fontSize: 12, marginTop: 6 },
+});

package/src/constants/reportOptions.js

@@ -0,0 +1,5 @@
+export default [
+  { label: 'Revenue', endpoint: '/revenue-trend' },
+  { label: 'Orders', endpoint: '/orders-trend' },
+  { label: 'Shipments', endpoint: '/shipments-trend' },
+];

package/src/index.js

@@ -1,132 +1,27 @@
 import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  ActivityIndicator,
-  StyleSheet,
-} from 'react-native';
+import { View } from 'react-native';
+import ReportHomeScreen from './screens/ReportHomeScreen';
+import ReportChartScreen from './screens/ReportChartScreen';
 
-const ReportChart = ({ baseUrl, height = 200 }) => {
-  const [loading, setLoading] = useState(false);
-  const [chartData, setChartData] = useState([]);
-  const [active, setActive] = useState(null);
-  const [error, setError] = useState(null);
-
-  const buttons = [
-    { label: 'Revenue', endpoint: '/revenue-trend' },
-    { label: 'Orders', endpoint: '/orders-trend' },
-    { label: 'Shipments', endpoint: '/shipments-trend' },
-  ];
-
-  const fetchData = async (btn) => {
-    try {
-      setActive(btn.label);
-      setLoading(true);
-      setError(null);
-
-      const res = await fetch(`${baseUrl}${btn.endpoint}`);
-      const json = await res.json();
-
-      // Expecting:
-      // { labels: [...], values: [...] }
-      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);
-    }
-  };
+const ReportModule = ({ baseUrl, height = 220 }) => {
+  const [activeReport, setActiveReport] = useState(null);
 
   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 && <ActivityIndicator size="large" />}
-      {error && <Text style={styles.error}>{error}</Text>}
+      {!activeReport && (
+        <ReportHomeScreen onSelect={setActiveReport} />
+      )}
 
-      {!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>
+      {activeReport && (
+        <ReportChartScreen
+          baseUrl={baseUrl}
+          report={activeReport}
+          height={height}
+          onClose={() => setActiveReport(null)}
+        />
       )}
     </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: '#e0e0e0',
-    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,
-  },
-});
+export default ReportModule;

package/src/screens/ReportChartScreen.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { fetchReportData } from '../services/reportService';
+import ChartView from '../components/ChartView';
+import LoadingView from '../components/LoadingView';
+
+const ReportChartScreen = ({ baseUrl, report, height, onClose }) => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const load = async () => {
+    const res = await fetchReportData(baseUrl, report.endpoint);
+    setData(res);
+    setLoading(false);
+  };
+
+  return (
+    <Modal visible transparent animationType="slide">
+      <View style={styles.overlay}>
+        <View style={styles.container}>
+          <Text style={styles.title}>{report.label}</Text>
+
+          {loading ? <LoadingView /> : <ChartView data={data} height={height} />}
+
+          <TouchableOpacity onPress={onClose} style={styles.backBtn}>
+            <Text>Back</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default ReportChartScreen;
+
+const styles = StyleSheet.create({
+  overlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'center', alignItems: 'center' },
+  container: { width: '90%', backgroundColor: '#fff', padding: 16, borderRadius: 12 },
+  title: { fontSize: 18, fontWeight: '700', marginBottom: 12, textAlign: 'center' },
+  backBtn: { marginTop: 16, padding: 10, borderWidth: 1, borderRadius: 6, alignItems: 'center' },
+});

package/src/screens/ReportHomeScreen.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import REPORT_OPTIONS from '../constants/reportOptions';
+
+const ReportHomeScreen = ({ onSelect }) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Select Report</Text>
+
+      {REPORT_OPTIONS.map((item) => (
+        <TouchableOpacity
+          key={item.label}
+          style={styles.btn}
+          onPress={() => onSelect(item)}
+        >
+          <Text style={styles.btnText}>{item.label}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+export default ReportHomeScreen;
+
+const styles = StyleSheet.create({
+  container: { padding: 16 },
+  title: { fontSize: 18, fontWeight: '700', marginBottom: 16, textAlign: 'center' },
+  btn: { padding: 12, marginVertical: 8, backgroundColor: '#4CAF50', borderRadius: 8 },
+  btnText: { color: '#fff', fontWeight: '600', textAlign: 'center' },
+});

package/src/services/reportService.js

@@ -0,0 +1,9 @@
+export const fetchReportData = async (baseUrl, endpoint) => {
+  const res = await fetch(`${baseUrl}${endpoint}`);
+  const json = await res.json();
+
+  return json.labels.map((label, i) => ({
+    name: label,
+    value: json.values[i],
+  }));
+};