From f4b3943fb2e7e16835193b48b94d32d9eb575ecf Mon Sep 17 00:00:00 2001 From: Aashish Sharma Date: Wed, 31 Jul 2024 17:21:02 +0530 Subject: [PATCH] mgr/dashboard: Dashboard not showing Object/Overview correctly. Add undefined checks wherever necessary to the updateChartData method in dashboard-area-chart component Fixes: https://tracker.ceph.com/issues/67009 Signed-off-by: Aashish Sharma --- .../dashboard-area-chart.component.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts index 8a267b4782aa8..8f61791f225e4 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts @@ -181,8 +181,8 @@ export class DashboardAreaChartComponent implements OnChanges { } private updateChartData(changes: SimpleChanges): void { - for (let index = 0; index < this.labelsArray.length; index++) { - const colorIndex = index % this.chartColors.length; + this.labelsArray.forEach((_label: string, index: number) => { + const colorIndex = index % this.chartColors?.length; this.chartData.dataset[index] = { label: '', data: [], @@ -196,14 +196,14 @@ export class DashboardAreaChartComponent implements OnChanges { } }; this.chartData.dataset[index].label = this.labelsArray[index]; - } + }); this.setChartTicks(); - if (this.dataArray && this.dataArray.length && this.dataArray[0] && this.dataArray[0].length) { + if (this.dataArray?.[0]?.length) { this.dataArray = changes?.dataArray?.currentValue || this.dataArray; this.currentChartData = this.chartData; - for (let index = 0; index < this.dataArray.length; index++) { + this.dataArray?.forEach((_data: Array<[number, string]>, index: number) => { this.chartData.dataset[index].data = this.formatData(this.dataArray[index]); let currentDataValue = this.dataArray?.[index]?.[this.dataArray[index]?.length - 1] ? this.dataArray[index][this.dataArray[index]?.length - 1][1] @@ -218,7 +218,7 @@ export class DashboardAreaChartComponent implements OnChanges { ).split(' '); this.currentChartData.dataset[index]['currentDataValue'] = currentDataValue; } - } + }); this.currentChartData.dataset.sort( (a: { currentDataValue: string }, b: { currentDataValue: string }) => parseFloat(b['currentDataValue']) - parseFloat(a['currentDataValue']) @@ -298,11 +298,11 @@ export class DashboardAreaChartComponent implements OnChanges { let maxValue = 0; let maxValueDataUnits = ''; - const allDataValues = this.dataArray.reduce((array: string[], data) => { + const allDataValues = this.dataArray?.reduce((array: string[], data) => { return array.concat(data?.map((values: [number, string]) => values[1])); }, []); - maxValue = Math.max(...allDataValues.map(Number)); + maxValue = allDataValues ? Math.max(...allDataValues.map(Number)) : 0; [maxValue, maxValueDataUnits] = this.convertUnits(maxValue).split(' '); const yAxesTicks = this.chart.chart.options.scales.y; -- 2.39.5