@dhiraj0720/report1chart 3.0.6 → 3.0.7

package/package.json

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

package/src/components/CompactAxisBarLineChart.jsx

@@ -0,0 +1,320 @@
+import React, { useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import Svg, {
+  Circle,
+  Line,
+  Rect,
+  Text as SvgText,
+} from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
+
+const DEFAULT_COLORS = ['#F29F45', '#2E7DD1', '#8AB6E8'];
+
+const toNumber = (value) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+};
+
+const compactAmount = (value) => {
+  const num = toNumber(value);
+  if (Math.abs(num) >= 1000000000) return `${(num / 1000000000).toFixed(1)}B`;
+  if (Math.abs(num) >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+  if (Math.abs(num) >= 1000) return `${(num / 1000).toFixed(1)}K`;
+  return `${num}`;
+};
+
+const makeTicks = (maxValue, count = 3) => {
+  if (count < 2) return [maxValue];
+  return Array.from({ length: count }, (_, index) => {
+    const ratio = (count - 1 - index) / (count - 1);
+    return maxValue * ratio;
+  });
+};
+
+const CompactAxisBarLineChart = ({
+  data,
+  title,
+  legend,
+  height = 220,
+  minGraphWidth = 360,
+  groupSpacing = 86,
+}) => {
+  const labels = data?.labels || [];
+  const series = data?.series || [];
+
+  if (!labels.length || series.length < 2) return null;
+
+  const barSeriesA = series[0]?.data || [];
+  const barSeriesB = series[1]?.data || [];
+  const lineSeries = series[2]?.data || [];
+
+  const {
+    graphWidth,
+    ticks,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    chartHeight,
+    maxValue,
+    barWidth,
+    barGap,
+  } = useMemo(() => {
+    const allValues = [...barSeriesA, ...barSeriesB, ...lineSeries].map(toNumber);
+    const peak = Math.max(1, ...allValues);
+    const computedPaddingLeft = 8;
+    const computedPaddingRight = 10;
+    const computedPaddingTop = 14;
+    const computedPaddingBottom = 42;
+    const computedChartHeight = height - computedPaddingTop - computedPaddingBottom;
+    const computedGraphWidth = Math.max(minGraphWidth, labels.length * groupSpacing);
+
+    return {
+      graphWidth: computedGraphWidth,
+      ticks: makeTicks(peak, 3),
+      paddingLeft: computedPaddingLeft,
+      paddingRight: computedPaddingRight,
+      paddingTop: computedPaddingTop,
+      chartHeight: computedChartHeight,
+      maxValue: peak,
+      barWidth: 18,
+      barGap: 8,
+    };
+  }, [barSeriesA, barSeriesB, groupSpacing, height, labels.length, lineSeries, minGraphWidth]);
+
+  const toY = (value) => {
+    return paddingTop + ((maxValue - toNumber(value)) / Math.max(1, maxValue)) * chartHeight;
+  };
+
+  const groupCenterX = (index) => {
+    const usableWidth = graphWidth - paddingLeft - paddingRight;
+    const step = labels.length > 1 ? usableWidth / (labels.length - 1) : usableWidth / 2;
+    if (labels.length <= 1) return graphWidth / 2;
+    return paddingLeft + index * step;
+  };
+
+  const legendItems = legend || [
+    { label: series[0]?.name || '2024', color: DEFAULT_COLORS[0] },
+    { label: series[1]?.name || '2025', color: DEFAULT_COLORS[1] },
+    ...(series[2] ? [{ label: series[2]?.name || 'Budget', color: DEFAULT_COLORS[2] }] : []),
+  ];
+
+  return (
+    <View style={styles.card}>
+      {title ? <Text style={styles.title}>{title}</Text> : null}
+
+      <View style={styles.chartRow}>
+        <Svg width={50} height={height}>
+          {ticks.map((tick) => (
+            <SvgText
+              key={`tick-${tick}`}
+              x={46}
+              y={toY(tick) + 4}
+              fontSize="10"
+              fill="#506178"
+              textAnchor="end"
+            >
+              {compactAmount(Math.round(tick))}
+            </SvgText>
+          ))}
+        </Svg>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <Svg width={graphWidth} height={height}>
+            {ticks.map((tick) => (
+              <Line
+                key={`grid-${tick}`}
+                x1={paddingLeft}
+                x2={graphWidth - paddingRight}
+                y1={toY(tick)}
+                y2={toY(tick)}
+                stroke="#e5ecf5"
+                strokeWidth={1}
+                strokeDasharray="4 5"
+              />
+            ))}
+
+            {labels.map((label, index) => {
+              const cx = groupCenterX(index);
+              const valueA = toNumber(barSeriesA[index]);
+              const valueB = toNumber(barSeriesB[index]);
+              const valueLine = toNumber(lineSeries[index]);
+
+              const yA = toY(valueA);
+              const yB = toY(valueB);
+              const heightA = Math.max(4, paddingTop + chartHeight - yA);
+              const heightB = Math.max(4, paddingTop + chartHeight - yB);
+
+              const xBarA = cx - barWidth - barGap / 2;
+              const xBarB = cx + barGap / 2;
+              const showInsideA = heightA > 40;
+              const showInsideB = heightB > 40;
+
+              return (
+                <React.Fragment key={`group-${label}-${index}`}>
+                  <Rect
+                    x={xBarA}
+                    y={yA}
+                    width={barWidth}
+                    height={heightA}
+                    rx={4}
+                    fill={DEFAULT_COLORS[0]}
+                  />
+                  {showInsideA ? (
+                    <SvgText
+                      x={xBarA + barWidth / 2}
+                      y={yA + heightA / 2}
+                      fill="#fff"
+                      fontSize="8"
+                      fontWeight="700"
+                      textAnchor="middle"
+                      transform={`rotate(-90 ${xBarA + barWidth / 2} ${yA + heightA / 2})`}
+                    >
+                      {formatNumber(valueA)}
+                    </SvgText>
+                  ) : (
+                    <SvgText
+                      x={xBarA + barWidth / 2}
+                      y={yA - 4}
+                      fill="#4f6076"
+                      fontSize="8"
+                      fontWeight="700"
+                      textAnchor="middle"
+                    >
+                      {compactAmount(valueA)}
+                    </SvgText>
+                  )}
+
+                  <Rect
+                    x={xBarB}
+                    y={yB}
+                    width={barWidth}
+                    height={heightB}
+                    rx={4}
+                    fill={DEFAULT_COLORS[1]}
+                  />
+                  {showInsideB ? (
+                    <SvgText
+                      x={xBarB + barWidth / 2}
+                      y={yB + heightB / 2}
+                      fill="#fff"
+                      fontSize="8"
+                      fontWeight="700"
+                      textAnchor="middle"
+                      transform={`rotate(-90 ${xBarB + barWidth / 2} ${yB + heightB / 2})`}
+                    >
+                      {formatNumber(valueB)}
+                    </SvgText>
+                  ) : (
+                    <SvgText
+                      x={xBarB + barWidth / 2}
+                      y={yB - 4}
+                      fill="#4f6076"
+                      fontSize="8"
+                      fontWeight="700"
+                      textAnchor="middle"
+                    >
+                      {compactAmount(valueB)}
+                    </SvgText>
+                  )}
+
+                  {index > 0 && lineSeries.length > 0 ? (
+                    <Line
+                      x1={groupCenterX(index - 1)}
+                      y1={toY(lineSeries[index - 1])}
+                      x2={cx}
+                      y2={toY(valueLine)}
+                      stroke={DEFAULT_COLORS[2]}
+                      strokeWidth={2}
+                      strokeDasharray="6 4"
+                    />
+                  ) : null}
+
+                  {lineSeries.length > 0 ? (
+                    <>
+                      <Circle cx={cx} cy={toY(valueLine)} r={4.6} fill={DEFAULT_COLORS[2]} />
+                      <SvgText
+                        x={cx}
+                        y={toY(valueLine) - 8}
+                        fill="#223247"
+                        fontSize="9"
+                        fontWeight="700"
+                        textAnchor="middle"
+                      >
+                        {compactAmount(valueLine)}
+                      </SvgText>
+                    </>
+                  ) : null}
+
+                  <SvgText
+                    x={cx}
+                    y={height - 14}
+                    fontSize="10"
+                    fill="#4f6076"
+                    textAnchor="middle"
+                    transform={`rotate(-35 ${cx} ${height - 14})`}
+                  >
+                    {label}
+                  </SvgText>
+                </React.Fragment>
+              );
+            })}
+          </Svg>
+        </ScrollView>
+      </View>
+
+      <View style={styles.legendRow}>
+        {legendItems.map((item) => (
+          <View key={`legend-${item.label}`} style={styles.legendItem}>
+            <View style={[styles.legendDot, { backgroundColor: item.color }]} />
+            <Text style={styles.legendLabel}>{item.label}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#d4deed',
+    borderRadius: 14,
+    padding: 10,
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: '800',
+    color: '#1c2f47',
+    marginBottom: 8,
+  },
+  chartRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  legendRow: {
+    marginTop: 8,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  legendItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 14,
+    marginBottom: 4,
+  },
+  legendDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 6,
+  },
+  legendLabel: {
+    fontSize: 11,
+    color: '#4f6076',
+    fontWeight: '600',
+  },
+});
+
+export default CompactAxisBarLineChart;

package/src/components/CompactAxisLineChart.jsx

@@ -0,0 +1,238 @@
+import React, { useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle, Line, Polyline, Text as SvgText } from 'react-native-svg';
+import { formatNumber } from '../utils/formatNumber';
+
+const DEFAULT_COLORS = ['#F29F45', '#2E7DD1', '#2A9D8F', '#C96C5A'];
+
+const toNumber = (value) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+};
+
+const makeTicks = (minValue, maxValue, count = 3) => {
+  if (count < 2) return [maxValue];
+  const diff = maxValue - minValue;
+  if (diff === 0) return [maxValue, maxValue, maxValue];
+
+  return Array.from({ length: count }, (_, index) => {
+    const ratio = index / (count - 1);
+    return maxValue - diff * ratio;
+  });
+};
+
+const CompactAxisLineChart = ({
+  data,
+  title,
+  legend,
+  height = 210,
+  minGraphWidth = 340,
+  pointSpacing = 72,
+}) => {
+  const labels = data?.labels || [];
+  const series = data?.series || [];
+
+  const hasData = labels.length > 0 && series.length > 0;
+  if (!hasData) return null;
+
+  const {
+    yMin,
+    yMax,
+    graphWidth,
+    ticks,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    chartHeight,
+    xStep,
+  } = useMemo(() => {
+    const allValues = series.flatMap((item) => (item?.data || []).map(toNumber));
+    const minValue = Math.min(...allValues);
+    const maxValue = Math.max(...allValues);
+    const pad = Math.max(1, (maxValue - minValue) * 0.16);
+    const adjustedMin = minValue - pad;
+    const adjustedMax = maxValue + pad;
+
+    const computedPaddingLeft = 8;
+    const computedPaddingRight = 12;
+    const computedPaddingTop = 16;
+    const computedPaddingBottom = 38;
+    const computedChartHeight = height - computedPaddingTop - computedPaddingBottom;
+    const computedGraphWidth = Math.max(minGraphWidth, labels.length * pointSpacing);
+    const computedXStep =
+      labels.length > 1
+        ? (computedGraphWidth - computedPaddingLeft - computedPaddingRight) / (labels.length - 1)
+        : 0;
+
+    return {
+      yMin: adjustedMin,
+      yMax: adjustedMax,
+      graphWidth: computedGraphWidth,
+      ticks: makeTicks(adjustedMin, adjustedMax, 3),
+      paddingLeft: computedPaddingLeft,
+      paddingRight: computedPaddingRight,
+      paddingTop: computedPaddingTop,
+      chartHeight: computedChartHeight,
+      xStep: computedXStep,
+    };
+  }, [height, labels.length, minGraphWidth, pointSpacing, series]);
+
+  const toY = (value) => {
+    return paddingTop + ((yMax - toNumber(value)) / Math.max(1, yMax - yMin)) * chartHeight;
+  };
+
+  const toX = (index) => {
+    if (labels.length <= 1) {
+      return graphWidth / 2;
+    }
+    return paddingLeft + index * xStep;
+  };
+
+  const legendItems = legend || series.map((item, index) => ({
+    label: item?.name || `Series ${index + 1}`,
+    color: DEFAULT_COLORS[index % DEFAULT_COLORS.length],
+  }));
+
+  return (
+    <View style={styles.card}>
+      {title ? <Text style={styles.title}>{title}</Text> : null}
+      <View style={styles.chartRow}>
+        <Svg width={48} height={height}>
+          {ticks.map((tick) => (
+            <SvgText
+              key={`tick-${tick}`}
+              x={44}
+              y={toY(tick) + 4}
+              fontSize="10"
+              fill="#506178"
+              textAnchor="end"
+            >
+              {formatNumber(Math.round(tick))}
+            </SvgText>
+          ))}
+        </Svg>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <Svg width={graphWidth} height={height}>
+            {ticks.map((tick) => (
+              <Line
+                key={`grid-${tick}`}
+                x1={paddingLeft}
+                x2={graphWidth - paddingRight}
+                y1={toY(tick)}
+                y2={toY(tick)}
+                stroke="#e5ecf5"
+                strokeWidth={1}
+                strokeDasharray="4 5"
+              />
+            ))}
+
+            {series.map((item, seriesIndex) => {
+              const color = legendItems[seriesIndex]?.color || DEFAULT_COLORS[seriesIndex % DEFAULT_COLORS.length];
+              const points = (item?.data || [])
+                .map((value, index) => `${toX(index)},${toY(value)}`)
+                .join(' ');
+
+              return (
+                <React.Fragment key={`series-${item?.name || seriesIndex}`}>
+                  <Polyline
+                    points={points}
+                    fill="none"
+                    stroke={color}
+                    strokeWidth={3}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeDasharray={seriesIndex === 0 ? '7 6' : undefined}
+                  />
+                  {(item?.data || []).map((value, index) => (
+                    <React.Fragment key={`point-${seriesIndex}-${index}`}>
+                      <Circle cx={toX(index)} cy={toY(value)} r={4.8} fill={color} />
+                      <SvgText
+                        x={toX(index)}
+                        y={toY(value) - 8}
+                        fontSize="9"
+                        fontWeight="700"
+                        fill="#223247"
+                        textAnchor="middle"
+                      >
+                        {formatNumber(toNumber(value))}
+                      </SvgText>
+                    </React.Fragment>
+                  ))}
+                </React.Fragment>
+              );
+            })}
+
+            {labels.map((label, index) => (
+              <SvgText
+                key={`x-${label}-${index}`}
+                x={toX(index)}
+                y={height - 14}
+                fontSize="10"
+                fill="#4f6076"
+                textAnchor="middle"
+                transform={`rotate(-35 ${toX(index)} ${height - 14})`}
+              >
+                {label}
+              </SvgText>
+            ))}
+          </Svg>
+        </ScrollView>
+      </View>
+
+      <View style={styles.legendRow}>
+        {legendItems.map((item) => (
+          <View key={`legend-${item.label}`} style={styles.legendItem}>
+            <View style={[styles.legendDot, { backgroundColor: item.color }]} />
+            <Text style={styles.legendLabel}>{item.label}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#d4deed',
+    borderRadius: 14,
+    padding: 10,
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: '800',
+    color: '#1c2f47',
+    marginBottom: 8,
+  },
+  chartRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  legendRow: {
+    marginTop: 8,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  legendItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 14,
+    marginBottom: 4,
+  },
+  legendDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 6,
+  },
+  legendLabel: {
+    fontSize: 11,
+    color: '#4f6076',
+    fontWeight: '600',
+  },
+});
+
+export default CompactAxisLineChart;

package/src/index.jsx

@@ -3,6 +3,7 @@ import { View, ActivityIndicator } from 'react-native';
 import SafeScreen from './components/SafeScreen';
 import ReportListScreen from './screens/ReportListScreen';
 import Report1Screen from './screens/Report1Screen';
+import Report1ModernScreen from './screens/Report1ModernScreen';
 import Report2Screen from './screens/Report2Screen';
 import Report2ModernScreen from './screens/Report2ModernScreen';
 import Report3Screen from './screens/Report3Screen';
@@ -63,7 +64,7 @@ const AnalyticsReports = ({ config, onExit }) => {
     );
   }
 
-  if (active === '1A') {
+if (active === '1A') {
   return (
     <SafeScreen>
       <Report1AScreen
@@ -75,6 +76,18 @@ const AnalyticsReports = ({ config, onExit }) => {
   );
 }
 
+if (active === '1N1') {
+  return (
+    <SafeScreen>
+      <Report1ModernScreen
+        endpoint={config.report1.url}
+        token={config.token}
+        onBack={() => setActive(null)}
+      />
+    </SafeScreen>
+  );
+}
+
 if (active === '2A') {
   return (
     <SafeScreen>