micord/ervu-business-metrics
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SUPPORT-9111: 1) Added custom tooltip 2) Fetch tooltip title from body lines

Browse source
This commit is contained in:
Artyom Hackimullin 2025-04-16 10:01:08 +03:00
parent 18ac7eb53d
commit 3fd51d723d
2 changed files with 29 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartTooltip.ts
View file

@ -39,11 +39,9 @@ export class ErvuChartTooltip implements OnChanges {
public refreshContent() { public refreshContent() {
const tooltipModel: TooltipModel<any> = this.tooltipModel; const tooltipModel: TooltipModel<any> = this.tooltipModel;
const titleLines: string[] = tooltipModel.title || [];
const bodyLines: any = tooltipModel.body.map((bodyItem) => bodyItem.lines); const bodyLines: any = tooltipModel.body.map((bodyItem) => bodyItem.lines);
this.items = bodyLines.map((body, i) => ({ this.items = bodyLines.map((body, i) => ({
title: titleLines[i] || '',
body: body, body: body,
color: this.tooltipModel.labelColors[i].backgroundColor color: this.tooltipModel.labelColors[i].backgroundColor
})); }));

59
frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts
View file

@ -224,7 +224,25 @@ export class ErvuChartV2 extends Control implements Filterable {
chartOptions.plugins = chartOptions.plugins ? chartOptions.plugins : {}; chartOptions.plugins = chartOptions.plugins ? chartOptions.plugins : {};
chartOptions.plugins.legend = this.legend ? this.legend : {}; chartOptions.plugins.legend = this.legend ? this.legend : {};
chartOptions.plugins.tooltip = this.getTooltipConfiguration(); chartOptions.plugins.tooltip = {
enabled: false, //Disables default tooltip from charjs (we'll use a custom tooltip)
external: (context) => {
if (this.showTooltip) {
if (!context || !this.chartTooltip) {
return;
}
const positionX = this.chart.canvas.offsetLeft;
const positionY = this.chart.canvas.offsetTop;
this.tooltipModel = context.tooltip;
this.tooltipPosition = {
'left': positionX + context.tooltip.caretX,
'top': positionY + context.tooltip.caretY
}
this.cd.markForCheck();
}
}
};
if (this.title && this.title.text) { if (this.title && this.title.text) {
chartOptions.plugins.title = this.title; chartOptions.plugins.title = this.title;
@ -313,6 +331,16 @@ export class ErvuChartV2 extends Control implements Filterable {
} }
} }
chartConfig.options.plugins.tooltip.callbacks = {
label: function (tooltipItem) {
console.log(tooltipItem);
const dataset = tooltipItem.dataset;
if (dataset.type == 'bar' || dataset.type == 'line') {
return dataset.label + ' : ' + dataset.data[tooltipItem.dataIndex].x.toLocaleString();
}
return tooltipItem.label + ' : ' + dataset.data[tooltipItem.dataIndex].toLocaleString();
}
};
this.chartConfig = chartConfig; this.chartConfig = chartConfig;
} }
@ -392,12 +420,6 @@ export class ErvuChartV2 extends Control implements Filterable {
}) })
} }
}); });
options.plugins.tooltip.callbacks = {
title: function (tooltipItems) {
return tooltipItems.length > 0 ? tooltipItems[0].dataset.stack : undefined;
}
}
} }
} }
@ -413,29 +435,6 @@ export class ErvuChartV2 extends Control implements Filterable {
this.chart = new ChartJs(canvasEl, jQuery.extend(true, chartConfig, chartData)); this.chart = new ChartJs(canvasEl, jQuery.extend(true, chartConfig, chartData));
} }
//General config tooltip.
private getTooltipConfiguration() {
return {
enabled: false,
external: (context) => {
if (this.showTooltip) {
if (!context || !this.chartTooltip) {
return;
}
const positionX = this.chart.canvas.offsetLeft;
const positionY = this.chart.canvas.offsetTop;
this.tooltipModel = context.tooltip;
this.tooltipPosition = {
'left': positionX + context.tooltip.caretX,
'top': positionY + context.tooltip.caretY
}
this.cd.markForCheck();
}
}
};
}
clear() { //todo SUPPORT-4909 clear() { //todo SUPPORT-4909
throw new UnsupportedOperationError("Unsupported operation"); throw new UnsupportedOperationError("Unsupported operation");
} }