@dhis2/analytics 26.9.6 → 26.10.1

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

@@ -0,0 +1,169 @@
+import _JSXStyle from "styled-jsx/style";
+import { 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, renderGroupMemberships, renderHumanReadableExpression, renderLegendSets, InfoTable } from './InfoTable.js';
+import styles from './styles/InfoPopover.style.js';
+const indicatorQuery = {
+  indicator: {
+    resource: 'indicators',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${getCommonFields(displayNameProp)},annualized,dataSets[id,displayName],decimals,denominator,displayDenominatorDescription,displayNumeratorDescription,indicatorGroups[id,displayName],indicatorType[displayName,factor],legendSets[id,displayName],numerator`
+      };
+    }
+  }
+};
+export const IndicatorInfo = _ref3 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref3;
+  const [data, setData] = useState();
+  const [error, setError] = useState();
+  const [loading, setLoading] = useState(true);
+  const engine = useDataEngine();
+  const [getHumanReadableExpression] = useDataMutation(validateIndicatorExpressionMutation, {
+    onError: setError
+  });
+  const fetchData = useCallback(async () => {
+    const {
+      indicator
+    } = await engine.query(indicatorQuery, {
+      variables: {
+        id,
+        displayNameProp
+      },
+      onError: setError
+    });
+    if (indicator.denominator) {
+      const result = await getHumanReadableExpression({
+        expression: indicator.denominator
+      });
+      if (result) {
+        indicator.humanReadableDenominatorExpression = result;
+      }
+    }
+    if (indicator.numerator) {
+      const result = await getHumanReadableExpression({
+        expression: indicator.numerator
+      });
+      if (result) {
+        indicator.humanReadableNumeratorExpression = result;
+      }
+    }
+    setData({
+      indicator
+    });
+    setLoading(false);
+  }, [displayNameProp, engine, getHumanReadableExpression, 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.indicator,
+    loading: loading,
+    error: error
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Numerator description')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.indicator.displayNumeratorDescription ? data.indicator.displayNumeratorDescription : /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Numerator expression')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.indicator.humanReadableNumeratorExpression ? renderHumanReadableExpression(data.indicator.humanReadableNumeratorExpression) : /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Denominator description')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.indicator.displayDenominatorDescription ? data.indicator.displayDenominatorDescription : /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Denominator expression')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.indicator.humanReadableDenominatorExpression ? renderHumanReadableExpression(data.indicator.humanReadableDenominatorExpression) : /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Annualized')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.indicator.annualized ? i18n.t('Yes') : i18n.t('No'))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Indicator type')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, `${data === null || data === void 0 ? void 0 : data.indicator.indicatorType.displayName}, ${data === null || data === void 0 ? void 0 : data.indicator.indicatorType.factor}`)), (data === null || data === void 0 ? void 0 : data.indicator.decimals) && /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Decimals in output')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.indicator.decimals)), Boolean(data === null || data === void 0 ? void 0 : data.indicator.dataSets.length) && /*#__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.indicator.dataSets.length === 1 ? data.indicator.dataSets[0].displayName : /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "content-wrap"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: `jsx-${styles.__hash}`
+  }, data.indicator.dataSets.map(_ref4 => {
+    let {
+      id,
+      displayName
+    } = _ref4;
+    return /*#__PURE__*/React.createElement("li", {
+      key: id,
+      className: `jsx-${styles.__hash}`
+    }, 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.indicator.indicatorGroups) && renderGroupMemberships(data.indicator.indicatorGroups))), Boolean(data === null || data === void 0 ? void 0 : data.indicator.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.indicator.legendSets)))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+IndicatorInfo.propTypes = {
+  displayNameProp: PropTypes.string,
+  id: PropTypes.string,
+  type: PropTypes.string
+};

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

@@ -0,0 +1,54 @@
+import _JSXStyle from "styled-jsx/style";
+import { Popover } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { REPORTING_RATE } from '../../../modules/dataSets.js'; // data sets
+import { DIMENSION_TYPE_DATA_ELEMENT, DIMENSION_TYPE_DATA_ELEMENT_OPERAND, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM,
+// calculation
+DIMENSION_TYPE_INDICATOR, DIMENSION_TYPE_PROGRAM_ATTRIBUTE,
+// event data items
+DIMENSION_TYPE_PROGRAM_DATA_ELEMENT,
+// event data items
+DIMENSION_TYPE_PROGRAM_INDICATOR } from '../../../modules/dataTypes.js';
+import { CalculationInfo } from './CalculationInfo.js';
+import { DataElementInfo } from './DataElementInfo.js';
+import { DataElementOperandInfo } from './DataElementOperandInfo.js';
+import { DataSetInfo } from './DataSetInfo.js';
+import { EventDataItemInfo } from './EventDataItemInfo.js';
+import { IndicatorInfo } from './IndicatorInfo.js';
+import { ProgramIndicatorInfo } from './ProgramIndicatorInfo.js';
+import styles from './styles/InfoPopover.style.js';
+export const InfoPopover = _ref => {
+  let {
+    reference,
+    onClose,
+    dataTest,
+    ...props
+  } = _ref;
+  const type = props.item.type;
+  const infoProps = {
+    type,
+    id: props.item.id,
+    displayNameProp: props.displayNameProp
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
+    placement: "bottom-end",
+    reference: reference,
+    onClickOutside: onClose,
+    maxWidth: 480,
+    arrow: false,
+    elevation: "rgba(0, 0, 0, 0.1) 0px 1px 5px, rgba(0, 0, 0, 0.07) 0px 3.6px 13px, rgba(0, 0, 0, 0.06) 0px 8.4px 23px, rgba(0, 0, 0, 0.05) 0px 23px 35px"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": `${dataTest}-table`,
+    className: `jsx-${styles.__hash}` + " " + "popover"
+  }, type === DIMENSION_TYPE_DATA_ELEMENT && /*#__PURE__*/React.createElement(DataElementInfo, infoProps), type === DIMENSION_TYPE_DATA_ELEMENT_OPERAND && /*#__PURE__*/React.createElement(DataElementOperandInfo, infoProps), type === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && /*#__PURE__*/React.createElement(CalculationInfo, infoProps), type === REPORTING_RATE /* TODO: verify this! */ && /*#__PURE__*/React.createElement(DataSetInfo, infoProps), type === DIMENSION_TYPE_INDICATOR && /*#__PURE__*/React.createElement(IndicatorInfo, infoProps), [DIMENSION_TYPE_PROGRAM_ATTRIBUTE, DIMENSION_TYPE_PROGRAM_DATA_ELEMENT].includes(type) && /*#__PURE__*/React.createElement(EventDataItemInfo, infoProps), type === DIMENSION_TYPE_PROGRAM_INDICATOR && /*#__PURE__*/React.createElement(ProgramIndicatorInfo, infoProps))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+InfoPopover.propTypes = {
+  dataTest: PropTypes.string,
+  displayNameProp: PropTypes.string,
+  item: PropTypes.object,
+  reference: PropTypes.object,
+  onClose: PropTypes.func
+};

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

@@ -0,0 +1,205 @@
+import _JSXStyle from "styled-jsx/style";
+import { useTimeZoneConversion } from '@dhis2/app-runtime';
+import { Center, CircularLoader } from '@dhis2/ui';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../../../locales/index.js';
+import { DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM // calculation
+} from '../../../modules/dataTypes.js';
+import styles from './styles/InfoPopover.style.js';
+export const getCommonFields = displayNameProp => `attributeValues[attribute[id,displayName],value],code,created,createdBy,${displayNameProp}~rename(displayName),displayDescription,href,id,lastUpdated`;
+export const capitalizeText = text => text && text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+export const sentenceCaseText = text => text && capitalizeText(text.replaceAll('_', ' ').toLowerCase());
+export const renderDataSets = dataSets => {
+  if (dataSets.length === 0) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: `jsx-${styles.__hash}` + " " + "none"
+    }, i18n.t('None')), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: styles.__hash
+    }, styles));
+  } else if (dataSets.length === 1) {
+    return dataSets[0].displayName;
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: `jsx-${styles.__hash}` + " " + "content-wrap"
+    }, /*#__PURE__*/React.createElement("ul", {
+      className: `jsx-${styles.__hash}`
+    }, dataSets.map(_ref => {
+      let {
+        id,
+        displayName
+      } = _ref;
+      return /*#__PURE__*/React.createElement("li", {
+        key: id,
+        className: `jsx-${styles.__hash}`
+      }, displayName);
+    }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: styles.__hash
+    }, styles));
+  }
+};
+export const renderGroupMemberships = groups => {
+  if (groups.length === 0) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: `jsx-${styles.__hash}` + " " + "none"
+    }, i18n.t('None')), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: styles.__hash
+    }, styles));
+  } else if (groups.length === 1) {
+    return groups[0].displayName;
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: `jsx-${styles.__hash}` + " " + "content-wrap"
+    }, /*#__PURE__*/React.createElement("ul", {
+      className: `jsx-${styles.__hash}`
+    }, groups.map(_ref2 => {
+      let {
+        id,
+        displayName
+      } = _ref2;
+      return /*#__PURE__*/React.createElement("li", {
+        key: id,
+        className: `jsx-${styles.__hash}`
+      }, displayName);
+    }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: styles.__hash
+    }, styles));
+  }
+};
+export const renderHumanReadableExpression = expressionData => /*#__PURE__*/React.createElement(React.Fragment, null, expressionData.status === 'ERROR' ? /*#__PURE__*/React.createElement("span", {
+  className: `jsx-${styles.__hash}` + " " + "none"
+}, expressionData.message) : /*#__PURE__*/React.createElement("span", {
+  className: `jsx-${styles.__hash}` + " " + "code"
+}, expressionData.description), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: styles.__hash
+}, styles));
+export const renderLegendSets = legendSets => {
+  return legendSets.length === 1 ? legendSets[0].displayName : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "content-wrap"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: `jsx-${styles.__hash}`
+  }, legendSets.map(_ref3 => {
+    let {
+      id,
+      displayName
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("li", {
+      key: id,
+      className: `jsx-${styles.__hash}`
+    }, displayName);
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+export const InfoTable = _ref4 => {
+  let {
+    dataType,
+    data,
+    error,
+    loading,
+    children
+  } = _ref4;
+  const {
+    fromServerDate
+  } = useTimeZoneConversion();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "loader"
+  }, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(CircularLoader, {
+    small: true
+  }))), error && /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "error"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('There was a problem loading information for this data item.'))), data && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("table", {
+    className: `jsx-${styles.__hash}` + " " + "data-table"
+  }, /*#__PURE__*/React.createElement("tbody", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Name')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.displayName)), children, dataType !== DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM ? /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Description')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.displayDescription ? /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "content-wrap"
+  }, data.displayDescription) : /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')))) : data.displayDescription && /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Description')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "content-wrap"
+  }, data.displayDescription))), dataType !== DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM ? /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Code')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.code ? data.code : /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')))) : data.code && /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Code')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.code)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('ID')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "code"
+  }, data.id))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Last updated date')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, `${moment(fromServerDate(data.lastUpdated)).fromNow()} (${moment(fromServerDate(data.lastUpdated)).format('YYYY-MM-DD')})`)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Created date')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, `${moment(fromServerDate(data.created)).fromNow()} (${moment(fromServerDate(data.created)).format('YYYY-MM-DD')})`)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Created by')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, `${data.createdBy.displayName}, ${data.createdBy.username}`)), data.attributeValues.map(_ref5 => {
+    let {
+      attribute,
+      value
+    } = _ref5;
+    return /*#__PURE__*/React.createElement("tr", {
+      key: attribute.id,
+      className: `jsx-${styles.__hash}`
+    }, /*#__PURE__*/React.createElement("th", {
+      className: `jsx-${styles.__hash}`
+    }, attribute.displayName), /*#__PURE__*/React.createElement("td", {
+      className: `jsx-${styles.__hash}`
+    }, value));
+  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+InfoTable.propTypes = {
+  children: PropTypes.node,
+  data: PropTypes.object,
+  dataType: PropTypes.string,
+  error: PropTypes.string,
+  loading: PropTypes.bool
+};

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

@@ -0,0 +1,181 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataMutation, useDataEngine } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect, useState } from 'react';
+import { validateProgramIndicatorExpressionMutation } from '../../../api/expression.js';
+import i18n from '../../../locales/index.js';
+import { getCommonFields, renderHumanReadableExpression, renderLegendSets, sentenceCaseText, InfoTable } from './InfoTable.js';
+import styles from './styles/InfoPopover.style.js';
+const programIndicatorQuery = {
+  programIndicator: {
+    resource: 'programIndicators',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${getCommonFields(displayNameProp)},aggregationType,analyticsPeriodBoundaries[analyticsPeriodBoundaryType,boundaryTarget,id,offsetPeriodType,offsetPeriods],analyticsType,decimals,expression,filter,legendSets[id,displayName],program[displayName]`
+      };
+    }
+  }
+};
+export const ProgramIndicatorInfo = _ref3 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref3;
+  const [data, setData] = useState();
+  const [error, setError] = useState();
+  const [loading, setLoading] = useState(true);
+  const engine = useDataEngine();
+  const [getHumanReadableExpression] = useDataMutation(validateProgramIndicatorExpressionMutation, {
+    onError: setError
+  });
+  const fetchData = 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) ? sentenceCaseText(boundaryTarget) : i18n.t('Custom');
+    });
+    setData({
+      programIndicator
+    });
+    setLoading(false);
+  }, [displayNameProp, engine, id, getHumanReadableExpression]);
+  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.programIndicator,
+    loading: loading,
+    error: error
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Program')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.programIndicator.program.displayName)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Analytics type')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.programIndicator.analyticsType) === 'ENROLLMENT' ? i18n.t('Enrollment') : i18n.t('Event'))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Analytics period boundaries')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "content-wrap"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.programIndicator.analyticsPeriodBoundaries.map(_ref5 => {
+    let {
+      analyticsPeriodBoundaryType,
+      boundaryTarget,
+      id,
+      offsetPeriodType,
+      offsetPeriods
+    } = _ref5;
+    return /*#__PURE__*/React.createElement("li", {
+      key: id,
+      className: `jsx-${styles.__hash}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `jsx-${styles.__hash}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `jsx-${styles.__hash}` + " " + "label"
+    }, i18n.t('Type:'), "\xA0"), sentenceCaseText(analyticsPeriodBoundaryType)), /*#__PURE__*/React.createElement("br", {
+      className: `jsx-${styles.__hash}`
+    }), /*#__PURE__*/React.createElement("span", {
+      className: `jsx-${styles.__hash}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `jsx-${styles.__hash}` + " " + "label"
+    }, i18n.t('Target:'), "\xA0"), boundaryTarget), Boolean(offsetPeriods) && Boolean(offsetPeriodType) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", {
+      className: `jsx-${styles.__hash}`
+    }), /*#__PURE__*/React.createElement("span", {
+      className: `jsx-${styles.__hash}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `jsx-${styles.__hash}` + " " + "label"
+    }, i18n.t('Offset:'), "\xA0"), i18n.t('{{ offsetPeriodType }} × {{ offsetPeriods }}', {
+      offsetPeriodType,
+      offsetPeriods
+    }))));
+  }))))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Expression')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.programIndicator.humanReadableExpression ? renderHumanReadableExpression(data.programIndicator.humanReadableExpression) : /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Filter')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data !== null && data !== void 0 && data.programIndicator.humanReadableFilter ? renderHumanReadableExpression(data.programIndicator.humanReadableFilter) : /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "none"
+  }, i18n.t('None')))), /*#__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.programIndicator.aggregationType)), (data === null || data === void 0 ? void 0 : data.programIndicator) && 'decimals' in data.programIndicator && /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Decimals in output')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.programIndicator.decimals)), Boolean(data === null || data === void 0 ? void 0 : data.programIndicator.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.programIndicator.legendSets)))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+ProgramIndicatorInfo.propTypes = {
+  displayNameProp: PropTypes.string,
+  id: PropTypes.string,
+  type: PropTypes.string
+};

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

@@ -0,0 +1,4 @@
+import { colors, spacers } from '@dhis2/ui';
+const _defaultExport = [`.popover.jsx-681815212{width:480px;height:360px;border:1px solid ${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:${colors.grey700};}`, `.data-table.jsx-681815212{display:table;width:100%;border-collapse:collapse;font-size:13px;line-height:17px;margin:${spacers.dp4} 0 0 0;color:${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:${colors.grey100};}`, `ul.jsx-681815212{margin:0;padding:0 0 0 ${spacers.dp16};list-style-position:outside;}`, `li.jsx-681815212+li.jsx-681815212{margin:${spacers.dp4} 0 0 0;}`, `details.jsx-681815212 ul.jsx-681815212{margin:${spacers.dp4} 0 0 ${spacers.dp16};}`, `.data-table.jsx-681815212 .code.jsx-681815212{font-size:11px;line-height:15px;display:inline-block;border-radius:2px;background-color:${colors.grey200};outline:3px solid ${colors.grey200};color:${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:${colors.grey600};}`];
+_defaultExport.__hash = "681815212";
+export default _defaultExport;