fix: address cross-browser style issues by using kebab-cased attribut…

…es and string values

src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/renderer/styles.js

@@ -1,36 +1,36 @@
 const baseStyle = {
     value: {
-        fontWeight: 300,
+        'font-weight': 300,
     },
     subText: {},
 }
 
 const valueStyles = [
-    { fontSize: 200, letterSpacing: -6 },
-    { fontSize: 182, letterSpacing: -5.5 },
-    { fontSize: 164, letterSpacing: -5 },
-    { fontSize: 146, letterSpacing: -4.5 },
-    { fontSize: 128, letterSpacing: -4 },
-    { fontSize: 110, letterSpacing: -3.5 },
-    { fontSize: 92, letterSpacing: -3 },
-    { fontSize: 74, letterSpacing: -2.5 },
-    { fontSize: 56, letterSpacing: -2 },
-    { fontSize: 38, letterSpacing: -1.5 },
-    { fontSize: 20, letterSpacing: -1 },
+    { 'font-size': '200px', 'letter-spacing': '-6px' },
+    { 'font-size': '182px', 'letter-spacing': '-5.5px' },
+    { 'font-size': '164px', 'letter-spacing': '-5px' },
+    { 'font-size': '146px', 'letter-spacing': '-4.5px' },
+    { 'font-size': '128px', 'letter-spacing': '-4px' },
+    { 'font-size': '110px', 'letter-spacing': '-3.5px' },
+    { 'font-size': '92px', 'letter-spacing': '-3px' },
+    { 'font-size': '74px', 'letter-spacing': '-2.5px' },
+    { 'font-size': '56px', 'letter-spacing': '-2px' },
+    { 'font-size': '38px', 'letter-spacing': '-1.5px' },
+    { 'font-size': '20px', 'letter-spacing': '-1px' },
 ]
 
 const subTextStyles = [
-    { fontSize: 67, letterSpacing: -2 },
-    { fontSize: 61, letterSpacing: -1.8 },
-    { fontSize: 55, letterSpacing: -1.6 },
-    { fontSize: 49, letterSpacing: -1.4 },
-    { fontSize: 43, letterSpacing: -1.2 },
-    { fontSize: 37, letterSpacing: -1 },
-    { fontSize: 31, letterSpacing: -0.8 },
-    { fontSize: 25, letterSpacing: -0.6 },
-    { fontSize: 19, letterSpacing: -0.4 },
-    { fontSize: 13, letterSpacing: 0.2 },
-    { fontSize: 7, letterSpacing: 0 },
+    { 'font-size': '67px', 'letter-spacing': '-2px' },
+    { 'font-size': '61px', 'letter-spacing': '-1.8px' },
+    { 'font-size': '55px', 'letter-spacing': '-1.6px' },
+    { 'font-size': '49px', 'letter-spacing': '-1.4px' },
+    { 'font-size': '43px', 'letter-spacing': '-1.2px' },
+    { 'font-size': '37px', 'letter-spacing': '-1px' },
+    { 'font-size': '31px', 'letter-spacing': '-0.8px' },
+    { 'font-size': '25px', 'letter-spacing': '-0.6px' },
+    { 'font-size': '19px', 'letter-spacing': '-0.4px' },
+    { 'font-size': '13px', 'letter-spacing': '0.2px' },
+    { 'font-size': '7px', 'letter-spacing': '0px' },
 ]
 
 const spacings = [

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

@@ -0,0 +1,25 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js'
+import { renderSingleValueSVG } from './customSVGOptions/singleValue/renderer/renderSingleValueSVG.js'
+
+export default function getExporting(layoutType) {
+    const exporting = {
+        // disable exporting context menu
+        enabled: false,
+    }
+    switch (layoutType) {
+        case VIS_TYPE_SINGLE_VALUE:
+            return {
+                ...exporting,
+                chartOptions: {
+                    chart: {
+                        events: {
+                            load: renderSingleValueSVG,
+                        },
+                    },
+                },
+            }
+
+        default:
+            return exporting
+    }
+}

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

@@ -16,6 +16,7 @@ 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 getExporting from './exporting.js'
 import getScatterData from './getScatterData.js'
 import getSortedConfig from './getSortedConfig.js'
 import getTrimmedConfig from './getTrimmedConfig.js'
@@ -132,10 +133,7 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) {
         },
 
         // exporting
-        exporting: {
-            // disable exporting context menu
-            enabled: false,
-        },
+        exporting: getExporting(_layout.type),
 
         /* The config object passed to the Highcharts Chart constructor
          * can contain arbitrary properties, which are made accessible
@@ -244,5 +242,7 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) {
     // force apply extra config
     Object.assign(config, extraConfig)
 
+    console.log(objectClean(config))
+
     return objectClean(config)
 }