@dhis2/analytics 24.10.1 → 25.1.0

package/build/es/modules/__tests__/hash.spec.js

@@ -0,0 +1,88 @@
+import { DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from '../dataTypes.js';
+import { getExpressionHashFromVisualization, getHash } from '../hash.js';
+describe('getHash', () => {
+  const textInput = 'Raymond Luxury Yacht';
+  it('accepts a string and returns a hash', () => {
+    const hash = getHash(textInput);
+    expect(typeof hash).toBe('string');
+    expect(hash).not.toBe(textInput);
+  });
+  it('is deterministic', () => {
+    expect(getHash(textInput)).toBe(getHash(textInput));
+  });
+  it('returns undefined for invalid input', () => {
+    const unsupportedTypes = ['', 1, true, null, undefined, {}, []];
+    unsupportedTypes.forEach(type => expect(getHash(type)).toBe(undefined));
+  });
+});
+describe('getExpressionHashFromVisualization', () => {
+  const edi1 = {
+    id: 'OdiHJayrsKo',
+    dimensionItemType: DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM,
+    expression: '#{abc} * 10'
+  };
+  const edi2 = {
+    id: 'Uvn6LCg7dVU',
+    dimensionItemType: DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM,
+    expression: '#{abc} * 20'
+  };
+  const dxWithEdi = {
+    dimension: 'dx',
+    items: [edi1, edi2]
+  };
+  it('generates a hash (columns)', () => {
+    expect(typeof getExpressionHashFromVisualization({
+      columns: [dxWithEdi],
+      rows: [],
+      filters: []
+    })).toBe('string');
+  });
+  it('generates a hash (rows)', () => {
+    expect(typeof getExpressionHashFromVisualization({
+      columns: [],
+      rows: [dxWithEdi],
+      filters: []
+    })).toBe('string');
+  });
+  it('generates a hash (filters)', () => {
+    expect(typeof getExpressionHashFromVisualization({
+      columns: [],
+      rows: [],
+      filters: [dxWithEdi]
+    })).toBe('string');
+  });
+  it('does not generate a hash when there are no dimensions', () => {
+    expect(getExpressionHashFromVisualization({
+      columns: [],
+      rows: [],
+      filters: []
+    })).toBe(undefined);
+  });
+  it('does not generate a hash when there are no EDI dimensions', () => {
+    expect(getExpressionHashFromVisualization({
+      columns: [{
+        id: 'OdiHJayrsKo',
+        dimensionItemType: 'INDICATOR'
+      }],
+      rows: [],
+      filters: []
+    })).toBe(undefined);
+  });
+  it('sorts the edi objects by id before generating the hash to optimize caching', () => {
+    expect(getExpressionHashFromVisualization({
+      columns: [{
+        dimension: 'dx',
+        items: [edi1, edi2]
+      }],
+      rows: [],
+      filters: []
+    })).toBe(getExpressionHashFromVisualization({
+      columns: [{
+        dimension: 'dx',
+        items: [edi2, edi1]
+      }],
+      rows: [],
+      filters: []
+    }));
+  });
+});

package/build/es/modules/__tests__/parseExpression.spec.js

@@ -0,0 +1,43 @@
+import { parseExpression } from '../expressions.js';
+test('matches numbers and operators', () => {
+  expect(parseExpression('1+2-3*4/5')).toEqual(['1', '+', '2', '-', '3', '*', '4', '/', '5']);
+});
+test('matches #{} with letters, numbers and operators', () => {
+  expect(parseExpression('#{abc123}+100-200*300/400')).toEqual(['#{abc123}', '+', '100', '-', '200', '*', '300', '/', '400']);
+});
+test('matches numbers and operators with brackets', () => {
+  expect(parseExpression('1+(2-3)*4/5')).toEqual(['1', '+', '(', '2', '-', '3', ')', '*', '4', '/', '5']);
+});
+test('matches #{} with letters, numbers and operators with brackets', () => {
+  expect(parseExpression('(100-200)+#{abc123}*300/400')).toEqual(['(', '100', '-', '200', ')', '+', '#{abc123}', '*', '300', '/', '400']);
+});
+test('matches #{} with numbers and operators with brackets', () => {
+  expect(parseExpression('#{123}+(10-200)*3000/40000')).toEqual(['#{123}', '+', '(', '10', '-', '200', ')', '*', '3000', '/', '40000']);
+});
+test('matches #{} with letters and numbers only', () => {
+  expect(parseExpression('#{abc123}')).toEqual(['#{abc123}']);
+});
+test('matches #{} with numbers only', () => {
+  expect(parseExpression('#{123}')).toEqual(['#{123}']);
+});
+test('matches #{} with letters only', () => {
+  expect(parseExpression('#{abc}')).toEqual(['#{abc}']);
+});
+test('matches #{} with no input', () => {
+  expect(parseExpression('')).toEqual([]);
+});
+test('matches multiple #{} with operators', () => {
+  expect(parseExpression('#{abc123}+#{def456}')).toEqual(['#{abc123}', '+', '#{def456}']);
+});
+test('matches multiple #{} containing dots with operators', () => {
+  expect(parseExpression('#{abc123.xyz999}+#{def456.xyz999}')).toEqual(['#{abc123.xyz999}', '+', '#{def456.xyz999}']);
+});
+test('matches multiple #{} with operators with brackets', () => {
+  expect(parseExpression('(#{abc123}/#{def456})*#{ghi789}')).toEqual(['(', '#{abc123}', '/', '#{def456}', ')', '*', '#{ghi789}']);
+});
+test('matches on decimal numbers', () => {
+  expect(parseExpression('#{abc123}*1.2/#{def456}')).toEqual(['#{abc123}', '*', '1.2', '/', '#{def456}']);
+});
+test('matches on decimal numbers with #{} containing dots', () => {
+  expect(parseExpression('1.2+#{abc123.xyz999}')).toEqual(['1.2', '+', '#{abc123.xyz999}']);
+});

package/build/es/modules/dataTypes.js

@@ -15,6 +15,7 @@ export const DIMENSION_TYPE_DATA = 'DATA_X';
 export const DIMENSION_TYPE_PERIOD = 'PERIOD';
 export const DIMENSION_TYPE_ORGANISATION_UNIT = 'ORGANISATION_UNIT';
 export const DIMENSION_TYPE_ORGANISATION_UNIT_GROUP_SET = 'ORGANISATION_UNIT_GROUP_SET';
+export const DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM = 'EXPRESSION_DIMENSION_ITEM';
 export const TOTALS = 'totals';
 export const DETAIL = 'detail';
 export const SUB_GROUP_DETAIL = 'DETAIL';
@@ -88,6 +89,11 @@ export const dataTypeMap = {
     getItemName: () => i18n.t('Program indicator'),
     getGroupEmptyLabel: () => i18n.t('No programs found'),
     getGroupLoadingLabel: () => i18n.t('Loading programs')
+  },
+  [DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM]: {
+    id: DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM,
+    getName: () => i18n.t('Calculations'),
+    getItemName: () => i18n.t('Calculation')
   }
 };
 export function defaultGroupId(dataType) {

package/build/es/modules/dimensionListItem.js

@@ -0,0 +1,61 @@
+import { IconDimensionDataSet16, IconDimensionIndicator16, IconDimensionEventDataItem16, IconDimensionProgramIndicator16 } from '@dhis2/ui';
+import React from 'react';
+import DataElementIcon from '../assets/DimensionItemIcons/DataElementIcon.js';
+import GenericIcon from '../assets/DimensionItemIcons/GenericIcon.js';
+import CalculationIcon from './../assets/DimensionItemIcons/CalculationIcon.js';
+import { REPORTING_RATE } from './dataSets.js';
+import { DIMENSION_TYPE_DATA_ELEMENT, DIMENSION_TYPE_DATA_ELEMENT_OPERAND, DIMENSION_TYPE_DATA_SET, DIMENSION_TYPE_EVENT_DATA_ITEM, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM, DIMENSION_TYPE_PROGRAM_ATTRIBUTE, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT, dataTypeMap as dataTypes, DIMENSION_TYPE_INDICATOR, DIMENSION_TYPE_PROGRAM_INDICATOR } from './dataTypes.js';
+export const getTooltipText = _ref => {
+  var _dataTypes$type;
+
+  let {
+    type,
+    expression
+  } = _ref;
+
+  if (type === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && expression) {
+    return dataTypes[DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM].getItemName();
+  }
+
+  switch (type) {
+    case DIMENSION_TYPE_DATA_ELEMENT_OPERAND:
+      return dataTypes[DIMENSION_TYPE_DATA_ELEMENT].getItemName();
+
+    case REPORTING_RATE:
+      return dataTypes[DIMENSION_TYPE_DATA_SET].getItemName();
+
+    case DIMENSION_TYPE_PROGRAM_DATA_ELEMENT:
+    case DIMENSION_TYPE_PROGRAM_ATTRIBUTE:
+      return dataTypes[DIMENSION_TYPE_EVENT_DATA_ITEM].getItemName();
+
+    default:
+      return (_dataTypes$type = dataTypes[type]) === null || _dataTypes$type === void 0 ? void 0 : _dataTypes$type.getItemName();
+  }
+};
+export const getIcon = type => {
+  switch (type) {
+    case DIMENSION_TYPE_INDICATOR:
+      return /*#__PURE__*/React.createElement(IconDimensionIndicator16, null);
+
+    case DIMENSION_TYPE_DATA_ELEMENT_OPERAND:
+    case DIMENSION_TYPE_DATA_ELEMENT:
+      return DataElementIcon;
+
+    case REPORTING_RATE:
+      return /*#__PURE__*/React.createElement(IconDimensionDataSet16, null);
+
+    case DIMENSION_TYPE_EVENT_DATA_ITEM:
+    case DIMENSION_TYPE_PROGRAM_DATA_ELEMENT:
+    case DIMENSION_TYPE_PROGRAM_ATTRIBUTE:
+      return /*#__PURE__*/React.createElement(IconDimensionEventDataItem16, null);
+
+    case DIMENSION_TYPE_PROGRAM_INDICATOR:
+      return /*#__PURE__*/React.createElement(IconDimensionProgramIndicator16, null);
+
+    case DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
+      return CalculationIcon;
+
+    default:
+      return GenericIcon;
+  }
+};

package/build/es/modules/expressions.js

@@ -0,0 +1,131 @@
+import i18n from '../locales/index.js';
+export const EXPRESSION_TYPE_NUMBER = 'EXPRESSION_TYPE_NUMBER';
+export const EXPRESSION_TYPE_OPERATOR = 'EXPRESSION_TYPE_OPERATOR';
+export const EXPRESSION_TYPE_DATA = 'EXPRESSION_TYPE_DATA';
+export const VALID_EXPRESSION = 'OK';
+export const INVALID_EXPRESSION = 'ERROR';
+export const getOperators = () => [{
+  value: '+',
+  label: '+',
+  type: EXPRESSION_TYPE_OPERATOR
+}, {
+  value: '-',
+  label: '-',
+  type: EXPRESSION_TYPE_OPERATOR
+}, {
+  value: '*',
+  label: '×',
+  type: EXPRESSION_TYPE_OPERATOR
+}, {
+  value: '/',
+  label: '/',
+  type: EXPRESSION_TYPE_OPERATOR
+}, {
+  value: '(',
+  label: '(',
+  type: EXPRESSION_TYPE_OPERATOR
+}, {
+  value: ')',
+  label: ')',
+  type: EXPRESSION_TYPE_OPERATOR
+}, {
+  value: '',
+  label: i18n.t('Number'),
+  type: EXPRESSION_TYPE_NUMBER
+}];
+export const parseExpression = input => {
+  const regex = /(#{[a-zA-Z0-9#.]+}|[+\-*/()])|(\d+(\.\d+)?)/g;
+  return input.match(regex) || [];
+};
+export const parseExpressionToArray = function () {
+  let expression = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let metadata = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return parseExpression(expression).map(value => {
+    if (value.startsWith('#{') && value.endsWith('}')) {
+      var _metadata$find;
+
+      const id = value.slice(2, -1);
+      const label = ((_metadata$find = metadata.find(item => item.id === id)) === null || _metadata$find === void 0 ? void 0 : _metadata$find.name) || id;
+      return {
+        value,
+        label,
+        type: EXPRESSION_TYPE_DATA
+      };
+    }
+
+    if (isNaN(value)) {
+      return {
+        value,
+        label: getOperators().find(op => op.value === value).label,
+        type: EXPRESSION_TYPE_OPERATOR
+      };
+    }
+
+    return {
+      value,
+      label: value,
+      type: EXPRESSION_TYPE_NUMBER
+    };
+  }) || [];
+};
+export const parseArrayToExpression = function () {
+  let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return input.map(item => item.value).join('');
+};
+export const validateExpression = expression => {
+  let result;
+  const leftParenthesisCount = expression.split('(').length - 1;
+  const rightParenthesisCount = expression.split(')').length - 1;
+
+  if (!expression) {
+    // empty formula
+    result = {
+      status: INVALID_EXPRESSION,
+      message: i18n.t('Formula is empty. Add items to the formula from the lists on the left.')
+    }; // TODO: reimplement this but allow negative values, e.g. 10 / -5
+    // } else if (/[-+/*]{2,}/.test(expression)) {
+    //     // two math operators next to each other
+    //     result = {
+    //         status: INVALID_EXPRESSION,
+    //         message: i18n.t('Consecutive math operators'),
+    //     }
+  } else if (/}#/.test(expression)) {
+    // two data elements next to each other
+    result = {
+      status: INVALID_EXPRESSION,
+      message: i18n.t('Consecutive data elements')
+    };
+  } else if (/^[+\-*/]|[+\-*/]$/.test(expression)) {
+    // starting or ending with a math operator
+    result = {
+      status: INVALID_EXPRESSION,
+      message: i18n.t('Starts or ends with a math operator')
+    };
+  } else if (/\(\)/.test(expression)) {
+    // contains an empty set of parentheses
+    result = {
+      status: INVALID_EXPRESSION,
+      message: i18n.t('Empty parentheses')
+    };
+  } else if (leftParenthesisCount > rightParenthesisCount) {
+    // ( but no )
+    result = {
+      status: INVALID_EXPRESSION,
+      message: i18n.t('Missing right parenthesis )')
+    };
+  } else if (rightParenthesisCount > leftParenthesisCount) {
+    // ) but no (
+    result = {
+      status: INVALID_EXPRESSION,
+      message: i18n.t('Missing left parenthesis (')
+    };
+  }
+
+  return result;
+};
+export const getItemIdsFromExpression = function () {
+  let expression = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const regex = /#{([a-zA-Z0-9#]+.*?)}/g;
+  const matches = expression.match(regex);
+  return matches ? matches.map(match => match.slice(2, -1)) : [];
+};

package/build/es/modules/hash.js

@@ -0,0 +1,12 @@
+import SHA1 from 'crypto-js/sha1';
+import { DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from './dataTypes.js';
+import { layoutGetAllItems } from './layout/layoutGetAllItems.js';
+
+const isValidValue = value => typeof value === 'string' && value.length;
+
+export const getHash = value => isValidValue(value) ? SHA1(value).toString() : undefined;
+export const getExpressionHashFromVisualization = visualization => {
+  var _layoutGetAllItems;
+
+  return getHash((_layoutGetAllItems = layoutGetAllItems(visualization)) === null || _layoutGetAllItems === void 0 ? void 0 : _layoutGetAllItems.filter(item => item.dimensionItemType === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && isValidValue(item.expression)).sort((i1, i2) => i1.id < i2.id ? -1 : i1.id > i2.id ? 1 : 0).map(edi => edi.expression).join(''));
+};

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
     });
   }
 }