@dhiraj0720/report1chart 2.2.3 → 2.2.4

package/src/screens/ReportScreen.jsx

@@ -1,417 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  ActivityIndicator,
-} from 'react-native';
-import { ApiFetcher } from '../api/fetcher';
-import ReportList from '../components/ReportList';
-import { 
-  renderTable, 
-  renderCompactTable, 
-  renderFreezeTable 
-} from '../components/TableRenderer';
-import { 
-  renderLineChart, 
-  renderBarChart, 
-  renderPieChart,
-  getColor 
-} from '../components/ChartRenderer';
-
-const ReportScreen = ({ 
-  onReportSelect, 
-  onClose, 
-  reports = []
-}) => {
-  const [selectedReport, setSelectedReport] = useState(null);
-  const [reportData, setReportData] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [viewType, setViewType] = useState('default');
-
-  const handleReportClick = async (report) => {
-    setLoading(true);
-    setError(null);
-    setReportData(null);
-    setSelectedReport(report);
-    setViewType('default');
-    
-    try {
-      // Fetch data using ApiFetcher from npm package
-      const data = await ApiFetcher.fetchReportData(report);
-      setReportData(data);
-      
-      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 for this report</Text>
-        </View>
-      );
-    }
-
-    const { type, data, title } = reportData;
-    
-    // For performance reports
-    if (type === 'table' && selectedReport && 
-        (selectedReport.id === 1 || selectedReport.id === 1.1 || selectedReport.id === 1.2)) {
-      switch (viewType) {
-        case 'compact':
-          return renderCompactTable(data);
-        case 'freeze':
-          return renderFreezeTable(data);
-        case 'default':
-        default:
-          return renderTable(data);
-      }
-    }
-    
-    // For other table reports
-    if (type === 'table') {
-      return renderTable(data);
-    }
-    
-    // For chart reports
-    switch (type) {
-      case 'line':
-        return renderLineChart(data, title);
-      case 'bar':
-        return renderBarChart(data, title);
-      case 'pie':
-        return renderPieChart(data, title);
-      default:
-        return renderBarChart(data, title);
-    }
-  };
-
-  // ========== RENDER SELECTED REPORT VIEW ==========
-  if (selectedReport) {
-    return (
-      <View style={styles.container}>
-        <View style={styles.header}>
-          <TouchableOpacity 
-            style={styles.backButton}
-            onPress={() => {
-              setSelectedReport(null);
-              setReportData(null);
-              setViewType('default');
-            }}
-          >
-            <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={onClose} 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}>
-            {/* View Type Selector for Performance Reports */}
-            {selectedReport && 
-             (selectedReport.id === 1 || selectedReport.id === 1.1 || selectedReport.id === 1.2) && 
-             reportData && (
-              <View style={styles.viewTypeSelector}>
-                <TouchableOpacity 
-                  style={[
-                    styles.viewTypeButton,
-                    viewType === 'default' && styles.activeViewType
-                  ]}
-                  onPress={() => setViewType('default')}
-                >
-                  <Text style={[
-                    styles.viewTypeText,
-                    viewType === 'default' && styles.activeViewTypeText
-                  ]}>Varsayılan</Text>
-                </TouchableOpacity>
-                
-                <TouchableOpacity 
-                  style={[
-                    styles.viewTypeButton,
-                    viewType === 'compact' && styles.activeViewType
-                  ]}
-                  onPress={() => setViewType('compact')}
-                >
-                  <Text style={[
-                    styles.viewTypeText,
-                    viewType === 'compact' && styles.activeViewTypeText
-                  ]}>Kompakt</Text>
-                </TouchableOpacity>
-                
-                <TouchableOpacity 
-                  style={[
-                    styles.viewTypeButton,
-                    viewType === 'freeze' && styles.activeViewType
-                  ]}
-                  onPress={() => setViewType('freeze')}
-                >
-                  <Text style={[
-                    styles.viewTypeText,
-                    viewType === 'freeze' && styles.activeViewTypeText
-                  ]}>Sabit Kolon</Text>
-                </TouchableOpacity>
-              </View>
-            )}
-            
-            <View style={styles.chartContainer}>
-              <Text style={styles.chartTitle}>{reportData?.title || selectedReport.title}</Text>
-              {selectedReport.id === 1 || selectedReport.id === 1.1 || selectedReport.id === 1.2 ? (
-                <Text style={styles.reportSubtitle}>
-                  {viewType === 'default' ? 'Varsayılan Görünüm' : 
-                   viewType === 'compact' ? 'Kompakt Görünüm' : 
-                   'Sabit Kolonlu Görünüm'}
-                </Text>
-              ) : null}
-              {renderChart()}
-            </View>
-            
-            {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>
-    );
-  }
-
-  // ========== RENDER REPORT LIST VIEW ==========
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.headerTitle}>Reports Dashboard</Text>
-        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-          <Text style={styles.closeText}>×</Text>
-        </TouchableOpacity>
-      </View>
-
-      <ReportList 
-        reports={reports}
-        onReportClick={handleReportClick}
-        getColor={getColor}
-      />
-    </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',
-  },
-  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',
-  },
-  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',
-  },
-  viewTypeSelector: {
-    flexDirection: 'row',
-    backgroundColor: '#f0f0f0',
-    borderRadius: 8,
-    padding: 4,
-    marginBottom: 16,
-    alignSelf: 'center',
-  },
-  viewTypeButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 6,
-    marginHorizontal: 2,
-  },
-  activeViewType: {
-    backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  viewTypeText: {
-    fontSize: 13,
-    fontWeight: '500',
-    color: '#666',
-  },
-  activeViewTypeText: {
-    color: '#4CAF50',
-    fontWeight: '600',
-  },
-  reportSubtitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#4CAF50',
-    textAlign: 'center',
-    marginBottom: 16,
-    fontStyle: 'italic',
-  },
-});
-
-export default ReportScreen;