@dhiraj0720/report1chart 2.2.8 → 2.3.0

package/package.json

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

package/src/components/FrozenTableReport2.jsx

@@ -5,6 +5,16 @@ const Cell = ({ children, bold }) => (
   <Text style={[styles.cell, bold && styles.bold]}>{children}</Text>
 );
 
+const PercentCell = ({ value }) => {
+  const positive = value >= 0;
+  return (
+    <Text style={{ color: positive ? '#2e7d32' : '#d32f2f', fontWeight: '700' }}>
+      {positive ? '↑' : '↓'} {Math.abs(value)}%
+    </Text>
+  );
+};
+
+
 const FrozenTableReport2 = ({ rows }) => (
   <View style={styles.container}>
     <View style={styles.frozen}>
@@ -18,9 +28,9 @@ const FrozenTableReport2 = ({ rows }) => (
       <View>
         <View style={styles.headerRow}>
           {[
-            '2024 TEU','2025 TEU','TEU %',
-            '2024 Kar','2025 Kar','Kar %',
-            '2025 Bütçe','Bütçe %'
+            '2024 TEU', '2025 TEU', 'TEU %',
+            '2024 Kar', '2025 Kar', 'Kar %',
+            '2025 Bütçe', 'Bütçe %'
           ].map(h => <Cell key={h} bold>{h}</Cell>)}
         </View>
 
@@ -28,12 +38,21 @@ const FrozenTableReport2 = ({ rows }) => (
           <View key={i} style={styles.row}>
             <Cell>{r.teu2024}</Cell>
             <Cell>{r.teu2025}</Cell>
-            <Cell>{r.teuChangePercent}%</Cell>
+            <Cell>
+              <PercentCell value={r.teuChangePercent} />
+            </Cell>
+
             <Cell>{r.profitUsd2024}</Cell>
             <Cell>{r.profitUsd2025}</Cell>
-            <Cell>{r.profitChangePercent}%</Cell>
+            <Cell>
+              <PercentCell value={r.profitChangePercent} />
+            </Cell>
+
             <Cell>{r.budgetProfitUsd2025}</Cell>
-            <Cell>{r.budgetChangePercent}%</Cell>
+
+            <Cell>
+              <PercentCell value={r.budgetChangePercent} />
+            </Cell>
           </View>
         ))}
       </View>

package/src/components/FrozenTableReport3.jsx

@@ -5,6 +5,15 @@ const Cell = ({ children, bold }) => (
   <Text style={[styles.cell, bold && styles.bold]}>{children}</Text>
 );
 
+const PercentCell = ({ value }) => {
+  const positive = value >= 0;
+  return (
+    <Text style={{ color: positive ? '#2e7d32' : '#d32f2f', fontWeight: '700' }}>
+      {positive ? '↑' : '↓'} {Math.abs(value)}%
+    </Text>
+  );
+};
+
 const FrozenTableReport3 = ({ rows }) => (
   <View style={styles.container}>
     <View style={styles.frozen}>
@@ -28,12 +37,21 @@ const FrozenTableReport3 = ({ rows }) => (
           <View key={i} style={styles.row}>
             <Cell>{r.loadCount2024}</Cell>
             <Cell>{r.loadCount2025}</Cell>
-            <Cell>{r.loadCountChangePercent}%</Cell>
+  
+            <Cell>
+              <PercentCell value={r.loadCountChangePercent} />
+            </Cell>
             <Cell>{r.revenueTl2024}</Cell>
             <Cell>{r.revenueTl2025}</Cell>
-            <Cell>{r.revenueChangePercent}%</Cell>
+            
+            <Cell>
+              <PercentCell value={r.revenueChangePercent} />
+            </Cell>
             <Cell>{r.budgetRevenueTl2025}</Cell>
-            <Cell>{r.budgetChangePercent}%</Cell>
+         
+            <Cell>
+              <PercentCell value={r.budgetChangePercent} />
+            </Cell>
           </View>
         ))}
       </View>

package/src/components/SvgBarLineChart.jsx

@@ -1,84 +1,216 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import Svg, { Rect, Polyline, Circle, Text as SvgText } from 'react-native-svg';
+import React, { useState } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import Svg, {
+  Rect,
+  Line,
+  Circle,
+  Text as SvgText,
+} from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
 
 const SvgBarLineChart = ({ data }) => {
-  if (!data?.series?.length) return null;
+  if (!data?.series || !data.labels?.length) return null;
 
-  const width = 360;
-  const height = 190;
-  const padding = 30;
-  const barWidth = 12;
+  const [activePoint, setActivePoint] = useState(null);
 
-  const max = Math.max(...data.series.flatMap(s => s.data));
 
-  const scaleX = i =>
-    padding + i * ((width - padding * 2) / data.labels.length);
+  const width = Math.max(360, data.labels.length * 90);
+  const height = 240;
+  const padding = 40;
+  const chartHeight = height - padding * 2;
+
+  const max = Math.max(...data.series.flatMap(s => s.data));
+  const barWidth = 14;
+  const step = 70;
 
-  const scaleY = v =>
-    height - padding - (v / max) * (height - padding * 2);
+  const scaleY = v => (v / max) * chartHeight;
+  const yPos = v => height - padding - scaleY(v);
 
   return (
-    <View style={{ backgroundColor: '#fff', padding: 12, borderRadius: 12 }}>
-      <Text style={{ fontWeight: '700', textAlign: 'center', marginBottom: 8 }}>
+    <View style={{ marginVertical: 16 }}>
+      <Text style={{ fontWeight: '700', marginBottom: 8 }}>
         {data.title}
       </Text>
 
-      <Svg width={width} height={height}>
-        {/* Bars */}
-        {data.labels.map((_, i) =>
-          data.series.slice(0, 2).map((s, idx) => (
-            <Rect
-              key={`${i}-${idx}`}
-              x={scaleX(i) + idx * (barWidth + 4)}
-              y={scaleY(s.data[i])}
-              width={barWidth}
-              height={height - padding - scaleY(s.data[i])}
-              fill={idx === 0 ? '#FB8C00' : '#1E88E5'}
-              rx="2"
-            />
-          ))
-        )}
-
-        {/* Budget dotted line */}
-        {data.series[2] && (
-          <>
-            <Polyline
-              points={data.series[2].data
-                .map((v, i) => `${scaleX(i) + barWidth},${scaleY(v)}`)
-                .join(' ')}
-              fill="none"
-              stroke="#90CAF9"
-              strokeWidth="2"
-              strokeDasharray="4,4"
-            />
-
-            {data.series[2].data.map((v, i) => (
-              <Circle
-                key={i}
-                cx={scaleX(i) + barWidth}
-                cy={scaleY(v)}
-                r="4"
-                fill="#90CAF9"
+      <ScrollView horizontal>
+        <Svg width={width} height={height} onPress={() => setActivePoint(null)}>
+          {/* Y AXIS GRID + LABELS */}
+          {[0, 0.5, 1].map((p, i) => {
+            const y = height - padding - chartHeight * p;
+            return (
+              <React.Fragment key={i}>
+                <Line
+                  x1={padding}
+                  x2={width - padding}
+                  y1={y}
+                  y2={y}
+                  stroke="#ccc"
+                  strokeDasharray="4"
+                />
+                <SvgText
+                  x={padding - 8}
+                  y={y + 4}
+                  fontSize="10"
+                  textAnchor="end"
+                >
+                  {formatNumber(max * p)}
+                </SvgText>
+              </React.Fragment>
+            );
+          })}
+
+          {/* BARS + BUDGET LINE */}
+          {data.labels.map((label, i) => {
+            const x = padding + i * step;
+
+            return (
+              <React.Fragment key={i}>
+                {/* 2024 BAR */}
+                <Rect
+                  x={x}
+                  y={yPos(data.series[0].data[i])}
+                  width={barWidth}
+                  height={scaleY(dat.series[0].data[i])}
+                  fill="#E07A3F"
+                  onPress={() =>
+                    setActivePoint({
+                      x: x + barWidth / 2,
+                      y: yPos(data.series[0].data[i]),
+                      value: data.series[0].data[i],
+                    })
+                  }
+                />
+                <SvgText
+                  x={x + barWidth / 2}
+                  y={yPos(data.series[0].data[i]) - 6}
+                  fontSize="10"
+                  textAnchor="middle"
+                >
+                  {formatNumber(data.series[0].data[i])}
+                </SvgText>
+
+                {/* 2025 BAR */}
+                <Rect
+                  x={x + barWidth + 4}
+                  y={yPos(data.series[1].data[i])}
+                  width={barWidth}
+                  height={scaleY(data.series[1].data[i])}
+                  fill="#4E79A7"
+                  onPress={() =>
+                    setActivePoint({
+                      x: x + barWidth + 4 + barWidth / 2,
+                      y: yPos(data.series[1].data[i]),
+                      value: data.series[1].data[i],
+                    })
+                  }
+                />
+                <SvgText
+                  x={x + barWidth + 4 + barWidth / 2}
+                  y={yPos(data.series[1].data[i]) - 6}
+                  fontSize="10"
+                  textAnchor="middle"
+                >
+                  {formatNumber(data.series[1].data[i])}
+                </SvgText>
+
+                {/* BUDGET DOT */}
+                <Circle
+                  cx={x + barWidth + 2}
+                  cy={yPos(data.series[2].data[i])}
+                  r={4}
+                  fill="#8AB6E8"
+                  onPress={() =>
+                    setActivePoint({
+                      x: x + barWidth + 2,
+                      y: yPos(data.series[2].data[i]),
+                      value: data.series[2].data[i],
+                    })
+                  }
+                />
+
+                {/* BUDGET VALUE */}
+                <SvgText
+                  x={x + barWidth + 2}
+                  y={yPos(data.series[2].data[i]) - 8}
+                  fontSize="10"
+                  textAnchor="middle"
+                >
+                  {formatNumber(data.series[2].data[i])}
+                </SvgText>
+
+                {/* X LABEL */}
+                <SvgText
+                  x={x + barWidth}
+                  y={height - 10}
+                  fontSize="10"
+                  textAnchor="middle"
+                  transform={`rotate(-35 ${x + barWidth} ${height - 10})`}
+                >
+                  {label}
+                </SvgText>
+              </React.Fragment>
+            );
+          })}
+
+          {activePoint && (
+            <>
+              <Rect
+                x={activePoint.x - 32}
+                y={activePoint.y - 44}
+                width={64}
+                height={26}
+                rx={6}
+                fill="#000"
+                opacity={0.8}
               />
-            ))}
-          </>
-        )}
-
-        {/* Value labels */}
-        {data.series[2]?.data.map((v, i) => (
-          <SvgText
-            key={i}
-            x={scaleX(i) + barWidth}
-            y={scaleY(v) - 8}
-            fontSize="9"
-            fill="#333"
-            textAnchor="middle"
-          >
-            {(v / 1_000_000).toFixed(0)}M
-          </SvgText>
+              <SvgText
+                x={activePoint.x}
+                y={activePoint.y - 26}
+                fontSize="10"
+                fill="#fff"
+                textAnchor="middle"
+              >
+                {formatNumber(activePoint.value)}
+              </SvgText>
+            </>
+          )}
+
+
+          {/* BUDGET DOTTED LINE */}
+          {data.series[2].data.map((v, i) => {
+            if (i === data.series[2].data.length - 1) return null;
+            return (
+              <Line
+                key={`line-${i}`}
+                x1={padding + i * step + barWidth + 2}
+                y1={yPos(v)}
+                x2={padding + (i + 1) * step + barWidth + 2}
+                y2={yPos(data.series[2].data[i + 1])}
+                stroke="#8AB6E8"
+                strokeWidth={2}
+                strokeDasharray="4"
+              />
+            );
+          })}
+        </Svg>
+      </ScrollView>
+
+      {/* LEGEND */}
+      <View style={{ flexDirection: 'row', marginTop: 8 }}>
+        {data.series.map((s, i) => (
+          <Text key={i} style={{ marginRight: 16 }}>
+            <Text
+              style={{
+                color:
+                  i === 0 ? '#E07A3F' : i === 1 ? '#4E79A7' : '#8AB6E8',
+              }}
+            >
+              ●
+            </Text>{' '}
+            {s.name}
+          </Text>
         ))}
-      </Svg>
+      </View>
     </View>
   );
 };

package/src/components/SvgLineChart.jsx

@@ -1,84 +1,166 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import Svg, { Polyline, Circle, Line, Text as SvgText } from 'react-native-svg';
+import React, { useState } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import Svg, {
+  Line,
+  Circle,
+  Rect,
+  Text as SvgText,
+} from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
 
 const SvgLineChart = ({ data }) => {
-  if (!data?.series?.length) return null;
+  if (!data?.series || !data.labels?.length) return null;
 
-  const width = 340;
-  const height = 180;
-  const padding = 30;
+  const [activePoint, setActivePoint] = useState(null);
 
-  const allValues = data.series.flatMap(s => s.data);
-  const max = Math.max(...allValues);
-  const min = Math.min(...allValues);
+  const width = Math.max(360, data.labels.length * 80);
+  const height = 220;
+  const padding = 40;
+  const chartHeight = height - padding * 2;
 
-  const scaleX = i =>
-    padding + (i * (width - padding * 2)) / (data.labels.length - 1);
+  const values = data.series.flatMap(s => s.data);
+  const max = Math.max(...values);
+  const min = 0;
 
-  const scaleY = v =>
-    height - padding - ((v - min) / (max - min)) * (height - padding * 2);
+  const y = v =>
+    height - padding - ((v - min) / (max - min || 1)) * chartHeight;
+
+  const xStep =
+    data.labels.length === 1
+      ? 0
+      : (width - padding * 2) / (data.labels.length - 1);
+
+  const colors = ['#E07A3F', '#4E79A7'];
 
   return (
-    <View style={{ backgroundColor: '#fff', padding: 12, borderRadius: 12 }}>
-      <Text style={{ fontWeight: '700', textAlign: 'center', marginBottom: 8 }}>
+    <View style={{ marginVertical: 16 }}>
+      <Text style={{ fontWeight: '700', marginBottom: 8 }}>
         {data.title}
       </Text>
 
-      <Svg width={width} height={height}>
-        {/* Grid */}
-        {[0.25, 0.5, 0.75].map(p => (
-          <Line
-            key={p}
-            x1={padding}
-            x2={width - padding}
-            y1={padding + p * (height - padding * 2)}
-            y2={padding + p * (height - padding * 2)}
-            stroke="#e0e0e0"
-            strokeDasharray="4,4"
-          />
-        ))}
+      <ScrollView horizontal>
+        <Svg width={width} height={height} onPress={() => setActivePoint(null)}>
+          {/* GRID + Y LABELS */}
+          {[0.25, 0.5, 0.75].map((p, i) => {
+            const yPos = padding + chartHeight * p;
+            const labelValue = Math.round(max * (1 - p));
+
+            return (
+              <React.Fragment key={i}>
+                <Line
+                  x1={padding}
+                  x2={width - padding}
+                  y1={yPos}
+                  y2={yPos}
+                  stroke="#ccc"
+                  strokeDasharray="4"
+                />
+                <SvgText
+                  x={padding - 8}
+                  y={yPos + 4}
+                  fontSize="10"
+                  textAnchor="end"
+                >
+                  {formatNumber(labelValue)}
+                </SvgText>
+              </React.Fragment>
+            );
+          })}
+
+          {/* LINES + DOTS */}
+          {data.series.map((s, si) =>
+            s.data.map((v, i) => {
+              const x = padding + i * xStep;
+              const yVal = y(v);
+
+              return (
+                <React.Fragment key={`${si}-${i}`}>
+                  {i < s.data.length - 1 && (
+                    <Line
+                      x1={x}
+                      y1={yVal}
+                      x2={padding + (i + 1) * xStep}
+                      y2={y(s.data[i + 1])}
+                      stroke={colors[si]}
+                      strokeWidth={2}
+                      strokeDasharray={si === 1 ? '4' : '0'}
+                    />
+                  )}
+
+                  <Circle
+                    cx={x}
+                    cy={yVal}
+                    r={5}
+                    fill={colors[si]}
+                    onPress={() =>
+                      setActivePoint({ x, y: yVal, value: v })
+                    }
+                  />
+
+                  <SvgText
+                    x={x}
+                    y={yVal - 8}
+                    fontSize="10"
+                    textAnchor="middle"
+                  >
+                    {formatNumber(v)}
+                  </SvgText>
+                </React.Fragment>
+              );
+            })
+          )}
 
-        {/* Lines */}
-        {data.series.map((s, idx) => {
-          const points = s.data
-            .map((v, i) => `${scaleX(i)},${scaleY(v)}`)
-            .join(' ');
-
-          return (
-            <Polyline
-              key={s.name}
-              points={points}
-              fill="none"
-              stroke={idx === 0 ? '#FB8C00' : '#1E88E5'}
-              strokeWidth="2"
-            />
-          );
-        })}
-
-        {/* Points + Labels */}
-        {data.series.map((s, idx) =>
-          s.data.map((v, i) => (
-            <React.Fragment key={`${idx}-${i}`}>
-              <Circle
-                cx={scaleX(i)}
-                cy={scaleY(v)}
-                r="4"
-                fill={idx === 0 ? '#FB8C00' : '#1E88E5'}
+          {/* TOOLTIP (ONLY ONCE) */}
+          {activePoint && (
+            <>
+              <Rect
+                x={activePoint.x - 30}
+                y={activePoint.y - 40}
+                width={60}
+                height={24}
+                rx={6}
+                fill="#000"
+                opacity={0.75}
               />
               <SvgText
-                x={scaleX(i)}
-                y={scaleY(v) - 8}
-                fontSize="9"
-                fill="#333"
+                x={activePoint.x}
+                y={activePoint.y - 24}
+                fontSize="10"
+                fill="#fff"
                 textAnchor="middle"
               >
-                {v}
+                {formatNumber(activePoint.value)}
               </SvgText>
-            </React.Fragment>
-          ))
-        )}
-      </Svg>
+            </>
+          )}
+
+          {/* X LABELS */}
+          {data.labels.map((label, i) => {
+            const x = padding + i * xStep;
+            return (
+              <SvgText
+                key={i}
+                x={x}
+                y={height - 10}
+                fontSize="10"
+                textAnchor="middle"
+                transform={`rotate(-35 ${x} ${height - 10})`}
+              >
+                {label}
+              </SvgText>
+            );
+          })}
+        </Svg>
+      </ScrollView>
+
+      {/* LEGEND */}
+      <View style={{ flexDirection: 'row', marginTop: 8 }}>
+        {data.series.map((s, i) => (
+          <Text key={i} style={{ marginRight: 16, color: colors[i] }}>
+            ● {s.name}
+          </Text>
+        ))}
+      </View>
     </View>
   );
 };

package/src/index.jsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { View, ActivityIndicator } from 'react-native';
 
 import ReportListScreen from './screens/ReportListScreen';
 import Report1Screen from './screens/Report1Screen';
@@ -7,11 +8,38 @@ import Report3Screen from './screens/Report3Screen';
 
 const AnalyticsReports = ({ config }) => {
   const [active, setActive] = useState(null);
+  const [loading, setLoading] = useState(true);
 
+  // SPLASH / LOADER (5 seconds)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // 👉 SHOW LOADER FIRST (BEFORE REPORT LIST)
+  if (loading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  // 👉 AFTER LOADER → SHOW REPORT LIST
   if (!active) {
     return <ReportListScreen onSelect={setActive} />;
   }
 
+  // 👉 REPORT 1
   if (active === 1) {
     return (
       <Report1Screen
@@ -22,6 +50,7 @@ const AnalyticsReports = ({ config }) => {
     );
   }
 
+  // 👉 REPORT 2
   if (active === 2) {
     return (
       <Report2Screen
@@ -32,6 +61,7 @@ const AnalyticsReports = ({ config }) => {
     );
   }
 
+  // 👉 REPORT 3
   if (active === 3) {
     return (
       <Report3Screen

package/src/screens/Report2Screen.jsx

@@ -39,11 +39,31 @@ const Report2Screen = ({ api, token, onBack }) => {
 
   if (!table || !line || !bar) return <ActivityIndicator />;
 
+  const filterChartByMonth = (chart, month) => {
+  if (month === 'ALL') return chart;
+  const index = chart.labels.indexOf(month);
+  if (index === -1) return chart;
+
+  return {
+    ...chart,
+    labels: [chart.labels[index]],
+    series: chart.series.map(s => ({
+      ...s,
+      data: [s.data[index]],
+    })),
+  };
+};
+
+
   const rows =
     month === 'ALL'
       ? table.rows
       : table.rows.filter(r => r.monthLabel === month);
 
+      const filteredLine = filterChartByMonth(line, month);
+const filteredBar = filterChartByMonth(bar, month);
+
+
   return (
     <ScrollView style={{ padding: 16 }}>
       <Text onPress={onBack}>‹ Back</Text>
@@ -58,16 +78,18 @@ const Report2Screen = ({ api, token, onBack }) => {
         onSelect={setMonth}
       />
 
-      <FrozenTableReport2 rows={rows} />
-
-      <SvgLineChart data={line} />
-      <SvgBarLineChart data={bar} />
-
       <DivisionSelector
         divisions={divisions}
         selected={division}
         onSelect={setDivision}
       />
+
+      <FrozenTableReport2 rows={rows} />
+
+      <SvgLineChart data={filteredLine} />
+<SvgBarLineChart data={filteredBar} />
+
+      
     </ScrollView>
   );
 };

package/src/screens/Report3Screen.jsx

@@ -26,6 +26,21 @@ const Report3Screen = ({ api, token, onBack }) => {
 
   if (!table || !line || !bar) return <ActivityIndicator />;
 
+  const filterChartByMonth = (chart, month) => {
+  if (month === 'ALL') return chart;
+  const index = chart.labels.indexOf(month);
+  if (index === -1) return chart;
+
+  return {
+    ...chart,
+    labels: [chart.labels[index]],
+    series: chart.series.map(s => ({
+      ...s,
+      data: [s.data[index]],
+    })),
+  };
+};
+
   const months = table.rows.filter(r => r.month !== 99).map(r => r.monthLabel);
 
   const rows =
@@ -33,6 +48,10 @@ const Report3Screen = ({ api, token, onBack }) => {
       ? table.rows
       : table.rows.filter(r => r.monthLabel === month);
 
+      const filteredLine = filterChartByMonth(line, month);
+const filteredBar = filterChartByMonth(bar, month);
+
+
   return (
     <ScrollView style={{ padding: 16 }}>
       <Text onPress={onBack}>‹ Back</Text>
@@ -49,8 +68,8 @@ const Report3Screen = ({ api, token, onBack }) => {
 
       <FrozenTableReport3 rows={rows} />
 
-      <SvgLineChart data={line} />
-      <SvgBarLineChart data={bar} />
+      <SvgLineChart data={filteredLine} />
+<SvgBarLineChart data={filteredBar} />
     </ScrollView>
   );
 };

package/src/utils/formatNumber.js

@@ -0,0 +1,12 @@
+export const formatNumber = (value) => {
+  if (value >= 1_000_000_000) {
+    return (value / 1_000_000_000).toFixed(1) + 'bn';
+  }
+  if (value >= 1_000_000) {
+    return (value / 1_000_000).toFixed(1) + 'M';
+  }
+  if (value >= 1_000) {
+    return (value / 1_000).toFixed(0) + 'k';
+  }
+  return value.toString();
+};