Merge pull request #5126 from OneCommunityGlobal/veda-lbdashboard-fix

Veda - LBDashboard fix

Author: one-community

src/components/LBDashboard/LBDashboard.jsx

@@ -305,12 +305,17 @@ export function LBDashboard() {
     };
   }, []);
 
-  const dateRange = [
-    moment()
-      .subtract(1, 'year')
-      .startOf('month'),
-    moment().endOf('month'),
-  ];
+  // Stable reference so opening metric dropdowns does not retrigger DemandOverTime's effect
+  // (which would regenerate random series and make the line charts appear to "jump").
+  const dateRange = useMemo(
+    () => [
+      moment()
+        .subtract(1, 'year')
+        .startOf('month'),
+      moment().endOf('month'),
+    ],
+    [],
+  );
 
   const getMetricLabel = () => {
     const all = Object.values(METRIC_OPTIONS).flat();

src/components/LBDashboard/LbAnalytics/DemandOverTime/DemandOverTime.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import styles from './DemandOverTime.module.css';
@@ -41,6 +41,11 @@ const DemandOverTime = ({
 }) => {
   const [data, setData] = useState([]);
 
+  const dateRangeBoundsKey = useMemo(() => {
+    if (!dateRange?.length || dateRange.length < 2) return '';
+    return `${moment(dateRange[0]).valueOf()}-${moment(dateRange[1]).valueOf()}`;
+  }, [dateRange]);
+
   useEffect(() => {
     const getItems = () => {
       return compareType === 'villages'
@@ -75,7 +80,8 @@ const DemandOverTime = ({
     };
 
     setTimeout(() => setData(generateDummyData()), 300);
-  }, [compareType, metric, dateRange]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- dateRange bounds are in dateRangeBoundsKey
+  }, [compareType, metric, dateRangeBoundsKey]);
 
   return (
     <div className={`${styles.container} ${darkMode ? styles.darkContainer : ''}`}>

src/utils/lbDashboard/chartsUtils.js

@@ -38,7 +38,7 @@ export function createChartOptions(metric, darkMode) {
       },
     },
     layout: {
-      padding: 20,
+      padding: { top: 36, right: 20, bottom: 20, left: 20 },
     },
     scales: {
       x: {
@@ -59,6 +59,8 @@ export function createChartOptions(metric, darkMode) {
           color: darkMode ? '#fff' : '#222',
         },
         beginAtZero: true,
+        // Room above the max point so datalabels (align: top) are not clipped at the chart edge
+        grace: '12%',
         ticks: { font: { size: 12 }, color: darkMode ? '#fff' : '#222' },
       },
     },