@dhiraj0720/report1chart 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "src/index.jsx",
   "publishConfig": {
     "access": "public"

package/src/index.jsx

@@ -77,28 +77,44 @@ const ReportChart = ({
     }
   };
 
+  // Add currency formatter
+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.toString();
+};
+
   const renderChart = () => {
-    if (!reportData || !reportData.data) {
-      return (
-        <View style={styles.noDataContainer}>
-          <Text style={styles.noDataText}>No data available</Text>
-        </View>
-      );
-    }
+  if (!reportData || !reportData.data) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  const { type, data } = reportData;
+  
+  switch (type) {
+    case 'table':
+      return renderTable(data);
+    case 'line':
+      return renderLineChart(data);
+    case 'bar':
+      return renderBarChart(data);
+    case 'pie':
+      return renderPieChart(data);
+    default:
+      return renderBarChart(data);
+  }
+};
 
-    const { type, data } = reportData;
-    
-    switch (type) {
-      case 'line':
-        return renderLineChart(data);
-      case 'bar':
-        return renderBarChart(data);
-      case 'pie':
-        return renderPieChart(data);
-      default:
-        return renderBarChart(data);
-    }
-  };
 
   const renderLineChart = (data) => {
     // Handle both formats: { labels, values } or array format
@@ -175,6 +191,112 @@ const ReportChart = ({
     );
   };
 
+  const renderTable = (data) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return (
+      <View style={styles.noDataContainer}>
+        <Text style={styles.noDataText}>No data available for this report</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={true}>
+      <View style={styles.table}>
+        {/* Table Header */}
+        <View style={styles.tableHeader}>
+          <View style={[styles.headerCell, styles.firstColumn]}>
+            <Text style={styles.headerText}>FALİYET KAR/ZARAR</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>2024 Fiili</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>2025 Fiili</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>Fiili Artış %</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>2025 Bütçe</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>Sapma %</Text>
+          </View>
+          <View style={styles.headerCell}>
+            <Text style={styles.headerText}>FALİYET GİD.</Text>
+            <Text style={styles.headerText}>/ BRÜT KAR %</Text>
+          </View>
+        </View>
+
+        {/* Table Rows */}
+        {data.map((item, index) => (
+          <View 
+            key={index} 
+            style={[
+              styles.tableRow,
+              item.isTotal ? styles.totalRow : (index % 2 === 0 ? styles.evenRow : styles.oddRow)
+            ]}
+          >
+            <View style={[styles.cell, styles.firstColumn]}>
+              <Text style={item.isTotal ? styles.totalText : styles.cellText}>
+                {item.name}
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={styles.numberText}>
+                {formatCurrency(item.actual2024)}
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={styles.numberText}>
+                {formatCurrency(item.actual2025)}
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={[
+                styles.percentText,
+                item.yoYChangePercent >= 0 ? styles.positive : styles.negative
+              ]}>
+                {item.yoYChangePercent >= 0 ? '↑' : '↓'} {Math.abs(item.yoYChangePercent)}%
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={styles.numberText}>
+                {formatCurrency(item.budget2025)}
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={[
+                styles.percentText,
+                item.budgetVariancePercent >= 0 ? styles.positive : styles.negative
+              ]}>
+                {item.budgetVariancePercent >= 0 ? '↑' : '↓'} {Math.abs(item.budgetVariancePercent)}%
+              </Text>
+            </View>
+            
+            <View style={styles.cell}>
+              <Text style={[
+                styles.percentText,
+                styles.grossMargin
+              ]}>
+                {item.grossMarginPercent}%
+              </Text>
+            </View>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+};
+
+
+
   const renderPieChart = (data) => {
     // Data should be array of objects with label and value
     const total = data.reduce((sum, item) => sum + (item.shipments || item.revenue || item.value || 0), 0);
@@ -595,6 +717,97 @@ const styles = StyleSheet.create({
     color: '#999',
     textAlign: 'center',
   },
+
+   // Table Styles
+  table: {
+    minWidth: 700,
+    marginBottom: 20,
+  },
+  tableHeader: {
+    flexDirection: 'row',
+    backgroundColor: '#2c3e50',
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd',
+  },
+  headerCell: {
+    flex: 1,
+    padding: 10,
+    minWidth: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#444',
+  },
+  firstColumn: {
+    flex: 1.5,
+    minWidth: 180,
+  },
+  headerText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 11,
+    textAlign: 'center',
+  },
+  tableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    minHeight: 40,
+  },
+  evenRow: {
+    backgroundColor: '#fff',
+  },
+  oddRow: {
+    backgroundColor: '#f9f9f9',
+  },
+  totalRow: {
+    backgroundColor: '#e8f5e9',
+    borderTopWidth: 2,
+    borderTopColor: '#4CAF50',
+    borderBottomWidth: 2,
+    borderBottomColor: '#4CAF50',
+  },
+  cell: {
+    flex: 1,
+    padding: 8,
+    minWidth: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#eee',
+  },
+  cellText: {
+    fontSize: 12,
+    color: '#333',
+    textAlign: 'center',
+  },
+  totalText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#2c3e50',
+    textAlign: 'center',
+  },
+  numberText: {
+    fontSize: 11,
+    fontWeight: '500',
+    fontFamily: 'monospace',
+    color: '#333',
+  },
+  percentText: {
+    fontSize: 12,
+    fontWeight: '600',
+    fontFamily: 'monospace',
+  },
+  positive: {
+    color: '#27ae60',
+  },
+  negative: {
+    color: '#e74c3c',
+  },
+  grossMargin: {
+    color: '#2c3e50',
+    fontWeight: '700',
+  },
 });
 
 export default ReportChart;