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

4
backend/src/main/java/ervu_business_metrics/component/chart/RoundSingleChartDataSetService.java
View file

@ -93,6 +93,7 @@ public class RoundSingleChartDataSetService extends AbstractChartDatasetService
List<SingleChartDataSetDto> datasets = new ArrayList<>();
List<ChartLabelModel> centerLabelModels = new ArrayList<>();
List<Object> labels = new ArrayList<>();
List<List<Object>> dataLabels = new ArrayList<>();
for (Future<RoundChartDataSetDtoWrapper> future : dataSetFutures) {
RoundChartDataSetDtoWrapper chartDataSetDto = future.get();
@ -101,6 +102,7 @@ public class RoundSingleChartDataSetService extends AbstractChartDatasetService
datasets.add(chartDataSetDto.getRoundChartDataSetDto());
}
labels.addAll(chartDataSetDto.getLabels());
dataLabels.add(chartDataSetDto.getLabels());
}
executorService.shutdown();
@ -108,7 +110,7 @@ public class RoundSingleChartDataSetService extends AbstractChartDatasetService
centerLabelModels.add(future.get());
}
return new RoundChartDataDto(datasets, labels, centerLabelModels);
return new RoundChartDataDto(datasets, labels, centerLabelModels, dataLabels);
}
catch (InterruptedException | ExecutionException e) {
executorService.shutdownNow();

14
backend/src/main/java/ervu_business_metrics/model/chart/round/RoundChartDataDto.java
View file

@ -12,22 +12,16 @@ import ervu_business_metrics.model.chart.round.label.ChartLabelModel;
public class RoundChartDataDto extends SingleChartDataDto {
public List<ChartLabelModel> centerLabels;
public List<List<Object>> dataLabels;
public RoundChartDataDto(
List<SingleChartDataSetDto> datasets,
List<Object> labels,
List<ChartLabelModel> centerLabels
List<ChartLabelModel> centerLabels,
List<List<Object>> dataLabels
) {
super(datasets, labels);
this.centerLabels = centerLabels;
}
public List<ChartLabelModel> getCenterLabels() {
return centerLabels;
}
public void setCenterLabels(
List<ChartLabelModel> centerLabels) {
this.centerLabels = centerLabels;
this.dataLabels = dataLabels;
}
}

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;
}