@dhiraj0720/report1chart 2.6.7 → 2.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "main": "src/index.jsx",
   "scripts": {
     "test": "echo 'No tests'"

package/src/components/FrozenTableReport2A.jsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
 
-// Helper: Format numbers with commas (e.g., 1083203 → 1,083,203)
 const formatNumber = (value) => {
   if (value === null || value === undefined || value === '') return '-';
   return Number(value).toLocaleString('en-US');
 };
 
-// Percentage cell with up/down arrow and color
 const PercentCell = ({ value }) => {
   if (value === null || value === undefined) return <Text>-</Text>;
   const positive = value >= 0;
@@ -21,10 +19,10 @@ const PercentCell = ({ value }) => {
   );
 };
 
-// Reusable cell component
-const Cell = ({ children, bold = false, highlight = false }) => (
+const Cell = ({ children, bold = false, highlight = false, width }) => (
   <View style={[
     styles.cell,
+    { width }, // dynamic width
     bold && styles.bold,
     highlight && styles.highlightCell
   ]}>
@@ -34,24 +32,24 @@ const Cell = ({ children, bold = false, highlight = false }) => (
   </View>
 );
 
-const FrozenTableReport2A = ({ rows = [] }) => {
-  if (!rows || rows.length === 0) {
-    return <Text>No data available</Text>;
+const FrozenTableReport2A = ({ rows = [], isFullscreen = false }) => {
+  if (!rows.length) {
+    return <Text style={{ textAlign: 'center', padding: 20 }}>No data available</Text>;
   }
 
+  // Dynamic widths based on fullscreen mode
+  const frozenColumnWidth = isFullscreen ? 180 : 120;
+  const cellWidth = isFullscreen ? 140 : 130;
+
   return (
     <View style={styles.container}>
-      {/* Frozen Left Column - AY (Month) */}
-      <View style={styles.frozenColumn}>
-        <Cell bold>AY</Cell>
-        {rows.map((row, index) => {
+      {/* Frozen Column */}
+      <View style={[styles.frozenColumn, { width: frozenColumnWidth }]}>
+        <Cell bold width={frozenColumnWidth}>AY</Cell>
+        {rows.map((row, i) => {
           const isTotal = row.monthLabel === 'Total';
           return (
-            <Cell
-              key={index}
-              bold={isTotal}
-              highlight={isTotal}
-            >
+            <Cell key={i} bold={isTotal} highlight={isTotal} width={frozenColumnWidth}>
               {row.monthLabel}
             </Cell>
           );
@@ -61,41 +59,24 @@ const FrozenTableReport2A = ({ rows = [] }) => {
       {/* Scrollable Columns */}
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         <View>
-          {/* Header Row */}
           <View style={styles.headerRow}>
-            {[
-              '2024 TEU', '2025 TEU', 'TEU %',
-              '2024 Kar', '2025 Kar', 'Kar %',
-              '2025 Bütçe', 'Bütçe %'
-            ].map((header) => (
-              <Cell key={header} bold>
-                {header}
-              </Cell>
+            {['2024 TEU', '2025 TEU', 'TEU %', '2024 Kar', '2025 Kar', 'Kar %', '2025 Bütçe', 'Bütçe %'].map((h) => (
+              <Cell key={h} bold width={cellWidth}>{h}</Cell>
             ))}
           </View>
 
-          {/* Data Rows */}
-          {rows.map((row, index) => {
+          {rows.map((row, i) => {
             const isTotal = row.monthLabel === 'Total';
-
             return (
-              <View key={index} style={styles.dataRow}>
-                <Cell highlight={isTotal}>{formatNumber(row.teu2024)}</Cell>
-                <Cell highlight={isTotal}>{formatNumber(row.teu2025)}</Cell>
-                <Cell highlight={isTotal}>
-                  <PercentCell value={row.teuChangePercent} />
-                </Cell>
-
-                <Cell highlight={isTotal}>{formatNumber(row.profitUsd2024)}</Cell>
-                <Cell highlight={isTotal}>{formatNumber(row.profitUsd2025)}</Cell>
-                <Cell highlight={isTotal}>
-                  <PercentCell value={row.profitChangePercent} />
-                </Cell>
-
-                <Cell highlight={isTotal}>{formatNumber(row.budgetProfitUsd2025)}</Cell>
-                <Cell highlight={isTotal}>
-                  <PercentCell value={row.budgetChangePercent} />
-                </Cell>
+              <View key={i} style={styles.dataRow}>
+                <Cell highlight={isTotal} width={cellWidth}>{formatNumber(row.teu2024)}</Cell>
+                <Cell highlight={isTotal} width={cellWidth}>{formatNumber(row.teu2025)}</Cell>
+                <Cell highlight={isTotal} width={cellWidth}><PercentCell value={row.teuChangePercent} /></Cell>
+                <Cell highlight={isTotal} width={cellWidth}>{formatNumber(row.profitUsd2024)}</Cell>
+                <Cell highlight={isTotal} width={cellWidth}>{formatNumber(row.profitUsd2025)}</Cell>
+                <Cell highlight={isTotal} width={cellWidth}><PercentCell value={row.profitChangePercent} /></Cell>
+                <Cell highlight={isTotal} width={cellWidth}>{formatNumber(row.budgetProfitUsd2025)}</Cell>
+                <Cell highlight={isTotal} width={cellWidth}><PercentCell value={row.budgetChangePercent} /></Cell>
               </View>
             );
           })}
@@ -118,20 +99,13 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
   frozenColumn: {
-    width: 120,
     backgroundColor: '#f4f6f8',
     borderRightWidth: 1,
     borderColor: '#ddd',
   },
-  headerRow: {
-    flexDirection: 'row',
-    backgroundColor: '#f4f6f8',
-  },
-  dataRow: {
-    flexDirection: 'row',
-  },
+  headerRow: { flexDirection: 'row', backgroundColor: '#f4f6f8' },
+  dataRow: { flexDirection: 'row' },
   cell: {
-    width: 130,
     paddingVertical: 10,
     paddingHorizontal: 6,
     justifyContent: 'center',
@@ -143,18 +117,8 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     color: '#333',
   },
-  bold: {
-    backgroundColor: '#e9f0f8',
-  },
-  boldText: {
-    fontWeight: '700',
-  },
-  highlightCell: {
-    backgroundColor: '#e9f0f8',
-  },
-  percentText: {
-    fontWeight: '700',
-    fontSize: 12,
-    textAlign: 'center',
-  },
+  bold: { backgroundColor: '#e9f0f8' },
+  boldText: { fontWeight: '700' },
+  highlightCell: { backgroundColor: '#e9f0f8' },
+  percentText: { fontWeight: '700', fontSize: 12, textAlign: 'center' },
 });

package/src/components/SvgBarLineChartCompact.jsx

@@ -93,7 +93,7 @@ const SvgBarLineChartCompact = ({ data }) => {
                       fill="white"
                       fontWeight="700"
                     >
-                      ${formatNumber(val2024)}
+                      {formatNumber(val2024)}
                     </SvgText>
                   )}
 
@@ -114,7 +114,7 @@ const SvgBarLineChartCompact = ({ data }) => {
                       fill="white"
                       fontWeight="700"
                     >
-                      ${formatNumber(val2025)}
+                      {formatNumber(val2025)}
                     </SvgText>
                   )}
 
@@ -150,7 +150,7 @@ const SvgBarLineChartCompact = ({ data }) => {
                     fill="#333"
                     fontWeight="700"
                   >
-                    ${formatNumber(budget)}
+                    {formatNumber(budget)}
                   </SvgText>
 
                   {/* X Axis Label - Rotated */}

package/src/screens/Report2AScreen.jsx

@@ -8,7 +8,6 @@ import {
   Modal,
   Dimensions,
   ActivityIndicator,
-  Alert,
 } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { filterChartByMonths } from '../utils/filterChartByMonths';
@@ -23,7 +22,6 @@ const Report2AScreen = ({ api, token, onBack }) => {
   const [monthsModal, setMonthsModal] = useState(false);
   const [divisionModal, setDivisionModal] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
-  const [zoomScale, setZoomScale] = useState(1);
 
   const [months, setMonths] = useState([]);
   const [selectedMonths, setSelectedMonths] = useState([]);
@@ -40,8 +38,7 @@ const Report2AScreen = ({ api, token, onBack }) => {
       .then((d) => {
         setDivisions(d);
         if (d.length > 0) setDivision(d[0].code);
-      })
-      .catch(() => Alert.alert('Error', 'Failed to load divisions'));
+      });
   }, [api.divisions, token]);
 
   useEffect(() => {
@@ -76,7 +73,6 @@ const Report2AScreen = ({ api, token, onBack }) => {
   const filteredLine = filterChartByMonths(line, selectedMonths);
   const filteredBar = filterChartByMonths(bar, selectedMonths);
 
-  // Detect landscape
   const { width, height } = Dimensions.get('window');
   const isLandscape = width > height;
 
@@ -93,67 +89,28 @@ const Report2AScreen = ({ api, token, onBack }) => {
       {/* FILTERS */}
       <View style={styles.filterBar}>
         <TouchableOpacity onPress={() => setMonthsModal(true)} style={styles.filterItem}>
-          {/* FILTER FUNNEL ICON */}
           <Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
-            <Path
-              d="M20 4H4V6.5L12 14.5L20 6.5V4Z"
-              stroke="#000"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <Path
-              d="M8 11V19L16 19V11"
-              stroke="#000"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
+            <Path d="M20 4H4V6.5L12 14.5L20 6.5V4Z" stroke="#000" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+            <Path d="M8 11V19L16 19V11" stroke="#000" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
           </Svg>
           <Text style={styles.filterText}>Months ({selectedMonths.length}/{months.length})</Text>
         </TouchableOpacity>
 
         <TouchableOpacity onPress={() => setDivisionModal(true)} style={styles.filterItem}>
-          {/* SAME FILTER ICON */}
           <Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
-            <Path
-              d="M20 4H4V6.5L12 14.5L20 6.5V4Z"
-              stroke="#000"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <Path
-              d="M8 11V19L16 19V11"
-              stroke="#000"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
+            <Path d="M20 4H4V6.5L12 14.5L20 6.5V4Z" stroke="#000" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+            <Path d="M8 11V19L16 19V11" stroke="#000" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
           </Svg>
           <Text style={styles.filterText}>{currentDivisionName}</Text>
         </TouchableOpacity>
       </View>
 
       <ScrollView style={styles.content}>
-        {/* FULL SCREEN ICON ABOVE TABLE */}
-        <TouchableOpacity
-          onPress={() => {
-            setFullscreen(true);
-            setZoomScale(1);
-            Alert.alert('Tip', 'Rotate your device to landscape for full view');
-          }}
-          style={styles.fullScreenBtn}
-        >
-          {/* FULL SCREEN EXPAND ICON */}
+        {/* FULL SCREEN BUTTON */}
+        <TouchableOpacity onPress={() => setFullscreen(true)} style={styles.fullScreenBtn}>
           <Svg width={28} height={28} viewBox="0 0 24 24" fill="none">
-            <Path
-              d="M8 3H5C4.44772 3 4 3.44772 4 4V8M20 8V4C20 3.44772 19.5523 3 19 3H16M16 21H19C19.5523 21 20 20.5523 20 20V16M4 16V20C4 20.5523 4.44772 21 5 21H8"
-              stroke="#000"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
+            <Path d="M8 3H5C4.44772 3 4 3.44772 4 4V8M20 8V4C20 3.44772 19.5523 3 19 3H16M16 21H19C19.5523 21 20 20.5523 20 20V16M4 16V20C4 20.5523 4.44772 21 5 21H8"
+              stroke="#000" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
           </Svg>
           <Text style={styles.fullScreenText}>Full Screen Table</Text>
         </TouchableOpacity>
@@ -169,30 +126,39 @@ const Report2AScreen = ({ api, token, onBack }) => {
         </View>
       </ScrollView>
 
-      {/* FULL SCREEN MODAL - SIMPLE ZOOM */}
-      <Modal visible={fullscreen} supportedOrientations={['portrait', 'landscape']}>
+      {/* FULL SCREEN MODAL - PERFECT LANDSCAPE FIT + ZOOM */}
+      <Modal visible={fullscreen} supportedOrientations={['portrait', 'landscape']} animationType="fade">
         <View style={styles.fullModal}>
+          {/* TOP BAR - ONE LINE */}
           <View style={styles.fullHeader}>
+            <Text style={styles.fullHintText}>
+              Rotate device • Pinch to zoom
+            </Text>
             <TouchableOpacity onPress={() => setFullscreen(false)}>
-              <Text style={styles.closeFull}>✕</Text>
+              <Text style={styles.closeBtn}>✕</Text>
             </TouchableOpacity>
-            <Text style={styles.fullHint}>Rotate to landscape • Pinch to zoom</Text>
           </View>
 
+          {/* ZOOMABLE & FIT TABLE */}
           <ScrollView
             maximumZoomScale={3}
-            minimumZoomScale={0.8}
-            centerContent
-            contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}
+            minimumZoomScale={0.7}
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.zoomContent}
+            pinchGestureEnabled={true}
+            bouncesZoom={true}
           >
-            <View style={{ transform: [{ scale: isLandscape ? 1.4 : 1 }] }}>
+            <View style={[
+              styles.tableWrapper,
+              isLandscape && styles.landscapeFit
+            ]}>
               <FrozenTableReport2A rows={table.rows} isFullscreen />
             </View>
           </ScrollView>
         </View>
       </Modal>
 
-      {/* Existing modals */}
       <MonthFilterModal visible={monthsModal} months={months} selected={selectedMonths} onApply={setSelectedMonths} onClose={() => setMonthsModal(false)} />
       <DivisionFilterModal visible={divisionModal} divisions={divisions} selected={division} onSelect={setDivision} onClose={() => setDivisionModal(false)} />
     </View>
@@ -241,9 +207,42 @@ const styles = StyleSheet.create({
   chartContainer: { borderWidth: 1, borderColor: '#ddd', borderRadius: 10, overflow: 'hidden', marginVertical: 12, backgroundColor: '#fff' },
 
   fullModal: { flex: 1, backgroundColor: '#fff' },
-  fullHeader: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 16, backgroundColor: '#f8f8f8', position: 'relative' },
-  closeFull: { position: 'absolute', left: 16, fontSize: 28, color: '#000' },
-  fullHint: { fontSize: 15, color: '#000' },
+  fullHeader: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    backgroundColor: '#f8f8f8',
+    borderBottomWidth: 1,
+    borderColor: '#ddd',
+  },
+  fullHintText: {
+    fontSize: 16,
+    color: '#000',
+    fontWeight: '600',
+    textAlign: 'center',
+    flex: 1,
+  },
+  closeBtn: { fontSize: 28, color: '#000', paddingLeft: 20 },
+
+  zoomContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  tableWrapper: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  landscapeFit: {
+    transform: [{ scale: 1.4 }], // Perfect fit in landscape
+    maxWidth: '100%',
+  },
 });
 
 export default Report2AScreen;