From 9098e3a2c8f6b9eb12289063e3fb1408e497cf4b Mon Sep 17 00:00:00 2001 From: Neeraj-Kondaveeti Date: Wed, 27 May 2026 18:22:12 -0400 Subject: [PATCH 1/4] Fix Demand across Villages graph rendering issue --- .../LBDashboard/BarGraphs/CompareGraphs.jsx | 154 ++++++++++-------- src/components/LBDashboard/LBDashboard.jsx | 10 +- 2 files changed, 91 insertions(+), 73 deletions(-) diff --git a/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx b/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx index 3c8453582f..3cf24c7be0 100644 --- a/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx +++ b/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx @@ -116,7 +116,6 @@ export function CompareBarGraph({ height = 420, yCategoryWidth = 70, margins = { top: 16, right: 20, bottom: 46, left: 0 }, - maxBars, showYAxisTitle = true, yTickFormatter, darkMode = false, @@ -165,75 +164,95 @@ export function CompareBarGraph({ {/* chart */} -
- - + {!data?.length ? ( +
- - {isHorizontal - ? (() => { - const axes = getHorizontalAxes({ - xDomain, - xTicks, - valueFormatter, - tickColor, - xLabel, - nameKey, - yCategoryWidth, - yTickFormatter, - showYAxisTitle, - yLabel, - }); - return ( - <> - {axes.xAxis} - {axes.yAxis} - - ); - })() - : (() => { - const axes = getVerticalAxes( - nameKey, - tickColor, - xLabel, - yDomain, - yTicks, - valueFormatter, - yLabel, - ); - return ( - <> - {axes.xAxis} - {axes.yAxis} - - ); - })()} + No data available +
+ ) : ( + + + + {isHorizontal + ? (() => { + const axes = getHorizontalAxes({ + xDomain, + xTicks, + valueFormatter, + tickColor, + xLabel, + nameKey, + yCategoryWidth, + yTickFormatter, + showYAxisTitle, + yLabel, + }); + return ( + <> + {axes.xAxis} + {axes.yAxis} + + ); + })() + : (() => { + const axes = getVerticalAxes( + nameKey, + tickColor, + xLabel, + yDomain, + yTicks, + valueFormatter, + yLabel, + ); + return ( + <> + {axes.xAxis} + {axes.yAxis} + + ); + })()} - [valueFormatter(v), tooltipLabel || metricLabel || title]} - labelFormatter={lbl => `${lbl}`} - contentStyle={{ - background: darkMode ? '#1c2541' : '#fff', - border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`, - color: darkMode ? '#e1e1e1' : '#333', - }} - itemStyle={{ color: darkMode ? '#e1e1e1' : '#333' }} - labelStyle={{ color: darkMode ? '#e1e1e1' : '#333', fontWeight: 600 }} - /> - - [valueFormatter(v), tooltipLabel || metricLabel || title]} + labelFormatter={lbl => `${lbl}`} + contentStyle={{ + background: darkMode ? '#1c2541' : '#fff', + border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`, + color: darkMode ? '#e1e1e1' : '#333', + }} + itemStyle={{ color: darkMode ? '#e1e1e1' : '#333' }} + labelStyle={{ color: darkMode ? '#e1e1e1' : '#333', fontWeight: 600 }} /> - - - + + + + + + )}
@@ -272,7 +291,6 @@ CompareBarGraph.propTypes = { bottom: PropTypes.number, left: PropTypes.number, }), - maxBars: PropTypes.number, showYAxisTitle: PropTypes.bool, yTickFormatter: PropTypes.func, darkMode: PropTypes.bool, diff --git a/src/components/LBDashboard/LBDashboard.jsx b/src/components/LBDashboard/LBDashboard.jsx index 4c1b5c8f85..7d30af966a 100644 --- a/src/components/LBDashboard/LBDashboard.jsx +++ b/src/components/LBDashboard/LBDashboard.jsx @@ -603,8 +603,8 @@ export function LBDashboard() { {compareType === 'villages' && ( - - + + - + {loadingVillages && (
Loading villages… @@ -636,10 +636,10 @@ export function LBDashboard() { showYAxisTitle={true} yTickFormatter={stripVillageWord} yCategoryWidth={120} - margins={{ top: 60, right: 110, bottom: 50, left: 20 }} + margins={{ top: 40, right: 40, bottom: 50, left: 40 }} barSize={24} maxBars={6} - height={480} + height={420} valueFormatter={valueFormatter} darkMode={darkMode} headerChips={[ From bbecfb15ef53da7ebbbbef13af48a23488ea3c3c Mon Sep 17 00:00:00 2001 From: Neeraj-Kondaveeti Date: Sat, 13 Jun 2026 14:41:29 -0400 Subject: [PATCH 2/4] Refactor compare graph to resolve quality gate issues --- .../LBDashboard/BarGraphs/CompareGraphs.jsx | 91 ++++++++----------- 1 file changed, 40 insertions(+), 51 deletions(-) diff --git a/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx b/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx index 3cf24c7be0..edbe2d40ae 100644 --- a/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx +++ b/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx @@ -124,6 +124,31 @@ export function CompareBarGraph({ const tickColor = darkMode ? '#e1e1e1' : '#444'; const gridColor = darkMode ? '#3a506b' : '#e0e0e0'; + const horizontalAxes = getHorizontalAxes({ + xDomain, + xTicks, + valueFormatter, + tickColor, + xLabel, + nameKey, + yCategoryWidth, + yTickFormatter, + showYAxisTitle, + yLabel, + }); + + const verticalAxes = getVerticalAxes( + nameKey, + tickColor, + xLabel, + yDomain, + yTicks, + valueFormatter, + yLabel, + ); + + const renderedAxes = isHorizontal ? horizontalAxes : verticalAxes; + return ( - {!data?.length ? ( -
- No data available -
- ) : ( + {data?.length ? ( - {isHorizontal - ? (() => { - const axes = getHorizontalAxes({ - xDomain, - xTicks, - valueFormatter, - tickColor, - xLabel, - nameKey, - yCategoryWidth, - yTickFormatter, - showYAxisTitle, - yLabel, - }); - return ( - <> - {axes.xAxis} - {axes.yAxis} - - ); - })() - : (() => { - const axes = getVerticalAxes( - nameKey, - tickColor, - xLabel, - yDomain, - yTicks, - valueFormatter, - yLabel, - ); - return ( - <> - {axes.xAxis} - {axes.yAxis} - - ); - })()} + {renderedAxes.xAxis} + {renderedAxes.yAxis} [valueFormatter(v), tooltipLabel || metricLabel || title]} @@ -252,6 +229,18 @@ export function CompareBarGraph({ + ) : ( +
+ No data available +
)}
From 1bbd1bded69d8d3f77b4e5328349cc9240d0b709 Mon Sep 17 00:00:00 2001 From: Neeraj-Kondaveeti Date: Sat, 13 Jun 2026 17:02:17 -0400 Subject: [PATCH 3/4] Fix: code for quality gate issue --- .../LBDashboard/BarGraphs/CompareGraphs.jsx | 298 ++++++++++++------ 1 file changed, 198 insertions(+), 100 deletions(-) diff --git a/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx b/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx index edbe2d40ae..3e5f1db61a 100644 --- a/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx +++ b/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx @@ -94,6 +94,126 @@ const getVerticalAxes = (nameKey, tickColor, xLabel, yDomain, yTicks, valueForma ), }); +const getChartAxes = ({ + isHorizontal, + tickColor, + valueFormatter, + nameKey, + xLabel, + yLabel, + ...props +}) => + isHorizontal + ? getHorizontalAxes({ + xDomain: props.xDomain, + xTicks: props.xTicks, + valueFormatter, + tickColor, + xLabel, + nameKey, + yCategoryWidth: props.yCategoryWidth, + yTickFormatter: props.yTickFormatter, + showYAxisTitle: props.showYAxisTitle, + yLabel, + }) + : getVerticalAxes( + nameKey, + tickColor, + xLabel, + props.yDomain, + props.yTicks, + valueFormatter, + yLabel, + ); + +const GraphHeader = ({ title, metricLabel, showMetricPill, headerChips, darkMode }) => ( +
+ {title} + {showMetricPill && ( + + {metricLabel} + + )} + +
+ {headerChips.map((chip, index) => ( +
+
+ {chip.label} +
+
+ {String(chip.value).toUpperCase()} +
+
+ ))} +
+
+); + +const NoDataMessage = ({ height, darkMode }) => ( +
+ No data available +
+); + +const CompareChart = ({ + data, + height, + isHorizontal, + margins, + gridColor, + axes, + valueKey, + barColor, + barSize, + valueFormatter, + tooltipLabel, + metricLabel, + title, + darkMode, +}) => ( + + + + {axes.xAxis} + {axes.yAxis} + + [valueFormatter(value), tooltipLabel || metricLabel || title]} + labelFormatter={label => `${label}`} + contentStyle={{ + background: darkMode ? '#1c2541' : '#fff', + border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`, + color: darkMode ? '#e1e1e1' : '#333', + }} + itemStyle={{ color: darkMode ? '#e1e1e1' : '#333' }} + labelStyle={{ color: darkMode ? '#e1e1e1' : '#333', fontWeight: 600 }} + /> + + + + + + +); + export function CompareBarGraph({ title, metricLabel, @@ -106,7 +226,7 @@ export function CompareBarGraph({ xLabel, yLabel, barColor = '#3b82f6', - valueFormatter = v => v, + valueFormatter = value => value, headerChips = [], xDomain, yDomain, @@ -124,31 +244,22 @@ export function CompareBarGraph({ const tickColor = darkMode ? '#e1e1e1' : '#444'; const gridColor = darkMode ? '#3a506b' : '#e0e0e0'; - const horizontalAxes = getHorizontalAxes({ - xDomain, - xTicks, - valueFormatter, + const axes = getChartAxes({ + isHorizontal, tickColor, - xLabel, + valueFormatter, nameKey, + xLabel, + yLabel, + xDomain, + yDomain, + xTicks, + yTicks, yCategoryWidth, yTickFormatter, showYAxisTitle, - yLabel, }); - const verticalAxes = getVerticalAxes( - nameKey, - tickColor, - xLabel, - yDomain, - yTicks, - valueFormatter, - yLabel, - ); - - const renderedAxes = isHorizontal ? horizontalAxes : verticalAxes; - return ( - {/* Title row + chips */} -
- {title} - {showMetricPill && ( - - {metricLabel} - - )} - - {/* chips on the right */} -
- {headerChips.map((c, i) => ( -
-
- {c.label} -
-
- {String(c.value).toUpperCase()} -
-
- ))} -
-
+ - {/* chart */} -
+
{data?.length ? ( - - - - {renderedAxes.xAxis} - {renderedAxes.yAxis} - - [valueFormatter(v), tooltipLabel || metricLabel || title]} - labelFormatter={lbl => `${lbl}`} - contentStyle={{ - background: darkMode ? '#1c2541' : '#fff', - border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`, - color: darkMode ? '#e1e1e1' : '#333', - }} - itemStyle={{ color: darkMode ? '#e1e1e1' : '#333' }} - labelStyle={{ color: darkMode ? '#e1e1e1' : '#333', fontWeight: 600 }} - /> - - - - - + ) : ( -
- No data available -
+ )}
@@ -248,6 +303,49 @@ export function CompareBarGraph({ ); } +GraphHeader.propTypes = { + title: PropTypes.string.isRequired, + metricLabel: PropTypes.string, + showMetricPill: PropTypes.bool.isRequired, + headerChips: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string.isRequired, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + }), + ).isRequired, + darkMode: PropTypes.bool.isRequired, +}; + +NoDataMessage.propTypes = { + height: PropTypes.number.isRequired, + darkMode: PropTypes.bool.isRequired, +}; + +CompareChart.propTypes = { + data: PropTypes.arrayOf(PropTypes.object).isRequired, + height: PropTypes.number.isRequired, + isHorizontal: PropTypes.bool.isRequired, + margins: PropTypes.shape({ + top: PropTypes.number, + right: PropTypes.number, + bottom: PropTypes.number, + left: PropTypes.number, + }).isRequired, + gridColor: PropTypes.string.isRequired, + axes: PropTypes.shape({ + xAxis: PropTypes.node.isRequired, + yAxis: PropTypes.node.isRequired, + }).isRequired, + valueKey: PropTypes.string.isRequired, + barColor: PropTypes.string.isRequired, + barSize: PropTypes.number, + valueFormatter: PropTypes.func.isRequired, + tooltipLabel: PropTypes.string, + metricLabel: PropTypes.string, + title: PropTypes.string.isRequired, + darkMode: PropTypes.bool.isRequired, +}; + CompareBarGraph.propTypes = { title: PropTypes.string.isRequired, metricLabel: PropTypes.string, From d5d524cf4c450c338aa3eb452c573a4ffe2d3e0a Mon Sep 17 00:00:00 2001 From: Neeraj-Kondaveeti Date: Sat, 13 Jun 2026 17:10:37 -0400 Subject: [PATCH 4/4] Fix: quality gate flagged issue on line 143 --- src/components/LBDashboard/BarGraphs/CompareGraphs.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx b/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx index 3e5f1db61a..cd6ef111d7 100644 --- a/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx +++ b/src/components/LBDashboard/BarGraphs/CompareGraphs.jsx @@ -140,7 +140,7 @@ const GraphHeader = ({ title, metricLabel, showMetricPill, headerChips, darkMode
{headerChips.map((chip, index) => ( -
+
{chip.label}