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() {
const tooltipModel: TooltipModel<any> = this.tooltipModel;
const titleLines: string[] = tooltipModel.title || [];
const bodyLines: any = tooltipModel.body.map((bodyItem) => bodyItem.lines);
this.items = bodyLines.map((body, i) => ({
title: titleLines[i] || '',
body: body,
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.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) {
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;
}
@ -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));
}
//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
throw new UnsupportedOperationError("Unsupported operation");
}