This is an automated email from the ASF dual-hosted git repository. chia7712 pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/yunikorn-web.git
The following commit(s) were added to refs/heads/master by this push: new 1ff0f95 [YUNIKORN-2390] Improve mousehover result for node utilization chart (#166) 1ff0f95 is described below commit 1ff0f9595a34ecd2ab94607223497a54b529a974 Author: Yu-Lin Chen <kh87...@gmail.com> AuthorDate: Wed Feb 7 01:57:32 2024 +0800 [YUNIKORN-2390] Improve mousehover result for node utilization chart (#166) Closes: #166 Signed-off-by: Chia-Ping Tsai <chia7...@gmail.com> --- .../vertical-bar-chart.component.ts | 41 ++++++++++++---------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts index 8b507e9..5d78c15 100644 --- a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts +++ b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts @@ -106,17 +106,26 @@ export class VerticalBarChartComponent implements OnInit, AfterViewInit, OnChang onClick: (e) => { }, // disable legend click event onHover: (event, legendItem, legend) => { let datasetIndex = legendItem.datasetIndex - if (this.barChart != undefined && datasetIndex !== undefined) { - this.barChart.data.datasets[datasetIndex].backgroundColor = this.adjustOpacity(this.barChartDataSets[datasetIndex].backgroundColor, 0.5); + // Update the other datasets background color + if (this.barChart != undefined) { + this.barChart.data.datasets.forEach((dataset, i) => { + if (i != datasetIndex && this.barChart != undefined) { + this.barChart.data.datasets[i].backgroundColor = this.adjustOpacity(this.barChartDataSets[i].backgroundColor, 0.2); + } + }) } - this.barChart?.update("resize"); + this.barChart?.update("active"); }, onLeave: (event, legendItem, legend) => { - let datasetIndex = legendItem.datasetIndex - if (this.barChart != undefined && datasetIndex !== undefined) { - this.barChart.data.datasets[datasetIndex].backgroundColor = this.barChartDataSets[datasetIndex].backgroundColor; + // Reset datasets background color + if (this.barChart != undefined) { + this.barChart.data.datasets.forEach((dataset, i) => { + if (this.barChart != undefined) { + this.barChart.data.datasets[i].backgroundColor = this.barChartDataSets[i].backgroundColor; + } + }) } - this.barChart?.update("resize"); + this.barChart?.update("active"); }, }, title: { @@ -129,12 +138,6 @@ export class VerticalBarChartComponent implements OnInit, AfterViewInit, OnChang label: function (context) { return barChartDataSets[context.datasetIndex].label; }, - labelColor: function (context) { - return { - borderColor: barChartDataSets[context.datasetIndex].backgroundColor, - backgroundColor: barChartDataSets[context.datasetIndex].backgroundColor, - }; - }, footer: function (context) { // show bar description on tooltip footer let datasetIndex = context[0].datasetIndex; @@ -166,11 +169,13 @@ export class VerticalBarChartComponent implements OnInit, AfterViewInit, OnChang } }); }); - //Update the target dataset's background color + // Update the other datasets background color const datasetIndex = chartElement[0].datasetIndex; - if (this.barChart != undefined) { - this.barChart.data.datasets[datasetIndex].backgroundColor = this.adjustOpacity(this.barChartDataSets[datasetIndex].backgroundColor, 0.5); - } + this.barChart?.data.datasets?.forEach((dataset, i) => { + if (i != datasetIndex && this.barChart != undefined) { + this.barChart.data.datasets[i].backgroundColor = this.adjustOpacity(this.barChartDataSets[i].backgroundColor, 0.2); + } + }) } else { // Reset datasets background color this.barChart?.data.datasets?.forEach((dataset, i) => { @@ -181,7 +186,7 @@ export class VerticalBarChartComponent implements OnInit, AfterViewInit, OnChang }); }); } - this.barChart?.update("resize"); + this.barChart?.update("active"); } } }, --------------------------------------------------------------------- To unsubscribe, e-mail: issues-unsubscr...@yunikorn.apache.org For additional commands, e-mail: issues-h...@yunikorn.apache.org