@dhis2/analytics 28.0.4 → 28.1.0

package/build/cjs/components/TranslationDialog/TranslationModal/__tests__/TranslationModal.spec.js

@@ -1,8 +1,8 @@
 "use strict";
 
-var _ui = require("@dhis2/ui");
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _appRuntime = require("@dhis2/app-runtime");
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _TranslationModal = require("../TranslationModal.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const mockUseTranslationResults = jest.fn(() => ({
@@ -12,19 +12,26 @@ const mockUseTranslationResults = jest.fn(() => ({
 jest.mock('../useTranslationsResults.js', () => ({
   useTranslationsResults: args => mockUseTranslationResults(args)
 }));
-describe('The Translation Dialog component', () => {
-  let shallowTranslationModal;
+describe('TranslationDialog component', () => {
   let props;
   const onClose = jest.fn();
   const onTranslationSaved = jest.fn();
-  const getTranslationModalComponent = props => {
-    if (!shallowTranslationModal) {
-      shallowTranslationModal = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_TranslationModal.TranslationModal, props));
-    }
-    return shallowTranslationModal;
+  const renderTranslationModalComponent = props => {
+    return (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+      data: {
+        i18n: {
+          name: 'Name',
+          description: 'Description'
+        },
+        'locales/db': [{
+          locale: 'en',
+          name: 'English',
+          displayName: 'English'
+        }]
+      }
+    }, /*#__PURE__*/_react2.default.createElement(_TranslationModal.TranslationModal, props)));
   };
   beforeEach(() => {
-    shallowTranslationModal = undefined;
     props = {
       fieldsToTranslate: ['name', 'description'],
       objectToTranslate: {
@@ -35,15 +42,17 @@ describe('The Translation Dialog component', () => {
       onTranslationSaved
     };
   });
-  it('renders a Modal component', () => {
-    expect(getTranslationModalComponent(props).find(_ui.Modal)).toHaveLength(1);
+  test('renders a Modal component', () => {
+    renderTranslationModalComponent(props);
+    expect(_react.screen.getByTestId('dhis2-analytics-translation-modal')).toBeInTheDocument();
   });
-  it("renders a ModalTitle containing the object's name", () => {
-    expect(getTranslationModalComponent(props).find(_ui.ModalTitle).childAt(0).text()).toEqual(`Translate: ${props.objectToTranslate.name}`);
+  test("renders a ModalTitle containing the object's name", () => {
+    renderTranslationModalComponent(props);
+    expect(_react.screen.getByText(`Translate: ${props.objectToTranslate.name}`)).toBeInTheDocument();
   });
   test.each(['https://dhis2.tld/path/api/visualization/object-id', 'https://dhis2.tld/path/api/42/visualization/object-id'])('uses the correct resource for the translation endpoint', href => {
     props.objectToTranslate.href = href;
-    getTranslationModalComponent(props);
+    renderTranslationModalComponent(props);
     expect(mockUseTranslationResults).toHaveBeenCalled();
     expect(mockUseTranslationResults).toHaveBeenCalledWith({
       resource: 'visualization/object-id'

package/build/cjs/index.js

@@ -220,6 +220,7 @@ var _exportNames = {
   HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST_AFTER_LAST: true,
   HIDE_EMPTY_ROW_ITEMS_ALL: true,
   formatValue: true,
+  transformEventAggregateResponse: true,
   COLOR_SET_DEFAULT: true,
   COLOR_SET_BASIC: true,
   COLOR_SET_EXTENDED: true,
@@ -1857,6 +1858,12 @@ Object.defineProperty(exports, "preparePayloadForSaveAs", {
     return _utils.preparePayloadForSaveAs;
   }
 });
+Object.defineProperty(exports, "transformEventAggregateResponse", {
+  enumerable: true,
+  get: function () {
+    return _response.transformResponse;
+  }
+});
 Object.defineProperty(exports, "useCachedDataQuery", {
   enumerable: true,
   get: function () {
@@ -1981,6 +1988,7 @@ var _fontStyle = require("./modules/fontStyle.js");
 var _legends = require("./modules/legends.js");
 var _hideEmptyRowItems = require("./modules/hideEmptyRowItems.js");
 var _renderValue = require("./modules/renderValue.js");
+var _response = require("./modules/response/event/response.js");
 var _colorSets = require("./visualizations/util/colors/colorSets.js");
 var _index10 = require("./components/PeriodDimension/utils/index.js");
 var _relativePeriods = require("./components/PeriodDimension/utils/relativePeriods.js");

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

@@ -410,6 +410,7 @@
     "Data": "Data",
     "Organisation unit": "Organisation unit",
     "Assigned Categories": "Assigned Categories",
+    "No value": "No value",
     "Text": "Text",
     "Long text": "Long text",
     "Multi text": "Multi text",

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

@@ -80,7 +80,8 @@ class AdaptiveClippingController {
           if (isColumn) {
             var _axis$sizes$index;
             const headerSize = this.measureText(label, {
-              maxWidth: isLeafHeader ? Math.max(_pivotTableConstants.CLIPPED_CELL_MIN_SIZE, ((_axis$sizes$index = axis.sizes[index]) === null || _axis$sizes$index === void 0 ? void 0 : _axis$sizes$index.size) || 0) : 0
+              maxWidth: isLeafHeader ? Math.max(_pivotTableConstants.CLIPPED_CELL_MIN_SIZE, ((_axis$sizes$index = axis.sizes[index]) === null || _axis$sizes$index === void 0 ? void 0 : _axis$sizes$index.size) || 0) : 0,
+              ...header.style
             });
             this.addSize({
               row: -headerStack.length + level,

package/build/cjs/modules/pivotTable/getHeaderForDisplay.js

@@ -38,7 +38,10 @@ const getHeaderForDisplay = ({
   return {
     span,
     label,
-    includesHierarchy
+    includesHierarchy,
+    ...(currentHeader.style ? {
+      style: currentHeader.style
+    } : {})
   };
 };
 exports.getHeaderForDisplay = getHeaderForDisplay;

package/build/cjs/modules/pivotTable/measureText.js

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.measureTextWithWrapping = void 0;
 var _pivotTableConstants = require("./pivotTableConstants.js");
 let canvas;
-const getContext = fontSize => {
+const getContext = (fontSize = 11, fontFamily = 'Roboto, Arial, sans-serif') => {
   if (!canvas) {
     canvas = document.createElement('canvas');
   }
   const ctx = canvas.getContext('2d');
-  ctx.font = `${fontSize}px Roboto, Arial, sans-serif`;
+  ctx.font = `${fontSize}px ${fontFamily}`;
   return ctx;
 };
-const measureText = (text, fontSize = 11) => {
-  const ctx = getContext(fontSize);
+const measureText = (text, fontSize, fontFamily) => {
+  const ctx = getContext(fontSize, fontFamily);
   const textMetrics = ctx.measureText(text);
   return textMetrics.width;
 };
@@ -23,7 +23,8 @@ const measureTextWithWrapping = (text, {
   fontSize = 11,
   maxWidth = _pivotTableConstants.CLIPPED_CELL_MAX_SIZE,
   justifyBuffer = _pivotTableConstants.WRAPPED_TEXT_JUSTIFY_BUFFER,
-  lineHeight = _pivotTableConstants.WRAPPED_TEXT_LINE_HEIGHT
+  lineHeight = _pivotTableConstants.WRAPPED_TEXT_LINE_HEIGHT,
+  fontFamily
 }) => {
   if (!text) {
     return {
@@ -42,7 +43,7 @@ const measureTextWithWrapping = (text, {
     const words = paragraphs.shift().split(/\s+/);
     while (words.length) {
       const nextWord = (currentLineWidth === 0 ? '' : ' ') + words.shift();
-      const nextWordWidth = measureText(nextWord, fontSize);
+      const nextWordWidth = measureText(nextWord, fontSize, fontFamily);
       if (maxWidth && currentLineWidth + nextWordWidth > maxWidth) {
         if (currentLineWidth <= maxWidth - justifyBuffer) {
           // Wrapping this word would cause an unnaturally short line

package/build/cjs/modules/response/event/__tests__/default.spec.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _valueTypes = require("../../../valueTypes.js");
+var _default = require("../default.js");
+var _response = require("../response.js");
+const testId = 'Zj7UnCAulEk.qrur9Dvnyt5';
+describe('default', () => {
+  // applyDefaultHandler is tested by response.spec.js
+
+  describe('getUnique', () => {
+    it('removes duplicate string numbers', () => {
+      const arr = ['2', '10', '2', '01', '1', '-1', '-1', '1', '10'];
+      expect((0, _default.getUnique)(arr)).toEqual(['2', '10', '01', '1', '-1']);
+    });
+    it('treats "01" and "1" as different strings', () => {
+      const arr = ['01', '1', '01'];
+      expect((0, _default.getUnique)(arr)).toEqual(['01', '1']);
+    });
+    it('handles empty array', () => {
+      expect((0, _default.getUnique)([])).toEqual([]);
+    });
+    it('preserves order of first occurrence', () => {
+      const arr = ['2', '1', '2', '1'];
+      expect((0, _default.getUnique)(arr)).toEqual(['2', '1']);
+    });
+  });
+  describe('getValuesUniqueSortedAsc', () => {
+    it('sorts string numbers numerically', () => {
+      expect((0, _default.getValuesUniqueSortedAsc)(['1', '10', '-1', '5', '5', '3'], _valueTypes.VALUE_TYPE_NUMBER)).toEqual(['-1', '1', '3', '5', '10']);
+    });
+    it('sorts non-numeric strings as strings', () => {
+      expect((0, _default.getValuesUniqueSortedAsc)(['1995-04-18 13:54:00.0', '1991-12-03 12:02:00.0', '1992-01-05 12:51:00.0', '1991-05-21 14:46:00.0', '1998-03-01 11:21:00.0', '1991-09-02 10:21:00.0', '1992-01-04 12:02:00.0', '1991-12-02 12:01:00.0', '1990-01-25 14:51:00.0', '1991-05-22 14:47:00.0'])).toEqual(['1990-01-25 14:51:00.0', '1991-05-21 14:46:00.0', '1991-05-22 14:47:00.0', '1991-09-02 10:21:00.0', '1991-12-02 12:01:00.0', '1991-12-03 12:02:00.0', '1992-01-04 12:02:00.0', '1992-01-05 12:51:00.0', '1995-04-18 13:54:00.0', '1998-03-01 11:21:00.0']);
+    });
+  });
+  describe('getPrefixedValue', () => {
+    it('returns prefix and value separated by a colon', () => {
+      expect((0, _default.getPrefixedValue)('123', 'id')).toBe(`id${_response.PREFIX_SEPARATOR}123`);
+    });
+  });
+  describe('getItems', () => {
+    it('returns an object with prefixed keys and correct names', () => {
+      expect((0, _default.getItems)(['1', '2'], testId)).toEqual({
+        [testId + `${_response.PREFIX_SEPARATOR}1`]: {
+          name: '1'
+        },
+        [testId + `${_response.PREFIX_SEPARATOR}2`]: {
+          name: '2'
+        }
+      });
+    });
+    it('uses the formatter if one is provided', () => {
+      expect((0, _default.getItems)(['world'], 'hello', {
+        itemFormatter: str => str.toUpperCase()
+      })).toEqual({
+        [`hello${_response.PREFIX_SEPARATOR}world`]: {
+          name: 'WORLD'
+        }
+      });
+    });
+  });
+  describe('getDimensions', () => {
+    it('returns an object with dimensionId as key and correctly prefixed values', () => {
+      expect((0, _default.getDimensions)(['1', '2'], testId)).toEqual({
+        [testId]: [testId + `${_response.PREFIX_SEPARATOR}1`, testId + `${_response.PREFIX_SEPARATOR}2`]
+      });
+    });
+  });
+  describe('getRows', () => {
+    it('prefixes value at headerIndex for each row', () => {
+      const rows = [['a', '1', 'x'], ['b', '2', 'y']];
+      expect((0, _default.getRows)(rows, 1, testId)).toEqual([['a', `${testId}${_response.PREFIX_SEPARATOR}1`, 'x'], ['b', `${testId}${_response.PREFIX_SEPARATOR}2`, 'y']]);
+    });
+    it('handles empty rows array', () => {
+      expect((0, _default.getRows)([], 1, 'a')).toEqual([]);
+    });
+  });
+});

package/build/cjs/modules/response/event/__tests__/optionSet.spec.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _optionsetDataHidena = _interopRequireDefault(require("../../../../__demo__/data/event/optionset.data.hidena.json"));
+var _optionsetDataOrg = _interopRequireDefault(require("../../../../__demo__/data/event/optionset.data.org.json"));
+var _optionSet = require("../optionSet.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const testOptionCodeIdMap1 = {
+  ONE: 'optionId1',
+  TWO: 'optionId2'
+};
+const testOptionCodeIdMap2 = {
+  ONE: 'optionId3',
+  TWO: 'optionId4'
+};
+describe('optionSet', () => {
+  // applyOptionSetHandler is tested by response.spec.js
+
+  describe('getOptionCodeIdMap', () => {
+    it('should create an option code:id object', () => {
+      const testId = _optionsetDataHidena.default.headers[0].name;
+      const testOptionIds = _optionsetDataHidena.default.metaData.dimensions[testId];
+      const testOptionItems = _optionsetDataHidena.default.metaData.items;
+      expect((0, _optionSet.getOptionCodeIdMap)(testOptionIds, testOptionItems)).toEqual(testOptionCodeIdMap1);
+    });
+  });
+
+  // Test the solution for two option sets with shared option codes
+  describe('getOptionIdRows', () => {
+    it('should replace option codes with ids in the right index', () => {
+      const optionSet1Rows = (0, _optionSet.getOptionIdRows)(_optionsetDataOrg.default.rows, testOptionCodeIdMap1, 0);
+      const optionSet1And2Rows = (0, _optionSet.getOptionIdRows)(optionSet1Rows, testOptionCodeIdMap2, 1);
+      expect(optionSet1And2Rows).toEqual(_optionsetDataHidena.default.rows);
+    });
+  });
+});

package/build/cjs/modules/response/event/__tests__/response.spec.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _booleanDataHidena = _interopRequireDefault(require("../../../../__demo__/data/event/boolean.data.hidena.json"));
+var _booleanData = _interopRequireDefault(require("../../../../__demo__/data/event/boolean.data.json"));
+var _booleanDataOrg = _interopRequireDefault(require("../../../../__demo__/data/event/boolean.data.org.json"));
+var _dateDataHidena = _interopRequireDefault(require("../../../../__demo__/data/event/date.data.hidena.json"));
+var _dateData = _interopRequireDefault(require("../../../../__demo__/data/event/date.data.json"));
+var _dateDataOrg = _interopRequireDefault(require("../../../../__demo__/data/event/date.data.org.json"));
+var _datetimeDataHidena = _interopRequireDefault(require("../../../../__demo__/data/event/datetime.data.hidena.json"));
+var _datetimeData = _interopRequireDefault(require("../../../../__demo__/data/event/datetime.data.json"));
+var _datetimeDataOrg = _interopRequireDefault(require("../../../../__demo__/data/event/datetime.data.org.json"));
+var _emailDataHidena = _interopRequireDefault(require("../../../../__demo__/data/event/email.data.hidena.json"));
+var _emailData = _interopRequireDefault(require("../../../../__demo__/data/event/email.data.json"));
+var _emailDataOrg = _interopRequireDefault(require("../../../../__demo__/data/event/email.data.org.json"));
+var _integerDataHidena = _interopRequireDefault(require("../../../../__demo__/data/event/integer.data.hidena.json"));
+var _integerData = _interopRequireDefault(require("../../../../__demo__/data/event/integer.data.json"));
+var _integerDataOrg = _interopRequireDefault(require("../../../../__demo__/data/event/integer.data.org.json"));
+var _optionsetDataHidena = _interopRequireDefault(require("../../../../__demo__/data/event/optionset.data.hidena.json"));
+var _optionsetData = _interopRequireDefault(require("../../../../__demo__/data/event/optionset.data.json"));
+var _optionsetDataOrg = _interopRequireDefault(require("../../../../__demo__/data/event/optionset.data.org.json"));
+var _timeDataHidena = _interopRequireDefault(require("../../../../__demo__/data/event/time.data.hidena.json"));
+var _timeData = _interopRequireDefault(require("../../../../__demo__/data/event/time.data.json"));
+var _timeDataOrg = _interopRequireDefault(require("../../../../__demo__/data/event/time.data.org.json"));
+var _yesonlyDataHidena = _interopRequireDefault(require("../../../../__demo__/data/event/yesonly.data.hidena.json"));
+var _yesonlyData = _interopRequireDefault(require("../../../../__demo__/data/event/yesonly.data.json"));
+var _yesonlyDataOrg = _interopRequireDefault(require("../../../../__demo__/data/event/yesonly.data.org.json"));
+var _valueTypes = require("../../../valueTypes.js");
+var _response = require("../response.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe('response', () => {
+  describe('getItemFormatterByValueType', () => {
+    it('should return the correct formatter and format correctly', () => {
+      expect((0, _response.getItemFormatterByValueType)(_valueTypes.VALUE_TYPE_BOOLEAN)('1')).toBe('Yes');
+      expect((0, _response.getItemFormatterByValueType)(_valueTypes.VALUE_TYPE_BOOLEAN)('0')).toBe('No');
+      expect((0, _response.getItemFormatterByValueType)(_valueTypes.VALUE_TYPE_TRUE_ONLY)('1')).toBe('Yes');
+      expect((0, _response.getItemFormatterByValueType)(_valueTypes.VALUE_TYPE_AGE)('1985-01-01 00:00:00.0')).toBe('1985-01-01');
+      expect((0, _response.getItemFormatterByValueType)(_valueTypes.VALUE_TYPE_DATE)('2023-01-01 00:00:00.0')).toBe('2023-01-01');
+      expect((0, _response.getItemFormatterByValueType)(_valueTypes.VALUE_TYPE_DATETIME)('2023-01-01 12:00:00.0')).toBe('2023-01-01 12:00');
+      expect((0, _response.getItemFormatterByValueType)(_valueTypes.VALUE_TYPE_PERCENTAGE)('50.0')).toBe('50');
+      expect((0, _response.getItemFormatterByValueType)('NOT_A_TYPE')).toBe(undefined);
+    });
+  });
+  describe('transformResponse', () => {
+    describe('boolean', () => {
+      it('transforms response', () => {
+        expect((0, _response.transformResponse)(_booleanDataOrg.default)).toEqual(_booleanData.default);
+      });
+      it('transforms response and hides N/A data', () => {
+        expect((0, _response.transformResponse)(_booleanDataOrg.default, {
+          hideNaData: true
+        })).toEqual(_booleanDataHidena.default);
+      });
+    });
+    describe('date', () => {
+      it('transforms response', () => {
+        expect((0, _response.transformResponse)(_dateDataOrg.default)).toEqual(_dateData.default);
+      });
+      it('transforms response and hides N/A data', () => {
+        expect((0, _response.transformResponse)(_dateDataOrg.default, {
+          hideNaData: true
+        })).toEqual(_dateDataHidena.default);
+      });
+    });
+    describe('datetime', () => {
+      it('transforms response', () => {
+        expect((0, _response.transformResponse)(_datetimeDataOrg.default)).toEqual(_datetimeData.default);
+      });
+      it('transforms response and hides N/A data', () => {
+        expect((0, _response.transformResponse)(_datetimeDataOrg.default, {
+          hideNaData: true
+        })).toEqual(_datetimeDataHidena.default);
+      });
+    });
+    describe('numeric', () => {
+      it('transforms response', () => {
+        expect((0, _response.transformResponse)(_integerDataOrg.default)).toEqual(_integerData.default);
+      });
+      it('transforms response and hides N/A data', () => {
+        expect((0, _response.transformResponse)(_integerDataOrg.default, {
+          hideNaData: true
+        })).toEqual(_integerDataHidena.default);
+      });
+    });
+    describe('option set', () => {
+      it('transforms response with non-unique codes across two option sets', () => {
+        expect((0, _response.transformResponse)(_optionsetDataOrg.default)).toEqual(_optionsetData.default);
+      });
+      it('transforms response with non-unique codes across two option sets and hides N/A data', () => {
+        expect((0, _response.transformResponse)(_optionsetDataOrg.default, {
+          hideNaData: true
+        })).toEqual(_optionsetDataHidena.default);
+      });
+    });
+    describe('text', () => {
+      it('transforms response', () => {
+        expect((0, _response.transformResponse)(_emailDataOrg.default)).toEqual(_emailData.default);
+      });
+      it('transforms response and hides N/A data', () => {
+        expect((0, _response.transformResponse)(_emailDataOrg.default, {
+          hideNaData: true
+        })).toEqual(_emailDataHidena.default);
+      });
+    });
+    describe('time', () => {
+      it('transforms response', () => {
+        expect((0, _response.transformResponse)(_timeDataOrg.default)).toEqual(_timeData.default);
+      });
+      it('transforms response and hides N/A data', () => {
+        expect((0, _response.transformResponse)(_timeDataOrg.default, {
+          hideNaData: true
+        })).toEqual(_timeDataHidena.default);
+      });
+    });
+    describe('yes only', () => {
+      it('transforms response', () => {
+        expect((0, _response.transformResponse)(_yesonlyDataOrg.default)).toEqual(_yesonlyData.default);
+      });
+      it('transforms response and hides N/A data', () => {
+        expect((0, _response.transformResponse)(_yesonlyDataOrg.default, {
+          hideNaData: true
+        })).toEqual(_yesonlyDataHidena.default);
+      });
+    });
+  });
+});

package/build/cjs/modules/response/event/default.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getValuesUniqueSortedAsc = exports.getUnique = exports.getRows = exports.getPrefixedValue = exports.getItems = exports.getDimensions = exports.applyDefaultHandler = void 0;
+var _valueTypes = require("../../valueTypes.js");
+var _response = require("./response.js");
+const getUnique = array => [...new Set(array)];
+exports.getUnique = getUnique;
+const getValuesUniqueSortedAsc = (values, valueType = _valueTypes.VALUE_TYPE_TEXT) => (0, _valueTypes.isNumericValueType)(valueType) || (0, _valueTypes.isBooleanValueType)(valueType) ? getUnique(values).map(x => [Number(x), x]).sort((a, b) => a[0] - b[0]).map(arr => arr[1]) : getUnique(values).slice().sort((a, b) => a.localeCompare(b));
+exports.getValuesUniqueSortedAsc = getValuesUniqueSortedAsc;
+const getPrefixedValue = (value, prefix) => `${prefix}${_response.PREFIX_SEPARATOR}${value}`;
+exports.getPrefixedValue = getPrefixedValue;
+const getItems = (values, dimensionId, {
+  itemFormatter
+} = {}) => values.reduce((items, value) => {
+  items[getPrefixedValue(value, dimensionId)] = {
+    name: itemFormatter ? itemFormatter(value) : value
+  };
+  return items;
+}, {});
+exports.getItems = getItems;
+const getDimensions = (values, dimensionId) => ({
+  [dimensionId]: values.map(value => getPrefixedValue(value, dimensionId))
+});
+exports.getDimensions = getDimensions;
+const getRows = (rows, headerIndex, dimensionId) => {
+  let row;
+  let value;
+  return rows.map(r => {
+    value = r[headerIndex];
+    if (value !== _response.NA_VALUE) {
+      row = [...r];
+      row[headerIndex] = getPrefixedValue(row[headerIndex], dimensionId);
+      return row;
+    }
+    return r;
+  });
+};
+exports.getRows = getRows;
+const applyDefaultHandler = (response, headerIndex, {
+  itemFormatter
+} = {}) => {
+  const header = response.headers[headerIndex];
+  const uniqueSortedValuesAsc = getValuesUniqueSortedAsc(response.rows.map(row => row[headerIndex]).filter(value => value !== _response.NA_VALUE), header.valueType);
+  return {
+    ...response,
+    metaData: {
+      ...response.metaData,
+      items: {
+        ...response.metaData.items,
+        ...getItems(uniqueSortedValuesAsc, header.name, {
+          itemFormatter
+        })
+      },
+      dimensions: {
+        ...response.metaData.dimensions,
+        ...getDimensions(uniqueSortedValuesAsc, header.name)
+      }
+    },
+    rows: [...getRows(response.rows, headerIndex, header.name)]
+  };
+};
+exports.applyDefaultHandler = applyDefaultHandler;

package/build/cjs/modules/response/event/optionSet.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOptionIdRows = exports.getOptionCodeIdMap = exports.applyOptionSetHandler = void 0;
+var _response = require("./response.js");
+const getOptionCodeIdMap = (optionIds, items) => optionIds.reduce((map, optionId) => {
+  map[items[optionId].code] = optionId;
+  return map;
+}, {});
+exports.getOptionCodeIdMap = getOptionCodeIdMap;
+const getOptionIdRows = (rows, optionCodeIdMap, headerIndex) => {
+  let value;
+  let row;
+  return rows.map(r => {
+    value = r[headerIndex];
+    if (value !== _response.NA_VALUE) {
+      row = [...r];
+      row[headerIndex] = optionCodeIdMap[value];
+      return row;
+    }
+    return r;
+  });
+};
+exports.getOptionIdRows = getOptionIdRows;
+const applyOptionSetHandler = (response, headerIndex) => {
+  const header = response.headers[headerIndex];
+  const optionIds = response.metaData.dimensions[header.name];
+  const optionCodeIdMap = getOptionCodeIdMap(optionIds, response.metaData.items);
+  return {
+    ...response,
+    rows: getOptionIdRows(response.rows, optionCodeIdMap, headerIndex)
+  };
+};
+exports.applyOptionSetHandler = applyOptionSetHandler;

package/build/cjs/modules/response/event/response.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformResponse = exports.getItemFormatterByValueType = exports.UNSUPPORTED_VALUE_TYPES = exports.PREFIX_SEPARATOR = exports.NA_VALUE_ITEM = exports.NA_VALUE = void 0;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _predefinedDimensions = require("../../predefinedDimensions.js");
+var _valueTypes = require("../../valueTypes.js");
+var _default = require("./default.js");
+var _optionSet = require("./optionSet.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PREFIX_SEPARATOR = exports.PREFIX_SEPARATOR = '_';
+const NA_VALUE = exports.NA_VALUE = '';
+const NA_VALUE_ITEM = exports.NA_VALUE_ITEM = {
+  name: _d2I18n.default.t('No value'),
+  style: {
+    fontStyle: 'italic',
+    color: '#6C7787',
+    fontFamily: 'monospace',
+    letterSpacing: '-0.3px'
+  }
+};
+const UNSUPPORTED_VALUE_TYPES = exports.UNSUPPORTED_VALUE_TYPES = [_valueTypes.VALUE_TYPE_COORDINATE, _valueTypes.VALUE_TYPE_GEOJSON, _valueTypes.VALUE_TYPE_FILE_RESOURCE, _valueTypes.VALUE_TYPE_IMAGE, _valueTypes.VALUE_TYPE_MULTI_TEXT, _valueTypes.VALUE_TYPE_REFERENCE];
+const getItemFormatterByValueType = valueType => {
+  switch (valueType) {
+    case _valueTypes.VALUE_TYPE_AGE:
+    case _valueTypes.VALUE_TYPE_DATE:
+      return name => name.replace(/ 00:00:00\.0$/, '');
+    case _valueTypes.VALUE_TYPE_BOOLEAN:
+    case _valueTypes.VALUE_TYPE_TRUE_ONLY:
+      return name => name === '1' ? _d2I18n.default.t('Yes') : _d2I18n.default.t('No');
+    case _valueTypes.VALUE_TYPE_DATETIME:
+      return name => name.replace(/:00\.0$/, '');
+    case _valueTypes.VALUE_TYPE_PERCENTAGE:
+      return name => name.endsWith('.0') ? name.slice(0, -2) : name;
+    default:
+      return undefined;
+  }
+};
+exports.getItemFormatterByValueType = getItemFormatterByValueType;
+const transformResponse = (response, {
+  hideNaData = false
+} = {}) => {
+  // Do not modify the original response
+  // Rows is mapped by the handlers
+  let transformedResponse = {
+    ...response,
+    metaData: {
+      ...response.metaData,
+      items: {
+        ...response.metaData.items
+      },
+      dimensions: {
+        ...response.metaData.dimensions
+      }
+    }
+  };
+
+  // Add index to all headers
+  // Include only headers that are "meta" and skip "pe" and "ou"
+  const metaHeaders = response.headers.map((header, index) => ({
+    ...header,
+    index
+  })).filter(header => Boolean(header.meta) && ![_predefinedDimensions.DIMENSION_ID_PERIOD, _predefinedDimensions.DIMENSION_ID_ORGUNIT].includes(header.name));
+
+  // Legendsets use uids and do not need transformation
+  // Skip unsupported value types
+  // Option set and Boolean have separate handlers
+  // All other types use default handler with specific item formatter
+  metaHeaders.forEach(header => {
+    if (!(header.legendSet || UNSUPPORTED_VALUE_TYPES.includes(header.valueType))) {
+      if (header.optionSet) {
+        transformedResponse = (0, _optionSet.applyOptionSetHandler)(transformedResponse, header.index);
+      } else {
+        transformedResponse = (0, _default.applyDefaultHandler)(transformedResponse, header.index, {
+          itemFormatter: getItemFormatterByValueType(header.valueType)
+        });
+      }
+    }
+  });
+
+  // Add "No value" dimension item if "Hide NA data" option is disabled
+  // Only add if there is at least one empty value
+  if (!hideNaData) {
+    metaHeaders.forEach(header => {
+      if (response.rows.map(row => row[header.index]).includes(NA_VALUE)) {
+        transformedResponse.metaData.dimensions[header.name] = [...transformedResponse.metaData.dimensions[header.name], NA_VALUE];
+        transformedResponse.metaData.items[NA_VALUE] = NA_VALUE_ITEM;
+      }
+    });
+  }
+  return transformedResponse;
+};
+exports.transformResponse = transformResponse;

package/build/es/__demo__/OpenFileDialog.stories.js

@@ -40,6 +40,23 @@ export const ListOfVisualizationsWithVisTypeFilterAndDividerNoDefaultVisType = (
 ListOfVisualizationsWithVisTypeFilterAndDividerNoDefaultVisType.story = {
   name: 'List of visualizations with vis type filter and divider (no default vis type)'
 };
+const filterVisTypesWithGroups = [{
+  type: VIS_TYPE_GROUP_ALL
+}, {
+  type: VIS_TYPE_GROUP_CHARTS
+}];
+export const ListOfVisualizationsWithVisTypeGroupFilterNoDefaultVisType = () => /*#__PURE__*/React.createElement(OpenFileDialog, {
+  type: "visualization",
+  filterVisTypes: filterVisTypesWithGroups,
+  onClose: Function.prototype,
+  onFileSelect: onFileSelect,
+  onNew: Function.prototype,
+  open: true,
+  currentUser: user
+});
+ListOfVisualizationsWithVisTypeGroupFilterNoDefaultVisType.story = {
+  name: 'List of visualizations with only vis type group filter (no default vis type)'
+};
 export const ListOfMapsNoVisTypeFilter = () => /*#__PURE__*/React.createElement(OpenFileDialog, {
   type: "map",
   onClose: Function.prototype,