@oliasoft-open-source/charts-library 4.8.0-beta-8 → 4.8.1-beta-1

package/dist/index.js

@@ -11,9 +11,9 @@ import cx from "classnames";
 import { Portal, Icon, Menu, Tooltip as Tooltip$2, Button, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Flex, Text } from "@oliasoft-open-source/react-ui-library";
 import { isEmpty, isArray as isArray$2, some, has, isNil, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, map as map$3, find, get as get$1, noop as noop$2 } from "lodash";
 /*!
- * @kurkle/color v0.3.2
+ * @kurkle/color v0.3.4
  * https://github.com/kurkle/color#readme
- * (c) 2023 Jukka Kurkela
+ * (c) 2024 Jukka Kurkela
  * Released under the MIT License
  */
 function round$1(v2) {
@@ -2341,9 +2341,9 @@ function parseMaxStyle$1(styleValue, node, parentProperty) {
   }
   return valueInPixels;
 }
-const getComputedStyle$1 = (element) => element.ownerDocument.defaultView.getComputedStyle(element, null);
+const getComputedStyle$2 = (element) => element.ownerDocument.defaultView.getComputedStyle(element, null);
 function getStyle$1(el, property) {
-  return getComputedStyle$1(el).getPropertyValue(property);
+  return getComputedStyle$2(el).getPropertyValue(property);
 }
 const positions$2 = [
   "top",
@@ -2389,7 +2389,7 @@ function getRelativePosition$2(event, chart2) {
     return event;
   }
   const { canvas: canvas2, currentDevicePixelRatio } = chart2;
-  const style = getComputedStyle$1(canvas2);
+  const style = getComputedStyle$2(canvas2);
   const borderBox = style.boxSizing === "border-box";
   const paddings = getPositionedStyle$1(style, "padding");
   const borders = getPositionedStyle$1(style, "border", "width");
@@ -2415,7 +2415,7 @@ function getContainerSize$1(canvas2, width, height) {
       height = canvas2.clientHeight;
     } else {
       const rect = container.getBoundingClientRect();
-      const containerStyle = getComputedStyle$1(container);
+      const containerStyle = getComputedStyle$2(container);
       const containerBorder = getPositionedStyle$1(containerStyle, "border", "width");
       const containerPadding = getPositionedStyle$1(containerStyle, "padding");
       width = rect.width - containerPadding.width - containerBorder.width;
@@ -2433,7 +2433,7 @@ function getContainerSize$1(canvas2, width, height) {
 }
 const round1$1 = (v2) => Math.round(v2 * 10) / 10;
 function getMaximumSize$1(canvas2, bbWidth, bbHeight, aspectRatio) {
-  const style = getComputedStyle$1(canvas2);
+  const style = getComputedStyle$2(canvas2);
   const margins = getPositionedStyle$1(style, "margin");
   const maxWidth = parseMaxStyle$1(style.maxWidth, canvas2, "clientWidth") || INFINITY$1;
   const maxHeight = parseMaxStyle$1(style.maxHeight, canvas2, "clientHeight") || INFINITY$1;
@@ -5242,7 +5242,6 @@ function getAxisItems$1(chart2, position, axis, intersect, useFinalPosition) {
   return items;
 }
 var Interaction$1 = {
-  evaluateInteractionItems: evaluateInteractionItems$1,
   modes: {
     index(chart2, e2, options, useFinalPosition) {
       const position = getRelativePosition$2(e2, chart2);
@@ -5504,7 +5503,6 @@ function placeBoxes$1(boxes, chartArea, params, stacks) {
   for (const layout2 of boxes) {
     const box = layout2.box;
     const stack = stacks[layout2.stack] || {
-      count: 1,
       placed: 0,
       weight: 1
     };
@@ -14923,9 +14921,9 @@ var hammer = { exports: {} };
 var hammerExports = hammer.exports;
 const Hammer = /* @__PURE__ */ getDefaultExportFromCjs(hammerExports);
 /*!
-* chartjs-plugin-zoom v2.0.1
-* undefined
- * (c) 2016-2023 chartjs-plugin-zoom Contributors
+* chartjs-plugin-zoom v2.2.0
+* https://www.chartjs.org/chartjs-plugin-zoom/2.2.0/
+ * (c) 2016-2024 chartjs-plugin-zoom Contributors
  * Released under the MIT License
  */
 const getModifierKey = (opts) => opts && opts.enabled && opts.modifierKey;
@@ -15002,7 +15000,9 @@ function getState(chart2) {
       originalScaleLimits: {},
       updatedScaleLimits: {},
       handlers: {},
-      panDelta: {}
+      panDelta: {},
+      dragging: false,
+      panning: false
     };
     chartStates$1.set(chart2, state);
   }
@@ -15011,20 +15011,43 @@ function getState(chart2) {
 function removeState(chart2) {
   chartStates$1.delete(chart2);
 }
-function zoomDelta(scale, zoom2, center) {
-  const range = scale.max - scale.min;
-  const newRange = range * (zoom2 - 1);
-  const centerPoint = scale.isHorizontal() ? center.x : center.y;
-  const minPercent = Math.max(0, Math.min(
-    1,
-    (scale.getValueForPixel(centerPoint) - scale.min) / range || 0
-  ));
+function zoomDelta(val, min, range, newRange) {
+  const minPercent = Math.max(0, Math.min(1, (val - min) / range || 0));
   const maxPercent = 1 - minPercent;
   return {
     min: newRange * minPercent,
     max: newRange * maxPercent
   };
 }
+function getValueAtPoint(scale, point) {
+  const pixel = scale.isHorizontal() ? point.x : point.y;
+  return scale.getValueForPixel(pixel);
+}
+function linearZoomDelta(scale, zoom2, center) {
+  const range = scale.max - scale.min;
+  const newRange = range * (zoom2 - 1);
+  const centerValue = getValueAtPoint(scale, center);
+  return zoomDelta(centerValue, scale.min, range, newRange);
+}
+function logarithmicZoomRange(scale, zoom2, center) {
+  const centerValue = getValueAtPoint(scale, center);
+  if (centerValue === void 0) {
+    return { min: scale.min, max: scale.max };
+  }
+  const logMin = Math.log10(scale.min);
+  const logMax = Math.log10(scale.max);
+  const logCenter = Math.log10(centerValue);
+  const logRange = logMax - logMin;
+  const newLogRange = logRange * (zoom2 - 1);
+  const delta = zoomDelta(logCenter, logMin, logRange, newLogRange);
+  return {
+    min: Math.pow(10, logMin + delta.min),
+    max: Math.pow(10, logMax - delta.max)
+  };
+}
+function getScaleLimits$1(scale, limits) {
+  return limits && (limits[scale.id] || limits[scale.axis]) || {};
+}
 function getLimit(state, scale, scaleLimits, prop, fallback) {
   let limit = scaleLimits[prop];
   if (limit === "original") {
@@ -15033,7 +15056,7 @@ function getLimit(state, scale, scaleLimits, prop, fallback) {
   }
   return valueOrDefault$1(limit, fallback);
 }
-function getRange(scale, pixel0, pixel1) {
+function linearRange(scale, pixel0, pixel1) {
   const v0 = scale.getValueForPixel(pixel0);
   const v1 = scale.getValueForPixel(pixel1);
   return {
@@ -15041,17 +15064,19 @@ function getRange(scale, pixel0, pixel1) {
     max: Math.max(v0, v1)
   };
 }
-function updateRange(scale, { min, max }, limits, zoom2 = false) {
-  const state = getState(scale.chart);
-  const { id, axis, options: scaleOpts } = scale;
-  const scaleLimits = limits && (limits[id] || limits[axis]) || {};
-  const { minRange = 0 } = scaleLimits;
-  const minLimit = getLimit(state, scale, scaleLimits, "min", -Infinity);
-  const maxLimit = getLimit(state, scale, scaleLimits, "max", Infinity);
-  const range = zoom2 ? Math.max(max - min, minRange) : scale.max - scale.min;
+function fixRange(range, { min, max, minLimit, maxLimit }, originalLimits) {
   const offset = (range - max + min) / 2;
   min -= offset;
   max += offset;
+  const origMin = originalLimits.min.options ?? originalLimits.min.scale;
+  const origMax = originalLimits.max.options ?? originalLimits.max.scale;
+  const epsilon = range / 1e6;
+  if (almostEquals$1(min, origMin, epsilon)) {
+    min = origMin;
+  }
+  if (almostEquals$1(max, origMax, epsilon)) {
+    max = origMax;
+  }
   if (min < minLimit) {
     min = minLimit;
     max = Math.min(minLimit + range, maxLimit);
@@ -15059,18 +15084,40 @@ function updateRange(scale, { min, max }, limits, zoom2 = false) {
     max = maxLimit;
     min = Math.max(maxLimit - range, minLimit);
   }
-  scaleOpts.min = min;
-  scaleOpts.max = max;
-  state.updatedScaleLimits[scale.id] = { min, max };
-  return scale.parse(min) !== scale.min || scale.parse(max) !== scale.max;
+  return { min, max };
+}
+function updateRange(scale, { min, max }, limits, zoom2 = false) {
+  const state = getState(scale.chart);
+  const { options: scaleOpts } = scale;
+  const scaleLimits = getScaleLimits$1(scale, limits);
+  const { minRange = 0 } = scaleLimits;
+  const minLimit = getLimit(state, scale, scaleLimits, "min", -Infinity);
+  const maxLimit = getLimit(state, scale, scaleLimits, "max", Infinity);
+  if (zoom2 === "pan" && (min < minLimit || max > maxLimit)) {
+    return true;
+  }
+  const scaleRange = scale.max - scale.min;
+  const range = zoom2 ? Math.max(max - min, minRange) : scaleRange;
+  if (zoom2 && range === minRange && scaleRange <= minRange) {
+    return true;
+  }
+  const newRange = fixRange(range, { min, max, minLimit, maxLimit }, state.originalScaleLimits[scale.id]);
+  scaleOpts.min = newRange.min;
+  scaleOpts.max = newRange.max;
+  state.updatedScaleLimits[scale.id] = newRange;
+  return scale.parse(newRange.min) !== scale.min || scale.parse(newRange.max) !== scale.max;
 }
 function zoomNumericalScale(scale, zoom2, center, limits) {
-  const delta = zoomDelta(scale, zoom2, center);
+  const delta = linearZoomDelta(scale, zoom2, center);
   const newRange = { min: scale.min + delta.min, max: scale.max - delta.max };
   return updateRange(scale, newRange, limits, true);
 }
+function zoomLogarithmicScale(scale, zoom2, center, limits) {
+  const newRange = logarithmicZoomRange(scale, zoom2, center);
+  return updateRange(scale, newRange, limits, true);
+}
 function zoomRectNumericalScale(scale, from2, to2, limits) {
-  updateRange(scale, getRange(scale, from2, to2), limits, true);
+  updateRange(scale, linearRange(scale, from2, to2), limits, true);
 }
 const integerChange = (v2) => v2 === 0 || isNaN(v2) ? 0 : v2 < 0 ? Math.min(Math.round(v2), -1) : Math.max(Math.round(v2), 1);
 function existCategoryFromMaxZoom(scale) {
@@ -15084,7 +15131,7 @@ function existCategoryFromMaxZoom(scale) {
   }
 }
 function zoomCategoryScale(scale, zoom2, center, limits) {
-  const delta = zoomDelta(scale, zoom2, center);
+  const delta = linearZoomDelta(scale, zoom2, center);
   if (scale.min === scale.max && zoom2 < 1) {
     existCategoryFromMaxZoom(scale);
   }
@@ -15115,40 +15162,32 @@ function panCategoryScale(scale, delta, limits) {
 }
 const OFFSETS = {
   second: 500,
-  // 500 ms
   minute: 30 * 1e3,
-  // 30 s
   hour: 30 * 60 * 1e3,
-  // 30 m
   day: 12 * 60 * 60 * 1e3,
-  // 12 h
   week: 3.5 * 24 * 60 * 60 * 1e3,
-  // 3.5 d
   month: 15 * 24 * 60 * 60 * 1e3,
-  // 15 d
   quarter: 60 * 24 * 60 * 60 * 1e3,
-  // 60 d
   year: 182 * 24 * 60 * 60 * 1e3
-  // 182 d
 };
-function panNumericalScale(scale, delta, limits, canZoom = false) {
+function panNumericalScale(scale, delta, limits, pan2 = false) {
   const { min: prevStart, max: prevEnd, options } = scale;
   const round2 = options.time && options.time.round;
   const offset = OFFSETS[round2] || 0;
   const newMin = scale.getValueForPixel(scale.getPixelForValue(prevStart + offset) - delta);
   const newMax = scale.getValueForPixel(scale.getPixelForValue(prevEnd + offset) - delta);
-  const { min: minLimit = -Infinity, max: maxLimit = Infinity } = canZoom && limits && limits[scale.axis] || {};
-  if (isNaN(newMin) || isNaN(newMax) || newMin < minLimit || newMax > maxLimit) {
+  if (isNaN(newMin) || isNaN(newMax)) {
     return true;
   }
-  return updateRange(scale, { min: newMin, max: newMax }, limits, canZoom);
+  return updateRange(scale, { min: newMin, max: newMax }, limits, pan2 ? "pan" : false);
 }
 function panNonLinearScale(scale, delta, limits) {
   return panNumericalScale(scale, delta, limits, true);
 }
 const zoomFunctions = {
   category: zoomCategoryScale,
-  default: zoomNumericalScale
+  default: zoomNumericalScale,
+  logarithmic: zoomLogarithmicScale
 };
 const zoomRectFunctions = {
   default: zoomRectNumericalScale
@@ -15193,9 +15232,9 @@ function doZoom(scale, amount, center, limits) {
   const fn = zoomFunctions[scale.type] || zoomFunctions.default;
   callback$1(fn, [scale, amount, center, limits]);
 }
-function doZoomRect(scale, amount, from2, to2, limits) {
+function doZoomRect(scale, from2, to2, limits) {
   const fn = zoomRectFunctions[scale.type] || zoomRectFunctions.default;
-  callback$1(fn, [scale, amount, from2, to2, limits]);
+  callback$1(fn, [scale, from2, to2, limits]);
 }
 function getCenter(chart2) {
   const ca = chart2.chartArea;
@@ -15204,7 +15243,7 @@ function getCenter(chart2) {
     y: (ca.top + ca.bottom) / 2
   };
 }
-function zoom(chart2, amount, transition = "none") {
+function zoom(chart2, amount, transition = "none", trigger = "api") {
   const { x: x2 = 1, y: y2 = 1, focalPoint = getCenter(chart2) } = typeof amount === "number" ? { x: amount, y: amount } : amount;
   const state = getState(chart2);
   const { options: { limits, zoom: zoomOptions } } = state;
@@ -15220,9 +15259,9 @@ function zoom(chart2, amount, transition = "none") {
     }
   });
   chart2.update(transition);
-  callback$1(zoomOptions.onZoom, [{ chart: chart2 }]);
+  callback$1(zoomOptions.onZoom, [{ chart: chart2, trigger }]);
 }
-function zoomRect(chart2, p0, p1, transition = "none") {
+function zoomRect(chart2, p0, p1, transition = "none", trigger = "api") {
   const state = getState(chart2);
   const { options: { limits, zoom: zoomOptions } } = state;
   const { mode = "xy" } = zoomOptions;
@@ -15237,13 +15276,16 @@ function zoomRect(chart2, p0, p1, transition = "none") {
     }
   });
   chart2.update(transition);
-  callback$1(zoomOptions.onZoom, [{ chart: chart2 }]);
+  callback$1(zoomOptions.onZoom, [{ chart: chart2, trigger }]);
 }
-function zoomScale(chart2, scaleId, range, transition = "none") {
-  storeOriginalScaleLimits(chart2, getState(chart2));
+function zoomScale(chart2, scaleId, range, transition = "none", trigger = "api") {
+  var _a2;
+  const state = getState(chart2);
+  storeOriginalScaleLimits(chart2, state);
   const scale = chart2.scales[scaleId];
   updateRange(scale, range, void 0, true);
   chart2.update(transition);
+  callback$1((_a2 = state.options.zoom) == null ? void 0 : _a2.onZoom, [{ chart: chart2, trigger }]);
 }
 function resetZoom(chart2, transition = "default") {
   const state = getState(chart2);
@@ -15257,6 +15299,7 @@ function resetZoom(chart2, transition = "default") {
       delete scaleOptions.min;
       delete scaleOptions.max;
     }
+    delete state.updatedScaleLimits[scale.id];
   });
   chart2.update(transition);
   callback$1(state.options.zoom.onZoomComplete, [{ chart: chart2 }]);
@@ -15324,6 +15367,14 @@ function getInitialScaleBounds(chart2) {
   }
   return scaleBounds;
 }
+function getZoomedScaleBounds(chart2) {
+  const state = getState(chart2);
+  const scaleBounds = {};
+  for (const scaleId of Object.keys(chart2.scales)) {
+    scaleBounds[scaleId] = state.updatedScaleLimits[scaleId];
+  }
+  return scaleBounds;
+}
 function isZoomedOrPanned(chart2) {
   const scaleBounds = getInitialScaleBounds(chart2);
   for (const scaleId of Object.keys(chart2.scales)) {
@@ -15337,6 +15388,11 @@ function isZoomedOrPanned(chart2) {
   }
   return false;
 }
+function isZoomingOrPanning(chart2) {
+  const state = getState(chart2);
+  return state.panning || state.dragging;
+}
+const clamp$1 = (x2, from2, to2) => Math.min(to2, Math.max(from2, x2));
 function removeHandler(chart2, type) {
   const { handlers } = getState(chart2);
   const handler = handlers[type];
@@ -15354,7 +15410,8 @@ function addHandler(chart2, target, type, handler) {
   removeHandler(chart2, type);
   handlers[type] = (event) => handler(chart2, event, options);
   handlers[type].target = target;
-  target.addEventListener(type, handlers[type]);
+  const passive = type === "wheel" ? false : void 0;
+  target.addEventListener(type, handlers[type], { passive });
 }
 function mouseMove(chart2, event) {
   const state = getState(chart2);
@@ -15374,10 +15431,20 @@ function keyDown(chart2, event) {
   state.dragStart = state.dragEnd = null;
   chart2.update("none");
 }
+function getPointPosition(event, chart2) {
+  if (event.target !== chart2.canvas) {
+    const canvasArea = chart2.canvas.getBoundingClientRect();
+    return {
+      x: event.clientX - canvasArea.left,
+      y: event.clientY - canvasArea.top
+    };
+  }
+  return getRelativePosition$2(event, chart2);
+}
 function zoomStart(chart2, event, zoomOptions) {
   const { onZoomStart, onZoomRejected } = zoomOptions;
   if (onZoomStart) {
-    const point = getRelativePosition$2(event, chart2);
+    const point = getPointPosition(event, chart2);
     if (callback$1(onZoomStart, [{ chart: chart2, event, point }]) === false) {
       callback$1(onZoomRejected, [{ chart: chart2, event }]);
       return false;
@@ -15385,6 +15452,12 @@ function zoomStart(chart2, event, zoomOptions) {
   }
 }
 function mouseDown(chart2, event) {
+  if (chart2.legend) {
+    const point = getRelativePosition$2(event, chart2);
+    if (_isPointInArea$1(point, chart2.legend)) {
+      return;
+    }
+  }
   const state = getState(chart2);
   const { pan: panOptions, zoom: zoomOptions = {} } = state.options;
   if (event.button !== 0 || keyPressed(getModifierKey(panOptions), event) || keyNotPressed(getModifierKey(zoomOptions.drag), event)) {
@@ -15394,30 +15467,52 @@ function mouseDown(chart2, event) {
     return;
   }
   state.dragStart = event;
-  addHandler(chart2, chart2.canvas, "mousemove", mouseMove);
+  addHandler(chart2, chart2.canvas.ownerDocument, "mousemove", mouseMove);
   addHandler(chart2, window.document, "keydown", keyDown);
 }
-function computeDragRect(chart2, mode, beginPointEvent, endPointEvent) {
+function applyAspectRatio({ begin, end }, aspectRatio) {
+  let width = end.x - begin.x;
+  let height = end.y - begin.y;
+  const ratio = Math.abs(width / height);
+  if (ratio > aspectRatio) {
+    width = Math.sign(width) * Math.abs(height * aspectRatio);
+  } else if (ratio < aspectRatio) {
+    height = Math.sign(height) * Math.abs(width / aspectRatio);
+  }
+  end.x = begin.x + width;
+  end.y = begin.y + height;
+}
+function applyMinMaxProps(rect, chartArea, points, { min, max, prop }) {
+  rect[min] = clamp$1(Math.min(points.begin[prop], points.end[prop]), chartArea[min], chartArea[max]);
+  rect[max] = clamp$1(Math.max(points.begin[prop], points.end[prop]), chartArea[min], chartArea[max]);
+}
+function getRelativePoints(chart2, pointEvents, maintainAspectRatio) {
+  const points = {
+    begin: getPointPosition(pointEvents.dragStart, chart2),
+    end: getPointPosition(pointEvents.dragEnd, chart2)
+  };
+  if (maintainAspectRatio) {
+    const aspectRatio = chart2.chartArea.width / chart2.chartArea.height;
+    applyAspectRatio(points, aspectRatio);
+  }
+  return points;
+}
+function computeDragRect(chart2, mode, pointEvents, maintainAspectRatio) {
   const xEnabled = directionEnabled(mode, "x", chart2);
   const yEnabled = directionEnabled(mode, "y", chart2);
-  let { top: top2, left: left2, right: right2, bottom: bottom2, width: chartWidth, height: chartHeight } = chart2.chartArea;
-  const beginPoint = getRelativePosition$2(beginPointEvent, chart2);
-  const endPoint = getRelativePosition$2(endPointEvent, chart2);
+  const { top: top2, left: left2, right: right2, bottom: bottom2, width: chartWidth, height: chartHeight } = chart2.chartArea;
+  const rect = { top: top2, left: left2, right: right2, bottom: bottom2 };
+  const points = getRelativePoints(chart2, pointEvents, maintainAspectRatio && xEnabled && yEnabled);
   if (xEnabled) {
-    left2 = Math.min(beginPoint.x, endPoint.x);
-    right2 = Math.max(beginPoint.x, endPoint.x);
+    applyMinMaxProps(rect, chart2.chartArea, points, { min: "left", max: "right", prop: "x" });
   }
   if (yEnabled) {
-    top2 = Math.min(beginPoint.y, endPoint.y);
-    bottom2 = Math.max(beginPoint.y, endPoint.y);
+    applyMinMaxProps(rect, chart2.chartArea, points, { min: "top", max: "bottom", prop: "y" });
   }
-  const width = right2 - left2;
-  const height = bottom2 - top2;
+  const width = rect.right - rect.left;
+  const height = rect.bottom - rect.top;
   return {
-    left: left2,
-    top: top2,
-    right: right2,
-    bottom: bottom2,
+    ...rect,
     width,
     height,
     zoomX: xEnabled && width ? 1 + (chartWidth - width) / chartWidth : 1,
@@ -15430,8 +15525,8 @@ function mouseUp(chart2, event) {
     return;
   }
   removeHandler(chart2, "mousemove");
-  const { mode, onZoomComplete, drag: { threshold = 0 } } = state.options.zoom;
-  const rect = computeDragRect(chart2, mode, state.dragStart, event);
+  const { mode, onZoomComplete, drag: { threshold = 0, maintainAspectRatio } } = state.options.zoom;
+  const rect = computeDragRect(chart2, mode, { dragStart: state.dragStart, dragEnd: event }, maintainAspectRatio);
   const distanceX = directionEnabled(mode, "x", chart2) ? rect.width : 0;
   const distanceY = directionEnabled(mode, "y", chart2) ? rect.height : 0;
   const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
@@ -15441,8 +15536,9 @@ function mouseUp(chart2, event) {
     chart2.update("none");
     return;
   }
-  zoomRect(chart2, { x: rect.left, y: rect.top }, { x: rect.right, y: rect.bottom }, "zoom");
-  setTimeout(() => state.dragging = false, 500);
+  zoomRect(chart2, { x: rect.left, y: rect.top }, { x: rect.right, y: rect.bottom }, "zoom", "drag");
+  state.dragging = false;
+  state.filterNextClick = true;
   callback$1(onZoomComplete, [{ chart: chart2 }]);
 }
 function wheelPreconditions(chart2, event, zoomOptions) {
@@ -15467,19 +15563,18 @@ function wheel(chart2, event) {
     return;
   }
   const rect = event.target.getBoundingClientRect();
-  const speed = 1 + (event.deltaY >= 0 ? -zoomOptions.wheel.speed : zoomOptions.wheel.speed);
+  const speed = zoomOptions.wheel.speed;
+  const percentage = event.deltaY >= 0 ? 2 - 1 / (1 - speed) : 1 + speed;
   const amount = {
-    x: speed,
-    y: speed,
+    x: percentage,
+    y: percentage,
     focalPoint: {
       x: event.clientX - rect.left,
       y: event.clientY - rect.top
     }
   };
-  zoom(chart2, amount);
-  if (onZoomComplete) {
-    onZoomComplete();
-  }
+  zoom(chart2, amount, "zoom", "wheel");
+  callback$1(onZoomComplete, [{ chart: chart2 }]);
 }
 function addDebouncedHandler(chart2, name, handler, delay) {
   if (handler) {
@@ -15559,13 +15654,19 @@ function handlePinch(chart2, state, e2) {
         y: center.y - rect.top
       }
     };
-    zoom(chart2, amount);
+    zoom(chart2, amount, "zoom", "pinch");
     state.scale = e2.scale;
   }
 }
-function startPinch(chart2, state) {
+function startPinch(chart2, state, event) {
   if (state.options.zoom.pinch.enabled) {
-    state.scale = 1;
+    const point = getRelativePosition$2(event, chart2);
+    if (callback$1(state.options.zoom.onZoomStart, [{ chart: chart2, event, point }]) === false) {
+      state.scale = null;
+      callback$1(state.options.zoom.onZoomRejected, [{ chart: chart2, event }]);
+    } else {
+      state.scale = 1;
+    }
   }
 }
 function endPinch(chart2, state, e2) {
@@ -15598,13 +15699,13 @@ function startPan(chart2, state, event) {
   }
   state.panScales = getEnabledScalesByPoint(state.options.pan, point, chart2);
   state.delta = { x: 0, y: 0 };
-  clearTimeout(state.panEndTimeout);
   handlePan(chart2, state, event);
 }
 function endPan(chart2, state) {
   state.delta = null;
   if (state.panning) {
-    state.panEndTimeout = setTimeout(() => state.panning = false, 500);
+    state.panning = false;
+    state.filterNextClick = true;
     callback$1(state.options.pan.onPanComplete, [{ chart: chart2 }]);
   }
 }
@@ -15616,7 +15717,7 @@ function startHammer(chart2, options) {
   const mc = new Hammer.Manager(canvas2);
   if (zoomOptions && zoomOptions.pinch.enabled) {
     mc.add(new Hammer.Pinch());
-    mc.on("pinchstart", () => startPinch(chart2, state));
+    mc.on("pinchstart", (e2) => startPinch(chart2, state, e2));
     mc.on("pinch", (e2) => handlePinch(chart2, state, e2));
     mc.on("pinchend", (e2) => endPinch(chart2, state, e2));
   }
@@ -15644,14 +15745,29 @@ function stopHammer(chart2) {
     hammers.delete(chart2);
   }
 }
-var version$2 = "2.0.1";
+function hammerOptionsChanged(oldOptions, newOptions) {
+  var _a2, _b2, _c2, _d2;
+  const { pan: oldPan, zoom: oldZoom } = oldOptions;
+  const { pan: newPan, zoom: newZoom } = newOptions;
+  if (((_b2 = (_a2 = oldZoom == null ? void 0 : oldZoom.zoom) == null ? void 0 : _a2.pinch) == null ? void 0 : _b2.enabled) !== ((_d2 = (_c2 = newZoom == null ? void 0 : newZoom.zoom) == null ? void 0 : _c2.pinch) == null ? void 0 : _d2.enabled)) {
+    return true;
+  }
+  if ((oldPan == null ? void 0 : oldPan.enabled) !== (newPan == null ? void 0 : newPan.enabled)) {
+    return true;
+  }
+  if ((oldPan == null ? void 0 : oldPan.threshold) !== (newPan == null ? void 0 : newPan.threshold)) {
+    return true;
+  }
+  return false;
+}
+var version$2 = "2.2.0";
 function draw$2(chart2, caller, options) {
   const dragOptions = options.zoom.drag;
   const { dragStart, dragEnd } = getState(chart2);
   if (dragOptions.drawTime !== caller || !dragEnd) {
     return;
   }
-  const { left: left2, top: top2, width, height } = computeDragRect(chart2, options.zoom.mode, dragStart, dragEnd);
+  const { left: left2, top: top2, width, height } = computeDragRect(chart2, options.zoom.mode, { dragStart, dragEnd }, dragOptions.maintainAspectRatio);
   const ctx = chart2.ctx;
   ctx.save();
   ctx.beginPath();
@@ -15710,17 +15826,30 @@ var plugin$1 = {
     chart2.resetZoom = (transition) => resetZoom(chart2, transition);
     chart2.getZoomLevel = () => getZoomLevel(chart2);
     chart2.getInitialScaleBounds = () => getInitialScaleBounds(chart2);
+    chart2.getZoomedScaleBounds = () => getZoomedScaleBounds(chart2);
     chart2.isZoomedOrPanned = () => isZoomedOrPanned(chart2);
+    chart2.isZoomingOrPanning = () => isZoomingOrPanning(chart2);
   },
-  beforeEvent(chart2) {
-    const state = getState(chart2);
-    if (state.panning || state.dragging) {
+  beforeEvent(chart2, { event }) {
+    if (isZoomingOrPanning(chart2)) {
       return false;
     }
+    if (event.type === "click" || event.type === "mouseup") {
+      const state = getState(chart2);
+      if (state.filterNextClick) {
+        state.filterNextClick = false;
+        return false;
+      }
+    }
   },
   beforeUpdate: function(chart2, args, options) {
     const state = getState(chart2);
+    const previousOptions = state.options;
     state.options = options;
+    if (hammerOptionsChanged(previousOptions, options)) {
+      stopHammer(chart2);
+      startHammer(chart2, options);
+    }
     addListeners(chart2, options);
   },
   beforeDatasetsDraw(chart2, _args, options) {
@@ -17632,7 +17761,7 @@ function resolveLimitedLineProperties(scales, area, options) {
 }
 function calculateX({ properties, options }, labelSize, position, padding) {
   const { x: start, x2: end, width: size } = properties;
-  return calculatePosition({ start, end, size, borderWidth: options.borderWidth }, {
+  return calculatePosition({ start, end, borderWidth: options.borderWidth }, {
     position: position.x,
     padding: { start: padding.left, end: padding.right },
     adjust: options.label.xAdjust,
@@ -17641,7 +17770,7 @@ function calculateX({ properties, options }, labelSize, position, padding) {
 }
 function calculateY({ properties, options }, labelSize, position, padding) {
   const { y: start, y2: end, height: size } = properties;
-  return calculatePosition({ start, end, size, borderWidth: options.borderWidth }, {
+  return calculatePosition({ start, end, borderWidth: options.borderWidth }, {
     position: position.y,
     padding: { start: padding.top, end: padding.bottom },
     adjust: options.label.yAdjust,
@@ -19237,10 +19366,7 @@ var randomString = function randomString2() {
 };
 var ActionTypes = {
   INIT: "@@redux/INIT" + randomString(),
-  REPLACE: "@@redux/REPLACE" + randomString(),
-  PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
-    return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
-  }
+  REPLACE: "@@redux/REPLACE" + randomString()
 };
 function isPlainObject(obj) {
   if (typeof obj !== "object" || obj === null) return false;
@@ -22390,10 +22516,6 @@ const canvas$2 = "_canvas_e3qdd_11";
 const fixedHeight$3 = "_fixedHeight_e3qdd_20";
 const stretchHeight$3 = "_stretchHeight_e3qdd_26";
 const squareAspectRatio$1 = "_squareAspectRatio_e3qdd_32";
-const zoomForm$3 = "_zoomForm_e3qdd_43";
-const zoomReset$3 = "_zoomReset_e3qdd_51";
-const help$3 = "_help_e3qdd_54";
-const autoWeight$3 = "_autoWeight_e3qdd_58";
 const table = "_table_e3qdd_62";
 const styles$5 = {
   chart: chart$3,
@@ -22401,10 +22523,6 @@ const styles$5 = {
   fixedHeight: fixedHeight$3,
   stretchHeight: stretchHeight$3,
   squareAspectRatio: squareAspectRatio$1,
-  zoomForm: zoomForm$3,
-  zoomReset: zoomReset$3,
-  help: help$3,
-  autoWeight: autoWeight$3,
   table
 };
 const TOGGLE_ZOOM = "TOGGLE_ZOOM";
@@ -22718,7 +22836,6 @@ const WHITE_COLOR_AS_DECIMAL = 16777215;
 const AUTO = "auto";
 const ANIMATION_DURATION = {
   NO: 0,
-  SLOW: 400,
   FAST: 1e3
 };
 const DEFAULT_CHART_NAME = "new_chart";
@@ -23197,31 +23314,31 @@ function IconBase(props) {
   }) : elem(DefaultContext);
 }
 function TbArrowsMove(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M18 9l3 3l-3 3" } }, { "tag": "path", "attr": { "d": "M15 12h6" } }, { "tag": "path", "attr": { "d": "M6 9l-3 3l3 3" } }, { "tag": "path", "attr": { "d": "M3 12h6" } }, { "tag": "path", "attr": { "d": "M9 18l3 3l3 -3" } }, { "tag": "path", "attr": { "d": "M12 15v6" } }, { "tag": "path", "attr": { "d": "M15 6l-3 -3l-3 3" } }, { "tag": "path", "attr": { "d": "M12 3v6" } }] })(props);
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M18 9l3 3l-3 3" } }, { "tag": "path", "attr": { "d": "M15 12h6" } }, { "tag": "path", "attr": { "d": "M6 9l-3 3l3 3" } }, { "tag": "path", "attr": { "d": "M3 12h6" } }, { "tag": "path", "attr": { "d": "M9 18l3 3l3 -3" } }, { "tag": "path", "attr": { "d": "M12 15v6" } }, { "tag": "path", "attr": { "d": "M15 6l-3 -3l-3 3" } }, { "tag": "path", "attr": { "d": "M12 3v6" } }] })(props);
 }
 function TbBan(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" } }, { "tag": "path", "attr": { "d": "M5.7 5.7l12.6 12.6" } }] })(props);
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" } }, { "tag": "path", "attr": { "d": "M5.7 5.7l12.6 12.6" } }] })(props);
 }
 function TbCircleFilled(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z", "strokeWidth": "0", "fill": "currentColor" } }] })(props);
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z", "strokeWidth": "0", "fill": "currentColor" } }] })(props);
 }
 function TbHandStop(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" } }, { "tag": "path", "attr": { "d": "M14 5.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" } }] })(props);
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" } }, { "tag": "path", "attr": { "d": "M14 5.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" } }] })(props);
 }
 function TbList(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M9 6l11 0" } }, { "tag": "path", "attr": { "d": "M9 12l11 0" } }, { "tag": "path", "attr": { "d": "M9 18l11 0" } }, { "tag": "path", "attr": { "d": "M5 6l0 .01" } }, { "tag": "path", "attr": { "d": "M5 12l0 .01" } }, { "tag": "path", "attr": { "d": "M5 18l0 .01" } }] })(props);
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M9 6l11 0" } }, { "tag": "path", "attr": { "d": "M9 12l11 0" } }, { "tag": "path", "attr": { "d": "M9 18l11 0" } }, { "tag": "path", "attr": { "d": "M5 6l0 .01" } }, { "tag": "path", "attr": { "d": "M5 12l0 .01" } }, { "tag": "path", "attr": { "d": "M5 18l0 .01" } }] })(props);
 }
 function TbRuler(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-7a1 1 0 0 0 -1 1v7a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1" } }, { "tag": "path", "attr": { "d": "M4 8l2 0" } }, { "tag": "path", "attr": { "d": "M4 12l3 0" } }, { "tag": "path", "attr": { "d": "M4 16l2 0" } }, { "tag": "path", "attr": { "d": "M8 4l0 2" } }, { "tag": "path", "attr": { "d": "M12 4l0 3" } }, { "tag": "path", "attr": { "d": "M16 4l0 2" } }] })(props);
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-7a1 1 0 0 0 -1 1v7a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1" } }, { "tag": "path", "attr": { "d": "M4 8l2 0" } }, { "tag": "path", "attr": { "d": "M4 12l3 0" } }, { "tag": "path", "attr": { "d": "M4 16l2 0" } }, { "tag": "path", "attr": { "d": "M8 4l0 2" } }, { "tag": "path", "attr": { "d": "M12 4l0 3" } }, { "tag": "path", "attr": { "d": "M16 4l0 2" } }] })(props);
 }
 function TbSquareFilled(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M19 2h-14a3 3 0 0 0 -3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3 -3v-14a3 3 0 0 0 -3 -3z", "strokeWidth": "0", "fill": "currentColor" } }] })(props);
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M19 2h-14a3 3 0 0 0 -3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3 -3v-14a3 3 0 0 0 -3 -3z", "strokeWidth": "0", "fill": "currentColor" } }] })(props);
 }
 function TbX(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M18 6l-12 12" } }, { "tag": "path", "attr": { "d": "M6 6l12 12" } }] })(props);
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M18 6l-12 12" } }, { "tag": "path", "attr": { "d": "M6 6l12 12" } }] })(props);
 }
 function TbZoomIn(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" } }, { "tag": "path", "attr": { "d": "M7 10l6 0" } }, { "tag": "path", "attr": { "d": "M10 7l0 6" } }, { "tag": "path", "attr": { "d": "M21 21l-6 -6" } }] })(props);
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" } }, { "tag": "path", "attr": { "d": "M7 10l6 0" } }, { "tag": "path", "attr": { "d": "M10 7l0 6" } }, { "tag": "path", "attr": { "d": "M21 21l-6 -6" } }] })(props);
 }
 function getDragOptions({
   onTogglePan,
@@ -23442,8 +23559,11 @@ function checkCanvasDimensions(canvas2) {
 function createImage(url) {
   return new Promise((resolve2, reject) => {
     const img = new Image();
-    img.decode = () => resolve2(img);
-    img.onload = () => resolve2(img);
+    img.onload = () => {
+      img.decode().then(() => {
+        requestAnimationFrame(() => resolve2(img));
+      });
+    };
     img.onerror = reject;
     img.crossOrigin = "anonymous";
     img.decoding = "async";
@@ -23647,11 +23767,15 @@ async function cloneSingleNode(node, options) {
   if (isInstanceOfElement(node, HTMLIFrameElement)) {
     return cloneIFrameElement(node);
   }
-  return node.cloneNode(false);
+  return node.cloneNode(isSVGElement(node));
 }
 const isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SLOT";
+const isSVGElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SVG";
 async function cloneChildren(nativeNode, clonedNode, options) {
   var _a2, _b2;
+  if (isSVGElement(clonedNode)) {
+    return clonedNode;
+  }
   let children = [];
   if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
     children = toArray(nativeNode.assignedNodes());
@@ -23844,7 +23968,13 @@ async function embedImageNode(clonedNode, options) {
   const dataURL = await resourceToDataURL(url, getMimeType(url), options);
   await new Promise((resolve2, reject) => {
     clonedNode.onload = resolve2;
-    clonedNode.onerror = reject;
+    clonedNode.onerror = options.onImageErrorHandler ? (...attributes) => {
+      try {
+        resolve2(options.onImageErrorHandler(...attributes));
+      } catch (error) {
+        reject(error);
+      }
+    } : reject;
     const image = clonedNode;
     if (image.decode) {
       image.decode = resolve2;
@@ -24018,9 +24148,29 @@ async function parseWebFontRules(node, options) {
   const cssRules = await getCSSRules(styleSheets, options);
   return getWebFontRules(cssRules);
 }
+function normalizeFontFamily(font) {
+  return font.trim().replace(/["']/g, "");
+}
+function getUsedFonts(node) {
+  const fonts = /* @__PURE__ */ new Set();
+  function traverse(node2) {
+    const fontFamily = node2.style.fontFamily || getComputedStyle(node2).fontFamily;
+    fontFamily.split(",").forEach((font) => {
+      fonts.add(normalizeFontFamily(font));
+    });
+    Array.from(node2.children).forEach((child) => {
+      if (child instanceof HTMLElement) {
+        traverse(child);
+      }
+    });
+  }
+  traverse(node);
+  return fonts;
+}
 async function getWebFontCSS(node, options) {
   const rules = await parseWebFontRules(node, options);
-  const cssTexts = await Promise.all(rules.map((rule) => {
+  const usedFonts = getUsedFonts(node);
+  const cssTexts = await Promise.all(rules.filter((rule) => usedFonts.has(normalizeFontFamily(rule.style.fontFamily))).map((rule) => {
     const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null;
     return embedResources(rule.cssText, baseUrl, options);
   }));
@@ -26175,22 +26325,37 @@ const useUpdateAxesRanges = ({
 const useSaveInitialAxesRanges = (chartRef, dispatch, generatedDatasets) => {
   var _a2;
   const prevDatasets = useRef(null);
+  const getDatasetsHash = (datasets) => {
+    if (!datasets.length) return "";
+    const datasetHashes = datasets.map((dataset) => {
+      const data = dataset.data ?? [];
+      if (!data.length) return "empty";
+      const firstDataPoint = data.at(0);
+      const lastDataPoint = data.at(-1);
+      return `${firstDataPoint}-${lastDataPoint}`;
+    });
+    return `${datasets.length}-${datasetHashes.join("|")}`;
+  };
   useEffect(() => {
-    var _a3, _b2;
-    if (((_a3 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a3.scales) && !isEqual(prevDatasets.current, generatedDatasets)) {
-      const scales = ((_b2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _b2.scales) ?? {};
-      const initialAxesRanges = Object.entries(scales).map(
-        ([id, { min, max, _range: range }]) => ({
-          id,
-          min: (range == null ? void 0 : range.min) ?? min,
-          max: (range == null ? void 0 : range.max) ?? max
-        })
-      );
-      dispatch({
-        type: SAVE_INITIAL_AXES_RANGES,
-        payload: { initialAxesRanges }
-      });
-      prevDatasets.current = generatedDatasets;
+    var _a3;
+    if ((_a3 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a3.scales) {
+      const prevHash = prevDatasets.current ? getDatasetsHash(prevDatasets.current) : "";
+      const currentHash = getDatasetsHash(generatedDatasets);
+      if (prevHash !== currentHash) {
+        const scales = chartRef.current.scales;
+        const initialAxesRanges = Object.entries(scales).map(
+          ([id, { min, max, _range: range }]) => ({
+            id,
+            min: (range == null ? void 0 : range.min) ?? min,
+            max: (range == null ? void 0 : range.max) ?? max
+          })
+        );
+        dispatch({
+          type: SAVE_INITIAL_AXES_RANGES,
+          payload: { initialAxesRanges }
+        });
+        prevDatasets.current = generatedDatasets;
+      }
     }
   }, [(_a2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a2.scales, generatedDatasets]);
 };
@@ -26850,7 +27015,6 @@ const legendItemBox = "_legendItemBox_wpro0_90";
 const legendItemLine = "_legendItemLine_wpro0_95";
 const legendItemPoint = "_legendItemPoint_wpro0_103";
 const legendItemText = "_legendItemText_wpro0_110";
-const scrollbars = "_scrollbars_wpro0_113";
 const dropzoneContainer = "_dropzoneContainer_wpro0_140";
 const dropzone = "_dropzone_wpro0_140";
 const left = "_left_wpro0_149";
@@ -26872,7 +27036,6 @@ const styles$3 = {
   legendItemLine,
   legendItemPoint,
   legendItemText,
-  scrollbars,
   dropzoneContainer,
   dropzone,
   left,
@@ -27412,18 +27575,10 @@ const initializeLineChart = ({ languageKey = "en", ...options }) => {
 const chart$2 = "_chart_1jdnu_1";
 const fixedHeight$2 = "_fixedHeight_1jdnu_13";
 const stretchHeight$2 = "_stretchHeight_1jdnu_19";
-const zoomForm$2 = "_zoomForm_1jdnu_32";
-const zoomReset$2 = "_zoomReset_1jdnu_40";
-const help$2 = "_help_1jdnu_43";
-const autoWeight$2 = "_autoWeight_1jdnu_47";
 const styles$2 = {
   chart: chart$2,
   fixedHeight: fixedHeight$2,
-  stretchHeight: stretchHeight$2,
-  zoomForm: zoomForm$2,
-  zoomReset: zoomReset$2,
-  help: help$2,
-  autoWeight: autoWeight$2
+  stretchHeight: stretchHeight$2
 };
 const defaultChartStyling$2 = (styling) => ({
   width: styling == null ? void 0 : styling.width,
@@ -29779,9 +29934,9 @@ function parseMaxStyle(styleValue, node, parentProperty) {
   }
   return valueInPixels;
 }
-const getComputedStyle = (element) => window.getComputedStyle(element, null);
+const getComputedStyle$1 = (element) => window.getComputedStyle(element, null);
 function getStyle(el, property) {
-  return getComputedStyle(el).getPropertyValue(property);
+  return getComputedStyle$1(el).getPropertyValue(property);
 }
 const positions = ["top", "right", "bottom", "left"];
 function getPositionedStyle(styles2, style, suffix) {
@@ -29818,7 +29973,7 @@ function getRelativePosition(evt, chart2) {
     return evt;
   }
   const { canvas: canvas2, currentDevicePixelRatio } = chart2;
-  const style = getComputedStyle(canvas2);
+  const style = getComputedStyle$1(canvas2);
   const borderBox = style.boxSizing === "border-box";
   const paddings = getPositionedStyle(style, "padding");
   const borders = getPositionedStyle(style, "border", "width");
@@ -29844,7 +29999,7 @@ function getContainerSize(canvas2, width, height) {
       height = canvas2.clientHeight;
     } else {
       const rect = container.getBoundingClientRect();
-      const containerStyle = getComputedStyle(container);
+      const containerStyle = getComputedStyle$1(container);
       const containerBorder = getPositionedStyle(containerStyle, "border", "width");
       const containerPadding = getPositionedStyle(containerStyle, "padding");
       width = rect.width - containerPadding.width - containerBorder.width;
@@ -29862,7 +30017,7 @@ function getContainerSize(canvas2, width, height) {
 }
 const round1 = (v2) => Math.round(v2 * 10) / 10;
 function getMaximumSize(canvas2, bbWidth, bbHeight, aspectRatio) {
-  const style = getComputedStyle(canvas2);
+  const style = getComputedStyle$1(canvas2);
   const margins = getPositionedStyle(style, "margin");
   const maxWidth = parseMaxStyle(style.maxWidth, canvas2, "clientWidth") || INFINITY;
   const maxHeight = parseMaxStyle(style.maxHeight, canvas2, "clientHeight") || INFINITY;
@@ -34503,7 +34658,6 @@ function getAxisItems(chart2, position, axis, intersect, useFinalPosition) {
   return items;
 }
 var Interaction = {
-  evaluateInteractionItems,
   modes: {
     index(chart2, e2, options, useFinalPosition) {
       const position = getRelativePosition(e2, chart2);
@@ -34730,7 +34884,7 @@ function placeBoxes(boxes, chartArea, params, stacks) {
   let { x: x2, y: y2 } = chartArea;
   for (const layout2 of boxes) {
     const box = layout2.box;
-    const stack = stacks[layout2.stack] || { count: 1, placed: 0, weight: 1 };
+    const stack = stacks[layout2.stack] || { placed: 0, weight: 1 };
     const weight = layout2.stackWeight / stack.weight || 1;
     if (layout2.horizontal) {
       const width = chartArea.w * weight;
@@ -40357,20 +40511,12 @@ const chart$1 = "_chart_x1sru_1";
 const canvas$1 = "_canvas_x1sru_10";
 const fixedHeight$1 = "_fixedHeight_x1sru_19";
 const stretchHeight$1 = "_stretchHeight_x1sru_25";
-const zoomForm$1 = "_zoomForm_x1sru_38";
-const zoomReset$1 = "_zoomReset_x1sru_46";
-const help$1 = "_help_x1sru_49";
-const autoWeight$1 = "_autoWeight_x1sru_53";
 const actions = "_actions_x1sru_57";
 const styles$1 = {
   chart: chart$1,
   canvas: canvas$1,
   fixedHeight: fixedHeight$1,
   stretchHeight: stretchHeight$1,
-  zoomForm: zoomForm$1,
-  zoomReset: zoomReset$1,
-  help: help$1,
-  autoWeight: autoWeight$1,
   actions
 };
 const defaultAxes$1 = (axes) => ({
@@ -40887,20 +41033,12 @@ const canvas = "_canvas_1qlu1_11";
 const fixedHeight = "_fixedHeight_1qlu1_20";
 const stretchHeight = "_stretchHeight_1qlu1_26";
 const squareAspectRatio = "_squareAspectRatio_1qlu1_32";
-const zoomForm = "_zoomForm_1qlu1_43";
-const zoomReset = "_zoomReset_1qlu1_51";
-const help = "_help_1qlu1_54";
-const autoWeight = "_autoWeight_1qlu1_58";
 const styles = {
   chart,
   canvas,
   fixedHeight,
   stretchHeight,
-  squareAspectRatio,
-  zoomForm,
-  zoomReset,
-  help,
-  autoWeight
+  squareAspectRatio
 };
 Chart$2.register(
   LinearScale$1,