@dhis2/analytics 26.9.5 → 26.10.0

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithInfoBoxMessage = exports.NoneSelected = void 0;
+var _appRuntime = require("@dhis2/app-runtime");
+var _appServiceConfig = require("@dhis2/app-service-config");
+var _react = _interopRequireWildcard(require("react"));
+var _DataDimension = _interopRequireDefault(require("../components/DataDimension/DataDimension.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Wrapper = story => /*#__PURE__*/_react.default.createElement(_appServiceConfig.ConfigProvider, {
+  config: {
+    serverVersion: {
+      major: 2,
+      minor: 41
+    }
+  }
+}, /*#__PURE__*/_react.default.createElement(_appRuntime.DataProvider, {
+  baseUrl: "https://test.e2e.dhis2.org/analytics-41dev",
+  apiVersion: "41"
+}, story()));
+var _default = exports.default = {
+  title: 'DataDimension',
+  decorators: [Wrapper]
+};
+const NoneSelected = () => {
+  const [selected, setSelected] = (0, _react.useState)([]);
+  return /*#__PURE__*/_react.default.createElement(_DataDimension.default, {
+    displayNameProp: "displayName",
+    selectedDimensions: selected,
+    onSelect: response => setSelected(response.items)
+  });
+};
+exports.NoneSelected = NoneSelected;
+NoneSelected.story = {
+  name: 'None selected'
+};
+const WithInfoBoxMessage = () => {
+  const [selected, setSelected] = (0, _react.useState)([]);
+  return /*#__PURE__*/_react.default.createElement(_DataDimension.default, {
+    displayNameProp: "displayName",
+    selectedDimensions: selected,
+    onSelect: response => setSelected(response.items),
+    infoBoxMessage: 'Test message showing in the info box'
+  });
+};
+exports.WithInfoBoxMessage = WithInfoBoxMessage;
+WithInfoBoxMessage.story = {
+  name: 'With info box message'
+};

package/build/cjs/api/dimensions.js

@@ -188,7 +188,7 @@ const dataElementOperandsQuery = exports.dataElementOperandsQuery = {
       page
     } = _ref10;
     const idField = (filter === null || filter === void 0 ? void 0 : filter.group) === _dataTypes.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 !== _dataTypes.DIMENSION_TYPE_ALL) {
       filters.push(`dataElement.dataElementGroups.id:eq:${filter.group}`);
     }

package/build/cjs/api/expression.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateExpressionMutation = exports.updateCalculationMutation = exports.deleteCalculationMutation = exports.createCalculationMutation = void 0;
-const validateExpressionMutation = exports.validateExpressionMutation = {
+exports.validateProgramIndicatorExpressionMutation = exports.validateIndicatorExpressionMutation = exports.updateCalculationMutation = exports.deleteCalculationMutation = exports.createCalculationMutation = void 0;
+const validateIndicatorExpressionMutation = exports.validateIndicatorExpressionMutation = {
   type: 'create',
   resource: 'indicators/expression/description',
   data: _ref => {
@@ -14,14 +14,24 @@ const validateExpressionMutation = exports.validateExpressionMutation = {
     return expression;
   }
 };
+const validateProgramIndicatorExpressionMutation = exports.validateProgramIndicatorExpressionMutation = {
+  type: 'create',
+  resource: 'programIndicators/expression/description',
+  data: _ref2 => {
+    let {
+      expression
+    } = _ref2;
+    return expression;
+  }
+};
 const createCalculationMutation = exports.createCalculationMutation = {
   type: 'create',
   resource: 'expressionDimensionItems',
-  data: _ref2 => {
+  data: _ref3 => {
     let {
       name,
       expression
-    } = _ref2;
+    } = _ref3;
     return {
       name,
       shortName: name,
@@ -32,17 +42,17 @@ const createCalculationMutation = exports.createCalculationMutation = {
 const updateCalculationMutation = exports.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',
@@ -61,10 +71,10 @@ const updateCalculationMutation = exports.updateCalculationMutation = {
 const deleteCalculationMutation = exports.deleteCalculationMutation = {
   type: 'delete',
   resource: 'expressionDimensionItems',
-  id: _ref5 => {
+  id: _ref6 => {
     let {
       id
-    } = _ref5;
+    } = _ref6;
     return id;
   }
 };

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

@@ -51,7 +51,7 @@ const CalculationModal = _ref => {
   }] = (0, _appRuntime.useDataMutation)(_expression.deleteCalculationMutation, mutationParams);
   const [doBackendValidation, {
     loading: isValidating
-  }] = (0, _appRuntime.useDataMutation)(_expression.validateExpressionMutation, {
+  }] = (0, _appRuntime.useDataMutation)(_expression.validateIndicatorExpressionMutation, {
     onError: error => showError(error)
   });
   const query = {

package/build/cjs/components/DataDimension/DataDimension.js

@@ -16,6 +16,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const DataDimensionCtx = /*#__PURE__*/(0, _react.createContext)({});
 const DataDimension = _ref => {
   let {
+    currentUser,
     onSelect,
     selectedDimensions,
     displayNameProp,
@@ -49,7 +50,8 @@ const DataDimension = _ref => {
   (0, _react.useEffect)(() => enabledDataTypes && setDataTypes(filterDataTypesByVersion(enabledDataTypes)), [enabledDataTypes, filterDataTypesByVersion]);
   return /*#__PURE__*/_react.default.createElement(DataDimensionCtx.Provider, {
     value: {
-      visType
+      visType,
+      currentUser
     }
   }, /*#__PURE__*/_react.default.createElement(_ItemSelector.default, {
     selectedItems: selectedDimensions.map(item => ({
@@ -78,6 +80,7 @@ DataDimension.propTypes = {
     type: _propTypes.default.string
   })).isRequired,
   onSelect: _propTypes.default.func.isRequired,
+  currentUser: _propTypes.default.object,
   enabledDataTypes: _propTypes.default.array,
   infoBoxMessage: _propTypes.default.string,
   visType: _propTypes.default.string,

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

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalculationInfo = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _appRuntime = require("@dhis2/app-runtime");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _expression = require("../../../api/expression.js");
+var _index = _interopRequireDefault(require("../../../locales/index.js"));
+var _InfoTable = require("./InfoTable.js");
+var _InfoPopoverStyle = _interopRequireDefault(require("./styles/InfoPopover.style.js"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const calculationQuery = {
+  calculation: {
+    resource: 'expressionDimensionItems',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${(0, _InfoTable.getCommonFields)(displayNameProp)},expression`
+      };
+    }
+  }
+};
+const CalculationInfo = _ref3 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref3;
+  const [data, setData] = (0, _react.useState)();
+  const [error, setError] = (0, _react.useState)();
+  const [expressionError, setExpressionError] = (0, _react.useState)();
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const {
+    baseUrl,
+    apiVersion
+  } = (0, _appRuntime.useConfig)();
+  const engine = (0, _appRuntime.useDataEngine)();
+  const [getHumanReadableExpression] = (0, _appRuntime.useDataMutation)(_expression.validateIndicatorExpressionMutation, {
+    onError: setExpressionError
+  });
+  const fetchData = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    fetchData();
+  }, [fetchData]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InfoTable.InfoTable, {
+    dataType: type,
+    data: data === null || data === void 0 ? void 0 : data.calculation,
+    loading: loading,
+    error: error
+  }, /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Expression description')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data !== null && data !== void 0 && data.calculation.humanReadableExpression ? (0, _InfoTable.renderHumanReadableExpression)(data.calculation.humanReadableExpression) : /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "none"
+  }, expressionError ? _index.default.t('Error loading value') : _index.default.t('None'))))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _InfoPopoverStyle.default.__hash
+  }, _InfoPopoverStyle.default));
+};
+exports.CalculationInfo = CalculationInfo;
+CalculationInfo.propTypes = {
+  displayNameProp: _propTypes.default.string,
+  id: _propTypes.default.string,
+  type: _propTypes.default.string
+};

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

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

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

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataElementOperandInfo = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _appRuntime = require("@dhis2/app-runtime");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = _interopRequireDefault(require("../../../locales/index.js"));
+var _valueTypes = require("../../../modules/valueTypes.js");
+var _InfoTable = require("./InfoTable.js");
+var _InfoPopoverStyle = _interopRequireDefault(require("./styles/InfoPopover.style.js"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const dataElementOperandsQuery = {
+  dataElementOperands: {
+    resource: 'dataElementOperands',
+    params: _ref => {
+      let {
+        displayNameProp,
+        id
+      } = _ref;
+      return {
+        filter: `id:eq:${id}`,
+        fields: [`${(0, _InfoTable.getCommonFields)(displayNameProp)}`, 'categoryOptionCombo[categoryCombo[categories[displayName,id],displayName],displayName]', `dataElement[${(0, _InfoTable.getCommonFields)(displayNameProp)},aggregationType,categoryCombo[displayName,categories[id,displayName]],dataElementGroups[id,displayName],dataSetElements[dataSet[id,displayName]],legendSets[id,displayName],optionSet[displayName],valueType,zeroIsSignificant]`, 'displayName,id']
+      };
+    }
+  }
+};
+const DataElementOperandInfo = _ref2 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref2;
+  const [data, setData] = (0, _react.useState)();
+  const [error, setError] = (0, _react.useState)();
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const {
+    baseUrl,
+    apiVersion
+  } = (0, _appRuntime.useConfig)();
+  const engine = (0, _appRuntime.useDataEngine)();
+  const fetchData = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    fetchData();
+  }, [fetchData]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InfoTable.InfoTable, {
+    dataType: type,
+    data: data === null || data === void 0 ? void 0 : data.dataElementOperand,
+    loading: loading,
+    error: error
+  }, /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Data set(s)')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.dataSetElements) && (0, _InfoTable.renderDataSets)(data.dataElementOperand.dataElement.dataSetElements.map(_ref3 => {
+    let {
+      dataSet
+    } = _ref3;
+    return dataSet;
+  })))), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Zero is significant')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data !== null && data !== void 0 && data.dataElementOperand.dataElement.zeroIsSignificant ? _index.default.t('True') : _index.default.t('False'))), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Value type')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _valueTypes.valueTypeDisplayNames[data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.valueType])), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Aggregation type')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.aggregationType)), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Category combo')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.categoryCombo.displayName) === 'default' ? /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "none"
+  }, _index.default.t('None')) : /*#__PURE__*/_react.default.createElement("details", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("summary", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.categoryCombo.displayName), /*#__PURE__*/_react.default.createElement("ul", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.categoryCombo.categories.map(_ref4 => {
+    let {
+      id,
+      displayName
+    } = _ref4;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: id,
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, displayName);
+  }))))), (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.optionSet) && /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Option set')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data.dataElementOperand.dataElement.optionSet.displayName)), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Group membership')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.dataElementGroups) && (0, _InfoTable.renderGroupMemberships)(data.dataElementOperand.dataElement.dataElementGroups))), Boolean(data === null || data === void 0 ? void 0 : data.dataElementOperand.dataElement.legendSets.length) && /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Legend set(s)')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, (0, _InfoTable.renderLegendSets)(data.dataElementOperand.dataElement.legendSets))), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Category option name')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.categoryOptionCombo.displayName)), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Category combo name')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.categoryOptionCombo.categoryCombo.displayName)), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Categories name')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataElementOperand.categoryOptionCombo.categoryCombo.categories.map(_ref5 => {
+    let {
+      id,
+      displayName
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: id,
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, displayName);
+  }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _InfoPopoverStyle.default.__hash
+  }, _InfoPopoverStyle.default));
+};
+exports.DataElementOperandInfo = DataElementOperandInfo;
+DataElementOperandInfo.propTypes = {
+  displayNameProp: _propTypes.default.string,
+  id: _propTypes.default.string,
+  type: _propTypes.default.string
+};