From 43504934d7cc93a5f10b36ce31e55fedcc019a5b Mon Sep 17 00:00:00 2001
From: Guillaume Cusnieux <guillaume.cusnieux@graviteesource.com>
Date: Fri, 26 May 2023 16:06:20 +0200
Subject: [PATCH] feat: improve customization of gv-chart-gauge-progress

---
 .../gv-chart-gauge-progress.js                | 50 ++++++++++---------
 .../gv-chart-gauge-progress.stories.js        | 10 ++++
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/charts/gv-chart-gauge-progress/gv-chart-gauge-progress.js b/src/charts/gv-chart-gauge-progress/gv-chart-gauge-progress.js
index 2d432aca..6fa1b676 100644
--- a/src/charts/gv-chart-gauge-progress/gv-chart-gauge-progress.js
+++ b/src/charts/gv-chart-gauge-progress/gv-chart-gauge-progress.js
@@ -46,31 +46,35 @@ export class GvChartGaugeProgress extends GvChartGauge {
 
   async getOptions() {
     const options = await super.getOptions();
-
     const max = this.max;
-    options.series[0].dataLabels = [
-      {
-        enabled: true,
-        align: 'center',
-        verticalAlign: 'middle',
-        formatter: function () {
-          if (this.y >= max) {
-            return `Done !`;
-          }
-          const remainingTime = Math.ceil((max - this.y) / 60000);
-          const prefix = `${remainingTime} min`;
-          const suffix = 'remaining...';
-          const spaces = Array(Math.round((suffix.length - prefix.length) / 2))
-            .fill('&nbsp;')
-            .join('');
-          return `${spaces}${prefix}<br/>${suffix}`;
-        },
-        borderWidth: 0,
-        style: {
-          fontSize: '16px',
-        },
+
+    const dataLabel = {
+      enabled: true,
+      align: 'center',
+      verticalAlign: 'middle',
+      formatter: function () {
+        if (this.y >= max) {
+          return `Done !`;
+        }
+        const remainingTime = Math.ceil((max - this.y) / 60000);
+        const prefix = `${remainingTime} min`;
+        const suffix = 'remaining...';
+        const spaces = Array(Math.round((suffix.length - prefix.length) / 2))
+          .fill('&nbsp;')
+          .join('');
+        return `${spaces}${prefix}<br/>${suffix}`;
       },
-    ];
+      borderWidth: 0,
+    };
+    if (options.series[0].dataLabels) {
+      if (Array.isArray(options.series[0].dataLabels) && options.series[0].dataLabels.length > 0) {
+        options.series[0].dataLabels[0] = { ...options.series[0].dataLabels[0], ...dataLabel };
+      } else {
+        options.series[0].dataLabels = { ...options.series[0].dataLabels, ...dataLabel };
+      }
+    } else {
+      options.series[0].dataLabels = dataLabel;
+    }
 
     return options;
   }
diff --git a/src/charts/gv-chart-gauge-progress/gv-chart-gauge-progress.stories.js b/src/charts/gv-chart-gauge-progress/gv-chart-gauge-progress.stories.js
index 1316f0f7..ce3fc739 100644
--- a/src/charts/gv-chart-gauge-progress/gv-chart-gauge-progress.stories.js
+++ b/src/charts/gv-chart-gauge-progress/gv-chart-gauge-progress.stories.js
@@ -46,6 +46,16 @@ const series = [
         y: 0,
       },
     ],
+    dataLabels: {
+      color: 'var(--gv-theme-color-info)',
+      enabled: true,
+      align: 'center',
+      verticalAlign: 'middle',
+      style: {
+        fontSize: '14px',
+        textOutline: 'none',
+      },
+    },
   },
 ];