@dhiraj0720/report1chart 1.0.1 → 1.0.4

package/package.json

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

package/src/index.jsx

@@ -0,0 +1,813 @@
+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);
+    }
+  };
+
+  // Add currency formatter
+const formatCurrency = (value) => {
+  const num = Number(value);
+  if (isNaN(num)) return '0';
+  
+  if (num >= 1000000) {
+    return `${(num / 1000000).toFixed(1)}M`;
+  } else if (num >= 1000) {
+    return `${(num / 1000).toFixed(1)}K`;
+  }
+  return num.toString();
+};
+
+  const renderChart = () => {
+  if (!reportData || !reportData.data) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  const { type, data } = reportData;
+  
+  switch (type) {
+    case 'table':
+      return renderTable(data);
+    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 renderTable = (data) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={true}>
+      <View style={styles.table}>
+        {/* Table Header */}
+        <View style={styles.tableHeader}>
+          <View style={[styles.headerCell, styles.firstColumn]}>
+            <Text style={styles.headerText}>FALİYET KAR/ZARAR</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>2024 Fiili</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>2025 Fiili</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>Fiili Artış %</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>2025 Bütçe</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>Sapma %</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>FALİYET GİD.</Text>
+            <Text style={styles.headerText}>/ BRÜT KAR %</Text>
+          </View>
+        </View>
+
+        {/* Table Rows */}
+        {data.map((item, index) => (
+          <View 
+            key={index} 
+            style={[
+              styles.tableRow,
+              item.isTotal ? styles.totalRow : (index % 2 === 0 ? styles.evenRow : styles.oddRow)
+            ]}
+          >
+            <View style={[styles.cell, styles.firstColumn]}>
+              <Text style={item.isTotal ? styles.totalText : styles.cellText}>
+                {item.name}
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={styles.numberText}>
+                {formatCurrency(item.actual2024)}
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={styles.numberText}>
+                {formatCurrency(item.actual2025)}
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={[
+                styles.percentText,
+                item.yoYChangePercent >= 0 ? styles.positive : styles.negative
+              ]}>
+                {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent)}%
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={styles.numberText}>
+                {formatCurrency(item.budget2025)}
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={[
+                styles.percentText,
+                item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
+              ]}>
+                {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent)}%
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={[
+                styles.percentText,
+                styles.grossMargin
+              ]}>
+                {item.grossMarginPercent}%
+              </Text>
+            </View>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+};
+
+
+
+  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',
+  },
+
+   // Table Styles
+  table: {
+    minWidth: 700,
+    marginBottom: 20,
+  },
+  tableHeader: {
+    flexDirection: 'row',
+    backgroundColor: '#2c3e50',
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd',
+  },
+  headerCell: {
+    flex: 1,
+    padding: 10,
+    minWidth: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#444',
+  },
+  firstColumn: {
+    flex: 1.5,
+    minWidth: 180,
+  },
+  headerText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 11,
+    textAlign: 'center',
+  },
+  tableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    minHeight: 40,
+  },
+  evenRow: {
+    backgroundColor: '#fff',
+  },
+  oddRow: {
+    backgroundColor: '#f9f9f9',
+  },
+  totalRow: {
+    backgroundColor: '#e8f5e9',
+    borderTopWidth: 2,
+    borderTopColor: '#4CAF50',
+    borderBottomWidth: 2,
+    borderBottomColor: '#4CAF50',
+  },
+  cell: {
+    flex: 1,
+    padding: 8,
+    minWidth: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#eee',
+  },
+  cellText: {
+    fontSize: 12,
+    color: '#333',
+    textAlign: 'center',
+  },
+  totalText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#2c3e50',
+    textAlign: 'center',
+  },
+  numberText: {
+    fontSize: 11,
+    fontWeight: '500',
+    fontFamily: 'monospace',
+    color: '#333',
+  },
+  percentText: {
+    fontSize: 12,
+    fontWeight: '600',
+    fontFamily: 'monospace',
+  },
+  positive: {
+    color: '#27ae60',
+  },
+  negative: {
+    color: '#e74c3c',
+  },
+  grossMargin: {
+    color: '#2c3e50',
+    fontWeight: '700',
+  },
+});
+
+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,
-  },
-});