@dhiraj0720/report1chart 2.2.1 → 2.2.3

package/src/components/charts/LineChart.jsx

@@ -1,134 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
-
-const LineChart = ({ data, title }) => {
-  const formatNumber = (num) => {
-    return num.toLocaleString();
-  };
-
-  if (!data || (!Array.isArray(data) && !data.values)) {
-    return (
-      <View style={styles.noDataContainer}>
-        <Text style={styles.noDataText}>No data available</Text>
-      </View>
-    );
-  }
-
-  let values, labels;
-  
-  if (Array.isArray(data)) {
-    values = data.map(d => d.value || 0);
-    labels = data.map(d => d.label || '');
-  } else {
-    values = data.values || [];
-    labels = data.labels || [];
-  }
-  
-  if (values.length === 0) {
-    return (
-      <View style={styles.noDataContainer}>
-        <Text style={styles.noDataText}>No data available</Text>
-      </View>
-    );
-  }
-
-  const maxValue = Math.max(...values, 1);
-  const chartHeight = 200;
-
-  return (
-    <View style={styles.container}>
-      {title && <Text style={styles.title}>{title}</Text>}
-      <ScrollView 
-        horizontal 
-        showsHorizontalScrollIndicator={true}
-      >
-        <View style={[styles.chart, { height: chartHeight }]}>
-          {values.map((value, index) => {
-            const height = (value / maxValue) * chartHeight;
-            const label = labels[index] || `M${index + 1}`;
-            
-            return (
-              <View key={index} style={styles.pointWrapper}>
-                <View style={[styles.point, { 
-                  height: Math.max(height, 2),
-                }]} />
-                <View style={styles.connector} />
-                <Text style={styles.pointLabel} numberOfLines={1}>{label}</Text>
-                <Text style={styles.valueText}>{formatNumber(value)}</Text>
-              </View>
-            );
-          })}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#e8e8e8',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#000',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  chart: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    paddingHorizontal: 8,
-    minWidth: 400,
-  },
-  pointWrapper: {
-    alignItems: 'center',
-    marginHorizontal: 12,
-  },
-  point: {
-    width: 30,
-    backgroundColor: '#2196F3',
-    borderRadius: 2,
-  },
-  connector: {
-    width: 2,
-    backgroundColor: '#2196F3',
-    opacity: 0.3,
-    marginVertical: 2,
-    flex: 1,
-  },
-  pointLabel: {
-    marginTop: 8,
-    fontSize: 12,
-    color: '#666',
-    textAlign: 'center',
-    width: 60,
-  },
-  valueText: {
-    fontSize: 11,
-    color: '#999',
-    marginTop: 4,
-    fontWeight: '500',
-  },
-  noDataContainer: {
-    padding: 40,
-    alignItems: 'center',
-  },
-  noDataText: {
-    fontSize: 16,
-    color: '#999',
-    textAlign: 'center',
-  },
-});
-
-export default LineChart;

package/src/components/charts/PieChart.jsx

@@ -1,120 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-} from 'react-native';
-
-const PieChart = ({ data, title }) => {
-  const formatNumber = (num) => {
-    return num.toLocaleString();
-  };
-
-  const getColor = (index) => {
-    const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0'];
-    return colors[index % colors.length];
-  };
-
-  if (!Array.isArray(data) || data.length === 0) {
-    return (
-      <View style={styles.noDataContainer}>
-        <Text style={styles.noDataText}>No data available</Text>
-      </View>
-    );
-  }
-
-  const total = data.reduce((sum, item) => sum + (item.shipments || item.value || 0), 0);
-
-  return (
-    <View style={styles.container}>
-      {title && <Text style={styles.title}>{title}</Text>}
-      <View style={styles.pieContainer}>
-        {data.map((item, index) => {
-          const value = item.shipments || item.value || 0;
-          const label = item.direction || 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 styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#e8e8e8',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#000',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  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',
-  },
-  noDataText: {
-    fontSize: 16,
-    color: '#999',
-    textAlign: 'center',
-  },
-});
-
-export default PieChart;

package/src/components/common/ErrorDisplay.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-} from 'react-native';
-
-const ErrorDisplay = ({ error, onRetry }) => {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.errorText}>Error: {error}</Text>
-      {onRetry && (
-        <TouchableOpacity 
-          style={styles.retryButton}
-          onPress={onRetry}
-        >
-          <Text style={styles.retryText}>Retry</Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    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',
-  },
-});
-
-export default ErrorDisplay;

package/src/components/common/LoadingSpinner.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  ActivityIndicator,
-  StyleSheet,
-} from 'react-native';
-
-const LoadingSpinner = ({ message = 'Loading...' }) => {
-  return (
-    <View style={styles.container}>
-      <ActivityIndicator size="large" color="#4CAF50" />
-      <Text style={styles.message}>{message}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 40,
-  },
-  message: {
-    marginTop: 16,
-    fontSize: 16,
-    color: '#666',
-  },
-});
-
-export default LoadingSpinner;

package/src/components/common/ReportCard.jsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-} from 'react-native';
-
-const ReportCard = ({ report, onPress }) => {
-  const getColor = (id) => {
-    const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0'];
-    return colors[Math.floor(id) % colors.length];
-  };
-
-  return (
-    <TouchableOpacity
-      style={styles.card}
-      onPress={onPress}
-    >
-      <View style={[styles.icon, { backgroundColor: getColor(report.id) }]}>
-        <Text style={styles.iconText}>{Math.floor(report.id)}</Text>
-      </View>
-      <View style={styles.info}>
-        <Text style={styles.name}>{report.name}</Text>
-        <Text style={styles.title}>{report.title}</Text>
-        <Text style={styles.desc}>{report.description}</Text>
-      </View>
-      <Text style={styles.arrow}>›</Text>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  card: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: '#e8e8e8',
-  },
-  icon: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  iconText: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#fff',
-  },
-  info: {
-    flex: 1,
-  },
-  name: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#000',
-    marginBottom: 2,
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#4CAF50',
-    marginBottom: 4,
-  },
-  desc: {
-    fontSize: 13,
-    color: '#666',
-    lineHeight: 18,
-  },
-  arrow: {
-    fontSize: 24,
-    color: '#ccc',
-    fontWeight: '300',
-  },
-});
-
-export default ReportCard;

package/src/components/tables/CompactTable.jsx

@@ -1,194 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
-
-const CompactTable = ({ data }) => {
-  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.toLocaleString();
-  };
-
-  if (!Array.isArray(data) || data.length === 0) {
-    return (
-      <View style={styles.noDataContainer}>
-        <Text style={styles.noDataText}>No data available</Text>
-      </View>
-    );
-  }
-
-  return (
-    <ScrollView style={styles.container}>
-      {data.map((item, index) => (
-        <View 
-          key={index}
-          style={[
-            styles.card,
-            item.isTotal && styles.totalCard,
-          ]}
-        >
-          <View style={styles.header}>
-            <Text style={[
-              styles.title,
-              item.isTotal && styles.totalTitle
-            ]}>
-              {item.name}
-            </Text>
-            <Text style={[
-              styles.grossMargin,
-            ]}>
-              Gross Margin: {item.grossMarginPercent}%
-            </Text>
-          </View>
-
-          <View style={styles.grid}>
-            <View style={styles.column}>
-              <Text style={styles.label}>2024 Actual</Text>
-              <Text style={styles.value}>
-                {formatCurrency(item.actual2024)}
-              </Text>
-            </View>
-            
-            <View style={styles.column}>
-              <Text style={styles.label}>2025 Actual</Text>
-              <Text style={styles.value}>
-                {formatCurrency(item.actual2025)}
-              </Text>
-            </View>
-            
-            <View style={styles.column}>
-              <Text style={styles.label}>YoY Change</Text>
-              <Text style={[
-                styles.percentText,
-                item.yoYChangePercent >= 0 ? styles.positive : styles.negative
-              ]}>
-                {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent)}%
-              </Text>
-            </View>
-            
-            <View style={styles.column}>
-              <Text style={styles.label}>2025 Budget</Text>
-              <Text style={styles.value}>
-                {formatCurrency(item.budget2025)}
-              </Text>
-            </View>
-            
-            <View style={styles.column}>
-              <Text style={styles.label}>Variance</Text>
-              <Text style={[
-                styles.percentText,
-                item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
-              ]}>
-                {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent)}%
-              </Text>
-            </View>
-          </View>
-        </View>
-      ))}
-    </ScrollView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 8,
-  },
-  card: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    marginBottom: 12,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: '#e8e8e8',
-  },
-  totalCard: {
-    backgroundColor: '#e8f5e9',
-    borderColor: '#4CAF50',
-    borderWidth: 2,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-    paddingBottom: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#eee',
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#2c3e50',
-    flex: 1,
-  },
-  totalTitle: {
-    fontWeight: '700',
-    color: '#2c3e50',
-    fontSize: 15,
-  },
-  grossMargin: {
-    fontSize: 13,
-    fontWeight: '600',
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 6,
-    backgroundColor: '#f0f0f0',
-    color: '#2c3e50',
-  },
-  grid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-  },
-  column: {
-    width: '48%',
-    marginBottom: 12,
-    backgroundColor: '#f8f9fa',
-    padding: 10,
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  label: {
-    fontSize: 11,
-    color: '#666',
-    marginBottom: 4,
-    textAlign: 'center',
-  },
-  value: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: '#2c3e50',
-  },
-  percentText: {
-    fontSize: 12,
-    fontWeight: '600',
-  },
-  positive: {
-    color: '#27ae60',
-  },
-  negative: {
-    color: '#e74c3c',
-  },
-  noDataContainer: {
-    padding: 40,
-    alignItems: 'center',
-  },
-  noDataText: {
-    fontSize: 16,
-    color: '#999',
-    textAlign: 'center',
-  },
-});
-
-export default CompactTable;