@dhiraj0720/report1chart 1.0.6 → 2.1.0

package/package.json

@@ -1,15 +1,54 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "1.0.6",
+  "version": "2.1.0",
   "main": "src/index.jsx",
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "echo 'Build step would go here'",
+    "test": "jest",
+    "lint": "eslint src/",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "axios": "^1.6.0",
+    "react": "^18.2.0",
+    "react-native": "^0.72.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
   },
-  "keywords": [],
-  "author": "",
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "jest": "^29.7.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2"
+  },
+  "keywords": [
+    "reports",
+    "charts",
+    "tables",
+    "analytics",
+    "dashboard",
+    "react-native",
+    "api",
+    "data-visualization"
+  ],
+  "author": "Dhiraj",
   "license": "MIT",
-  "description": ""
-}
+  "description": "A comprehensive report chart and table package for React Native with built-in API fetching, data transformation, and error handling",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dhiraj0720/report1chart.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dhiraj0720/report1chart/issues"
+  },
+  "homepage": "https://github.com/dhiraj0720/report1chart#readme",
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/api/ApiService.jsx

@@ -0,0 +1,180 @@
+import axios from 'axios';
+
+class ApiService {
+  constructor() {
+    this.api = axios.create({
+      timeout: 15000,
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      }
+    });
+  }
+
+  async fetchReportData(apiConfig) {
+    try {
+      console.log('Fetching from npm package:', apiConfig.url);
+      
+      const config = {
+        url: apiConfig.url,
+        method: apiConfig.method || 'GET',
+        timeout: apiConfig.timeout || 15000,
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+          ...(apiConfig.token && { 
+            'Authorization': `Bearer ${apiConfig.token}` 
+          })
+        }
+      };
+
+      const response = await this.api(config);
+      
+      // Transform data based on endpoint
+      return this.transformData(response.data, apiConfig.url);
+      
+    } catch (error) {
+      console.error('NPM Package API Error:', error);
+      throw this.handleError(error, apiConfig.url);
+    }
+  }
+
+  transformData(data, url) {
+    // Transform data based on endpoint patterns
+    if (url.includes('cumulative-operating-profit')) {
+      return this.transformPerformanceData(data);
+    } else if (url.includes('revenue-by-mode')) {
+      return this.transformRevenueByMode(data);
+    } else if (url.includes('shipment-by-direction')) {
+      return this.transformShipmentByDirection(data);
+    } else if (url.includes('revenue-trend')) {
+      return this.transformRevenueTrend(data);
+    }
+    
+    // Return as-is for unknown formats
+    return data;
+  }
+
+  transformPerformanceData(data) {
+    // Transform performance report data to match table structure
+    if (!data || !data.data) return [];
+    
+    return data.data.map(item => ({
+      name: item.name || item.activity || 'Unknown',
+      actual2024: item.actual2024 || item.lastYear || 0,
+      actual2025: item.actual2025 || item.currentYear || 0,
+      budget2025: item.budget2025 || item.budget || 0,
+      yoYChangePercent: this.calculatePercentageChange(
+        item.actual2024 || item.lastYear || 0,
+        item.actual2025 || item.currentYear || 0
+      ),
+      budgetVariancePercent: this.calculatePercentageChange(
+        item.budget2025 || item.budget || 0,
+        item.actual2025 || item.currentYear || 0
+      ),
+      grossMarginPercent: item.grossMargin || item.margin || 0,
+      isTotal: item.isTotal || item.name?.toLowerCase().includes('total')
+    }));
+  }
+
+  transformRevenueByMode(data) {
+    // Transform revenue by mode data
+    if (Array.isArray(data)) {
+      return data.map(item => ({
+        mode: item.mode || item.transportMode || 'Unknown',
+        revenue: item.revenue || item.value || 0
+      }));
+    }
+    
+    // Handle different response formats
+    if (data.data && Array.isArray(data.data)) {
+      return data.data;
+    }
+    
+    return [];
+  }
+
+  transformShipmentByDirection(data) {
+    // Transform shipment by direction data
+    if (Array.isArray(data)) {
+      return data.map(item => ({
+        direction: item.direction || item.type || 'Unknown',
+        shipments: item.shipments || item.count || item.value || 0
+      }));
+    }
+    
+    if (data.data && Array.isArray(data.data)) {
+      return data.data;
+    }
+    
+    return [];
+  }
+
+  transformRevenueTrend(data) {
+    // Transform revenue trend data
+    if (data.labels && data.values) {
+      return {
+        labels: data.labels,
+        values: data.values
+      };
+    }
+    
+    return data;
+  }
+
+  calculatePercentageChange(oldValue, newValue) {
+    if (!oldValue || oldValue === 0) return 0;
+    return ((newValue - oldValue) / Math.abs(oldValue)) * 100;
+  }
+
+  handleError(error, url) {
+    let errorMessage = 'Failed to fetch report data';
+    
+    if (error.response) {
+      // Server responded with error
+      errorMessage = `Server Error: ${error.response.status} - ${error.response.data?.message || 'Unknown error'}`;
+    } else if (error.request) {
+      // Request made but no response
+      errorMessage = 'Network Error: No response from server';
+    } else {
+      // Something else happened
+      errorMessage = error.message || 'Unknown error occurred';
+    }
+    
+    // Fallback mock data for development
+    console.warn('Using fallback data for:', url);
+    return {
+      error: errorMessage,
+      fallbackData: this.getFallbackData(url)
+    };
+  }
+
+  getFallbackData(url) {
+    // Return mock data for development
+    if (url.includes('cumulative-operating-profit')) {
+      return [
+        { name: "Ocean Transportation", actual2024: 45000000, actual2025: 52000000, budget2025: 50000000, grossMarginPercent: 25, isTotal: false },
+        { name: "Air Freight", actual2024: 18000000, actual2025: 21000000, budget2025: 20000000, grossMarginPercent: 22, isTotal: false },
+        { name: "Road Logistics", actual2024: 32000000, actual2025: 38000000, budget2025: 35000000, grossMarginPercent: 28, isTotal: false },
+        { name: "Warehousing", actual2024: 12000000, actual2025: 15000000, budget2025: 14000000, grossMarginPercent: 35, isTotal: false },
+        { name: "Customs Clearance", actual2024: 8000000, actual2025: 9500000, budget2025: 9000000, grossMarginPercent: 40, isTotal: false },
+        { name: "TOTAL", actual2024: 115000000, actual2025: 135500000, budget2025: 128000000, grossMarginPercent: 28, isTotal: true }
+      ];
+    } else if (url.includes('revenue-by-mode')) {
+      return [
+        { mode: "Ocean", revenue: 101951456 },
+        { mode: "Road", revenue: 89158437 },
+        { mode: "Air", revenue: 40171032 }
+      ];
+    } else if (url.includes('shipment-by-direction')) {
+      return [
+        { direction: "Export", shipments: 568 },
+        { direction: "Import", shipments: 546 }
+      ];
+    }
+    
+    return [];
+  }
+}
+
+export default new ApiService();

package/src/api/ApiService.test.jsx

@@ -0,0 +1,27 @@
+import ApiService from './ApiService';
+
+describe('ApiService', () => {
+  it('should transform performance data correctly', () => {
+    const mockData = {
+      data: [
+        { name: 'Ocean', actual2024: 100, actual2025: 120, budget2025: 110, grossMargin: 25 }
+      ]
+    };
+    
+    const result = ApiService.transformPerformanceData(mockData);
+    
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('Ocean');
+    expect(result[0].yoYChangePercent).toBe(20);
+    expect(result[0].budgetVariancePercent).toBeCloseTo(9.09);
+  });
+  
+  it('should handle API errors gracefully', async () => {
+    const apiConfig = {
+      url: 'http://invalid-url',
+      method: 'GET'
+    };
+    
+    await expect(ApiService.fetchReportData(apiConfig)).rejects.toThrow();
+  });
+});

package/src/components/charts/BarChart.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+
+const BarChart = ({ 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 values = data.map(d => d.revenue || d.value || d.shipments || 0);
+  const labels = data.map(d => d.mode || d.label || d.direction || '');
+  
+  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.container}>
+      {title && <Text style={styles.title}>{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 styles = StyleSheet.create({
+  container: {
+    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,
+  },
+  title: {
+    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,
+  },
+  valueText: {
+    fontSize: 10,
+    color: '#999',
+    marginTop: 4,
+    fontWeight: '500',
+  },
+  noDataContainer: {
+    padding: 40,
+    alignItems: 'center',
+  },
+  noDataText: {
+    fontSize: 16,
+    color: '#999',
+    textAlign: 'center',
+  },
+});
+
+export default BarChart;

package/src/components/charts/ChartUtils.jsx

@@ -0,0 +1,38 @@
+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 getColor = (index) => {
+  const colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0', '#00BCD4'];
+  return colors[index % colors.length];
+};
+
+export const calculatePercentageChange = (oldValue, newValue) => {
+  if (!oldValue || oldValue === 0) return 0;
+  return ((newValue - oldValue) / Math.abs(oldValue)) * 100;
+};
+
+export const getChartDimensions = (dataLength) => {
+  const { width: screenWidth } = Dimensions.get('window');
+  const minWidth = screenWidth - 64;
+  const chartWidth = Math.max(minWidth, dataLength * 60);
+  const barWidth = Math.max(20, (chartWidth / dataLength) - 10);
+  
+  return {
+    chartHeight: 200,
+    chartWidth,
+    barWidth
+  };
+};

package/src/components/charts/LineChart.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  Dimensions,
+  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>
+    );
+  }
+
+  // Handle different data formats
+  let values, labels;
+  
+  if (Array.isArray(data)) {
+    // If data is array of objects
+    values = data.map(d => d.value || d.revenue || d.shipments || 0);
+    labels = data.map(d => d.label || d.month || d.mode || d.direction || '');
+  } else {
+    // If data has separate values and labels
+    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;
+  const chartWidth = Math.max(Dimensions.get('window').width - 64, values.length * 60);
+  const barWidth = Math.max(20, (chartWidth / values.length) - 10);
+  
+  return (
+    <View style={styles.container}>
+      {title && <Text style={styles.title}>{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.pointWrapper}>
+                <View style={[styles.point, { 
+                  height: Math.max(height, 2),
+                  width: barWidth 
+                }]} />
+                <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',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#000',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  chart: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    paddingHorizontal: 8,
+  },
+  pointWrapper: {
+    alignItems: 'center',
+    marginHorizontal: 4,
+  },
+  point: {
+    backgroundColor: '#2196F3',
+    borderRadius: 2,
+  },
+  connector: {
+    width: 2,
+    backgroundColor: '#2196F3',
+    opacity: 0.3,
+    marginVertical: 2,
+    flex: 1,
+  },
+  pointLabel: {
+    marginTop: 8,
+    fontSize: 11,
+    color: '#666',
+    textAlign: 'center',
+    width: 60,
+  },
+  valueText: {
+    fontSize: 10,
+    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

@@ -0,0 +1,125 @@
+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.revenue || 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.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 styles = StyleSheet.create({
+  container: {
+    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,
+  },
+  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;