@dhis2/analytics 26.8.6 → 26.9.0

package/build/es/components/PivotTable/PivotTableValueCell.js

@@ -1,3 +1,4 @@
+import i18n from '@dhis2/d2-i18n';
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { applyLegendSet } from '../../modules/pivotTable/applyLegendSet.js';
@@ -7,7 +8,7 @@ import { PivotTableCell } from './PivotTableCell.js';
 import { PivotTableEmptyCell } from './PivotTableEmptyCell.js';
 import { usePivotTableEngine } from './PivotTableEngineContext.js';
 export const PivotTableValueCell = _ref => {
-  var _cellContent$rendered;
+  var _cellContent$titleVal, _cellContent$rendered;
   let {
     row,
     column,
@@ -45,7 +46,10 @@ export const PivotTableValueCell = _ref => {
   return /*#__PURE__*/React.createElement(PivotTableCell, {
     key: column,
     classes: classes,
-    title: cellContent.renderedValue,
+    title: (_cellContent$titleVal = cellContent.titleValue) !== null && _cellContent$titleVal !== void 0 ? _cellContent$titleVal : i18n.t('Value: {{value}}', {
+      value: cellContent.renderedValue,
+      nsSeparator: '^^'
+    }),
     style: style,
     onClick: isClickable ? onClick : undefined,
     ref: cellRef,

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

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

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

@@ -267,6 +267,7 @@
     "Six-months": "Six-months",
     "Financial Years": "Financial Years",
     "Years": "Years",
+    "Value: {{value}}": "Value: {{value}}",
     "Bold text": "Bold text",
     "Italic text": "Italic text",
     "Link to a URL": "Link to a URL",
@@ -357,6 +358,7 @@
     "{{thresholdFactor}} × Modified Z-score high": "{{thresholdFactor}} × Modified Z-score high",
     "{{thresholdFactor}} × Z-score low": "{{thresholdFactor}} × Z-score low",
     "{{thresholdFactor}} × Z-score high": "{{thresholdFactor}} × Z-score high",
+    "Not applicable": "Not applicable",
     "Data": "Data",
     "Organisation unit": "Organisation unit",
     "Assigned Categories": "Assigned Categories",

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/modules/pivotTable/PivotTableEngine.js

@@ -6,11 +6,11 @@ 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';
 import { DIMENSION_ID_ORGUNIT } from '../predefinedDimensions.js';
 import { renderValue } from '../renderValue.js';
-import { VALUE_TYPE_NUMBER, VALUE_TYPE_TEXT, isBooleanValueType, isNumericValueType } from '../valueTypes.js';
+import { VALUE_TYPE_NUMBER, VALUE_TYPE_TEXT, isBooleanValueType, isCumulativeValueType, isNumericValueType } from '../valueTypes.js';
 import { AdaptiveClippingController } from './AdaptiveClippingController.js';
 import { addToTotalIfNumber } from './addToTotalIfNumber.js';
 import { parseValue } from './parseValue.js';
-import { AGGREGATE_TYPE_NA, AGGREGATE_TYPE_AVERAGE, AGGREGATE_TYPE_SUM, CELL_TYPE_VALUE, CELL_TYPE_TOTAL, CELL_TYPE_SUBTOTAL, SORT_ORDER_ASCENDING, SORT_ORDER_DESCENDING, DISPLAY_DENSITY_PADDING_COMPACT, DISPLAY_DENSITY_PADDING_COMFORTABLE, DISPLAY_DENSITY_OPTION_COMFORTABLE, DISPLAY_DENSITY_OPTION_COMPACT, DISPLAY_DENSITY_OPTION_NORMAL, DISPLAY_DENSITY_PADDING_NORMAL, FONT_SIZE_OPTION_SMALL, FONT_SIZE_SMALL, FONT_SIZE_OPTION_LARGE, FONT_SIZE_LARGE, FONT_SIZE_OPTION_NORMAL, FONT_SIZE_NORMAL, NUMBER_TYPE_COLUMN_PERCENTAGE, NUMBER_TYPE_ROW_PERCENTAGE, NUMBER_TYPE_VALUE } from './pivotTableConstants.js';
+import { AGGREGATE_TYPE_NA, AGGREGATE_TYPE_AVERAGE, AGGREGATE_TYPE_SUM, CELL_TYPE_VALUE, CELL_TYPE_TOTAL, CELL_TYPE_SUBTOTAL, SORT_ORDER_ASCENDING, SORT_ORDER_DESCENDING, DISPLAY_DENSITY_PADDING_COMPACT, DISPLAY_DENSITY_PADDING_COMFORTABLE, DISPLAY_DENSITY_OPTION_COMFORTABLE, DISPLAY_DENSITY_OPTION_COMPACT, DISPLAY_DENSITY_OPTION_NORMAL, DISPLAY_DENSITY_PADDING_NORMAL, FONT_SIZE_OPTION_SMALL, FONT_SIZE_SMALL, FONT_SIZE_OPTION_LARGE, FONT_SIZE_LARGE, FONT_SIZE_OPTION_NORMAL, FONT_SIZE_NORMAL, NUMBER_TYPE_COLUMN_PERCENTAGE, NUMBER_TYPE_ROW_PERCENTAGE, NUMBER_TYPE_VALUE, VALUE_TYPE_NA, VALUE_NA } from './pivotTableConstants.js';
 const dataFields = ['value', 'numerator', 'denominator', 'factor', 'multiplier', 'divisor'];
 const defaultOptions = {
   hideEmptyColumns: false,
@@ -153,7 +153,7 @@ const applyTotalAggregationType = (_ref2, overrideTotalAggregationType) => {
   } = _ref2;
   switch (overrideTotalAggregationType || totalAggregationType) {
     case AGGREGATE_TYPE_NA:
-      return 'N/A';
+      return VALUE_NA;
     case AGGREGATE_TYPE_AVERAGE:
       return (numerator || value) * multiplier / (denominator * divisor || 1);
     case AGGREGATE_TYPE_SUM:
@@ -258,15 +258,29 @@ export class PivotTableEngine {
       rawCell.rawValue = rawValue;
       rawCell.renderedValue = renderedValue;
     }
+    if ([CELL_TYPE_TOTAL, CELL_TYPE_SUBTOTAL].includes(rawCell.cellType) && rawCell.rawValue === AGGREGATE_TYPE_NA) {
+      rawCell.titleValue = i18n.t('Not applicable');
+    }
     if (this.options.cumulativeValues) {
+      let titleValue;
+      if (this.data[row] && this.data[row][column]) {
+        const dataRow = this.data[row][column];
+        const rawValue = cellType === CELL_TYPE_VALUE ? dataRow[this.dimensionLookup.dataHeaders.value] : dataRow.value;
+        titleValue = i18n.t('Value: {{value}}', {
+          value: renderValue(rawValue, valueType, this.visualization),
+          nsSeparator: '^^'
+        });
+      }
       const cumulativeValue = this.getCumulative({
         row,
         column
       });
       if (cumulativeValue !== undefined && cumulativeValue !== null) {
-        // force to NUMBER for accumulated values
-        rawCell.valueType = valueType === undefined || valueType === null ? VALUE_TYPE_NUMBER : valueType;
+        // force to TEXT for N/A (accumulated) values
+        // force to NUMBER for accumulated values if no valueType present
+        rawCell.valueType = cumulativeValue === VALUE_NA ? VALUE_TYPE_NA : valueType === undefined || valueType === null ? VALUE_TYPE_NUMBER : valueType;
         rawCell.empty = false;
+        rawCell.titleValue = titleValue;
         rawCell.rawValue = cumulativeValue;
         rawCell.renderedValue = renderValue(cumulativeValue, valueType, this.visualization);
       }
@@ -365,15 +379,12 @@ export class PivotTableEngine {
       return undefined;
     }
     const cellValue = this.data[row][column];
+
+    // empty cell
     if (!cellValue) {
-      // Empty cell
-      // The cell still needs to get the valueType to render correctly 0 and cumulative values
-      return {
-        valueType: VALUE_TYPE_NUMBER,
-        totalAggregationType: AGGREGATE_TYPE_SUM
-      };
+      return undefined;
     }
-    if (!Array.isArray(cellValue)) {
+    if (cellValue && !Array.isArray(cellValue)) {
       // This is a total cell
       return {
         valueType: cellValue.valueType,
@@ -536,19 +547,26 @@ export class PivotTableEngine {
       } else {
         totalCell.totalAggregationType = currentAggType;
       }
-      const currentValueType = dxDimension === null || dxDimension === void 0 ? void 0 : dxDimension.valueType;
+
+      // Force value type of total cells to NUMBER for value cells with numeric or boolean types.
+      // This is to simplify the code below where we compare the previous value type.
+      // All numeric/boolean value types use the same style for rendering the total cell (right aligned content)
+      // and using NUMBER for the total cell is enough for that.
+      // (see DHIS2-9155)
+      const currentValueType = isNumericValueType(dxDimension === null || dxDimension === void 0 ? void 0 : dxDimension.valueType) || isBooleanValueType(dxDimension === null || dxDimension === void 0 ? void 0 : dxDimension.valueType) ? VALUE_TYPE_NUMBER : dxDimension === null || dxDimension === void 0 ? void 0 : dxDimension.valueType;
       const previousValueType = totalCell.valueType;
       if (previousValueType && currentValueType !== previousValueType) {
-        totalCell.valueType = AGGREGATE_TYPE_NA;
+        totalCell.valueType = VALUE_TYPE_NA;
       } else {
         totalCell.valueType = currentValueType;
       }
 
-      // compute subtotals and totals for all numeric and boolean value types
-      // in that case, force value type of subtotal and total cells to NUMBER to format them correctly
+      // Compute totals for all numeric and boolean value types only.
+      // In practice valueType here is NUMBER (see the comment above).
+      // When is not, it means there is some value cell with a valueType other than numeric/boolean,
+      // the total should not be computed then.
       // (see DHIS2-9155)
-      if (isNumericValueType(dxDimension === null || dxDimension === void 0 ? void 0 : dxDimension.valueType) || isBooleanValueType(dxDimension === null || dxDimension === void 0 ? void 0 : dxDimension.valueType)) {
-        totalCell.valueType = VALUE_TYPE_NUMBER;
+      if (isNumericValueType(totalCell.valueType)) {
         dataFields.forEach(field => {
           const headerIndex = this.dimensionLookup.dataHeaders[field];
           const value = parseValue(dataRow[headerIndex]);
@@ -642,6 +660,17 @@ export class PivotTableEngine {
       }
     }
   }
+  computeOverrideTotalAggregationType(totalCell, visualization) {
+    // Avoid undefined on total cells with valueTypes that cannot be totalized.
+    // This happens for example when a column/row has all value cells of type TEXT.
+    if (!(isNumericValueType(totalCell.valueType) || isBooleanValueType(totalCell.valueType))) {
+      return AGGREGATE_TYPE_NA;
+    }
+
+    // DHIS2-15698: do not override total aggregation type when numberType option is not present
+    // (numberType option default is VALUE)
+    return visualization.numberType && visualization.numberType !== NUMBER_TYPE_VALUE && AGGREGATE_TYPE_SUM;
+  }
   finalizeTotal(_ref11) {
     let {
       row,
@@ -652,10 +681,12 @@ export class PivotTableEngine {
     }
     const totalCell = this.data[row][column];
     if (totalCell && totalCell.count) {
-      totalCell.value = applyTotalAggregationType(totalCell,
-      // DHIS2-15698: do not override total aggregation type when numberType option is not present
-      // (numberType option default is VALUE)
-      this.visualization.numberType && this.visualization.numberType !== NUMBER_TYPE_VALUE && AGGREGATE_TYPE_SUM);
+      totalCell.value = applyTotalAggregationType(totalCell, this.computeOverrideTotalAggregationType(totalCell, this.visualization));
+
+      // override valueType for styling cells with N/A value
+      if (totalCell.value === AGGREGATE_TYPE_NA) {
+        totalCell.valueType = VALUE_TYPE_NA;
+      }
       this.adaptiveClippingController.add({
         row,
         column
@@ -756,10 +787,14 @@ export class PivotTableEngine {
             column
           });
           const valueType = (dxDimension === null || dxDimension === void 0 ? void 0 : dxDimension.valueType) || VALUE_TYPE_TEXT;
+          const totalAggregationType = dxDimension === null || dxDimension === void 0 ? void 0 : dxDimension.totalAggregationType;
 
-          // only accumulate numeric values
-          // accumulating text values does not make sense
-          if (valueType === VALUE_TYPE_NUMBER) {
+          // only accumulate numeric (except for PERCENTAGE and UNIT_INTERVAL) and boolean values
+          // accumulating other value types like text values does not make sense
+          if (isCumulativeValueType(valueType) && totalAggregationType === AGGREGATE_TYPE_SUM) {
+            // initialise to 0 for cumulative types
+            // (||= is not transformed correctly in Babel with the current setup)
+            acc || (acc = 0);
             if (this.data[row] && this.data[row][column]) {
               const dataRow = this.data[row][column];
               const rawValue = cellType === CELL_TYPE_VALUE ? dataRow[this.dimensionLookup.dataHeaders.value] : dataRow.value;
@@ -768,7 +803,7 @@ export class PivotTableEngine {
             this.accumulators.rows[row][column] = acc;
           }
           return acc;
-        }, 0);
+        }, '');
       });
     } else {
       this.accumulators = {

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

@@ -6,6 +6,8 @@ export const CELL_TYPE_TOTAL = 'total';
 export const AGGREGATE_TYPE_SUM = 'SUM';
 export const AGGREGATE_TYPE_AVERAGE = 'AVERAGE';
 export const AGGREGATE_TYPE_NA = 'N/A';
+export const VALUE_TYPE_NA = 'N_A'; // this ends up as CSS class and / is problematic
+
 export const NUMBER_TYPE_VALUE = 'VALUE';
 export const NUMBER_TYPE_ROW_PERCENTAGE = 'ROW_PERCENTAGE';
 export const NUMBER_TYPE_COLUMN_PERCENTAGE = 'COLUMN_PERCENTAGE';
@@ -26,4 +28,5 @@ export const CLIPPED_CELL_MAX_SIZE = 360;
 export const CLIPPED_CELL_MIN_SIZE = 36;
 export const WRAPPED_TEXT_JUSTIFY_BUFFER = 25;
 export const WRAPPED_TEXT_LINE_HEIGHT = 1.0;
-export const CLIPPED_AXIS_PARTITION_SIZE_PX = 1000;
+export const CLIPPED_AXIS_PARTITION_SIZE_PX = 1000;
+export const VALUE_NA = 'N/A';

package/build/es/modules/valueTypes.js

@@ -25,5 +25,7 @@ export const VALUE_TYPE_ORGANISATION_UNIT = 'ORGANISATION_UNIT';
 export const VALUE_TYPE_AGE = 'AGE';
 const NUMERIC_VALUE_TYPES = [VALUE_TYPE_NUMBER, VALUE_TYPE_UNIT_INTERVAL, VALUE_TYPE_PERCENTAGE, VALUE_TYPE_INTEGER, VALUE_TYPE_INTEGER_POSITIVE, VALUE_TYPE_INTEGER_NEGATIVE, VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE];
 const BOOLEAN_VALUE_TYPES = [VALUE_TYPE_BOOLEAN, VALUE_TYPE_TRUE_ONLY];
+const CUMULATIVE_VALUE_TYPES = [VALUE_TYPE_NUMBER, VALUE_TYPE_INTEGER, VALUE_TYPE_INTEGER_POSITIVE, VALUE_TYPE_INTEGER_NEGATIVE, VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE, ...BOOLEAN_VALUE_TYPES];
+export const isCumulativeValueType = type => CUMULATIVE_VALUE_TYPES.includes(type);
 export const isNumericValueType = type => NUMERIC_VALUE_TYPES.includes(type);
 export const isBooleanValueType = type => BOOLEAN_VALUE_TYPES.includes(type);

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