@dhis2/analytics 24.10.7 → 24.10.9

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [24.10.9](https://github.com/dhis2/analytics/compare/v24.10.8...v24.10.9) (2024-06-04)
+
+
+### Bug Fixes
+
+* numbers are misaligned in pivot table (DHIS2-16900) ([#1671](https://github.com/dhis2/analytics/issues/1671)) ([7fc5321](https://github.com/dhis2/analytics/commit/7fc532122d7bd0f12b2dba1ce005fd7490d47137))
+
+## [24.10.8](https://github.com/dhis2/analytics/compare/v24.10.7...v24.10.8) (2024-04-25)
+
+
+### Bug Fixes
+
+* single value size and position issues (DHIS2-15344) (DHIS2-13077) [24.x] ([#1646](https://github.com/dhis2/analytics/issues/1646)) ([f052741](https://github.com/dhis2/analytics/commit/f052741ca0f5eafc93094cf53b9bf89f7c7244c3))
+
 ## [24.10.7](https://github.com/dhis2/analytics/compare/v24.10.6...v24.10.7) (2024-04-22)
 
 

package/build/cjs/components/PivotTable/styles/PivotTable.style.js

@@ -12,9 +12,9 @@ var _pivotTableConstants = require("../../../modules/pivotTable/pivotTableConsta
 const table = ["div.pivot-table-container{font-family:'Roboto',Arial,sans-serif;overflow:auto;color:".concat(_ui.colors.grey900, ";}"), "table{border-spacing:0;white-space:nowrap;box-sizing:border-box;text-align:center;border:1px solid ".concat(_pivotTableConstants.BORDER_COLOR, ";border-width:1px 1px 0 0;}"), "table.fixed-headers{border-width:0 0 0 1px;}", "table.fixed-headers tr th,table.fixed-headers tr td{border-width:0 1px 1px 0;}", "table.fixed-column-headers{border-width:0 1px 0 0;}", "table.fixed-column-headers tr th,table.fixed-column-headers tr td{border-width:0 0 1px 1px;}", "table.fixed-headers thead tr:first-of-type th,table.fixed-column-headers thead tr:first-of-type th{border-top:1px solid ".concat(_pivotTableConstants.BORDER_COLOR, ";}"), "table.fixed-row-headers{border-width:0 0 1px 1px;}", "table.fixed-row-headers tr th,table.fixed-row-headers tr td{border-width:1px 1px 0 0;}"];
 exports.table = table;
 table.__hash = "712241344";
-const cell = ["td.jsx-1789008308,th.jsx-1789008308{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ".concat(_pivotTableConstants.BORDER_COLOR, ";border-width:0 0 1px 1px;cursor:default;}"), "th.fixed-header.jsx-1789008308{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", ".fontsize-SMALL.jsx-1789008308{font-size:".concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;}"), ".fontsize-NORMAL.jsx-1789008308{font-size:".concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;}"), ".fontsize-LARGE.jsx-1789008308{font-size:".concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;}"), ".displaydensity-COMPACT.jsx-1789008308{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".displaydensity-NORMAL.jsx-1789008308{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".displaydensity-COMFORTABLE.jsx-1789008308{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".column-header.jsx-1789008308{background-color:#dae6f8;}", "div.column-header-inner.jsx-1789008308{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title.jsx-1789008308{font-weight:bold;background-color:#cddaed;}", ".row-header.jsx-1789008308{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-1789008308{text-align:left;}", ".empty-header.jsx-1789008308{background-color:#cddaed;}", ".total-header.jsx-1789008308{background-color:#bac6d8;}", ".value.jsx-1789008308{background-color:#ffffff;}", ".TEXT.jsx-1789008308{text-align:left;}", ".NUMBER.jsx-1789008308{text-align:right;}", ".clickable.jsx-1789008308{cursor:pointer;}", ".value.jsx-1789008308:hover{background-color:#f3f3f3;}", ".subtotal.jsx-1789008308{background-color:#f4f4f4;}", ".total.jsx-1789008308{background-color:#d8d8d8;}", ".column-header-label.jsx-1789008308{overflow:hidden;text-overflow:ellipsis;}"];
+const cell = ["td.jsx-2757248239,th.jsx-2757248239{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ".concat(_pivotTableConstants.BORDER_COLOR, ";border-width:0 0 1px 1px;cursor:default;}"), "th.fixed-header.jsx-2757248239{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", ".fontsize-SMALL.jsx-2757248239{font-size:".concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;}"), ".fontsize-NORMAL.jsx-2757248239{font-size:".concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;}"), ".fontsize-LARGE.jsx-2757248239{font-size:".concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;}"), ".displaydensity-COMPACT.jsx-2757248239{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".displaydensity-NORMAL.jsx-2757248239{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".displaydensity-COMFORTABLE.jsx-2757248239{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".column-header.jsx-2757248239{background-color:#dae6f8;}", "div.column-header-inner.jsx-2757248239{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title.jsx-2757248239{font-weight:bold;background-color:#cddaed;}", ".row-header.jsx-2757248239{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-2757248239{text-align:left;}", ".empty-header.jsx-2757248239{background-color:#cddaed;}", ".total-header.jsx-2757248239{background-color:#bac6d8;}", ".value.jsx-2757248239{background-color:#ffffff;text-align:left;}", ".NUMBER.jsx-2757248239,.INTEGER.jsx-2757248239,.INTEGER_POSITIVE.jsx-2757248239,.INTEGER_NEGATIVE.jsx-2757248239,.INTEGER_ZERO_OR_POSITIVE.jsx-2757248239,.UNIT_INTERVAL.jsx-2757248239,.PERCENTAGE.jsx-2757248239,.BOOLEAN.jsx-2757248239,.TRUE_ONLY.jsx-2757248239{text-align:right;}", ".clickable.jsx-2757248239{cursor:pointer;}", ".value.jsx-2757248239:hover{background-color:#f3f3f3;}", ".subtotal.jsx-2757248239{background-color:#f4f4f4;}", ".total.jsx-2757248239{background-color:#d8d8d8;}", ".column-header-label.jsx-2757248239{overflow:hidden;text-overflow:ellipsis;}"];
 exports.cell = cell;
-cell.__hash = "1789008308";
+cell.__hash = "2757248239";
 const sortIcon = [".fontsize-SMALL.jsx-2877616992{height:".concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;margin-bottom:1px;margin-left:5px;}"), ".fontsize-NORMAL.jsx-2877616992{height:".concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;max-height:11px;margin-bottom:2px;margin-left:6px;}"), ".fontsize-LARGE.jsx-2877616992{height:".concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;margin-bottom:2px;margin-left:7px;}")];
 exports.sortIcon = sortIcon;
 sortIcon.__hash = "2877616992";

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

@@ -11,62 +11,133 @@ 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'; // multiply text width with this factor
+// to get very close to actual text width
+// nb: dependent on viewbox etc
+
+const ACTUAL_TEXT_WIDTH_FACTOR = 0.9; // multiply value text size with this factor
+// to get very close to the actual number height
+// as numbers don't go below the baseline like e.g. "j" and "g"
+
+const ACTUAL_NUMBER_HEIGHT_FACTOR = 0.67; // do not allow text width to exceed this threshold
+// a threshold >1 does not really make sense but text width vs viewbox is complicated
+
+const TEXT_WIDTH_CONTAINER_WIDTH_FACTOR = 1.3; // do not allow text size to exceed this
+
+const TEXT_SIZE_CONTAINER_HEIGHT_FACTOR = 0.6;
+const TEXT_SIZE_MAX_THRESHOLD = 400; // multiply text size with this factor
+// to get an appropriate letter spacing
+
+const LETTER_SPACING_TEXT_SIZE_FACTOR = 1 / 35 * -1;
+const LETTER_SPACING_MIN_THRESHOLD = -6;
+const LETTER_SPACING_MAX_THRESHOLD = -1; // fixed top margin above title/subtitle
+
+const TOP_MARGIN_FIXED = 16; // multiply text size with this factor
+// to get an appropriate sub text size
+
+const SUB_TEXT_SIZE_FACTOR = 0.5;
+const SUB_TEXT_SIZE_MIN_THRESHOLD = 26;
+const SUB_TEXT_SIZE_MAX_THRESHOLD = 40; // multiply text size with this factor
+// to get an appropriate icon padding
+
+const ICON_PADDING_FACTOR = 0.3; // Compute text width before rendering
+// Not exactly precise but close enough
+
+const getTextWidth = (text, font) => {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  context.font = font;
+  return Math.round(context.measureText(text).width * ACTUAL_TEXT_WIDTH_FACTOR);
+};
+
+const getTextHeightForNumbers = textSize => textSize * ACTUAL_NUMBER_HEIGHT_FACTOR;
+
+const getIconPadding = textSize => Math.round(textSize * ICON_PADDING_FACTOR);
+
+const getTextSize = (formattedValue, containerWidth, containerHeight, showIcon) => {
+  let size = Math.min(Math.round(containerHeight * TEXT_SIZE_CONTAINER_HEIGHT_FACTOR), TEXT_SIZE_MAX_THRESHOLD);
+  const widthThreshold = Math.round(containerWidth * TEXT_WIDTH_CONTAINER_WIDTH_FACTOR);
+  const textWidth = getTextWidth(formattedValue, "".concat(size, "px Roboto")) + (showIcon ? getIconPadding(size) : 0);
+
+  if (textWidth > widthThreshold) {
+    size = Math.round(size * (widthThreshold / textWidth));
+  }
+
+  return size;
+};
 
 const generateValueSVG = _ref => {
   let {
     formattedValue,
     subText,
     valueColor,
+    textColor,
+    icon,
     noData,
-    y
+    containerWidth,
+    containerHeight,
+    topMargin = 0
   } = _ref;
-  const textSize = 300;
+  console.log('jj SV generateValueSVG', formattedValue, icon, subText);
+  const showIcon = icon && formattedValue !== noData.text;
+  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('xmlns', svgNS);
-  svgValue.setAttribute('viewBox', "0 -".concat(textSize + 50, " ").concat(textSize * 0.75 * formattedValue.length, " ").concat(textSize + 200));
-
-  if (y) {
-    svgValue.setAttribute('y', y);
-  }
-
+  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');
   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('viewBox', '0 0 48 48');
+    iconSvgNode.setAttribute('width', iconSize);
+    iconSvgNode.setAttribute('height', iconSize);
+    iconSvgNode.setAttribute('y', (iconSize / 2 - topMargin / 2) * -1);
+    iconSvgNode.setAttribute('x', "-".concat((iconSize + getIconPadding(textSize) + 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 letterSpacing = Math.round(textSize * LETTER_SPACING_TEXT_SIZE_FACTOR);
   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('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 + getIconPadding(textSize)) / 2) : 0);
+  textNode.setAttribute('y', topMargin / 2 + getTextHeightForNumbers(textSize) / 2);
   textNode.setAttribute('fill', fillColor);
   textNode.setAttribute('data-test', 'visualization-primary-value');
   textNode.appendChild(document.createTextNode(formattedValue));
   svgValue.appendChild(textNode);
 
   if (subText) {
-    const 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('fill', _ui.colors.grey600);
+    subTextNode.setAttribute('y', iconSize / 2 + topMargin / 2);
+    subTextNode.setAttribute('dy', subTextSize * 1.7);
+    subTextNode.setAttribute('fill', textColor);
     subTextNode.appendChild(document.createTextNode(subText));
-    svgSubText.appendChild(subTextNode);
-    svgValue.appendChild(svgSubText);
+    svgValue.appendChild(subTextNode);
   }
 
   return svgValue;
@@ -74,14 +145,28 @@ 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,
+    textColor: titleColor,
+    noData,
+    icon,
+    containerWidth: width,
+    containerHeight: height
+  }));
   const container = document.createElement('div');
-  container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color:".concat(backgroundColor, ";"));
-  const titleStyle = "font-size: 12px; color: ".concat(titleColor || '#666', ";");
+  container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding-top: 8px; ".concat(backgroundColor ? "background-color:".concat(backgroundColor, ";") : ''));
+  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 +177,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,89 +216,92 @@ 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'); // title
+
   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]));
-  title.setAttribute('y', 28);
-  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));
-    svg.appendChild(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', 28);
-  subtitle.setAttribute('dy', 22);
-  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));
-    svg.appendChild(subtitle);
+    svgWrapper.appendChild(subtitle);
   }
 
-  svg.appendChild(generateValueSVG({
+  svgContainer.appendChild(svgWrapper);
+  svgContainer.appendChild(generateValueSVG({
     formattedValue: config.formattedValue,
     subText: config.subText,
     valueColor,
+    textColor: titleColor,
     noData,
-    y: 20
+    icon,
+    containerWidth: width,
+    containerHeight: height,
+    topMargin: TOP_MARGIN_FIXED + ((config.title ? parseInt(title.getAttribute('font-size')) : 0) + (config.subtitle ? parseInt(subtitle.getAttribute('font-size')) : 0)) * 2.5
   }));
-  return 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
@@ -240,14 +322,15 @@ const shouldUseContrastColor = inputColor => {
   return L <= 0.179;
 };
 
-function _default(config, parentEl, _ref4) {
+function _default(config, parentEl, _ref6) {
   let {
     dashboard,
     legendSets,
     fontStyle,
     noData,
-    legendOptions
-  } = _ref4;
+    legendOptions,
+    icon
+  } = _ref6;
   const legendSet = legendOptions && legendSets[0];
   const legendColor = legendSet && (0, _legends.getColorByValueFromLegendSet)(legendSet, config.value);
   let valueColor, titleColor, backgroundColor;
@@ -264,26 +347,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;
+    parentEl.style.borderRadius = '3px';
     return generateDashboardItem(config, {
+      svgContainer,
+      width,
+      height,
       valueColor,
       backgroundColor,
       noData,
-      ...(shouldUseContrastColor(legendColor) ? {
+      icon,
+      ...(legendOptions.style === _legends.LEGEND_DISPLAY_STYLE_FILL && 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/PivotTable/styles/PivotTable.style.js

@@ -2,7 +2,7 @@ import { colors } from '@dhis2/ui';
 import { BORDER_COLOR, DISPLAY_DENSITY_PADDING_COMPACT, DISPLAY_DENSITY_PADDING_NORMAL, DISPLAY_DENSITY_PADDING_COMFORTABLE, FONT_SIZE_SMALL, FONT_SIZE_NORMAL, FONT_SIZE_LARGE } from '../../../modules/pivotTable/pivotTableConstants.js';
 export const table = ["div.pivot-table-container{font-family:'Roboto',Arial,sans-serif;overflow:auto;color:".concat(colors.grey900, ";}"), "table{border-spacing:0;white-space:nowrap;box-sizing:border-box;text-align:center;border:1px solid ".concat(BORDER_COLOR, ";border-width:1px 1px 0 0;}"), "table.fixed-headers{border-width:0 0 0 1px;}", "table.fixed-headers tr th,table.fixed-headers tr td{border-width:0 1px 1px 0;}", "table.fixed-column-headers{border-width:0 1px 0 0;}", "table.fixed-column-headers tr th,table.fixed-column-headers tr td{border-width:0 0 1px 1px;}", "table.fixed-headers thead tr:first-of-type th,table.fixed-column-headers thead tr:first-of-type th{border-top:1px solid ".concat(BORDER_COLOR, ";}"), "table.fixed-row-headers{border-width:0 0 1px 1px;}", "table.fixed-row-headers tr th,table.fixed-row-headers tr td{border-width:1px 1px 0 0;}"];
 table.__hash = "712241344";
-export const cell = ["td.jsx-1789008308,th.jsx-1789008308{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ".concat(BORDER_COLOR, ";border-width:0 0 1px 1px;cursor:default;}"), "th.fixed-header.jsx-1789008308{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", ".fontsize-SMALL.jsx-1789008308{font-size:".concat(FONT_SIZE_SMALL, "px;line-height:").concat(FONT_SIZE_SMALL, "px;}"), ".fontsize-NORMAL.jsx-1789008308{font-size:".concat(FONT_SIZE_NORMAL, "px;line-height:").concat(FONT_SIZE_NORMAL, "px;}"), ".fontsize-LARGE.jsx-1789008308{font-size:".concat(FONT_SIZE_LARGE, "px;line-height:").concat(FONT_SIZE_LARGE, "px;}"), ".displaydensity-COMPACT.jsx-1789008308{padding:".concat(DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".displaydensity-NORMAL.jsx-1789008308{padding:".concat(DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".displaydensity-COMFORTABLE.jsx-1789008308{padding:".concat(DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".column-header.jsx-1789008308{background-color:#dae6f8;}", "div.column-header-inner.jsx-1789008308{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title.jsx-1789008308{font-weight:bold;background-color:#cddaed;}", ".row-header.jsx-1789008308{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-1789008308{text-align:left;}", ".empty-header.jsx-1789008308{background-color:#cddaed;}", ".total-header.jsx-1789008308{background-color:#bac6d8;}", ".value.jsx-1789008308{background-color:#ffffff;}", ".TEXT.jsx-1789008308{text-align:left;}", ".NUMBER.jsx-1789008308{text-align:right;}", ".clickable.jsx-1789008308{cursor:pointer;}", ".value.jsx-1789008308:hover{background-color:#f3f3f3;}", ".subtotal.jsx-1789008308{background-color:#f4f4f4;}", ".total.jsx-1789008308{background-color:#d8d8d8;}", ".column-header-label.jsx-1789008308{overflow:hidden;text-overflow:ellipsis;}"];
-cell.__hash = "1789008308";
+export const cell = ["td.jsx-2757248239,th.jsx-2757248239{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ".concat(BORDER_COLOR, ";border-width:0 0 1px 1px;cursor:default;}"), "th.fixed-header.jsx-2757248239{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", ".fontsize-SMALL.jsx-2757248239{font-size:".concat(FONT_SIZE_SMALL, "px;line-height:").concat(FONT_SIZE_SMALL, "px;}"), ".fontsize-NORMAL.jsx-2757248239{font-size:".concat(FONT_SIZE_NORMAL, "px;line-height:").concat(FONT_SIZE_NORMAL, "px;}"), ".fontsize-LARGE.jsx-2757248239{font-size:".concat(FONT_SIZE_LARGE, "px;line-height:").concat(FONT_SIZE_LARGE, "px;}"), ".displaydensity-COMPACT.jsx-2757248239{padding:".concat(DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".displaydensity-NORMAL.jsx-2757248239{padding:".concat(DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".displaydensity-COMFORTABLE.jsx-2757248239{padding:".concat(DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".column-header.jsx-2757248239{background-color:#dae6f8;}", "div.column-header-inner.jsx-2757248239{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title.jsx-2757248239{font-weight:bold;background-color:#cddaed;}", ".row-header.jsx-2757248239{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-2757248239{text-align:left;}", ".empty-header.jsx-2757248239{background-color:#cddaed;}", ".total-header.jsx-2757248239{background-color:#bac6d8;}", ".value.jsx-2757248239{background-color:#ffffff;text-align:left;}", ".NUMBER.jsx-2757248239,.INTEGER.jsx-2757248239,.INTEGER_POSITIVE.jsx-2757248239,.INTEGER_NEGATIVE.jsx-2757248239,.INTEGER_ZERO_OR_POSITIVE.jsx-2757248239,.UNIT_INTERVAL.jsx-2757248239,.PERCENTAGE.jsx-2757248239,.BOOLEAN.jsx-2757248239,.TRUE_ONLY.jsx-2757248239{text-align:right;}", ".clickable.jsx-2757248239{cursor:pointer;}", ".value.jsx-2757248239:hover{background-color:#f3f3f3;}", ".subtotal.jsx-2757248239{background-color:#f4f4f4;}", ".total.jsx-2757248239{background-color:#d8d8d8;}", ".column-header-label.jsx-2757248239{overflow:hidden;text-overflow:ellipsis;}"];
+cell.__hash = "2757248239";
 export const sortIcon = [".fontsize-SMALL.jsx-2877616992{height:".concat(FONT_SIZE_SMALL, "px;margin-bottom:1px;margin-left:5px;}"), ".fontsize-NORMAL.jsx-2877616992{height:".concat(FONT_SIZE_NORMAL, "px;max-height:11px;margin-bottom:2px;margin-left:6px;}"), ".fontsize-LARGE.jsx-2877616992{height:".concat(FONT_SIZE_LARGE, "px;margin-bottom:2px;margin-left:7px;}")];
 sortIcon.__hash = "2877616992";

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

@@ -1,62 +1,133 @@
-import { colors, spacers } from '@dhis2/ui';
+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';
+const svgNS = 'http://www.w3.org/2000/svg'; // multiply text width with this factor
+// to get very close to actual text width
+// nb: dependent on viewbox etc
+
+const ACTUAL_TEXT_WIDTH_FACTOR = 0.9; // multiply value text size with this factor
+// to get very close to the actual number height
+// as numbers don't go below the baseline like e.g. "j" and "g"
+
+const ACTUAL_NUMBER_HEIGHT_FACTOR = 0.67; // do not allow text width to exceed this threshold
+// a threshold >1 does not really make sense but text width vs viewbox is complicated
+
+const TEXT_WIDTH_CONTAINER_WIDTH_FACTOR = 1.3; // do not allow text size to exceed this
+
+const TEXT_SIZE_CONTAINER_HEIGHT_FACTOR = 0.6;
+const TEXT_SIZE_MAX_THRESHOLD = 400; // multiply text size with this factor
+// to get an appropriate letter spacing
+
+const LETTER_SPACING_TEXT_SIZE_FACTOR = 1 / 35 * -1;
+const LETTER_SPACING_MIN_THRESHOLD = -6;
+const LETTER_SPACING_MAX_THRESHOLD = -1; // fixed top margin above title/subtitle
+
+const TOP_MARGIN_FIXED = 16; // multiply text size with this factor
+// to get an appropriate sub text size
+
+const SUB_TEXT_SIZE_FACTOR = 0.5;
+const SUB_TEXT_SIZE_MIN_THRESHOLD = 26;
+const SUB_TEXT_SIZE_MAX_THRESHOLD = 40; // multiply text size with this factor
+// to get an appropriate icon padding
+
+const ICON_PADDING_FACTOR = 0.3; // Compute text width before rendering
+// Not exactly precise but close enough
+
+const getTextWidth = (text, font) => {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  context.font = font;
+  return Math.round(context.measureText(text).width * ACTUAL_TEXT_WIDTH_FACTOR);
+};
+
+const getTextHeightForNumbers = textSize => textSize * ACTUAL_NUMBER_HEIGHT_FACTOR;
+
+const getIconPadding = textSize => Math.round(textSize * ICON_PADDING_FACTOR);
+
+const getTextSize = (formattedValue, containerWidth, containerHeight, showIcon) => {
+  let size = Math.min(Math.round(containerHeight * TEXT_SIZE_CONTAINER_HEIGHT_FACTOR), TEXT_SIZE_MAX_THRESHOLD);
+  const widthThreshold = Math.round(containerWidth * TEXT_WIDTH_CONTAINER_WIDTH_FACTOR);
+  const textWidth = getTextWidth(formattedValue, "".concat(size, "px Roboto")) + (showIcon ? getIconPadding(size) : 0);
+
+  if (textWidth > widthThreshold) {
+    size = Math.round(size * (widthThreshold / textWidth));
+  }
+
+  return size;
+};
 
 const generateValueSVG = _ref => {
   let {
     formattedValue,
     subText,
     valueColor,
+    textColor,
+    icon,
     noData,
-    y
+    containerWidth,
+    containerHeight,
+    topMargin = 0
   } = _ref;
-  const textSize = 300;
+  console.log('jj SV generateValueSVG', formattedValue, icon, subText);
+  const showIcon = icon && formattedValue !== noData.text;
+  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('xmlns', svgNS);
-  svgValue.setAttribute('viewBox', "0 -".concat(textSize + 50, " ").concat(textSize * 0.75 * formattedValue.length, " ").concat(textSize + 200));
-
-  if (y) {
-    svgValue.setAttribute('y', y);
-  }
-
+  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');
   let fillColor = colors.grey900;
 
   if (valueColor) {
     fillColor = valueColor;
   } else if (formattedValue === noData.text) {
     fillColor = colors.grey600;
+  } // show icon if configured in maintenance app
+
+
+  if (showIcon) {
+    // embed icon to allow changing color
+    // (elements with fill need to use "currentColor" for this to work)
+    const iconSvgNode = document.createElementNS(svgNS, 'svg');
+    iconSvgNode.setAttribute('viewBox', '0 0 48 48');
+    iconSvgNode.setAttribute('width', iconSize);
+    iconSvgNode.setAttribute('height', iconSize);
+    iconSvgNode.setAttribute('y', (iconSize / 2 - topMargin / 2) * -1);
+    iconSvgNode.setAttribute('x', "-".concat((iconSize + getIconPadding(textSize) + 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 letterSpacing = Math.round(textSize * LETTER_SPACING_TEXT_SIZE_FACTOR);
   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('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 + getIconPadding(textSize)) / 2) : 0);
+  textNode.setAttribute('y', topMargin / 2 + getTextHeightForNumbers(textSize) / 2);
   textNode.setAttribute('fill', fillColor);
   textNode.setAttribute('data-test', 'visualization-primary-value');
   textNode.appendChild(document.createTextNode(formattedValue));
   svgValue.appendChild(textNode);
 
   if (subText) {
-    const 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('fill', colors.grey600);
+    subTextNode.setAttribute('y', iconSize / 2 + topMargin / 2);
+    subTextNode.setAttribute('dy', subTextSize * 1.7);
+    subTextNode.setAttribute('fill', textColor);
     subTextNode.appendChild(document.createTextNode(subText));
-    svgSubText.appendChild(subTextNode);
-    svgValue.appendChild(svgSubText);
+    svgValue.appendChild(subTextNode);
   }
 
   return svgValue;
@@ -64,14 +135,28 @@ 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,
+    textColor: titleColor,
+    noData,
+    icon,
+    containerWidth: width,
+    containerHeight: height
+  }));
   const container = document.createElement('div');
-  container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color:".concat(backgroundColor, ";"));
-  const titleStyle = "font-size: 12px; color: ".concat(titleColor || '#666', ";");
+  container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding-top: 8px; ".concat(backgroundColor ? "background-color:".concat(backgroundColor, ";") : ''));
+  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 +167,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,89 +206,92 @@ 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'); // title
+
   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', "".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));
-    svg.appendChild(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', 28);
-  subtitle.setAttribute('dy', 22);
-  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));
-    svg.appendChild(subtitle);
+    svgWrapper.appendChild(subtitle);
   }
 
-  svg.appendChild(generateValueSVG({
+  svgContainer.appendChild(svgWrapper);
+  svgContainer.appendChild(generateValueSVG({
     formattedValue: config.formattedValue,
     subText: config.subText,
     valueColor,
+    textColor: titleColor,
     noData,
-    y: 20
+    icon,
+    containerWidth: width,
+    containerHeight: height,
+    topMargin: TOP_MARGIN_FIXED + ((config.title ? parseInt(title.getAttribute('font-size')) : 0) + (config.subtitle ? parseInt(subtitle.getAttribute('font-size')) : 0)) * 2.5
   }));
-  return 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
@@ -230,14 +312,15 @@ const shouldUseContrastColor = inputColor => {
   return L <= 0.179;
 };
 
-export default function (config, parentEl, _ref4) {
+export default function (config, parentEl, _ref6) {
   let {
     dashboard,
     legendSets,
     fontStyle,
     noData,
-    legendOptions
-  } = _ref4;
+    legendOptions,
+    icon
+  } = _ref6;
   const legendSet = legendOptions && legendSets[0];
   const legendColor = legendSet && getColorByValueFromLegendSet(legendSet, config.value);
   let valueColor, titleColor, backgroundColor;
@@ -254,26 +337,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;
+    parentEl.style.borderRadius = '3px';
     return generateDashboardItem(config, {
+      svgContainer,
+      width,
+      height,
       valueColor,
       backgroundColor,
       noData,
-      ...(shouldUseContrastColor(legendColor) ? {
+      icon,
+      ...(legendOptions.style === LEGEND_DISPLAY_STYLE_FILL && legendColor && shouldUseContrastColor(legendColor) ? {
         titleColor: colors.white
       } : {})
     });
   } else {
     parentEl.style.height = "100%";
     return generateDVItem(config, {
+      svgContainer,
+      width,
+      height,
       valueColor,
       backgroundColor,
       titleColor,
-      parentEl,
-      fontStyle,
-      noData
+      noData,
+      icon,
+      fontStyle
     });
   }
 }

package/package.json

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