@dhis2/analytics 26.8.7 → 26.9.0

package/build/cjs/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/cjs/visualizations/config/adapters/dhis_highcharts/chart/default.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getDefaultChart;
+var _index = require("../events/index.js");
+var _type = _interopRequireDefault(require("../type.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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
+};
+function getDefaultChart(layout, el, extraOptions) {
+  return Object.assign({}, (0, _type.default)(layout.type), {
+    renderTo: el || layout.el
+  }, DEFAULT_CHART, extraOptions.dashboard ? DASHBOARD_CHART : undefined, (0, _index.getEvents)(layout.type));
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getChart;
+var _visTypes = require("../../../../../modules/visTypes.js");
+var _default = _interopRequireDefault(require("./default.js"));
+var _singleValue = _interopRequireDefault(require("./singleValue.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getChart(layout, el, extraOptions, series) {
+  switch (layout.type) {
+    case _visTypes.VIS_TYPE_SINGLE_VALUE:
+      return (0, _singleValue.default)(layout, el, extraOptions, series);
+    default:
+      return (0, _default.default)(layout, el, extraOptions);
+  }
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getSingleValueChart;
+var _getSingleValueBackgroundColor = require("../customSVGOptions/singleValue/getSingleValueBackgroundColor.js");
+var _default = _interopRequireDefault(require("./default.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getSingleValueChart(layout, el, extraOptions, series) {
+  const chart = {
+    ...(0, _default.default)(layout, el, extraOptions),
+    backgroundColor: (0, _getSingleValueBackgroundColor.getSingleValueBackgroundColor)(layout.legend, extraOptions.legendSets, series[0])
+  };
+  if (extraOptions.dashboard) {
+    chart.spacingTop = 7;
+  }
+  return chart;
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getCustomSVGOptions;
+var _visTypes = require("../../../../../modules/visTypes.js");
+var _index = _interopRequireDefault(require("./singleValue/index.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getCustomSVGOptions(_ref) {
+  let {
+    extraConfig,
+    layout,
+    extraOptions,
+    metaData,
+    series
+  } = _ref;
+  const baseOptions = {
+    visualizationType: layout.type
+  };
+  switch (layout.type) {
+    case _visTypes.VIS_TYPE_SINGLE_VALUE:
+      return {
+        ...baseOptions,
+        ...(0, _index.default)({
+          extraConfig,
+          layout,
+          extraOptions,
+          metaData,
+          series
+        })
+      };
+    default:
+      break;
+  }
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSingleValueBackgroundColor = getSingleValueBackgroundColor;
+var _legends = require("../../../../../../modules/legends.js");
+var _getSingleValueLegendColor = require("./getSingleValueLegendColor.js");
+function getSingleValueBackgroundColor(legendOptions, legendSets, value) {
+  const legendColor = (0, _getSingleValueLegendColor.getSingleValueLegendColor)(legendOptions, legendSets, value);
+  return legendColor && legendOptions.style === _legends.LEGEND_DISPLAY_STYLE_FILL ? legendColor : 'transparent';
+}

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

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = _default;
-var _renderValue = require("../../../../../modules/renderValue.js");
-var _valueTypes = require("../../../../../modules/valueTypes.js");
-var _index = require("../index.js");
-function _default(value, layout, metaData) {
+exports.INDICATOR_FACTOR_100 = void 0;
+exports.getSingleValueFormattedValue = getSingleValueFormattedValue;
+var _renderValue = require("../../../../../../modules/renderValue.js");
+var _valueTypes = require("../../../../../../modules/valueTypes.js");
+const INDICATOR_FACTOR_100 = 100;
+exports.INDICATOR_FACTOR_100 = INDICATOR_FACTOR_100;
+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 = (0, _renderValue.renderValue)(value, valueType || _valueTypes.VALUE_TYPE_TEXT, {
@@ -17,7 +19,7 @@ function _default(value, layout, metaData) {
 
   // only show the percentage symbol for per cent
   // for other factors, show the full text under the value
-  if ((indicatorType === null || indicatorType === void 0 ? void 0 : indicatorType.factor) === _index.INDICATOR_FACTOR_100) {
+  if ((indicatorType === null || indicatorType === void 0 ? void 0 : indicatorType.factor) === INDICATOR_FACTOR_100) {
     formattedValue += '%';
   }
   return formattedValue;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSingleValueLegendColor = getSingleValueLegendColor;
+var _legends = require("../../../../../../modules/legends.js");
+function getSingleValueLegendColor(legendOptions, legendSets, value) {
+  const legendSet = legendOptions && legendSets[0];
+  return legendSet ? (0, _legends.getColorByValueFromLegendSet)(legendSet, value) : undefined;
+}

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSingleValueSubtext = getSingleValueSubtext;
+var _getSingleValueFormattedValue = require("./getSingleValueFormattedValue.js");
+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) !== _getSingleValueFormattedValue.INDICATOR_FACTOR_100 ? indicatorType === null || indicatorType === void 0 ? void 0 : indicatorType.displayName : undefined;
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSingleValueTextColor = getSingleValueTextColor;
+var _ui = require("@dhis2/ui");
+var _legends = require("../../../../../../modules/legends.js");
+var _shouldUseContrastColor = require("../../../../../util/shouldUseContrastColor.js");
+var _getSingleValueLegendColor = require("./getSingleValueLegendColor.js");
+function getSingleValueTextColor(baseColor, value, legendOptions, legendSets) {
+  const legendColor = (0, _getSingleValueLegendColor.getSingleValueLegendColor)(legendOptions, legendSets, value);
+  if (!legendColor) {
+    return baseColor;
+  }
+  if (legendOptions.style === _legends.LEGEND_DISPLAY_STYLE_TEXT) {
+    return legendColor;
+  }
+  return (0, _shouldUseContrastColor.shouldUseContrastColor)(legendColor) ? _ui.colors.white : baseColor;
+}

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSingleValueTitleColor = getSingleValueTitleColor;
+var _ui = require("@dhis2/ui");
+var _legends = require("../../../../../../modules/legends.js");
+var _shouldUseContrastColor = require("../../../../../util/shouldUseContrastColor.js");
+var _getSingleValueLegendColor = require("./getSingleValueLegendColor.js");
+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) === _legends.LEGEND_DISPLAY_STYLE_FILL;
+
+  // If not using legend background, always return default color
+  if (!isUsingLegendBackground) {
+    return defaultColor;
+  }
+  const legendColor = (0, _getSingleValueLegendColor.getSingleValueLegendColor)(legendOptions, legendSets, value);
+
+  // Return default color or contrasting color when using legend background and default color
+  return (0, _shouldUseContrastColor.shouldUseContrastColor)(legendColor) ? _ui.colors.white : defaultColor;
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getSingleValueCustomSVGOptions;
+var _ui = require("@dhis2/ui");
+var _getSingleValueFormattedValue = require("./getSingleValueFormattedValue.js");
+var _getSingleValueSubtext = require("./getSingleValueSubtext.js");
+var _getSingleValueTextColor = require("./getSingleValueTextColor.js");
+function getSingleValueCustomSVGOptions(_ref) {
+  let {
+    layout,
+    extraOptions,
+    metaData,
+    series
+  } = _ref;
+  const {
+    dashboard,
+    icon
+  } = extraOptions;
+  const value = series[0];
+  return {
+    value,
+    fontColor: (0, _getSingleValueTextColor.getSingleValueTextColor)(_ui.colors.grey900, value, layout.legend, extraOptions.legendSets),
+    formattedValue: (0, _getSingleValueFormattedValue.getSingleValueFormattedValue)(value, layout, metaData),
+    icon,
+    dashboard,
+    subText: (0, _getSingleValueSubtext.getSingleValueSubtext)(metaData)
+  };
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getEvents = void 0;
+var _index = _interopRequireDefault(require("./loadCustomSVG/index.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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
+          });
+        }
+      });
+      _index.default.call(this, visType);
+    }
+  }
+});
+exports.getEvents = getEvents;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = loadCustomSVG;
+var _visTypes = require("../../../../../../modules/visTypes.js");
+var _index = _interopRequireDefault(require("./singleValue/index.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function loadCustomSVG(visType) {
+  switch (visType) {
+    case _visTypes.VIS_TYPE_SINGLE_VALUE:
+      _index.default.call(this);
+      break;
+    default:
+      break;
+  }
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addIconElement = addIconElement;
+const parser = new DOMParser();
+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/cjs/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/checkIfFitsWithinContainer.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkIfFitsWithinContainer = checkIfFitsWithinContainer;
+var _constants = require("./constants.js");
+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 * _constants.ACTUAL_NUMBER_HEIGHT_FACTOR + spacing.subTextTop + subTextRect.height : valueRect.height * _constants.ACTUAL_NUMBER_HEIGHT_FACTOR;
+  const fitsHorizontally = availableSpace.width > requiredValueWidth && availableSpace.width > subTextRect.width;
+  const fitsVertically = availableSpace.height > requiredHeight;
+  return fitsHorizontally && fitsVertically;
+}

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeLayoutRect = computeLayoutRect;
+var _computeSpacingTop = require("./computeSpacingTop.js");
+var _constants = require("./constants.js");
+function computeLayoutRect(valueElement, subTextElement, iconElement, spacing) {
+  const valueRect = valueElement.getBBox();
+  const containerCenterY = this.chartHeight / 2;
+  const containerCenterX = this.chartWidth / 2;
+  const minY = _computeSpacingTop.computeSpacingTop.call(this, spacing.valueTop);
+  let width = valueRect.width;
+  let height = valueRect.height * _constants.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/cjs/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/computeSpacingTop.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeSpacingTop = computeSpacingTop;
+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/cjs/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ACTUAL_NUMBER_HEIGHT_FACTOR = void 0;
+// 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 = 2 / 3;
+exports.ACTUAL_NUMBER_HEIGHT_FACTOR = ACTUAL_NUMBER_HEIGHT_FACTOR;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAvailableSpace = getAvailableSpace;
+var _computeSpacingTop = require("./computeSpacingTop.js");
+var _styles = require("./styles.js");
+function getAvailableSpace(valueSpacingTop) {
+  return {
+    height: this.chartHeight - _computeSpacingTop.computeSpacingTop.call(this, valueSpacingTop),
+    width: this.chartWidth - _styles.MIN_SIDE_WHITESPACE * 2
+  };
+}

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = loadSingleValueSVG;
+var _addIconElement = require("./addIconElement.js");
+var _checkIfFitsWithinContainer = require("./checkIfFitsWithinContainer.js");
+var _getAvailableSpace = require("./getAvailableSpace.js");
+var _positionElements = require("./positionElements.js");
+var _styles = require("./styles.js");
+function loadSingleValueSVG() {
+  var _this$userOptions;
+  const {
+    formattedValue,
+    icon,
+    subText,
+    fontColor
+  } = this.userOptions.customSVGOptions;
+  const dynamicStyles = new _styles.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.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 = (0, _checkIfFitsWithinContainer.checkIfFitsWithinContainer)(_getAvailableSpace.getAvailableSpace.call(this, styles.spacing.valueTop), valueElement, subTextElement, icon, subText, styles.spacing);
+  }
+  _positionElements.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/cjs/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/positionElements.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.positionElements = positionElements;
+var _computeLayoutRect = require("./computeLayoutRect.js");
+var _constants = require("./constants.js");
+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.computeLayoutRect.call(this, valueElement, subTextElement, iconElement, spacing);
+  valueElement.align({
+    align: 'right',
+    verticalAlign: 'top',
+    alignByTranslate: false,
+    x: (valueElementBox.width + layoutRect.sideMarginTop) * -1,
+    y: valueElementBox.height * _constants.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 * _constants.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);
+  }
+}