From 27379cd0df072e8cc9a4cde34061de3757538639 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=83=D1=84=20=D0=9B=D0=B0=D1=82=D1=8B=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <latypov@micord.ru>
Date: Fri, 30 May 2025 11:58:14 +0300
Subject: [PATCH] SUPPORT-9206: label for each dataset's data on doughnut and
 pie charts

---
 .../chart/RoundSingleChartDataSetService.java |  4 ++-
 .../model/chart/round/RoundChartDataDto.java  | 14 +++-----
 .../component/chart/ErvuChartV2.ts            | 33 ++++++++++++++-----
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/backend/src/main/java/ervu_business_metrics/component/chart/RoundSingleChartDataSetService.java b/backend/src/main/java/ervu_business_metrics/component/chart/RoundSingleChartDataSetService.java
index 3af0965..7773f6c 100644
--- a/backend/src/main/java/ervu_business_metrics/component/chart/RoundSingleChartDataSetService.java
+++ b/backend/src/main/java/ervu_business_metrics/component/chart/RoundSingleChartDataSetService.java
@@ -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();
diff --git a/backend/src/main/java/ervu_business_metrics/model/chart/round/RoundChartDataDto.java b/backend/src/main/java/ervu_business_metrics/model/chart/round/RoundChartDataDto.java
index 194242d..2b75baa 100644
--- a/backend/src/main/java/ervu_business_metrics/model/chart/round/RoundChartDataDto.java
+++ b/backend/src/main/java/ervu_business_metrics/model/chart/round/RoundChartDataDto.java
@@ -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;
   }
 }
diff --git a/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts b/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts
index 6b57f03..ad790a5 100644
--- a/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts
+++ b/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts
@@ -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;
   }