@dhiraj0720/report1chart 2.8.0 → 2.8.2

package/package.json

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

package/src/components/SvgBarLineChartCompact.jsx

@@ -6,88 +6,66 @@ import { formatNumber } from '../utils/formatNumber';
 const SvgBarLineChartCompact = ({ data }) => {
   if (!data?.series || !data.labels?.length) return null;
 
-  const height = 260;
+  const height = 280;
   const paddingLeft = 70;
   const paddingRight = 30;
-  const paddingTop = 20;
-  const paddingBottom = 60;
+  const paddingTop = 30;
+  const paddingBottom = 70;
 
   const chartHeight = height - paddingTop - paddingBottom;
-  const graphWidth = Math.max(500, data.labels.length * 100); // Wider spacing like image
+  const graphWidth = Math.max(500, data.labels.length * 110);
 
-  // Max value slightly above the highest in image
   const MAX = 1279958;
-  const barWidth = 20;
-  const barGap = 6; // Gap between 2024 and 2025 bar
-  const groupGap = 30; // Gap between months (matches image)
+  const barWidth = 22;
+  const barGap = 8;
+  const groupGap = 35;
 
   const y = (v) => paddingTop + ((MAX - v) / MAX) * chartHeight;
-
-  // Center X for each month group
-  const getGroupCenterX = (i) => paddingLeft + i * (barWidth * 2 + barGap + groupGap) + (barWidth + barGap / 2);
+  const getCenterX = (i) => paddingLeft + i * (barWidth * 2 + barGap + groupGap) + (barWidth + barGap / 2);
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{data.title || 'AY BAZINDA KAR KARŞILAŞTIRMALARI'}</Text>
+      <Text style={styles.title}>AY BAZINDA KAR KARŞILAŞTIRMALARI</Text>
 
       <View style={{ flexDirection: 'row' }}>
-        {/* Y Axis Labels */}
         <Svg width={paddingLeft} height={height}>
-          {[1279958, 1000000, 500000, 0].map((v, i) => (
+          {[1000000, 500000, 0].map((v) => (
             <SvgText
-              key={i}
+              key={v}
               x={paddingLeft - 10}
               y={y(v) + 5}
               fontSize="11"
               textAnchor="end"
               fill="#444"
             >
-              {v >= 1000000 ? `$${ (v / 1000000).toFixed(1) }M` : formatNumber(v)}
+              {(v / 1000000).toFixed(1)}M
             </SvgText>
           ))}
         </Svg>
 
-        {/* Main Chart - Scrollable */}
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <Svg width={graphWidth} height={height}>
-            {/* Horizontal Grid Lines */}
-            {[1279958, 1000000, 500000, 0].map((v) => (
-              <Line
-                key={v}
-                x1={0}
-                x2={graphWidth}
-                y1={y(v)}
-                y2={y(v)}
-                stroke="#eee"
-                strokeDasharray="5,5"
-              />
+            {[1000000, 500000, 0].map((v) => (
+              <Line key={v} x1={0} x2={graphWidth} y1={y(v)} y2={y(v)} stroke="#eee" strokeDasharray="5,5" />
             ))}
 
-            {/* Bars & Budget Line */}
             {data.labels.map((label, i) => {
-              const centerX = getGroupCenterX(i);
-
+              const centerX = getCenterX(i);
               const val2024 = data.series[0]?.data[i] || 0;
               const val2025 = data.series[1]?.data[i] || 0;
               const budget = data.series[2]?.data[i] || 0;
 
-              const barHeight2024 = chartHeight - (y(val2024) - paddingTop);
-              const barHeight2025 = chartHeight - (y(val2025) - paddingTop);
+              const h2024 = chartHeight - (y(val2024) - paddingTop);
+              const h2025 = chartHeight - (y(val2025) - paddingTop);
 
               return (
                 <React.Fragment key={i}>
-                  {/* 2024 Bar - Orange */}
-                  <Rect
-                    x={centerX - barWidth - barGap / 2}
-                    y={y(val2024)}
-                    width={barWidth}
-                    height={barHeight2024}
-                    fill="#E07A3F"
-                  />
-                  {val2024 > MAX * 0.08 && (
+                  {/* 2024 Bar */}
+                  <Rect x={centerX - barWidth - barGap / 2} y={y(val2024)} width={barWidth} height={h2024} fill="#E07A3F" />
+                  {val2024 > MAX * 0.1 && (
                     <SvgText
                       x={centerX - barWidth - barGap / 2 + barWidth / 2}
-                      y={y(val2024) + barHeight2024 / 2 + 4}
+                      y={y(val2024) + h2024 / 2 + 5}
                       fontSize="10"
                       textAnchor="middle"
                       fill="white"
@@ -97,18 +75,12 @@ const SvgBarLineChartCompact = ({ data }) => {
                     </SvgText>
                   )}
 
-                  {/* 2025 Bar - Blue */}
-                  <Rect
-                    x={centerX + barGap / 2}
-                    y={y(val2025)}
-                    width={barWidth}
-                    height={barHeight2025}
-                    fill="#4E79A7"
-                  />
-                  {val2025 > MAX * 0.08 && (
+                  {/* 2025 Bar */}
+                  <Rect x={centerX + barGap / 2} y={y(val2025)} width={barWidth} height={h2025} fill="#4E79A7" />
+                  {val2025 > MAX * 0.1 && (
                     <SvgText
                       x={centerX + barGap / 2 + barWidth / 2}
-                      y={y(val2025) + barHeight2025 / 2 + 4}
+                      y={y(val2025) + h2025 / 2 + 5}
                       fontSize="10"
                       textAnchor="middle"
                       fill="white"
@@ -118,10 +90,10 @@ const SvgBarLineChartCompact = ({ data }) => {
                     </SvgText>
                   )}
 
-                  {/* Budget Dotted Line */}
+                  {/* Budget Line & Dot */}
                   {i > 0 && (
                     <Line
-                      x1={getGroupCenterX(i - 1)}
+                      x1={getCenterX(i - 1)}
                       y1={y(data.series[2].data[i - 1])}
                       x2={centerX}
                       y2={y(budget)}
@@ -130,37 +102,19 @@ const SvgBarLineChartCompact = ({ data }) => {
                       strokeDasharray="6,4"
                     />
                   )}
-
-                  {/* Budget Dot */}
-                  <Circle
-                    cx={centerX}
-                    cy={y(budget)}
-                    r={5}
-                    fill="#8AB6E8"
-                    stroke="#fff"
-                    strokeWidth={2}
-                  />
-
-                  {/* Budget Value Above Dot */}
-                  <SvgText
-                    x={centerX}
-                    y={y(budget) - 10}
-                    fontSize="10"
-                    textAnchor="middle"
-                    fill="#333"
-                    fontWeight="700"
-                  >
+                  <Circle cx={centerX} cy={y(budget)} r={6} fill="#8AB6E8" stroke="#fff" strokeWidth={2} />
+                  <SvgText x={centerX} y={y(budget) - 12} fontSize="11" textAnchor="middle" fill="#333" fontWeight="700">
                     {formatNumber(budget)}
                   </SvgText>
 
-                  {/* X Axis Label - Rotated */}
+                  {/* X Label */}
                   <SvgText
                     x={centerX}
-                    y={height - 25}
+                    y={height - 30}
                     fontSize="11"
                     textAnchor="middle"
                     fill="#555"
-                    transform={`rotate(-45 ${centerX} ${height - 25})`}
+                    transform={`rotate(-45 ${centerX} ${height - 30})`}
                   >
                     {label}
                   </SvgText>
@@ -171,7 +125,6 @@ const SvgBarLineChartCompact = ({ data }) => {
         </ScrollView>
       </View>
 
-      {/* Legend */}
       <View style={styles.legend}>
         <Text style={{ color: '#E07A3F', marginRight: 20 }}>● 2024 Kar USD</Text>
         <Text style={{ color: '#4E79A7', marginRight: 20 }}>● 2025 Kar USD</Text>
@@ -181,28 +134,21 @@ const SvgBarLineChartCompact = ({ data }) => {
   );
 };
 
-export default SvgBarLineChartCompact;
-
 const styles = StyleSheet.create({
-  container: {
-    marginVertical: 12,
-    backgroundColor: '#fff',
-    borderRadius: 10,
-    padding: 10,
-    borderWidth: 1,
-    borderColor: '#ddd',
+  container: { padding: 10 },
+  title: { 
+    fontWeight: '700', 
+    fontSize: 14, 
+    textAlign: 'center', 
+    marginBottom: 10,
+    color: '#111'
   },
-  title: {
-    fontWeight: '700',
-    fontSize: 14,
-    textAlign: 'center',
-    marginBottom: 8,
-    color: '#111',
+  legend: { 
+    flexDirection: 'row', 
+    justifyContent: 'center', 
+    marginTop: 12,
+    flexWrap: 'wrap'
   },
-  legend: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 10,
-    flexWrap: 'wrap',
-  },
-});
+});
+
+export default SvgBarLineChartCompact;

package/src/components/SvgLineChartCompact.jsx

@@ -6,37 +6,37 @@ import { formatNumber } from '../utils/formatNumber';
 const SvgLineChartCompact = ({ data }) => {
   if (!data?.series || !data.labels?.length) return null;
 
-  const height = 200;
-  const paddingLeft = 60;
-  const paddingRight = 20;
-  const paddingTop = 20;
-  const paddingBottom = 40;
+  const height = 260;
+  const paddingLeft = 70;
+  const paddingRight = 30;
+  const paddingTop = 30;
+  const paddingBottom = 60;
 
   const chartHeight = height - paddingTop - paddingBottom;
-  const graphWidth = Math.max(400, data.labels.length * 80);
+  const graphWidth = Math.max(500, data.labels.length * 100);
 
-  // FIXED AXIS (as per image)
   const MIN = 5000;
   const MAX = 10000;
 
   const y = (v) => paddingTop + ((MAX - Math.max(MIN, Math.min(MAX, v))) / (MAX - MIN)) * chartHeight;
 
- // Fix for single point: use fixed spacing
   const totalPoints = data.labels.length;
-  const xStep = totalPoints === 1 ? 0 : (graphWidth - paddingLeft - paddingRight) / (totalPoints - 1);
+  const xStep = totalPoints === 1 
+    ? graphWidth / 2 
+    : (graphWidth - paddingLeft - paddingRight) / (totalPoints - 1);
 
-  const colors = ['#E07A3F', '#4E79A7'];// orange / blue
+  const colors = ['#E07A3F', '#4E79A7'];
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{data.title}</Text>
+      <Text style={styles.title}>AY BAZINDA KAR KARŞILAŞTIRMALARI</Text>
 
       <View style={{ flexDirection: 'row' }}>
         <Svg width={paddingLeft} height={height}>
           {[10000, 5000].map((v) => (
             <SvgText
               key={v}
-              x={paddingLeft - 8}
+              x={paddingLeft - 10}
               y={y(v) + 5}
               fontSize="11"
               textAnchor="end"
@@ -49,31 +49,29 @@ const SvgLineChartCompact = ({ data }) => {
 
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <Svg width={graphWidth} height={height}>
-            {/* Grid */}
             {[10000, 5000].map((v) => (
               <Line key={v} x1={0} x2={graphWidth} y1={y(v)} y2={y(v)} stroke="#eee" strokeDasharray="5,5" />
             ))}
 
-            {/* Series */}
             {data.series.map((series, si) =>
               series.data.map((val, i) => {
-                const x = paddingLeft + i * (totalPoints === 1 ? graphWidth / 2 - paddingLeft : xStep);
+                const x = paddingLeft + i * xStep + (totalPoints === 1 ? graphWidth / 2 - paddingLeft - xStep / 2 : 0);
 
                 return (
                   <React.Fragment key={`${si}-${i}`}>
                     {i > 0 && (
                       <Line
-                        x1={paddingLeft + (i - 1) * (totalPoints === 1 ? graphWidth / 2 - paddingLeft : xStep)}
+                        x1={paddingLeft + (i - 1) * xStep + (totalPoints === 1 ? graphWidth / 2 - paddingLeft - xStep / 2 : 0)}
                         y1={y(series.data[i - 1])}
                         x2={x}
                         y2={y(val)}
                         stroke={colors[si]}
-                        strokeWidth={2.5}
-                        strokeDasharray={si === 0 ? '6,4' : '0'}
+                        strokeWidth={3}
+                        strokeDasharray={si === 0 ? "6,4" : "0"}
                       />
                     )}
-                    <Circle cx={x} cy={y(val)} r={5} fill={colors[si]} />
-                    <SvgText x={x} y={y(val) - 10} fontSize="10" textAnchor="middle" fill="#333">
+                    <Circle cx={x} cy={y(val)} r={6} fill={colors[si]} stroke="#fff" strokeWidth={2} />
+                    <SvgText x={x} y={y(val) - 12} fontSize="11" textAnchor="middle" fill="#333" fontWeight="700">
                       {formatNumber(val)}
                     </SvgText>
                   </React.Fragment>
@@ -81,18 +79,17 @@ const SvgLineChartCompact = ({ data }) => {
               })
             )}
 
-            {/* X Labels */}
             {data.labels.map((label, i) => {
-              const x = paddingLeft + i * (totalPoints === 1 ? graphWidth / 2 - paddingLeft : xStep);
+              const x = paddingLeft + i * xStep + (totalPoints === 1 ? graphWidth / 2 - paddingLeft - xStep / 2 : 0);
               return (
                 <SvgText
                   key={i}
                   x={x}
-                  y={height - 15}
+                  y={height - 25}
                   fontSize="11"
                   textAnchor="middle"
                   fill="#555"
-                  transform={`rotate(-45 ${x} ${height - 15})`}
+                  transform={`rotate(-45 ${x} ${height - 25})`}
                 >
                   {label}
                 </SvgText>
@@ -103,27 +100,27 @@ const SvgLineChartCompact = ({ data }) => {
       </View>
 
       <View style={styles.legend}>
-        {data.series.map((s, i) => (
-          <Text key={i} style={{ color: colors[i], marginRight: 16 }}>
-            ● {s.name}
-          </Text>
-        ))}
+        <Text style={{ color: '#E07A3F', marginRight: 20 }}>● 2024 Kar USD</Text>
+        <Text style={{ color: '#4E79A7' }}>● 2025 Kar USD</Text>
       </View>
     </View>
   );
 };
 
-export default SvgLineChartCompact;
-
 const styles = StyleSheet.create({
-  container: { marginVertical: 6 },
-  title: {
-    fontWeight: '700',
-    marginBottom: 4,
-    fontSize: 13,
+  container: { padding: 10 },
+  title: { 
+    fontWeight: '700', 
+    fontSize: 14, 
+    textAlign: 'center', 
+    marginBottom: 10,
+    color: '#111'
   },
-  legend: {
-    flexDirection: 'row',
-    marginTop: 4,
+  legend: { 
+    flexDirection: 'row', 
+    justifyContent: 'center', 
+    marginTop: 12 
   },
 });
+
+export default SvgLineChartCompact;

package/src/screens/Report2AScreen.jsx

@@ -106,33 +106,24 @@ const Report2AScreen = ({ api, token, onBack }) => {
       </View>
 
       <ScrollView style={styles.content}>
-        {/* FULL SCREEN BUTTON */}
-        {/* <TouchableOpacity onPress={() => setFullscreen(true)} style={styles.fullScreenBtn}>
+        {/* FULL SCREEN BUTTON - SIMPLE TEXT */}
+        <TouchableOpacity
+          onPress={() => setFullscreen(true)}
+          style={styles.fullScreenBtn}
+        >
           <Text style={styles.fullScreenText}>⤢ Full Screen</Text>
-        </TouchableOpacity> */}
-         <TouchableOpacity
-                  onPress={() => setFullscreen(true)}
-                  style={{
-                    alignSelf: 'flex-end',
-                    marginBottom: 8,
-                    padding: 6,
-                  }}
-                >
-                  <Text style={{ fontWeight: '700' }}>⤢ Full Screen</Text>
-                </TouchableOpacity>
+        </TouchableOpacity>
 
         {/* TABLE */}
         <FrozenTableReport2A rows={filteredRows} />
 
-        {/* LINE CHART WITH TITLE */}
-        <View style={styles.chartWrapper}>
-          <Text style={styles.chartTitle}>AY BAZINDA KAR KARŞILAŞTIRMALARI</Text>
+        {/* LINE CHART */}
+        <View style={styles.chartContainer}>
           <SvgLineChartCompact data={filteredLine} />
         </View>
 
-        {/* BAR CHART WITH TITLE - ONLY ONE CARD */}
-        <View style={styles.chartWrapper}>
-          <Text style={styles.chartTitle}>AY BAZINDA KAR KARŞILAŞTIRMALARI</Text>
+        {/* BAR CHART */}
+        <View style={styles.chartContainer}>
           <SvgBarLineChartCompact data={filteredBar} />
         </View>
       </ScrollView>
@@ -198,36 +189,22 @@ const styles = StyleSheet.create({
 
   fullScreenBtn: {
     alignSelf: 'flex-end',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    backgroundColor: '#f0f0f0',
-    borderRadius: 8,
-    marginVertical: 12,
     marginRight: 12,
+    marginVertical: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
   },
-  fullScreenText: { fontSize: 16, color: '#000', fontWeight: '700' },
+  fullScreenText: { fontSize: 16, fontWeight: '700', color: '#000' },
 
-  content: { flex: 1, paddingHorizontal: 12 },
+  content: { flex: 1, padding: 12 },
 
-  chartWrapper: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginVertical: 12,
+  chartContainer: {
     borderWidth: 1,
     borderColor: '#ddd',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.08,
-    shadowRadius: 6,
-    elevation: 4,
-  },
-  chartTitle: {
-    fontSize: 16,
-    fontWeight: '700',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 16,
+    borderRadius: 10,
+    overflow: 'hidden',
+    marginVertical: 12,
+    backgroundColor: '#fff',
   },
 
   fullModal: { flex: 1, backgroundColor: '#fff' },
@@ -260,11 +237,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     borderRadius: 12,
     overflow: 'hidden',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.15,
-    shadowRadius: 10,
-    elevation: 8,
   },
   landscapeFit: {
     transform: [{ scale: 1.45 }],