refactor: restructure chart, event and customSVGOptions dirs

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

@@ -0,0 +1,27 @@
+import { getEvents } from '../events/index.js'
+import getType from '../type.js'
+
+const DEFAULT_CHART = {
+    spacingTop: 20,
+    style: {
+        fontFamily: 'Roboto,Helvetica Neue,Helvetica,Arial,sans-serif',
+    },
+}
+
+const DASHBOARD_CHART = {
+    spacingTop: 0,
+    spacingRight: 5,
+    spacingBottom: 2,
+    spacingLeft: 5,
+}
+
+export default function getDefaultChart(layout, el, extraOptions) {
+    return Object.assign(
+        {},
+        getType(layout.type),
+        { renderTo: el || layout.el },
+        DEFAULT_CHART,
+        extraOptions.dashboard ? DASHBOARD_CHART : undefined,
+        getEvents(layout.type)
+    )
+}

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

@@ -0,0 +1,12 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js'
+import getDefaultChart from './default.js'
+import getSingleValueChart from './singleValue.js'
+
+export default function getChart(layout, el, extraOptions, series) {
+    switch (layout.type) {
+        case VIS_TYPE_SINGLE_VALUE:
+            return getSingleValueChart(layout, el, extraOptions, series)
+        default:
+            return getDefaultChart(layout, el, extraOptions)
+    }
+}

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

@@ -0,0 +1,19 @@
+import { getSingleValueBackgroundColor } from '../customSVGOptions/singleValue/getSingleValueBackgroundColor.js'
+import getDefaultChart from './default.js'
+
+export default function getSingleValueChart(layout, el, extraOptions, series) {
+    const chart = {
+        ...getDefaultChart(layout, el, extraOptions),
+        backgroundColor: getSingleValueBackgroundColor(
+            layout.legend,
+            extraOptions.legendSets,
+            series[0]
+        ),
+    }
+
+    if (extraOptions.dashboard) {
+        chart.spacingTop = 7
+    }
+
+    return chart
+}

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

@@ -1,18 +1,7 @@
 import { VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js'
-import { getSingleValueCustomSVGOptions } from './singleValue/index.js'
-import { renderSingleValueSVG } from './singleValue/renderer/renderSingleValueSVG.js'
+import getSingleValueCustomSVGOptions from './singleValue/index.js'
 
-export function renderCustomSVG(visType) {
-    switch (visType) {
-        case VIS_TYPE_SINGLE_VALUE:
-            renderSingleValueSVG.call(this)
-            break
-        default:
-            break
-    }
-}
-
-export function getCustomSVGOptions({
+export default function getCustomSVGOptions({
     extraConfig,
     layout,
     extraOptions,

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

@@ -1,4 +1,4 @@
-import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../../modules/legends.js'
+import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../modules/legends.js'
 import { getSingleValueLegendColor } from './getSingleValueLegendColor.js'
 
 export function getSingleValueBackgroundColor(

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

@@ -1,5 +1,5 @@
-import { renderValue } from '../../../../../../../modules/renderValue.js'
-import { VALUE_TYPE_TEXT } from '../../../../../../../modules/valueTypes.js'
+import { renderValue } from '../../../../../../modules/renderValue.js'
+import { VALUE_TYPE_TEXT } from '../../../../../../modules/valueTypes.js'
 
 export const INDICATOR_FACTOR_100 = 100
 

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

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

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

@@ -1,6 +1,6 @@
 import { colors } from '@dhis2/ui'
-import { LEGEND_DISPLAY_STYLE_TEXT } from '../../../../../../../modules/legends.js'
-import { shouldUseContrastColor } from '../../../../../../util/shouldUseContrastColor.js'
+import { LEGEND_DISPLAY_STYLE_TEXT } from '../../../../../../modules/legends.js'
+import { shouldUseContrastColor } from '../../../../../util/shouldUseContrastColor.js'
 import { getSingleValueLegendColor } from './getSingleValueLegendColor.js'
 
 export function getSingleValueTextColor(

src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/config/getSingleValueTitleColor.js → src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueTitleColor.js

@@ -1,6 +1,6 @@
 import { colors } from '@dhis2/ui'
-import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../../modules/legends.js'
-import { shouldUseContrastColor } from '../../../../../../util/shouldUseContrastColor.js'
+import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../modules/legends.js'
+import { shouldUseContrastColor } from '../../../../../util/shouldUseContrastColor.js'
 import { getSingleValueLegendColor } from './getSingleValueLegendColor.js'
 
 export function getSingleValueTitleColor(

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

@@ -1,3 +1,27 @@
-export { getSingleValueCustomSVGOptions } from './config/getSingleValueCustomSVGOptions.js'
-export { getSingleValueBackgroundColor } from './config/getSingleValueBackgroundColor.js'
-export { getSingleValueTitleColor } from './config/getSingleValueTitleColor.js'
+import { colors } from '@dhis2/ui'
+import { getSingleValueFormattedValue } from './getSingleValueFormattedValue.js'
+import { getSingleValueSubtext } from './getSingleValueSubtext.js'
+import { getSingleValueTextColor } from './getSingleValueTextColor.js'
+
+export default function getSingleValueCustomSVGOptions({
+    layout,
+    extraOptions,
+    metaData,
+    series,
+}) {
+    const { dashboard, icon } = extraOptions
+    const value = series[0]
+    return {
+        value,
+        fontColor: getSingleValueTextColor(
+            colors.grey900,
+            value,
+            layout.legend,
+            extraOptions.legendSets
+        ),
+        formattedValue: getSingleValueFormattedValue(value, layout, metaData),
+        icon,
+        dashboard,
+        subText: getSingleValueSubtext(metaData),
+    }
+}

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

@@ -0,0 +1,23 @@
+import loadCustomSVG from './loadCustomSVG/index.js'
+
+export const getEvents = (visType) => ({
+    events: {
+        load: function () {
+            // Align legend icon with legend text
+            this.legend.allItems.forEach((item) => {
+                if (item.legendSymbol) {
+                    item.legendSymbol.attr({
+                        translateY:
+                            -(
+                                (item.legendItem.label.getBBox().height *
+                                    0.75) /
+                                4
+                            ) +
+                            item.legendSymbol.r / 2,
+                    })
+                }
+            })
+            loadCustomSVG.call(this, visType)
+        },
+    },
+})

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

@@ -0,0 +1,12 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../../../modules/visTypes.js'
+import loadSingleValueSVG from './singleValue/index.js'
+
+export default function loadCustomSVG(visType) {
+    switch (visType) {
+        case VIS_TYPE_SINGLE_VALUE:
+            loadSingleValueSVG.call(this)
+            break
+        default:
+            break
+    }
+}

src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/renderer/renderSingleValueSVG.js → src/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/index.js

@@ -4,7 +4,7 @@ import { getAvailableSpace } from './getAvailableSpace.js'
 import { positionElements } from './positionElements.js'
 import { DynamicStyles } from './styles.js'
 
-export function renderSingleValueSVG() {
+export default function loadSingleValueSVG() {
     const { formattedValue, icon, subText, fontColor } =
         this.userOptions.customSVGOptions
     const dynamicStyles = new DynamicStyles(this.userOptions?.isPdfExport)

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

@@ -1,5 +1,5 @@
 import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js'
-import { renderSingleValueSVG } from './customSVGOptions/singleValue/renderer/renderSingleValueSVG.js'
+import loadSingleValueSVG from './events/loadCustomSVG/singleValue/index.js'
 
 export default function getExporting(visType) {
     const exporting = {
@@ -13,7 +13,7 @@ export default function getExporting(visType) {
                 chartOptions: {
                     chart: {
                         events: {
-                            load: renderSingleValueSVG,
+                            load: loadSingleValueSVG,
                         },
                     },
                 },

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

@@ -14,8 +14,8 @@ import {
 } from '../../../../modules/visTypes.js'
 import { defaultMultiAxisTheme1 } from '../../../util/colors/themes.js'
 import addTrendLines, { isRegressionIneligible } from './addTrendLines.js'
-import getChart from './chart.js'
-import { getCustomSVGOptions } from './customSVGOptions/index.js'
+import getChart from './chart/index.js'
+import getCustomSVGOptions from './customSVGOptions/index.js'
 import getExporting from './exporting.js'
 import getScatterData from './getScatterData.js'
 import getSortedConfig from './getSortedConfig.js'

src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js

@@ -1,5 +1,5 @@
 import getFilterText from '../../../../util/getFilterText.js'
-export { getSingleValueTitleColor as getSingleValueSubtitleColor } from '../customSVGOptions/singleValue/index.js'
+export { getSingleValueTitleColor as getSingleValueSubtitleColor } from '../customSVGOptions/singleValue/getSingleValueTitleColor.js'
 
 export default function getSingleValueSubtitle(layout, metaData) {
     if (layout.hideSubtitle || 1 === 0) {

src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js

@@ -1,5 +1,5 @@
 import getFilterText from '../../../../util/getFilterText.js'
-export { getSingleValueTitleColor } from '../customSVGOptions/singleValue/index.js'
+export { getSingleValueTitleColor } from '../customSVGOptions/singleValue/getSingleValueTitleColor.js'
 
 export function getSingleValueTitleText(layout, metaData) {
     if (layout.hideTitle) {