@hisptz/dhis2-analytics 1.0.11 → 1.0.12

package/build/cjs/components/CustomPivotTable/CustomPivotTable.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithManyData = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+var _largeTableData = _interopRequireDefault(require("../../../data/large-table-data.json"));
+var _simpleData = _interopRequireDefault(require("../../../data/simple-data.json"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Template = args => /*#__PURE__*/_react.default.createElement(_.CustomPivotTable, args);
+const Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  analytics: _simpleData.default,
+  config: {
+    layout: {
+      columns: [{
+        dimension: "ou"
+      }, {
+        dimension: "pe",
+        label: "Period"
+      }],
+      rows: [{
+        dimension: "dx",
+        label: "Services"
+      }],
+      filter: []
+    },
+    options: {}
+  },
+  tableProps: {}
+};
+const WithManyData = Template.bind({});
+exports.WithManyData = WithManyData;
+WithManyData.args = {
+  analytics: _largeTableData.default,
+  config: {
+    layout: {
+      columns: [{
+        dimension: "dx"
+      }, {
+        dimension: "J5jldMd8OHv",
+        label: "Facility Type"
+      }],
+      rows: [{
+        dimension: "pe",
+        label: "Period"
+      }, {
+        dimension: "ou",
+        label: "Organisation unit"
+      }],
+      filter: []
+    },
+    options: {
+      fixColumnHeaders: false
+    }
+  },
+  tableProps: {
+    scrollHeight: "800px",
+    scrollWidth: "1400px"
+  }
+};
+var _default = {
+  title: "Analytics/Pivot table",
+  component: _.CustomPivotTable
+};
+exports.default = _default;

package/build/cjs/components/CustomPivotTable/components/Table/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PivotTable = PivotTable;
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@dhis2/ui");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function PivotTable(_ref) {
+  let {
+    tableProps,
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_ui.DataTable, tableProps !== null && tableProps !== void 0 ? tableProps : {}, children);
+}

package/build/cjs/components/CustomPivotTable/components/TableBody/TableBody.module.css

@@ -0,0 +1,12 @@
+.nested-table-cell {
+    padding: 0 !important;
+}
+
+.nested-table {
+    margin: 0;
+    padding: 0;
+}
+
+.header-cell {
+    border-right: 1px solid rgb(232, 237, 242) !important;
+}

package/build/cjs/components/CustomPivotTable/components/TableBody/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomPivotTableBody = CustomPivotTableBody;
+var _lodash = require("lodash");
+var _engine = require("../../state/engine");
+var _ui = require("@dhis2/ui");
+var _react = _interopRequireWildcard(require("react"));
+var _TableBodyModule = _interopRequireDefault(require("./TableBody.module.css"));
+var _usehooksTs = require("usehooks-ts");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function DataRowRenderer(_ref) {
+  let {
+    mapper,
+    item,
+    dimension
+  } = _ref;
+  const engine = (0, _engine.useCustomPivotTableEngine)();
+  const columnMappers = engine === null || engine === void 0 ? void 0 : engine.columnMap;
+  const completeMapper = columnMappers === null || columnMappers === void 0 ? void 0 : columnMappers.map(map => ({
+    ...map,
+    ...mapper,
+    [dimension]: item.uid
+  }));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, completeMapper === null || completeMapper === void 0 ? void 0 : completeMapper.map(mapper => {
+    var _engine$getValue;
+    return /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, {
+      key: `${Object.values(mapper).join('-')}-value`,
+      align: "center",
+      bordered: true
+    }, (_engine$getValue = engine === null || engine === void 0 ? void 0 : engine.getValue(mapper)) !== null && _engine$getValue !== void 0 ? _engine$getValue : '');
+  }));
+}
+function RowRenderer(_ref2) {
+  var _row$items;
+  let {
+    row,
+    index,
+    config: {
+      rows,
+      columns,
+      mapper,
+      prevWidth,
+      fixRowHeaders
+    }
+  } = _ref2;
+  const [cellRef, {
+    width
+  }] = (0, _usehooksTs.useElementSize)();
+  const rowSpan = (0, _lodash.slice)(rows, index + 1).reduce((acc, column) => {
+    var _column$items$length, _column$items;
+    return acc * ((_column$items$length = (_column$items = column.items) === null || _column$items === void 0 ? void 0 : _column$items.length) !== null && _column$items$length !== void 0 ? _column$items$length : 1);
+  }, 1);
+  const hasSubRows = !(0, _lodash.isEmpty)(rows[index + 1]);
+  const nextRow = rows[index + 1];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, row === null || row === void 0 ? void 0 : (_row$items = row.items) === null || _row$items === void 0 ? void 0 : _row$items.map(item => {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: `${item.name}-${row.dimension}-fragment`
+    }, /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, {
+      key: `${item.name}-${row.dimension}-row`
+    }, /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, {
+      ref: cellRef,
+      fixed: fixRowHeaders,
+      left: `${prevWidth}px`,
+      className: _TableBodyModule.default['header-cell'],
+      tag: "th",
+      bordered: true,
+      rowSpan: (rowSpan + (hasSubRows ? 1 : 0)).toString()
+    }, item.name), !hasSubRows ? /*#__PURE__*/_react.default.createElement(DataRowRenderer, {
+      dimension: row.dimension,
+      mapper: mapper,
+      item: item
+    }) : null), hasSubRows ? /*#__PURE__*/_react.default.createElement(RowRenderer, {
+      row: nextRow,
+      index: index + 1,
+      config: {
+        rows,
+        columns,
+        prevWidth: width,
+        mapper: {
+          ...mapper,
+          [row.dimension]: item.uid
+        }
+      }
+    }) : null);
+  }));
+}
+function CustomPivotTableBody() {
+  const engine = (0, _engine.useCustomPivotTableEngine)();
+  const rows = engine === null || engine === void 0 ? void 0 : engine.rowHeaders;
+  const columns = engine === null || engine === void 0 ? void 0 : engine.columnHeaders;
+  const fixRowHeaders = engine === null || engine === void 0 ? void 0 : engine.fixRowHeaders;
+  if (!rows || (0, _lodash.isEmpty)(rows)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_ui.TableBody, null, /*#__PURE__*/_react.default.createElement(RowRenderer, {
+    row: rows[0],
+    index: 0,
+    config: {
+      rows,
+      columns,
+      fixRowHeaders
+    }
+  }));
+}

package/build/cjs/components/CustomPivotTable/components/TableHeaders/TableHeaders.module.css

@@ -0,0 +1,10 @@
+.table-header{
+    border-right: 1px solid rgb(232, 237, 242);
+}
+.table-header:last-child{
+    border-right: none;
+}
+
+.table-header > span > span{
+    justify-content: center;
+}

package/build/cjs/components/CustomPivotTable/components/TableHeaders/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableHeaders = TableHeaders;
+var _react = _interopRequireDefault(require("react"));
+var _engine = require("../../state/engine");
+var _ui = require("@dhis2/ui");
+var _lodash = require("lodash");
+var _TableHeadersModule = _interopRequireDefault(require("./TableHeaders.module.css"));
+var _usehooksTs = require("usehooks-ts");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ColumnRenderer(_ref) {
+  let {
+    column,
+    index,
+    config: {
+      fixColumnHeaders,
+      rowHeaders,
+      prevHeight = 0,
+      columns
+    }
+  } = _ref;
+  const [columnHeaderRef, {
+    height
+  }] = (0, _usehooksTs.useElementSize)();
+  if (!column) {
+    return null;
+  }
+  const colSpan = (0, _lodash.slice)(columns, index + 1).reduce((acc, column) => {
+    var _column$items$length, _column$items;
+    return acc * ((_column$items$length = (_column$items = column.items) === null || _column$items === void 0 ? void 0 : _column$items.length) !== null && _column$items$length !== void 0 ? _column$items$length : 1);
+  }, 1);
+  const hasSubColumns = !(0, _lodash.isEmpty)(columns[index + 1]);
+  const nextColumn = columns[index + 1];
+  const multiplicationFactor = (0, _lodash.slice)(columns, 0, index).reduce((acc, column) => {
+    var _column$items$length2, _column$items2;
+    return acc * ((_column$items$length2 = (_column$items2 = column.items) === null || _column$items2 === void 0 ? void 0 : _column$items2.length) !== null && _column$items$length2 !== void 0 ? _column$items$length2 : 1);
+  }, 1);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, null, index === 0 && (rowHeaders === null || rowHeaders === void 0 ? void 0 : rowHeaders.map(header => {
+    var _header$label;
+    return /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, {
+      fixed: fixColumnHeaders,
+      top: "0",
+      className: _TableHeadersModule.default['table-header'],
+      rowSpan: columns.length.toString(),
+      key: `${header.dimension}-header-column`
+    }, (_header$label = header.label) !== null && _header$label !== void 0 ? _header$label : "");
+  })), (0, _lodash.times)(multiplicationFactor, colNo => {
+    var _column$items3;
+    return (_column$items3 = column.items) === null || _column$items3 === void 0 ? void 0 : _column$items3.map(item => /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, {
+      fixed: fixColumnHeaders,
+      top: `${prevHeight.toString()}px`,
+      ref: index === 0 ? columnHeaderRef : undefined,
+      className: _TableHeadersModule.default['table-header'],
+      align: "center",
+      colSpan: colSpan.toString(),
+      key: `${colNo}-${item.name}-column-header`
+    }, item.name));
+  })), hasSubColumns ? /*#__PURE__*/_react.default.createElement(ColumnRenderer, {
+    column: nextColumn,
+    index: index + 1,
+    config: {
+      columns,
+      rowHeaders,
+      prevHeight: height,
+      fixColumnHeaders
+    }
+  }) : null);
+}
+function TableHeaders() {
+  const engine = (0, _engine.useCustomPivotTableEngine)();
+  const columns = engine === null || engine === void 0 ? void 0 : engine.columnHeaders;
+  const rowHeaders = engine === null || engine === void 0 ? void 0 : engine.rowHeaders;
+  const fixColumnHeaders = engine === null || engine === void 0 ? void 0 : engine.fixColumnHeaders;
+  if (!columns || (0, _lodash.isEmpty)(columns)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_ui.TableHead, null, /*#__PURE__*/_react.default.createElement(ColumnRenderer, {
+    column: columns[0],
+    index: 0,
+    config: {
+      rowHeaders,
+      columns,
+      fixColumnHeaders
+    }
+  }));
+}

package/build/cjs/components/CustomPivotTable/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomPivotTable = CustomPivotTable;
+var _engine = require("./services/engine");
+var _react = _interopRequireWildcard(require("react"));
+var _engine2 = require("./state/engine");
+var _Table = require("./components/Table");
+var _TableHeaders = require("./components/TableHeaders");
+var _TableBody = require("./components/TableBody");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function CustomPivotTable(_ref) {
+  let {
+    analytics,
+    config,
+    tableProps
+  } = _ref;
+  const engine = (0, _react.useMemo)(() => new _engine.CustomPivotTableEngine({
+    analytics,
+    config
+  }), [analytics, config]);
+  return /*#__PURE__*/_react.default.createElement(_engine2.CustomPivotTableEngineProvider, {
+    engine: engine
+  }, /*#__PURE__*/_react.default.createElement(_Table.PivotTable, {
+    tableProps: tableProps
+  }, /*#__PURE__*/_react.default.createElement(_TableHeaders.TableHeaders, null), /*#__PURE__*/_react.default.createElement(_TableBody.CustomPivotTableBody, null)));
+}

package/build/cjs/components/CustomPivotTable/services/engine.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomPivotTableEngine = void 0;
+var _lodash = require("lodash");
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+class CustomPivotTableEngine {
+  constructor(_ref) {
+    let {
+      analytics,
+      config
+    } = _ref;
+    _defineProperty(this, "analyticsData", void 0);
+    _defineProperty(this, "valueIndex", void 0);
+    _defineProperty(this, "config", void 0);
+    _defineProperty(this, "rowHeaders", void 0);
+    _defineProperty(this, "columnHeaders", void 0);
+    _defineProperty(this, "columnMap", void 0);
+    this.config = config;
+    this.analyticsData = analytics;
+    this.valueIndex = (0, _lodash.findIndex)(this.analyticsData.headers, ['name', 'value']);
+    this.getHeaders();
+    this.getColumnMap();
+  }
+  get fixColumnHeaders() {
+    var _this$config$options$, _this$config$options;
+    return (_this$config$options$ = (_this$config$options = this.config.options) === null || _this$config$options === void 0 ? void 0 : _this$config$options.fixColumnHeaders) !== null && _this$config$options$ !== void 0 ? _this$config$options$ : true;
+  }
+  get fixRowHeaders() {
+    var _this$config$options$2, _this$config$options2;
+    return (_this$config$options$2 = (_this$config$options2 = this.config.options) === null || _this$config$options2 === void 0 ? void 0 : _this$config$options2.fixRowHeaders) !== null && _this$config$options$2 !== void 0 ? _this$config$options$2 : true;
+  }
+  getDimensionItems(dimension) {
+    var _this$analyticsData$m, _this$analyticsData$m2;
+    return (_this$analyticsData$m = (_this$analyticsData$m2 = this.analyticsData.metaData) === null || _this$analyticsData$m2 === void 0 ? void 0 : _this$analyticsData$m2.dimensions[dimension]) !== null && _this$analyticsData$m !== void 0 ? _this$analyticsData$m : [];
+  }
+  getItem(id) {
+    var _this$analyticsData$m3;
+    return (_this$analyticsData$m3 = this.analyticsData.metaData) === null || _this$analyticsData$m3 === void 0 ? void 0 : _this$analyticsData$m3.items[id];
+  }
+  getValue(mapper) {
+    var _this$analyticsData$r;
+    const dimensions = Object.values(mapper);
+    const data = (_this$analyticsData$r = this.analyticsData.rows) === null || _this$analyticsData$r === void 0 ? void 0 : _this$analyticsData$r.filter(row => (0, _lodash.intersection)(row, dimensions).length >= dimensions.length);
+    return data === null || data === void 0 ? void 0 : data.reduce((acc, row) => {
+      return acc + parseFloat(row[this.valueIndex]);
+    }, 0);
+  }
+  getHeaders() {
+    this.rowHeaders = this.config.layout.rows.map(rowConfig => {
+      return {
+        ...rowConfig,
+        items: (0, _lodash.compact)(this.getDimensionItems(rowConfig.dimension).map(itemId => this.getItem(itemId)))
+      };
+    });
+    this.columnHeaders = this.config.layout.columns.map(columnConfig => {
+      return {
+        ...columnConfig,
+        items: (0, _lodash.compact)(this.getDimensionItems(columnConfig.dimension).map(itemId => this.getItem(itemId)))
+      };
+    });
+  }
+  getColumnMap() {
+    var _compact;
+    const columns = this.columnHeaders;
+    const sanitizedColumns = (_compact = (0, _lodash.compact)(columns === null || columns === void 0 ? void 0 : columns.map(column => {
+      var _column$items;
+      return (_column$items = column.items) === null || _column$items === void 0 ? void 0 : _column$items.map(item => ({
+        [column.dimension]: item.uid
+      }));
+    }))) !== null && _compact !== void 0 ? _compact : [];
+    const size = sanitizedColumns.reduce((acc, items) => {
+      var _items$length;
+      return acc * ((_items$length = items === null || items === void 0 ? void 0 : items.length) !== null && _items$length !== void 0 ? _items$length : 1);
+    }, 1);
+    const standardiseColumns = sanitizedColumns.map(items => [...(0, _lodash.times)(size / items.length, () => items).flat()]);
+    this.columnMap = (0, _lodash.compact)((0, _lodash.zip)(...standardiseColumns).map(arr => arr.reduce((obj, value) => {
+      return {
+        ...obj,
+        ...value
+      };
+    })));
+  }
+}
+exports.CustomPivotTableEngine = CustomPivotTableEngine;

package/build/cjs/components/{PivotTable/components/PivotTableEngineContext.js → CustomPivotTable/state/engine.js}

@@ -3,23 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePivotTableEngine = exports.Provider = exports.PivotTableEngineContext = void 0;
+exports.CustomPivotTableEngineProvider = CustomPivotTableEngineProvider;
+exports.useCustomPivotTableEngine = useCustomPivotTableEngine;
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const PivotTableEngineContext = /*#__PURE__*/(0, _react.createContext)(null);
-exports.PivotTableEngineContext = PivotTableEngineContext;
-const Provider = _ref => {
+const CustomPivotTableEngineContext = /*#__PURE__*/(0, _react.createContext)(null);
+function useCustomPivotTableEngine() {
+  return (0, _react.useContext)(CustomPivotTableEngineContext);
+}
+function CustomPivotTableEngineProvider(_ref) {
   let {
-    engine,
-    children
+    children,
+    engine
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(PivotTableEngineContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(CustomPivotTableEngineContext.Provider, {
     value: engine
   }, children);
-};
-exports.Provider = Provider;
-const usePivotTableEngine = () => {
-  return (0, _react.useContext)(PivotTableEngineContext);
-};
-exports.usePivotTableEngine = usePivotTableEngine;
+}

package/build/cjs/dataProviders/map.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = MapDataProvider;
 var _appRuntime = require("@dhis2/app-runtime");
 var _react = _interopRequireDefault(require("react"));
-var _map = _interopRequireDefault(require("../data/map.json"));
+var _map = _interopRequireDefault(require("../../data/map.json"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function MapDataProvider(_ref) {
   let {

package/build/cjs/index.js

@@ -47,14 +47,14 @@ Object.keys(_SingleValueContainer).forEach(function (key) {
     }
   });
 });
-var _PivotTable = require("./components/PivotTable");
-Object.keys(_PivotTable).forEach(function (key) {
+var _CustomPivotTable = require("./components/CustomPivotTable");
+Object.keys(_CustomPivotTable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _PivotTable[key]) return;
+  if (key in exports && exports[key] === _CustomPivotTable[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _PivotTable[key];
+      return _CustomPivotTable[key];
     }
   });
 });

package/build/cjs/locales/en/translations.json

@@ -124,38 +124,5 @@
     "Legend set is required": "Legend set is required",
     "Radius": "Radius",
     "Configure Thematic Layer": "Configure Thematic Layer",
-    "Program": "Program",
-    "Select a program": "Select a program",
-    "Indicators": "Indicators",
-    "Indicator group": "Indicator group",
-    "All groups": "All groups",
-    "Indicator": "Indicator",
-    "No indicator groups found": "No indicator groups found",
-    "Loading indicator groups": "Loading indicator groups",
-    "Data elements": "Data elements",
-    "Data element group": "Data element group",
-    "Data element": "Data element",
-    "No data element groups found": "No data element groups found",
-    "Loading data element groups": "Loading data element groups",
-    "Data sets": "Data sets",
-    "Data set": "Data set",
-    "All data sets": "All data sets",
-    "No data sets found": "No data sets found",
-    "Loading data sets": "Loading data sets",
-    "Event data items": "Event data items",
-    "All programs": "All programs",
-    "Event data item": "Event data item",
-    "No programs found": "No programs found",
-    "Loading programs": "Loading programs",
-    "Program indicators": "Program indicators",
-    "Program indicator": "Program indicator",
-    "Data": "Data",
-    "Organisation unit": "Organisation unit",
-    "Assigned Categories": "Assigned Categories",
-    "{{dynamicOuNames}} and {{lastOuName}}": "{{dynamicOuNames}} and {{lastOuName}}",
-    "{{allDynamicOuNames}} levels": "{{allDynamicOuNames}} levels",
-    "{{allDynamicOuNames}} groups": "{{allDynamicOuNames}} groups",
-    "{{allDynamicOuNames}} levels in {{staticOuNames}}": "{{allDynamicOuNames}} levels in {{staticOuNames}}",
-    "{{allDynamicOuNames}} groups in {{staticOuNames}}": "{{allDynamicOuNames}} groups in {{staticOuNames}}",
     "Loading ...": "Loading ..."
 }

package/build/es/components/CustomPivotTable/CustomPivotTable.stories.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { CustomPivotTable } from ".";
+import pivotTableData from "../../../data/large-table-data.json";
+import simpleData from "../../../data/simple-data.json";
+const Template = args => /*#__PURE__*/React.createElement(CustomPivotTable, args);
+export const Default = Template.bind({});
+Default.args = {
+  analytics: simpleData,
+  config: {
+    layout: {
+      columns: [{
+        dimension: "ou"
+      }, {
+        dimension: "pe",
+        label: "Period"
+      }],
+      rows: [{
+        dimension: "dx",
+        label: "Services"
+      }],
+      filter: []
+    },
+    options: {}
+  },
+  tableProps: {}
+};
+export const WithManyData = Template.bind({});
+WithManyData.args = {
+  analytics: pivotTableData,
+  config: {
+    layout: {
+      columns: [{
+        dimension: "dx"
+      }, {
+        dimension: "J5jldMd8OHv",
+        label: "Facility Type"
+      }],
+      rows: [{
+        dimension: "pe",
+        label: "Period"
+      }, {
+        dimension: "ou",
+        label: "Organisation unit"
+      }],
+      filter: []
+    },
+    options: {
+      fixColumnHeaders: false
+    }
+  },
+  tableProps: {
+    scrollHeight: "800px",
+    scrollWidth: "1400px"
+  }
+};
+export default {
+  title: "Analytics/Pivot table",
+  component: CustomPivotTable
+};

package/build/es/components/CustomPivotTable/components/Table/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { DataTable } from '@dhis2/ui';
+export function PivotTable(_ref) {
+  let {
+    tableProps,
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(DataTable, tableProps !== null && tableProps !== void 0 ? tableProps : {}, children);
+}

package/build/es/components/CustomPivotTable/components/TableBody/TableBody.module.css

@@ -0,0 +1,12 @@
+.nested-table-cell {
+    padding: 0 !important;
+}
+
+.nested-table {
+    margin: 0;
+    padding: 0;
+}
+
+.header-cell {
+    border-right: 1px solid rgb(232, 237, 242) !important;
+}