From bd8158b355b449d621baa18110d567e55bdf8c32 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 12 Sep 2024 16:36:18 +0200 Subject: [PATCH] refactor: implement single value config via Highcharts adapter --- .../config/adapters/dhis_highcharts/chart.js | 20 ++-- .../{custom => customSVGOptions}/index.js | 21 +++- .../getSingleValueBackgroundColor.js | 17 +++ .../getSingleValueCustomSVGOptions.js | 47 ++++++++ .../getSingleValueFormattedValue.js | 23 ++++ .../singleValue/getSingleValueLegendColor.js | 8 ++ .../singleValue/getSingleValueTextColor.js | 27 +++++ .../customSVGOptions/singleValue/index.js | 3 + .../singleValue}/shouldUseContrastColor.js | 0 .../config/adapters/dhis_highcharts/index.js | 34 +++--- .../config/adapters/dhis_highcharts/noData.js | 7 +- .../dhis_highcharts/subtitle/index.js | 94 +++++++++------- .../dhis_highcharts/subtitle/singleValue.js | 1 + .../adapters/dhis_highcharts/title/index.js | 101 +++++++++++------- .../dhis_highcharts/title/singleValue.js | 3 +- .../config/generators/dhis/singleValue.js | 1 + .../config/generators/highcharts/index.js | 2 +- .../highcharts/renderSingleValueSvg/index.js | 2 +- 18 files changed, 301 insertions(+), 110 deletions(-) rename src/visualizations/config/adapters/dhis_highcharts/{custom => customSVGOptions}/index.js (54%) create mode 100644 src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueBackgroundColor.js create mode 100644 src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueCustomSVGOptions.js create mode 100644 src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueFormattedValue.js create mode 100644 src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueLegendColor.js create mode 100644 src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueTextColor.js create mode 100644 src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/index.js rename src/visualizations/config/{generators/highcharts/renderSingleValueSvg => adapters/dhis_highcharts/customSVGOptions/singleValue}/shouldUseContrastColor.js (100%) diff --git a/src/visualizations/config/adapters/dhis_highcharts/chart.js b/src/visualizations/config/adapters/dhis_highcharts/chart.js index df229c4f3..be264f100 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/chart.js +++ b/src/visualizations/config/adapters/dhis_highcharts/chart.js @@ -1,4 +1,6 @@ -import { renderCustomSVG } from './custom/index.js' +import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js' +import { renderCustomSVG } from './customSVGOptions/index.js' +import { getSingleValueBackgroundColor } from './customSVGOptions/singleValue/index.js' import getType from './type.js' const DEFAULT_CHART = { @@ -37,16 +39,22 @@ const getEvents = () => ({ }, }) -export default function (layout, el, dashboard) { +export default function (layout, el, extraOptions, series) { return Object.assign( {}, getType(layout.type), { renderTo: el || layout.el }, DEFAULT_CHART, - dashboard ? DASHBOARD_CHART : undefined, + extraOptions.dashboard ? DASHBOARD_CHART : undefined, getEvents(), - { - backgroundColor: 'red', - } + layout.type === VIS_TYPE_SINGLE_VALUE + ? { + backgroundColor: getSingleValueBackgroundColor( + extraOptions.legendOptions, + extraOptions.legendSets, + series[0] + ), + } + : undefined ) } diff --git a/src/visualizations/config/adapters/dhis_highcharts/custom/index.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/index.js similarity index 54% rename from src/visualizations/config/adapters/dhis_highcharts/custom/index.js rename to src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/index.js index a89d8e42b..2bfb781b9 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/custom/index.js +++ b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/index.js @@ -1,4 +1,5 @@ import { VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js' +import { getSingleValueCustomSVGOptions } from './singleValue/index.js' export function renderCustomSVG() { const renderer = this.renderer @@ -6,14 +7,20 @@ export function renderCustomSVG() { switch (options.visualizationType) { case VIS_TYPE_SINGLE_VALUE: - console.log('now render SV viz', renderer, options) + console.log('now render SV viz', this) break default: break } } -export function getCustomSVGOptions({ layout }) { +export function getCustomSVGOptions({ + extraConfig, + layout, + extraOptions, + metaData, + series, +}) { const baseOptions = { visualizationType: layout.type, } @@ -21,9 +28,15 @@ export function getCustomSVGOptions({ layout }) { case VIS_TYPE_SINGLE_VALUE: return { ...baseOptions, - test: 1, + ...getSingleValueCustomSVGOptions({ + extraConfig, + layout, + extraOptions, + metaData, + series, + }), } default: - return null + break } } diff --git a/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueBackgroundColor.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueBackgroundColor.js new file mode 100644 index 000000000..650c895a5 --- /dev/null +++ b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueBackgroundColor.js @@ -0,0 +1,17 @@ +import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../modules/legends.js' +import { getSingleValueLegendColor } from './getSingleValueLegendColor.js' + +export function getSingleValueBackgroundColor( + legendOptions, + legendSets, + value +) { + const legendColor = getSingleValueLegendColor( + legendOptions, + legendSets, + value + ) + return legendColor && legendOptions.style === LEGEND_DISPLAY_STYLE_FILL + ? legendColor + : 'transparent' +} diff --git a/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueCustomSVGOptions.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueCustomSVGOptions.js new file mode 100644 index 000000000..4e482a333 --- /dev/null +++ b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueCustomSVGOptions.js @@ -0,0 +1,47 @@ +import { getSingleValueFormattedValue } from './getSingleValueFormattedValue.js' + +export function getSingleValueCustomSVGOptions({ + extraConfig, + layout, + extraOptions, + metaData, + series, +}) { + const { dashboard, legendSets, fontStyle, noData, legendOptions, icon } = + extraOptions + const value = series[0] + + console.log( + '++++setSingleValueOptions++++', + '\nextraConfig: ', + extraConfig, + '\nlayout: ', + layout, + '\nmetaData: ', + metaData, + '\nseries: ', + series, + '\ndashboard: ', + dashboard, + '\nlegendSets: ', + legendSets, + '\nfontStyle: ', + fontStyle, + '\nnoData: ', + noData, + '\nlegendOptions: ', + legendOptions, + '\nicon: ', + icon, + '\n=============' + ) + const customSVGOptions = { + value, + formattedValue: getSingleValueFormattedValue(value, layout, metaData), + icon, + dashboard, + subText: 'Test', + } + console.log('singleValueCustomSvgOptions', customSVGOptions) + return customSVGOptions +} diff --git a/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueFormattedValue.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueFormattedValue.js new file mode 100644 index 000000000..f0b91dee3 --- /dev/null +++ b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueFormattedValue.js @@ -0,0 +1,23 @@ +import { renderValue } from '../../../../../../modules/renderValue.js' +import { VALUE_TYPE_TEXT } from '../../../../../../modules/valueTypes.js' + +export const INDICATOR_FACTOR_100 = 100 + +export function getSingleValueFormattedValue(value, layout, metaData) { + const valueType = metaData.items[metaData.dimensions.dx[0]].valueType + const indicatorType = + metaData.items[metaData.dimensions.dx[0]].indicatorType + + let formattedValue = renderValue(value, valueType || VALUE_TYPE_TEXT, { + digitGroupSeparator: layout.digitGroupSeparator, + skipRounding: layout.skipRounding, + }) + + // only show the percentage symbol for per cent + // for other factors, show the full text under the value + if (indicatorType?.factor === INDICATOR_FACTOR_100) { + formattedValue += '%' + } + + return formattedValue +} diff --git a/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueLegendColor.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueLegendColor.js new file mode 100644 index 000000000..9f042fc4d --- /dev/null +++ b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueLegendColor.js @@ -0,0 +1,8 @@ +import { getColorByValueFromLegendSet } from '../../../../../../modules/legends.js' + +export function getSingleValueLegendColor(legendOptions, legendSets, value) { + const legendSet = legendOptions && legendSets[0] + return legendSet + ? getColorByValueFromLegendSet(legendSet, value) + : undefined +} diff --git a/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueTextColor.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueTextColor.js new file mode 100644 index 000000000..109c71fb9 --- /dev/null +++ b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueTextColor.js @@ -0,0 +1,27 @@ +import { colors } from '@dhis2/ui' +import { LEGEND_DISPLAY_STYLE_TEXT } from '../../../../../../modules/legends.js' +import { getSingleValueLegendColor } from './getSingleValueLegendColor.js' +import { shouldUseContrastColor } from './shouldUseContrastColor.js' + +export function getSingleValueTextColor( + baseColor, + value, + legendOptions, + legendSets +) { + const legendColor = getSingleValueLegendColor( + legendOptions, + legendSets, + value + ) + + if (!legendColor) { + return baseColor + } + + if (LEGEND_DISPLAY_STYLE_TEXT) { + return legendColor + } + + return shouldUseContrastColor(legendColor) ? colors.white : baseColor +} diff --git a/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/index.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/index.js new file mode 100644 index 000000000..892761190 --- /dev/null +++ b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/index.js @@ -0,0 +1,3 @@ +export { getSingleValueCustomSVGOptions } from './getSingleValueCustomSVGOptions.js' +export { getSingleValueBackgroundColor } from './getSingleValueBackgroundColor.js' +export { getSingleValueTextColor } from './getSingleValueTextColor.js' diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/shouldUseContrastColor.js b/src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/shouldUseContrastColor.js similarity index 100% rename from src/visualizations/config/generators/highcharts/renderSingleValueSvg/shouldUseContrastColor.js rename to src/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/shouldUseContrastColor.js diff --git a/src/visualizations/config/adapters/dhis_highcharts/index.js b/src/visualizations/config/adapters/dhis_highcharts/index.js index 4538cfd22..f9e97469b 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/index.js +++ b/src/visualizations/config/adapters/dhis_highcharts/index.js @@ -15,7 +15,7 @@ import { import { defaultMultiAxisTheme1 } from '../../../util/colors/themes.js' import addTrendLines, { isRegressionIneligible } from './addTrendLines.js' import getChart from './chart.js' -import { getCustomSVGOptions } from './custom/index.js' +import { getCustomSVGOptions } from './customSVGOptions/index.js' import getScatterData from './getScatterData.js' import getSortedConfig from './getSortedConfig.js' import getTrimmedConfig from './getTrimmedConfig.js' @@ -78,21 +78,17 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) { let config = { // type etc - chart: getChart(_layout, el, _extraOptions.dashboard), + chart: getChart(_layout, el, _extraOptions, series), // title - title: getTitle( - _layout, - store.data[0].metaData, - _extraOptions.dashboard - ), + title: getTitle(_layout, store.data[0].metaData, _extraOptions, series), // subtitle subtitle: getSubtitle( series, _layout, store.data[0].metaData, - _extraOptions.dashboard + _extraOptions ), // x-axis @@ -128,7 +124,7 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) { noData: _extraOptions.noData.text, resetZoom: _extraOptions.resetZoom.text, }, - noData: getNoData(), + noData: getNoData(_layout.type), // credits credits: { @@ -140,6 +136,19 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) { // disable exporting context menu enabled: false, }, + + /* The config object passed to the Highcharts Chart constructor + * can contain arbitrary properties, which are made accessible + * under the Chart instance's `userOptions` member. This means + * that in event callback functions the custom SVG options are + * accessible as `this.userOptions.customSVGOptions` */ + customSVGOptions: getCustomSVGOptions({ + extraConfig, + layout: _layout, + extraOptions: _extraOptions, + metaData: store.data[0].metaData, + series, + }), } // get plot options for scatter @@ -232,13 +241,6 @@ export default function ({ store, layout, el, extraConfig, extraOptions }) { ) } - /* The config object passed to the Highcharts Chart constructor - * can contain arbitrary properties, which are made accessible - * under the Chart instance's `userOptions` member. This means - * that in event callback functions the custom SVG options are - * accessible as `this.userOptions.customSVGOptions` */ - config.customSVGOptions = getCustomSVGOptions({ layout }) - // force apply extra config Object.assign(config, extraConfig) diff --git a/src/visualizations/config/adapters/dhis_highcharts/noData.js b/src/visualizations/config/adapters/dhis_highcharts/noData.js index 8597b5ccd..b2f40d7ff 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/noData.js +++ b/src/visualizations/config/adapters/dhis_highcharts/noData.js @@ -1,8 +1,13 @@ -export default function () { +import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js' + +export default function (visualizationType) { return { style: { fontSize: '13px', fontWeight: 'normal', + /* Hide no data label for single value visualizations because + * the data is always missing. */ + opacity: visualizationType === VIS_TYPE_SINGLE_VALUE ? 0 : 1, }, } } diff --git a/src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js b/src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js index 0e7515a94..a317f1a9b 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js +++ b/src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js @@ -18,7 +18,9 @@ import { import getFilterText from '../../../../util/getFilterText.js' import { getTextAlignOption } from '../getTextAlignOption.js' import getYearOverYearTitle from '../title/yearOverYear.js' -import getSingleValueSubtitle from './singleValue.js' +import getSingleValueSubtitle, { + getSingleValueSubtitleColor, +} from './singleValue.js' const DASHBOARD_SUBTITLE = { style: { @@ -33,23 +35,47 @@ const DASHBOARD_SUBTITLE = { } function getDefault(layout, dashboard, filterTitle) { - return { - text: dashboard || isString(layout.title) ? filterTitle : undefined, - } + return dashboard || isString(layout.title) ? filterTitle : undefined } -export default function (series, layout, metaData, dashboard) { +export default function (series, layout, metaData, extraOptions) { + if (layout.hideSubtitle) { + return null + } + + const { dashboard, legendSets, legendOptions } = extraOptions const fontStyle = mergeFontStyleWithDefault( layout.fontStyle && layout.fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE], FONT_STYLE_VISUALIZATION_SUBTITLE ) - let subtitle = { - text: undefined, - } - - if (layout.hideSubtitle) { - return null - } + const subtitle = Object.assign( + { + text: undefined, + }, + dashboard + ? DASHBOARD_SUBTITLE + : { + align: getTextAlignOption( + fontStyle[FONT_STYLE_OPTION_TEXT_ALIGN], + FONT_STYLE_VISUALIZATION_SUBTITLE, + isVerticalType(layout.type) + ), + style: { + // DHIS2-578: dynamically truncate subtitle when it's taking more than 1 line + color: undefined, + fontSize: `${fontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`, + fontWeight: fontStyle[FONT_STYLE_OPTION_BOLD] + ? FONT_STYLE_OPTION_BOLD + : 'normal', + fontStyle: fontStyle[FONT_STYLE_OPTION_ITALIC] + ? FONT_STYLE_OPTION_ITALIC + : 'normal', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + } + ) // DHIS2-578: allow for optional custom subtitle const customSubtitle = @@ -76,37 +102,23 @@ export default function (series, layout, metaData, dashboard) { subtitle.text = filterTitle break default: - subtitle = getDefault(layout, dashboard, filterTitle) + subtitle.text = getDefault(layout, dashboard, filterTitle) } } + switch (layout.type) { + case VIS_TYPE_SINGLE_VALUE: + subtitle.style.color = getSingleValueSubtitleColor( + fontStyle[FONT_STYLE_OPTION_TEXT_COLOR], + series[0], + legendOptions, + legendSets + ) + break + default: + subtitle.style.color = fontStyle[FONT_STYLE_OPTION_TEXT_COLOR] + break + } + return subtitle - ? Object.assign( - {}, - dashboard - ? DASHBOARD_SUBTITLE - : { - align: getTextAlignOption( - fontStyle[FONT_STYLE_OPTION_TEXT_ALIGN], - FONT_STYLE_VISUALIZATION_SUBTITLE, - isVerticalType(layout.type) - ), - style: { - // DHIS2-578: dynamically truncate subtitle when it's taking more than 1 line - color: fontStyle[FONT_STYLE_OPTION_TEXT_COLOR], - fontSize: `${fontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`, - fontWeight: fontStyle[FONT_STYLE_OPTION_BOLD] - ? FONT_STYLE_OPTION_BOLD - : 'normal', - fontStyle: fontStyle[FONT_STYLE_OPTION_ITALIC] - ? FONT_STYLE_OPTION_ITALIC - : 'normal', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, - subtitle - ) - : subtitle } diff --git a/src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js b/src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js index 15b2b6fa8..4bf8b394a 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js +++ b/src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js @@ -1,4 +1,5 @@ import getFilterText from '../../../../util/getFilterText.js' +export { getSingleValueTextColor as getSingleValueSubtitleColor } from '../customSVGOptions/singleValue/index.js' export default function getSingleValueSubtitle(layout, metaData) { if (layout.hideSubtitle) { diff --git a/src/visualizations/config/adapters/dhis_highcharts/title/index.js b/src/visualizations/config/adapters/dhis_highcharts/title/index.js index 40029e42f..75000cd93 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/title/index.js +++ b/src/visualizations/config/adapters/dhis_highcharts/title/index.js @@ -19,7 +19,10 @@ import { import getFilterText from '../../../../util/getFilterText.js' import { getTextAlignOption } from '../getTextAlignOption.js' import getScatterTitle from './scatter.js' -import getSingleValueTitle from './singleValue.js' +import { + getSingleValueTitleColor, + getSingleValueTitleText, +} from './singleValue.js' import getYearOverYearTitle from './yearOverYear.js' const DASHBOARD_TITLE_STYLE = { @@ -43,45 +46,22 @@ function getDefault(layout, metaData, dashboard) { return null } -export default function (layout, metaData, dashboard) { - const fontStyle = mergeFontStyleWithDefault( - layout.fontStyle && layout.fontStyle[FONT_STYLE_VISUALIZATION_TITLE], - FONT_STYLE_VISUALIZATION_TITLE - ) - - const title = { - text: undefined, - } - +export default function (layout, metaData, extraOptions, series) { if (layout.hideTitle) { - return title - } - - const customTitle = (layout.title && layout.displayTitle) || layout.title - - if (isString(customTitle) && customTitle.length) { - title.text = customTitle - } else { - switch (layout.type) { - case VIS_TYPE_SINGLE_VALUE: - title.text = getSingleValueTitle(layout, metaData, dashboard) - break - case VIS_TYPE_GAUGE: - case VIS_TYPE_YEAR_OVER_YEAR_LINE: - case VIS_TYPE_YEAR_OVER_YEAR_COLUMN: - title.text = getYearOverYearTitle(layout, metaData, dashboard) - break - case VIS_TYPE_SCATTER: - title.text = getScatterTitle(layout, metaData, dashboard) - break - default: - title.text = getDefault(layout, metaData, dashboard) - break + return { + text: undefined, } } - return Object.assign( - {}, + const { dashboard, legendSets, legendOptions } = extraOptions + const fontStyle = mergeFontStyleWithDefault( + layout.fontStyle && layout.fontStyle[FONT_STYLE_VISUALIZATION_TITLE], + FONT_STYLE_VISUALIZATION_TITLE + ) + const title = Object.assign( + { + text: undefined, + }, dashboard ? DASHBOARD_TITLE_STYLE : { @@ -92,7 +72,7 @@ export default function (layout, metaData, dashboard) { isVerticalType(layout.type) ), style: { - color: fontStyle[FONT_STYLE_OPTION_TEXT_COLOR], + color: undefined, fontSize: `${fontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`, fontWeight: fontStyle[FONT_STYLE_OPTION_BOLD] ? FONT_STYLE_OPTION_BOLD @@ -104,7 +84,50 @@ export default function (layout, metaData, dashboard) { overflow: 'hidden', textOverflow: 'ellipsis', }, - }, - title + } ) + + const customTitleText = + (layout.title && layout.displayTitle) || layout.title + + if (isString(customTitleText) && customTitleText.length) { + title.text = customTitleText + } else { + switch (layout.type) { + case VIS_TYPE_SINGLE_VALUE: + title.text = getSingleValueTitleText( + layout, + metaData, + dashboard + ) + break + case VIS_TYPE_GAUGE: + case VIS_TYPE_YEAR_OVER_YEAR_LINE: + case VIS_TYPE_YEAR_OVER_YEAR_COLUMN: + title.text = getYearOverYearTitle(layout, metaData, dashboard) + break + case VIS_TYPE_SCATTER: + title.text = getScatterTitle(layout, metaData, dashboard) + break + default: + title.text = getDefault(layout, metaData, dashboard) + break + } + } + + switch (layout.type) { + case VIS_TYPE_SINGLE_VALUE: + title.style.color = getSingleValueTitleColor( + fontStyle[FONT_STYLE_OPTION_TEXT_COLOR], + series[0], + legendOptions, + legendSets + ) + break + default: + title.style.color = fontStyle[FONT_STYLE_OPTION_TEXT_COLOR] + break + } + + return title } diff --git a/src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js b/src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js index 0d779eed0..82ae95417 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js +++ b/src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js @@ -1,6 +1,7 @@ import getFilterText from '../../../../util/getFilterText.js' +export { getSingleValueTextColor as getSingleValueTitleColor } from '../customSVGOptions/singleValue/index.js' -export default function (layout, metaData, dashboard) { +export function getSingleValueTitleText(layout, metaData) { if (layout.hideTitle) { return '' } diff --git a/src/visualizations/config/generators/dhis/singleValue.js b/src/visualizations/config/generators/dhis/singleValue.js index 934e14fdb..07c57854f 100644 --- a/src/visualizations/config/generators/dhis/singleValue.js +++ b/src/visualizations/config/generators/dhis/singleValue.js @@ -468,6 +468,7 @@ export default function ( parentEl, { dashboard, legendSets, fontStyle, noData, legendOptions, icon } ) { + console.log('CONFIG OLD', config) const legendSet = legendOptions && legendSets[0] const legendColor = legendSet && getColorByValueFromLegendSet(legendSet, config.value) diff --git a/src/visualizations/config/generators/highcharts/index.js b/src/visualizations/config/generators/highcharts/index.js index 5356cc27f..07fca2f68 100644 --- a/src/visualizations/config/generators/highcharts/index.js +++ b/src/visualizations/config/generators/highcharts/index.js @@ -78,7 +78,7 @@ export function highcharts(config, el) { // silence warning about accessibility config.accessibility = { enabled: false } - + console.log('Homt ie hier?', config) if (config.lang) { H.setOptions({ lang: config.lang, diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/index.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/index.js index be1fc9cde..35c1c4769 100644 --- a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/index.js +++ b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/index.js @@ -3,8 +3,8 @@ import { getColorByValueFromLegendSet, LEGEND_DISPLAY_STYLE_FILL, } from '../../../../../modules/legends.js' +import { shouldUseContrastColor } from '../../../adapters/dhis_highcharts/customSVGOptions/singleValue/shouldUseContrastColor.js' import { generateDVItem } from './generateDVItem.js' -import { shouldUseContrastColor } from './shouldUseContrastColor.js' export default function ( config,