diff --git a/typescript/frontend-marios2/src/content/dashboards/BatteryView/MainStatsSodioHome.tsx b/typescript/frontend-marios2/src/content/dashboards/BatteryView/MainStatsSodioHome.tsx index e08a436ef..d7dc19a4f 100644 --- a/typescript/frontend-marios2/src/content/dashboards/BatteryView/MainStatsSodioHome.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/BatteryView/MainStatsSodioHome.tsx @@ -151,22 +151,25 @@ function MainStatsSodioHome(props: MainStatsSodioHomeProps) { pathsToSearch.push('Node' + i); } + const total = pathsToSearch.length; let i = 0; pathsToSearch.forEach((devicePath) => { if ( Object.hasOwnProperty.call(chartData[category].data, devicePath) && chartData[category].data[devicePath].data.length != 0 ) { + // Spread color indices evenly across the palette for better contrast + const colorIndex = total <= 1 ? 0 : Math.round(i * 9 / (total - 1)); series.push({ ...chartData[category].data[devicePath], color: color === 'blue' - ? blueColors[i] + ? blueColors[colorIndex] : color === 'red' - ? redColors[i] + ? redColors[colorIndex] : color === 'green' - ? greenColors[i] - : orangeColors[i] + ? greenColors[colorIndex] + : orangeColors[colorIndex] }); } i++; diff --git a/typescript/frontend-marios2/src/interfaces/Chart.tsx b/typescript/frontend-marios2/src/interfaces/Chart.tsx index 754611b06..e41f0118c 100644 --- a/typescript/frontend-marios2/src/interfaces/Chart.tsx +++ b/typescript/frontend-marios2/src/interfaces/Chart.tsx @@ -226,7 +226,8 @@ export const transformInputToBatteryViewDataJson = async ( categories.forEach((category) => { pathsToSave.forEach((path) => { if (pathsToSave.indexOf(path) >= old_length) { - chartData[category].data[path] = { name: path, data: [] }; + const displayIndex = pathsToSave.indexOf(path); + chartData[category].data[path] = { name: 'Battery Cluster ' + (displayIndex + 1), data: [] }; } }); });