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

SUPPORT-9206: label for each dataset's data on doughnut and pie charts

Browse source
This commit is contained in:
Рауф Латыпов 2025-05-30 11:58:14 +03:00
parent ea4ce54498
commit 27379cd0df
3 changed files with 31 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -224,6 +224,7 @@ export class ErvuChartV2 extends Control implements Filterable {
chartOptions.plugins = chartOptions.plugins ? chartOptions.plugins : {};
chartOptions.plugins.legend = this.legend ? this.legend : {};
chartOptions.plugins.tooltip = {
enabled: false, //Disables default tooltip from charjs (we'll use a custom tooltip)
external: (context) => {
@ -245,12 +246,35 @@ export class ErvuChartV2 extends Control implements Filterable {
filter: tooltipItem => {
const type = tooltipItem.chart.config.type;
if (type == 'doughnut' || type == 'pie') {
const dataLabels = tooltipItem.chart.config.data.dataLabels;
if (dataLabels) {
const dataLabel = dataLabels[tooltipItem.datasetIndex][tooltipItem.dataIndex];
if (dataLabel) {
tooltipItem.label = dataLabel;
}
}
return tooltipItem.label.trim().length !== 0;
}
return tooltipItem.dataset.label.trim().length !== 0;
}
};
chartOptions.plugins.tooltip.callbacks = {
label: function (tooltipItem) {
const dataset = tooltipItem.dataset;
if (dataset.type == 'bar' || dataset.type == 'line') {
return dataset.label + ' : ' + dataset.data[tooltipItem.dataIndex].x.toLocaleString();
}
let dataLabel;
const dataLabels = tooltipItem.chart.config.data.dataLabels;
if (dataLabels) {
dataLabel = dataLabels[tooltipItem.datasetIndex][tooltipItem.dataIndex];
}
return dataLabel ? dataLabel : tooltipItem.label + ' : ' +
dataset.data[tooltipItem.dataIndex].toLocaleString();
}
};
if (this.title && this.title.text) {
chartOptions.plugins.title = this.title;
}
@ -338,15 +362,6 @@ export class ErvuChartV2 extends Control implements Filterable {
}
}
chartConfig.options.plugins.tooltip.callbacks = {
label: function (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;
}