@dhis2/analytics 26.9.5 → 26.10.0

package/build/cjs/modules/valueTypes.js

@@ -3,32 +3,71 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isNumericValueType = exports.isCumulativeValueType = exports.isBooleanValueType = exports.VALUE_TYPE_USERNAME = exports.VALUE_TYPE_URL = exports.VALUE_TYPE_UNIT_INTERVAL = exports.VALUE_TYPE_TRUE_ONLY = exports.VALUE_TYPE_TIME = exports.VALUE_TYPE_TEXT = exports.VALUE_TYPE_PHONE_NUMBER = exports.VALUE_TYPE_PERCENTAGE = exports.VALUE_TYPE_ORGANISATION_UNIT = exports.VALUE_TYPE_NUMBER = exports.VALUE_TYPE_LONG_TEXT = exports.VALUE_TYPE_LETTER = exports.VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE = exports.VALUE_TYPE_INTEGER_POSITIVE = exports.VALUE_TYPE_INTEGER_NEGATIVE = exports.VALUE_TYPE_INTEGER = exports.VALUE_TYPE_EMAIL = exports.VALUE_TYPE_DATETIME = exports.VALUE_TYPE_DATE = exports.VALUE_TYPE_BOOLEAN = exports.VALUE_TYPE_AGE = void 0;
+exports.valueTypeDisplayNames = exports.isNumericValueType = exports.isCumulativeValueType = exports.isBooleanValueType = exports.VALUE_TYPE_USERNAME = exports.VALUE_TYPE_URL = exports.VALUE_TYPE_UNIT_INTERVAL = exports.VALUE_TYPE_TRUE_ONLY = exports.VALUE_TYPE_TRACKER_ASSOCIATE = exports.VALUE_TYPE_TIME = exports.VALUE_TYPE_TEXT = exports.VALUE_TYPE_REFERENCE = exports.VALUE_TYPE_PHONE_NUMBER = exports.VALUE_TYPE_PERCENTAGE = exports.VALUE_TYPE_ORGANISATION_UNIT = exports.VALUE_TYPE_NUMBER = exports.VALUE_TYPE_MULTI_TEXT = exports.VALUE_TYPE_LONG_TEXT = exports.VALUE_TYPE_LETTER = exports.VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE = exports.VALUE_TYPE_INTEGER_POSITIVE = exports.VALUE_TYPE_INTEGER_NEGATIVE = exports.VALUE_TYPE_INTEGER = exports.VALUE_TYPE_IMAGE = exports.VALUE_TYPE_GEOJSON = exports.VALUE_TYPE_FILE_RESOURCE = exports.VALUE_TYPE_EMAIL = exports.VALUE_TYPE_DATETIME = exports.VALUE_TYPE_DATE = exports.VALUE_TYPE_COORDINATE = exports.VALUE_TYPE_BOOLEAN = exports.VALUE_TYPE_AGE = void 0;
+var _index = _interopRequireDefault(require("../locales/index.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* These types match the types in the backend
   https://github.com/dhis2/dhis2-core/blob/master/dhis-2/dhis-api/src/main/java/org/hisp/dhis/common/ValueType.java
 */
 
-const VALUE_TYPE_NUMBER = exports.VALUE_TYPE_NUMBER = 'NUMBER';
-const VALUE_TYPE_UNIT_INTERVAL = exports.VALUE_TYPE_UNIT_INTERVAL = 'UNIT_INTERVAL';
-const VALUE_TYPE_PERCENTAGE = exports.VALUE_TYPE_PERCENTAGE = 'PERCENTAGE';
-const VALUE_TYPE_INTEGER = exports.VALUE_TYPE_INTEGER = 'INTEGER';
-const VALUE_TYPE_INTEGER_POSITIVE = exports.VALUE_TYPE_INTEGER_POSITIVE = 'INTEGER_POSITIVE';
-const VALUE_TYPE_INTEGER_NEGATIVE = exports.VALUE_TYPE_INTEGER_NEGATIVE = 'INTEGER_NEGATIVE';
-const VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE = exports.VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE = 'INTEGER_ZERO_OR_POSITIVE';
 const VALUE_TYPE_TEXT = exports.VALUE_TYPE_TEXT = 'TEXT';
 const VALUE_TYPE_LONG_TEXT = exports.VALUE_TYPE_LONG_TEXT = 'LONG_TEXT';
+const VALUE_TYPE_MULTI_TEXT = exports.VALUE_TYPE_MULTI_TEXT = 'MULTI_TEXT';
 const VALUE_TYPE_LETTER = exports.VALUE_TYPE_LETTER = 'LETTER';
 const VALUE_TYPE_PHONE_NUMBER = exports.VALUE_TYPE_PHONE_NUMBER = 'PHONE_NUMBER';
 const VALUE_TYPE_EMAIL = exports.VALUE_TYPE_EMAIL = 'EMAIL';
-const VALUE_TYPE_USERNAME = exports.VALUE_TYPE_USERNAME = 'USERNAME';
-const VALUE_TYPE_URL = exports.VALUE_TYPE_URL = 'URL';
 const VALUE_TYPE_BOOLEAN = exports.VALUE_TYPE_BOOLEAN = 'BOOLEAN';
 const VALUE_TYPE_TRUE_ONLY = exports.VALUE_TYPE_TRUE_ONLY = 'TRUE_ONLY';
 const VALUE_TYPE_DATE = exports.VALUE_TYPE_DATE = 'DATE';
-const VALUE_TYPE_TIME = exports.VALUE_TYPE_TIME = 'TIME';
 const VALUE_TYPE_DATETIME = exports.VALUE_TYPE_DATETIME = 'DATETIME';
+const VALUE_TYPE_TIME = exports.VALUE_TYPE_TIME = 'TIME';
+const VALUE_TYPE_NUMBER = exports.VALUE_TYPE_NUMBER = 'NUMBER';
+const VALUE_TYPE_UNIT_INTERVAL = exports.VALUE_TYPE_UNIT_INTERVAL = 'UNIT_INTERVAL';
+const VALUE_TYPE_PERCENTAGE = exports.VALUE_TYPE_PERCENTAGE = 'PERCENTAGE';
+const VALUE_TYPE_INTEGER = exports.VALUE_TYPE_INTEGER = 'INTEGER';
+const VALUE_TYPE_INTEGER_POSITIVE = exports.VALUE_TYPE_INTEGER_POSITIVE = 'INTEGER_POSITIVE';
+const VALUE_TYPE_INTEGER_NEGATIVE = exports.VALUE_TYPE_INTEGER_NEGATIVE = 'INTEGER_NEGATIVE';
+const VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE = exports.VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE = 'INTEGER_ZERO_OR_POSITIVE';
+const VALUE_TYPE_TRACKER_ASSOCIATE = exports.VALUE_TYPE_TRACKER_ASSOCIATE = 'TRACKER_ASSOCIATE';
+const VALUE_TYPE_USERNAME = exports.VALUE_TYPE_USERNAME = 'USERNAME';
+const VALUE_TYPE_COORDINATE = exports.VALUE_TYPE_COORDINATE = 'COORDINATE';
 const VALUE_TYPE_ORGANISATION_UNIT = exports.VALUE_TYPE_ORGANISATION_UNIT = 'ORGANISATION_UNIT';
+const VALUE_TYPE_REFERENCE = exports.VALUE_TYPE_REFERENCE = 'REFERENCE';
 const VALUE_TYPE_AGE = exports.VALUE_TYPE_AGE = 'AGE';
+const VALUE_TYPE_URL = exports.VALUE_TYPE_URL = 'URL';
+const VALUE_TYPE_FILE_RESOURCE = exports.VALUE_TYPE_FILE_RESOURCE = 'FILE_RESOURCE';
+const VALUE_TYPE_IMAGE = exports.VALUE_TYPE_IMAGE = 'IMAGE';
+const VALUE_TYPE_GEOJSON = exports.VALUE_TYPE_GEOJSON = 'GEOJSON';
+const valueTypeDisplayNames = exports.valueTypeDisplayNames = {
+  [VALUE_TYPE_TEXT]: _index.default.t('Text'),
+  [VALUE_TYPE_LONG_TEXT]: _index.default.t('Long text'),
+  [VALUE_TYPE_MULTI_TEXT]: _index.default.t('Multi text'),
+  [VALUE_TYPE_LETTER]: _index.default.t('Letter'),
+  [VALUE_TYPE_PHONE_NUMBER]: _index.default.t('Phone number'),
+  [VALUE_TYPE_EMAIL]: _index.default.t('Email'),
+  [VALUE_TYPE_BOOLEAN]: _index.default.t('Yes/No'),
+  [VALUE_TYPE_TRUE_ONLY]: _index.default.t('Yes Only'),
+  [VALUE_TYPE_DATE]: _index.default.t('Date'),
+  [VALUE_TYPE_DATETIME]: _index.default.t('Date & Time'),
+  [VALUE_TYPE_TIME]: _index.default.t('Time'),
+  [VALUE_TYPE_NUMBER]: _index.default.t('Number'),
+  [VALUE_TYPE_UNIT_INTERVAL]: _index.default.t('Unit interval'),
+  [VALUE_TYPE_PERCENTAGE]: _index.default.t('Percentage'),
+  [VALUE_TYPE_INTEGER]: _index.default.t('Integer'),
+  [VALUE_TYPE_INTEGER_POSITIVE]: _index.default.t('Positive Integer'),
+  [VALUE_TYPE_INTEGER_NEGATIVE]: _index.default.t('Negative Integer'),
+  [VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE]: _index.default.t('Positive or Zero Integer'),
+  [VALUE_TYPE_TRACKER_ASSOCIATE]: _index.default.t('Tracker Associate'),
+  [VALUE_TYPE_USERNAME]: _index.default.t('Username'),
+  [VALUE_TYPE_COORDINATE]: _index.default.t('Coordinate'),
+  [VALUE_TYPE_ORGANISATION_UNIT]: _index.default.t('Organisation unit'),
+  [VALUE_TYPE_REFERENCE]: _index.default.t('Reference'),
+  [VALUE_TYPE_AGE]: _index.default.t('Age'),
+  [VALUE_TYPE_URL]: _index.default.t('URL'),
+  [VALUE_TYPE_FILE_RESOURCE]: _index.default.t('File'),
+  [VALUE_TYPE_IMAGE]: _index.default.t('Image'),
+  [VALUE_TYPE_GEOJSON]: _index.default.t('GeoJSON')
+};
 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];

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

@@ -0,0 +1,42 @@
+import { DataProvider } from '@dhis2/app-runtime';
+import { ConfigProvider } from '@dhis2/app-service-config';
+import React, { useState } from 'react';
+import DataDimension from '../components/DataDimension/DataDimension.js';
+const Wrapper = story => /*#__PURE__*/React.createElement(ConfigProvider, {
+  config: {
+    serverVersion: {
+      major: 2,
+      minor: 41
+    }
+  }
+}, /*#__PURE__*/React.createElement(DataProvider, {
+  baseUrl: "https://test.e2e.dhis2.org/analytics-41dev",
+  apiVersion: "41"
+}, story()));
+export default {
+  title: 'DataDimension',
+  decorators: [Wrapper]
+};
+export const NoneSelected = () => {
+  const [selected, setSelected] = useState([]);
+  return /*#__PURE__*/React.createElement(DataDimension, {
+    displayNameProp: "displayName",
+    selectedDimensions: selected,
+    onSelect: response => setSelected(response.items)
+  });
+};
+NoneSelected.story = {
+  name: 'None selected'
+};
+export const WithInfoBoxMessage = () => {
+  const [selected, setSelected] = useState([]);
+  return /*#__PURE__*/React.createElement(DataDimension, {
+    displayNameProp: "displayName",
+    selectedDimensions: selected,
+    onSelect: response => setSelected(response.items),
+    infoBoxMessage: 'Test message showing in the info box'
+  });
+};
+WithInfoBoxMessage.story = {
+  name: 'With info box message'
+};

package/build/es/api/dimensions.js

@@ -182,7 +182,7 @@ export const dataElementOperandsQuery = {
       page
     } = _ref10;
     const idField = (filter === null || filter === void 0 ? void 0 : filter.group) === DIMENSION_TYPE_ALL ? 'id' : 'dimensionItem~rename(id)';
-    const filters = [];
+    const filters = ['categoryOptionCombo.name:ne:default'];
     if (filter !== null && filter !== void 0 && filter.group && filter.group !== DIMENSION_TYPE_ALL) {
       filters.push(`dataElement.dataElementGroups.id:eq:${filter.group}`);
     }

package/build/es/api/expression.js

@@ -1,4 +1,4 @@
-export const validateExpressionMutation = {
+export const validateIndicatorExpressionMutation = {
   type: 'create',
   resource: 'indicators/expression/description',
   data: _ref => {
@@ -8,14 +8,24 @@ export const validateExpressionMutation = {
     return expression;
   }
 };
+export const validateProgramIndicatorExpressionMutation = {
+  type: 'create',
+  resource: 'programIndicators/expression/description',
+  data: _ref2 => {
+    let {
+      expression
+    } = _ref2;
+    return expression;
+  }
+};
 export const createCalculationMutation = {
   type: 'create',
   resource: 'expressionDimensionItems',
-  data: _ref2 => {
+  data: _ref3 => {
     let {
       name,
       expression
-    } = _ref2;
+    } = _ref3;
     return {
       name,
       shortName: name,
@@ -26,17 +36,17 @@ export const createCalculationMutation = {
 export const updateCalculationMutation = {
   type: 'json-patch',
   resource: 'expressionDimensionItems',
-  id: _ref3 => {
+  id: _ref4 => {
     let {
       id
-    } = _ref3;
+    } = _ref4;
     return id;
   },
-  data: _ref4 => {
+  data: _ref5 => {
     let {
       name,
       expression
-    } = _ref4;
+    } = _ref5;
     return [{
       op: 'add',
       path: '/name',
@@ -55,10 +65,10 @@ export const updateCalculationMutation = {
 export const deleteCalculationMutation = {
   type: 'delete',
   resource: 'expressionDimensionItems',
-  id: _ref5 => {
+  id: _ref6 => {
     let {
       id
-    } = _ref5;
+    } = _ref6;
     return id;
   }
 };

package/build/es/components/DataDimension/Calculation/CalculationModal.js

@@ -4,7 +4,7 @@ import { Button, Modal, ModalTitle, ModalContent, ModalActions, ButtonStrip, Inp
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
-import { createCalculationMutation, deleteCalculationMutation, updateCalculationMutation, validateExpressionMutation } from '../../../api/expression.js';
+import { createCalculationMutation, deleteCalculationMutation, updateCalculationMutation, validateIndicatorExpressionMutation } from '../../../api/expression.js';
 import i18n from '../../../locales/index.js';
 import { parseExpressionToArray, parseArrayToExpression, validateExpression, EXPRESSION_TYPE_DATA, EXPRESSION_TYPE_NUMBER, INVALID_EXPRESSION, VALID_EXPRESSION, getItemIdsFromExpression } from '../../../modules/expressions.js';
 import { OfflineTooltip as Tooltip } from '../../OfflineTooltip.js';
@@ -42,7 +42,7 @@ const CalculationModal = _ref => {
   }] = useDataMutation(deleteCalculationMutation, mutationParams);
   const [doBackendValidation, {
     loading: isValidating
-  }] = useDataMutation(validateExpressionMutation, {
+  }] = useDataMutation(validateIndicatorExpressionMutation, {
     onError: error => showError(error)
   });
   const query = {

package/build/es/components/DataDimension/DataDimension.js

@@ -7,6 +7,7 @@ import ItemSelector from './ItemSelector.js';
 const DataDimensionCtx = /*#__PURE__*/createContext({});
 const DataDimension = _ref => {
   let {
+    currentUser,
     onSelect,
     selectedDimensions,
     displayNameProp,
@@ -40,7 +41,8 @@ const DataDimension = _ref => {
   useEffect(() => enabledDataTypes && setDataTypes(filterDataTypesByVersion(enabledDataTypes)), [enabledDataTypes, filterDataTypesByVersion]);
   return /*#__PURE__*/React.createElement(DataDimensionCtx.Provider, {
     value: {
-      visType
+      visType,
+      currentUser
     }
   }, /*#__PURE__*/React.createElement(ItemSelector, {
     selectedItems: selectedDimensions.map(item => ({
@@ -69,6 +71,7 @@ DataDimension.propTypes = {
     type: PropTypes.string
   })).isRequired,
   onSelect: PropTypes.func.isRequired,
+  currentUser: PropTypes.object,
   enabledDataTypes: PropTypes.array,
   infoBoxMessage: PropTypes.string,
   visType: PropTypes.string,

package/build/es/components/DataDimension/Info/CalculationInfo.js

@@ -0,0 +1,96 @@
+import _JSXStyle from "styled-jsx/style";
+import { useConfig, useDataMutation, useDataEngine } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect, useState } from 'react';
+import { validateIndicatorExpressionMutation } from '../../../api/expression.js';
+import i18n from '../../../locales/index.js';
+import { getCommonFields, renderHumanReadableExpression, InfoTable } from './InfoTable.js';
+import styles from './styles/InfoPopover.style.js';
+const calculationQuery = {
+  calculation: {
+    resource: 'expressionDimensionItems',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${getCommonFields(displayNameProp)},expression`
+      };
+    }
+  }
+};
+export const CalculationInfo = _ref3 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref3;
+  const [data, setData] = useState();
+  const [error, setError] = useState();
+  const [expressionError, setExpressionError] = useState();
+  const [loading, setLoading] = useState(true);
+  const {
+    baseUrl,
+    apiVersion
+  } = useConfig();
+  const engine = useDataEngine();
+  const [getHumanReadableExpression] = useDataMutation(validateIndicatorExpressionMutation, {
+    onError: setExpressionError
+  });
+  const fetchData = useCallback(async () => {
+    const {
+      calculation
+    } = await engine.query(calculationQuery, {
+      variables: {
+        id,
+        displayNameProp
+      },
+      onError: setError
+    });
+    if (calculation.expression) {
+      const result = await getHumanReadableExpression({
+        expression: calculation.expression
+      });
+      if (result) {
+        calculation.humanReadableExpression = result;
+      }
+    }
+
+    // inject href as it is not returned from the API
+    calculation.href = new URL(`${calculationQuery.calculation.resource}/${id}`, new URL(`api/${apiVersion}/`, baseUrl === '..' ? window.location.href.split('dhis-web-data-visualizer/')[0] : `${baseUrl}/`)).href;
+    setData({
+      calculation
+    });
+    setLoading(false);
+  }, [displayNameProp, engine, getHumanReadableExpression, id, apiVersion, baseUrl]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfoTable, {
+    dataType: type,
+    data: data === null || data === void 0 ? void 0 : data.calculation,
+    loading: loading,
+    error: error
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Expression description')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.calculation.humanReadableExpression ? renderHumanReadableExpression(data.calculation.humanReadableExpression) : /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, expressionError ? i18n.t('Error loading value') : i18n.t('None'))))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+CalculationInfo.propTypes = {
+  displayNameProp: PropTypes.string,
+  id: PropTypes.string,
+  type: PropTypes.string
+};

package/build/es/components/DataDimension/Info/DataElementInfo.js

@@ -0,0 +1,127 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataQuery } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../../../locales/index.js';
+import { valueTypeDisplayNames } from '../../../modules/valueTypes.js';
+import { getCommonFields, renderDataSets, renderLegendSets, renderGroupMemberships, InfoTable } from './InfoTable.js';
+import styles from './styles/InfoPopover.style.js';
+const dataElementQuery = {
+  dataElement: {
+    resource: 'dataElements',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${getCommonFields(displayNameProp)},aggregationType,categoryCombo[displayName,categories[id,displayName]],dataElementGroups[id,displayName],dataSetElements[dataSet[id,displayName]],legendSets[id,displayName],optionSet[displayName],valueType,zeroIsSignificant`
+      };
+    }
+  }
+};
+export const DataElementInfo = _ref3 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref3;
+  const {
+    loading,
+    error,
+    data
+  } = useDataQuery(dataElementQuery, {
+    variables: {
+      id,
+      displayNameProp
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfoTable, {
+    dataType: type,
+    data: data === null || data === void 0 ? void 0 : data.dataElement,
+    loading: loading,
+    error: error
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Data set(s)')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataElement.dataSetElements) && renderDataSets(data.dataElement.dataSetElements.map(_ref4 => {
+    let {
+      dataSet
+    } = _ref4;
+    return dataSet;
+  })))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Zero is significant')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.dataElement.zeroIsSignificant ? i18n.t('True') : i18n.t('False'))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Value type')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, valueTypeDisplayNames[data === null || data === void 0 ? void 0 : data.dataElement.valueType])), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Aggregation type')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElement.aggregationType)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Category combo')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataElement.categoryCombo.displayName) === 'default' ? /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')) : /*#__PURE__*/React.createElement("details", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("summary", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElement.categoryCombo.displayName), /*#__PURE__*/React.createElement("ul", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElement.categoryCombo.categories.map(_ref5 => {
+    let {
+      id,
+      displayName
+    } = _ref5;
+    return /*#__PURE__*/React.createElement("li", {
+      key: id,
+      className: `jsx-${styles.__hash}`
+    }, displayName);
+  }))))), (data === null || data === void 0 ? void 0 : data.dataElement.optionSet) && /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Option set')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.dataElement.optionSet.displayName)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Group membership')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataElement.dataElementGroups) && renderGroupMemberships(data.dataElement.dataElementGroups))), Boolean(data === null || data === void 0 ? void 0 : data.dataElement.legendSets.length) && /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Legend set(s)')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, renderLegendSets(data.dataElement.legendSets)))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+DataElementInfo.propTypes = {
+  displayNameProp: PropTypes.string,
+  id: PropTypes.string,
+  type: PropTypes.string
+};

package/build/es/components/DataDimension/Info/DataElementOperandInfo.js

@@ -0,0 +1,178 @@
+import _JSXStyle from "styled-jsx/style";
+import { useConfig, useDataEngine } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect, useState } from 'react';
+import i18n from '../../../locales/index.js';
+import { valueTypeDisplayNames } from '../../../modules/valueTypes.js';
+import { getCommonFields, renderDataSets, renderGroupMemberships, renderLegendSets, InfoTable } from './InfoTable.js';
+import styles from './styles/InfoPopover.style.js';
+const dataElementOperandsQuery = {
+  dataElementOperands: {
+    resource: 'dataElementOperands',
+    params: _ref => {
+      let {
+        displayNameProp,
+        id
+      } = _ref;
+      return {
+        filter: `id:eq:${id}`,
+        fields: [`${getCommonFields(displayNameProp)}`, 'categoryOptionCombo[categoryCombo[categories[displayName,id],displayName],displayName]', `dataElement[${getCommonFields(displayNameProp)},aggregationType,categoryCombo[displayName,categories[id,displayName]],dataElementGroups[id,displayName],dataSetElements[dataSet[id,displayName]],legendSets[id,displayName],optionSet[displayName],valueType,zeroIsSignificant]`, 'displayName,id']
+      };
+    }
+  }
+};
+export const DataElementOperandInfo = _ref2 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref2;
+  const [data, setData] = useState();
+  const [error, setError] = useState();
+  const [loading, setLoading] = useState(true);
+  const {
+    baseUrl,
+    apiVersion
+  } = useConfig();
+  const engine = useDataEngine();
+  const fetchData = useCallback(async () => {
+    const {
+      dataElementOperands
+    } = await engine.query(dataElementOperandsQuery, {
+      variables: {
+        id,
+        displayNameProp
+      },
+      onError: setError
+    });
+    const dataElementOperand = dataElementOperands.dataElementOperands[0]
+
+    // copy some common fields from dataElement
+    ;
+    ['code', 'created', 'createdBy', 'displayDescription', 'lastUpdated'].forEach(key => dataElementOperand[key] = dataElementOperand.dataElement[key]);
+
+    // inject href as it is not returned from the API
+    dataElementOperand.href = new URL(`${dataElementOperandsQuery.dataElementOperands.resource}?${new URLSearchParams({
+      filter: `id:eq:${id}`
+    })}`, new URL(`api/${apiVersion}/`, baseUrl === '..' ? window.location.href.split('dhis-web-data-visualizer/')[0] : `${baseUrl}/`)).href;
+    setData({
+      dataElementOperand
+    });
+    setLoading(false);
+  }, [displayNameProp, engine, id]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfoTable, {
+    dataType: type,
+    data: data === null || data === void 0 ? void 0 : data.dataElementOperand,
+    loading: loading,
+    error: error
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Data set(s)')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.dataSetElements) && renderDataSets(data.dataElementOperand.dataElement.dataSetElements.map(_ref3 => {
+    let {
+      dataSet
+    } = _ref3;
+    return dataSet;
+  })))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Zero is significant')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.dataElementOperand.dataElement.zeroIsSignificant ? i18n.t('True') : i18n.t('False'))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Value type')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, valueTypeDisplayNames[data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.valueType])), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Aggregation type')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.aggregationType)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Category combo')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.categoryCombo.displayName) === 'default' ? /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')) : /*#__PURE__*/React.createElement("details", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("summary", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.categoryCombo.displayName), /*#__PURE__*/React.createElement("ul", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.categoryCombo.categories.map(_ref4 => {
+    let {
+      id,
+      displayName
+    } = _ref4;
+    return /*#__PURE__*/React.createElement("li", {
+      key: id,
+      className: `jsx-${styles.__hash}`
+    }, displayName);
+  }))))), (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.optionSet) && /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Option set')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.dataElementOperand.dataElement.optionSet.displayName)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Group membership')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.dataElementGroups) && renderGroupMemberships(data.dataElementOperand.dataElement.dataElementGroups))), Boolean(data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.legendSets.length) && /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Legend set(s)')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, renderLegendSets(data.dataElementOperand.dataElement.legendSets))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Category option name')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.categoryOptionCombo.displayName)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Category combo name')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.categoryOptionCombo.categoryCombo.displayName)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Categories name')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.categoryOptionCombo.categoryCombo.categories.map(_ref5 => {
+    let {
+      id,
+      displayName
+    } = _ref5;
+    return /*#__PURE__*/React.createElement("li", {
+      key: id,
+      className: `jsx-${styles.__hash}`
+    }, displayName);
+  }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+DataElementOperandInfo.propTypes = {
+  displayNameProp: PropTypes.string,
+  id: PropTypes.string,
+  type: PropTypes.string
+};