@dhis2/analytics 25.0.0 → 25.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [25.1.0](https://github.com/dhis2/analytics/compare/v25.0.0...v25.1.0) (2023-04-27)
+
+
+### Features
+
+* icon in SV visualization DHIS2-10496 ([#1440](https://github.com/dhis2/analytics/issues/1440)) ([e6563ca](https://github.com/dhis2/analytics/commit/e6563cacc5e901a04d5432330b09b685936ddd70))
+
 # [25.0.0](https://github.com/dhis2/analytics/compare/v24.10.1...v25.0.0) (2023-04-24)
 
 

package/build/cjs/components/DataDimension/Calculation/CalculationModal.js

@@ -415,7 +415,8 @@ const CalculationModal = _ref => {
     loading: isCreatingCalculation || isUpdatingCalculation || isSavingCalculation,
     dataTest: "save-button"
   }, _index.default.t('Save calculation')))))), showDeletePrompt && /*#__PURE__*/_react.default.createElement(_ui.Modal, {
-    small: true
+    small: true,
+    dataTest: "calculation-delete-modal"
   }, /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _index.default.t('Delete calculation')), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, _index.default.t('Are you sure you want to delete this calculation? It may be used by other visualizations.')), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.ButtonStrip, {
     end: true
   }, /*#__PURE__*/_react.default.createElement(_ui.Button, {

package/build/cjs/components/DataDimension/Calculation/DataElementOption.js

@@ -58,6 +58,7 @@ const DataElementOption = _ref => {
     className: "jsx-".concat(_DataElementOptionStyle.default.__hash) + " " + (listeners && listeners.className != null && listeners.className || attributes && attributes.className != null && attributes.className || "draggable-item")
   }), /*#__PURE__*/_react.default.createElement("div", {
     onDoubleClick: () => onDoubleClick(data),
+    "data-test": "data-element-option",
     className: "jsx-".concat(_DataElementOptionStyle.default.__hash) + " " + "chip"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "jsx-".concat(_DataElementOptionStyle.default.__hash) + " " + "icon"

package/build/cjs/components/DataDimension/Calculation/DataElementSelector.js

@@ -76,11 +76,13 @@ const GroupSelector = _ref => {
   }, defaultGroup ? /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
     value: defaultGroup.id,
     key: defaultGroup.id,
-    label: defaultGroup.getName()
+    label: defaultGroup.getName(),
+    dataTest: "data-element-group-select-option-".concat(defaultGroup.id)
   }) : null, !loading ? groups.map(group => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
     value: group.id,
     key: group.id,
-    label: group.name
+    label: group.name,
+    dataTest: "data-element-group-select-option-".concat(group.id)
   })) : null), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _DataElementSelectorStyle.default.__hash
   }, _DataElementSelectorStyle.default));
@@ -108,7 +110,8 @@ const DisaggregationSelector = _ref2 => {
   }, Object.entries(options).map(option => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
     value: option[0],
     key: option[0],
-    label: option[1]
+    label: option[1],
+    dataTest: "data-element-disaggregation-select-option-".concat(option[0])
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _DataElementSelectorStyle.default.__hash
   }, _DataElementSelectorStyle.default));

package/build/cjs/components/DataDimension/Calculation/FormulaField.js

@@ -35,7 +35,7 @@ const FORMULA_BOX_ID = 'formulabox';
 exports.FORMULA_BOX_ID = FORMULA_BOX_ID;
 
 const Placeholder = () => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": 'placeholder',
+  "data-test": "placeholder",
   className: "jsx-".concat(_FormulaFieldStyle.default.__hash) + " " + "placeholder"
 }, /*#__PURE__*/_react.default.createElement(_FormulaIcon.default, null), /*#__PURE__*/_react.default.createElement("span", {
   className: "jsx-".concat(_FormulaFieldStyle.default.__hash) + " " + "help-text"
@@ -67,7 +67,7 @@ const FormulaField = _ref => {
     className: "jsx-".concat(_FormulaFieldStyle.default.__hash) + " " + "border"
   }), /*#__PURE__*/_react.default.createElement("div", {
     ref: setLastDropzoneRef,
-    "data-test": 'formula-field',
+    "data-test": "formula-field",
     className: "jsx-".concat(_FormulaFieldStyle.default.__hash) + " " + "formula-field"
   }, loading && /*#__PURE__*/_react.default.createElement(_ui.Center, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
     small: true

package/build/cjs/components/DataDimension/Calculation/MathOperatorSelector.js

@@ -30,6 +30,7 @@ const MathOperatorSelector = _ref => {
   }, /*#__PURE__*/_react.default.createElement("h4", {
     className: "jsx-".concat(_MathOperatorSelectorStyle.default.__hash) + " " + "sub-header"
   }, _index.default.t('Math operators')), /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "operators-list",
     className: "jsx-".concat(_MathOperatorSelectorStyle.default.__hash) + " " + "operators"
   }, (0, _expressions.getOperators)().map((_ref2, index) => {
     let {

package/build/cjs/components/LegendKey/LegendKey.js

@@ -22,7 +22,7 @@ const LegendKey = _ref => {
     legendSets
   } = _ref;
   return legendSets.length ? /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": 'legend-key-container',
+    "data-test": "legend-key-container",
     className: "jsx-".concat(_LegendKeyStyle.default.__hash) + " " + "container"
   }, legendSets.map((legendSet, index) => /*#__PURE__*/_react.default.createElement("div", {
     key: legendSet.id,

package/build/cjs/visualizations/config/generators/dhis/singleValue.js

@@ -11,62 +11,94 @@ var _fontStyle = require("../../../../modules/fontStyle.js");
 
 var _legends = require("../../../../modules/legends.js");
 
-const svgNS = 'http://www.w3.org/2000/svg';
+const svgNS = 'http://www.w3.org/2000/svg'; // 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 context.measureText(text).width;
+};
 
 const generateValueSVG = _ref => {
   let {
     formattedValue,
     subText,
     valueColor,
+    icon,
     noData,
-    y
+    containerWidth,
+    containerHeight
   } = _ref;
-  const textSize = 300;
-  const svgValue = document.createElementNS(svgNS, 'svg');
-  svgValue.setAttribute('xmlns', svgNS);
-  svgValue.setAttribute('viewBox', "0 -".concat(textSize + 50, " ").concat(textSize * 0.75 * formattedValue.length, " ").concat(textSize + 200));
-
-  if (y) {
-    svgValue.setAttribute('y', y);
+  const ratio = containerHeight / containerWidth;
+  const iconSize = 300;
+  const iconPadding = 50;
+  const textSize = iconSize * 0.85;
+  const textWidth = getTextWidth(formattedValue, "".concat(textSize, "px Roboto"));
+  const subTextSize = 40;
+  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 ".concat(viewBoxWidth, " ").concat(viewBoxHeight));
+  svgValue.setAttribute('width', '95%');
+  svgValue.setAttribute('height', '95%');
+  svgValue.setAttribute('x', '50%');
+  svgValue.setAttribute('y', '50%');
+  svgValue.setAttribute('style', 'overflow: visible');
   let fillColor = _ui.colors.grey900;
 
   if (valueColor) {
     fillColor = valueColor;
   } else if (formattedValue === noData.text) {
     fillColor = _ui.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('width', iconSize);
+    iconSvgNode.setAttribute('height', iconSize);
+    iconSvgNode.setAttribute('viewBox', '0 0 48 48');
+    iconSvgNode.setAttribute('y', "-".concat(iconSize / 2));
+    iconSvgNode.setAttribute('x', "-".concat((iconSize + iconPadding + textWidth) / 2));
+    iconSvgNode.setAttribute('style', "color: ".concat(fillColor));
+    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 textNode = document.createElementNS(svgNS, 'text');
-  textNode.setAttribute('text-anchor', 'middle');
   textNode.setAttribute('font-size', textSize);
   textNode.setAttribute('font-weight', '300');
   textNode.setAttribute('letter-spacing', '-5');
-  textNode.setAttribute('x', '50%');
+  textNode.setAttribute('text-anchor', 'middle');
+  textNode.setAttribute('x', showIcon ? "".concat((iconSize + iconPadding) / 2) : 0); // vertical align, "alignment-baseline: central" is not supported by Batik
+
+  textNode.setAttribute('y', '.35em');
   textNode.setAttribute('fill', fillColor);
   textNode.setAttribute('data-test', 'visualization-primary-value');
   textNode.appendChild(document.createTextNode(formattedValue));
   svgValue.appendChild(textNode);
 
   if (subText) {
-    const svgSubText = document.createElementNS(svgNS, 'svg');
-    const subTextSize = 40;
-    svgSubText.setAttribute('viewBox', "0 -50 ".concat(textSize * 0.75 * formattedValue.length, " ").concat(textSize + 200));
-
-    if (y) {
-      svgSubText.setAttribute('y', y);
-    }
-
     const subTextNode = document.createElementNS(svgNS, 'text');
     subTextNode.setAttribute('text-anchor', 'middle');
     subTextNode.setAttribute('font-size', subTextSize);
-    subTextNode.setAttribute('x', '50%');
-    subTextNode.setAttribute('x', '50%');
+    subTextNode.setAttribute('y', iconSize / 2);
+    subTextNode.setAttribute('dy', subTextSize);
     subTextNode.setAttribute('fill', _ui.colors.grey600);
     subTextNode.appendChild(document.createTextNode(subText));
-    svgSubText.appendChild(subTextNode);
-    svgValue.appendChild(svgSubText);
+    svgValue.appendChild(subTextNode);
   }
 
   return svgValue;
@@ -74,14 +106,27 @@ const generateValueSVG = _ref => {
 
 const generateDashboardItem = (config, _ref2) => {
   let {
+    svgContainer,
+    width,
+    height,
     valueColor,
     titleColor,
     backgroundColor,
-    noData
+    noData,
+    icon
   } = _ref2;
+  svgContainer.appendChild(generateValueSVG({
+    formattedValue: config.formattedValue,
+    subText: config.subText,
+    valueColor,
+    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%; background-color:".concat(backgroundColor, ";"));
-  const titleStyle = "font-size: 12px; color: ".concat(titleColor || '#666', ";");
+  const titleStyle = "padding: 0 8px; text-align: center; font-size: 12px; color: ".concat(titleColor || '#666', ";");
   const title = document.createElement('span');
   title.setAttribute('style', titleStyle);
 
@@ -92,18 +137,12 @@ const generateDashboardItem = (config, _ref2) => {
 
   if (config.subtitle) {
     const subtitle = document.createElement('span');
-    subtitle.setAttribute('style', titleStyle + ' margin-top: 4px; padding: 0 8px');
+    subtitle.setAttribute('style', titleStyle + ' margin-top: 4px;');
     subtitle.appendChild(document.createTextNode(config.subtitle));
     container.appendChild(subtitle);
   }
 
-  container.appendChild(generateValueSVG({
-    formattedValue: config.formattedValue,
-    subText: config.subText,
-    valueColor,
-    noData,
-    y: 40
-  }));
+  container.appendChild(svgContainer);
   return container;
 };
 
@@ -137,33 +176,27 @@ const getXFromTextAlign = textAlign => {
 
 const generateDVItem = (config, _ref3) => {
   let {
+    svgContainer,
+    width,
+    height,
     valueColor,
+    noData,
     backgroundColor,
     titleColor,
-    parentEl,
     fontStyle,
-    noData
+    icon
   } = _ref3;
-  const parentElBBox = parentEl.getBoundingClientRect();
-  const width = parentElBBox.width;
-  const height = parentElBBox.height;
-  const svgNS = 'http://www.w3.org/2000/svg';
-  const svg = document.createElementNS(svgNS, 'svg');
-  svg.setAttribute('xmlns', svgNS);
-  svg.setAttribute('viewBox', "0 0 ".concat(width, " ").concat(height));
-  svg.setAttribute('width', width);
-  svg.setAttribute('height', height);
-  svg.setAttribute('data-test', 'visualization-container');
 
   if (backgroundColor) {
-    svg.setAttribute('style', "background-color: ".concat(backgroundColor, ";"));
+    svgContainer.setAttribute('style', "background-color: ".concat(backgroundColor, ";"));
     const background = document.createElementNS(svgNS, 'rect');
     background.setAttribute('width', '100%');
     background.setAttribute('height', '100%');
     background.setAttribute('fill', backgroundColor);
-    svg.appendChild(background);
+    svgContainer.appendChild(background);
   }
 
+  const svgWrapper = document.createElementNS(svgNS, 'svg');
   const title = document.createElementNS(svgNS, 'text');
   const titleFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle && fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE);
   title.setAttribute('x', getXFromTextAlign(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
@@ -183,7 +216,7 @@ const generateDVItem = (config, _ref3) => {
 
   if (config.title) {
     title.appendChild(document.createTextNode(config.title));
-    svg.appendChild(title);
+    svgWrapper.appendChild(title);
   }
 
   const subtitleFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle && fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE], _fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE);
@@ -206,20 +239,24 @@ const generateDVItem = (config, _ref3) => {
 
   if (config.subtitle) {
     subtitle.appendChild(document.createTextNode(config.subtitle));
-    svg.appendChild(subtitle);
+    svgWrapper.appendChild(subtitle);
   }
 
-  svg.appendChild(generateValueSVG({
+  svgContainer.appendChild(svgWrapper);
+  svgContainer.appendChild(generateValueSVG({
     formattedValue: config.formattedValue,
     subText: config.subText,
     valueColor,
     noData,
-    y: 20
+    icon,
+    containerWidth: width,
+    containerHeight: height
   }));
-  return svg;
+  return svgContainer;
 };
 
-const shouldUseContrastColor = inputColor => {
+const shouldUseContrastColor = function () {
+  let inputColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   // 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
@@ -246,7 +283,8 @@ function _default(config, parentEl, _ref4) {
     legendSets,
     fontStyle,
     noData,
-    legendOptions
+    legendOptions,
+    icon
   } = _ref4;
   const legendSet = legendOptions && legendSets[0];
   const legendColor = legendSet && (0, _legends.getColorByValueFromLegendSet)(legendSet, config.value);
@@ -264,26 +302,42 @@ function _default(config, parentEl, _ref4) {
   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 ".concat(width, " ").concat(height));
+  svgContainer.setAttribute('width', dashboard ? '100%' : width);
+  svgContainer.setAttribute('height', dashboard ? '100%' : height);
+  svgContainer.setAttribute('data-test', 'visualization-container');
 
   if (dashboard) {
     parentEl.style.borderRadius = _ui.spacers.dp8;
     return generateDashboardItem(config, {
+      svgContainer,
+      width,
+      height,
       valueColor,
       backgroundColor,
       noData,
-      ...(shouldUseContrastColor(legendColor) ? {
+      icon,
+      ...(legendColor && shouldUseContrastColor(legendColor) ? {
         titleColor: _ui.colors.white
       } : {})
     });
   } else {
     parentEl.style.height = "100%";
     return generateDVItem(config, {
+      svgContainer,
+      width,
+      height,
       valueColor,
       backgroundColor,
       titleColor,
-      parentEl,
-      fontStyle,
-      noData
+      noData,
+      icon,
+      fontStyle
     });
   }
 }

package/build/es/components/DataDimension/Calculation/CalculationModal.js

@@ -387,7 +387,8 @@ const CalculationModal = _ref => {
     loading: isCreatingCalculation || isUpdatingCalculation || isSavingCalculation,
     dataTest: "save-button"
   }, i18n.t('Save calculation')))))), showDeletePrompt && /*#__PURE__*/React.createElement(Modal, {
-    small: true
+    small: true,
+    dataTest: "calculation-delete-modal"
   }, /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t('Delete calculation')), /*#__PURE__*/React.createElement(ModalContent, null, i18n.t('Are you sure you want to delete this calculation? It may be used by other visualizations.')), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
     end: true
   }, /*#__PURE__*/React.createElement(Button, {

package/build/es/components/DataDimension/Calculation/DataElementOption.js

@@ -42,6 +42,7 @@ const DataElementOption = _ref => {
     className: "jsx-".concat(styles.__hash) + " " + (listeners && listeners.className != null && listeners.className || attributes && attributes.className != null && attributes.className || "draggable-item")
   }), /*#__PURE__*/React.createElement("div", {
     onDoubleClick: () => onDoubleClick(data),
+    "data-test": "data-element-option",
     className: "jsx-".concat(styles.__hash) + " " + "chip"
   }, /*#__PURE__*/React.createElement("span", {
     className: "jsx-".concat(styles.__hash) + " " + "icon"

package/build/es/components/DataDimension/Calculation/DataElementSelector.js

@@ -51,11 +51,13 @@ const GroupSelector = _ref => {
   }, defaultGroup ? /*#__PURE__*/React.createElement(SingleSelectOption, {
     value: defaultGroup.id,
     key: defaultGroup.id,
-    label: defaultGroup.getName()
+    label: defaultGroup.getName(),
+    dataTest: "data-element-group-select-option-".concat(defaultGroup.id)
   }) : null, !loading ? groups.map(group => /*#__PURE__*/React.createElement(SingleSelectOption, {
     value: group.id,
     key: group.id,
-    label: group.name
+    label: group.name,
+    dataTest: "data-element-group-select-option-".concat(group.id)
   })) : null), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
@@ -83,7 +85,8 @@ const DisaggregationSelector = _ref2 => {
   }, Object.entries(options).map(option => /*#__PURE__*/React.createElement(SingleSelectOption, {
     value: option[0],
     key: option[0],
-    label: option[1]
+    label: option[1],
+    dataTest: "data-element-disaggregation-select-option-".concat(option[0])
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));

package/build/es/components/DataDimension/Calculation/FormulaField.js

@@ -13,7 +13,7 @@ export const LAST_DROPZONE_ID = 'lastdropzone';
 export const FORMULA_BOX_ID = 'formulabox';
 
 const Placeholder = () => /*#__PURE__*/React.createElement("div", {
-  "data-test": 'placeholder',
+  "data-test": "placeholder",
   className: "jsx-".concat(styles.__hash) + " " + "placeholder"
 }, /*#__PURE__*/React.createElement(FormulaIcon, null), /*#__PURE__*/React.createElement("span", {
   className: "jsx-".concat(styles.__hash) + " " + "help-text"
@@ -45,7 +45,7 @@ const FormulaField = _ref => {
     className: "jsx-".concat(styles.__hash) + " " + "border"
   }), /*#__PURE__*/React.createElement("div", {
     ref: setLastDropzoneRef,
-    "data-test": 'formula-field',
+    "data-test": "formula-field",
     className: "jsx-".concat(styles.__hash) + " " + "formula-field"
   }, loading && /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(CircularLoader, {
     small: true

package/build/es/components/DataDimension/Calculation/MathOperatorSelector.js

@@ -15,6 +15,7 @@ const MathOperatorSelector = _ref => {
   }, /*#__PURE__*/React.createElement("h4", {
     className: "jsx-".concat(styles.__hash) + " " + "sub-header"
   }, i18n.t('Math operators')), /*#__PURE__*/React.createElement("div", {
+    "data-test": "operators-list",
     className: "jsx-".concat(styles.__hash) + " " + "operators"
   }, getOperators().map((_ref2, index) => {
     let {

package/build/es/components/LegendKey/LegendKey.js

@@ -9,7 +9,7 @@ const LegendKey = _ref => {
     legendSets
   } = _ref;
   return legendSets.length ? /*#__PURE__*/React.createElement("div", {
-    "data-test": 'legend-key-container',
+    "data-test": "legend-key-container",
     className: "jsx-".concat(styles.__hash) + " " + "container"
   }, legendSets.map((legendSet, index) => /*#__PURE__*/React.createElement("div", {
     key: legendSet.id,

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

@@ -1,62 +1,94 @@
 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 svgNS = 'http://www.w3.org/2000/svg'; // 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 context.measureText(text).width;
+};
 
 const generateValueSVG = _ref => {
   let {
     formattedValue,
     subText,
     valueColor,
+    icon,
     noData,
-    y
+    containerWidth,
+    containerHeight
   } = _ref;
-  const textSize = 300;
-  const svgValue = document.createElementNS(svgNS, 'svg');
-  svgValue.setAttribute('xmlns', svgNS);
-  svgValue.setAttribute('viewBox', "0 -".concat(textSize + 50, " ").concat(textSize * 0.75 * formattedValue.length, " ").concat(textSize + 200));
-
-  if (y) {
-    svgValue.setAttribute('y', y);
+  const ratio = containerHeight / containerWidth;
+  const iconSize = 300;
+  const iconPadding = 50;
+  const textSize = iconSize * 0.85;
+  const textWidth = getTextWidth(formattedValue, "".concat(textSize, "px Roboto"));
+  const subTextSize = 40;
+  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 ".concat(viewBoxWidth, " ").concat(viewBoxHeight));
+  svgValue.setAttribute('width', '95%');
+  svgValue.setAttribute('height', '95%');
+  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('width', iconSize);
+    iconSvgNode.setAttribute('height', iconSize);
+    iconSvgNode.setAttribute('viewBox', '0 0 48 48');
+    iconSvgNode.setAttribute('y', "-".concat(iconSize / 2));
+    iconSvgNode.setAttribute('x', "-".concat((iconSize + iconPadding + textWidth) / 2));
+    iconSvgNode.setAttribute('style', "color: ".concat(fillColor));
+    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 textNode = document.createElementNS(svgNS, 'text');
-  textNode.setAttribute('text-anchor', 'middle');
   textNode.setAttribute('font-size', textSize);
   textNode.setAttribute('font-weight', '300');
   textNode.setAttribute('letter-spacing', '-5');
-  textNode.setAttribute('x', '50%');
+  textNode.setAttribute('text-anchor', 'middle');
+  textNode.setAttribute('x', showIcon ? "".concat((iconSize + iconPadding) / 2) : 0); // vertical align, "alignment-baseline: central" is not supported by Batik
+
+  textNode.setAttribute('y', '.35em');
   textNode.setAttribute('fill', fillColor);
   textNode.setAttribute('data-test', 'visualization-primary-value');
   textNode.appendChild(document.createTextNode(formattedValue));
   svgValue.appendChild(textNode);
 
   if (subText) {
-    const svgSubText = document.createElementNS(svgNS, 'svg');
-    const subTextSize = 40;
-    svgSubText.setAttribute('viewBox', "0 -50 ".concat(textSize * 0.75 * formattedValue.length, " ").concat(textSize + 200));
-
-    if (y) {
-      svgSubText.setAttribute('y', y);
-    }
-
     const subTextNode = document.createElementNS(svgNS, 'text');
     subTextNode.setAttribute('text-anchor', 'middle');
     subTextNode.setAttribute('font-size', subTextSize);
-    subTextNode.setAttribute('x', '50%');
-    subTextNode.setAttribute('x', '50%');
+    subTextNode.setAttribute('y', iconSize / 2);
+    subTextNode.setAttribute('dy', subTextSize);
     subTextNode.setAttribute('fill', colors.grey600);
     subTextNode.appendChild(document.createTextNode(subText));
-    svgSubText.appendChild(subTextNode);
-    svgValue.appendChild(svgSubText);
+    svgValue.appendChild(subTextNode);
   }
 
   return svgValue;
@@ -64,14 +96,27 @@ const generateValueSVG = _ref => {
 
 const generateDashboardItem = (config, _ref2) => {
   let {
+    svgContainer,
+    width,
+    height,
     valueColor,
     titleColor,
     backgroundColor,
-    noData
+    noData,
+    icon
   } = _ref2;
+  svgContainer.appendChild(generateValueSVG({
+    formattedValue: config.formattedValue,
+    subText: config.subText,
+    valueColor,
+    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%; background-color:".concat(backgroundColor, ";"));
-  const titleStyle = "font-size: 12px; color: ".concat(titleColor || '#666', ";");
+  const titleStyle = "padding: 0 8px; text-align: center; font-size: 12px; color: ".concat(titleColor || '#666', ";");
   const title = document.createElement('span');
   title.setAttribute('style', titleStyle);
 
@@ -82,18 +127,12 @@ const generateDashboardItem = (config, _ref2) => {
 
   if (config.subtitle) {
     const subtitle = document.createElement('span');
-    subtitle.setAttribute('style', titleStyle + ' margin-top: 4px; padding: 0 8px');
+    subtitle.setAttribute('style', titleStyle + ' margin-top: 4px;');
     subtitle.appendChild(document.createTextNode(config.subtitle));
     container.appendChild(subtitle);
   }
 
-  container.appendChild(generateValueSVG({
-    formattedValue: config.formattedValue,
-    subText: config.subText,
-    valueColor,
-    noData,
-    y: 40
-  }));
+  container.appendChild(svgContainer);
   return container;
 };
 
@@ -127,33 +166,27 @@ const getXFromTextAlign = textAlign => {
 
 const generateDVItem = (config, _ref3) => {
   let {
+    svgContainer,
+    width,
+    height,
     valueColor,
+    noData,
     backgroundColor,
     titleColor,
-    parentEl,
     fontStyle,
-    noData
+    icon
   } = _ref3;
-  const parentElBBox = parentEl.getBoundingClientRect();
-  const width = parentElBBox.width;
-  const height = parentElBBox.height;
-  const svgNS = 'http://www.w3.org/2000/svg';
-  const svg = document.createElementNS(svgNS, 'svg');
-  svg.setAttribute('xmlns', svgNS);
-  svg.setAttribute('viewBox', "0 0 ".concat(width, " ").concat(height));
-  svg.setAttribute('width', width);
-  svg.setAttribute('height', height);
-  svg.setAttribute('data-test', 'visualization-container');
 
   if (backgroundColor) {
-    svg.setAttribute('style', "background-color: ".concat(backgroundColor, ";"));
+    svgContainer.setAttribute('style', "background-color: ".concat(backgroundColor, ";"));
     const background = document.createElementNS(svgNS, 'rect');
     background.setAttribute('width', '100%');
     background.setAttribute('height', '100%');
     background.setAttribute('fill', backgroundColor);
-    svg.appendChild(background);
+    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]));
@@ -173,7 +206,7 @@ const generateDVItem = (config, _ref3) => {
 
   if (config.title) {
     title.appendChild(document.createTextNode(config.title));
-    svg.appendChild(title);
+    svgWrapper.appendChild(title);
   }
 
   const subtitleFontStyle = mergeFontStyleWithDefault(fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE], FONT_STYLE_VISUALIZATION_SUBTITLE);
@@ -196,20 +229,24 @@ const generateDVItem = (config, _ref3) => {
 
   if (config.subtitle) {
     subtitle.appendChild(document.createTextNode(config.subtitle));
-    svg.appendChild(subtitle);
+    svgWrapper.appendChild(subtitle);
   }
 
-  svg.appendChild(generateValueSVG({
+  svgContainer.appendChild(svgWrapper);
+  svgContainer.appendChild(generateValueSVG({
     formattedValue: config.formattedValue,
     subText: config.subText,
     valueColor,
     noData,
-    y: 20
+    icon,
+    containerWidth: width,
+    containerHeight: height
   }));
-  return svg;
+  return svgContainer;
 };
 
-const shouldUseContrastColor = inputColor => {
+const shouldUseContrastColor = function () {
+  let inputColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   // 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
@@ -236,7 +273,8 @@ export default function (config, parentEl, _ref4) {
     legendSets,
     fontStyle,
     noData,
-    legendOptions
+    legendOptions,
+    icon
   } = _ref4;
   const legendSet = legendOptions && legendSets[0];
   const legendColor = legendSet && getColorByValueFromLegendSet(legendSet, config.value);
@@ -254,26 +292,42 @@ export default function (config, parentEl, _ref4) {
   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 ".concat(width, " ").concat(height));
+  svgContainer.setAttribute('width', dashboard ? '100%' : width);
+  svgContainer.setAttribute('height', dashboard ? '100%' : height);
+  svgContainer.setAttribute('data-test', 'visualization-container');
 
   if (dashboard) {
     parentEl.style.borderRadius = spacers.dp8;
     return generateDashboardItem(config, {
+      svgContainer,
+      width,
+      height,
       valueColor,
       backgroundColor,
       noData,
-      ...(shouldUseContrastColor(legendColor) ? {
+      icon,
+      ...(legendColor && shouldUseContrastColor(legendColor) ? {
         titleColor: colors.white
       } : {})
     });
   } else {
     parentEl.style.height = "100%";
     return generateDVItem(config, {
+      svgContainer,
+      width,
+      height,
       valueColor,
       backgroundColor,
       titleColor,
-      parentEl,
-      fontStyle,
-      noData
+      noData,
+      icon,
+      fontStyle
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "25.0.0",
+    "version": "25.1.0",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {