@hisptz/dhis2-analytics 1.0.10 → 1.0.12

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

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/interfaces/index.js

@@ -0,0 +1 @@
+export {};

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/components/Map/Map.stories.js

@@ -321,7 +321,7 @@ GoogleEarthEngineLayers.args = {
   }
 };
 export default {
-  title: "Components/Map",
+  title: "Analytics/Map",
   component: Map,
   decorators: [MapStory => {
     return /*#__PURE__*/React.createElement("div", {

package/build/es/components/Map/components/EarthEngineLayerConfiguration/EarthEngineLayerConfigModal.stories.js

@@ -10,7 +10,7 @@ Basic.args = {
   open: true
 };
 export default {
-  title: "Components/Map/Earth Engine Config Modal",
+  title: "Analytics/Map/Earth Engine Config Modal",
   component: EarthEngineLayerConfiguration,
   decorators: [MapStory => {
     return /*#__PURE__*/React.createElement("div", {

package/build/es/components/Map/components/EarthEngineLayerConfiguration/EarthEngineLayerConfiguration.stories.js

@@ -18,7 +18,7 @@ const Template = args => {
 export const Basic = Template.bind({});
 Basic.args = {};
 export default {
-  title: "Components/Map/Earth Engine Configuration",
+  title: "Analytics/Map/Earth Engine Configuration",
   component: EarthEngineLayerConfiguration,
   decorators: [MapStory => {
     return /*#__PURE__*/React.createElement("div", {

package/build/es/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.js

@@ -163,7 +163,7 @@ export function useThematicLayers() {
             scale: defaultClasses,
             colorClass: defaultColorScaleName
           };
-          const sortedData = sortBy(layer.data, "data");
+          const sortedData = sortBy(layer.data.filter(datum => !!datum.data), "data");
           const autoLegends = generateLegends((_last$data = (_last = last(sortedData)) === null || _last === void 0 ? void 0 : _last.data) !== null && _last$data !== void 0 ? _last$data : 0, (_head$data = (_head = head(sortedData)) === null || _head === void 0 ? void 0 : _head.data) !== null && _head$data !== void 0 ? _head$data : 0, {
             classesCount: scale,
             colorClass
@@ -338,10 +338,17 @@ export function useGoogleEngineLayers() {
     }
   }
   const sanitizeLayers = useCallback(async layers => {
+    if (isEmpty(layers)) {
+      return [];
+    }
     try {
       const {
         token
       } = await refresh();
+      if (!token) {
+        console.error(`Google token not available in this instance`);
+        return [];
+      }
       await EarthEngine.setToken(token, refresh);
       return map(layers, asyncify(async layer => {
         try {

package/build/es/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.stories.js

@@ -10,7 +10,7 @@ Basic.args = {
   open: true
 };
 export default {
-  title: "Components/Map/Thematic Layer Config Modal",
+  title: "Analytics/Map/Thematic Layer Config Modal",
   component: ThematicLayerConfigModal,
   decorators: [MapStory => {
     return /*#__PURE__*/React.createElement("div", {

package/build/es/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.stories.js

@@ -18,7 +18,7 @@ const Template = args => {
 export const Basic = Template.bind({});
 Basic.args = {};
 export default {
-  title: "Components/Map/Thematic Layer Configuration",
+  title: "Analytics/Map/Thematic Layer Configuration",
   component: ThematicLayerConfiguration,
   decorators: [MapStory => {
     return /*#__PURE__*/React.createElement("div", {

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

@@ -107,7 +107,7 @@ SingleValuesWithDecimalPlaces.args = {
   }]
 };
 export default {
-  title: "Components/Single Value Container",
+  title: "Analytics/Single Value Container",
   component: SingleValueContainer,
   decorators: [SingleValueStory => {
     return /*#__PURE__*/React.createElement(SingleValueStory, null);

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,4 +2,5 @@ export * from "./components/Map";
 export * from "./components/CircularProgressDashboard";
 export * from "./components/ChartAnalytics";
 export * from "./components/SingleValueContainer";
+export * from "./components/CustomPivotTable";
 export {};

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/src/components/CustomPivotTable/index.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { Analytics, LegendSet } from "@hisptz/dhis2-utils";
+import { DHIS2Dimension } from "./interfaces";
+export interface CustomPivotTableProps {
+    analytics: Analytics;
+    tableProps?: {
+        scrollHeight?: string;
+        scrollWidth?: string;
+        layout?: string;
+        width?: string;
+    };
+    config: {
+        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;
+        };
+    };
+}
+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;