@hisptz/dhis2-analytics 1.0.10 → 1.0.11

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

@@ -0,0 +1,27 @@
+/* These types match the types in the backend
+  https://github.com/dhis2/dhis2-core/blob/master/dhis-2/dhis-api/src/main/java/org/hisp/dhis/common/ValueType.java
+*/
+
+export const VALUE_TYPE_NUMBER = 'NUMBER';
+export const VALUE_TYPE_UNIT_INTERVAL = 'UNIT_INTERVAL';
+export const VALUE_TYPE_PERCENTAGE = 'PERCENTAGE';
+export const VALUE_TYPE_INTEGER = 'INTEGER';
+export const VALUE_TYPE_INTEGER_POSITIVE = 'INTEGER_POSITIVE';
+export const VALUE_TYPE_INTEGER_NEGATIVE = 'INTEGER_NEGATIVE';
+export const VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE = 'INTEGER_ZERO_OR_POSITIVE';
+export const VALUE_TYPE_TEXT = 'TEXT';
+export const VALUE_TYPE_LONG_TEXT = 'LONG_TEXT';
+export const VALUE_TYPE_LETTER = 'LETTER';
+export const VALUE_TYPE_PHONE_NUMBER = 'PHONE_NUMBER';
+export const VALUE_TYPE_EMAIL = 'EMAIL';
+export const VALUE_TYPE_USERNAME = 'USERNAME';
+export const VALUE_TYPE_URL = 'URL';
+export const VALUE_TYPE_BOOLEAN = 'BOOLEAN';
+export const VALUE_TYPE_TRUE_ONLY = 'TRUE_ONLY';
+export const VALUE_TYPE_DATE = 'DATE';
+export const VALUE_TYPE_TIME = 'TIME';
+export const VALUE_TYPE_DATETIME = 'DATETIME';
+export const VALUE_TYPE_ORGANISATION_UNIT = 'ORGANISATION_UNIT';
+export const VALUE_TYPE_AGE = 'AGE';
+const NUMERIC_VALUE_TYPES = [VALUE_TYPE_NUMBER, VALUE_TYPE_UNIT_INTERVAL, VALUE_TYPE_PERCENTAGE, VALUE_TYPE_INTEGER, VALUE_TYPE_INTEGER_POSITIVE, VALUE_TYPE_INTEGER_NEGATIVE, VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE];
+export const isNumericValueType = type => NUMERIC_VALUE_TYPES.includes(type);

package/build/es/components/PivotTable/data/column-data.json

@@ -0,0 +1,210 @@
+{
+  "headers": [
+    {
+      "name": "dx",
+      "column": "Data",
+      "valueType": "TEXT",
+      "type": "java.lang.String",
+      "hidden": false,
+      "meta": true
+    },
+    {
+      "name": "ou",
+      "column": "Organisation unit",
+      "valueType": "TEXT",
+      "type": "java.lang.String",
+      "hidden": false,
+      "meta": true
+    },
+    {
+      "name": "value",
+      "column": "Value",
+      "valueType": "NUMBER",
+      "type": "java.lang.Double",
+      "hidden": false,
+      "meta": false
+    }
+  ],
+  "metaData": {
+    "items": {
+      "2022": {
+        "name": "2022"
+      },
+      "KctpIIucige": {
+        "name": "Selenga"
+      },
+      "YmmeuGbqOwR": {
+        "name": "Gbo"
+      },
+      "daJPPxtIrQn": {
+        "name": "Jaiama Bongor"
+      },
+      "tTUf91fCytl": {
+        "uid": "tTUf91fCytl",
+        "name": "Chiefdom"
+      },
+      "ou": {
+        "name": "Organisation unit"
+      },
+      "sxRd2XOzFbz": {
+        "name": "Tikonko"
+      },
+      "THIS_YEAR": {
+        "name": "This year"
+      },
+      "O6uvpzGd5pu": {
+        "uid": "O6uvpzGd5pu",
+        "code": "OU_264",
+        "name": "Bo"
+      },
+      "U6Kr7Gtpidn": {
+        "name": "Kakua"
+      },
+      "YuQRtpLP10I": {
+        "name": "Badjia"
+      },
+      "zFDYIgyGmXG": {
+        "name": "Bargbo"
+      },
+      "I4jWcnFmgEC": {
+        "name": "Niawa Lenga"
+      },
+      "dx": {
+        "name": "Data"
+      },
+      "BGGmAwx33dj": {
+        "name": "Bumpe Ngao"
+      },
+      "pe": {
+        "name": "Period"
+      },
+      "Uvn6LCg7dVU": {
+        "name": "ANC 1 Coverage"
+      },
+      "ARZ4y5i4reU": {
+        "name": "Wonde"
+      },
+      "JdhagCUEMbj": {
+        "name": "Komboya"
+      },
+      "vWbkYPRmKyS": {
+        "name": "Baoma"
+      },
+      "dGheVylzol6": {
+        "name": "Bargbe"
+      },
+      "kU8vhUkAGaT": {
+        "name": "Lugbu"
+      },
+      "npWGUj37qDe": {
+        "name": "Valunia"
+      }
+    },
+    "dimensions": {
+      "dx": [
+        "Uvn6LCg7dVU"
+      ],
+      "pe": [
+        "2022"
+      ],
+      "ou": [
+        "YuQRtpLP10I",
+        "vWbkYPRmKyS",
+        "dGheVylzol6",
+        "zFDYIgyGmXG",
+        "BGGmAwx33dj",
+        "YmmeuGbqOwR",
+        "daJPPxtIrQn",
+        "U6Kr7Gtpidn",
+        "JdhagCUEMbj",
+        "kU8vhUkAGaT",
+        "I4jWcnFmgEC",
+        "KctpIIucige",
+        "sxRd2XOzFbz",
+        "npWGUj37qDe",
+        "ARZ4y5i4reU"
+      ],
+      "co": []
+    }
+  },
+  "rows": [
+    [
+      "Uvn6LCg7dVU",
+      "YuQRtpLP10I",
+      "304.1"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "vWbkYPRmKyS",
+      "213.7"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "dGheVylzol6",
+      "126.5"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "zFDYIgyGmXG",
+      "206.4"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "BGGmAwx33dj",
+      "120.9"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "YmmeuGbqOwR",
+      "203.1"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "daJPPxtIrQn",
+      "89.3"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "U6Kr7Gtpidn",
+      "104.4"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "JdhagCUEMbj",
+      "187.1"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "kU8vhUkAGaT",
+      "96.1"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "I4jWcnFmgEC",
+      "147.9"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "KctpIIucige",
+      "91.1"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "sxRd2XOzFbz",
+      "203.2"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "npWGUj37qDe",
+      "95.7"
+    ],
+    [
+      "Uvn6LCg7dVU",
+      "ARZ4y5i4reU",
+      "84.3"
+    ]
+  ],
+  "height": 15,
+  "width": 3,
+  "headerWidth": 3
+}

package/build/es/components/PivotTable/hooks/useParentSize.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+const initialState = {
+  width: 0,
+  height: 0
+};
+export const useParentSize = function (elementRef, renderCounter) {
+  let initialSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : initialState;
+  const [size, setSize] = useState({
+    width: initialSize.width || 0,
+    height: initialSize.height || 0
+  });
+  useEffect(() => {
+    const el = elementRef.current && elementRef.current.parentElement;
+    if (!el) {
+      return;
+    }
+    const onResize = () => {
+      setSize({
+        width: el.clientWidth,
+        height: el.clientHeight
+      });
+    };
+    onResize();
+    if (renderCounter) {
+      setSize(initialState);
+    }
+    const observer = new ResizeObserver(onResize);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [elementRef, renderCounter]);
+  return size;
+};

package/build/es/components/PivotTable/hooks/useScrollPosition.js

@@ -0,0 +1,30 @@
+import debounce from 'lodash/debounce';
+import { useCallback, useEffect, useState } from 'react';
+export const useScrollPosition = function (containerRef) {
+  let debounceWait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+  const [scrollPosition, setScrollPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  const onScroll = useCallback(debounce(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const scroll = {
+      x: containerRef.current.scrollLeft,
+      y: containerRef.current.scrollTop
+    };
+    setScrollPosition(scroll);
+  }, debounceWait), [containerRef, debounceWait]);
+  useEffect(() => {
+    const currentRef = containerRef.current;
+    if (!currentRef) {
+      return;
+    }
+    currentRef.addEventListener('scroll', onScroll);
+    return () => {
+      currentRef.removeEventListener('scroll', onScroll);
+    };
+  }, [containerRef, onScroll]);
+  return scrollPosition;
+};

package/build/es/components/PivotTable/hooks/useSortableColumns.js

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { SORT_ORDER_ASCENDING, SORT_ORDER_DESCENDING } from '../constants/pivotTable';
+export const useSortableColumns = engine => {
+  const [sortBy, setSortBy] = useState(null);
+  const onSortByColumn = column => {
+    let order = SORT_ORDER_ASCENDING;
+    if (sortBy && sortBy.column === column) {
+      if (sortBy.order === SORT_ORDER_ASCENDING) {
+        order = SORT_ORDER_DESCENDING;
+      } else if (sortBy.order === SORT_ORDER_DESCENDING) {
+        engine.clearSort();
+        setSortBy(null);
+        return;
+      }
+    }
+    engine.sort(column, order);
+    setSortBy({
+      column,
+      order
+    }); // Force a re-render
+  };
+
+  return {
+    sortBy,
+    onSortByColumn
+  };
+};

package/build/es/components/PivotTable/hooks/useTableClipping.js

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { clipPartitionedAxis } from '../utils';
+import { CLIPPED_AXIS_PARTITION_SIZE_PX } from '../constants/pivotTable';
+import { useScrollPosition } from './useScrollPosition.js';
+export const useTableClipping = _ref => {
+  let {
+    containerRef,
+    width,
+    height,
+    engine
+  } = _ref;
+  const scrollPosition = useScrollPosition(containerRef);
+  const lineHeight = engine.fontSize + engine.cellPadding * 2 + 2;
+  const rows = useMemo(() => {
+    const headerSize = engine.adaptiveClippingController.rows.headerSize + (engine.options.title ? lineHeight : 0) + (engine.options.subtitle ? lineHeight : 0);
+    const viewportPosition = engine.options.fixColumnHeaders ? scrollPosition.y : Math.max(0, scrollPosition.y - headerSize);
+    const viewportWidth = height - (engine.options.fixColumnHeaders ? engine.adaptiveClippingController.rows.headerSize : Math.max(headerSize - scrollPosition.y, 0));
+    return clipPartitionedAxis({
+      partitionSize: CLIPPED_AXIS_PARTITION_SIZE_PX,
+      partitions: engine.adaptiveClippingController.rows.partitions,
+      axisMap: engine.rowMap,
+      widthMap: engine.adaptiveClippingController.rows.sizes,
+      viewportWidth,
+      viewportPosition,
+      totalWidth: engine.adaptiveClippingController.rows.totalSize
+    });
+  }, [scrollPosition.y, height, lineHeight, engine.adaptiveClippingController.rows.headerSize, engine.adaptiveClippingController.rows.partitions, engine.adaptiveClippingController.rows.sizes, engine.adaptiveClippingController.rows.totalSize, engine.options.fixColumnHeaders, engine.rowMap, engine.options.title, engine.options.subtitle]);
+  const columns = useMemo(() => {
+    const viewportPosition = Math.max(0, engine.options.fixRowHeaders ? scrollPosition.x : scrollPosition.x - engine.adaptiveClippingController.columns.headerSize);
+    const viewportWidth = width - (engine.options.fixRowHeaders ? engine.adaptiveClippingController.columns.headerSize : Math.max(engine.adaptiveClippingController.columns.headerSize - scrollPosition.x, 0));
+    return clipPartitionedAxis({
+      partitionSize: CLIPPED_AXIS_PARTITION_SIZE_PX,
+      partitions: engine.adaptiveClippingController.columns.partitions,
+      axisMap: engine.columnMap,
+      widthMap: engine.adaptiveClippingController.columns.sizes,
+      viewportWidth,
+      viewportPosition,
+      totalWidth: engine.adaptiveClippingController.columns.totalSize
+    });
+  }, [scrollPosition.x, width, engine.adaptiveClippingController.columns.headerSize, engine.adaptiveClippingController.columns.partitions, engine.adaptiveClippingController.columns.sizes, engine.adaptiveClippingController.columns.totalSize, engine.options.fixRowHeaders, engine.columnMap]);
+  return {
+    rows,
+    columns,
+    scrollPosition
+  };
+};

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { PivotTable } from "./components/PivotTable";
+export * from "./interfaces";
+export function CustomPivotTable(_ref) {
+  var _config$options, _config$layout$column, _config$layout$rows$m, _config$layout$filter, _config$layout$filter2, _config$options2;
+  let {
+    analytics,
+    config
+  } = _ref;
+  return /*#__PURE__*/React.createElement(PivotTable, {
+    data: analytics,
+    legendSets: (_config$options = config.options) === null || _config$options === void 0 ? void 0 : _config$options.legendSets,
+    visualization: {
+      columns: (_config$layout$column = config.layout.columns.map(column => ({
+        dimension: column
+      }))) !== null && _config$layout$column !== void 0 ? _config$layout$column : [],
+      rows: (_config$layout$rows$m = config.layout.rows.map(column => ({
+        dimension: column
+      }))) !== null && _config$layout$rows$m !== void 0 ? _config$layout$rows$m : [],
+      filter: (_config$layout$filter = (_config$layout$filter2 = config.layout.filter) === null || _config$layout$filter2 === void 0 ? void 0 : _config$layout$filter2.map(column => ({
+        dimension: column
+      }))) !== null && _config$layout$filter !== void 0 ? _config$layout$filter : [],
+      ...((_config$options2 = config.options) !== null && _config$options2 !== void 0 ? _config$options2 : {})
+    }
+  });
+}

package/build/es/components/PivotTable/interfaces/index.js

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

package/build/es/components/PivotTable/services/adaptiveClippingController.js

@@ -0,0 +1,191 @@
+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); }
+// @ts-nocheck
+import { measureTextWithWrapping } from '../utils';
+import { CLIPPED_AXIS_PARTITION_SIZE_PX, CLIPPED_CELL_MIN_SIZE } from '../constants/pivotTable';
+export class AdaptiveClippingController {
+  constructor(engine) {
+    _defineProperty(this, "columns", {
+      orientation: "column",
+      sizes: [],
+      headerSize: 0,
+      partitions: [],
+      totalSize: 0
+    });
+    _defineProperty(this, "rows", {
+      orientation: "row",
+      sizes: [],
+      headerSize: 0,
+      partitions: [],
+      totalSize: 0
+    });
+    _defineProperty(this, "engine", void 0);
+    this.engine = engine;
+    this.reset();
+  }
+  addSize(_ref, _ref2) {
+    let {
+      row,
+      column
+    } = _ref;
+    let {
+      width,
+      height
+    } = _ref2;
+    if (column >= 0) {
+      const columnSize = this.columns.sizes[column] || {
+        pre: 0,
+        size: 0
+      };
+      columnSize.size = Math.max(columnSize.size, width);
+      this.columns.sizes[column] = columnSize;
+    } else {
+      const index = this.engine.rowDepth + column;
+      this.columns.headerSizes[index] = Math.max(this.columns.headerSizes[index] || 0, width);
+    }
+    if (row >= 0) {
+      const rowSize = this.rows.sizes[row] || {
+        pre: 0,
+        size: 0
+      };
+      rowSize.size = Math.max(rowSize.size, height);
+      this.rows.sizes[row] = rowSize;
+    } else {
+      const index = this.engine.columnDepth + row;
+      this.rows.headerSizes[index] = Math.max(this.rows.headerSizes[index] || 0, height);
+    }
+  }
+  add(_ref3, renderedValue) {
+    let {
+      row,
+      column
+    } = _ref3;
+    this.addSize({
+      row,
+      column
+    }, this.measureText(renderedValue));
+  }
+  measureText(renderedValue) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return measureTextWithWrapping(renderedValue, {
+      fontSize: this.engine.fontSize,
+      ...options
+    });
+  }
+  getCellSize(contentSize) {
+    return Math.ceil(contentSize) + this.engine.cellPadding * 2 + /*border*/2;
+  }
+  finalizeAxis(axis) {
+    axis.headerSize = 0;
+    const isColumn = axis.orientation === 'column';
+    const map = isColumn ? this.engine.columnMap : this.engine.rowMap;
+    const getHeader = index => isColumn ? this.engine.getRawColumnHeader(index) : this.engine.getRawRowHeader(index);
+    map.forEach((index, mapIndex) => {
+      var _axis$sizes$index2;
+      const headerStack = getHeader(index);
+      headerStack === null || headerStack === void 0 ? void 0 : headerStack.forEach((header, level) => {
+        const label = this.engine.visualization.showHierarchy && header !== null && header !== void 0 && header.hierarchy ? header.hierarchy.join(' / ') : header === null || header === void 0 ? void 0 : header.name;
+        if (label) {
+          const isLeafHeader = level === headerStack.length - 1;
+          if (isColumn) {
+            var _axis$sizes$index;
+            const headerSize = this.measureText(label, {
+              maxWidth: isLeafHeader ? Math.max(CLIPPED_CELL_MIN_SIZE, ((_axis$sizes$index = axis.sizes[index]) === null || _axis$sizes$index === void 0 ? void 0 : _axis$sizes$index.size) || 0) : 0
+            });
+            this.addSize({
+              row: -headerStack.length + level,
+              column: index
+            }, {
+              height: headerSize.height,
+              width: isLeafHeader ? headerSize.width + (this.engine.isSortable(mapIndex) ? this.engine.scrollIconBuffer : 0) : 0
+            });
+          } else {
+            const headerSize = this.measureText(label, {});
+            this.addSize({
+              row: index,
+              column: -headerStack.length + level
+            }, {
+              height: isLeafHeader ? headerSize.height : 0,
+              width: headerSize.width
+            });
+          }
+        }
+      });
+      axis.sizes[index] = {
+        pre: 0,
+        size: this.getCellSize((_axis$sizes$index2 = axis.sizes[index]) === null || _axis$sizes$index2 === void 0 ? void 0 : _axis$sizes$index2.size)
+      };
+    });
+    this.populateAxisPartitions(axis);
+  }
+  populateAxisPartitions(axis) {
+    axis.totalSize = 0;
+    axis.partitions = [];
+    let nextPartitionPx = 0;
+    const isColumn = axis.orientation === 'column';
+    const map = isColumn ? this.engine.columnMap : this.engine.rowMap;
+    map.forEach((index, mapIndex) => {
+      if (axis.totalSize >= nextPartitionPx) {
+        axis.partitions.push(mapIndex);
+        nextPartitionPx += CLIPPED_AXIS_PARTITION_SIZE_PX;
+      }
+      axis.sizes[index].pre = axis.totalSize;
+      axis.totalSize += axis.sizes[index].size;
+    });
+  }
+  resetRowPartitions() {
+    this.populateAxisPartitions(this.rows);
+  }
+  finalize() {
+    if (this.engine.visualization.showDimensionLabels) {
+      var _this$engine$dimensio, _this$engine$dimensio2, _this$engine$dimensio3, _this$engine$dimensio4, _this$engine$dimensio5, _this$engine$dimensio6;
+      const columnDimensionCount = (_this$engine$dimensio = (_this$engine$dimensio2 = this.engine.dimensionLookup) === null || _this$engine$dimensio2 === void 0 ? void 0 : _this$engine$dimensio2.columnHeaders.length) !== null && _this$engine$dimensio !== void 0 ? _this$engine$dimensio : 0;
+      const rowDimensionCount = (_this$engine$dimensio3 = (_this$engine$dimensio4 = this.engine.dimensionLookup) === null || _this$engine$dimensio4 === void 0 ? void 0 : _this$engine$dimensio4.rowHeaders.length) !== null && _this$engine$dimensio3 !== void 0 ? _this$engine$dimensio3 : 0;
+      (_this$engine$dimensio5 = this.engine.dimensionLookup) === null || _this$engine$dimensio5 === void 0 ? void 0 : (_this$engine$dimensio6 = _this$engine$dimensio5.columnHeaders) === null || _this$engine$dimensio6 === void 0 ? void 0 : _this$engine$dimensio6.forEach((_, columnLevel) => {
+        var _this$engine$dimensio7, _this$engine$dimensio8;
+        (_this$engine$dimensio7 = this.engine.dimensionLookup) === null || _this$engine$dimensio7 === void 0 ? void 0 : (_this$engine$dimensio8 = _this$engine$dimensio7.rowHeaders) === null || _this$engine$dimensio8 === void 0 ? void 0 : _this$engine$dimensio8.forEach((_, rowLevel) => {
+          const label = this.engine.getDimensionLabel(rowLevel, columnLevel);
+          if (label) {
+            this.add({
+              row: -rowDimensionCount + rowLevel,
+              column: -columnDimensionCount + columnLevel
+            }, label);
+          }
+        });
+      });
+    }
+    this.finalizeAxis(this.columns);
+    this.finalizeAxis(this.rows);
+    this.columns.headerSize = 0;
+    this.columns.headerSizes = this.columns.headerSizes.map(size => {
+      const paddedSize = this.getCellSize(size);
+      this.columns.headerSize += paddedSize;
+      return paddedSize;
+    });
+    this.rows.headerSize = 0;
+    this.rows.headerSizes = this.rows.headerSizes.map(size => {
+      const paddedSize = this.getCellSize(size);
+      this.rows.headerSize += paddedSize;
+      return paddedSize;
+    });
+  }
+  reset() {
+    this.columns = {
+      orientation: 'column',
+      totalSize: 0,
+      headerSize: 0,
+      sizes: [],
+      partitions: [],
+      headerSizes: []
+    };
+    this.rows = {
+      orientation: 'row',
+      totalSize: 0,
+      headerSize: 0,
+      sizes: [],
+      partitions: [],
+      headerSizes: []
+    };
+  }
+}