@dhis2/analytics 26.2.0-cumulative-values-alpha.1 → 26.2.1

package/build/es/visualizations/config/generators/dhis/singleValue.js.xp1

@@ -1,478 +0,0 @@
-import { colors, spacers } 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'
-
-const generateValueSVG = ({
-    formattedValue,
-    subText,
-    valueColor,
-    icon,
-    noData,
-    containerWidth,
-    containerHeight,
-}) => {
-    const ratio = containerHeight / containerWidth
-    const iconSize = containerHeight * 0.8 //300
-    const iconPadding = 50
-    const textSize = iconSize * 0.85
-    const textWidth = textSize * 0.75 * formattedValue.length
-
-    const showIcon = icon && formattedValue !== noData.text
-
-    let viewBoxWidth = textWidth
-
-    if (showIcon) {
-        viewBoxWidth += iconSize + iconPadding
-    }
-
-    const viewBoxHeight = viewBoxWidth * ratio
-
-    const svgValue = document.createElementNS(svgNS, 'svg')
-    svgValue.setAttribute('viewBox', `0 0 ${viewBoxWidth} ${viewBoxHeight}`)
-    svgValue.setAttribute('width', containerWidth * 0.98)
-    svgValue.setAttribute('height', containerHeight * 0.98)
-    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
-    }
-
-    const group = document.createElementNS(svgNS, 'g')
-    //group.setAttribute('font-size', '4em') // XXX
-    group.setAttribute('style', `color: ${fillColor}`)
-
-    // show icon if configured in maintenance app
-    if (showIcon) {
-        const iconSvgNode = document.createElementNS(svgNS, 'svg')
-        iconSvgNode.setAttribute('width', iconSize)
-        iconSvgNode.setAttribute('height', iconSize)
-        iconSvgNode.setAttribute('viewBox', '0 0 48 48')
-        iconSvgNode.setAttribute('y', `-${iconSize / 2}`)
-        iconSvgNode.setAttribute('x', `-${(textWidth + iconPadding) / 2}`)
-        //iconSvgNode.setAttribute('style', `color: ${fillColor}`)
-
-        // embed icon to allow changing color
-        // (elements with fill need to use "currentColor" for this to work)
-        fetch(icon)
-            .then((res) => res.text())
-            .then((originalSvgIcon) =>
-                originalSvgIcon.replaceAll('#333333', 'currentColor')
-            )
-            .then((svgIcon) => {
-                const parser = new DOMParser()
-                const svgIconDocument = parser.parseFromString(
-                    svgIcon,
-                    'image/svg+xml'
-                )
-
-                Array.from(svgIconDocument.documentElement.children).forEach(
-                    (node) => {
-                        console.log('appending', node)
-
-                        iconSvgNode.appendChild(node)
-                    }
-                )
-                /*
-                Array.from(svgIconDocument.documentElement.childNodes).forEach((node) => {
-                    console.log('appending', node)
-                    iconSvgNode.appendChild(node)
-                })
-*/
-                //iconSvgNode.insertAdjacentHTML('beforeend', svgIcon)
-                //group.insertAdjacentHTML('beforeend', svgIcon)
-                group.appendChild(iconSvgNode)
-            })
-
-        //svgValue.appendChild(iconSvgNode)
-    }
-
-    const textNode = document.createElementNS(svgNS, 'text')
-    //textNode.setAttribute('font-size', textSize)
-    textNode.setAttribute('font-weight', '300')
-    textNode.setAttribute('letter-spacing', '-5')
-    textNode.setAttribute(
-        'x',
-        showIcon ? `-${(textWidth - iconPadding) / 2 - iconSize}` : 0
-    )
-    textNode.setAttribute('y', 0)
-    textNode.setAttribute('fill', fillColor)
-    textNode.setAttribute('alignment-baseline', 'central')
-    textNode.setAttribute('data-test', 'visualization-primary-value')
-
-    if (!showIcon) {
-        textNode.setAttribute('text-anchor', 'middle')
-    }
-
-    textNode.appendChild(document.createTextNode(formattedValue))
-
-    //    svgValue.appendChild(textNode)
-    group.appendChild(textNode)
-
-    // XXX
-    svgValue.appendChild(group)
-
-    if (subText) {
-        const subTextSize = 40
-
-        const subTextNode = document.createElementNS(svgNS, 'text')
-        subTextNode.setAttribute('text-anchor', 'middle')
-        subTextNode.setAttribute('font-size', subTextSize)
-        subTextNode.setAttribute('y', iconSize / 2)
-        subTextNode.setAttribute('fill', colors.grey600)
-        subTextNode.setAttribute('alignment-baseline', 'hanging')
-        subTextNode.appendChild(document.createTextNode(subText))
-
-        svgValue.appendChild(subTextNode)
-    }
-
-    return svgValue
-}
-
-const generateDashboardItem = (
-    config,
-    {
-        svgContainer,
-        width,
-        height,
-        valueColor,
-        titleColor,
-        backgroundColor,
-        noData,
-    }
-) => {
-    svgContainer.appendChild(
-        generateValueSVG({
-            formattedValue: config.formattedValue,
-            icon: config.icon,
-            subText: config.subText,
-            valueColor,
-            noData,
-            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%; background-color:${backgroundColor};`
-    )
-
-    const titleStyle = `font-size: 12px; color: ${
-        titleColor || '#666'
-    }; padding: 0 8px; text-align: center;`
-
-    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)
-    /*container.appendChild(
-        generateValueSVG({
-            formattedValue: config.formattedValue,
-            icon: config.icon,
-            subText: config.subText,
-            valueColor,
-            noData,
-            containerWidth: width,
-            containerHeight: height,
-        })
-    )*/
-
-    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,
-    }
-) => {
-    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')
-
-    const title = document.createElementNS(svgNS, 'text')
-    const titleFontStyle = mergeFontStyleWithDefault(
-        fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_TITLE],
-        FONT_STYLE_VISUALIZATION_TITLE
-    )
-    title.setAttribute(
-        'x',
-        getXFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN])
-    )
-    title.setAttribute('y', 28)
-    title.setAttribute(
-        'text-anchor',
-        getTextAnchorFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN])
-    )
-    title.setAttribute(
-        'font-size',
-        `${titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`
-    )
-    title.setAttribute(
-        'font-weight',
-        titleFontStyle[FONT_STYLE_OPTION_BOLD]
-            ? FONT_STYLE_OPTION_BOLD
-            : 'normal'
-    )
-    title.setAttribute(
-        'font-style',
-        titleFontStyle[FONT_STYLE_OPTION_ITALIC]
-            ? FONT_STYLE_OPTION_ITALIC
-            : 'normal'
-    )
-    if (
-        titleColor &&
-        titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] ===
-            defaultFontStyle[FONT_STYLE_VISUALIZATION_TITLE][
-                FONT_STYLE_OPTION_TEXT_COLOR
-            ]
-    ) {
-        title.setAttribute('fill', titleColor)
-    } else {
-        title.setAttribute('fill', titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR])
-    }
-
-    title.setAttribute('data-test', 'visualization-title')
-
-    if (config.title) {
-        title.appendChild(document.createTextNode(config.title))
-
-        svgWrapper.appendChild(title)
-    }
-
-    const subtitleFontStyle = mergeFontStyleWithDefault(
-        fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE],
-        FONT_STYLE_VISUALIZATION_SUBTITLE
-    )
-    const subtitle = document.createElementNS(svgNS, 'text')
-    subtitle.setAttribute(
-        'x',
-        getXFromTextAlign(subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN])
-    )
-    subtitle.setAttribute('y', 28)
-    subtitle.setAttribute('dy', 22)
-    subtitle.setAttribute(
-        'text-anchor',
-        getTextAnchorFromTextAlign(
-            subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]
-        )
-    )
-    subtitle.setAttribute(
-        'font-size',
-        `${subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`
-    )
-    subtitle.setAttribute(
-        'font-weight',
-        subtitleFontStyle[FONT_STYLE_OPTION_BOLD]
-            ? FONT_STYLE_OPTION_BOLD
-            : 'normal'
-    )
-    subtitle.setAttribute(
-        'font-style',
-        subtitleFontStyle[FONT_STYLE_OPTION_ITALIC]
-            ? FONT_STYLE_OPTION_ITALIC
-            : 'normal'
-    )
-
-    if (
-        titleColor &&
-        subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] ===
-            defaultFontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE][
-                FONT_STYLE_OPTION_TEXT_COLOR
-            ]
-    ) {
-        subtitle.setAttribute('fill', titleColor)
-    } else {
-        subtitle.setAttribute(
-            'fill',
-            subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR]
-        )
-    }
-
-    subtitle.setAttribute('data-test', 'visualization-subtitle')
-
-    if (config.subtitle) {
-        subtitle.appendChild(document.createTextNode(config.subtitle))
-
-        svgWrapper.appendChild(subtitle)
-    }
-
-    svgContainer.appendChild(svgWrapper)
-
-    svgContainer.appendChild(
-        generateValueSVG({
-            formattedValue: config.formattedValue,
-            icon: config.icon,
-            subText: config.subText,
-            valueColor,
-            noData,
-            containerWidth: width,
-            containerHeight: height,
-        })
-    )
-
-    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 }
-) {
-    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', '100%')
-    svgContainer.setAttribute('height', '100%')
-    svgContainer.setAttribute('data-test', 'visualization-container')
-
-    if (dashboard) {
-        parentEl.style.borderRadius = spacers.dp8
-
-        return generateDashboardItem(config, {
-            svgContainer,
-            width,
-            height,
-            valueColor,
-            backgroundColor,
-            noData,
-            ...(legendColor && shouldUseContrastColor(legendColor)
-                ? { titleColor: colors.white }
-                : {}),
-        })
-    } else {
-        parentEl.style.height = `100%`
-
-        return generateDVItem(config, {
-            svgContainer,
-            width,
-            height,
-            valueColor,
-            backgroundColor,
-            titleColor,
-            noData,
-            fontStyle,
-        })
-    }
-}