From 08922a22ddbac8248f617761a20d6838acb61aa2 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Mon, 23 Sep 2024 13:50:48 +0200 Subject: [PATCH] chore: remove old code --- .../config/adapters/dhis_dhis/index.js | 38 -- .../subtitle/__tests__/index.spec.js | 53 -- .../subtitle/__tests__/singleValue.spec.js | 15 - .../adapters/dhis_dhis/subtitle/index.js | 33 -- .../dhis_dhis/subtitle/singleValue.js | 5 - .../dhis_dhis/title/__tests__/index.spec.js | 36 -- .../title/__tests__/singleValue.spec.js | 21 - .../config/adapters/dhis_dhis/title/index.js | 30 - .../adapters/dhis_dhis/title/singleValue.js | 15 - .../config/adapters/dhis_dhis/type.js | 10 - .../config/adapters/dhis_dhis/value/index.js | 22 - .../config/generators/dhis/index.js | 36 -- .../config/generators/dhis/singleValue.js | 531 ------------------ .../store/adapters/dhis_dhis/index.js | 102 ---- .../store/adapters/dhis_dhis/singleValue.js | 5 - 15 files changed, 952 deletions(-) delete mode 100644 src/visualizations/config/adapters/dhis_dhis/index.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/subtitle/__tests__/index.spec.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/subtitle/__tests__/singleValue.spec.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/subtitle/index.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/subtitle/singleValue.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/title/__tests__/index.spec.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/title/__tests__/singleValue.spec.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/title/index.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/title/singleValue.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/type.js delete mode 100644 src/visualizations/config/adapters/dhis_dhis/value/index.js delete mode 100644 src/visualizations/config/generators/dhis/index.js delete mode 100644 src/visualizations/config/generators/dhis/singleValue.js delete mode 100644 src/visualizations/store/adapters/dhis_dhis/index.js delete mode 100644 src/visualizations/store/adapters/dhis_dhis/singleValue.js diff --git a/src/visualizations/config/adapters/dhis_dhis/index.js b/src/visualizations/config/adapters/dhis_dhis/index.js deleted file mode 100644 index 06a5256bf..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import getSubtitle from './subtitle/index.js' -import getTitle from './title/index.js' -import getValue from './value/index.js' - -export const INDICATOR_FACTOR_100 = 100 - -export default function ({ store, layout, extraOptions }) { - const data = store.generateData({ - type: layout.type, - seriesId: - layout.columns && layout.columns.length - ? layout.columns[0].dimension - : null, - categoryId: - layout.rows && layout.rows.length ? layout.rows[0].dimension : null, - }) - const metaData = store.data[0].metaData - - const config = { - value: data[0], - formattedValue: - data[0] === undefined - ? extraOptions.noData.text - : getValue(data[0], layout, metaData), - title: getTitle(layout, metaData, extraOptions.dashboard), - subtitle: getSubtitle(layout, metaData, extraOptions.dashboard), - } - - const indicatorType = - metaData.items[metaData.dimensions.dx[0]].indicatorType - - // Use % symbol for factor 100 and the full string for others - if (indicatorType?.factor !== INDICATOR_FACTOR_100) { - config.subText = indicatorType?.displayName - } - - return config -} diff --git a/src/visualizations/config/adapters/dhis_dhis/subtitle/__tests__/index.spec.js b/src/visualizations/config/adapters/dhis_dhis/subtitle/__tests__/index.spec.js deleted file mode 100644 index 486333c8c..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/subtitle/__tests__/index.spec.js +++ /dev/null @@ -1,53 +0,0 @@ -import { VIS_TYPE_SINGLE_VALUE } from '../../../../../../modules/visTypes.js' -import getSubtitle from '../index.js' - -jest.mock('../singleValue', () => () => 'The sv filter title') -jest.mock( - '../../../../../util/getFilterText', - () => () => 'The default filter text' -) - -describe('getSubtitle', () => { - it('returns empty subtitle when flag hideSubtitle exists', () => { - expect(getSubtitle({ hideSubtitle: true })).toEqual('') - }) - - it('returns the subtitle provided in the layout', () => { - const subtitle = 'The subtitle was already set' - expect(getSubtitle({ subtitle })).toEqual(subtitle) - }) - - it('returns subtitle for single value vis', () => { - expect(getSubtitle({ type: VIS_TYPE_SINGLE_VALUE })).toEqual( - 'The sv filter title' - ) - }) - - describe('not dashboard', () => { - describe('layout does not include title', () => { - it('returns empty subtitle', () => { - expect(getSubtitle({ filters: {} }, {}, false)).toEqual('') - }) - }) - - describe('layout includes title', () => { - it('returns filter title as subtitle', () => { - expect( - getSubtitle( - { filters: {}, title: 'Chart title' }, - {}, - false - ) - ).toEqual('The default filter text') - }) - }) - }) - - describe('dashboard', () => { - it('returns filter title as subtitle', () => { - expect(getSubtitle({ filters: {} }, {}, true)).toEqual( - 'The default filter text' - ) - }) - }) -}) diff --git a/src/visualizations/config/adapters/dhis_dhis/subtitle/__tests__/singleValue.spec.js b/src/visualizations/config/adapters/dhis_dhis/subtitle/__tests__/singleValue.spec.js deleted file mode 100644 index 39b497f64..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/subtitle/__tests__/singleValue.spec.js +++ /dev/null @@ -1,15 +0,0 @@ -import getSingleValueSubtitle from '../singleValue.js' - -jest.mock('../../../../../util/getFilterText', () => () => 'The filter text') - -describe('getSingleValueSubtitle', () => { - it('returns null when layout does not have filters', () => { - expect(getSingleValueSubtitle({})).toEqual('') - }) - - it('returns the filter text', () => { - expect(getSingleValueSubtitle({ filters: [] })).toEqual( - 'The filter text' - ) - }) -}) diff --git a/src/visualizations/config/adapters/dhis_dhis/subtitle/index.js b/src/visualizations/config/adapters/dhis_dhis/subtitle/index.js deleted file mode 100644 index 1be507be4..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/subtitle/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import { VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js' -import getFilterText from '../../../../util/getFilterText.js' -import getSingleValueTitle from './singleValue.js' - -function getDefault(layout, dashboard, metaData) { - if (dashboard || typeof layout.title === 'string') { - return getFilterText(layout.filters, metaData) - } - - return '' -} - -export default function (layout, metaData, dashboard) { - if (layout.hideSubtitle) { - return '' - } - - if (typeof layout.subtitle === 'string' && layout.subtitle.length) { - return layout.subtitle - } else { - let subtitle - switch (layout.type) { - case VIS_TYPE_SINGLE_VALUE: - subtitle = getSingleValueTitle(layout, metaData) - - break - default: - subtitle = getDefault(layout, dashboard, metaData) - } - - return subtitle - } -} diff --git a/src/visualizations/config/adapters/dhis_dhis/subtitle/singleValue.js b/src/visualizations/config/adapters/dhis_dhis/subtitle/singleValue.js deleted file mode 100644 index de246ba2f..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/subtitle/singleValue.js +++ /dev/null @@ -1,5 +0,0 @@ -import getFilterText from '../../../../util/getFilterText.js' - -export default function (layout, metaData) { - return layout.filters ? getFilterText(layout.filters, metaData) : '' -} diff --git a/src/visualizations/config/adapters/dhis_dhis/title/__tests__/index.spec.js b/src/visualizations/config/adapters/dhis_dhis/title/__tests__/index.spec.js deleted file mode 100644 index 15a4b8a56..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/title/__tests__/index.spec.js +++ /dev/null @@ -1,36 +0,0 @@ -import { VIS_TYPE_SINGLE_VALUE } from '../../../../../../modules/visTypes.js' -import getTitle from '../index.js' - -jest.mock('../singleValue', () => () => 'The sv filter title') -jest.mock('../../../../../util/getFilterText', () => () => 'The filter text') - -describe('getTitle', () => { - it('returns empty title when flag hideTitle exists', () => { - expect(getTitle({ hideTitle: true })).toEqual('') - }) - - it('returns the title provided in the layout', () => { - const title = 'The title was already set' - expect(getTitle({ title })).toEqual(title) - }) - - it('returns title for single value vis', () => { - expect(getTitle({ type: VIS_TYPE_SINGLE_VALUE })).toEqual( - 'The sv filter title' - ) - }) - - describe('not dashboard', () => { - it('returns filter text as title', () => { - expect(getTitle({ filters: {} }, {}, false)).toEqual( - 'The filter text' - ) - }) - }) - - describe('dashboard', () => { - it('returns empty string', () => { - expect(getTitle({ filters: {} }, {}, true)).toEqual('') - }) - }) -}) diff --git a/src/visualizations/config/adapters/dhis_dhis/title/__tests__/singleValue.spec.js b/src/visualizations/config/adapters/dhis_dhis/title/__tests__/singleValue.spec.js deleted file mode 100644 index 304be7bdb..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/title/__tests__/singleValue.spec.js +++ /dev/null @@ -1,21 +0,0 @@ -import getSingleValueTitle from '../singleValue.js' - -jest.mock('../../../../../util/getFilterText', () => () => 'The filter text') - -describe('getSingleValueTitle', () => { - it('returns null when layout does not have columns', () => { - expect(getSingleValueTitle({})).toEqual('') - }) - - it('returns the filter text based on column items', () => { - expect( - getSingleValueTitle({ - columns: [ - { - items: [{}], - }, - ], - }) - ).toEqual('The filter text') - }) -}) diff --git a/src/visualizations/config/adapters/dhis_dhis/title/index.js b/src/visualizations/config/adapters/dhis_dhis/title/index.js deleted file mode 100644 index fb4c6b040..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/title/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import { VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js' -import getFilterText from '../../../../util/getFilterText.js' -import getSingleValueTitle from './singleValue.js' - -function getDefault(layout, metaData, dashboard) { - return layout.filters && !dashboard - ? getFilterText(layout.filters, metaData) - : '' -} - -export default function (layout, metaData, dashboard) { - if (layout.hideTitle) { - return '' - } - - if (typeof layout.title === 'string' && layout.title.length) { - return layout.title - } else { - let title - switch (layout.type) { - case VIS_TYPE_SINGLE_VALUE: - title = getSingleValueTitle(layout, metaData) - - break - default: - title = getDefault(layout, metaData, dashboard) - } - return title - } -} diff --git a/src/visualizations/config/adapters/dhis_dhis/title/singleValue.js b/src/visualizations/config/adapters/dhis_dhis/title/singleValue.js deleted file mode 100644 index 802c866c0..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/title/singleValue.js +++ /dev/null @@ -1,15 +0,0 @@ -import getFilterText from '../../../../util/getFilterText.js' - -export default function (layout, metaData) { - if (layout.columns) { - const firstItem = layout.columns[0].items[0] - - const column = Object.assign({}, layout.columns[0], { - items: [firstItem], - }) - - return getFilterText([column], metaData) - } - - return '' -} diff --git a/src/visualizations/config/adapters/dhis_dhis/type.js b/src/visualizations/config/adapters/dhis_dhis/type.js deleted file mode 100644 index 412124e58..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/type.js +++ /dev/null @@ -1,10 +0,0 @@ -import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js' - -export default function (type) { - switch (type) { - case VIS_TYPE_SINGLE_VALUE: - return { type: VIS_TYPE_SINGLE_VALUE } - default: - return { type: VIS_TYPE_SINGLE_VALUE } - } -} diff --git a/src/visualizations/config/adapters/dhis_dhis/value/index.js b/src/visualizations/config/adapters/dhis_dhis/value/index.js deleted file mode 100644 index 508f1c9a4..000000000 --- a/src/visualizations/config/adapters/dhis_dhis/value/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import { renderValue } from '../../../../../modules/renderValue.js' -import { VALUE_TYPE_TEXT } from '../../../../../modules/valueTypes.js' -import { INDICATOR_FACTOR_100 } from '../index.js' - -export default function (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/generators/dhis/index.js b/src/visualizations/config/generators/dhis/index.js deleted file mode 100644 index b5a6c3958..000000000 --- a/src/visualizations/config/generators/dhis/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js' -import getSingleValueGenerator from './singleValue.js' - -export default function (config, parentEl, extraOptions) { - if (config) { - const node = - typeof parentEl === 'object' - ? parentEl - : typeof parentEl === 'string' - ? document.querySelector(parentEl) - : null - - if (node) { - if (node.lastChild) { - node.removeChild(node.lastChild) - } - - let content - - switch (config.type) { - case VIS_TYPE_SINGLE_VALUE: - default: - content = getSingleValueGenerator( - config, - node, - extraOptions - ) - break - } - - node.appendChild(content) - - return node.innerHTML - } - } -} diff --git a/src/visualizations/config/generators/dhis/singleValue.js b/src/visualizations/config/generators/dhis/singleValue.js deleted file mode 100644 index 25ec5bab9..000000000 --- a/src/visualizations/config/generators/dhis/singleValue.js +++ /dev/null @@ -1,531 +0,0 @@ -import { colors } from '@dhis2/ui' -import { - FONT_STYLE_VISUALIZATION_TITLE, - FONT_STYLE_VISUALIZATION_SUBTITLE, - FONT_STYLE_OPTION_FONT_SIZE, - FONT_STYLE_OPTION_TEXT_COLOR, - FONT_STYLE_OPTION_TEXT_ALIGN, - FONT_STYLE_OPTION_ITALIC, - FONT_STYLE_OPTION_BOLD, - TEXT_ALIGN_LEFT, - TEXT_ALIGN_RIGHT, - TEXT_ALIGN_CENTER, - mergeFontStyleWithDefault, - defaultFontStyle, -} from '../../../../modules/fontStyle.js' -import { - getColorByValueFromLegendSet, - LEGEND_DISPLAY_STYLE_FILL, -} from '../../../../modules/legends.js' - -const svgNS = 'http://www.w3.org/2000/svg' - -// multiply text width with this factor -// to get very close to actual text width -// nb: dependent on viewbox etc -const ACTUAL_TEXT_WIDTH_FACTOR = 0.9 - -// multiply value text size with this factor -// to get very close to the actual number height -// as numbers don't go below the baseline like e.g. "j" and "g" -const ACTUAL_NUMBER_HEIGHT_FACTOR = 0.67 - -// do not allow text width to exceed this threshold -// a threshold >1 does not really make sense but text width vs viewbox is complicated -const TEXT_WIDTH_CONTAINER_WIDTH_FACTOR = 1.3 - -// do not allow text size to exceed this -const TEXT_SIZE_CONTAINER_HEIGHT_FACTOR = 0.6 -const TEXT_SIZE_MAX_THRESHOLD = 400 - -// multiply text size with this factor -// to get an appropriate letter spacing -const LETTER_SPACING_TEXT_SIZE_FACTOR = (1 / 35) * -1 -const LETTER_SPACING_MIN_THRESHOLD = -6 -const LETTER_SPACING_MAX_THRESHOLD = -1 - -// fixed top margin above title/subtitle -const TOP_MARGIN_FIXED = 16 - -// multiply text size with this factor -// to get an appropriate sub text size -const SUB_TEXT_SIZE_FACTOR = 0.5 -const SUB_TEXT_SIZE_MIN_THRESHOLD = 26 -const SUB_TEXT_SIZE_MAX_THRESHOLD = 40 - -// multiply text size with this factor -// to get an appropriate icon padding -const ICON_PADDING_FACTOR = 0.3 - -// Compute text width before rendering -// Not exactly precise but close enough -const getTextWidth = (text, font) => { - const canvas = document.createElement('canvas') - const context = canvas.getContext('2d') - context.font = font - return Math.round( - context.measureText(text).width * ACTUAL_TEXT_WIDTH_FACTOR - ) -} - -const getTextHeightForNumbers = (textSize) => - textSize * ACTUAL_NUMBER_HEIGHT_FACTOR - -const getIconPadding = (textSize) => Math.round(textSize * ICON_PADDING_FACTOR) - -const getTextSize = ( - formattedValue, - containerWidth, - containerHeight, - showIcon -) => { - let size = Math.min( - Math.round(containerHeight * TEXT_SIZE_CONTAINER_HEIGHT_FACTOR), - TEXT_SIZE_MAX_THRESHOLD - ) - - const widthThreshold = Math.round( - containerWidth * TEXT_WIDTH_CONTAINER_WIDTH_FACTOR - ) - - const textWidth = - getTextWidth(formattedValue, `${size}px Roboto`) + - (showIcon ? getIconPadding(size) : 0) - - if (textWidth > widthThreshold) { - size = Math.round(size * (widthThreshold / textWidth)) - } - - return size -} - -const generateValueSVG = ({ - formattedValue, - subText, - valueColor, - textColor, - icon, - noData, - containerWidth, - containerHeight, - topMargin = 0, -}) => { - const showIcon = icon && formattedValue !== noData.text - - const textSize = getTextSize( - formattedValue, - containerWidth, - containerHeight, - showIcon - ) - - const textWidth = getTextWidth(formattedValue, `${textSize}px Roboto`) - - const iconSize = textSize - - const subTextSize = - textSize * SUB_TEXT_SIZE_FACTOR > SUB_TEXT_SIZE_MAX_THRESHOLD - ? SUB_TEXT_SIZE_MAX_THRESHOLD - : textSize * SUB_TEXT_SIZE_FACTOR < SUB_TEXT_SIZE_MIN_THRESHOLD - ? SUB_TEXT_SIZE_MIN_THRESHOLD - : textSize * SUB_TEXT_SIZE_FACTOR - - const svgValue = document.createElementNS(svgNS, 'svg') - svgValue.setAttribute('viewBox', `0 0 ${containerWidth} ${containerHeight}`) - svgValue.setAttribute('width', '50%') - svgValue.setAttribute('height', '50%') - svgValue.setAttribute('x', '50%') - svgValue.setAttribute('y', '50%') - svgValue.setAttribute('style', 'overflow: visible') - - let fillColor = colors.grey900 - - if (valueColor) { - fillColor = valueColor - } else if (formattedValue === noData.text) { - fillColor = colors.grey600 - } - - // show icon if configured in maintenance app - if (showIcon) { - // embed icon to allow changing color - // (elements with fill need to use "currentColor" for this to work) - const iconSvgNode = document.createElementNS(svgNS, 'svg') - iconSvgNode.setAttribute('viewBox', '0 0 48 48') - iconSvgNode.setAttribute('width', iconSize) - iconSvgNode.setAttribute('height', iconSize) - iconSvgNode.setAttribute('y', (iconSize / 2 - topMargin / 2) * -1) - iconSvgNode.setAttribute( - 'x', - `-${(iconSize + getIconPadding(textSize) + textWidth) / 2}` - ) - iconSvgNode.setAttribute('style', `color: ${fillColor}`) - iconSvgNode.setAttribute('data-test', 'visualization-icon') - - const parser = new DOMParser() - const svgIconDocument = parser.parseFromString(icon, 'image/svg+xml') - - Array.from(svgIconDocument.documentElement.children).forEach((node) => - iconSvgNode.appendChild(node) - ) - - svgValue.appendChild(iconSvgNode) - } - - const letterSpacing = Math.round(textSize * LETTER_SPACING_TEXT_SIZE_FACTOR) - - const textNode = document.createElementNS(svgNS, 'text') - textNode.setAttribute('font-size', textSize) - textNode.setAttribute('font-weight', '300') - textNode.setAttribute( - 'letter-spacing', - letterSpacing < LETTER_SPACING_MIN_THRESHOLD - ? LETTER_SPACING_MIN_THRESHOLD - : letterSpacing > LETTER_SPACING_MAX_THRESHOLD - ? LETTER_SPACING_MAX_THRESHOLD - : letterSpacing - ) - textNode.setAttribute('text-anchor', 'middle') - textNode.setAttribute( - 'x', - showIcon ? `${(iconSize + getIconPadding(textSize)) / 2}` : 0 - ) - textNode.setAttribute( - 'y', - topMargin / 2 + getTextHeightForNumbers(textSize) / 2 - ) - textNode.setAttribute('fill', fillColor) - textNode.setAttribute('data-test', 'visualization-primary-value') - - textNode.appendChild(document.createTextNode(formattedValue)) - - svgValue.appendChild(textNode) - - if (subText) { - const subTextNode = document.createElementNS(svgNS, 'text') - subTextNode.setAttribute('text-anchor', 'middle') - subTextNode.setAttribute('font-size', subTextSize) - subTextNode.setAttribute('y', iconSize / 2 + topMargin / 2) - subTextNode.setAttribute('dy', subTextSize * 1.7) - subTextNode.setAttribute('fill', textColor) - subTextNode.appendChild(document.createTextNode(subText)) - - svgValue.appendChild(subTextNode) - } - - return svgValue -} - -const generateDashboardItem = ( - config, - { - svgContainer, - width, - height, - valueColor, - titleColor, - backgroundColor, - noData, - icon, - } -) => { - svgContainer.appendChild( - generateValueSVG({ - formattedValue: config.formattedValue, - subText: config.subText, - valueColor, - textColor: titleColor, - noData, - icon, - containerWidth: width, - containerHeight: height, - }) - ) - - const container = document.createElement('div') - container.setAttribute( - 'style', - `display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding-top: 8px; ${ - backgroundColor ? `background-color:${backgroundColor};` : '' - }` - ) - - const titleStyle = `padding: 0 8px; text-align: center; font-size: 12px; color: ${ - titleColor || '#666' - };` - - const title = document.createElement('span') - title.setAttribute('style', titleStyle) - if (config.title) { - title.appendChild(document.createTextNode(config.title)) - - container.appendChild(title) - } - - if (config.subtitle) { - const subtitle = document.createElement('span') - subtitle.setAttribute('style', titleStyle + ' margin-top: 4px;') - - subtitle.appendChild(document.createTextNode(config.subtitle)) - - container.appendChild(subtitle) - } - - container.appendChild(svgContainer) - - return container -} - -const getTextAnchorFromTextAlign = (textAlign) => { - switch (textAlign) { - default: - case TEXT_ALIGN_LEFT: - return 'start' - case TEXT_ALIGN_CENTER: - return 'middle' - case TEXT_ALIGN_RIGHT: - return 'end' - } -} - -const getXFromTextAlign = (textAlign) => { - switch (textAlign) { - default: - case TEXT_ALIGN_LEFT: - return '1%' - case TEXT_ALIGN_CENTER: - return '50%' - case TEXT_ALIGN_RIGHT: - return '99%' - } -} - -const generateDVItem = ( - config, - { - svgContainer, - width, - height, - valueColor, - noData, - backgroundColor, - titleColor, - fontStyle, - icon, - } -) => { - if (backgroundColor) { - svgContainer.setAttribute( - 'style', - `background-color: ${backgroundColor};` - ) - - const background = document.createElementNS(svgNS, 'rect') - background.setAttribute('width', '100%') - background.setAttribute('height', '100%') - background.setAttribute('fill', backgroundColor) - svgContainer.appendChild(background) - } - - const svgWrapper = document.createElementNS(svgNS, 'svg') - - // title - const title = document.createElementNS(svgNS, 'text') - - const titleFontStyle = mergeFontStyleWithDefault( - fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_TITLE], - FONT_STYLE_VISUALIZATION_TITLE - ) - - const titleYPosition = - TOP_MARGIN_FIXED + - parseInt(titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]) + - 'px' - - const titleAttributes = { - x: getXFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]), - y: titleYPosition, - 'text-anchor': getTextAnchorFromTextAlign( - titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN] - ), - 'font-size': `${titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`, - 'font-weight': titleFontStyle[FONT_STYLE_OPTION_BOLD] - ? FONT_STYLE_OPTION_BOLD - : 'normal', - 'font-style': titleFontStyle[FONT_STYLE_OPTION_ITALIC] - ? FONT_STYLE_OPTION_ITALIC - : 'normal', - 'data-test': 'visualization-title', - fill: - titleColor && - titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] === - defaultFontStyle[FONT_STYLE_VISUALIZATION_TITLE][ - FONT_STYLE_OPTION_TEXT_COLOR - ] - ? titleColor - : titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR], - } - - Object.entries(titleAttributes).forEach(([key, value]) => - title.setAttribute(key, value) - ) - - if (config.title) { - title.appendChild(document.createTextNode(config.title)) - svgWrapper.appendChild(title) - } - - // subtitle - const subtitle = document.createElementNS(svgNS, 'text') - - const subtitleFontStyle = mergeFontStyleWithDefault( - fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE], - FONT_STYLE_VISUALIZATION_SUBTITLE - ) - - const subtitleAttributes = { - x: getXFromTextAlign(subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]), - y: titleYPosition, - dy: `${subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE] + 10}`, - 'text-anchor': getTextAnchorFromTextAlign( - subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN] - ), - 'font-size': `${subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`, - 'font-weight': subtitleFontStyle[FONT_STYLE_OPTION_BOLD] - ? FONT_STYLE_OPTION_BOLD - : 'normal', - 'font-style': subtitleFontStyle[FONT_STYLE_OPTION_ITALIC] - ? FONT_STYLE_OPTION_ITALIC - : 'normal', - fill: - titleColor && - subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] === - defaultFontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE][ - FONT_STYLE_OPTION_TEXT_COLOR - ] - ? titleColor - : subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR], - 'data-test': 'visualization-subtitle', - } - - Object.entries(subtitleAttributes).forEach(([key, value]) => - subtitle.setAttribute(key, value) - ) - - if (config.subtitle) { - subtitle.appendChild(document.createTextNode(config.subtitle)) - svgWrapper.appendChild(subtitle) - } - - svgContainer.appendChild(svgWrapper) - - svgContainer.appendChild( - generateValueSVG({ - formattedValue: config.formattedValue, - subText: config.subText, - valueColor, - textColor: titleColor, - noData, - icon, - containerWidth: width, - containerHeight: height, - topMargin: - TOP_MARGIN_FIXED + - ((config.title - ? parseInt(title.getAttribute('font-size')) - : 0) + - (config.subtitle - ? parseInt(subtitle.getAttribute('font-size')) - : 0)) * - 2.5, - }) - ) - - return svgContainer -} - -const shouldUseContrastColor = (inputColor = '') => { - // based on https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color - var color = - inputColor.charAt(0) === '#' ? inputColor.substring(1, 7) : inputColor - var r = parseInt(color.substring(0, 2), 16) // hexToR - var g = parseInt(color.substring(2, 4), 16) // hexToG - var b = parseInt(color.substring(4, 6), 16) // hexToB - var uicolors = [r / 255, g / 255, b / 255] - var c = uicolors.map((col) => { - if (col <= 0.03928) { - return col / 12.92 - } - return Math.pow((col + 0.055) / 1.055, 2.4) - }) - var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2] - return L <= 0.179 -} - -export default function ( - config, - parentEl, - { dashboard, legendSets, fontStyle, noData, legendOptions, icon } -) { - const legendSet = legendOptions && legendSets[0] - const legendColor = - legendSet && getColorByValueFromLegendSet(legendSet, config.value) - let valueColor, titleColor, backgroundColor - if (legendColor) { - if (legendOptions.style === LEGEND_DISPLAY_STYLE_FILL) { - backgroundColor = legendColor - valueColor = titleColor = - shouldUseContrastColor(legendColor) && colors.white - } else { - valueColor = legendColor - } - } - - parentEl.style.overflow = 'hidden' - parentEl.style.display = 'flex' - parentEl.style.justifyContent = 'center' - - const parentElBBox = parentEl.getBoundingClientRect() - const width = parentElBBox.width - const height = parentElBBox.height - - const svgContainer = document.createElementNS(svgNS, 'svg') - svgContainer.setAttribute('xmlns', svgNS) - svgContainer.setAttribute('viewBox', `0 0 ${width} ${height}`) - svgContainer.setAttribute('width', dashboard ? '100%' : width) - svgContainer.setAttribute('height', dashboard ? '100%' : height) - svgContainer.setAttribute('data-test', 'visualization-container') - - if (dashboard) { - parentEl.style.borderRadius = '3px' - - return generateDashboardItem(config, { - svgContainer, - width, - height, - valueColor, - backgroundColor, - noData, - icon, - ...(legendOptions.style === LEGEND_DISPLAY_STYLE_FILL && - legendColor && - shouldUseContrastColor(legendColor) - ? { titleColor: colors.white } - : {}), - }) - } else { - parentEl.style.height = `100%` - - return generateDVItem(config, { - svgContainer, - width, - height, - valueColor, - backgroundColor, - titleColor, - noData, - icon, - fontStyle, - }) - } -} diff --git a/src/visualizations/store/adapters/dhis_dhis/index.js b/src/visualizations/store/adapters/dhis_dhis/index.js deleted file mode 100644 index 62afa2342..000000000 --- a/src/visualizations/store/adapters/dhis_dhis/index.js +++ /dev/null @@ -1,102 +0,0 @@ -import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js' -import getSingleValue from './singleValue.js' - -const VALUE_ID = 'value' - -function getHeaderIdIndexMap(headers) { - const map = new Map() - - headers.forEach((header, index) => { - map.set(header.name, index) - }) - - return map -} - -function getPrefixedId(row, header) { - return (header.isPrefix ? header.name + '_' : '') + row[header.index] -} - -function getIdValueMap(rows, seriesHeader, categoryHeader, valueIndex) { - const map = new Map() - - let key - let value - - rows.forEach((row) => { - key = [ - ...(seriesHeader ? [getPrefixedId(row, seriesHeader)] : []), - ...(categoryHeader ? [getPrefixedId(row, categoryHeader)] : []), - ].join('-') - - value = row[valueIndex] - - map.set(key, value) - }) - - return map -} - -function getDefault(acc, seriesIds, categoryIds, idValueMap, metaData) { - seriesIds.forEach((seriesId) => { - const serieData = [] - - categoryIds.forEach((categoryId) => { - const value = idValueMap.get(`${seriesId}-${categoryId}`) - - // DHIS2-1261: 0 is a valid value - // undefined value means the key was not found within the rows - // in that case null is returned as value in the serie - serieData.push(value === undefined ? null : parseFloat(value)) - }) - - acc.push({ - id: seriesId, - name: metaData.items[seriesId].name, - data: serieData, - }) - }) - - return acc -} - -function getValueFunction(type) { - switch (type) { - case VIS_TYPE_SINGLE_VALUE: - return getSingleValue - default: - return getDefault - } -} - -export default function ({ type, data, seriesId, categoryId }) { - const valueFunction = getValueFunction(type) - - return data.reduce((acc, res) => { - const headers = res.headers - const metaData = res.metaData - const rows = res.rows - const headerIdIndexMap = getHeaderIdIndexMap(headers) - - const seriesIndex = headerIdIndexMap.get(seriesId) - const categoryIndex = headerIdIndexMap.get(categoryId) - const valueIndex = headerIdIndexMap.get(VALUE_ID) - - const seriesHeader = headers[seriesIndex] - const categoryHeader = headers[categoryIndex] - - const idValueMap = getIdValueMap( - rows, - seriesHeader, - categoryHeader, - valueIndex - ) - - const seriesIds = metaData.dimensions[seriesId] - const categoryIds = metaData.dimensions[categoryId] - - valueFunction(acc, seriesIds, categoryIds, idValueMap, metaData) - - return acc - }, []) -} diff --git a/src/visualizations/store/adapters/dhis_dhis/singleValue.js b/src/visualizations/store/adapters/dhis_dhis/singleValue.js deleted file mode 100644 index 159838d82..000000000 --- a/src/visualizations/store/adapters/dhis_dhis/singleValue.js +++ /dev/null @@ -1,5 +0,0 @@ -export default function (acc, seriesIds, categoryIds, idValueMap) { - const seriesId = seriesIds[0] - - acc.push(idValueMap.get(seriesId)) -}