@dhis2/analytics 26.9.6 → 26.10.0

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

@@ -0,0 +1,219 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sentenceCaseText = exports.renderLegendSets = exports.renderHumanReadableExpression = exports.renderGroupMemberships = exports.renderDataSets = exports.getCommonFields = exports.capitalizeText = exports.InfoTable = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _appRuntime = require("@dhis2/app-runtime");
+var _ui = require("@dhis2/ui");
+var _moment = _interopRequireDefault(require("moment"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../../../locales/index.js"));
+var _dataTypes = require("../../../modules/dataTypes.js");
+var _InfoPopoverStyle = _interopRequireDefault(require("./styles/InfoPopover.style.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getCommonFields = displayNameProp => `attributeValues[attribute[id,displayName],value],code,created,createdBy,${displayNameProp}~rename(displayName),displayDescription,href,id,lastUpdated`;
+exports.getCommonFields = getCommonFields;
+const capitalizeText = text => text && text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+exports.capitalizeText = capitalizeText;
+const sentenceCaseText = text => text && capitalizeText(text.replaceAll('_', ' ').toLowerCase());
+exports.sentenceCaseText = sentenceCaseText;
+const renderDataSets = dataSets => {
+  if (dataSets.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "none"
+    }, _index.default.t('None')), /*#__PURE__*/_react.default.createElement(_style.default, {
+      id: _InfoPopoverStyle.default.__hash
+    }, _InfoPopoverStyle.default));
+  } else if (dataSets.length === 1) {
+    return dataSets[0].displayName;
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "content-wrap"
+    }, /*#__PURE__*/_react.default.createElement("ul", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, dataSets.map(_ref => {
+      let {
+        id,
+        displayName
+      } = _ref;
+      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.renderDataSets = renderDataSets;
+const renderGroupMemberships = groups => {
+  if (groups.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "none"
+    }, _index.default.t('None')), /*#__PURE__*/_react.default.createElement(_style.default, {
+      id: _InfoPopoverStyle.default.__hash
+    }, _InfoPopoverStyle.default));
+  } else if (groups.length === 1) {
+    return groups[0].displayName;
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "content-wrap"
+    }, /*#__PURE__*/_react.default.createElement("ul", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, groups.map(_ref2 => {
+      let {
+        id,
+        displayName
+      } = _ref2;
+      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.renderGroupMemberships = renderGroupMemberships;
+const renderHumanReadableExpression = expressionData => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, expressionData.status === 'ERROR' ? /*#__PURE__*/_react.default.createElement("span", {
+  className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "none"
+}, expressionData.message) : /*#__PURE__*/_react.default.createElement("span", {
+  className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "code"
+}, expressionData.description), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: _InfoPopoverStyle.default.__hash
+}, _InfoPopoverStyle.default));
+exports.renderHumanReadableExpression = renderHumanReadableExpression;
+const renderLegendSets = legendSets => {
+  return legendSets.length === 1 ? legendSets[0].displayName : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "content-wrap"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, legendSets.map(_ref3 => {
+    let {
+      id,
+      displayName
+    } = _ref3;
+    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.renderLegendSets = renderLegendSets;
+const InfoTable = _ref4 => {
+  let {
+    dataType,
+    data,
+    error,
+    loading,
+    children
+  } = _ref4;
+  const {
+    fromServerDate
+  } = (0, _appRuntime.useTimeZoneConversion)();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading && /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "loader"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Center, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
+    small: true
+  }))), error && /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "error"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('There was a problem loading information for this data item.'))), data && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("table", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "data-table"
+  }, /*#__PURE__*/_react.default.createElement("tbody", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Name')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data.displayName)), children, dataType !== _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM ? /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Description')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data.displayDescription ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "content-wrap"
+  }, data.displayDescription) : /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "none"
+  }, _index.default.t('None')))) : data.displayDescription && /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Description')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "content-wrap"
+  }, data.displayDescription))), dataType !== _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM ? /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Code')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data.code ? data.code : /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "none"
+  }, _index.default.t('None')))) : data.code && /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Code')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data.code)), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('ID')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "code"
+  }, data.id))), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Last updated date')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, `${(0, _moment.default)(fromServerDate(data.lastUpdated)).fromNow()} (${(0, _moment.default)(fromServerDate(data.lastUpdated)).format('YYYY-MM-DD')})`)), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Created date')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, `${(0, _moment.default)(fromServerDate(data.created)).fromNow()} (${(0, _moment.default)(fromServerDate(data.created)).format('YYYY-MM-DD')})`)), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Created by')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, `${data.createdBy.displayName}, ${data.createdBy.username}`)), data.attributeValues.map(_ref5 => {
+    let {
+      attribute,
+      value
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      key: attribute.id,
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, /*#__PURE__*/_react.default.createElement("th", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, attribute.displayName), /*#__PURE__*/_react.default.createElement("td", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, value));
+  })))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _InfoPopoverStyle.default.__hash
+  }, _InfoPopoverStyle.default));
+};
+exports.InfoTable = InfoTable;
+InfoTable.propTypes = {
+  children: _propTypes.default.node,
+  data: _propTypes.default.object,
+  dataType: _propTypes.default.string,
+  error: _propTypes.default.string,
+  loading: _propTypes.default.bool
+};

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

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgramIndicatorInfo = 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 programIndicatorQuery = {
+  programIndicator: {
+    resource: 'programIndicators',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${(0, _InfoTable.getCommonFields)(displayNameProp)},aggregationType,analyticsPeriodBoundaries[analyticsPeriodBoundaryType,boundaryTarget,id,offsetPeriodType,offsetPeriods],analyticsType,decimals,expression,filter,legendSets[id,displayName],program[displayName]`
+      };
+    }
+  }
+};
+const ProgramIndicatorInfo = _ref3 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref3;
+  const [data, setData] = (0, _react.useState)();
+  const [error, setError] = (0, _react.useState)();
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const engine = (0, _appRuntime.useDataEngine)();
+  const [getHumanReadableExpression] = (0, _appRuntime.useDataMutation)(_expression.validateProgramIndicatorExpressionMutation, {
+    onError: setError
+  });
+  const fetchData = (0, _react.useCallback)(async () => {
+    const {
+      programIndicator
+    } = await engine.query(programIndicatorQuery, {
+      variables: {
+        id,
+        displayNameProp
+      },
+      onError: setError
+    });
+    if (programIndicator.expression) {
+      const result = await getHumanReadableExpression({
+        expression: programIndicator.expression
+      });
+      if (result) {
+        programIndicator.humanReadableExpression = result;
+      }
+    }
+    if (programIndicator.filter) {
+      const result = await getHumanReadableExpression({
+        expression: programIndicator.filter
+      });
+      if (result) {
+        programIndicator.humanReadableFilter = result;
+      }
+    }
+    programIndicator.analyticsPeriodBoundaries.forEach((_ref4, index) => {
+      let {
+        boundaryTarget
+      } = _ref4;
+      programIndicator.analyticsPeriodBoundaries[index].boundaryTarget = ['ENROLLMENT_DATE', 'EVENT_DATE', 'INCIDENT_DATE'].includes(boundaryTarget) ? (0, _InfoTable.sentenceCaseText)(boundaryTarget) : _index.default.t('Custom');
+    });
+    setData({
+      programIndicator
+    });
+    setLoading(false);
+  }, [displayNameProp, engine, id, getHumanReadableExpression]);
+  (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.programIndicator,
+    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('Program')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.programIndicator.program.displayName)), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Analytics type')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.programIndicator.analyticsType) === 'ENROLLMENT' ? _index.default.t('Enrollment') : _index.default.t('Event'))), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Analytics period boundaries')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "content-wrap"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.programIndicator.analyticsPeriodBoundaries.map(_ref5 => {
+    let {
+      analyticsPeriodBoundaryType,
+      boundaryTarget,
+      id,
+      offsetPeriodType,
+      offsetPeriods
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: id,
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "label"
+    }, _index.default.t('Type:'), "\xA0"), (0, _InfoTable.sentenceCaseText)(analyticsPeriodBoundaryType)), /*#__PURE__*/_react.default.createElement("br", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "label"
+    }, _index.default.t('Target:'), "\xA0"), boundaryTarget), Boolean(offsetPeriods) && Boolean(offsetPeriodType) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}`
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "label"
+    }, _index.default.t('Offset:'), "\xA0"), _index.default.t('{{ offsetPeriodType }} × {{ offsetPeriods }}', {
+      offsetPeriodType,
+      offsetPeriods
+    }))));
+  }))))), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Expression')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data !== null && data !== void 0 && data.programIndicator.humanReadableExpression ? (0, _InfoTable.renderHumanReadableExpression)(data.programIndicator.humanReadableExpression) : /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "none"
+  }, _index.default.t('None')))), /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Filter')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data !== null && data !== void 0 && data.programIndicator.humanReadableFilter ? (0, _InfoTable.renderHumanReadableExpression)(data.programIndicator.humanReadableFilter) : /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}` + " " + "none"
+  }, _index.default.t('None')))), /*#__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.programIndicator.aggregationType)), (data === null || data === void 0 ? void 0 : data.programIndicator) && 'decimals' in data.programIndicator && /*#__PURE__*/_react.default.createElement("tr", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, /*#__PURE__*/_react.default.createElement("th", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, _index.default.t('Decimals in output')), /*#__PURE__*/_react.default.createElement("td", {
+    className: `jsx-${_InfoPopoverStyle.default.__hash}`
+  }, data.programIndicator.decimals)), Boolean(data === null || data === void 0 ? void 0 : data.programIndicator.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.programIndicator.legendSets)))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _InfoPopoverStyle.default.__hash
+  }, _InfoPopoverStyle.default));
+};
+exports.ProgramIndicatorInfo = ProgramIndicatorInfo;
+ProgramIndicatorInfo.propTypes = {
+  displayNameProp: _propTypes.default.string,
+  id: _propTypes.default.string,
+  type: _propTypes.default.string
+};

package/build/cjs/components/DataDimension/Info/styles/InfoPopover.style.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ui = require("@dhis2/ui");
+const _defaultExport = [`.popover.jsx-681815212{width:480px;height:360px;border:1px solid ${_ui.colors.grey400};overflow-x:hidden;overflow-y:auto;}`, ".loader.jsx-681815212{height:100%;width:100%;}", `.error.jsx-681815212{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:14px;color:${_ui.colors.grey700};}`, `.data-table.jsx-681815212{display:table;width:100%;border-collapse:collapse;font-size:13px;line-height:17px;margin:${_ui.spacers.dp4} 0 0 0;color:${_ui.colors.grey900};}`, ".data-table.jsx-681815212 th.jsx-681815212{text-align:left;font-weight:500;padding:8px 0 8px 12px;width:128px;vertical-align:top;}", ".data-table.jsx-681815212 td.jsx-681815212{padding:8px 4px 8px 16px;vertical-align:top;}", ".data-table.jsx-681815212 .content-wrap.jsx-681815212{max-height:240px;overflow-y:auto;}", `.data-table.jsx-681815212 tr.jsx-681815212:hover{background:${_ui.colors.grey100};}`, `ul.jsx-681815212{margin:0;padding:0 0 0 ${_ui.spacers.dp16};list-style-position:outside;}`, `li.jsx-681815212+li.jsx-681815212{margin:${_ui.spacers.dp4} 0 0 0;}`, `details.jsx-681815212 ul.jsx-681815212{margin:${_ui.spacers.dp4} 0 0 ${_ui.spacers.dp16};}`, `.data-table.jsx-681815212 .code.jsx-681815212{font-size:11px;line-height:15px;display:inline-block;border-radius:2px;background-color:${_ui.colors.grey200};outline:3px solid ${_ui.colors.grey200};color:${_ui.colors.grey900};font-family:ui-monospace,'Cascadia Code','Source Code Pro',Menlo, Consolas,'DejaVu Sans Mono',monospace;font-weight:normal;}`, `.data-table.jsx-681815212 .none.jsx-681815212,.data-table.jsx-681815212 .label.jsx-681815212{color:${_ui.colors.grey600};}`];
+_defaultExport.__hash = "681815212";
+var _default = exports.default = _defaultExport;

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

@@ -17,10 +17,11 @@ var _dimensionListItem = require("../../modules/dimensionListItem.js");
 var _dimensionSelectorHelper = require("../../modules/dimensionSelectorHelper.js");
 var _utils = require("../../modules/utils.js");
 var _DimensionSelectorStyle = _interopRequireDefault(require("../styles/DimensionSelector.style.js"));
-var _TransferOption = require("../TransferOption.js");
 var _CalculationModal = _interopRequireDefault(require("./Calculation/CalculationModal.js"));
 var _DataTypeSelector = _interopRequireDefault(require("./DataTypeSelector.js"));
 var _GroupSelector = _interopRequireDefault(require("./GroupSelector.js"));
+var _InfoPopover = require("./Info/InfoPopover.js");
+var _TransferOption = require("./TransferOption.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 }; }
@@ -212,6 +213,7 @@ const ItemSelector = _ref5 => {
     dataTest,
     onEDISave
   } = _ref5;
+  const itemsRef = (0, _react.useRef)(new Map());
   const [state, setState] = (0, _react.useState)({
     searchTerm: '',
     dataTypes,
@@ -231,12 +233,13 @@ const ItemSelector = _ref5 => {
     }).includes(_dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM)
   });
   const [currentCalculation, setCurrentCalculation] = (0, _react.useState)();
+  const [currentDataItem, setCurrentDataItem] = (0, _react.useState)();
+  const debouncedSearchTerm = (0, _utils.useDebounce)(state.searchTerm, 500);
   const dataEngine = (0, _appRuntime.useDataEngine)();
   const setSearchTerm = searchTerm => setState(state => ({
     ...state,
     searchTerm
   }));
-  const debouncedSearchTerm = (0, _utils.useDebounce)(state.searchTerm, 500);
   const fetchItems = async page => {
     var _result$dimensionItem;
     setState(state => ({
@@ -400,7 +403,9 @@ const ItemSelector = _ref5 => {
       subGroup: dataType === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT ? _dataTypes.TOTALS : null
     }
   }));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Transfer, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "transfer-container"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Transfer, {
     onChange: _ref9 => {
       let {
         selected
@@ -454,17 +459,23 @@ const ItemSelector = _ref5 => {
       return /*#__PURE__*/_react.default.createElement(_TransferOption.TransferOption
       /* eslint-disable react/prop-types */, _extends({}, props, {
         active: isActive(props.value),
+        showingInfo: (currentDataItem === null || currentDataItem === void 0 ? void 0 : currentDataItem.id) === props.value,
         icon: (0, _dimensionListItem.getIcon)(getItemType(props.value)),
-        tooltipText: (0, _dimensionListItem.getTooltipText)({
+        dimensionType: (0, _dimensionListItem.getDimensionType)({
           type: getItemType(props.value),
           expression: props.expression
         }),
         dataTest: `${dataTest}-transfer-option`,
+        itemsRef: itemsRef,
         onEditClick: getItemType(props.value) === _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && !(((_props$access = props.access) === null || _props$access === void 0 ? void 0 : _props$access.write) === false) && state.supportsEDI ? () => setCurrentCalculation({
           id: props.value,
           name: props.label,
           expression: props.expression
-        }) : undefined
+        }) : undefined,
+        onInfoClick: () => setCurrentDataItem({
+          id: props.value,
+          type: getItemType(props.value)
+        })
         /* eslint-enable react/prop-types */
       }));
     },
@@ -475,6 +486,12 @@ const ItemSelector = _ref5 => {
     onClose: () => setCurrentCalculation(),
     onDelete: onDeleteCalculation,
     displayNameProp: displayNameProp
+  }), currentDataItem && /*#__PURE__*/_react.default.createElement(_InfoPopover.InfoPopover, {
+    dataTest: `${dataTest}-info`,
+    item: currentDataItem,
+    reference: itemsRef.current.get(currentDataItem.id),
+    onClose: () => setCurrentDataItem(),
+    displayNameProp: displayNameProp
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _DimensionSelectorStyle.default.__hash
   }, _DimensionSelectorStyle.default));

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

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TransferOption = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _ui = require("@dhis2/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _TransferOptionStyle = _interopRequireDefault(require("./styles/TransferOption.style.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TransferOption = _ref => {
+  let {
+    disabled,
+    label,
+    highlighted,
+    selected,
+    onClick,
+    onDoubleClick,
+    value,
+    icon,
+    active,
+    dimensionType,
+    dataTest,
+    itemsRef,
+    showingInfo,
+    onEditClick,
+    onInfoClick
+  } = _ref;
+  const renderContent = () => /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": `${dataTest}-content`,
+    onClick: event => {
+      if (disabled) {
+        return;
+      }
+      onClick({
+        label,
+        value
+      }, event);
+    },
+    onDoubleClick: event => {
+      if (disabled) {
+        return;
+      }
+      onDoubleClick({
+        label,
+        value
+      }, event);
+    },
+    className: `jsx-${_TransferOptionStyle.default.__hash}` + " " + ((0, _classnames.default)('item', {
+      highlighted,
+      disabled,
+      selected,
+      inactive: active !== undefined && !active
+    }) || "")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_TransferOptionStyle.default.__hash}` + " " + "labelGroup"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_TransferOptionStyle.default.__hash}` + " " + "icon"
+  }, icon), /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_TransferOptionStyle.default.__hash}` + " " + "label"
+  }, label), onEditClick && /*#__PURE__*/_react.default.createElement("span", {
+    onClick: e => {
+      e.stopPropagation();
+      onEditClick();
+    },
+    "data-test": `${dataTest}-edit-button`,
+    className: `jsx-${_TransferOptionStyle.default.__hash}` + " " + "edit"
+  }, /*#__PURE__*/_react.default.createElement(_ui.IconEdit16, null))), /*#__PURE__*/_react.default.createElement("div", {
+    className: `jsx-${_TransferOptionStyle.default.__hash}` + " " + ((0, _classnames.default)('group', 'nowrap', 'typeGroup') || "")
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `jsx-${_TransferOptionStyle.default.__hash}` + " " + "type"
+  }, dimensionType), /*#__PURE__*/_react.default.createElement("span", {
+    ref: node => {
+      node ? itemsRef.current.set(value, node) : itemsRef.current.delete(value);
+    }
+    // avoid moving items when toggling the info popover
+    // sometimes a double click event is fired
+    ,
+    onDoubleClick: e => e.stopPropagation(),
+    onClick: e => {
+      e.stopPropagation();
+      onInfoClick();
+    },
+    "data-test": `${dataTest}-info-button`,
+    className: `jsx-${_TransferOptionStyle.default.__hash}` + " " + ((0, _classnames.default)('info', {
+      active: showingInfo
+    }) || "")
+  }, /*#__PURE__*/_react.default.createElement(_ui.IconInfo16, null))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _TransferOptionStyle.default.__hash
+  }, _TransferOptionStyle.default));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-value": value,
+    "data-test": dataTest,
+    className: "wrapper"
+  }, renderContent());
+};
+exports.TransferOption = TransferOption;
+TransferOption.propTypes = {
+  label: _propTypes.default.string.isRequired,
+  value: _propTypes.default.string.isRequired,
+  active: _propTypes.default.bool,
+  dataTest: _propTypes.default.string,
+  dimensionType: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  highlighted: _propTypes.default.bool,
+  icon: _propTypes.default.node,
+  itemsRef: _propTypes.default.object,
+  selected: _propTypes.default.bool,
+  showingInfo: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
+  onDoubleClick: _propTypes.default.func,
+  onEditClick: _propTypes.default.func,
+  onInfoClick: _propTypes.default.func
+};

package/build/cjs/components/DataDimension/styles/TransferOption.style.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ui = require("@dhis2/ui");
+const _defaultExport = [`.wrapper.jsx-2953719875:last-child{margin-bottom:${_ui.spacers.dp4};}`, `.item.jsx-2953719875{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:${_ui.colors.white};font-size:14px;line-height:16px;border-bottom:1px solid ${_ui.colors.grey300};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, `.item.jsx-2953719875:hover{background:${_ui.colors.grey100};}`, ".disabled.jsx-2953719875{opacity:0.3;cursor:not-allowed;}", ".inactive.jsx-2953719875{opacity:0.3;}", ".labelGroup.jsx-2953719875{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:6px 4px;}", ".typeGroup.jsx-2953719875{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".nowrap.jsx-2953719875{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".icon.jsx-2953719875,.label.jsx-2953719875{line-height:18px;}", `.icon.jsx-2953719875{margin-right:${_ui.spacers.dp4};display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom;}`, `.label.jsx-2953719875{font-size:14px;color:${_ui.colors.grey900};}`, `.type.jsx-2953719875{font-size:10px;-webkit-letter-spacing:-0.2px;-moz-letter-spacing:-0.2px;-ms-letter-spacing:-0.2px;letter-spacing:-0.2px;color:${_ui.colors.grey600};font-family:ui-monospace,'Cascadia Code','Source Code Pro',Menlo, Consolas,'DejaVu Sans Mono',monospace;font-weight:normal;}`, `.edit.jsx-2953719875,.info.jsx-2953719875{height:16px;margin-top:1px;margin-left:${_ui.spacers.dp8};cursor:pointer;color:${_ui.colors.grey600};}`, `.info.jsx-2953719875{margin:0 0 0 ${_ui.spacers.dp4};height:100%;padding:0 6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}`, `.info.active.jsx-2953719875{background-color:${_ui.colors.grey300};color:${_ui.colors.grey900};}`, `.highlighted.jsx-2953719875{background:${_ui.theme.secondary700};}`, `.highlighted.jsx-2953719875:hover{background:${_ui.theme.secondary800};}`, `.highlighted.jsx-2953719875 .label.jsx-2953719875{color:${_ui.colors.white};}`, `.highlighted.jsx-2953719875 .type.jsx-2953719875{color:${_ui.theme.secondary050};}`, `.highlighted.jsx-2953719875 .info.jsx-2953719875{color:${_ui.theme.secondary050};}`, `.highlighted.jsx-2953719875 .icon path{fill:${_ui.colors.teal050};}`, `.highlighted.jsx-2953719875 .type.jsx-2953719875{color:${_ui.colors.teal050};}`, `.edit.jsx-2953719875:hover,.info.jsx-2953719875:hover{background-color:${_ui.colors.grey200};border-radius:0px;}`, `.highlighted.jsx-2953719875 .info.active.jsx-2953719875{background-color:${_ui.theme.secondary900};}`, `.highlighted.jsx-2953719875 .edit.jsx-2953719875:hover,.highlighted.jsx-2953719875 .info.jsx-2953719875:hover{background-color:${_ui.theme.secondary900};}`];
+_defaultExport.__hash = "2953719875";
+var _default = exports.default = _defaultExport;