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

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

@@ -0,0 +1,478 @@
+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,
+        })
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "26.2.0-alpha.1",
+    "version": "26.2.0-cumulative-values-alpha.1",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {

package/build/cjs/api/analytics/AnalyticsTrackedEntities.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _AnalyticsBase = _interopRequireDefault(require("./AnalyticsBase.js"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * @extends module:analytics.AnalyticsBase
- *
- * @description
- * Analytics tracked entities class used to request analytics tracked entities data from Web API.
- *
- * @memberof module:analytics
- */
-class AnalyticsTrackedEntities extends _AnalyticsBase.default {
-  /**
-   * @param {!AnalyticsRequest} req Request object
-   *
-   * @returns {Promise} Promise that resolves with the analytics query data from the api.
-   *
-   * @example
-      // TODO: provide working example
-   */
-  getQuery(req) {
-    return this.fetch(req.withPath('trackedEntities/query'));
-  }
-}
-var _default = AnalyticsTrackedEntities;
-exports.default = _default;

package/build/es/api/analytics/AnalyticsTrackedEntities.js

@@ -1,24 +0,0 @@
-import AnalyticsBase from './AnalyticsBase.js';
-
-/**
- * @extends module:analytics.AnalyticsBase
- *
- * @description
- * Analytics tracked entities class used to request analytics tracked entities data from Web API.
- *
- * @memberof module:analytics
- */
-class AnalyticsTrackedEntities extends AnalyticsBase {
-  /**
-   * @param {!AnalyticsRequest} req Request object
-   *
-   * @returns {Promise} Promise that resolves with the analytics query data from the api.
-   *
-   * @example
-      // TODO: provide working example
-   */
-  getQuery(req) {
-    return this.fetch(req.withPath('trackedEntities/query'));
-  }
-}
-export default AnalyticsTrackedEntities;