@dhis2/analytics 25.1.9 → 25.1.11

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [25.1.11](https://github.com/dhis2/analytics/compare/v25.1.10...v25.1.11) (2023-06-05)
+
+
+### Bug Fixes
+
+* add data-test to SV icon ([#1479](https://github.com/dhis2/analytics/issues/1479)) ([df1c7ef](https://github.com/dhis2/analytics/commit/df1c7efb3136be99b5026b252a499ba0bb57ecd9))
+
+## [25.1.10](https://github.com/dhis2/analytics/compare/v25.1.9...v25.1.10) (2023-05-30)
+
+
+### Bug Fixes
+
+* single value size and position issues (DHIS2-15344) ([#1470](https://github.com/dhis2/analytics/issues/1470)) ([d94fe02](https://github.com/dhis2/analytics/commit/d94fe02c7cc85a6b4aca41c85ba60ed37871b645))
+
 ## [25.1.9](https://github.com/dhis2/analytics/compare/v25.1.8...v25.1.9) (2023-05-30)
 
 

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

@@ -11,14 +11,59 @@ var _fontStyle = require("../../../../modules/fontStyle.js");
 
 var _legends = require("../../../../modules/legends.js");
 
-const svgNS = 'http://www.w3.org/2000/svg'; // Compute text width before rendering
+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 context.measureText(text).width;
+  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, "".concat(size, "px Roboto")) + (showIcon ? getIconPadding(size) : 0);
+
+  if (textWidth > widthThreshold) {
+    size = Math.round(size * (widthThreshold / textWidth));
+  }
+
+  return size;
 };
 
 const generateValueSVG = _ref => {
@@ -30,26 +75,18 @@ const generateValueSVG = _ref => {
     icon,
     noData,
     containerWidth,
-    containerHeight
+    containerHeight,
+    topMargin = 0
   } = _ref;
-  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 textSize = getTextSize(formattedValue, containerWidth, containerHeight, showIcon);
+  const textWidth = getTextWidth(formattedValue, "".concat(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 ".concat(viewBoxWidth, " ").concat(viewBoxHeight));
-  svgValue.setAttribute('width', '95%');
-  svgValue.setAttribute('height', '95%');
+  svgValue.setAttribute('viewBox', "0 0 ".concat(containerWidth, " ").concat(containerHeight));
+  svgValue.setAttribute('width', '50%');
+  svgValue.setAttribute('height', '50%');
   svgValue.setAttribute('x', '50%');
   svgValue.setAttribute('y', '50%');
   svgValue.setAttribute('style', 'overflow: visible');
@@ -66,26 +103,27 @@ const generateValueSVG = _ref => {
     // 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('viewBox', '0 0 48 48');
-    iconSvgNode.setAttribute('y', "-".concat(iconSize / 2));
-    iconSvgNode.setAttribute('x', "-".concat((iconSize + iconPadding + textWidth) / 2));
+    iconSvgNode.setAttribute('y', (iconSize / 2 - topMargin / 2) * -1);
+    iconSvgNode.setAttribute('x', "-".concat((iconSize + getIconPadding(textSize) + textWidth) / 2));
     iconSvgNode.setAttribute('style', "color: ".concat(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', '-5');
+  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 ? "".concat((iconSize + iconPadding) / 2) : 0); // vertical align, "alignment-baseline: central" is not supported by Batik
-
-  textNode.setAttribute('y', '.35em');
+  textNode.setAttribute('x', showIcon ? "".concat((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));
@@ -95,8 +133,8 @@ const generateValueSVG = _ref => {
     const subTextNode = document.createElementNS(svgNS, 'text');
     subTextNode.setAttribute('text-anchor', 'middle');
     subTextNode.setAttribute('font-size', subTextSize);
-    subTextNode.setAttribute('y', iconSize / 2);
-    subTextNode.setAttribute('dy', 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);
@@ -198,47 +236,49 @@ const generateDVItem = (config, _ref3) => {
     svgContainer.appendChild(background);
   }
 
-  const svgWrapper = document.createElementNS(svgNS, 'svg');
+  const svgWrapper = document.createElementNS(svgNS, 'svg'); // title
+
   const title = document.createElementNS(svgNS, 'text');
   const titleFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle && fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE);
-  const titleYPosition = titleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE];
-  title.setAttribute('x', getXFromTextAlign(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
-  title.setAttribute('y', titleYPosition);
-  title.setAttribute('text-anchor', getTextAnchorFromTextAlign(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
-  title.setAttribute('font-size', "".concat(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px"));
-  title.setAttribute('font-weight', titleFontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal');
-  title.setAttribute('font-style', titleFontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.FONT_STYLE_OPTION_ITALIC : 'normal');
-
-  if (titleColor && titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR] === _fontStyle.defaultFontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE][_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]) {
-    title.setAttribute('fill', titleColor);
-  } else {
-    title.setAttribute('fill', titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]);
-  }
-
-  title.setAttribute('data-test', 'visualization-title');
+  const titleYPosition = TOP_MARGIN_FIXED + parseInt(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE]) + 'px';
+  const titleAttributes = {
+    x: getXFromTextAlign(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]),
+    y: titleYPosition,
+    'text-anchor': getTextAnchorFromTextAlign(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]),
+    'font-size': "".concat(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px"),
+    'font-weight': titleFontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal',
+    'font-style': titleFontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.FONT_STYLE_OPTION_ITALIC : 'normal',
+    'data-test': 'visualization-title',
+    fill: titleColor && titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR] === _fontStyle.defaultFontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE][_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR] ? titleColor : titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]
+  };
+  Object.entries(titleAttributes).forEach(_ref4 => {
+    let [key, value] = _ref4;
+    return title.setAttribute(key, value);
+  });
 
   if (config.title) {
     title.appendChild(document.createTextNode(config.title));
     svgWrapper.appendChild(title);
-  }
+  } // subtitle
 
-  const subtitleFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle && fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE], _fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE);
-  const subtitle = document.createElementNS(svgNS, 'text');
-  subtitle.setAttribute('x', getXFromTextAlign(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
-  subtitle.setAttribute('y', titleYPosition);
-  subtitle.setAttribute('dy', "".concat(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] + 10));
-  subtitle.setAttribute('text-anchor', getTextAnchorFromTextAlign(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
-  subtitle.setAttribute('font-size', "".concat(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px"));
-  subtitle.setAttribute('font-weight', subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal');
-  subtitle.setAttribute('font-style', subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.FONT_STYLE_OPTION_ITALIC : 'normal');
-
-  if (titleColor && subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR] === _fontStyle.defaultFontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE][_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]) {
-    subtitle.setAttribute('fill', titleColor);
-  } else {
-    subtitle.setAttribute('fill', subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]);
-  }
 
-  subtitle.setAttribute('data-test', 'visualization-subtitle');
+  const subtitle = document.createElementNS(svgNS, 'text');
+  const subtitleFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle && fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE], _fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE);
+  const subtitleAttributes = {
+    x: getXFromTextAlign(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]),
+    y: titleYPosition,
+    dy: "".concat(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] + 10),
+    'text-anchor': getTextAnchorFromTextAlign(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]),
+    'font-size': "".concat(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px"),
+    'font-weight': subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal',
+    'font-style': subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.FONT_STYLE_OPTION_ITALIC : 'normal',
+    fill: titleColor && subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR] === _fontStyle.defaultFontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE][_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR] ? titleColor : subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR],
+    'data-test': 'visualization-subtitle'
+  };
+  Object.entries(subtitleAttributes).forEach(_ref5 => {
+    let [key, value] = _ref5;
+    return subtitle.setAttribute(key, value);
+  });
 
   if (config.subtitle) {
     subtitle.appendChild(document.createTextNode(config.subtitle));
@@ -254,7 +294,8 @@ const generateDVItem = (config, _ref3) => {
     noData,
     icon,
     containerWidth: width,
-    containerHeight: height
+    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;
 };
@@ -281,7 +322,7 @@ const shouldUseContrastColor = function () {
   return L <= 0.179;
 };
 
-function _default(config, parentEl, _ref4) {
+function _default(config, parentEl, _ref6) {
   let {
     dashboard,
     legendSets,
@@ -289,7 +330,7 @@ function _default(config, parentEl, _ref4) {
     noData,
     legendOptions,
     icon
-  } = _ref4;
+  } = _ref6;
   const legendSet = legendOptions && legendSets[0];
   const legendColor = legendSet && (0, _legends.getColorByValueFromLegendSet)(legendSet, config.value);
   let valueColor, titleColor, backgroundColor;

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

@@ -1,14 +1,59 @@
 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'; // Compute text width before rendering
+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 context.measureText(text).width;
+  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, "".concat(size, "px Roboto")) + (showIcon ? getIconPadding(size) : 0);
+
+  if (textWidth > widthThreshold) {
+    size = Math.round(size * (widthThreshold / textWidth));
+  }
+
+  return size;
 };
 
 const generateValueSVG = _ref => {
@@ -20,26 +65,18 @@ const generateValueSVG = _ref => {
     icon,
     noData,
     containerWidth,
-    containerHeight
+    containerHeight,
+    topMargin = 0
   } = _ref;
-  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 textSize = getTextSize(formattedValue, containerWidth, containerHeight, showIcon);
+  const textWidth = getTextWidth(formattedValue, "".concat(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 ".concat(viewBoxWidth, " ").concat(viewBoxHeight));
-  svgValue.setAttribute('width', '95%');
-  svgValue.setAttribute('height', '95%');
+  svgValue.setAttribute('viewBox', "0 0 ".concat(containerWidth, " ").concat(containerHeight));
+  svgValue.setAttribute('width', '50%');
+  svgValue.setAttribute('height', '50%');
   svgValue.setAttribute('x', '50%');
   svgValue.setAttribute('y', '50%');
   svgValue.setAttribute('style', 'overflow: visible');
@@ -56,26 +93,27 @@ const generateValueSVG = _ref => {
     // 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('viewBox', '0 0 48 48');
-    iconSvgNode.setAttribute('y', "-".concat(iconSize / 2));
-    iconSvgNode.setAttribute('x', "-".concat((iconSize + iconPadding + textWidth) / 2));
+    iconSvgNode.setAttribute('y', (iconSize / 2 - topMargin / 2) * -1);
+    iconSvgNode.setAttribute('x', "-".concat((iconSize + getIconPadding(textSize) + textWidth) / 2));
     iconSvgNode.setAttribute('style', "color: ".concat(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', '-5');
+  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 ? "".concat((iconSize + iconPadding) / 2) : 0); // vertical align, "alignment-baseline: central" is not supported by Batik
-
-  textNode.setAttribute('y', '.35em');
+  textNode.setAttribute('x', showIcon ? "".concat((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));
@@ -85,8 +123,8 @@ const generateValueSVG = _ref => {
     const subTextNode = document.createElementNS(svgNS, 'text');
     subTextNode.setAttribute('text-anchor', 'middle');
     subTextNode.setAttribute('font-size', subTextSize);
-    subTextNode.setAttribute('y', iconSize / 2);
-    subTextNode.setAttribute('dy', 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);
@@ -188,47 +226,49 @@ const generateDVItem = (config, _ref3) => {
     svgContainer.appendChild(background);
   }
 
-  const svgWrapper = document.createElementNS(svgNS, 'svg');
+  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 = titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE];
-  title.setAttribute('x', getXFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]));
-  title.setAttribute('y', titleYPosition);
-  title.setAttribute('text-anchor', getTextAnchorFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]));
-  title.setAttribute('font-size', "".concat(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');
+  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': "".concat(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(_ref4 => {
+    let [key, value] = _ref4;
+    return title.setAttribute(key, value);
+  });
 
   if (config.title) {
     title.appendChild(document.createTextNode(config.title));
     svgWrapper.appendChild(title);
-  }
+  } // subtitle
 
-  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', titleYPosition);
-  subtitle.setAttribute('dy', "".concat(subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE] + 10));
-  subtitle.setAttribute('text-anchor', getTextAnchorFromTextAlign(subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]));
-  subtitle.setAttribute('font-size', "".concat(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');
+  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: "".concat(subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE] + 10),
+    'text-anchor': getTextAnchorFromTextAlign(subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]),
+    'font-size': "".concat(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(_ref5 => {
+    let [key, value] = _ref5;
+    return subtitle.setAttribute(key, value);
+  });
 
   if (config.subtitle) {
     subtitle.appendChild(document.createTextNode(config.subtitle));
@@ -244,7 +284,8 @@ const generateDVItem = (config, _ref3) => {
     noData,
     icon,
     containerWidth: width,
-    containerHeight: height
+    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;
 };
@@ -271,7 +312,7 @@ const shouldUseContrastColor = function () {
   return L <= 0.179;
 };
 
-export default function (config, parentEl, _ref4) {
+export default function (config, parentEl, _ref6) {
   let {
     dashboard,
     legendSets,
@@ -279,7 +320,7 @@ export default function (config, parentEl, _ref4) {
     noData,
     legendOptions,
     icon
-  } = _ref4;
+  } = _ref6;
   const legendSet = legendOptions && legendSets[0];
   const legendColor = legendSet && getColorByValueFromLegendSet(legendSet, config.value);
   let valueColor, titleColor, backgroundColor;

package/package.json

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