@atlaskit/react-ufo 3.1.4 → 3.3.0

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

@@ -0,0 +1,390 @@
+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 default function calculateTTVCPercentiles(_x3) {
+  return _calculateTTVCPercentiles.apply(this, arguments);
+}
+function _calculateTTVCPercentiles() {
+  _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref2) {
+    var orderedEntries, viewport, percentiles, heatmap, vcDetails;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          orderedEntries = _ref2.orderedEntries, viewport = _ref2.viewport, percentiles = _ref2.percentiles;
+          heatmap = new Heatmap({
+            viewport: viewport,
+            heatmapSize: 200
+          });
+          _context3.next = 4;
+          return heatmap.applyEntriesToHeatmap(orderedEntries);
+        case 4:
+          _context3.next = 6;
+          return heatmap.getVCPercentMetrics(percentiles);
+        case 6:
+          vcDetails = _context3.sent;
+          return _context3.abrupt("return", vcDetails);
+        case 8:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _calculateTTVCPercentiles.apply(this, arguments);
+}

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

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

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

@@ -0,0 +1,54 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import calcUsingCanvas from './canvas-heatmap';
+import caclUsingOldHeatmap from './heatmap';
+import calcUsingRectSweepingLine from './rect-sweeping-line';
+export default function calculateTTVCPercentiles(_x) {
+  return _calculateTTVCPercentiles.apply(this, arguments);
+}
+function _calculateTTVCPercentiles() {
+  _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(arg) {
+    var algo, vcDetails, _vcDetails, _vcDetails2;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          algo = 'canvas_heatmap';
+          if (!(algo === 'canvas_heatmap')) {
+            _context.next = 6;
+            break;
+          }
+          _context.next = 4;
+          return calcUsingCanvas(arg);
+        case 4:
+          vcDetails = _context.sent;
+          return _context.abrupt("return", vcDetails);
+        case 6:
+          if (!(algo === 'rect_sweeping')) {
+            _context.next = 11;
+            break;
+          }
+          _context.next = 9;
+          return calcUsingRectSweepingLine(arg);
+        case 9:
+          _vcDetails = _context.sent;
+          return _context.abrupt("return", _vcDetails);
+        case 11:
+          if (!(algo === 'old_heatmap')) {
+            _context.next = 16;
+            break;
+          }
+          _context.next = 14;
+          return caclUsingOldHeatmap(arg);
+        case 14:
+          _vcDetails2 = _context.sent;
+          return _context.abrupt("return", _vcDetails2);
+        case 16:
+          throw new Error('unexpected Error algo not chosen correctly');
+        case 17:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _calculateTTVCPercentiles.apply(this, arguments);
+}

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/calc-union-area.js

@@ -0,0 +1,144 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Calculate the union areas of all rectangles using Sweep Line Algorithm
+ *
+ * Reference:
+ * 	https://en.wikipedia.org/wiki/Sweep_line_algorithm
+ *  https://www.hackerearth.com/practice/math/geometry/line-sweep-technique/tutorial/#:~:text=A%20sweep%20line%20is%20an,order%20to%20discretize%20the%20sweep.
+ *
+ * @param rectangles
+ * @returns
+ */
+export default function calculateUnionArea(rectangles) {
+  // Step 1: Create sweep line events
+  var events = createSweepLineEvents(rectangles);
+
+  // Step 2: Process events to calculate total area
+  var activeIntervals = new Map();
+  var totalArea = 0;
+  var previousX = 0;
+  for (var _i = 0, _events = events; _i < _events.length; _i++) {
+    var event = _events[_i];
+    // Calculate height at current x-position
+    var currentHeight = calculateActiveHeight(activeIntervals);
+    // Add area since last x-position
+    totalArea += currentHeight * (event.x - previousX);
+    // Update x-position
+    previousX = event.x;
+    // Update active intervals
+    updateActiveIntervals(activeIntervals, event);
+  }
+  return totalArea;
+}
+function createSweepLineEvents(rectangles) {
+  var events = [];
+  var _iterator = _createForOfIteratorHelper(rectangles),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var rect = _step.value;
+      // Create start and end events for each rectangle
+      events.push({
+        x: rect.left,
+        type: 'start',
+        top: rect.top,
+        bottom: rect.bottom
+      });
+      events.push({
+        x: rect.right,
+        type: 'end',
+        top: rect.top,
+        bottom: rect.bottom
+      });
+    }
+    // Sort events by x-coordinate (and type as tiebreaker)
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return events.sort(function (a, b) {
+    return a.x === b.x ? a.type === 'end' ? 1 : -1 : a.x - b.x;
+  });
+}
+function calculateActiveHeight(intervals) {
+  if (intervals.size === 0) {
+    return 0;
+  }
+  // Get all unique y-coordinates
+  var coordinates = [];
+  var _iterator2 = _createForOfIteratorHelper(intervals),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _step2$value = _slicedToArray(_step2.value, 1),
+        _key = _step2$value[0];
+      var _key$split$map3 = _key.split(',').map(Number),
+        _key$split$map4 = _slicedToArray(_key$split$map3, 2),
+        _start = _key$split$map4[0],
+        _end = _key$split$map4[1];
+      coordinates.push(_start, _end);
+    }
+    // Sort coordinates
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var sortedCoords = _toConsumableArray(new Set(coordinates)).sort(function (a, b) {
+    return a - b;
+  });
+  var totalHeight = 0;
+  // Check each segment between consecutive coordinates
+  for (var i = 0; i < sortedCoords.length; i++) {
+    var y1 = sortedCoords[i];
+    var y2 = sortedCoords[i + 1];
+    // Check if this segment is covered by any active interval
+    var covered = false;
+    var _iterator3 = _createForOfIteratorHelper(intervals),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var _step3$value = _slicedToArray(_step3.value, 2),
+          key = _step3$value[0],
+          count = _step3$value[1];
+        if (count <= 0) {
+          continue;
+        }
+        var _key$split$map = key.split(',').map(Number),
+          _key$split$map2 = _slicedToArray(_key$split$map, 2),
+          start = _key$split$map2[0],
+          end = _key$split$map2[1];
+        if (start <= y1 && end >= y2) {
+          covered = true;
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+    if (covered) {
+      totalHeight += y2 - y1;
+    }
+  }
+  return totalHeight;
+}
+function updateActiveIntervals(intervals, event) {
+  var key = "".concat(event.top, ",").concat(event.bottom);
+  if (event.type === 'start') {
+    intervals.set(key, (intervals.get(key) || 0) + 1);
+  } else {
+    var count = intervals.get(key) || 0;
+    if (count > 1) {
+      intervals.set(key, count - 1);
+    } else {
+      intervals.delete(key);
+    }
+  }
+}

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.js

@@ -0,0 +1,100 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import isViewportEntryData from '../../utils/is-viewport-entry-data';
+import taskYield from '../../utils/task-yield';
+import calculateUnionArea from './calc-union-area';
+export default function calculateTTVCPercentiles(_x) {
+  return _calculateTTVCPercentiles.apply(this, arguments);
+}
+function _calculateTTVCPercentiles() {
+  _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var orderedEntries, viewport, percentiles, sortedPercentiles, viewportArea, checkpoints, activeRects, removeActiveRect, domElementsBuffer, i, iEntry, iEntryData, rect, elementName, exclusionArea, currentArea, currVCPercent, matchesAnyCheckpoints, _checkpoint, domElements;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          orderedEntries = _ref.orderedEntries, viewport = _ref.viewport, percentiles = _ref.percentiles;
+          sortedPercentiles = _toConsumableArray(percentiles).sort(function (a, b) {
+            return a - b;
+          });
+          viewportArea = viewport.width * viewport.height;
+          checkpoints = {};
+          activeRects = orderedEntries.filter(function (e) {
+            return isViewportEntryData(e.data);
+          }).map(function (e) {
+            return e.data.rect;
+          });
+          removeActiveRect = function removeActiveRect(rectToRemove) {
+            var index = activeRects.indexOf(rectToRemove);
+            // Check if the element exists in the array
+            if (index !== -1) {
+              // Remove the element at the found index
+              activeRects.splice(index, 1);
+            }
+          };
+          domElementsBuffer = new Set();
+          i = 0;
+        case 8:
+          if (!(i < orderedEntries.length)) {
+            _context.next = 36;
+            break;
+          }
+          iEntry = orderedEntries[i];
+          iEntryData = iEntry.data;
+          if (isViewportEntryData(iEntryData)) {
+            _context.next = 13;
+            break;
+          }
+          return _context.abrupt("continue", 33);
+        case 13:
+          rect = iEntryData.rect, elementName = iEntryData.elementName;
+          domElementsBuffer.add(elementName);
+          removeActiveRect(rect);
+          exclusionArea = calculateUnionArea(activeRects);
+          currentArea = viewportArea - exclusionArea;
+          currVCPercent = Math.round(currentArea / viewportArea * 100);
+          matchesAnyCheckpoints = false;
+        case 20:
+          if (!(sortedPercentiles.length > 0 && currVCPercent >= sortedPercentiles[0])) {
+            _context.next = 29;
+            break;
+          }
+          _checkpoint = sortedPercentiles.shift();
+          domElements = _toConsumableArray(domElementsBuffer);
+          if (_checkpoint) {
+            _context.next = 25;
+            break;
+          }
+          return _context.abrupt("break", 29);
+        case 25:
+          matchesAnyCheckpoints = true;
+          checkpoints[_checkpoint.toString()] = {
+            t: iEntry.time,
+            e: domElements
+          };
+          _context.next = 20;
+          break;
+        case 29:
+          if (matchesAnyCheckpoints) {
+            domElementsBuffer.clear();
+          }
+          if (!(i % 500 === 0)) {
+            _context.next = 33;
+            break;
+          }
+          _context.next = 33;
+          return taskYield();
+        case 33:
+          i++;
+          _context.next = 8;
+          break;
+        case 36:
+          return _context.abrupt("return", checkpoints);
+        case 37:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _calculateTTVCPercentiles.apply(this, arguments);
+}

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

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

package/dist/esm/vc/vc-observer-new/metric-calculator/types.js

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