@hisptz/dhis2-analytics 1.0.9 → 1.0.11

package/build/es/components/PivotTable/components/PivotTableColumnHeaderCell.js

@@ -0,0 +1,62 @@
+// @ts-nocheck
+import React from 'react';
+import { PivotTableCell } from './PivotTableCell';
+import { usePivotTableEngine } from './PivotTableEngineContext';
+import { PivotTableHeaderCell } from './PivotTableHeaderCell';
+export const PivotTableColumnHeaderCell = _ref => {
+  var _engine$adaptiveClipp;
+  let {
+    clippingResult,
+    index,
+    level,
+    onSortByColumn,
+    sortBy
+  } = _ref;
+  const engine = usePivotTableEngine();
+  if (!engine) {
+    return null;
+  }
+  const width = (_engine$adaptiveClipp = engine.adaptiveClippingController.columns.sizes[engine.columnMap[index]]) === null || _engine$adaptiveClipp === void 0 ? void 0 : _engine$adaptiveClipp.size;
+  const height = engine.adaptiveClippingController.rows.headerSizes[level];
+  return /*#__PURE__*/React.createElement(PivotTableHeaderCell, {
+    axisClippingResult: clippingResult.columns,
+    index: index,
+    level: level,
+    getHeader: idx => engine.getColumnHeader(idx),
+    showHierarchy: engine.visualization.showHierarchy,
+    render: header => {
+      const isSortable = level === engine.columnDepth - 1 && header.span === 1 && engine.isSortable(index);
+      const style = {
+        cursor: isSortable ? "pointer" : "default",
+        width,
+        height,
+        whiteSpace: level === engine.columnDepth - 1 ? "pre-line" : "nowrap"
+      };
+      if (engine.options.fixColumnHeaders) {
+        style.top = level * (engine.fontSize + engine.cellPadding * 2 + 2);
+        // left value for the column header cells should be sum of row headers' width when engine.options.fixRowHeaders is true
+        style.left = engine.options.fixRowHeaders ? engine.rowHeaderPixelWidth : 0;
+      }
+      return /*#__PURE__*/React.createElement(PivotTableCell, {
+        index: index,
+        isSortable: isSortable,
+        sortOrder: sortBy,
+        onSortClick: isSortable ? () => onSortByColumn(index) : undefined,
+        isHeader: true,
+        classes: [header.label && header.label !== "Total" && header.label !== "Subtotal" // TODO: Actually look up the column type!
+        ? "column-header" : "empty-header", {
+          "fixed-header": engine.options.fixColumnHeaders
+        }],
+        colSpan: header.span,
+        title: header.label,
+        style: style,
+        onClick: isSortable ? () => onSortByColumn(index) : undefined
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "column-header-inner"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "column-header-label",
+        "data-test": "visualization-column-header"
+      }, header.label)));
+    }
+  });
+};

package/build/es/components/PivotTable/components/PivotTableColumnHeaders.js

@@ -0,0 +1,52 @@
+import times from 'lodash/times';
+import React from 'react';
+import { PivotTableClippedAxis } from './PivotTableClippedAxis';
+import { PivotTableColumnHeaderCell } from './PivotTableColumnHeaderCell';
+import { PivotTableDimensionLabelCell } from './PivotTableDimensionLabelCell';
+import { PivotTableEmptyCell } from './PivotTableEmptyCell';
+import { usePivotTableEngine } from './PivotTableEngineContext';
+export const PivotTableColumnHeaders = _ref => {
+  let {
+    clippingResult,
+    onSortByColumn,
+    sortBy
+  } = _ref;
+  const engine = usePivotTableEngine();
+  if (!engine) {
+    return null;
+  }
+  const columns = times(engine.columnDepth, x => x);
+  const rows = times(engine.rowDepth, x => x);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(columnLevel => /*#__PURE__*/React.createElement("tr", {
+    key: columnLevel
+  }, rows.map(rowLevel => /*#__PURE__*/React.createElement(PivotTableDimensionLabelCell, {
+    key: rowLevel,
+    rowLevel: rowLevel,
+    columnLevel: columnLevel
+  })), /*#__PURE__*/React.createElement(PivotTableClippedAxis, {
+    axisClippingResult: clippingResult.columns,
+    EmptyComponent: _ref2 => {
+      let {
+        size
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(PivotTableEmptyCell, {
+        classes: "column-header",
+        style: {
+          minWidth: size
+        }
+      });
+    },
+    ItemComponent: _ref3 => {
+      let {
+        index
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(PivotTableColumnHeaderCell, {
+        clippingResult: clippingResult,
+        index: index,
+        level: columnLevel,
+        onSortByColumn: onSortByColumn,
+        sortBy: sortBy
+      });
+    }
+  }))));
+};

package/build/es/components/PivotTable/components/PivotTableContainer.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { usePivotTableEngine } from './PivotTableEngineContext';
+import { DataTable } from '@dhis2/ui';
+export const PivotTableContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    width,
+    height,
+    children,
+    tableProps
+  } = _ref;
+  const engine = usePivotTableEngine();
+  if (!engine) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pivot-table-container",
+    style: {
+      width,
+      height
+    },
+    ref: ref,
+    "data-test": "visualization-container"
+  }, width === 0 || height === 0 ? null : /*#__PURE__*/React.createElement(DataTable, tableProps !== null && tableProps !== void 0 ? tableProps : {}, children));
+});
+PivotTableContainer.displayName = "PivotTableContainer";

package/build/es/components/PivotTable/components/PivotTableDimensionLabelCell.js

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import PropTypes from 'prop-types';
+import React from 'react';
+import { PivotTableCell } from './PivotTableCell';
+import { usePivotTableEngine } from './PivotTableEngineContext';
+export const PivotTableDimensionLabelCell = _ref => {
+  let {
+    rowLevel,
+    columnLevel
+  } = _ref;
+  const engine = usePivotTableEngine();
+  if (!engine) {
+    return null;
+  }
+  const colCount = engine.rowDepth;
+  const rowCount = engine.columnDepth;
+  let colSpan = 1,
+    rowSpan = 1,
+    label;
+  if (!engine.visualization.showDimensionLabels) {
+    if (rowLevel > 0 || columnLevel > 0) {
+      colSpan = rowSpan = 0;
+    } else {
+      colSpan = colCount;
+      rowSpan = rowCount;
+    }
+  } else {
+    label = engine.getDimensionLabel(rowLevel, columnLevel);
+    if (!label) {
+      if (rowLevel > 0 || columnLevel > 0) {
+        colSpan = rowSpan = 0;
+      } else {
+        colSpan = colCount - 1;
+        rowSpan = rowCount - 1;
+      }
+    }
+  }
+  if (!colSpan || !rowSpan) {
+    return null;
+  }
+  const width = engine.adaptiveClippingController.columns.headerSizes[rowLevel];
+  const height = engine.adaptiveClippingController.rows.headerSizes[columnLevel];
+  const style = {
+    width,
+    height
+  };
+  if (engine.options.fixColumnHeaders || engine.options.fixRowHeaders) {
+    style.zIndex = engine.options.fixColumnHeaders && engine.options.fixRowHeaders ? 2 : 1;
+    style.top = engine.options.fixColumnHeaders ? columnLevel * (engine.fontSize + engine.cellPadding * 2 + 2) : 0;
+    style.left = engine.options.fixRowHeaders ?
+    // calculate the width of all row header cells on the left of current cell
+    engine.adaptiveClippingController.columns.headerSizes.slice(0, rowLevel).reduce((width, acc) => acc += width, 0) : 0;
+  }
+  return /*#__PURE__*/React.createElement(PivotTableCell, {
+    isHeader: true,
+    classes: ["empty-header", "column-header", {
+      "fixed-header": engine.options.fixColumnHeaders || engine.options.fixRowHeaders
+    }],
+    colSpan: colSpan,
+    rowSpan: rowSpan,
+    title: label,
+    style: style
+  }, label);
+};
+PivotTableDimensionLabelCell.propTypes = {
+  columnLevel: PropTypes.number.isRequired,
+  rowLevel: PropTypes.number.isRequired
+};

package/build/es/components/PivotTable/components/PivotTableEmptyCell.js

@@ -0,0 +1,14 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { PivotTableCell } from './PivotTableCell';
+export const PivotTableEmptyCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    onClick,
+    classes,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(PivotTableCell, _extends({
+    ref: ref
+  }, props));
+});
+PivotTableEmptyCell.displayName = "PivotTableEmptyCell";

package/build/es/components/PivotTable/components/PivotTableEmptyRow.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PivotTableCell } from './PivotTableCell';
+import { usePivotTableEngine } from './PivotTableEngineContext';
+export const PivotTableEmptyRow = _ref => {
+  let {
+    height,
+    columns
+  } = _ref;
+  const engine = usePivotTableEngine();
+  if (!engine) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(PivotTableCell, {
+    isHeader: true,
+    colSpan: engine.rowDepth,
+    style: {
+      height
+    },
+    classes: ["row-header", {
+      "fixed-header": engine.options.fixRowHeaders
+    }]
+  }), columns.map(i => /*#__PURE__*/React.createElement(PivotTableCell, {
+    key: i
+  })));
+};

package/build/es/components/PivotTable/components/PivotTableEngineContext.js

@@ -0,0 +1,14 @@
+import React, { createContext, useContext } from 'react';
+export const PivotTableEngineContext = /*#__PURE__*/createContext(null);
+export const Provider = _ref => {
+  let {
+    engine,
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(PivotTableEngineContext.Provider, {
+    value: engine
+  }, children);
+};
+export const usePivotTableEngine = () => {
+  return useContext(PivotTableEngineContext);
+};

package/build/es/components/PivotTable/components/PivotTableHead.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { PivotTableColumnHeaders } from './PivotTableColumnHeaders.js';
+import { PivotTableTitleRows } from './PivotTableTitleRows';
+import { TableHead } from '@dhis2/ui';
+export const PivotTableHead = _ref => {
+  let {
+    clippingResult,
+    width,
+    sortBy,
+    onSortByColumn
+  } = _ref;
+  return /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(PivotTableTitleRows, {
+    clippingResult: clippingResult,
+    width: width
+  }), /*#__PURE__*/React.createElement(PivotTableColumnHeaders, {
+    clippingResult: clippingResult,
+    sortBy: sortBy,
+    onSortByColumn: onSortByColumn
+  }));
+};
+PivotTableHead.propTypes = {
+  clippingResult: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  onSortByColumn: PropTypes.func.isRequired,
+  sortBy: PropTypes.object
+};

package/build/es/components/PivotTable/components/PivotTableHeaderCell.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { getHeaderForDisplay } from "../utils";
+export const PivotTableHeaderCell = _ref => {
+  let {
+    axisClippingResult,
+    index,
+    level,
+    getHeader,
+    render,
+    showHierarchy
+  } = _ref;
+  const header = getHeaderForDisplay({
+    start: axisClippingResult.indices[0],
+    count: axisClippingResult.indices.length,
+    index,
+    dimensionLevel: level,
+    getHeader,
+    showHierarchy
+  });
+  return !header ? null : render(header);
+};
+PivotTableHeaderCell.propTypes = {
+  axisClippingResult: PropTypes.object.isRequired,
+  getHeader: PropTypes.func.isRequired,
+  index: PropTypes.number.isRequired,
+  level: PropTypes.number.isRequired,
+  render: PropTypes.func.isRequired,
+  showHierarchy: PropTypes.bool.isRequired
+};

package/build/es/components/PivotTable/components/PivotTableRow.js

@@ -0,0 +1,57 @@
+import times from 'lodash/times';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { PivotTableClippedAxis } from './PivotTableClippedAxis.js';
+import { PivotTableEmptyCell } from './PivotTableEmptyCell';
+import { usePivotTableEngine } from './PivotTableEngineContext';
+import { PivotTableRowHeaderCell } from './PivotTableRowHeaderCell.js';
+import { PivotTableValueCell } from './PivotTableValueCell';
+import { DataTableRow } from '@dhis2/ui';
+export const PivotTableRow = _ref => {
+  let {
+    clippingResult,
+    rowIndex,
+    onToggleContextualMenu
+  } = _ref;
+  const engine = usePivotTableEngine();
+  if (!engine) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(DataTableRow, null, times(engine.rowDepth, x => x).map(rowLevel => /*#__PURE__*/React.createElement(PivotTableRowHeaderCell, {
+    key: rowLevel,
+    clippingResult: clippingResult,
+    rowIndex: rowIndex,
+    rowLevel: rowLevel
+  })), /*#__PURE__*/React.createElement(PivotTableClippedAxis, {
+    axisClippingResult: clippingResult.columns,
+    EmptyComponent: _ref2 => {
+      let {
+        size
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(PivotTableEmptyCell, {
+        classes: "value",
+        style: {
+          width: size
+        }
+      });
+    },
+    ItemComponent: _ref3 => {
+      let {
+        index: columnIndex
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(PivotTableValueCell, {
+        row: rowIndex,
+        column: columnIndex,
+        onToggleContextualMenu: onToggleContextualMenu
+      });
+    }
+  }));
+};
+PivotTableRow.propTypes = {
+  clippingResult: PropTypes.shape({
+    columns: PropTypes.object.isRequired,
+    rows: PropTypes.object.isRequired
+  }).isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  onToggleContextualMenu: PropTypes.func
+};

package/build/es/components/PivotTable/components/PivotTableRowHeaderCell.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { PivotTableCell } from './PivotTableCell';
+import { usePivotTableEngine } from './PivotTableEngineContext';
+import { PivotTableHeaderCell } from './PivotTableHeaderCell.js';
+export const PivotTableRowHeaderCell = _ref => {
+  var _engine$adaptiveClipp;
+  let {
+    clippingResult,
+    rowIndex,
+    rowLevel
+  } = _ref;
+  const engine = usePivotTableEngine();
+  if (!engine) {
+    return null;
+  }
+  const width = engine.adaptiveClippingController.columns.headerSizes[rowLevel];
+  const height = (_engine$adaptiveClipp = engine.adaptiveClippingController.rows.sizes[engine.rowMap[rowIndex]]) === null || _engine$adaptiveClipp === void 0 ? void 0 : _engine$adaptiveClipp.size;
+  return /*#__PURE__*/React.createElement(PivotTableHeaderCell, {
+    axisClippingResult: clippingResult.rows,
+    index: rowIndex,
+    level: rowLevel,
+    getHeader: idx => engine.getRowHeader(idx),
+    showHierarchy: engine.visualization.showHierarchy,
+    render: header => /*#__PURE__*/React.createElement(PivotTableCell, {
+      isHeader: true,
+      classes: [header.label && header.label !== "Total" && header.label !== "Subtotal" ? "row-header" : "empty-header", header.includesHierarchy && "row-header-hierarchy", {
+        "fixed-header": engine.options.fixRowHeaders
+      }],
+      rowSpan: header.span,
+      title: header.label,
+      style: {
+        width,
+        height,
+        left: rowLevel > 0 ?
+        // calculate the width of all row header cells on the left of current cell
+        engine.adaptiveClippingController.columns.headerSizes.slice(0, rowLevel).reduce((width, acc) => acc += width, 0) : 0
+      },
+      dataTest: "visualization-row-header"
+    }, header.label)
+  });
+};

package/build/es/components/PivotTable/components/PivotTableTitleRow.js

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { PivotTableCell } from './PivotTableCell';
+import { usePivotTableEngine } from './PivotTableEngineContext';
+import { DataTableRow } from '@dhis2/ui';
+export const PivotTableTitleRow = _ref => {
+  let {
+    title,
+    scrollPosition,
+    containerWidth,
+    totalWidth
+  } = _ref;
+  const engine = usePivotTableEngine();
+  if (!engine) {
+    return null;
+  }
+  const columnCount = engine.width + engine.rowDepth;
+  const [position, setPosition] = useState(scrollPosition.x);
+  useEffect(() => {
+    setPosition(Math.max(0, Math.min(scrollPosition.x, totalWidth - containerWidth)));
+  }, [containerWidth, scrollPosition.x, totalWidth]);
+  return /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(PivotTableCell, {
+    isHeader: true,
+    classes: ["column-header", "title"],
+    colSpan: columnCount
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: position,
+      maxWidth: containerWidth,
+      textAlign: "center"
+    },
+    "data-test": "visualization-title"
+  }, title)));
+};
+PivotTableTitleRow.propTypes = {
+  containerWidth: PropTypes.number.isRequired,
+  scrollPosition: PropTypes.shape({
+    x: PropTypes.number.isRequired
+  }).isRequired,
+  title: PropTypes.string.isRequired,
+  totalWidth: PropTypes.number.isRequired
+};

package/build/es/components/PivotTable/components/PivotTableTitleRows.js

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import PropTypes from 'prop-types';
+import React from 'react';
+import { getFilterText } from '../utils';
+import { usePivotTableEngine } from './PivotTableEngineContext';
+import { PivotTableTitleRow } from './PivotTableTitleRow.js';
+export const PivotTableTitleRows = _ref => {
+  var _engine$visualization, _engine$visualization2, _engine$visualization3;
+  let {
+    clippingResult,
+    width
+  } = _ref;
+  const engine = usePivotTableEngine();
+  if (!engine) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, engine.options.title ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
+    title: engine.options.title,
+    scrollPosition: clippingResult.scrollPosition,
+    containerWidth: width,
+    totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
+  }) : null, engine.options.subtitle ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
+    title: engine.options.subtitle,
+    scrollPosition: clippingResult.scrollPosition,
+    containerWidth: width,
+    totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
+  }) : null, (_engine$visualization = engine.visualization) !== null && _engine$visualization !== void 0 && (_engine$visualization2 = _engine$visualization.filters) !== null && _engine$visualization2 !== void 0 && _engine$visualization2.length ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
+    title: getFilterText((_engine$visualization3 = engine.visualization) === null || _engine$visualization3 === void 0 ? void 0 : _engine$visualization3.filters, engine.rawData.metaData),
+    scrollPosition: clippingResult.scrollPosition,
+    containerWidth: width,
+    totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
+  }) : null);
+};
+PivotTableTitleRows.propTypes = {
+  clippingResult: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired
+};

package/build/es/components/PivotTable/components/PivotTableValueCell.js

@@ -0,0 +1,60 @@
+import React, { useRef } from 'react';
+import { applyLegendSet } from '../utils';
+import { CELL_TYPE_VALUE } from '../constants/pivotTable';
+import { VALUE_TYPE_NUMBER } from '../constants/valueTypes.js';
+import { PivotTableCell } from './PivotTableCell.js';
+import { PivotTableEmptyCell } from './PivotTableEmptyCell';
+import { usePivotTableEngine } from './PivotTableEngineContext.js';
+export const PivotTableValueCell = _ref => {
+  var _cellContent$rendered;
+  let {
+    row,
+    column,
+    onToggleContextualMenu
+  } = _ref;
+  const engine = usePivotTableEngine();
+  const cellRef = useRef(null);
+  if (!engine) {
+    return null;
+  }
+  const cellContent = engine.get({
+    row,
+    column
+  });
+  const isClickable = !!cellContent && onToggleContextualMenu && cellContent.cellType === CELL_TYPE_VALUE && cellContent.ouId;
+  const classes = !!cellContent ? [cellContent.cellType, cellContent.valueType, isClickable && 'clickable'] : [];
+  const onClick = () => {
+    if (onToggleContextualMenu) {
+      onToggleContextualMenu(cellRef.current, {
+        ouId: cellContent === null || cellContent === void 0 ? void 0 : cellContent.ouId
+      });
+    }
+  };
+  if (!cellContent || cellContent.empty) {
+    return /*#__PURE__*/React.createElement(PivotTableEmptyCell, {
+      onClick: isClickable ? onClick : undefined,
+      ref: cellRef,
+      classes: [cellContent === null || cellContent === void 0 ? void 0 : cellContent.cellType, isClickable && 'clickable']
+    });
+  }
+
+  // TODO: Add support for 'INTEGER' type (requires server changes)
+  const legendStyle = cellContent.cellType === CELL_TYPE_VALUE && cellContent.valueType === VALUE_TYPE_NUMBER ? applyLegendSet(cellContent.rawValue, cellContent.dxDimension, engine) : undefined;
+  const width = engine.adaptiveClippingController.columns.sizes[engine.columnMap[column]].size;
+  const height = engine.adaptiveClippingController.rows.sizes[engine.rowMap[row]].size;
+  const style = {
+    ...legendStyle,
+    width,
+    height,
+    whiteSpace: 'pre-line'
+  };
+  return /*#__PURE__*/React.createElement(PivotTableCell, {
+    key: column,
+    classes: classes,
+    title: cellContent.renderedValue,
+    style: style,
+    onClick: isClickable ? onClick : undefined,
+    ref: cellRef,
+    dataTest: 'visualization-value-cell'
+  }, (_cellContent$rendered = cellContent.renderedValue) !== null && _cellContent$rendered !== void 0 ? _cellContent$rendered : null);
+};

package/build/es/components/PivotTable/constants/dataTypes.js

@@ -0,0 +1,98 @@
+// @ts-nocheck
+
+import i18n from '@dhis2/d2-i18n';
+export const DIMENSION_TYPE_ALL = 'ALL';
+export const DIMENSION_TYPE_INDICATOR = 'INDICATOR';
+export const DIMENSION_TYPE_DATA_ELEMENT = 'DATA_ELEMENT';
+export const DIMENSION_TYPE_DATA_SET = 'DATA_SET';
+export const DIMENSION_TYPE_EVENT_DATA_ITEM = 'EVENT_DATA_ITEM';
+export const DIMENSION_TYPE_PROGRAM_INDICATOR = 'PROGRAM_INDICATOR';
+export const DIMENSION_TYPE_PROGRAM_DATA_ELEMENT = 'PROGRAM_DATA_ELEMENT';
+export const DIMENSION_TYPE_PROGRAM_ATTRIBUTE = 'PROGRAM_ATTRIBUTE';
+export const DIMENSION_TYPE_DATA_ELEMENT_OPERAND = 'DATA_ELEMENT_OPERAND';
+export const DIMENSION_TYPE_CATEGORY = 'CATEGORY';
+export const DIMENSION_TYPE_CATEGORY_OPTION_GROUP_SET = 'CATEGORY_OPTION_GROUP_SET';
+export const DIMENSION_TYPE_DATA_ELEMENT_GROUP_SET = 'DATA_ELEMENT_GROUP_SET';
+export const DIMENSION_TYPE_DATA = 'DATA_X';
+export const DIMENSION_TYPE_PERIOD = 'PERIOD';
+export const DIMENSION_TYPE_ORGANISATION_UNIT = 'ORGANISATION_UNIT';
+export const DIMENSION_TYPE_ORGANISATION_UNIT_GROUP_SET = 'ORGANISATION_UNIT_GROUP_SET';
+export const TOTALS = 'totals';
+export const DETAIL = 'detail';
+export const SUB_GROUP_DETAIL = 'DETAIL';
+export const SUB_GROUP_METRIC = 'METRIC';
+const getProgramText = () => i18n.t('Program');
+const getSelectProgramText = () => i18n.t('Select a program');
+export const dataTypeMap = {
+  [DIMENSION_TYPE_INDICATOR]: {
+    id: DIMENSION_TYPE_INDICATOR,
+    getName: () => i18n.t('Indicators'),
+    getGroupLabel: () => i18n.t('Indicator group'),
+    defaultGroup: {
+      id: DIMENSION_TYPE_ALL,
+      getName: () => i18n.t('All groups')
+    },
+    getItemName: () => i18n.t('Indicator'),
+    getGroupEmptyLabel: () => i18n.t('No indicator groups found'),
+    getGroupLoadingLabel: () => i18n.t('Loading indicator groups')
+  },
+  [DIMENSION_TYPE_DATA_ELEMENT]: {
+    id: DIMENSION_TYPE_DATA_ELEMENT,
+    getName: () => i18n.t('Data elements'),
+    getGroupLabel: () => i18n.t('Data element group'),
+    defaultGroup: {
+      id: DIMENSION_TYPE_ALL,
+      getName: () => i18n.t('All groups')
+    },
+    subGroup: SUB_GROUP_DETAIL,
+    getItemName: () => i18n.t('Data element'),
+    getGroupEmptyLabel: () => i18n.t('No data element groups found'),
+    getGroupLoadingLabel: () => i18n.t('Loading data element groups')
+  },
+  [DIMENSION_TYPE_DATA_SET]: {
+    id: DIMENSION_TYPE_DATA_SET,
+    getName: () => i18n.t('Data sets'),
+    getGroupLabel: () => i18n.t('Data set'),
+    defaultGroup: {
+      id: DIMENSION_TYPE_ALL,
+      getName: () => i18n.t('All data sets')
+    },
+    subGroup: SUB_GROUP_METRIC,
+    getItemName: () => i18n.t('Data set'),
+    getGroupEmptyLabel: () => i18n.t('No data sets found'),
+    getGroupLoadingLabel: () => i18n.t('Loading data sets')
+  },
+  [DIMENSION_TYPE_EVENT_DATA_ITEM]: {
+    id: DIMENSION_TYPE_EVENT_DATA_ITEM,
+    getName: () => i18n.t('Event data items'),
+    getGroupLabel: getProgramText,
+    getPlaceholder: getSelectProgramText,
+    defaultGroup: {
+      id: DIMENSION_TYPE_ALL,
+      getName: () => i18n.t('All programs')
+    },
+    getItemName: () => i18n.t('Event data item'),
+    getGroupEmptyLabel: () => i18n.t('No programs found'),
+    getGroupLoadingLabel: () => i18n.t('Loading programs')
+  },
+  [DIMENSION_TYPE_PROGRAM_INDICATOR]: {
+    id: DIMENSION_TYPE_PROGRAM_INDICATOR,
+    getName: () => i18n.t('Program indicators'),
+    getGroupLabel: getProgramText,
+    getPlaceholder: getSelectProgramText,
+    defaultGroup: {
+      id: DIMENSION_TYPE_ALL,
+      getName: () => i18n.t('All programs')
+    },
+    getItemName: () => i18n.t('Program indicator'),
+    getGroupEmptyLabel: () => i18n.t('No programs found'),
+    getGroupLoadingLabel: () => i18n.t('Loading programs')
+  }
+};
+export function defaultGroupId(dataType) {
+  return dataTypeMap[dataType].defaultGroup ? dataTypeMap[dataType].defaultGroup.id : '';
+}
+export function defaultGroupDetail(dataType) {
+  return dataTypeMap[dataType].groupDetail ? dataTypeMap[dataType].groupDetail.default : '';
+}
+export const DEFAULT_DATATYPE_ID = DIMENSION_TYPE_INDICATOR;