@dhiraj0720/report1chart 2.2.8 → 2.2.9

package/package.json

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

package/src/components/SvgBarLineChart.jsx

@@ -1,84 +1,77 @@
 import React from 'react';
-import { View, Text } from 'react-native';
-import Svg, { Rect, Polyline, Circle, Text as SvgText } from 'react-native-svg';
+import { View, Text, ScrollView } from 'react-native';
+import Svg, { Rect, Circle, Text as SvgText } from 'react-native-svg';
 
 const SvgBarLineChart = ({ data }) => {
-  if (!data?.series?.length) return null;
+  if (!data?.series) return null;
 
-  const width = 360;
-  const height = 190;
-  const padding = 30;
-  const barWidth = 12;
+  const width = Math.max(360, data.labels.length * 90);
+  const height = 240;
+  const padding = 40;
 
   const max = Math.max(...data.series.flatMap(s => s.data));
-
-  const scaleX = i =>
-    padding + i * ((width - padding * 2) / data.labels.length);
-
-  const scaleY = v =>
-    height - padding - (v / max) * (height - padding * 2);
+  const barWidth = 14;
 
   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"
-            />
-          ))
-        )}
+      <ScrollView horizontal>
+        <Svg width={width} height={height}>
+          {data.labels.map((label, i) => {
+            const x = padding + i * 70;
+
+            return (
+              <React.Fragment key={i}>
+                {/* 2024 bar */}
+                <Rect
+                  x={x}
+                  y={height - (data.series[0].data[i] / max) * 150}
+                  width={barWidth}
+                  height={(data.series[0].data[i] / max) * 150}
+                  fill="#E07A3F"
+                />
+
+                {/* 2025 bar */}
+                <Rect
+                  x={x + barWidth + 4}
+                  y={height - (data.series[1].data[i] / max) * 150}
+                  width={barWidth}
+                  height={(data.series[1].data[i] / max) * 150}
+                  fill="#4E79A7"
+                />
 
-        {/* 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"
-            />
+                {/* Budget dot */}
+                <Circle
+                  cx={x + barWidth}
+                  cy={height - (data.series[2].data[i] / max) * 150}
+                  r={4}
+                  fill="#8AB6E8"
+                />
 
-            {data.series[2].data.map((v, i) => (
-              <Circle
-                key={i}
-                cx={scaleX(i) + barWidth}
-                cy={scaleY(v)}
-                r="4"
-                fill="#90CAF9"
-              />
-            ))}
-          </>
-        )}
+                <SvgText
+                  x={x + barWidth}
+                  y={height - 6}
+                  fontSize="10"
+                  textAnchor="middle"
+                >
+                  {label}
+                </SvgText>
+              </React.Fragment>
+            );
+          })}
+        </Svg>
+      </ScrollView>
 
-        {/* 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>
+      <View style={{ flexDirection: 'row', marginTop: 8 }}>
+        {data.series.map((s, i) => (
+          <Text key={i} style={{ marginRight: 16 }}>
+            ● {s.name}
+          </Text>
         ))}
-      </Svg>
+      </View>
     </View>
   );
 };

package/src/components/SvgLineChart.jsx

@@ -1,84 +1,88 @@
 import React from 'react';
-import { View, Text } from 'react-native';
-import Svg, { Polyline, Circle, Line, Text as SvgText } from 'react-native-svg';
+import { View, Text, ScrollView } from 'react-native';
+import Svg, { Line, Circle, Text as SvgText } from 'react-native-svg';
 
 const SvgLineChart = ({ data }) => {
-  if (!data?.series?.length) return null;
+  if (!data?.series) return null;
 
-  const width = 340;
-  const height = 180;
-  const padding = 30;
+  const width = Math.max(360, data.labels.length * 80);
+  const height = 220;
+  const padding = 40;
 
-  const allValues = data.series.flatMap(s => s.data);
-  const max = Math.max(...allValues);
-  const min = Math.min(...allValues);
+  const values = data.series.flatMap(s => s.data);
+  const max = Math.max(...values);
+  const min = Math.min(...values);
 
-  const scaleX = i =>
-    padding + (i * (width - padding * 2)) / (data.labels.length - 1);
+  const y = v =>
+    height - padding -
+    ((v - min) / (max - min || 1)) * (height - padding * 2);
 
-  const scaleY = v =>
-    height - padding - ((v - min) / (max - min)) * (height - padding * 2);
+  const xStep = (width - padding * 2) / (data.labels.length - 1 || 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}>
+          {/* 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"
+            />
+          ))}
 
-        {/* Lines */}
-        {data.series.map((s, idx) => {
-          const points = s.data
-            .map((v, i) => `${scaleX(i)},${scaleY(v)}`)
-            .join(' ');
+          {data.series.map((s, si) =>
+            s.data.map((v, i) => {
+              const x = padding + i * xStep;
+              const yVal = y(v);
 
-          return (
-            <Polyline
-              key={s.name}
-              points={points}
-              fill="none"
-              stroke={idx === 0 ? '#FB8C00' : '#1E88E5'}
-              strokeWidth="2"
-            />
-          );
-        })}
+              if (i === s.data.length - 1) return null;
 
-        {/* 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'}
-              />
-              <SvgText
-                x={scaleX(i)}
-                y={scaleY(v) - 8}
-                fontSize="9"
-                fill="#333"
-                textAnchor="middle"
-              >
-                {v}
-              </SvgText>
-            </React.Fragment>
-          ))
-        )}
-      </Svg>
+              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'}
+                  />
+                  <Circle cx={x} cy={yVal} r={4} fill={colors[si]} />
+                  <SvgText
+                    x={x}
+                    y={yVal - 8}
+                    fontSize="10"
+                    textAnchor="middle"
+                  >
+                    {v.toLocaleString()}
+                  </SvgText>
+                </React.Fragment>
+              );
+            })
+          )}
+        </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>
   );
 };