@dhiraj0720/report1chart 2.5.4 → 2.5.6

package/package.json

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

package/src/components/DivisionFilterModal.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Modal, View, Text, TouchableOpacity, ScrollView } from 'react-native';
+
+const DivisionFilterModal = ({ visible, divisions, selected, onSelect, onClose }) => (
+  <Modal visible={visible} transparent animationType="fade">
+    <View style={{ flex: 1, backgroundColor: '#0008', justifyContent: 'center' }}>
+      <View style={{ backgroundColor: '#fff', margin: 20, borderRadius: 12, padding: 16 }}>
+        <Text style={{ fontWeight: '700', marginBottom: 8 }}>Select Division</Text>
+
+        <ScrollView style={{ maxHeight: 260 }}>
+          {divisions.map(d => (
+            <TouchableOpacity
+              key={d.code}
+              onPress={() => { onSelect(d.code); onClose(); }}
+            >
+              <Text style={{ padding: 8, fontWeight: selected === d.code ? '700' : '400' }}>
+                {selected === d.code ? '✓ ' : ''}{d.displayName}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+    </View>
+  </Modal>
+);
+
+export default DivisionFilterModal;

package/src/components/FrozenTableReport2A.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { formatNumber } from '../utils/formatNumber';
+
+const Arrow = ({ v }) => (
+  <Text style={{ color: v >= 0 ? 'green' : 'red', fontWeight: '700' }}>
+    {v >= 0 ? '↑' : '↓'} {Math.abs(v)}%
+  </Text>
+);
+
+const Cell = ({ children, bold }) => (
+  <View style={styles.cell}>
+    <Text numberOfLines={1} style={bold && styles.bold}>{children}</Text>
+  </View>
+);
+
+const FrozenTableReport2A = ({ rows }) => (
+  <View style={styles.container}>
+    <View style={styles.frozen}>
+      <Cell bold>AY</Cell>
+      {rows.map((r, i) => <Cell key={i} bold>{r.monthLabel}</Cell>)}
+    </View>
+
+    <ScrollView horizontal>
+      <View>
+        <View style={styles.header}>
+          <Cell bold>2024</Cell>
+          <Cell bold>2025</Cell>
+          <Cell bold>%</Cell>
+        </View>
+
+        {rows.map((r, i) => (
+          <View key={i} style={styles.row}>
+            <Cell>{formatNumber(r.teu2024)}</Cell>
+            <Cell>{formatNumber(r.teu2025)}</Cell>
+            <Cell><Arrow v={r.teuChangePercent} /></Cell>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  </View>
+);
+
+export default FrozenTableReport2A;
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'row', marginVertical: 8 },
+  frozen: { width: 90, backgroundColor: '#f4f4f4' },
+  header: { flexDirection: 'row', backgroundColor: '#f4f4f4' },
+  row: { flexDirection: 'row' },
+  cell: {
+    width: 90,
+    padding: 6,
+    borderBottomWidth: 1,
+    borderColor: '#ddd',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bold: { fontWeight: '700' },
+});

package/src/components/FullScreenTableModal.jsx

@@ -7,7 +7,7 @@ import {
   StyleSheet,
   SafeAreaView,
 } from 'react-native';
-import SafeScreen from './components/SafeScreen';
+import SafeScreen from './SafeScreen';
 import FrozenTableReport1A from './FrozenTableReport1A';
 
 const FullScreenTableModal = ({ visible, rows, onClose }) => {

package/src/components/MonthFilterModal.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Modal, View, Text, TouchableOpacity, ScrollView } from 'react-native';
+
+const MonthFilterModal = ({ visible, months, selected, onApply, onClose }) => {
+  const [local, setLocal] = useState(selected);
+
+  const toggle = (m) => {
+    if (local.includes(m)) {
+      setLocal(local.filter(x => x !== m));
+    } else {
+      setLocal([...local, m]);
+    }
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <View style={{ flex: 1, backgroundColor: '#0008', justifyContent: 'center' }}>
+        <View style={{ backgroundColor: '#fff', margin: 20, borderRadius: 12, padding: 16 }}>
+          <Text style={{ fontWeight: '700', marginBottom: 8 }}>Select Months</Text>
+
+          <TouchableOpacity onPress={() => setLocal(months)}>
+            <Text style={{ color: '#1e88e5', marginBottom: 8 }}>Select All</Text>
+          </TouchableOpacity>
+
+          <ScrollView style={{ maxHeight: 260 }}>
+            {months.map(m => (
+              <TouchableOpacity key={m} onPress={() => toggle(m)}>
+                <Text style={{ padding: 8, fontWeight: local.includes(m) ? '700' : '400' }}>
+                  {local.includes(m) ? '✓ ' : ''}{m}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+
+          <TouchableOpacity
+            style={{ marginTop: 12, alignSelf: 'flex-end' }}
+            onPress={() => { onApply(local); onClose(); }}
+          >
+            <Text style={{ fontWeight: '700' }}>Apply</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default MonthFilterModal;

package/src/components/SvgBarLineChartCompact.jsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import Svg, { Rect, Line, Circle, Text as SvgText } from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
+
+const SvgBarLineChartCompact = ({ data }) => {
+  if (!data?.series || !data.labels?.length) return null;
+
+  const height = 220;
+  const graphWidth = Math.max(320, data.labels.length * 80);
+
+  const paddingLeft = 50;
+  const paddingRight = 10;
+  const paddingTop = 20;
+  const paddingBottom = 35;
+
+  const chartHeight = height - paddingTop - paddingBottom;
+
+  const MAX = 1000000; // 1.0M
+  const barWidth = 14;
+
+  const y = (v) =>
+    paddingTop + ((MAX - v) / MAX) * chartHeight;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{data.title}</Text>
+
+      <View style={{ flexDirection: 'row' }}>
+        {/* FIXED Y AXIS */}
+        <Svg width={paddingLeft} height={height}>
+          {[1000000, 500000, 0].map((v, i) => (
+            <SvgText
+              key={i}
+              x={paddingLeft - 6}
+              y={y(v) + 4}
+              fontSize="10"
+              textAnchor="end"
+              fill="#444"
+            >
+              {(v / 1_000_000).toFixed(1)}M
+            </SvgText>
+          ))}
+        </Svg>
+
+        {/* SCROLLABLE GRAPH */}
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <Svg width={graphWidth} height={height}>
+            {/* GRID */}
+            {[1000000, 500000, 0].map((v, i) => (
+              <Line
+                key={i}
+                x1={0}
+                x2={graphWidth}
+                y1={y(v)}
+                y2={y(v)}
+                stroke="#ccc"
+                strokeDasharray="4"
+              />
+            ))}
+
+            {data.labels.map((label, i) => {
+              const x = paddingLeft + i * 70;
+
+              return (
+                <React.Fragment key={i}>
+                  {/* 2024 BAR */}
+                  <Rect
+                    x={x}
+                    y={y(data.series[0].data[i])}
+                    width={barWidth}
+                    height={chartHeight - (y(data.series[0].data[i]) - paddingTop)}
+                    fill="#E07A3F"
+                  />
+
+                  {/* 2025 BAR */}
+                  <Rect
+                    x={x + barWidth + 4}
+                    y={y(data.series[1].data[i])}
+                    width={barWidth}
+                    height={chartHeight - (y(data.series[1].data[i]) - paddingTop)}
+                    fill="#4E79A7"
+                  />
+
+                  {/* BUDGET DOT + LINE */}
+                  <Circle
+                    cx={x + barWidth}
+                    cy={y(data.series[2].data[i])}
+                    r={4}
+                    fill="#8AB6E8"
+                  />
+
+                  {/* VALUE */}
+                  <SvgText
+                    x={x + barWidth}
+                    y={y(data.series[2].data[i]) - 8}
+                    fontSize="9"
+                    textAnchor="middle"
+                  >
+                    {formatNumber(data.series[2].data[i])}
+                  </SvgText>
+
+                  {/* X LABEL */}
+                  <SvgText
+                    x={x + barWidth}
+                    y={height - 10}
+                    fontSize="9"
+                    textAnchor="middle"
+                    transform={`rotate(-30 ${x + barWidth} ${height - 10})`}
+                  >
+                    {label}
+                  </SvgText>
+                </React.Fragment>
+              );
+            })}
+          </Svg>
+        </ScrollView>
+      </View>
+
+      {/* LEGEND */}
+      <View style={styles.legend}>
+        <Text style={{ color: '#E07A3F' }}>● {data.series[0].name}</Text>
+        <Text style={{ color: '#4E79A7', marginLeft: 12 }}>
+          ● {data.series[1].name}
+        </Text>
+        <Text style={{ color: '#8AB6E8', marginLeft: 12 }}>
+          ● {data.series[2].name}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default SvgBarLineChartCompact;
+
+const styles = StyleSheet.create({
+  container: { marginVertical: 6 },
+  title: {
+    fontWeight: '700',
+    marginBottom: 4,
+    fontSize: 13,
+  },
+  legend: {
+    flexDirection: 'row',
+    marginTop: 4,
+    flexWrap: 'wrap',
+  },
+});

package/src/components/SvgLineChartCompact.jsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import Svg, { Line, Circle, Text as SvgText } from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
+
+const SvgLineChartCompact = ({ data }) => {
+  if (!data?.series || !data.labels?.length) return null;
+
+  const height = 200;
+  const graphWidth = Math.max(320, data.labels.length * 70);
+
+  const paddingLeft = 50;   // Y axis space
+  const paddingRight = 10;
+  const paddingTop = 20;
+  const paddingBottom = 35;
+
+  // FIXED AXIS (as per image)
+  const MIN = 5000;
+  const MAX = 10000;
+
+  const chartHeight = height - paddingTop - paddingBottom;
+  const xStep =
+    data.labels.length === 1
+      ? 0
+      : (graphWidth - paddingLeft - paddingRight) /
+        (data.labels.length - 1);
+
+  const y = (v) =>
+    paddingTop +
+    ((MAX - v) / (MAX - MIN)) * chartHeight;
+
+  const colors = ['#E07A3F', '#4E79A7']; // orange / blue
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{data.title}</Text>
+
+      <View style={{ flexDirection: 'row' }}>
+        {/* FIXED Y AXIS */}
+        <Svg width={paddingLeft} height={height}>
+          {[10000, 5000].map((v, i) => (
+            <SvgText
+              key={i}
+              x={paddingLeft - 6}
+              y={y(v) + 4}
+              fontSize="10"
+              textAnchor="end"
+              fill="#444"
+            >
+              {formatNumber(v)}
+            </SvgText>
+          ))}
+        </Svg>
+
+        {/* SCROLLABLE GRAPH */}
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <Svg width={graphWidth} height={height}>
+            {/* GRID LINES */}
+            {[10000, 5000].map((v, i) => (
+              <Line
+                key={i}
+                x1={0}
+                x2={graphWidth}
+                y1={y(v)}
+                y2={y(v)}
+                stroke="#ccc"
+                strokeDasharray="4"
+              />
+            ))}
+
+            {/* LINES + DOTS */}
+            {data.series.map((s, si) =>
+              s.data.map((val, i) => {
+                const x =
+                  paddingLeft + (data.labels.length === 1 ? 0 : i * xStep);
+                const yVal = y(val);
+
+                return (
+                  <React.Fragment key={`${si}-${i}`}>
+                    {/* CONNECTING LINE */}
+                    {i < s.data.length - 1 && (
+                      <Line
+                        x1={x}
+                        y1={yVal}
+                        x2={paddingLeft + (i + 1) * xStep}
+                        y2={y(s.data[i + 1])}
+                        stroke={colors[si]}
+                        strokeWidth={2}
+                        strokeDasharray={si === 0 ? '4' : '0'}
+                      />
+                    )}
+
+                    {/* DOT */}
+                    <Circle cx={x} cy={yVal} r={4} fill={colors[si]} />
+
+                    {/* VALUE */}
+                    <SvgText
+                      x={x}
+                      y={yVal - 8}
+                      fontSize="9"
+                      textAnchor="middle"
+                      fill="#333"
+                    >
+                      {formatNumber(val)}
+                    </SvgText>
+                  </React.Fragment>
+                );
+              })
+            )}
+
+            {/* X AXIS LABELS */}
+            {data.labels.map((label, i) => {
+              const x =
+                paddingLeft + (data.labels.length === 1 ? 0 : i * xStep);
+              return (
+                <SvgText
+                  key={i}
+                  x={x}
+                  y={height - 10}
+                  fontSize="9"
+                  textAnchor="middle"
+                  transform={`rotate(-30 ${x} ${height - 10})`}
+                >
+                  {label}
+                </SvgText>
+              );
+            })}
+          </Svg>
+        </ScrollView>
+      </View>
+
+      {/* LEGEND */}
+      <View style={styles.legend}>
+        <Text style={{ color: colors[0] }}>● {data.series[0].name}</Text>
+        <Text style={{ color: colors[1], marginLeft: 16 }}>
+          ● {data.series[1].name}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default SvgLineChartCompact;
+
+const styles = StyleSheet.create({
+  container: { marginVertical: 6 },
+  title: {
+    fontWeight: '700',
+    marginBottom: 4,
+    fontSize: 13,
+  },
+  legend: {
+    flexDirection: 'row',
+    marginTop: 4,
+  },
+});

package/src/index.jsx

@@ -6,6 +6,7 @@ import Report1Screen from './screens/Report1Screen';
 import Report2Screen from './screens/Report2Screen';
 import Report3Screen from './screens/Report3Screen';
 import Report1AScreen from './screens/Report1AScreen';
+import Report2AScreen from './screens/Report2AScreen';
 
 const AnalyticsReports = ({ config, onExit }) => {
   const [active, setActive] = useState(null);
@@ -70,6 +71,17 @@ const AnalyticsReports = ({ config, onExit }) => {
   );
 }
 
+if (active === '2A') {
+  return (
+    <SafeScreen>
+      <Report2AScreen
+        endpoint={config.report1.url}
+        token={config.token}
+        onBack={() => setActive(null)}
+      />
+    </SafeScreen>
+  );
+}
 
   // 👉 REPORT 2
   if (active === 2) {

package/src/screens/Report2AScreen.jsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+import { getDivisions, getTable, getLine, getBar } from '../api/report2Fetcher';
+import MonthFilterModal from '../components/MonthFilterModal';
+import DivisionFilterModal from '../components/DivisionFilterModal';
+import FrozenTableReport2A from '../components/FrozenTableReport2A';
+import SvgLineChartCompact from '../components/SvgLineChartCompact';
+import SvgBarLineChartCompact from '../components/SvgBarLineChartCompact';
+
+const Report2AScreen = ({ api, token, onBack }) => {
+  const [monthsModal, setMonthsModal] = useState(false);
+  const [divisionModal, setDivisionModal] = useState(false);
+
+  const [months, setMonths] = useState([]);
+  const [selectedMonths, setSelectedMonths] = useState([]);
+  const [divisions, setDivisions] = useState([]);
+  const [division, setDivision] = useState(null);
+
+  const [table, setTable] = useState(null);
+  const [line, setLine] = useState(null);
+  const [bar, setBar] = useState(null);
+
+  useEffect(() => {
+    getDivisions(api.divisions, token).then(d => {
+      setDivisions(d);
+      setDivision(d[0]?.code);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!division) return;
+    Promise.all([
+      getTable(api.table, division, token),
+      getLine(api.line, division, token),
+      getBar(api.bar, division, token),
+    ]).then(([t, l, b]) => {
+      setTable(t);
+      setLine(l);
+      setBar(b);
+      setMonths(l.labels);
+      setSelectedMonths(l.labels);
+    });
+  }, [division]);
+
+  if (!table || !line || !bar) return null;
+
+  const rows = table.rows.filter(r =>
+    selectedMonths.includes(r.monthLabel)
+  );
+
+  return (
+    <ScrollView style={{ padding: 12 }}>
+      <Text onPress={onBack}>‹ Back</Text>
+
+      {/* FILTER BAR */}
+      <View style={{ flexDirection: 'row', marginVertical: 6 }}>
+        <TouchableOpacity onPress={() => setMonthsModal(true)}>
+          <Text>Months ⛃</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => setDivisionModal(true)}
+          style={{ marginLeft: 16 }}
+        >
+          <Text>Divisions ⛃</Text>
+        </TouchableOpacity>
+      </View>
+
+      <FrozenTableReport2A rows={rows} />
+
+      <View style={{ borderTopWidth: 1, borderBottomWidth: 1, marginVertical: 6 }}>
+        <SvgLineChartCompact data={line} />
+      </View>
+
+      <View style={{ borderTopWidth: 1, borderBottomWidth: 1, marginVertical: 6 }}>
+        <SvgBarLineChartCompact data={bar} />
+      </View>
+
+      <MonthFilterModal
+        visible={monthsModal}
+        months={months}
+        selected={selectedMonths}
+        onApply={setSelectedMonths}
+        onClose={() => setMonthsModal(false)}
+      />
+
+      <DivisionFilterModal
+        visible={divisionModal}
+        divisions={divisions}
+        selected={division}
+        onSelect={setDivision}
+        onClose={() => setDivisionModal(false)}
+      />
+    </ScrollView>
+  );
+};
+
+export default Report2AScreen;

package/src/utils/formatNumber.js

@@ -1,12 +1,4 @@
-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();
+export const formatNumber = (v) => {
+  if (v === null || v === undefined) return '-';
+  return Number(v).toLocaleString('en-US');
 };