@atlaskit/react-ufo 3.12.4 → 3.13.0

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/heatmap.js

@@ -1,361 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import isViewportEntryData from '../../utils/is-viewport-entry-data';
-import taskYield from '../../utils/task-yield';
-var MAX_HEATMAP_SIZE = 1000;
-function createEmptyHeatmapEntry() {
-  return {
-    head: null,
-    previousEntries: []
-  };
-}
-function createEmptyMap(heatmapWidth, heatmapHeight) {
-  return Array.from({
-    length: heatmapHeight
-  }).map(function () {
-    return Array.from({
-      length: heatmapWidth
-    }).map(createEmptyHeatmapEntry);
-  });
-}
-function isRectInside(a, b) {
-  if (!a || !b) {
-    return false;
-  }
-
-  // Check if all corners of rectangle a are within the bounds of rectangle b
-  return a.left >= b.left && a.right <= b.right && a.top >= b.top && a.bottom <= b.bottom;
-}
-var Heatmap = /*#__PURE__*/function () {
-  /**
-   * Heatmap Width
-   */
-
-  /**
-   * Heatmap Height
-   */
-
-  /**
-   * Heatmap Area (width * height)
-   */
-
-  function Heatmap(_ref) {
-    var viewport = _ref.viewport,
-      heatmapSize = _ref.heatmapSize;
-    _classCallCheck(this, Heatmap);
-    // TODO timeOrigin? do we need? for SSR??
-    this.viewport = viewport;
-    var safeSize = Math.min(heatmapSize, MAX_HEATMAP_SIZE);
-    if (viewport.width === 0 || viewport.height === 0) {
-      this.width = safeSize;
-      this.height = safeSize;
-      this.scaleX = 1;
-      this.scaleY = 1;
-      this.heatmapAreaSize = 0;
-      this.map = createEmptyMap(safeSize, safeSize);
-      return;
-    }
-    var aspectRatio = viewport.width / viewport.height;
-    if (aspectRatio > 1) {
-      // Landscape orientation
-      this.width = safeSize;
-      this.height = Math.round(safeSize / aspectRatio);
-    } else {
-      // Portrait orientation
-      this.width = safeSize;
-      this.height = Math.round(safeSize * aspectRatio);
-    }
-    this.scaleX = this.width / viewport.width;
-    this.scaleY = this.height / viewport.height;
-    this.heatmapAreaSize = this.width * this.height;
-    this.map = createEmptyMap(this.width, this.height);
-  }
-  return _createClass(Heatmap, [{
-    key: "getHeatmap",
-    value: function getHeatmap() {
-      return this.map;
-    }
-  }, {
-    key: "getCell",
-    value: function getCell(row, col) {
-      var _this$map$row;
-      return (_this$map$row = this.map[row]) === null || _this$map$row === void 0 ? void 0 : _this$map$row[col];
-    }
-
-    /**
-     * Map Dom Rect to Heatmap Rect, rounded up to occupy full cell.
-     * @param rect DOM Rect
-     * @returns
-     */
-  }, {
-    key: "mapDOMRectToHeatmap",
-    value: function mapDOMRectToHeatmap(rect) {
-      var scaledX = rect.x * this.scaleX;
-      var scaledY = rect.y * this.scaleY;
-      var scaledWidth = rect.width * this.scaleX;
-      var scaledHeight = rect.height * this.scaleY;
-      return {
-        left: Math.floor(scaledX),
-        right: Math.ceil(scaledX + scaledWidth),
-        top: Math.floor(scaledY),
-        bottom: Math.ceil(scaledY + scaledHeight)
-      };
-    }
-
-    /**
-     * Calculate the ratio of a HeatmapRect compared to the full heatmap
-     *
-     * This function determines what fraction of the heatmap is covered by the given heatmap rectangle.
-     *
-     * @param rect
-     */
-  }, {
-    key: "getRatio",
-    value: function getRatio(rect) {
-      if (this.viewport.width === 0 || this.viewport.height === 0) {
-        return 0;
-      }
-      var right = rect.right,
-        left = rect.left,
-        bottom = rect.bottom,
-        top = rect.top;
-      var rectWidth = right - left;
-      var rectHeight = bottom - top;
-      var rectArea = rectWidth * rectHeight;
-      var ratio = rectArea / this.heatmapAreaSize;
-      if (ratio > 1) {
-        return 1;
-      }
-      return ratio;
-    }
-  }, {
-    key: "applyEntriesToHeatmap",
-    value: function () {
-      var _applyEntriesToHeatmap = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(entries) {
-        var i, entry, time, type, data, rect, ratio, heatmapEntryData, roundedTop, roundedBottom, roundedLeft, roundedRight, row, col, cell, previousEntry;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              i = 0;
-            case 1:
-              if (!(i < entries.length)) {
-                _context.next = 37;
-                break;
-              }
-              entry = entries[i];
-              time = entry.time, type = entry.type, data = entry.data;
-              if (!isViewportEntryData(data)) {
-                _context.next = 31;
-                break;
-              }
-              rect = this.mapDOMRectToHeatmap(data.rect);
-              ratio = this.getRatio(rect);
-              heatmapEntryData = {
-                time: time,
-                elementName: data.elementName,
-                ratio: ratio !== null && ratio !== void 0 ? ratio : null,
-                rect: rect,
-                source: type
-              };
-              roundedTop = Math.floor(rect.top);
-              roundedBottom = Math.min(rect.bottom, this.height);
-              roundedLeft = Math.floor(rect.left);
-              roundedRight = Math.min(rect.right, this.width);
-              row = roundedTop;
-            case 13:
-              if (!(row < roundedBottom)) {
-                _context.next = 31;
-                break;
-              }
-              col = roundedLeft;
-            case 15:
-              if (!(col < roundedRight)) {
-                _context.next = 28;
-                break;
-              }
-              cell = this.getCell(row, col);
-              if (cell) {
-                _context.next = 19;
-                break;
-              }
-              return _context.abrupt("continue", 25);
-            case 19:
-              previousEntry = cell.head; // When elements are added at the same time
-              // we try to keep the inner element changes as the head
-              if (!((previousEntry === null || previousEntry === void 0 ? void 0 : previousEntry.time) === entry.time && isRectInside(previousEntry.rect, heatmapEntryData.rect))) {
-                _context.next = 23;
-                break;
-              }
-              cell.previousEntries.push(_objectSpread(_objectSpread({}, heatmapEntryData), {}, {
-                source: 'mutation:parent-mounted'
-              }));
-              return _context.abrupt("continue", 25);
-            case 23:
-              cell.head = _objectSpread(_objectSpread({}, heatmapEntryData), {}, {
-                source: heatmapEntryData.source || null
-              });
-              if (previousEntry !== null) {
-                cell.previousEntries.push(previousEntry);
-              }
-            case 25:
-              col++;
-              _context.next = 15;
-              break;
-            case 28:
-              row++;
-              _context.next = 13;
-              break;
-            case 31:
-              if (!(i % 100 === 0)) {
-                _context.next = 34;
-                break;
-              }
-              _context.next = 34;
-              return taskYield();
-            case 34:
-              i++;
-              _context.next = 1;
-              break;
-            case 37:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function applyEntriesToHeatmap(_x) {
-        return _applyEntriesToHeatmap.apply(this, arguments);
-      }
-      return applyEntriesToHeatmap;
-    }()
-  }, {
-    key: "getVCPercentMetrics",
-    value: function () {
-      var _getVCPercentMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(vcPercentCheckpoint) {
-        var sortedCheckpoints, flattenHeatmap, totalCells, timestampMap, i, _cellHead$time, _timestampMap$get, cell, cellHead, timestamp, elementName, curr, sortedTimings, totalCellPainted, result, domElementsBuffer, _i, _timestamp, timestampInfo, cellCount, domElements, currVCRatio, currVCPercent, matchesAnyCheckpoints, checkpoint, _domElements;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              sortedCheckpoints = _toConsumableArray(vcPercentCheckpoint).sort(function (a, b) {
-                return a - b;
-              });
-              flattenHeatmap = this.map.flat();
-              totalCells = flattenHeatmap.length;
-              timestampMap = new Map();
-              i = 0;
-            case 5:
-              if (!(i < flattenHeatmap.length)) {
-                _context2.next = 20;
-                break;
-              }
-              cell = flattenHeatmap[i];
-              cellHead = cell.head;
-              timestamp = Math.trunc((_cellHead$time = cellHead === null || cellHead === void 0 ? void 0 : cellHead.time) !== null && _cellHead$time !== void 0 ? _cellHead$time : 0);
-              elementName = cellHead === null || cellHead === void 0 ? void 0 : cellHead.elementName;
-              curr = (_timestampMap$get = timestampMap.get(timestamp)) !== null && _timestampMap$get !== void 0 ? _timestampMap$get : {
-                cellCount: 0,
-                domElements: new Set()
-              };
-              curr.cellCount += 1;
-              if (elementName) {
-                curr.domElements.add(elementName);
-              }
-              timestampMap.set(timestamp, curr);
-
-              // Every 10000 heatmap entries processed
-              // we give the browser the power
-              // to process any other high priority task
-              if (!(i > 10000 && i % 10000 === 0)) {
-                _context2.next = 17;
-                break;
-              }
-              _context2.next = 17;
-              return taskYield();
-            case 17:
-              i++;
-              _context2.next = 5;
-              break;
-            case 20:
-              sortedTimings = _toConsumableArray(timestampMap.keys()).sort(function (a, b) {
-                return a - b;
-              });
-              totalCellPainted = 0;
-              result = {};
-              domElementsBuffer = new Set();
-              _i = 0;
-            case 25:
-              if (!(_i < sortedTimings.length)) {
-                _context2.next = 52;
-                break;
-              }
-              _timestamp = sortedTimings[_i];
-              timestampInfo = timestampMap.get(_timestamp);
-              if (timestampInfo) {
-                _context2.next = 30;
-                break;
-              }
-              throw new Error('unexpected timestampInfo not found');
-            case 30:
-              cellCount = timestampInfo.cellCount, domElements = timestampInfo.domElements;
-              totalCellPainted += cellCount;
-              currVCRatio = totalCellPainted / totalCells;
-              currVCPercent = Math.round(currVCRatio * 100);
-              domElements.forEach(function (domElement) {
-                domElementsBuffer.add(domElement);
-              });
-              matchesAnyCheckpoints = false;
-            case 36:
-              if (!(sortedCheckpoints.length > 0 && currVCPercent >= sortedCheckpoints[0])) {
-                _context2.next = 45;
-                break;
-              }
-              checkpoint = sortedCheckpoints.shift();
-              _domElements = _toConsumableArray(domElementsBuffer);
-              if (checkpoint) {
-                _context2.next = 41;
-                break;
-              }
-              return _context2.abrupt("break", 45);
-            case 41:
-              matchesAnyCheckpoints = true;
-              result[checkpoint.toString()] = {
-                t: _timestamp,
-                e: _domElements
-              };
-              _context2.next = 36;
-              break;
-            case 45:
-              if (matchesAnyCheckpoints) {
-                domElementsBuffer.clear();
-              }
-              if (!(_i % 500 === 0)) {
-                _context2.next = 49;
-                break;
-              }
-              _context2.next = 49;
-              return taskYield();
-            case 49:
-              _i++;
-              _context2.next = 25;
-              break;
-            case 52:
-              return _context2.abrupt("return", result);
-            case 53:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function getVCPercentMetrics(_x2) {
-        return _getVCPercentMetrics.apply(this, arguments);
-      }
-      return getVCPercentMetrics;
-    }()
-  }]);
-}();
-export { Heatmap as default };