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 <[email protected]>
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 <[email protected]>
---
.../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: [email protected]
For additional commands, e-mail: [email protected]
