@dhis2/analytics 26.8.7 → 26.9.0

package/build/es/locales/lo/translations.json

@@ -18,11 +18,13 @@
     "About this map": "ກ່ຽວກັບແຜນທີ່",
     "About this line list": "ກ່ຽວກັບບັນຊີລາຍຊື່",
     "About this visualization": "ກ່ຽວກັບການສ້າງພາບຂໍ້ມູນ",
+    "About this event chart": "ກ່ຽວກັບເຫດການແຜນຜັງ",
+    "About this event report": "ກ່ຽວກັບບົດລາຍງານເຫດການຕ່າງໆ",
     "This app could not retrieve required data.": "ແອັບນີ້ບໍ່ສາມາດດຶງຂໍ້ມູນທີ່ຕ້ອງການໄດ້",
     "Network error": "ຂໍ້ຜິດພາດທາງເຄື່ອຂ່າຍ",
     "Data / Edit calculation": "ຂໍ້ມູນ / ແກ້ໄຂການຄິດໄລ່",
     "Data / New calculation": "ຂໍ້ມູນ / ຄິດໄລ່ໃໝ່",
-    "Remove item": "ລົບລາຍການ",
+    "Remove item": "ເອົາລາຍການອອກ",
     "Check formula": "ກວດເບິ່ງສູດ",
     "Calculation name": "ຊື່ການຄິດໄລ່",
     "Shown in table headers and chart axes/legends": "ສະ​ແດງ​​ຢູ່​ເທິງຕາ​ຕະ​ລາງ​ ແລະ​ ແກນ​ແຜນ​ວາດ",
@@ -132,17 +134,6 @@
     "Manage sharing": "ຈັດການການເຜີຍແຜ່",
     "Could not update interpretation": "ບໍ່ສາມາດອັບເດດຂໍ້ຄວາມ",
     "Enter interpretation text": "ປ້ອນຂໍ້ຄວາມ",
-    "Bold text": "ຕົວອັກສອນເຂັ້ມ",
-    "Italic text": "ຕົວອັກສອນສະຫຼ່ຽງ",
-    "Link to a URL": "ເຊື່ອມຕໍ່ກັບ URL",
-    "Mention a user": "ກ່າວເຖິງຜູ້ໃຊ້",
-    "Add emoji": "ເພີ່ມ emoji",
-    "Preview": "ເບິ່ງຕົວຢ່າງ",
-    "Back to write mode": "ກັບໄປທີ່ໂໝດຂຽນ",
-    "Too many results. Try refining the search.": "ຜົນໄດ້ຮັບຫຼາຍເກີນໄປ. ປັບປຸງການຄົ້ນຫາ.",
-    "Search for a user": "ຄົ້ນຫາຜູ້ໃຊ້",
-    "Searching for \"{{- searchText}}\"": "ຄົ້ນຫາ \"{{- searchText}}\"",
-    "No results found": "ບໍ່ພົບຜົນການຊອກຫາ",
     "Not available offline": "ບໍ່ສາມາດໃຊ້ໄດ້ອອບລາຍ",
     "Created by": "ສ້າງໂດຍ",
     "Anyone": "ທຸກຄົນ",
@@ -271,6 +262,14 @@
     "Six-months": "6 ເດືອນ",
     "Financial Years": "ສົກປີງົບປະມານ",
     "Years": "ປີ",
+    "Value: {{value}}": "",
+    "Bold text": "ຕົວອັກສອນເຂັ້ມ",
+    "Italic text": "ຕົວອັກສອນສະຫຼ່ຽງ",
+    "Link to a URL": "ເຊື່ອມຕໍ່ກັບ URL",
+    "Mention a user": "ກ່າວເຖິງຜູ້ໃຊ້",
+    "Add emoji": "ເພີ່ມ emoji",
+    "Preview": "ເບິ່ງຕົວຢ່າງ",
+    "Back to write mode": "ກັບໄປທີ່ໂໝດຂຽນ",
     "Interpretations and details": "ຂໍ້ມູນ ແລະ ລາຍລະອຽດ",
     "Translating to": "ແປເປັນ",
     "Choose a locale": "ເລືອກສະຖານທີ່ເກີດເຫດ",
@@ -281,6 +280,10 @@
     "Cannot save while offline": "ບໍ່ສາມາດບັນທຶກແບບອອບລາຍ",
     "Could not load translations": "ບໍ່ສາມາດໂຫຼດການແປ",
     "Retry": "ລອງໃໝ່",
+    "Too many results. Try refining the search.": "ຜົນໄດ້ຮັບຫຼາຍເກີນໄປ. ປັບປຸງການຄົ້ນຫາ.",
+    "Search for a user": "ຄົ້ນຫາຜູ້ໃຊ້",
+    "Searching for \"{{- searchText}}\"": "ຄົ້ນຫາ \"{{- searchText}}\"",
+    "No results found": "ບໍ່ພົບຜົນການຊອກຫາ",
     "Series": "ແທ່ງ",
     "Category": "ລວງນອນ",
     "Filter": "ຕົວກອງ",
@@ -350,6 +353,7 @@
     "{{thresholdFactor}} × Modified Z-score high": "{{thresholdFactor}} x ແກ້ໄຂຄະແນນ z ສູງ",
     "{{thresholdFactor}} × Z-score low": "{{thresholdFactor}} x ຄະແນນ z ຕ່ຳ",
     "{{thresholdFactor}} × Z-score high": "{{thresholdFactor}} x ຄະແນນ z ສູງ",
+    "Not applicable": "",
     "Data": "ຂໍ້ມູນ",
     "Organisation unit": "​ຫົວ​ໜ່ວຍ​ການ​ຈັດ​ຕັ້ງ",
     "Assigned Categories": "ຈັດໝວດໝູ່",

package/build/es/visualizations/config/adapters/dhis_highcharts/chart/default.js

@@ -0,0 +1,19 @@
+import { getEvents } from '../events/index.js';
+import getType from '../type.js';
+const DEFAULT_CHART = {
+  spacingTop: 20,
+  style: {
+    fontFamily: 'Roboto,Helvetica Neue,Helvetica,Arial,sans-serif'
+  }
+};
+const DASHBOARD_CHART = {
+  spacingTop: 0,
+  spacingRight: 5,
+  spacingBottom: 2,
+  spacingLeft: 5
+};
+export default function getDefaultChart(layout, el, extraOptions) {
+  return Object.assign({}, getType(layout.type), {
+    renderTo: el || layout.el
+  }, DEFAULT_CHART, extraOptions.dashboard ? DASHBOARD_CHART : undefined, getEvents(layout.type));
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/chart/index.js

@@ -0,0 +1,11 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js';
+import getDefaultChart from './default.js';
+import getSingleValueChart from './singleValue.js';
+export default function getChart(layout, el, extraOptions, series) {
+  switch (layout.type) {
+    case VIS_TYPE_SINGLE_VALUE:
+      return getSingleValueChart(layout, el, extraOptions, series);
+    default:
+      return getDefaultChart(layout, el, extraOptions);
+  }
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/chart/singleValue.js

@@ -0,0 +1,12 @@
+import { getSingleValueBackgroundColor } from '../customSVGOptions/singleValue/getSingleValueBackgroundColor.js';
+import getDefaultChart from './default.js';
+export default function getSingleValueChart(layout, el, extraOptions, series) {
+  const chart = {
+    ...getDefaultChart(layout, el, extraOptions),
+    backgroundColor: getSingleValueBackgroundColor(layout.legend, extraOptions.legendSets, series[0])
+  };
+  if (extraOptions.dashboard) {
+    chart.spacingTop = 7;
+  }
+  return chart;
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/customSVGOptions/index.js

@@ -0,0 +1,29 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js';
+import getSingleValueCustomSVGOptions from './singleValue/index.js';
+export default function getCustomSVGOptions(_ref) {
+  let {
+    extraConfig,
+    layout,
+    extraOptions,
+    metaData,
+    series
+  } = _ref;
+  const baseOptions = {
+    visualizationType: layout.type
+  };
+  switch (layout.type) {
+    case VIS_TYPE_SINGLE_VALUE:
+      return {
+        ...baseOptions,
+        ...getSingleValueCustomSVGOptions({
+          extraConfig,
+          layout,
+          extraOptions,
+          metaData,
+          series
+        })
+      };
+    default:
+      break;
+  }
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueBackgroundColor.js

@@ -0,0 +1,6 @@
+import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../modules/legends.js';
+import { getSingleValueLegendColor } from './getSingleValueLegendColor.js';
+export function getSingleValueBackgroundColor(legendOptions, legendSets, value) {
+  const legendColor = getSingleValueLegendColor(legendOptions, legendSets, value);
+  return legendColor && legendOptions.style === LEGEND_DISPLAY_STYLE_FILL ? legendColor : 'transparent';
+}

package/build/es/visualizations/config/adapters/{dhis_dhis/value/index.js → dhis_highcharts/customSVGOptions/singleValue/getSingleValueFormattedValue.js}

@@ -1,7 +1,7 @@
-import { renderValue } from '../../../../../modules/renderValue.js';
-import { VALUE_TYPE_TEXT } from '../../../../../modules/valueTypes.js';
-import { INDICATOR_FACTOR_100 } from '../index.js';
-export default function (value, layout, metaData) {
+import { renderValue } from '../../../../../../modules/renderValue.js';
+import { VALUE_TYPE_TEXT } from '../../../../../../modules/valueTypes.js';
+export const INDICATOR_FACTOR_100 = 100;
+export function getSingleValueFormattedValue(value, layout, metaData) {
   const valueType = metaData.items[metaData.dimensions.dx[0]].valueType;
   const indicatorType = metaData.items[metaData.dimensions.dx[0]].indicatorType;
   let formattedValue = renderValue(value, valueType || VALUE_TYPE_TEXT, {

package/build/es/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueLegendColor.js

@@ -0,0 +1,5 @@
+import { getColorByValueFromLegendSet } from '../../../../../../modules/legends.js';
+export function getSingleValueLegendColor(legendOptions, legendSets, value) {
+  const legendSet = legendOptions && legendSets[0];
+  return legendSet ? getColorByValueFromLegendSet(legendSet, value) : undefined;
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueSubtext.js

@@ -0,0 +1,5 @@
+import { INDICATOR_FACTOR_100 } from './getSingleValueFormattedValue.js';
+export function getSingleValueSubtext(metaData) {
+  const indicatorType = metaData.items[metaData.dimensions.dx[0]].indicatorType;
+  return indicatorType !== null && indicatorType !== void 0 && indicatorType.displayName && (indicatorType === null || indicatorType === void 0 ? void 0 : indicatorType.factor) !== INDICATOR_FACTOR_100 ? indicatorType === null || indicatorType === void 0 ? void 0 : indicatorType.displayName : undefined;
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueTextColor.js

@@ -0,0 +1,14 @@
+import { colors } from '@dhis2/ui';
+import { LEGEND_DISPLAY_STYLE_TEXT } from '../../../../../../modules/legends.js';
+import { shouldUseContrastColor } from '../../../../../util/shouldUseContrastColor.js';
+import { getSingleValueLegendColor } from './getSingleValueLegendColor.js';
+export function getSingleValueTextColor(baseColor, value, legendOptions, legendSets) {
+  const legendColor = getSingleValueLegendColor(legendOptions, legendSets, value);
+  if (!legendColor) {
+    return baseColor;
+  }
+  if (legendOptions.style === LEGEND_DISPLAY_STYLE_TEXT) {
+    return legendColor;
+  }
+  return shouldUseContrastColor(legendColor) ? colors.white : baseColor;
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueTitleColor.js

@@ -0,0 +1,20 @@
+import { colors } from '@dhis2/ui';
+import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../modules/legends.js';
+import { shouldUseContrastColor } from '../../../../../util/shouldUseContrastColor.js';
+import { getSingleValueLegendColor } from './getSingleValueLegendColor.js';
+export function getSingleValueTitleColor(customColor, defaultColor, value, legendOptions, legendSets) {
+  // Never override custom color
+  if (customColor) {
+    return customColor;
+  }
+  const isUsingLegendBackground = (legendOptions === null || legendOptions === void 0 ? void 0 : legendOptions.style) === LEGEND_DISPLAY_STYLE_FILL;
+
+  // If not using legend background, always return default color
+  if (!isUsingLegendBackground) {
+    return defaultColor;
+  }
+  const legendColor = getSingleValueLegendColor(legendOptions, legendSets, value);
+
+  // Return default color or contrasting color when using legend background and default color
+  return shouldUseContrastColor(legendColor) ? colors.white : defaultColor;
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/index.js

@@ -0,0 +1,25 @@
+import { colors } from '@dhis2/ui';
+import { getSingleValueFormattedValue } from './getSingleValueFormattedValue.js';
+import { getSingleValueSubtext } from './getSingleValueSubtext.js';
+import { getSingleValueTextColor } from './getSingleValueTextColor.js';
+export default function getSingleValueCustomSVGOptions(_ref) {
+  let {
+    layout,
+    extraOptions,
+    metaData,
+    series
+  } = _ref;
+  const {
+    dashboard,
+    icon
+  } = extraOptions;
+  const value = series[0];
+  return {
+    value,
+    fontColor: getSingleValueTextColor(colors.grey900, value, layout.legend, extraOptions.legendSets),
+    formattedValue: getSingleValueFormattedValue(value, layout, metaData),
+    icon,
+    dashboard,
+    subText: getSingleValueSubtext(metaData)
+  };
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/index.js

@@ -0,0 +1,16 @@
+import loadCustomSVG from './loadCustomSVG/index.js';
+export const getEvents = visType => ({
+  events: {
+    load: function () {
+      // Align legend icon with legend text
+      this.legend.allItems.forEach(item => {
+        if (item.legendSymbol) {
+          item.legendSymbol.attr({
+            translateY: -(item.legendItem.label.getBBox().height * 0.75 / 4) + item.legendSymbol.r / 2
+          });
+        }
+      });
+      loadCustomSVG.call(this, visType);
+    }
+  }
+});

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/index.js

@@ -0,0 +1,11 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../../../modules/visTypes.js';
+import loadSingleValueSVG from './singleValue/index.js';
+export default function loadCustomSVG(visType) {
+  switch (visType) {
+    case VIS_TYPE_SINGLE_VALUE:
+      loadSingleValueSVG.call(this);
+      break;
+    default:
+      break;
+  }
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/addIconElement.js

@@ -0,0 +1,28 @@
+const parser = new DOMParser();
+export function addIconElement(svgString, color) {
+  const svgIconDocument = parser.parseFromString(svgString, 'image/svg+xml');
+  const iconElHeight = svgIconDocument.documentElement.getAttribute('height');
+  const iconElWidth = svgIconDocument.documentElement.getAttribute('width');
+  const iconGroup = this.renderer.g('icon').attr({
+    color,
+    'data-test': 'visualization-icon'
+  }).css({
+    visibility: 'hidden'
+  });
+
+  /* Force the group element to have the same dimensions as the original
+   * SVG image by adding this rect. This ensures the icon has the intended
+   * whitespace around it and makes scaling and translating easier. */
+  this.renderer.rect(0, 0, iconElWidth, iconElHeight).add(iconGroup);
+  Array.from(svgIconDocument.documentElement.children).forEach(pathNode => {
+    /* It is also possible to use the SVGRenderer to draw the icon but that
+     * approach is more error prone, so during review it was decided to just
+     * append the SVG children to the iconGroup using native the native DOM
+     * API. For reference see this commit, for an implementation using the
+     * SVVGRenderer:
+     * https://github.com/dhis2/analytics/pull/1698/commits/f95bee838e07f4cdfc3cab6e92f28f49a386a0ad */
+    iconGroup.element.appendChild(pathNode);
+  });
+  iconGroup.add();
+  return iconGroup;
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/checkIfFitsWithinContainer.js

@@ -0,0 +1,13 @@
+import { ACTUAL_NUMBER_HEIGHT_FACTOR } from './constants.js';
+export function checkIfFitsWithinContainer(availableSpace, valueElement, subTextElement, icon, subText, spacing) {
+  const valueRect = valueElement.getBBox(true);
+  const subTextRect = subText ? subTextElement.getBBox(true) : {
+    width: 0,
+    height: 0
+  };
+  const requiredValueWidth = icon ? valueRect.width + spacing.iconGap + spacing.iconSize : valueRect.width;
+  const requiredHeight = subText ? valueRect.height * ACTUAL_NUMBER_HEIGHT_FACTOR + spacing.subTextTop + subTextRect.height : valueRect.height * ACTUAL_NUMBER_HEIGHT_FACTOR;
+  const fitsHorizontally = availableSpace.width > requiredValueWidth && availableSpace.width > subTextRect.width;
+  const fitsVertically = availableSpace.height > requiredHeight;
+  return fitsHorizontally && fitsVertically;
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/computeLayoutRect.js

@@ -0,0 +1,33 @@
+import { computeSpacingTop } from './computeSpacingTop.js';
+import { ACTUAL_NUMBER_HEIGHT_FACTOR } from './constants.js';
+export function computeLayoutRect(valueElement, subTextElement, iconElement, spacing) {
+  const valueRect = valueElement.getBBox();
+  const containerCenterY = this.chartHeight / 2;
+  const containerCenterX = this.chartWidth / 2;
+  const minY = computeSpacingTop.call(this, spacing.valueTop);
+  let width = valueRect.width;
+  let height = valueRect.height * ACTUAL_NUMBER_HEIGHT_FACTOR;
+  let sideMarginTop = 0;
+  let sideMarginBottom = 0;
+  if (iconElement) {
+    width += spacing.iconGap + spacing.iconSize;
+  }
+  if (subTextElement) {
+    const subTextRect = subTextElement.getBBox();
+    if (subTextRect.width > width) {
+      sideMarginTop = (subTextRect.width - width) / 2;
+      width = subTextRect.width;
+    } else {
+      sideMarginBottom = (width - subTextRect.width) / 2;
+    }
+    height += spacing.subTextTop + subTextRect.height;
+  }
+  return {
+    x: containerCenterX - width / 2,
+    y: Math.max(containerCenterY - height / 2, minY),
+    width,
+    height,
+    sideMarginTop,
+    sideMarginBottom
+  };
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/computeSpacingTop.js

@@ -0,0 +1,15 @@
+export function computeSpacingTop(valueSpacingTop) {
+  if (this.subtitle.textStr) {
+    /* If a subtitle is present this will be below the title so base
+     * the value X position on this */
+    const subTitleRect = this.subtitle.element.getBBox();
+    return subTitleRect.y + subTitleRect.height + valueSpacingTop;
+  } else if (this.title.textStr) {
+    // Otherwise base on title
+    const titleRect = this.title.element.getBBox();
+    return titleRect.y + titleRect.height + valueSpacingTop;
+  } else {
+    // If neither are present only adjust for valueSpacingTop
+    return valueSpacingTop;
+  }
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/constants.js

@@ -0,0 +1,4 @@
+// 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"
+export const ACTUAL_NUMBER_HEIGHT_FACTOR = 2 / 3;

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/getAvailableSpace.js

@@ -0,0 +1,8 @@
+import { computeSpacingTop } from './computeSpacingTop.js';
+import { MIN_SIDE_WHITESPACE } from './styles.js';
+export function getAvailableSpace(valueSpacingTop) {
+  return {
+    height: this.chartHeight - computeSpacingTop.call(this, valueSpacingTop),
+    width: this.chartWidth - MIN_SIDE_WHITESPACE * 2
+  };
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/index.js

@@ -0,0 +1,42 @@
+import { addIconElement } from './addIconElement.js';
+import { checkIfFitsWithinContainer } from './checkIfFitsWithinContainer.js';
+import { getAvailableSpace } from './getAvailableSpace.js';
+import { positionElements } from './positionElements.js';
+import { DynamicStyles } from './styles.js';
+export default function loadSingleValueSVG() {
+  var _this$userOptions;
+  const {
+    formattedValue,
+    icon,
+    subText,
+    fontColor
+  } = this.userOptions.customSVGOptions;
+  const dynamicStyles = new DynamicStyles((_this$userOptions = this.userOptions) === null || _this$userOptions === void 0 ? void 0 : _this$userOptions.isPdfExport);
+  const valueElement = this.renderer.text(formattedValue).attr('data-test', 'visualization-primary-value').css({
+    color: fontColor,
+    visibility: 'hidden'
+  }).add();
+  const subTextElement = subText ? this.renderer.text(subText).attr('data-test', 'visualization-subtext').css({
+    color: fontColor,
+    visibility: 'hidden'
+  }).add() : null;
+  const iconElement = icon ? addIconElement.call(this, icon, fontColor) : null;
+  let fitsWithinContainer = false;
+  let styles = {};
+  while (!fitsWithinContainer && dynamicStyles.hasNext()) {
+    styles = dynamicStyles.next();
+    valueElement.css(styles.value);
+    subTextElement === null || subTextElement === void 0 ? void 0 : subTextElement.css(styles.subText);
+    fitsWithinContainer = checkIfFitsWithinContainer(getAvailableSpace.call(this, styles.spacing.valueTop), valueElement, subTextElement, icon, subText, styles.spacing);
+  }
+  positionElements.call(this, valueElement, subTextElement, iconElement, styles.spacing);
+  valueElement.css({
+    visibility: 'visible'
+  });
+  iconElement === null || iconElement === void 0 ? void 0 : iconElement.css({
+    visibility: 'visible'
+  });
+  subTextElement === null || subTextElement === void 0 ? void 0 : subTextElement.css({
+    visibility: 'visible'
+  });
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/positionElements.js

@@ -0,0 +1,40 @@
+import { computeLayoutRect } from './computeLayoutRect.js';
+import { ACTUAL_NUMBER_HEIGHT_FACTOR } from './constants.js';
+export function positionElements(valueElement, subTextElement, iconElement, spacing) {
+  const valueElementBox = valueElement.getBBox();
+  /* Layout here refers to a virtual rect that wraps
+   * all indiviual parts of the single value visualization
+   * (value, subtext and icon) */
+  const layoutRect = computeLayoutRect.call(this, valueElement, subTextElement, iconElement, spacing);
+  valueElement.align({
+    align: 'right',
+    verticalAlign: 'top',
+    alignByTranslate: false,
+    x: (valueElementBox.width + layoutRect.sideMarginTop) * -1,
+    y: valueElementBox.height * ACTUAL_NUMBER_HEIGHT_FACTOR
+  }, false, layoutRect);
+  if (iconElement) {
+    const {
+      height
+    } = iconElement.getBBox();
+    const scale = spacing.iconSize / height;
+    const translateX = layoutRect.x + layoutRect.sideMarginTop;
+    const iconHeight = height * scale;
+    const valueElementHeight = valueElementBox.height * ACTUAL_NUMBER_HEIGHT_FACTOR;
+    const translateY = layoutRect.y + (valueElementHeight - iconHeight) / 2;
+
+    /* The icon is a <g> with <path> elements that contain coordinates.
+     * These path-coordinates only scale correctly when using CSS translate */
+    iconElement.css({
+      transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`
+    });
+  }
+  if (subTextElement) {
+    subTextElement.align({
+      align: 'left',
+      verticalAlign: 'bottom',
+      alignByTranslate: false,
+      x: layoutRect.sideMarginBottom
+    }, false, layoutRect);
+  }
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/styles.js

@@ -0,0 +1,101 @@
+const valueStyles = [{
+  'font-size': '164px',
+  'letter-spacing': '-5px'
+}, {
+  'font-size': '128px',
+  'letter-spacing': '-4px'
+}, {
+  'font-size': '96px',
+  'letter-spacing': '-3px'
+}, {
+  'font-size': '64px',
+  'letter-spacing': '-2.5px'
+}, {
+  'font-size': '40px',
+  'letter-spacing': '-1.5px'
+}, {
+  'font-size': '20px',
+  'letter-spacing': '-1px'
+}];
+const subTextStyles = [{
+  'font-size': '36px',
+  'letter-spacing': '-1.4px'
+}, {
+  'font-size': '32px',
+  'letter-spacing': '-1.2px'
+}, {
+  'font-size': '26px',
+  'letter-spacing': '-0.8px'
+}, {
+  'font-size': '20px',
+  'letter-spacing': '-0.6px'
+}, {
+  'font-size': '14px',
+  'letter-spacing': '0.2px'
+}, {
+  'font-size': '9px',
+  'letter-spacing': '0px'
+}];
+const spacings = [{
+  valueTop: 8,
+  subTextTop: 12,
+  iconGap: 8,
+  iconSize: 164
+}, {
+  valueTop: 8,
+  subTextTop: 12,
+  iconGap: 6,
+  iconSize: 128
+}, {
+  valueTop: 8,
+  subTextTop: 8,
+  iconGap: 4,
+  iconSize: 96
+}, {
+  valueTop: 8,
+  subTextTop: 8,
+  iconGap: 4,
+  iconSize: 64
+}, {
+  valueTop: 8,
+  subTextTop: 8,
+  iconGap: 4,
+  iconSize: 40
+}, {
+  valueTop: 8,
+  subTextTop: 4,
+  iconGap: 2,
+  iconSize: 20
+}];
+export const MIN_SIDE_WHITESPACE = 4;
+export class DynamicStyles {
+  constructor(isPdfExport) {
+    this.currentIndex = 0;
+    this.isPdfExport = isPdfExport;
+  }
+  getStyle() {
+    return {
+      value: {
+        ...valueStyles[this.currentIndex],
+        'font-weight': this.isPdfExport ? 'normal' : '300'
+      },
+      subText: subTextStyles[this.currentIndex],
+      spacing: spacings[this.currentIndex]
+    };
+  }
+  next() {
+    if (this.currentIndex === valueStyles.length - 1) {
+      throw new Error('No next available, already on the smallest style');
+    } else {
+      ++this.currentIndex;
+    }
+    return this.getStyle();
+  }
+  first() {
+    this.currentIndex = 0;
+    return this.getStyle();
+  }
+  hasNext() {
+    return this.currentIndex < valueStyles.length - 1;
+  }
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/exporting.js

@@ -0,0 +1,23 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js';
+import loadSingleValueSVG from './events/loadCustomSVG/singleValue/index.js';
+export default function getExporting(visType) {
+  const exporting = {
+    // disable exporting context menu
+    enabled: false
+  };
+  switch (visType) {
+    case VIS_TYPE_SINGLE_VALUE:
+      return {
+        ...exporting,
+        chartOptions: {
+          chart: {
+            events: {
+              load: loadSingleValueSVG
+            }
+          }
+        }
+      };
+    default:
+      return exporting;
+  }
+}