@dhiraj0720/report1chart 1.0.1 → 1.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "1.0.1",
-  "main": "src/index.js",
+  "version": "1.0.3",
+  "main": "src/index.jsx",
   "publishConfig": {
     "access": "public"
   },

package/src/index.jsx

@@ -0,0 +1,600 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+  Dimensions,
+} from 'react-native';
+
+const ReportChart = ({ 
+  onReportSelect, 
+  onClose, 
+  reports = [],
+  onFetchReportData 
+}) => {
+  const [selectedReport, setSelectedReport] = useState(null);
+  const [reportData, setReportData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Default reports if none provided
+  const defaultReports = [
+    { 
+      id: 1, 
+      name: 'Report 1', 
+      title: 'Revenue Trend',
+      type: 'line',
+      description: 'Monthly revenue analysis'
+    },
+    { 
+      id: 2, 
+      name: 'Report 2', 
+      title: 'Revenue by Mode',
+      type: 'bar',
+      description: 'Revenue distribution across modes'
+    },
+    { 
+      id: 3, 
+      name: 'Report 3', 
+      title: 'Shipment by Direction',
+      type: 'pie',
+      description: 'Shipment direction analysis'
+    },
+  ];
+
+  const reportList = reports.length > 0 ? reports : defaultReports;
+
+  const handleReportClick = async (report) => {
+    setLoading(true);
+    setError(null);
+    setReportData(null);
+    setSelectedReport(report);
+    
+    try {
+      // Call the parent function to fetch data
+      if (onFetchReportData) {
+        const data = await onFetchReportData(report);
+        if (data) {
+          setReportData({
+            ...data,
+            title: report.title || report.name,
+            type: report.type || 'bar',
+          });
+        }
+      }
+      
+      // Callback to parent
+      if (onReportSelect) {
+        onReportSelect(report.name);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to fetch report data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderChart = () => {
+    if (!reportData || !reportData.data) {
+      return (
+        <View style={styles.noDataContainer}>
+          <Text style={styles.noDataText}>No data available</Text>
+        </View>
+      );
+    }
+
+    const { type, data } = reportData;
+    
+    switch (type) {
+      case 'line':
+        return renderLineChart(data);
+      case 'bar':
+        return renderBarChart(data);
+      case 'pie':
+        return renderPieChart(data);
+      default:
+        return renderBarChart(data);
+    }
+  };
+
+  const renderLineChart = (data) => {
+    // Handle both formats: { labels, values } or array format
+    const values = data.values || data.map(d => d.value || d.revenue || d.shipments || 0);
+    const labels = data.labels || data.map(d => d.label || d.month || d.mode || d.direction || '');
+    
+    const maxValue = Math.max(...values, 1);
+    const chartHeight = 200;
+    const chartWidth = Dimensions.get('window').width - 64;
+    const barWidth = (chartWidth / values.length) - 10;
+    
+    return (
+      <View style={styles.chartContainer}>
+        <Text style={styles.chartTitle}>{reportData.title}</Text>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View style={[styles.chart, { height: chartHeight, width: chartWidth }]}>
+            {values.map((value, index) => {
+              const height = (value / maxValue) * chartHeight;
+              const label = labels[index] || `M${index + 1}`;
+              
+              return (
+                <View key={index} style={styles.linePointWrapper}>
+                  <View style={[styles.linePoint, { 
+                    height: Math.max(height, 2),
+                    width: barWidth 
+                  }]} />
+                  <View style={styles.lineConnector} />
+                  <Text style={styles.lineLabel} numberOfLines={1}>{label}</Text>
+                  <Text style={styles.valueText}>{formatNumber(value)}</Text>
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
+      </View>
+    );
+  };
+
+  const renderBarChart = (data) => {
+    // Handle array format or object format
+    const isArray = Array.isArray(data);
+    const values = isArray ? data.map(d => d.revenue || d.value || d.shipments || 0) : data.values;
+    const labels = isArray ? data.map(d => d.mode || d.label || '') : data.labels;
+    
+    const maxValue = Math.max(...values, 1);
+    const chartHeight = 200;
+    const chartWidth = Dimensions.get('window').width - 64;
+    const barWidth = Math.min(40, (chartWidth / values.length) - 10);
+    
+    return (
+      <View style={styles.chartContainer}>
+        <Text style={styles.chartTitle}>{reportData.title}</Text>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View style={[styles.chart, { height: chartHeight, width: chartWidth }]}>
+            {values.map((value, index) => {
+              const height = (value / maxValue) * chartHeight;
+              const label = labels?.[index] || `Item ${index + 1}`;
+              
+              return (
+                <View key={index} style={styles.barWrapper}>
+                  <View style={[styles.bar, { 
+                    height,
+                    width: barWidth,
+                    backgroundColor: getColor(index)
+                  }]} />
+                  <Text style={styles.barLabel} numberOfLines={1}>{label}</Text>
+                  <Text style={styles.valueText}>{formatNumber(value)}</Text>
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
+      </View>
+    );
+  };
+
+  const renderPieChart = (data) => {
+    // Data should be array of objects with label and value
+    const total = data.reduce((sum, item) => sum + (item.shipments || item.revenue || item.value || 0), 0);
+    
+    return (
+      <View style={styles.chartContainer}>
+        <Text style={styles.chartTitle}>{reportData.title}</Text>
+        <View style={styles.pieContainer}>
+          {data.map((item, index) => {
+            const value = item.shipments || item.revenue || item.value || 0;
+            const label = item.direction || item.mode || item.label || `Item ${index + 1}`;
+            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
+            
+            return (
+              <View key={index} style={styles.pieItem}>
+                <View style={[styles.pieColor, { backgroundColor: getColor(index) }]} />
+                <Text style={styles.pieLabel}>{label}:</Text>
+                <Text style={styles.pieValue}>
+                  {formatNumber(value)} ({percentage}%)
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+        {total > 0 && (
+          <Text style={styles.totalText}>Total: {formatNumber(total)}</Text>
+        )}
+      </View>
+    );
+  };
+
+  const formatNumber = (num) => {
+    return num.toLocaleString();
+  };
+
+  const getColor = (index) => {
+    const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0', '#00BCD4'];
+    return colors[index % colors.length];
+  };
+
+  const handleClose = () => {
+    setSelectedReport(null);
+    setReportData(null);
+    if (onClose) onClose();
+  };
+
+  if (selectedReport) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <TouchableOpacity 
+            style={styles.backButton}
+            onPress={() => {
+              setSelectedReport(null);
+              setReportData(null);
+            }}
+          >
+            <Text style={styles.backText}>‹</Text>
+            <Text style={styles.backButtonText}>Back</Text>
+          </TouchableOpacity>
+          <Text style={styles.headerTitle} numberOfLines={1}>
+            {selectedReport.title || selectedReport.name}
+          </Text>
+          <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+            <Text style={styles.closeText}>×</Text>
+          </TouchableOpacity>
+        </View>
+
+        {loading ? (
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color="#4CAF50" />
+            <Text style={styles.loadingText}>Loading report data...</Text>
+          </View>
+        ) : error ? (
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>Error: {error}</Text>
+            <TouchableOpacity 
+              style={styles.retryButton}
+              onPress={() => handleReportClick(selectedReport)}
+            >
+              <Text style={styles.retryText}>Retry</Text>
+            </TouchableOpacity>
+          </View>
+        ) : (
+          <ScrollView style={styles.chartView}>
+            {renderChart()}
+            
+            {reportData && reportData.data && (
+              <View style={styles.dataInfo}>
+                <Text style={styles.infoTitle}>Report Information</Text>
+                <Text style={styles.infoText}>
+                  {selectedReport.description || 'Detailed analysis report'}
+                </Text>
+                <Text style={styles.dataSource}>
+                  Data points: {Array.isArray(reportData.data) ? reportData.data.length : 
+                    reportData.data.values?.length || reportData.data.labels?.length || 'N/A'}
+                </Text>
+              </View>
+            )}
+          </ScrollView>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Reports Dashboard</Text>
+        <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+          <Text style={styles.closeText}>×</Text>
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView style={styles.reportsList}>
+        {reportList.map((report) => (
+          <TouchableOpacity
+            key={report.id}
+            style={styles.reportCard}
+            onPress={() => handleReportClick(report)}
+          >
+            <View style={[styles.reportIcon, { backgroundColor: getColor(report.id) }]}>
+              <Text style={styles.reportIconText}>{report.id}</Text>
+            </View>
+            <View style={styles.reportInfo}>
+              <Text style={styles.reportName}>{report.name}</Text>
+              <Text style={styles.reportTitle}>{report.title}</Text>
+              <Text style={styles.reportDesc}>{report.description}</Text>
+            </View>
+            <Text style={styles.arrow}>›</Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#fff',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#000',
+    flex: 1,
+    textAlign: 'center',
+  },
+  backButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  backText: {
+    fontSize: 24,
+    color: '#4CAF50',
+    marginRight: 4,
+  },
+  backButtonText: {
+    fontSize: 16,
+    color: '#4CAF50',
+    fontWeight: '600',
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeText: {
+    fontSize: 20,
+    color: '#666',
+    fontWeight: '300',
+  },
+  reportsList: {
+    flex: 1,
+    padding: 16,
+  },
+  reportCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  reportIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  reportIconText: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#fff',
+  },
+  reportInfo: {
+    flex: 1,
+  },
+  reportName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#000',
+    marginBottom: 2,
+  },
+  reportTitle: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#4CAF50',
+    marginBottom: 4,
+  },
+  reportDesc: {
+    fontSize: 13,
+    color: '#666',
+    lineHeight: 18,
+  },
+  arrow: {
+    fontSize: 24,
+    color: '#ccc',
+    fontWeight: '300',
+  },
+  chartView: {
+    flex: 1,
+    padding: 16,
+  },
+  chartContainer: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  chartTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#000',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  chart: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    paddingHorizontal: 8,
+  },
+  barWrapper: {
+    alignItems: 'center',
+    marginHorizontal: 4,
+  },
+  bar: {
+    borderRadius: 4,
+  },
+  barLabel: {
+    marginTop: 8,
+    fontSize: 11,
+    color: '#666',
+    textAlign: 'center',
+    width: 60,
+  },
+  linePointWrapper: {
+    alignItems: 'center',
+    marginHorizontal: 4,
+  },
+  linePoint: {
+    backgroundColor: '#2196F3',
+    borderRadius: 2,
+  },
+  lineConnector: {
+    width: 2,
+    backgroundColor: '#2196F3',
+    opacity: 0.3,
+    marginVertical: 2,
+    flex: 1,
+  },
+  lineLabel: {
+    marginTop: 8,
+    fontSize: 11,
+    color: '#666',
+    textAlign: 'center',
+    width: 60,
+  },
+  valueText: {
+    fontSize: 10,
+    color: '#999',
+    marginTop: 4,
+    fontWeight: '500',
+  },
+  pieContainer: {
+    padding: 10,
+  },
+  pieItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+    padding: 8,
+    backgroundColor: '#f9f9f9',
+    borderRadius: 8,
+  },
+  pieColor: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    marginRight: 12,
+  },
+  pieLabel: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#000',
+    flex: 1,
+  },
+  pieValue: {
+    fontSize: 14,
+    color: '#666',
+    fontWeight: '500',
+  },
+  totalText: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#4CAF50',
+    textAlign: 'center',
+    marginTop: 16,
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+  },
+  dataInfo: {
+    backgroundColor: '#e8f5e9',
+    borderRadius: 12,
+    padding: 16,
+    marginTop: 8,
+  },
+  infoTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#2e7d32',
+    marginBottom: 8,
+  },
+  infoText: {
+    fontSize: 14,
+    color: '#555',
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  dataSource: {
+    fontSize: 13,
+    color: '#777',
+    fontStyle: 'italic',
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 40,
+  },
+  loadingText: {
+    marginTop: 16,
+    fontSize: 16,
+    color: '#666',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 40,
+  },
+  errorText: {
+    fontSize: 16,
+    color: '#d32f2f',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  retryButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  retryText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  noDataContainer: {
+    padding: 40,
+    alignItems: 'center',
+  },
+  noDataText: {
+    fontSize: 16,
+    color: '#999',
+    textAlign: 'center',
+  },
+});
+
+export default ReportChart;

package/src/index.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-const BarChart = ({ data = [], height = 200 }) => {
-  const maxValue = Math.max(...data.map(d => d.value), 1);
-
-  return (
-    <View style={[styles.container, { height }]}>
-      {data.map((item, index) => {
-        const barHeight = (item.value / maxValue) * height;
-
-        return (
-          <View key={index} style={styles.barWrapper}>
-            <View style={[styles.bar, { height: barHeight }]} />
-            <Text style={styles.label}>{item.name}</Text>
-          </View>
-        );
-      })}
-    </View>
-  );
-};
-
-export default BarChart; // ✅ DEFAULT EXPORT
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-  },
-  barWrapper: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  bar: {
-    width: 22,
-    backgroundColor: '#4CAF50',
-    borderRadius: 6,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 12,
-  },
-});