@dhiraj0720/report1chart 2.2.2 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "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/report1Fetcher.jsx

@@ -0,0 +1,27 @@
+import axios from 'axios';
+
+const fetchReport1 = async (apiEndpoint, apiToken) => {
+  try {
+    const response = await axios.get(apiEndpoint, {
+      headers: {
+        Authorization: apiToken,
+        Accept: 'application/json',
+      },
+      timeout: 15000,
+    });
+
+    if (!response.data || !response.data.rows) {
+      throw new Error('Invalid API response');
+    }
+
+    return response.data.rows;
+  } catch (error) {
+    throw new Error(
+      error?.response?.data?.message ||
+      error.message ||
+      'Failed to fetch report'
+    );
+  }
+};
+
+export default fetchReport1;

package/src/components/ProgressBar.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+const ProgressBar = ({ value }) => {
+  const width = Math.min(Math.max(value || 0, 0), 100);
+
+  return (
+    <View style={styles.track}>
+      <View style={[styles.fill, { width: `${width}%` }]} />
+    </View>
+  );
+};
+
+export default ProgressBar;
+
+const styles = StyleSheet.create({
+  track: {
+    height: 6,
+    backgroundColor: '#e0e0e0',
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    backgroundColor: '#f57c00',
+  },
+});

package/src/components/Report1Card.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import ProgressBar from './ProgressBar';
+
+const format = (num) => (num ?? 0).toLocaleString();
+
+const Trend = ({ value }) => {
+  const positive = value >= 0;
+  return (
+    <Text style={[styles.trend, positive ? styles.up : styles.down]}>
+      {positive ? '↑' : '↓'} {Math.abs(value)}%
+    </Text>
+  );
+};
+
+const Report1Card = ({ item }) => {
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>{item.name}</Text>
+
+      <Row label="2024 Actual" value={format(item.actual2024)} />
+      <Row label="2025 Actual" value={format(item.actual2025)} />
+
+      <View style={styles.row}>
+        <Text style={styles.label}>Change YoY</Text>
+        <Trend value={item.actualChangePercent} />
+      </View>
+
+      <Row label="2025 Budget" value={format(item.budget2025)} />
+
+      <View style={styles.row}>
+        <Text style={styles.label}>Budget Variance</Text>
+        <Trend value={item.budgetVariancePercent} />
+      </View>
+
+      {item.opexToGrossProfitPercent !== undefined && (
+        <>
+          <View style={styles.row}>
+            <Text style={styles.label}>OPEX / Gross Profit</Text>
+            <Text style={styles.value}>
+              {item.opexToGrossProfitPercent}%
+            </Text>
+          </View>
+          <ProgressBar value={item.opexToGrossProfitPercent} />
+        </>
+      )}
+    </View>
+  );
+};
+
+const Row = ({ label, value }) => (
+  <View style={styles.row}>
+    <Text style={styles.label}>{label}</Text>
+    <Text style={styles.value}>{value}</Text>
+  </View>
+);
+
+export default Report1Card;
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginBottom: 12,
+    color: '#000',
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  label: {
+    fontSize: 13,
+    color: '#666',
+  },
+  value: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#000',
+  },
+  trend: {
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  up: {
+    color: '#2e7d32',
+  },
+  down: {
+    color: '#d32f2f',
+  },
+});

package/src/index.jsx

@@ -1,18 +1,3 @@
-import React from 'react';
-import ReportDashboard from './screens/ReportDashboard';
+import Report1Screen from './screens/Report1Screen';
 
-const ReportChart = ({ 
-  reports = [], 
-  onReportSelect, 
-  onClose 
-}) => {
-  return (
-    <ReportDashboard
-      reports={reports}
-      onReportSelect={onReportSelect}
-      onClose={onClose}
-    />
-  );
-};
-
-export default ReportChart;
+export default Report1Screen;

package/src/screens/Report1Screen.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+import fetchReport1 from '../api/report1Fetcher';
+import Report1Card from '../components/Report1Card';
+
+const Report1Screen = ({ apiEndpoint, apiToken }) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [rows, setRows] = useState([]);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const data = await fetchReport1(apiEndpoint, apiToken);
+        setRows(data);
+      } catch (e) {
+        setError(e.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, [apiEndpoint, apiToken]);
+
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" />
+        <Text style={styles.info}>Loading report...</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.error}>{error}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {rows.map((item, index) => (
+        <Report1Card key={index} item={item} />
+      ))}
+    </ScrollView>
+  );
+};
+
+export default Report1Screen;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#f5f5f5',
+    padding: 16,
+  },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  info: {
+    marginTop: 12,
+    color: '#666',
+  },
+  error: {
+    fontSize: 16,
+    color: '#d32f2f',
+    textAlign: 'center',
+  },
+});

package/src/api/ApiService.jsx

@@ -1,138 +0,0 @@
-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 {
-      const config = {
-        url: apiConfig.url,
-        method: apiConfig.method || 'GET',
-        timeout: apiConfig.timeout || 15000,
-        headers: {
-          'Content-Type': 'application/json',
-          'Accept': 'application/json'
-        }
-      };
-
-      if (apiConfig.token) {
-        config.headers.Authorization = `Bearer ${apiConfig.token}`;
-      }
-
-      const response = await this.api(config);
-      return this.transformData(response.data, apiConfig.url);
-      
-    } catch (error) {
-      console.error('API Error:', error.message);
-      return this.getFallbackData(apiConfig.url);
-    }
-  }
-
-  transformData(data, url) {
-    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);
-    }
-    return data;
-  }
-
-  transformPerformanceData(data) {
-    if (!data || !data.data) return this.getPerformanceFallbackData();
-    
-    return data.data.map(item => ({
-      name: item.name || 'Unknown',
-      actual2024: item.actual2024 || 0,
-      actual2025: item.actual2025 || 0,
-      budget2025: item.budget2025 || 0,
-      yoYChangePercent: this.calculatePercentageChange(item.actual2024 || 0, item.actual2025 || 0),
-      budgetVariancePercent: this.calculatePercentageChange(item.budget2025 || 0, item.actual2025 || 0),
-      grossMarginPercent: item.grossMarginPercent || 0,
-      isTotal: item.isTotal || false
-    }));
-  }
-
-  transformRevenueByMode(data) {
-    if (Array.isArray(data)) {
-      return data.map(item => ({
-        mode: item.mode || 'Unknown',
-        revenue: item.revenue || 0
-      }));
-    }
-    
-    if (data.data && Array.isArray(data.data)) {
-      return data.data;
-    }
-    
-    return this.getRevenueByModeFallbackData();
-  }
-
-  transformShipmentByDirection(data) {
-    if (Array.isArray(data)) {
-      return data.map(item => ({
-        direction: item.direction || 'Unknown',
-        shipments: item.shipments || 0
-      }));
-    }
-    
-    if (data.data && Array.isArray(data.data)) {
-      return data.data;
-    }
-    
-    return this.getShipmentFallbackData();
-  }
-
-  calculatePercentageChange(oldValue, newValue) {
-    if (!oldValue || oldValue === 0) return 0;
-    return Number(((newValue - oldValue) / Math.abs(oldValue)) * 100).toFixed(1);
-  }
-
-  getFallbackData(url) {
-    if (url.includes('cumulative-operating-profit')) {
-      return this.getPerformanceFallbackData();
-    } else if (url.includes('revenue-by-mode')) {
-      return this.getRevenueByModeFallbackData();
-    } else if (url.includes('shipment-by-direction')) {
-      return this.getShipmentFallbackData();
-    }
-    return [];
-  }
-
-  getPerformanceFallbackData() {
-    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 }
-    ];
-  }
-
-  getRevenueByModeFallbackData() {
-    return [
-      { mode: "Ocean", revenue: 101951456 },
-      { mode: "Road", revenue: 89158437 },
-      { mode: "Air", revenue: 40171032 }
-    ];
-  }
-
-  getShipmentFallbackData() {
-    return [
-      { direction: "Export", shipments: 568 },
-      { direction: "Import", shipments: 546 }
-    ];
-  }
-}
-
-export default new ApiService();

package/src/components/charts/BarChart.jsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  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 || 0);
-  const labels = data.map(d => d.mode || d.label || '');
-  
-  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] || `Item ${index + 1}`;
-            
-            return (
-              <View key={index} style={styles.barWrapper}>
-                <View style={[styles.bar, { 
-                  height,
-                  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',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#000',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  chart: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    paddingHorizontal: 8,
-    minWidth: 400,
-  },
-  barWrapper: {
-    alignItems: 'center',
-    marginHorizontal: 12,
-  },
-  bar: {
-    width: 40,
-    borderRadius: 4,
-  },
-  barLabel: {
-    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 BarChart;

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;