@hisptz/dhis2-analytics 1.0.10 → 1.0.11

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableClipping = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+var _pivotTable = require("../constants/pivotTable");
+var _useScrollPosition = require("./useScrollPosition.js");
+const useTableClipping = _ref => {
+  let {
+    containerRef,
+    width,
+    height,
+    engine
+  } = _ref;
+  const scrollPosition = (0, _useScrollPosition.useScrollPosition)(containerRef);
+  const lineHeight = engine.fontSize + engine.cellPadding * 2 + 2;
+  const rows = (0, _react.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 (0, _utils.clipPartitionedAxis)({
+      partitionSize: _pivotTable.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 = (0, _react.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 (0, _utils.clipPartitionedAxis)({
+      partitionSize: _pivotTable.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
+  };
+};
+exports.useTableClipping = useTableClipping;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  CustomPivotTable: true
+};
+exports.CustomPivotTable = CustomPivotTable;
+var _react = _interopRequireDefault(require("react"));
+var _PivotTable = require("./components/PivotTable");
+var _interfaces = require("./interfaces");
+Object.keys(_interfaces).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _interfaces[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _interfaces[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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.default.createElement(_PivotTable.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/cjs/components/PivotTable/interfaces/index.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AdaptiveClippingController = void 0;
+var _utils = require("../utils");
+var _pivotTable = require("../constants/pivotTable");
+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 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 (0, _utils.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(_pivotTable.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 += _pivotTable.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: []
+    };
+  }
+}
+exports.AdaptiveClippingController = AdaptiveClippingController;