@dhis2/analytics 26.8.7 → 26.9.3

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

@@ -18,6 +18,8 @@
     "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": "Lỗi mạng",
     "Data / Edit calculation": "",
@@ -132,17 +134,6 @@
     "Manage sharing": "Quản lý chia sẻ",
     "Could not update interpretation": "",
     "Enter interpretation text": "",
-    "Bold text": "",
-    "Italic text": "",
-    "Link to a URL": "",
-    "Mention a user": "",
-    "Add emoji": "",
-    "Preview": "Xem thử",
-    "Back to write mode": "",
-    "Too many results. Try refining the search.": "",
-    "Search for a user": "",
-    "Searching for \"{{- searchText}}\"": "",
-    "No results found": "Không tìm thấy kết quả nào",
     "Not available offline": "",
     "Created by": "Được tạo bởi",
     "Anyone": "Bất kỳ ai",
@@ -215,7 +206,7 @@
     "Quarterly": "Hàng quý",
     "Six-monthly": "Hàng 6 tháng",
     "Six-monthly April": "Hàng 6 tháng - tháng 4",
-    "Yearly": "Một năm",
+    "Yearly": "Hàng năm",
     "Financial year (Start November)": "Năm tài chính (Bắt đầu từ tháng 11)",
     "Financial year (Start October)": "Năm Tài Chính - Tháng 10",
     "Financial year (Start July)": "Năm Tài Chính - Tháng 7",
@@ -271,6 +262,14 @@
     "Six-months": "Sáu-tháng",
     "Financial Years": "Năm tài chính",
     "Years": "Năm",
+    "Value: {{value}}": "",
+    "Bold text": "",
+    "Italic text": "",
+    "Link to a URL": "",
+    "Mention a user": "",
+    "Add emoji": "",
+    "Preview": "Xem thử",
+    "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}}\"": "",
+    "No results found": "Không tìm thấy kết quả nào",
     "Series": "Chuỗi Dữ Liệu",
     "Category": "Phân loại",
     "Filter": "Lọc",
@@ -350,6 +353,7 @@
     "{{thresholdFactor}} × Modified Z-score high": "",
     "{{thresholdFactor}} × Z-score low": "",
     "{{thresholdFactor}} × Z-score high": "",
+    "Not applicable": "",
     "Data": "Lấy dữ liệu",
     "Organisation unit": "Đơn vị",
     "Assigned Categories": "Phân loại được chỉ định",

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

@@ -262,6 +262,7 @@
     "Six-months": "六个月",
     "Financial Years": "财政年度",
     "Years": "年",
+    "Value: {{value}}": "值{{value}}",
     "Bold text": "粗体文字",
     "Italic text": "斜体文字",
     "Link to a URL": "链接到 URL",
@@ -352,6 +353,7 @@
     "{{thresholdFactor}} × Modified Z-score high": "{{thresholdFactor}}×修改后的Z分数高值",
     "{{thresholdFactor}} × Z-score low": "{{thresholdFactor}}×Z分数低",
     "{{thresholdFactor}} × Z-score high": "{{thresholdFactor}}×Z分数高",
+    "Not applicable": "不适用",
     "Data": "数据",
     "Organisation unit": "机构",
     "Assigned Categories": "指定的分类",

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

@@ -51,4 +51,13 @@ describe('getOuLevelAndGroupText', () => {
     }];
     expect(getOuLevelAndGroupText(filter, metaData)).toEqual('Fruit and Veggies groups - Second floor levels');
   });
+  it('grabs name for user orgunits from items when not present in metaData', () => {
+    filter.items = [{
+      id: 'USER_ORGUNIT',
+      name: 'User organisation unit'
+    }, {
+      id: 'LEVEL-2nd-floor'
+    }];
+    expect(getOuLevelAndGroupText(filter, metaData)).toEqual('Second floor levels in User organisation unit');
+  });
 });

package/build/es/modules/getOuLevelAndGroupText.js

@@ -20,7 +20,10 @@ export const getOuLevelAndGroupText = (filter, metaData) => {
   return filterFragments.join(' - ');
 };
 const getLevelAndGroupText = (items, metaData, isLevel) => {
-  const getNameFromMetadata = id => metaData.items[id] ? metaData.items[id].name : id;
+  const getNameFromMetadata = id => {
+    var _items$find;
+    return metaData.items[id] ? metaData.items[id].name : ((_items$find = items.find(item => item.id === id)) === null || _items$find === void 0 ? void 0 : _items$find.name) || id;
+  };
   const dynamicOuItems = items.filter(item => isLevel ? ouIdHelper.hasLevelPrefix(item.id) : ouIdHelper.hasGroupPrefix(item.id));
   const lastItem = dynamicOuItems.length > 1 ? dynamicOuItems.pop() : null;
   const dynamicOuNames = dynamicOuItems.map(item => getNameFromMetadata(ouIdHelper.removePrefix(item.id))).join(', ');

package/build/es/modules/pivotTable/AdaptiveClippingController.js

@@ -1,6 +1,6 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { measureTextWithWrapping } from './measureText.js';
 import { CLIPPED_AXIS_PARTITION_SIZE_PX, CLIPPED_CELL_MIN_SIZE } from './pivotTableConstants.js';
 export class AdaptiveClippingController {

package/build/es/modules/pivotTable/PivotTableEngine.js

@@ -1,6 +1,6 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import i18n from '@dhis2/d2-i18n';
 import times from 'lodash/times';
 import { DIMENSION_TYPE_DATA, DIMENSION_TYPE_DATA_ELEMENT_GROUP_SET, DIMENSION_TYPE_ORGANISATION_UNIT, DIMENSION_TYPE_PERIOD } from '../dataTypes.js';

package/build/es/modules/pivotTable/useSortableColumns.js

@@ -19,7 +19,6 @@ export const useSortableColumns = engine => {
       order
     }); // Force a re-render
   };
-
   return {
     sortBy,
     onSortByColumn

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,41 @@
+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() {
+  const {
+    formattedValue,
+    icon,
+    subText,
+    fontColor
+  } = this.userOptions.customSVGOptions;
+  const dynamicStyles = new DynamicStyles();
+  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,100 @@
+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() {
+    this.currentIndex = 0;
+  }
+  getStyle() {
+    return {
+      value: {
+        ...valueStyles[this.currentIndex],
+        'font-weight': '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;
+  }
+}