@dhiraj0720/report1chart 2.2.2 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "main": "src/index.jsx",
   "scripts": {
     "test": "echo 'No tests'"
@@ -22,9 +22,5 @@
   "author": "Dhiraj",
   "license": "MIT",
   "description": "A simple report chart and table package for React Native",
-  "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
-    "@babel/preset-react": "^7.28.5"
-  }
+  "devDependencies": {}
 }

package/src/api/fetcher.jsx

@@ -0,0 +1,70 @@
+import axios from 'axios';
+
+export class ApiFetcher {
+  static async fetchReportData(reportConfig) {
+    try {
+      console.log('Fetching report data from:', reportConfig.apiConfig.url);
+      
+      const headers = {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      };
+
+      // Add token if provided
+      if (reportConfig.apiConfig.token) {
+        headers['Authorization'] = `Bearer ${reportConfig.apiConfig.token}`;
+      }
+
+      const response = await axios.get(reportConfig.apiConfig.url, {
+        timeout: 15000,
+        headers: headers
+      });
+
+      console.log('API Response received:', response.status);
+      
+      // Transform data based on report type
+      return this.transformData(response.data, reportConfig);
+      
+    } catch (error) {
+      console.error('API Fetch Error:', error);
+      throw new Error(`Failed to fetch report: ${error.message}`);
+    }
+  }
+
+  static transformData(data, reportConfig) {
+    // For performance reports (type 1, 1.1, 1.2)
+    if (reportConfig.id === 1 || reportConfig.id === 1.1 || reportConfig.id === 1.2) {
+      return {
+        data: data.data || [],
+        title: reportConfig.title,
+        type: 'table',
+        subType: reportConfig.subType
+      };
+    }
+
+    // For report 2 (Revenue by Mode)
+    if (reportConfig.id === 2) {
+      return {
+        data: Array.isArray(data) ? data : data.data || [],
+        title: reportConfig.title,
+        type: 'bar'
+      };
+    }
+
+    // For report 3 (Shipment by Direction)
+    if (reportConfig.id === 3) {
+      return {
+        data: Array.isArray(data) ? data : data.data || [],
+        title: reportConfig.title,
+        type: 'pie'
+      };
+    }
+
+    // Default transformation
+    return {
+      data: data,
+      title: reportConfig.title,
+      type: reportConfig.type || 'bar'
+    };
+  }
+}

package/src/components/ChartRenderer.jsx

@@ -0,0 +1,388 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+// Helper functions
+export const formatNumber = (num) => {
+  return num.toLocaleString();
+};
+
+export const getColor = (index) => {
+  const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0', '#00BCD4'];
+  return colors[index % colors.length];
+};
+
+export const renderLineChart = (data, title) => {
+  // Extract values and labels from data
+  const values = data.values || (Array.isArray(data) ? data.map(d => d.value || d.revenue || d.shipments || 0) : []);
+  const labels = data.labels || (Array.isArray(data) ? data.map(d => d.label || d.month || d.mode || d.direction || '') : []);
+  
+  if (values.length === 0) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  const maxValue = Math.max(...values, 1);
+  const chartHeight = 200;
+  const chartWidth = Math.max(screenWidth - 64, values.length * 60);
+  const barWidth = Math.max(20, (chartWidth / values.length) - 10);
+  
+  return (
+    <View style={styles.chartContainer}>
+      <Text style={styles.chartTitle}>{title || ''}</Text>
+      <ScrollView 
+        horizontal 
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ width: chartWidth }}
+      >
+        <View style={[styles.chart, { height: chartHeight }]}>
+          {values.map((value, index) => {
+            const height = (value / maxValue) * chartHeight;
+            const label = labels[index] || `Item ${index + 1}`;
+            
+            return (
+              <View key={index} style={[styles.linePointWrapper, { width: barWidth + 10 }]}>
+                <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>
+  );
+};
+
+export const renderBarChart = (data, title) => {
+  // Extract values and labels from data
+  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 || []);
+  
+  if (values.length === 0) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  const maxValue = Math.max(...values, 1);
+  const chartHeight = 200;
+  const chartWidth = Math.max(screenWidth - 64, values.length * 60);
+  const barWidth = Math.min(40, Math.max(20, (chartWidth / values.length) - 10));
+  
+  return (
+    <View style={styles.chartContainer}>
+      <Text style={styles.chartTitle}>{title || ''}</Text>
+      <ScrollView 
+        horizontal 
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ width: chartWidth }}
+      >
+        <View style={[styles.chart, { height: chartHeight }]}>
+          {values.map((value, index) => {
+            const height = (value / maxValue) * chartHeight;
+            const label = labels?.[index] || `Item ${index + 1}`;
+            
+            return (
+              <View key={index} style={[styles.barWrapper, { width: barWidth + 20 }]}>
+                <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>
+  );
+};
+
+export const renderPieChart = (data, title) => {
+  // Ensure data is an array
+  const dataArray = Array.isArray(data) ? data : [];
+  
+  if (dataArray.length === 0) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  const total = dataArray.reduce((sum, item) => {
+    const value = item.shipments || item.revenue || item.value || 0;
+    return sum + value;
+  }, 0);
+  
+  return (
+    <View style={styles.chartContainer}>
+      <Text style={styles.chartTitle}>{title || ''}</Text>
+      <View style={styles.pieContainer}>
+        {dataArray.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>
+  );
+};
+
+// Additional chart renderer for Revenue Trend (line chart with different style)
+export const renderRevenueTrendChart = (data, title) => {
+  // Handle different data formats
+  let values = [];
+  let labels = [];
+  
+  if (data.values && data.labels) {
+    values = data.values;
+    labels = data.labels;
+  } else if (Array.isArray(data)) {
+    values = data.map(d => d.revenue || d.value || 0);
+    labels = data.map(d => d.month || d.label || '');
+  }
+  
+  if (values.length === 0) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  const maxValue = Math.max(...values, 1);
+  const chartHeight = 200;
+  const chartWidth = Math.max(screenWidth - 64, values.length * 80);
+  const pointWidth = 8;
+  
+  return (
+    <View style={styles.chartContainer}>
+      <Text style={styles.chartTitle}>{title || 'Revenue Trend'}</Text>
+      <ScrollView 
+        horizontal 
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ width: chartWidth }}
+      >
+        <View style={[styles.chart, { height: chartHeight, justifyContent: 'space-around' }]}>
+          {values.map((value, index) => {
+            const height = (value / maxValue) * chartHeight;
+            const label = labels[index] || `Period ${index + 1}`;
+            
+            return (
+              <View key={index} style={styles.trendPointWrapper}>
+                <View style={styles.trendValueContainer}>
+                  <Text style={styles.trendValueText}>{formatNumber(value)}</Text>
+                </View>
+                <View style={[styles.trendPoint, { 
+                  height: Math.max(height, 2),
+                  width: pointWidth,
+                  backgroundColor: '#4CAF50'
+                }]} />
+                <View style={styles.trendLine} />
+                <Text style={styles.trendLabel} numberOfLines={1}>{label}</Text>
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  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',
+    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,
+    minHeight: 20,
+  },
+  lineLabel: {
+    marginTop: 8,
+    fontSize: 11,
+    color: '#666',
+    textAlign: 'center',
+    width: 60,
+  },
+  trendPointWrapper: {
+    alignItems: 'center',
+    marginHorizontal: 12,
+  },
+  trendPoint: {
+    borderRadius: 4,
+  },
+  trendLine: {
+    width: 2,
+    backgroundColor: '#4CAF50',
+    opacity: 0.5,
+    marginVertical: 2,
+    flex: 1,
+    minHeight: 20,
+  },
+  trendLabel: {
+    marginTop: 8,
+    fontSize: 11,
+    color: '#666',
+    textAlign: 'center',
+    width: 80,
+  },
+  trendValueContainer: {
+    backgroundColor: 'rgba(76, 175, 80, 0.1)',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    marginBottom: 4,
+  },
+  trendValueText: {
+    fontSize: 10,
+    color: '#4CAF50',
+    fontWeight: '600',
+  },
+  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',
+  },
+  noDataContainer: {
+    padding: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 200,
+  },
+  noDataText: {
+    fontSize: 16,
+    color: '#999',
+    textAlign: 'center',
+    fontStyle: 'italic',
+  },
+});
+
+export default {
+  renderLineChart,
+  renderBarChart,
+  renderPieChart,
+  renderRevenueTrendChart,
+  getColor,
+  formatNumber
+};

package/src/components/ReportList.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+
+const ReportList = ({ reports, onReportClick, getColor }) => {
+  // Default reports if none provided
+  const defaultReports = [
+    { 
+      id: 1, 
+      name: 'Performance Report', 
+      title: 'PERFORMANS RAPORU (USD)',
+      type: 'table',
+      description: 'Fallyet Kar/Zarar tablosu - Varsayılan Görünüm'
+    },
+    { 
+      id: 1.1, 
+      name: 'Performance Report A', 
+      title: 'PERFORMANS RAPORU (USD)',
+      type: 'table',
+      description: 'Fallyet Kar/Zarar tablosu - Kompakt Görünüm'
+    },
+    { 
+      id: 1.2, 
+      name: 'Performance Report B', 
+      title: 'PERFORMANS RAPORU (USD)',
+      type: 'table',
+      description: 'Fallyet Kar/Zarar tablosu - Sabit Kolonlu Görünüm'
+    },
+    { 
+      id: 2, 
+      name: 'Revenue by Mode', 
+      title: 'Revenue by Mode',
+      type: 'bar',
+      description: 'Revenue distribution across modes'
+    },
+    { 
+      id: 3, 
+      name: 'Shipment by Direction', 
+      title: 'Shipment by Direction',
+      type: 'pie',
+      description: 'Shipment direction analysis'
+    },
+  ];
+
+  const reportList = reports.length > 0 ? reports : defaultReports;
+
+  return (
+    <ScrollView style={styles.reportsList}>
+      {reportList.map((report) => (
+        <TouchableOpacity
+          key={report.id}
+          style={styles.reportCard}
+          onPress={() => onReportClick(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>
+  );
+};
+
+const styles = StyleSheet.create({
+  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',
+  },
+});
+
+export default ReportList;

package/src/components/ReportView.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+
+const ReportView = ({ reportData, viewType, onBack, onClose }) => {
+  if (!reportData) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.noDataText}>No report data available</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.backButton} onPress={onBack}>
+          <Text style={styles.backText}>‹ Back</Text>
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>{reportData.title}</Text>
+        <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+          <Text style={styles.closeText}>×</Text>
+        </TouchableOpacity>
+      </View>
+      
+      <ScrollView style={styles.content}>
+        {/* Report content will be rendered here by parent component */}
+      </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: {
+    padding: 8,
+  },
+  backText: {
+    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',
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  noDataText: {
+    fontSize: 16,
+    color: '#999',
+    textAlign: 'center',
+    padding: 40,
+  },
+});
+
+export default ReportView;