fix: set value color correctly based on legend color

dhis2 · Sep 24, 2024 · a5847bc · a5847bc
1 parent b2f6931
commit a5847bc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/...ers/dhis_highcharts/customSVGOptions/singleValue/config/getSingleValueCustomSVGOptions.js b/...ers/dhis_highcharts/customSVGOptions/singleValue/config/getSingleValueCustomSVGOptions.js
@@ -1,5 +1,7 @@
+import { colors } from '@dhis2/ui'
 import { getSingleValueFormattedValue } from './getSingleValueFormattedValue.js'
 import { getSingleValueSubtext } from './getSingleValueSubtext.js'
+import { getSingleValueTextColor } from './getSingleValueTextColor.js'
 
 export function getSingleValueCustomSVGOptions({
     layout,
@@ -11,6 +13,12 @@ export function getSingleValueCustomSVGOptions({
     const value = series[0]
     return {
         value,
+        fontColor: getSingleValueTextColor(
+            colors.grey900,
+            value,
+            layout.legend,
+            extraOptions.legendSets
+        ),
         formattedValue: getSingleValueFormattedValue(value, layout, metaData),
         icon,
         dashboard,

diff --git a/...ig/adapters/dhis_highcharts/customSVGOptions/singleValue/renderer/renderSingleValueSVG.js b/...ig/adapters/dhis_highcharts/customSVGOptions/singleValue/renderer/renderSingleValueSVG.js
@@ -5,17 +5,20 @@ import { positionElements } from './positionElements.js'
 import { DynamicStyles } from './styles.js'
 
 export function renderSingleValueSVG() {
-    const color = this.title.styles.color
-    const { formattedValue, icon, subText } = this.userOptions.customSVGOptions
+    const { formattedValue, icon, subText, fontColor } =
+        this.userOptions.customSVGOptions
     const dynamicStyles = new DynamicStyles()
     const valueElement = this.renderer
         .text(formattedValue)
-        .css({ color, visibility: 'hidden' })
+        .css({ color: fontColor, visibility: 'hidden' })
         .add()
     const subTextElement = subText
-        ? this.renderer.text(subText).css({ color, visibility: 'hidden' }).add()
+        ? this.renderer
+              .text(subText)
+              .css({ color: fontColor, visibility: 'hidden' })
+              .add()
         : null
-    const iconElement = icon ? addIconElement.call(this, icon, color) : null
+    const iconElement = icon ? addIconElement.call(this, icon, fontColor) : null
 
     let fitsWithinContainer = false
     let styles = {}