@dhis2/analytics 26.9.5 → 26.10.0

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

@@ -0,0 +1,107 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataQuery } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../../../locales/index.js';
+import { getCommonFields, InfoTable } from './InfoTable.js';
+import styles from './styles/InfoPopover.style.js';
+const dataSetQuery = {
+  dataSet: {
+    resource: 'dataSets',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${getCommonFields(displayNameProp)},dataSetElements[dataElement[id,displayName]],expiryDays,indicators[id,displayName],periodType,`
+      };
+    }
+  }
+};
+export const DataSetInfo = _ref3 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref3;
+  const {
+    loading,
+    error,
+    data
+  } = useDataQuery(dataSetQuery, {
+    variables: {
+      id,
+      displayNameProp
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfoTable, {
+    dataType: type,
+    data: data === null || data === void 0 ? void 0 : data.dataSet,
+    loading: loading,
+    error: error
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Period type')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataSet.periodType)), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Data elements')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataSet.dataSetElements.length) === 1 ? data.dataSet.dataSetElements[0].dataElement.displayName : /*#__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.dataSet.dataSetElements.map(_ref4 => {
+    let {
+      dataElement
+    } = _ref4;
+    return /*#__PURE__*/React.createElement("li", {
+      key: dataElement.id,
+      className: `jsx-${styles.__hash}`
+    }, dataElement.displayName);
+  }))))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Indicators')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, (data === null || data === void 0 ? void 0 : data.dataSet.indicators.length) === 1 ? data.dataSet.indicators[0].displayName : (data === null || data === void 0 ? void 0 : data.dataSet.indicators.length) > 1 ? /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "content-wrap"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: `jsx-${styles.__hash}`
+  }, data.dataSet.indicators.map(_ref5 => {
+    let {
+      id,
+      displayName
+    } = _ref5;
+    return /*#__PURE__*/React.createElement("li", {
+      key: id,
+      className: `jsx-${styles.__hash}`
+    }, displayName);
+  }))) : /*#__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('Expiry days')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data === null || data === void 0 ? void 0 : data.dataSet.expiryDays))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+DataSetInfo.propTypes = {
+  displayNameProp: PropTypes.string,
+  id: PropTypes.string,
+  type: PropTypes.string
+};

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

@@ -0,0 +1,103 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataQuery } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../../../locales/index.js';
+import { DIMENSION_TYPE_PROGRAM_DATA_ELEMENT } from '../../../modules/dataTypes.js';
+import { valueTypeDisplayNames } from '../../../modules/valueTypes.js';
+import { getCommonFields, renderLegendSets, InfoTable } from './InfoTable.js';
+import styles from './styles/InfoPopover.style.js';
+const programDataElementQuery = {
+  programDataElement: {
+    resource: 'dataElements',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: _ref2 => {
+      let {
+        displayNameProp
+      } = _ref2;
+      return {
+        fields: `${getCommonFields(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionsSet[displayName],valueType,zeroIsSignificant`
+      };
+    }
+  }
+};
+const programAttributeQuery = {
+  programAttribute: {
+    resource: 'trackedEntityAttributes',
+    id: _ref3 => {
+      let {
+        id
+      } = _ref3;
+      return id;
+    },
+    params: _ref4 => {
+      let {
+        displayNameProp
+      } = _ref4;
+      return {
+        fields: `${getCommonFields(displayNameProp)},aggregationType,dimensionItemType,legendSets[id,displayName],optionsSet[displayName],valueType,zeroIsSignificant`
+      };
+    }
+  }
+};
+export const EventDataItemInfo = _ref5 => {
+  let {
+    type,
+    id,
+    displayNameProp
+  } = _ref5;
+  const {
+    loading,
+    error,
+    data
+  } = useDataQuery(type === DIMENSION_TYPE_PROGRAM_DATA_ELEMENT ? programDataElementQuery : programAttributeQuery, {
+    // strip program id (if present)
+    variables: {
+      id: id.split('.').reverse()[0],
+      displayNameProp
+    }
+  });
+  const renderInfoTable = data => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfoTable, {
+    dataType: type,
+    data: data,
+    loading: loading,
+    error: error
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Type')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, type === DIMENSION_TYPE_PROGRAM_DATA_ELEMENT ? i18n.t('Data element') : i18n.t('Tracked entity attribute'))), /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("th", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Value type')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, valueTypeDisplayNames[data === null || data === void 0 ? void 0 : data.valueType])), (data === null || data === void 0 ? void 0 : data.optionSet) && /*#__PURE__*/React.createElement("tr", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, i18n.t('Option set')), /*#__PURE__*/React.createElement("td", {
+    className: `jsx-${styles.__hash}`
+  }, data.optionSet.displayName)), Boolean(data === null || data === void 0 ? void 0 : data.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.legendSets)))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+  return type === DIMENSION_TYPE_PROGRAM_DATA_ELEMENT ? renderInfoTable(data === null || data === void 0 ? void 0 : data.programDataElement) : renderInfoTable(data === null || data === void 0 ? void 0 : data.programAttribute);
+};
+EventDataItemInfo.propTypes = {
+  displayNameProp: PropTypes.string,
+  id: PropTypes.string,
+  type: PropTypes.string
+};

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
+};