@hisptz/dhis2-analytics 1.0.11 → 1.0.13

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

@@ -0,0 +1,100 @@
+import { isEmpty, slice } from "lodash";
+import { useCustomPivotTableEngine } from "../../state/engine";
+import { DataTableCell, DataTableRow, TableBody } from '@dhis2/ui';
+import React, { Fragment } from "react";
+import classes from "./TableBody.module.css";
+import { useElementSize } from "usehooks-ts";
+function DataRowRenderer(_ref) {
+  let {
+    mapper,
+    item,
+    dimension
+  } = _ref;
+  const 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.createElement(React.Fragment, null, completeMapper === null || completeMapper === void 0 ? void 0 : completeMapper.map(mapper => {
+    var _engine$getValue;
+    return /*#__PURE__*/React.createElement(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
+  }] = useElementSize();
+  const rowSpan = 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 = !isEmpty(rows[index + 1]);
+  const nextRow = rows[index + 1];
+  return /*#__PURE__*/React.createElement(React.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.createElement(Fragment, {
+      key: `${item.name}-${row.dimension}-fragment`
+    }, /*#__PURE__*/React.createElement(DataTableRow, {
+      key: `${item.name}-${row.dimension}-row`
+    }, /*#__PURE__*/React.createElement(DataTableCell, {
+      ref: cellRef,
+      fixed: fixRowHeaders,
+      left: `${prevWidth}px`,
+      className: classes['header-cell'],
+      tag: "th",
+      bordered: true,
+      rowSpan: (rowSpan + (hasSubRows ? 1 : 0)).toString()
+    }, item.name), !hasSubRows ? /*#__PURE__*/React.createElement(DataRowRenderer, {
+      dimension: row.dimension,
+      mapper: mapper,
+      item: item
+    }) : null), hasSubRows ? /*#__PURE__*/React.createElement(RowRenderer, {
+      row: nextRow,
+      index: index + 1,
+      config: {
+        rows,
+        columns,
+        prevWidth: width,
+        mapper: {
+          ...mapper,
+          [row.dimension]: item.uid
+        }
+      }
+    }) : null);
+  }));
+}
+export function CustomPivotTableBody() {
+  const 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 || isEmpty(rows)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(RowRenderer, {
+    row: rows[0],
+    index: 0,
+    config: {
+      rows,
+      columns,
+      fixRowHeaders
+    }
+  }));
+}

package/build/es/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/es/components/CustomPivotTable/components/TableHeaders/index.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { useCustomPivotTableEngine } from "../../state/engine";
+import { DataTableColumnHeader, DataTableRow, TableHead } from '@dhis2/ui';
+import { isEmpty, slice, times } from "lodash";
+import classes from "./TableHeaders.module.css";
+import { useElementSize } from "usehooks-ts";
+function ColumnRenderer(_ref) {
+  let {
+    column,
+    index,
+    config: {
+      fixColumnHeaders,
+      rowHeaders,
+      prevHeight = 0,
+      columns
+    }
+  } = _ref;
+  const [columnHeaderRef, {
+    height
+  }] = useElementSize();
+  if (!column) {
+    return null;
+  }
+  const colSpan = 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 = !isEmpty(columns[index + 1]);
+  const nextColumn = columns[index + 1];
+  const multiplicationFactor = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataTableRow, null, index === 0 && (rowHeaders === null || rowHeaders === void 0 ? void 0 : rowHeaders.map(header => {
+    var _header$label;
+    return /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+      fixed: fixColumnHeaders,
+      top: "0",
+      className: classes['table-header'],
+      rowSpan: columns.length.toString(),
+      key: `${header.dimension}-header-column`
+    }, (_header$label = header.label) !== null && _header$label !== void 0 ? _header$label : "");
+  })), times(multiplicationFactor, colNo => {
+    var _column$items3;
+    return (_column$items3 = column.items) === null || _column$items3 === void 0 ? void 0 : _column$items3.map(item => /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+      fixed: fixColumnHeaders,
+      top: `${prevHeight.toString()}px`,
+      ref: index === 0 ? columnHeaderRef : undefined,
+      className: classes['table-header'],
+      align: "center",
+      colSpan: colSpan.toString(),
+      key: `${colNo}-${item.name}-column-header`
+    }, item.name));
+  })), hasSubColumns ? /*#__PURE__*/React.createElement(ColumnRenderer, {
+    column: nextColumn,
+    index: index + 1,
+    config: {
+      columns,
+      rowHeaders,
+      prevHeight: height,
+      fixColumnHeaders
+    }
+  }) : null);
+}
+export function TableHeaders() {
+  const 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 || isEmpty(columns)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(ColumnRenderer, {
+    column: columns[0],
+    index: 0,
+    config: {
+      rowHeaders,
+      columns,
+      fixColumnHeaders
+    }
+  }));
+}

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

@@ -0,0 +1,22 @@
+import { CustomPivotTableEngine } from "./services/engine";
+import React, { useMemo } from "react";
+import { CustomPivotTableEngineProvider } from "./state/engine";
+import { PivotTable } from "./components/Table";
+import { TableHeaders } from "./components/TableHeaders";
+import { CustomPivotTableBody } from "./components/TableBody";
+export function CustomPivotTable(_ref) {
+  let {
+    analytics,
+    config,
+    tableProps
+  } = _ref;
+  const engine = useMemo(() => new CustomPivotTableEngine({
+    analytics,
+    config
+  }), [analytics, config]);
+  return /*#__PURE__*/React.createElement(CustomPivotTableEngineProvider, {
+    engine: engine
+  }, /*#__PURE__*/React.createElement(PivotTable, {
+    tableProps: tableProps
+  }, /*#__PURE__*/React.createElement(TableHeaders, null), /*#__PURE__*/React.createElement(CustomPivotTableBody, null)));
+}

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

@@ -0,0 +1,82 @@
+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); }
+import { compact, findIndex, intersection, times, zip } from "lodash";
+export 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 = 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 => 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: compact(this.getDimensionItems(rowConfig.dimension).map(itemId => this.getItem(itemId)))
+      };
+    });
+    this.columnHeaders = this.config.layout.columns.map(columnConfig => {
+      return {
+        ...columnConfig,
+        items: compact(this.getDimensionItems(columnConfig.dimension).map(itemId => this.getItem(itemId)))
+      };
+    });
+  }
+  getColumnMap() {
+    var _compact;
+    const columns = this.columnHeaders;
+    const sanitizedColumns = (_compact = 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 => [...times(size / items.length, () => items).flat()]);
+    this.columnMap = compact(zip(...standardiseColumns).map(arr => arr.reduce((obj, value) => {
+      return {
+        ...obj,
+        ...value
+      };
+    })));
+  }
+}

package/build/es/components/CustomPivotTable/state/engine.js

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

package/build/es/dataProviders/map.js

@@ -1,6 +1,6 @@
 import { CustomDataProvider } from "@dhis2/app-runtime";
 import React from "react";
-import mapData from "../data/map.json";
+import mapData from "../../data/map.json";
 export default function MapDataProvider(_ref) {
   let {
     children

package/build/es/index.js

@@ -2,5 +2,5 @@ export * from "./components/Map";
 export * from "./components/CircularProgressDashboard";
 export * from "./components/ChartAnalytics";
 export * from "./components/SingleValueContainer";
-export * from "./components/PivotTable";
+export * from "./components/CustomPivotTable";
 export {};

package/build/es/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/types/src/components/CustomPivotTable/components/Table/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface PivotTableProps {
+    children: React.ReactNode;
+    tableProps?: {
+        scrollHeight?: string;
+        scrollWidth?: string;
+        layout?: string;
+        width?: string;
+    };
+}
+export declare function PivotTable({ tableProps, children }: PivotTableProps): JSX.Element;

package/build/types/src/components/CustomPivotTable/components/TableBody/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CustomPivotTableBody(): JSX.Element | null;

package/build/types/src/components/CustomPivotTable/components/TableHeaders/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function TableHeaders(): JSX.Element | null;

package/build/types/{components/PivotTable → src/components/CustomPivotTable}/index.d.ts

@@ -1,14 +1,28 @@
 /// <reference types="react" />
 import { Analytics, LegendSet } from "@hisptz/dhis2-utils";
 import { DHIS2Dimension } from "./interfaces";
-export * from "./interfaces";
 export interface CustomPivotTableProps {
     analytics: Analytics;
+    tableProps?: {
+        scrollHeight?: string;
+        scrollWidth?: string;
+        layout?: string;
+        width?: string;
+    };
     config: {
         layout: {
-            columns: Array<DHIS2Dimension>;
-            rows: Array<DHIS2Dimension>;
-            filter?: Array<DHIS2Dimension>;
+            columns: {
+                dimension: DHIS2Dimension;
+                label?: string;
+            }[];
+            rows: {
+                dimension: DHIS2Dimension;
+                label?: string;
+            }[];
+            filter?: {
+                dimension: DHIS2Dimension;
+                label?: string;
+            }[];
         };
         options?: {
             legendSets?: LegendSet[];
@@ -23,4 +37,4 @@ export interface CustomPivotTableProps {
         };
     };
 }
-export declare function CustomPivotTable({ analytics, config }: CustomPivotTableProps): JSX.Element;
+export declare function CustomPivotTable({ analytics, config, tableProps }: CustomPivotTableProps): JSX.Element;

package/build/types/src/components/CustomPivotTable/interfaces/index.d.ts

@@ -0,0 +1 @@
+export type DHIS2Dimension = "ou" | "pe" | "dx" | "co" | string;

package/build/types/src/components/CustomPivotTable/services/engine.d.ts

@@ -0,0 +1,58 @@
+import { Analytics, AnalyticsItem, LegendSet } from "@hisptz/dhis2-utils";
+import { DHIS2Dimension } from "../interfaces";
+export interface EngineConfig {
+    layout: {
+        columns: {
+            dimension: DHIS2Dimension;
+            label?: string;
+        }[];
+        rows: {
+            dimension: DHIS2Dimension;
+            label?: string;
+        }[];
+        filter?: {
+            dimension: DHIS2Dimension;
+            label?: string;
+        }[];
+    };
+    options?: {
+        legendSets?: LegendSet[];
+        hideEmptyColumns?: boolean;
+        hideEmptyRows?: boolean;
+        showRowTotals?: boolean;
+        showColumnTotals?: boolean;
+        showRowSubtotals?: boolean;
+        showColumnSubtotals?: boolean;
+        fixColumnHeaders?: boolean;
+        fixRowHeaders?: boolean;
+        [key: string]: any;
+    };
+}
+export interface Header {
+    dimension: DHIS2Dimension;
+    label?: string;
+    items?: AnalyticsItem[];
+}
+export declare class CustomPivotTableEngine {
+    analyticsData: Analytics;
+    valueIndex: number;
+    config: EngineConfig;
+    rowHeaders?: Header[];
+    columnHeaders?: Header[];
+    columnMap?: {
+        [key: string]: any;
+    }[];
+    constructor({ analytics, config }: {
+        analytics: Analytics;
+        config: EngineConfig;
+    });
+    get fixColumnHeaders(): boolean;
+    get fixRowHeaders(): boolean;
+    getDimensionItems(dimension: DHIS2Dimension): string[];
+    getItem(id: string): AnalyticsItem | undefined;
+    getValue(mapper: {
+        [key: string]: any;
+    }): number | undefined;
+    getHeaders(): void;
+    getColumnMap(): void;
+}

package/build/types/src/components/CustomPivotTable/state/engine.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { CustomPivotTableEngine } from "../services/engine";
+export declare function useCustomPivotTableEngine(): CustomPivotTableEngine | null;
+export declare function CustomPivotTableEngineProvider({ children, engine }: {
+    children: ReactNode;
+    engine: CustomPivotTableEngine;
+}): JSX.Element;