dhis2 · janhenrikoverland · Feb 27, 2025
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-12-19T10:28:15.132Z\n"
-"PO-Revision-Date: 2024-12-19T10:28:15.132Z\n"
+"POT-Creation-Date: 2025-02-27T10:24:19.853Z\n"
+"PO-Revision-Date: 2025-02-27T10:24:19.854Z\n"
 
 msgid "view only"
 msgstr "view only"
@@ -1371,6 +1371,9 @@ msgstr "Year over year (line)"
 msgid "Pie"
 msgstr "Pie"
 
+msgid "Donut"
+msgstr "Donut"
+
 msgid "Radar"
 msgstr "Radar"
 

diff --git a/src/components/VisTypeIcon.js b/src/components/VisTypeIcon.js
@@ -47,6 +47,7 @@ import {
     VIS_TYPE_AREA,
     VIS_TYPE_STACKED_AREA,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_RADAR,
     VIS_TYPE_GAUGE,
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
@@ -110,6 +111,10 @@ export const VisTypeIcon = ({ type, useSmall = false, ...props }) => {
             VisIcon = useSmall ? IconVisualizationPie16 : IconVisualizationPie24
             break
         }
+        case VIS_TYPE_DONUT: {
+            VisIcon = useSmall ? IconVisualizationPie16 : IconVisualizationPie24
+            break
+        }
         case VIS_TYPE_RADAR: {
             VisIcon = useSmall
                 ? IconVisualizationRadar16

diff --git a/src/index.js b/src/index.js
@@ -209,6 +209,7 @@ export {
     VIS_TYPE_AREA,
     VIS_TYPE_STACKED_AREA,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_RADAR,
     VIS_TYPE_GAUGE,
     VIS_TYPE_BUBBLE,

diff --git a/src/modules/__tests__/getAdaptedUiLayoutByType.spec.js b/src/modules/__tests__/getAdaptedUiLayoutByType.spec.js
@@ -14,6 +14,7 @@
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
     VIS_TYPE_BAR,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_SINGLE_VALUE,
     VIS_TYPE_OUTLIER_TABLE,
 } from '../visTypes.js'

diff --git a/src/modules/getAdaptedUiLayoutByType.js b/src/modules/getAdaptedUiLayoutByType.js
@@ -13,6 +13,7 @@ import {
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
     VIS_TYPE_YEAR_OVER_YEAR_COLUMN,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_GAUGE,
     VIS_TYPE_SINGLE_VALUE,
     VIS_TYPE_PIVOT_TABLE,
@@ -30,7 +31,8 @@ export const getAdaptedUiLayoutByType = (layout, type) => {
         case VIS_TYPE_YEAR_OVER_YEAR_COLUMN: {
             return getYearOverYearLayout(layout)
         }
-        case VIS_TYPE_PIE: {
+        case VIS_TYPE_PIE: 
+        case VIS_TYPE_DONUT: {
             return getPieLayout(layout)
         }
         case VIS_TYPE_SINGLE_VALUE:

diff --git a/src/modules/layoutUiRules/rules.js b/src/modules/layoutUiRules/rules.js
@@ -20,6 +20,7 @@ import {
     VIS_TYPE_RADAR,
     VIS_TYPE_GAUGE,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_SINGLE_VALUE,
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
     VIS_TYPE_YEAR_OVER_YEAR_COLUMN,
@@ -159,6 +160,7 @@ const visTypeToRules = {
     [VIS_TYPE_RADAR]: radarRules,
     [VIS_TYPE_GAUGE]: singleValueRules,
     [VIS_TYPE_PIE]: pieRules,
+    [VIS_TYPE_DONUT]: pieRules,
     [VIS_TYPE_SINGLE_VALUE]: singleValueRules,
     [VIS_TYPE_YEAR_OVER_YEAR_LINE]: yearOverYearRules,
     [VIS_TYPE_YEAR_OVER_YEAR_COLUMN]: yearOverYearRules,

diff --git a/src/modules/visTypeToLayoutType.js b/src/modules/visTypeToLayoutType.js
@@ -16,6 +16,7 @@ import {
     VIS_TYPE_AREA,
     VIS_TYPE_STACKED_AREA,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_RADAR,
     VIS_TYPE_GAUGE,
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
@@ -36,6 +37,7 @@ const visTypeToLayoutType = {
     [VIS_TYPE_AREA]: LAYOUT_TYPE_DEFAULT,
     [VIS_TYPE_STACKED_AREA]: LAYOUT_TYPE_DEFAULT,
     [VIS_TYPE_PIE]: LAYOUT_TYPE_PIE,
+    [VIS_TYPE_DONUT]: LAYOUT_TYPE_PIE,
     [VIS_TYPE_RADAR]: LAYOUT_TYPE_DEFAULT,
     [VIS_TYPE_GAUGE]: LAYOUT_TYPE_PIE,
     [VIS_TYPE_YEAR_OVER_YEAR_LINE]: LAYOUT_TYPE_YEAR_OVER_YEAR,

diff --git a/src/modules/visTypes.js b/src/modules/visTypes.js
@@ -31,6 +31,7 @@ export const VIS_TYPE_LINE = 'LINE'
 export const VIS_TYPE_LINE_LIST = 'LINE_LIST'
 export const VIS_TYPE_YEAR_OVER_YEAR_LINE = 'YEAR_OVER_YEAR_LINE'
 export const VIS_TYPE_PIE = 'PIE'
+export const VIS_TYPE_DONUT = 'DONUT'
 export const VIS_TYPE_RADAR = 'RADAR'
 export const VIS_TYPE_SCATTER = 'SCATTER'
 export const VIS_TYPE_SINGLE_VALUE = 'SINGLE_VALUE'
@@ -53,6 +54,7 @@ export const visTypeDisplayNames = {
     [VIS_TYPE_LINE_LIST]: i18n.t('Line list'),
     [VIS_TYPE_YEAR_OVER_YEAR_LINE]: i18n.t('Year over year (line)'),
     [VIS_TYPE_PIE]: i18n.t('Pie'),
+    [VIS_TYPE_DONUT]: i18n.t('Donut'),
     [VIS_TYPE_RADAR]: i18n.t('Radar'),
     [VIS_TYPE_SCATTER]: i18n.t('Scatter'),
     [VIS_TYPE_SINGLE_VALUE]: i18n.t('Single value'),
@@ -75,6 +77,7 @@ export const visTypeIcons = {
     [VIS_TYPE_LINE_LIST]: IconVisualizationLinelist24,
     [VIS_TYPE_YEAR_OVER_YEAR_LINE]: IconVisualizationLineMulti24,
     [VIS_TYPE_PIE]: IconVisualizationPie24,
+    [VIS_TYPE_DONUT]: IconVisualizationPie24,
     [VIS_TYPE_RADAR]: IconVisualizationRadar24,
     [VIS_TYPE_SCATTER]: IconVisualizationScatter24,
     [VIS_TYPE_SINGLE_VALUE]: IconVisualizationSingleValue24,

diff --git a/src/visualizations/config/adapters/dhis_highcharts/addTrendLines.js b/src/visualizations/config/adapters/dhis_highcharts/addTrendLines.js
@@ -4,6 +4,7 @@ import i18n from '../../../../locales/index.js'
 import {
     VIS_TYPE_GAUGE,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     isTwoCategoryChartType,
 } from '../../../../modules/visTypes.js'
 import {
@@ -27,7 +28,7 @@ const DEFAULT_TRENDLINE = {
 }
 
 export const isRegressionIneligible = (type) =>
-    arrayContains([VIS_TYPE_GAUGE, VIS_TYPE_PIE], type)
+    arrayContains([VIS_TYPE_GAUGE, VIS_TYPE_PIE, VIS_TYPE_DONUT], type)
 
 export default function (layout, series, isStacked) {
     if (isTwoCategoryChartType(layout.type) && layout.rows.length > 1) {

diff --git a/src/visualizations/config/adapters/dhis_highcharts/series/donut.js b/src/visualizations/config/adapters/dhis_highcharts/series/donut.js
@@ -0,0 +1,9 @@
+import getPieSeries from './pie.js'
+
+export default function (series, colors) {
+    const donutSeries = getPieSeries(series, colors)
+    console.log("donutSeries", donutSeries)
+
+    donutSeries[0].innerSize = '75%'
+    return donutSeries
+}
diff --git a/src/visualizations/config/adapters/dhis_highcharts/series/index.js b/src/visualizations/config/adapters/dhis_highcharts/series/index.js
@@ -4,6 +4,7 @@ import { axisHasRelativeItems } from '../../../../../modules/layout/axisHasRelat
 import { getLegendSetByDisplayStrategy } from '../../../../../modules/legends.js'
 import {
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_GAUGE,
     isDualAxisType,
     isYearOverYear,
@@ -20,6 +21,7 @@ import { generateColors } from '../../../../util/colors/gradientColorGenerator.j
 import { getFullIdAxisMap, getAxisIdsMap } from '../customAxes.js'
 import getCumulativeData from '../getCumulativeData.js'
 import getType from '../type.js'
+import getDonut from './donut.js'
 import getGauge from './gauge.js'
 import getPie from './pie.js'
 import getScatter from './scatter.js'
@@ -235,6 +237,12 @@ export default function ({
                 Object.values(getIdColorMap(series, layout, extraOptions))
             )
             break
+        case VIS_TYPE_DONUT:
+            series = getDonut(
+                series,
+                Object.values(getIdColorMap(series, layout, extraOptions))
+            )
+            break
         case VIS_TYPE_GAUGE:
             series = getGauge(series, layout, extraOptions.legendSets[0])
             break

diff --git a/src/visualizations/config/adapters/dhis_highcharts/type.js b/src/visualizations/config/adapters/dhis_highcharts/type.js
@@ -6,6 +6,7 @@ import {
     VIS_TYPE_AREA,
     VIS_TYPE_STACKED_AREA,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_RADAR,
     VIS_TYPE_GAUGE,
     VIS_TYPE_COLUMN,
@@ -27,6 +28,7 @@ export default function (type) {
         case VIS_TYPE_STACKED_AREA:
             return { type: 'area' }
         case VIS_TYPE_PIE:
+        case VIS_TYPE_DONUT:
             return { type: 'pie' }
         case VIS_TYPE_RADAR:
             return { type: 'line', polar: true }

diff --git a/src/visualizations/config/adapters/dhis_highcharts/xAxis/index.js b/src/visualizations/config/adapters/dhis_highcharts/xAxis/index.js
@@ -13,6 +13,7 @@ import {
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
     VIS_TYPE_YEAR_OVER_YEAR_COLUMN,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_RADAR,
     VIS_TYPE_SCATTER,
     isTwoCategoryChartType,
@@ -82,6 +83,7 @@ export default function (store, layout, extraOptions, series) {
     } else {
         switch (layout.type) {
             case VIS_TYPE_PIE:
+            case VIS_TYPE_DONUT:
             case VIS_TYPE_GAUGE:
             case VIS_TYPE_SINGLE_VALUE:
                 xAxis = noAxis()

diff --git a/src/visualizations/store/adapters/dhis_highcharts/index.js b/src/visualizations/store/adapters/dhis_highcharts/index.js
@@ -4,6 +4,7 @@ import {
     VIS_TYPE_YEAR_OVER_YEAR_COLUMN,
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
     VIS_TYPE_PIE,
+    VIS_TYPE_DONUT,
     VIS_TYPE_GAUGE,
     isTwoCategoryChartType,
     VIS_TYPE_SINGLE_VALUE,
@@ -98,6 +99,7 @@ function getSeriesFunction(type, categoryIds) {
         case VIS_TYPE_SINGLE_VALUE:
             return getSingleValue
         case VIS_TYPE_PIE:
+        case VIS_TYPE_DONUT:
             return getPie
         case VIS_TYPE_GAUGE:
             return getGauge