fix: separator for hundreds, thousands and millions is missing in the…

… Pie charts (DHIS2-16172) (#1677)

src/modules/renderValue.js

@@ -6,9 +6,7 @@ import { isNumericValueType } from './valueTypes.js'
 
 const trimTrailingZeros = (stringValue) => stringValue.replace(/\.?0+$/, '')
 
-const decimalSeparator = '.'
-
-const separateDigitGroups = (stringValue, decimalSeparator) => {
+export const separateDigitGroups = (stringValue, decimalSeparator = '.') => {
     const isNegative = stringValue[0] === '-'
     const [integer, remainder] = stringValue.replace(/^-/, '').split('.')
 
@@ -68,17 +66,16 @@ export const renderValue = (value, valueType, visualization) => {
         )
 
         return (
-            separateDigitGroups(stringValue, decimalSeparator).join(
-                getSeparator(visualization)
-            ) + '%'
+            separateDigitGroups(stringValue).join(getSeparator(visualization)) +
+            '%'
         )
     } else {
         const stringValue = toFixedPrecisionString(
             value,
             visualization.skipRounding
         )
 
-        return separateDigitGroups(stringValue, decimalSeparator).join(
+        return separateDigitGroups(stringValue).join(
             getSeparator(visualization)
         )
     }

src/visualizations/config/adapters/dhis_highcharts/series/__tests__/pie.spec.js

@@ -0,0 +1,66 @@
+import { formatDataLabel } from '../pie.js'
+
+describe('formatDataLabel', () => {
+    it('should format data label correctly with integers', () => {
+        const result = formatDataLabel('Test', 1000, 50)
+        expect(result).toEqual(
+            '<span style="font-weight:normal">Test</span><br/>1 000<span style="font-weight:normal"> (50%)</span>'
+        )
+    })
+
+    it('should format data label correctly with decimals', () => {
+        const result = formatDataLabel('Test', 1000.123456789, 50.1234)
+        expect(result).toEqual(
+            '<span style="font-weight:normal">Test</span><br/>1 000.123456789<span style="font-weight:normal"> (50.1%)</span>'
+        )
+    })
+
+    it('should handle large numbers correctly', () => {
+        const result = formatDataLabel('Test', 1000000, 75.5678)
+        expect(result).toEqual(
+            '<span style="font-weight:normal">Test</span><br/>1 000 000<span style="font-weight:normal"> (75.6%)</span>'
+        )
+    })
+
+    it('should handle small percentages correctly', () => {
+        const result = formatDataLabel('Test', 1000.000001, 0.09)
+        expect(result).toEqual(
+            '<span style="font-weight:normal">Test</span><br/>1 000.000001<span style="font-weight:normal"> (0.1%)</span>'
+        )
+    })
+
+    it('should handle zero correctly', () => {
+        const result = formatDataLabel('Test', 0, 0)
+        expect(result).toEqual(
+            '<span style="font-weight:normal">Test</span><br/>0<span style="font-weight:normal"> (0%)</span>'
+        )
+    })
+
+    it('should handle negative numbers correctly', () => {
+        const result = formatDataLabel('Test', -1000, -50)
+        expect(result).toEqual(
+            '<span style="font-weight:normal">Test</span><br/>-1 000<span style="font-weight:normal"> (-50%)</span>'
+        )
+    })
+
+    it('should handle empty string as name correctly', () => {
+        const result = formatDataLabel('', 1000, 50)
+        expect(result).toEqual(
+            '<span style="font-weight:normal"></span><br/>1 000<span style="font-weight:normal"> (50%)</span>'
+        )
+    })
+
+    it('should handle undefined as name correctly', () => {
+        const result = formatDataLabel(undefined, 1000, 50)
+        expect(result).toEqual(
+            '<span style="font-weight:normal"></span><br/>1 000<span style="font-weight:normal"> (50%)</span>'
+        )
+    })
+
+    it('should handle special characters in name correctly', () => {
+        const result = formatDataLabel('Test&Test', 1000, 50)
+        expect(result).toEqual(
+            '<span style="font-weight:normal">Test&Test</span><br/>1 000<span style="font-weight:normal"> (50%)</span>'
+        )
+    })
+})

src/visualizations/config/adapters/dhis_highcharts/series/pie.js

@@ -1,3 +1,18 @@
+import { separateDigitGroups } from '../../../../../modules/renderValue.js'
+
+export const formatDataLabel = (name = '', y, percentage) => {
+    const value = separateDigitGroups(y.toString()).join(' ')
+    return (
+        '<span style="font-weight:normal">' +
+        name +
+        '</span><br/>' +
+        value +
+        '<span style="font-weight:normal"> (' +
+        parseFloat(percentage.toFixed(1)) +
+        '%)</span>'
+    )
+}
+
 export default function (series, colors) {
     return [
         {
@@ -9,14 +24,10 @@ export default function (series, colors) {
             dataLabels: {
                 enabled: true,
                 formatter: function () {
-                    return (
-                        '<span style="font-weight:normal">' +
-                        this.point.name +
-                        '</span><br/>' +
-                        this.y +
-                        '<span style="font-weight:normal"> (' +
-                        this.percentage.toFixed(1) +
-                        ' %)</span>'
+                    return formatDataLabel(
+                        this.point.name,
+                        this.y,
+                        this.percentage
                     )
                 },
             },