fix: ensure title and subtitle use custom color also for dark background

dhis2 · Oct 17, 2024 · b886121 · b886121
1 parent 6122203
commit b886121
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 30 deletions.
diff --git a/.../adapters/dhis_highcharts/customSVGOptions/singleValue/config/getSingleValueTitleColor.js b/.../adapters/dhis_highcharts/customSVGOptions/singleValue/config/getSingleValueTitleColor.js
@@ -0,0 +1,34 @@
+import { colors } from '@dhis2/ui'
+import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../../modules/legends.js'
+import { getSingleValueLegendColor } from './getSingleValueLegendColor.js'
+import { shouldUseContrastColor } from './shouldUseContrastColor.js'
+
+export function getSingleValueTitleColor(
+    customColor,
+    defaultColor,
+    value,
+    legendOptions,
+    legendSets
+) {
+    // Never override custom color
+    if (customColor) {
+        return customColor
+    }
+
+    const isUsingLegendBackground =
+        legendOptions?.style === LEGEND_DISPLAY_STYLE_FILL
+
+    // If not using legend background, always return default color
+    if (!isUsingLegendBackground) {
+        return defaultColor
+    }
+
+    const legendColor = getSingleValueLegendColor(
+        legendOptions,
+        legendSets,
+        value
+    )
+
+    // Return default color or contrasting color when using legend background and default color
+    return shouldUseContrastColor(legendColor) ? colors.white : defaultColor
+}
diff --git a/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/index.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/index.js
@@ -1,3 +1,3 @@
 export { getSingleValueCustomSVGOptions } from './config/getSingleValueCustomSVGOptions.js'
 export { getSingleValueBackgroundColor } from './config/getSingleValueBackgroundColor.js'
-export { getSingleValueTextColor } from './config/getSingleValueTextColor.js'
+export { getSingleValueTitleColor } from './config/getSingleValueTitleColor.js'
diff --git a/src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js b/src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js
@@ -7,6 +7,7 @@ import {
     FONT_STYLE_OPTION_TEXT_ALIGN,
     FONT_STYLE_VISUALIZATION_SUBTITLE,
     mergeFontStyleWithDefault,
+    defaultFontStyle,
 } from '../../../../../modules/fontStyle.js'
 import {
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
@@ -109,23 +110,34 @@ export default function (series, layout, metaData, extraOptions) {
 
     switch (layout.type) {
         case VIS_TYPE_SINGLE_VALUE:
-            subtitle.style.color = getSingleValueSubtitleColor(
-                fontStyle[FONT_STYLE_OPTION_TEXT_COLOR],
-                series[0],
-                legendOptions,
-                legendSets
-            )
-            if (dashboard) {
-                // Single value subtitle text should be multiline
-                /* TODO: The default color of the subtitle now is #4a5768 but the
-                 * original implementation used #666, which is a lighter grey.
-                 * If we want to keep this color, changes are needed here. */
-                Object.assign(subtitle.style, {
-                    wordWrap: 'normal',
-                    whiteSpace: 'normal',
-                    overflow: 'visible',
-                    textOverflow: 'initial',
-                })
+            {
+                const defaultColor =
+                    defaultFontStyle?.[FONT_STYLE_VISUALIZATION_SUBTITLE]?.[
+                        FONT_STYLE_OPTION_TEXT_COLOR
+                    ]
+                const customColor =
+                    layout?.fontStyle?.[FONT_STYLE_VISUALIZATION_SUBTITLE]?.[
+                        FONT_STYLE_OPTION_TEXT_COLOR
+                    ]
+                subtitle.style.color = getSingleValueSubtitleColor(
+                    customColor,
+                    defaultColor,
+                    series[0],
+                    legendOptions,
+                    legendSets
+                )
+                if (dashboard) {
+                    // Single value subtitle text should be multiline
+                    /* TODO: The default color of the subtitle now is #4a5768 but the
+                     * original implementation used #666, which is a lighter grey.
+                     * If we want to keep this color, changes are needed here. */
+                    Object.assign(subtitle.style, {
+                        wordWrap: 'normal',
+                        whiteSpace: 'normal',
+                        overflow: 'visible',
+                        textOverflow: 'initial',
+                    })
+                }
             }
             break
         default:

diff --git a/src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js b/src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js
@@ -1,5 +1,5 @@
 import getFilterText from '../../../../util/getFilterText.js'
-export { getSingleValueTextColor as getSingleValueSubtitleColor } from '../customSVGOptions/singleValue/index.js'
+export { getSingleValueTitleColor as getSingleValueSubtitleColor } from '../customSVGOptions/singleValue/index.js'
 
 export default function getSingleValueSubtitle(layout, metaData) {
     if (layout.hideSubtitle || 1 === 0) {

diff --git a/src/visualizations/config/adapters/dhis_highcharts/title/index.js b/src/visualizations/config/adapters/dhis_highcharts/title/index.js
@@ -7,6 +7,7 @@ import {
     FONT_STYLE_OPTION_TEXT_ALIGN,
     FONT_STYLE_VISUALIZATION_TITLE,
     mergeFontStyleWithDefault,
+    defaultFontStyle,
 } from '../../../../../modules/fontStyle.js'
 import {
     VIS_TYPE_YEAR_OVER_YEAR_LINE,
@@ -52,7 +53,6 @@ export default function (layout, metaData, extraOptions, series) {
             text: undefined,
         }
     }
-
     const { dashboard, legendSets } = extraOptions
     const legendOptions = layout.legend
     const fontStyle = mergeFontStyleWithDefault(
@@ -118,15 +118,26 @@ export default function (layout, metaData, extraOptions, series) {
 
     switch (layout.type) {
         case VIS_TYPE_SINGLE_VALUE:
-            title.style.color = getSingleValueTitleColor(
-                fontStyle[FONT_STYLE_OPTION_TEXT_COLOR],
-                series[0],
-                legendOptions,
-                legendSets
-            )
-            if (dashboard) {
-                // TODO: is this always what we want?
-                title.style.fontWeight = 'normal'
+            {
+                const defaultColor =
+                    defaultFontStyle?.[FONT_STYLE_VISUALIZATION_TITLE]?.[
+                        FONT_STYLE_OPTION_TEXT_COLOR
+                    ]
+                const customColor =
+                    layout?.fontStyle?.[FONT_STYLE_VISUALIZATION_TITLE]?.[
+                        FONT_STYLE_OPTION_TEXT_COLOR
+                    ]
+                title.style.color = getSingleValueTitleColor(
+                    customColor,
+                    defaultColor,
+                    series[0],
+                    legendOptions,
+                    legendSets
+                )
+                if (dashboard) {
+                    // TODO: is this always what we want?
+                    title.style.fontWeight = 'normal'
+                }
             }
             break
         default:

diff --git a/src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js b/src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js
@@ -1,5 +1,5 @@
 import getFilterText from '../../../../util/getFilterText.js'
-export { getSingleValueTextColor as getSingleValueTitleColor } from '../customSVGOptions/singleValue/index.js'
+export { getSingleValueTitleColor } from '../customSVGOptions/singleValue/index.js'
 
 export function getSingleValueTitleText(layout, metaData) {
     if (layout.hideTitle) {