@dhiraj0720/report1chart 1.0.5 → 2.1.0

package/src/screens/ReportDashboard.jsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+import ReportDetail from './ReportDetail';
+import ReportCard from '../components/common/ReportCard';
+import ApiService from '../api/ApiService';
+
+const ReportDashboard = ({ reports, onReportSelect, onClose }) => {
+  const [selectedReport, setSelectedReport] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleReportClick = async (report) => {
+    setLoading(true);
+    setError(null);
+    
+    try {
+      // Fetch data from API using npm package service
+      const data = await ApiService.fetchReportData(report.apiConfig);
+      
+      if (data.error) {
+        setError(data.error);
+        // Use fallback data if available
+        if (data.fallbackData) {
+          setSelectedReport({
+            ...report,
+            data: data.fallbackData
+          });
+        }
+      } else {
+        setSelectedReport({
+          ...report,
+          data: data
+        });
+      }
+      
+      if (onReportSelect) {
+        onReportSelect(report.name);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to fetch report data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBack = () => {
+    setSelectedReport(null);
+    setError(null);
+  };
+
+  if (selectedReport) {
+    return (
+      <ReportDetail
+        report={selectedReport}
+        loading={loading}
+        error={error}
+        onBack={handleBack}
+        onClose={onClose}
+      />
+    );
+  }
+
+  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>
+
+      <ScrollView style={styles.reportsList}>
+        {reports.map((report) => (
+          <ReportCard
+            key={report.id}
+            report={report}
+            onPress={() => handleReportClick(report)}
+          />
+        ))}
+      </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',
+  },
+  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,
+  },
+});
+
+export default ReportDashboard;

package/src/screens/ReportDetail.jsx

@@ -0,0 +1,265 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+} from 'react-native';
+import DefaultTable from '../components/tables/DefaultTable';
+import CompactTable from '../components/tables/CompactTable';
+import FreezeTable from '../components/tables/FreezeTable';
+import BarChart from '../components/charts/BarChart';
+import PieChart from '../components/charts/PieChart';
+import LineChart from '../components/charts/LineChart';
+import LoadingSpinner from '../components/common/LoadingSpinner';
+import ErrorDisplay from '../components/common/ErrorDisplay';
+
+const ReportDetail = ({ report, loading, error, onBack, onClose }) => {
+  const [viewType, setViewType] = useState(report.subType || 'default');
+
+  const renderContent = () => {
+    if (loading) {
+      return <LoadingSpinner message="Loading report data..." />;
+    }
+
+    if (error) {
+      return <ErrorDisplay error={error} onRetry={() => onBack()} />;
+    }
+
+    if (!report.data || (Array.isArray(report.data) && report.data.length === 0)) {
+      return (
+        <View style={styles.noDataContainer}>
+          <Text style={styles.noDataText}>No data available for this report</Text>
+        </View>
+      );
+    }
+
+    // Render based on report type
+    switch (report.type) {
+      case 'table':
+        return renderTable();
+      case 'bar':
+        return <BarChart data={report.data} title={report.title} />;
+      case 'pie':
+        return <PieChart data={report.data} title={report.title} />;
+      case 'line':
+        return <LineChart data={report.data} title={report.title} />;
+      default:
+        return <BarChart data={report.data} title={report.title} />;
+    }
+  };
+
+  const renderTable = () => {
+    switch (viewType) {
+      case 'compact':
+        return <CompactTable data={report.data} />;
+      case 'freeze':
+        return <FreezeTable data={report.data} />;
+      case 'default':
+      default:
+        return <DefaultTable data={report.data} />;
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity 
+          style={styles.backButton}
+          onPress={onBack}
+        >
+          <Text style={styles.backText}>‹</Text>
+          <Text style={styles.backButtonText}>Back</Text>
+        </TouchableOpacity>
+        <Text style={styles.headerTitle} numberOfLines={1}>
+          {report.title || report.name}
+        </Text>
+        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+          <Text style={styles.closeText}>×</Text>
+        </TouchableOpacity>
+      </View>
+
+      {report.type === 'table' && (
+        <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>
+      )}
+
+      <ScrollView style={styles.content}>
+        {renderContent()}
+        
+        {report.data && (
+          <View style={styles.dataInfo}>
+            <Text style={styles.infoTitle}>Report Information</Text>
+            <Text style={styles.infoText}>
+              {report.description || 'Detailed analysis report'}
+            </Text>
+            <Text style={styles.dataSource}>
+              Data points: {Array.isArray(report.data) ? report.data.length : 'N/A'}
+            </Text>
+          </View>
+        )}
+      </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',
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  viewTypeSelector: {
+    flexDirection: 'row',
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+    padding: 4,
+    margin: 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',
+  },
+  dataInfo: {
+    backgroundColor: '#e8f5e9',
+    borderRadius: 12,
+    padding: 16,
+    marginTop: 16,
+  },
+  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',
+  },
+  noDataContainer: {
+    padding: 40,
+    alignItems: 'center',
+  },
+  noDataText: {
+    fontSize: 16,
+    color: '#999',
+    textAlign: 'center',
+  },
+});
+
+export default ReportDetail;

package/src/utils/Constants.jsx

@@ -0,0 +1,38 @@
+export const COLORS = {
+  primary: '#4CAF50',
+  primaryDark: '#388E3C',
+  primaryLight: '#C8E6C9',
+  secondary: '#2196F3',
+  accent: '#FF9800',
+  success: '#27ae60',
+  warning: '#f39c12',
+  danger: '#e74c3c',
+  info: '#3498db',
+  dark: '#2c3e50',
+  light: '#ecf0f1',
+  white: '#ffffff',
+  black: '#000000',
+  gray: '#95a5a6',
+  grayDark: '#7f8c8d',
+  grayLight: '#bdc3c7'
+};
+
+export const API_STATUS = {
+  IDLE: 'idle',
+  LOADING: 'loading',
+  SUCCESS: 'success',
+  ERROR: 'error'
+};
+
+export const CHART_TYPES = {
+  BAR: 'bar',
+  LINE: 'line',
+  PIE: 'pie',
+  TABLE: 'table'
+};
+
+export const TABLE_VIEW_TYPES = {
+  DEFAULT: 'default',
+  COMPACT: 'compact',
+  FREEZE: 'freeze'
+};

package/src/utils/Formatters.jsx

@@ -0,0 +1,24 @@
+export 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();
+};
+
+export const formatNumber = (num) => {
+  return num.toLocaleString();
+};
+
+export const formatPercentage = (value, decimals = 1) => {
+  return `${value >= 0 ? '+' : ''}${value.toFixed(decimals)}%`;
+};
+
+export const getColor = (index) => {
+  const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0', '#00BCD4'];
+  return colors[index % colors.length];
+};

package/src/utils/Validators.jsx

@@ -0,0 +1,60 @@
+export const isValidUrl = (url) => {
+  try {
+    new URL(url);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const isValidApiResponse = (data) => {
+  if (!data) return false;
+  
+  // Check if data is array or has data property
+  if (Array.isArray(data)) {
+    return data.length > 0;
+  }
+  
+  if (data.data && Array.isArray(data.data)) {
+    return data.data.length > 0;
+  }
+  
+  if (data.values && Array.isArray(data.values)) {
+    return data.values.length > 0;
+  }
+  
+  return false;
+};
+
+export const validateApiConfig = (apiConfig) => {
+  const errors = [];
+  
+  if (!apiConfig || typeof apiConfig !== 'object') {
+    errors.push('API configuration is required');
+    return errors;
+  }
+  
+  if (!apiConfig.url || typeof apiConfig.url !== 'string') {
+    errors.push('API URL is required and must be a string');
+  } else if (!isValidUrl(apiConfig.url)) {
+    errors.push('Invalid API URL format');
+  }
+  
+  if (apiConfig.method && typeof apiConfig.method !== 'string') {
+    errors.push('API method must be a string');
+  }
+  
+  if (apiConfig.token && typeof apiConfig.token !== 'string') {
+    errors.push('API token must be a string');
+  }
+  
+  return errors;
+};
+
+export const formatErrorMessage = (error) => {
+  if (typeof error === 'string') return error;
+  if (error.message) return error.message;
+  if (error.response?.data?.message) return error.response.data.message;
+  if (error.response?.statusText) return `${error.response.status}: ${error.response.statusText}`;
+  return 'An unknown error occurred';
+};