refactor: implement single value config via Highcharts adapter

src/visualizations/config/adapters/dhis_highcharts/chart.js

@@ -1,4 +1,6 @@
-import { renderCustomSVG } from './custom/index.js'
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js'
+import { renderCustomSVG } from './customSVGOptions/index.js'
+import { getSingleValueBackgroundColor } from './customSVGOptions/singleValue/index.js'
 import getType from './type.js'
 
 const DEFAULT_CHART = {
@@ -37,16 +39,22 @@ const getEvents = () => ({
     },
 })
 
-export default function (layout, el, dashboard) {
+export default function (layout, el, extraOptions, series) {
     return Object.assign(
         {},
         getType(layout.type),
         { renderTo: el || layout.el },
         DEFAULT_CHART,
-        dashboard ? DASHBOARD_CHART : undefined,
+        extraOptions.dashboard ? DASHBOARD_CHART : undefined,
         getEvents(),
-        {
-            backgroundColor: 'red',
-        }
+        layout.type === VIS_TYPE_SINGLE_VALUE
+            ? {
+                  backgroundColor: getSingleValueBackgroundColor(
+                      extraOptions.legendOptions,
+                      extraOptions.legendSets,
+                      series[0]
+                  ),
+              }
+            : undefined
     )
 }

src/visualizations/config/adapters/dhis_highcharts/custom/index.js → src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/index.js

@@ -1,29 +1,42 @@
 import { VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js'
+import { getSingleValueCustomSVGOptions } from './singleValue/index.js'
 
 export function renderCustomSVG() {
     const renderer = this.renderer
     const options = this.userOptions.customSVGOptions
 
     switch (options.visualizationType) {
         case VIS_TYPE_SINGLE_VALUE:
-            console.log('now render SV viz', renderer, options)
+            console.log('now render SV viz', this)
             break
         default:
             break
     }
 }
 
-export function getCustomSVGOptions({ layout }) {
+export function getCustomSVGOptions({
+    extraConfig,
+    layout,
+    extraOptions,
+    metaData,
+    series,
+}) {
     const baseOptions = {
         visualizationType: layout.type,
     }
     switch (layout.type) {
         case VIS_TYPE_SINGLE_VALUE:
             return {
                 ...baseOptions,
-                test: 1,
+                ...getSingleValueCustomSVGOptions({
+                    extraConfig,
+                    layout,
+                    extraOptions,
+                    metaData,
+                    series,
+                }),
             }
         default:
-            return null
+            break
     }
 }

src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueBackgroundColor.js

@@ -0,0 +1,17 @@
+import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../modules/legends.js'
+import { getSingleValueLegendColor } from './getSingleValueLegendColor.js'
+
+export function getSingleValueBackgroundColor(
+    legendOptions,
+    legendSets,
+    value
+) {
+    const legendColor = getSingleValueLegendColor(
+        legendOptions,
+        legendSets,
+        value
+    )
+    return legendColor && legendOptions.style === LEGEND_DISPLAY_STYLE_FILL
+        ? legendColor
+        : 'transparent'
+}

src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueCustomSVGOptions.js

@@ -0,0 +1,47 @@
+import { getSingleValueFormattedValue } from './getSingleValueFormattedValue.js'
+
+export function getSingleValueCustomSVGOptions({
+    extraConfig,
+    layout,
+    extraOptions,
+    metaData,
+    series,
+}) {
+    const { dashboard, legendSets, fontStyle, noData, legendOptions, icon } =
+        extraOptions
+    const value = series[0]
+
+    console.log(
+        '++++setSingleValueOptions++++',
+        '\nextraConfig: ',
+        extraConfig,
+        '\nlayout: ',
+        layout,
+        '\nmetaData: ',
+        metaData,
+        '\nseries: ',
+        series,
+        '\ndashboard: ',
+        dashboard,
+        '\nlegendSets: ',
+        legendSets,
+        '\nfontStyle: ',
+        fontStyle,
+        '\nnoData: ',
+        noData,
+        '\nlegendOptions: ',
+        legendOptions,
+        '\nicon: ',
+        icon,
+        '\n============='
+    )
+    const customSVGOptions = {
+        value,
+        formattedValue: getSingleValueFormattedValue(value, layout, metaData),
+        icon,
+        dashboard,
+        subText: 'Test',
+    }
+    console.log('singleValueCustomSvgOptions', customSVGOptions)
+    return customSVGOptions
+}

src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueFormattedValue.js

@@ -0,0 +1,23 @@
+import { renderValue } from '../../../../../../modules/renderValue.js'
+import { VALUE_TYPE_TEXT } from '../../../../../../modules/valueTypes.js'
+
+export const INDICATOR_FACTOR_100 = 100
+
+export function getSingleValueFormattedValue(value, layout, metaData) {
+    const valueType = metaData.items[metaData.dimensions.dx[0]].valueType
+    const indicatorType =
+        metaData.items[metaData.dimensions.dx[0]].indicatorType
+
+    let formattedValue = renderValue(value, valueType || VALUE_TYPE_TEXT, {
+        digitGroupSeparator: layout.digitGroupSeparator,
+        skipRounding: layout.skipRounding,
+    })
+
+    // only show the percentage symbol for per cent
+    // for other factors, show the full text under the value
+    if (indicatorType?.factor === INDICATOR_FACTOR_100) {
+        formattedValue += '%'
+    }
+
+    return formattedValue
+}

src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueLegendColor.js

@@ -0,0 +1,8 @@
+import { getColorByValueFromLegendSet } from '../../../../../../modules/legends.js'
+
+export function getSingleValueLegendColor(legendOptions, legendSets, value) {
+    const legendSet = legendOptions && legendSets[0]
+    return legendSet
+        ? getColorByValueFromLegendSet(legendSet, value)
+        : undefined
+}

src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueTextColor.js

@@ -0,0 +1,27 @@
+import { colors } from '@dhis2/ui'
+import { LEGEND_DISPLAY_STYLE_TEXT } from '../../../../../../modules/legends.js'
+import { getSingleValueLegendColor } from './getSingleValueLegendColor.js'
+import { shouldUseContrastColor } from './shouldUseContrastColor.js'
+
+export function getSingleValueTextColor(
+    baseColor,
+    value,
+    legendOptions,
+    legendSets
+) {
+    const legendColor = getSingleValueLegendColor(
+        legendOptions,
+        legendSets,
+        value
+    )
+
+    if (!legendColor) {
+        return baseColor
+    }
+
+    if (LEGEND_DISPLAY_STYLE_TEXT) {
+        return legendColor
+    }
+
+    return shouldUseContrastColor(legendColor) ? colors.white : baseColor
+}

src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/index.js

@@ -0,0 +1,3 @@
+export { getSingleValueCustomSVGOptions } from './getSingleValueCustomSVGOptions.js'
+export { getSingleValueBackgroundColor } from './getSingleValueBackgroundColor.js'
+export { getSingleValueTextColor } from './getSingleValueTextColor.js'

src/visualizations/config/adapters/dhis_highcharts/index.js

@@ -15,7 +15,7 @@ import {
 import { defaultMultiAxisTheme1 } from '../../../util/colors/themes.js'
 import addTrendLines, { isRegressionIneligible } from './addTrendLines.js'
 import getChart from './chart.js'
-import { getCustomSVGOptions } from './custom/index.js'
+import { getCustomSVGOptions } from './customSVGOptions/index.js'
 import getScatterData from './getScatterData.js'
 import getSortedConfig from './getSortedConfig.js'
 import getTrimmedConfig from './getTrimmedConfig.js'
@@ -78,21 +78,17 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) {
 
     let config = {
         // type etc
-        chart: getChart(_layout, el, _extraOptions.dashboard),
+        chart: getChart(_layout, el, _extraOptions, series),
 
         // title
-        title: getTitle(
-            _layout,
-            store.data[0].metaData,
-            _extraOptions.dashboard
-        ),
+        title: getTitle(_layout, store.data[0].metaData, _extraOptions, series),
 
         // subtitle
         subtitle: getSubtitle(
             series,
             _layout,
             store.data[0].metaData,
-            _extraOptions.dashboard
+            _extraOptions
         ),
 
         // x-axis
@@ -128,7 +124,7 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) {
             noData: _extraOptions.noData.text,
             resetZoom: _extraOptions.resetZoom.text,
         },
-        noData: getNoData(),
+        noData: getNoData(_layout.type),
 
         // credits
         credits: {
@@ -140,6 +136,19 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) {
             // disable exporting context menu
             enabled: false,
         },
+
+        /* The config object passed to the Highcharts Chart constructor
+         * can contain arbitrary properties, which are made accessible
+         * under the Chart instance's `userOptions` member. This means
+         * that in event callback functions the custom SVG options are
+         * accessible as `this.userOptions.customSVGOptions` */
+        customSVGOptions: getCustomSVGOptions({
+            extraConfig,
+            layout: _layout,
+            extraOptions: _extraOptions,
+            metaData: store.data[0].metaData,
+            series,
+        }),
     }
 
     // get plot options for scatter
@@ -232,13 +241,6 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) {
         )
     }
 
-    /* The config object passed to the Highcharts Chart constructor
-     * can contain arbitrary properties, which are made accessible
-     * under the Chart instance's `userOptions` member. This means
-     * that in event callback functions the custom SVG options are
-     * accessible as `this.userOptions.customSVGOptions` */
-    config.customSVGOptions = getCustomSVGOptions({ layout })
-
     // force apply extra config
     Object.assign(config, extraConfig)
 

src/visualizations/config/adapters/dhis_highcharts/noData.js

@@ -1,8 +1,13 @@
-export default function () {
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js'
+
+export default function (visualizationType) {
     return {
         style: {
             fontSize: '13px',
             fontWeight: 'normal',
+            /* Hide no data label for single value visualizations because
+             * the data is always missing. */
+            opacity: visualizationType === VIS_TYPE_SINGLE_VALUE ? 0 : 1,
         },
     }
 }