From b886121e324d707e160fbb6f2bd5249615f23e05 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 17 Oct 2024 16:54:36 +0200 Subject: [PATCH] fix: ensure title and subtitle use custom color also for dark background --- .../config/getSingleValueTitleColor.js | 34 ++++++++++++++ .../customSVGOptions/singleValue/index.js | 2 +- .../dhis_highcharts/subtitle/index.js | 46 ++++++++++++------- .../dhis_highcharts/subtitle/singleValue.js | 2 +- .../adapters/dhis_highcharts/title/index.js | 31 +++++++++---- .../dhis_highcharts/title/singleValue.js | 2 +- 6 files changed, 87 insertions(+), 30 deletions(-) create mode 100644 src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/config/getSingleValueTitleColor.js diff --git a/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/config/getSingleValueTitleColor.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/config/getSingleValueTitleColor.js new file mode 100644 index 000000000..20dcc599c --- /dev/null +++ b/src/visualizations/config/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 index a1923d808..adcb9194e 100644 --- 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 index 5a1467efd..6509c3e5a 100644 --- 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 index 2ba68032a..b7f37ba93 100644 --- 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 index c9d4f5ad1..7a86ec47f 100644 --- 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 index 82ae95417..ab3ceb375 100644 --- 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) {