@dhiraj0720/report1chart 2.2.9 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.2.9",
+  "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,16 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View, Text, ScrollView } from 'react-native';
-import Svg, { Rect, Circle, Text as SvgText } from 'react-native-svg';
+import Svg, {
+  Rect,
+  Line,
+  Circle,
+  Text as SvgText,
+} from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
 
 const SvgBarLineChart = ({ data }) => {
-  if (!data?.series) return null;
+  if (!data?.series || !data.labels?.length) return null;
+
+  const [activePoint, setActivePoint] = useState(null);
+
 
   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 => (v / max) * chartHeight;
+  const yPos = v => height - padding - scaleY(v);
 
   return (
     <View style={{ marginVertical: 16 }}>
@@ -19,56 +33,181 @@ const SvgBarLineChart = ({ data }) => {
       </Text>
 
       <ScrollView horizontal>
-        <Svg width={width} height={height}>
+        <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 * 70;
+            const x = padding + i * step;
 
             return (
               <React.Fragment key={i}>
-                {/* 2024 bar */}
+                {/* 2024 BAR */}
                 <Rect
                   x={x}
-                  y={height - (data.series[0].data[i] / max) * 150}
+                  y={yPos(data.series[0].data[i])}
                   width={barWidth}
-                  height={(data.series[0].data[i] / max) * 150}
+                  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 */}
+                {/* 2025 BAR */}
                 <Rect
                   x={x + barWidth + 4}
-                  y={height - (data.series[1].data[i] / max) * 150}
+                  y={yPos(data.series[1].data[i])}
                   width={barWidth}
-                  height={(data.series[1].data[i] / max) * 150}
+                  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 */}
+                {/* BUDGET DOT */}
                 <Circle
-                  cx={x + barWidth}
-                  cy={height - (data.series[2].data[i] / max) * 150}
+                  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 - 6}
+                  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}
+              />
+              <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 }}>
-            ● {s.name}
+            <Text
+              style={{
+                color:
+                  i === 0 ? '#E07A3F' : i === 1 ? '#4E79A7' : '#8AB6E8',
+              }}
+            >
+              ●
+            </Text>{' '}
+            {s.name}
           </Text>
         ))}
       </View>

package/src/components/SvgLineChart.jsx

@@ -1,23 +1,35 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View, Text, ScrollView } from 'react-native';
-import Svg, { Line, Circle, Text as SvgText } from 'react-native-svg';
+import Svg, {
+  Line,
+  Circle,
+  Rect,
+  Text as SvgText,
+} from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
 
 const SvgLineChart = ({ data }) => {
-  if (!data?.series) return null;
+  if (!data?.series || !data.labels?.length) return null;
+
+  const [activePoint, setActivePoint] = useState(null);
 
   const width = Math.max(360, data.labels.length * 80);
   const height = 220;
   const padding = 40;
+  const chartHeight = height - padding * 2;
 
   const values = data.series.flatMap(s => s.data);
   const max = Math.max(...values);
-  const min = Math.min(...values);
+  const min = 0;
 
   const y = v =>
-    height - padding -
-    ((v - min) / (max - min || 1)) * (height - padding * 2);
+    height - padding - ((v - min) / (max - min || 1)) * chartHeight;
+
+  const xStep =
+    data.labels.length === 1
+      ? 0
+      : (width - padding * 2) / (data.labels.length - 1);
 
-  const xStep = (width - padding * 2) / (data.labels.length - 1 || 1);
   const colors = ['#E07A3F', '#4E79A7'];
 
   return (
@@ -27,55 +39,121 @@ const SvgLineChart = ({ data }) => {
       </Text>
 
       <ScrollView horizontal>
-        <Svg width={width} height={height}>
-          {/* Grid */}
-          {[0.25, 0.5, 0.75].map((p, i) => (
-            <Line
-              key={i}
-              x1={padding}
-              x2={width - padding}
-              y1={padding + (height - padding * 2) * p}
-              y2={padding + (height - padding * 2) * p}
-              stroke="#ccc"
-              strokeDasharray="4"
-            />
-          ))}
+        <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);
 
-              if (i === s.data.length - 1) return null;
-
               return (
                 <React.Fragment key={`${si}-${i}`}>
-                  <Line
-                    x1={x}
-                    y1={yVal}
-                    x2={x + xStep}
-                    y2={y(s.data[i + 1])}
-                    stroke={colors[si]}
-                    strokeWidth={2}
-                    strokeDasharray={si === 0 ? '4' : '0'}
+                  {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 })
+                    }
                   />
-                  <Circle cx={x} cy={yVal} r={4} fill={colors[si]} />
+
                   <SvgText
                     x={x}
                     y={yVal - 8}
                     fontSize="10"
                     textAnchor="middle"
                   >
-                    {v.toLocaleString()}
+                    {formatNumber(v)}
                   </SvgText>
                 </React.Fragment>
               );
             })
           )}
+
+          {/* 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={activePoint.x}
+                y={activePoint.y - 24}
+                fontSize="10"
+                fill="#fff"
+                textAnchor="middle"
+              >
+                {formatNumber(activePoint.value)}
+              </SvgText>
+            </>
+          )}
+
+          {/* 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 */}
+      {/* LEGEND */}
       <View style={{ flexDirection: 'row', marginTop: 8 }}>
         {data.series.map((s, i) => (
           <Text key={i} style={{ marginRight: 16, color: colors[i] }}>

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();
+};