@oliasoft-open-source/charts-library 4.4.0-beta-1 → 4.4.0

package/dist/index.js

@@ -6,12 +6,13 @@ var __publicField = (obj, key, value) => {
 };
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useRef, useEffect, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
+import * as React from "react";
+import React__default, { forwardRef, useRef, useEffect, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
 import { produce } from "immer";
 import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 import cx from "classnames";
-import { Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Portal } from "@oliasoft-open-source/react-ui-library";
-import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, isNil, map as map$3, find, get as get$1, values } from "lodash";
+import { Portal, Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer } from "@oliasoft-open-source/react-ui-library";
+import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, isNil, map as map$3, find, get as get$1 } from "lodash";
 import { roundNumberToPrecision } from "@oliasoft-open-source/units/dist/rounding/rounding";
 /*!
  * @kurkle/color v0.3.2
@@ -921,16 +922,16 @@ const _lookupByKey$1 = (table2, key, value, last) => _lookup$1(table2, value, la
   return ti < value || ti === value && table2[index2 + 1][key] === value;
 } : (index2) => table2[index2][key] < value);
 const _rlookupByKey$1 = (table2, key, value) => _lookup$1(table2, value, (index2) => table2[index2][key] >= value);
-function _filterBetween$1(values2, min, max) {
+function _filterBetween$1(values, min, max) {
   let start = 0;
-  let end = values2.length;
-  while (start < end && values2[start] < min) {
+  let end = values.length;
+  while (start < end && values[start] < min) {
     start++;
   }
-  while (end > start && values2[end - 1] > max) {
+  while (end > start && values[end - 1] > max) {
     end--;
   }
-  return start > 0 || end < values2.length ? values2.slice(start, end) : values2;
+  return start > 0 || end < values.length ? values.slice(start, end) : values;
 }
 const arrayEvents$1 = [
   "push",
@@ -1404,9 +1405,9 @@ function getScope$1$1(node, key) {
   }
   return node;
 }
-function set$1(root, scope2, values2) {
+function set$1(root, scope2, values) {
   if (typeof scope2 === "string") {
-    return merge$1(getScope$1$1(root, scope2), values2);
+    return merge$1(getScope$1$1(root, scope2), values);
   }
   return merge$1(getScope$1$1(root, ""), scope2);
 }
@@ -1456,17 +1457,17 @@ let Defaults$1 = class Defaults {
     this.describe(_descriptors2);
     this.apply(_appliers);
   }
-  set(scope2, values2) {
-    return set$1(this, scope2, values2);
+  set(scope2, values) {
+    return set$1(this, scope2, values);
   }
   get(scope2) {
     return getScope$1$1(this, scope2);
   }
-  describe(scope2, values2) {
-    return set$1(descriptors$1, scope2, values2);
+  describe(scope2, values) {
+    return set$1(descriptors$1, scope2, values);
   }
-  override(scope2, values2) {
-    return set$1(overrides$1, scope2, values2);
+  override(scope2, values) {
+    return set$1(overrides$1, scope2, values);
   }
   route(scope2, name, targetScope, targetName) {
     const scopeObject = getScope$1$1(this, scope2);
@@ -3175,8 +3176,8 @@ let Animations$1 = class Animations {
       });
     });
   }
-  _animateOptions(target, values2) {
-    const newOptions = values2.options;
+  _animateOptions(target, values) {
+    const newOptions = values.options;
     const options = resolveTargetOptions$1(target, newOptions);
     if (!options) {
       return [];
@@ -3190,11 +3191,11 @@ let Animations$1 = class Animations {
     }
     return animations;
   }
-  _createAnimations(target, values2) {
+  _createAnimations(target, values) {
     const animatedProps = this._properties;
     const animations = [];
     const running = target.$animations || (target.$animations = {});
-    const props = Object.keys(values2);
+    const props = Object.keys(values);
     const date = Date.now();
     let i2;
     for (i2 = props.length - 1; i2 >= 0; --i2) {
@@ -3203,10 +3204,10 @@ let Animations$1 = class Animations {
         continue;
       }
       if (prop === "options") {
-        animations.push(...this._animateOptions(target, values2));
+        animations.push(...this._animateOptions(target, values));
         continue;
       }
-      const value = values2[prop];
+      const value = values[prop];
       let animation = running[prop];
       const cfg = animatedProps.get(prop);
       if (animation) {
@@ -3226,12 +3227,12 @@ let Animations$1 = class Animations {
     }
     return animations;
   }
-  update(target, values2) {
+  update(target, values) {
     if (this._properties.size === 0) {
-      Object.assign(target, values2);
+      Object.assign(target, values);
       return;
     }
-    const animations = this._createAnimations(target, values2);
+    const animations = this._createAnimations(target, values);
     if (animations.length) {
       animator$1.add(this._chart, animations);
       return true;
@@ -3684,9 +3685,9 @@ let DatasetController$1 = (_a = class {
   updateRangeFromParsed(range, scale, parsed, stack) {
     const parsedValue = parsed[scale.axis];
     let value = parsedValue === null ? NaN : parsedValue;
-    const values2 = stack && parsed._stacks[scale.axis];
-    if (stack && values2) {
-      stack.values = values2;
+    const values = stack && parsed._stacks[scale.axis];
+    if (stack && values) {
+      stack.values = values;
       value = applyStack$1(stack, parsedValue, this._cachedMeta.index);
     }
     range.min = Math.min(range.min, value);
@@ -3732,15 +3733,15 @@ let DatasetController$1 = (_a = class {
   }
   getAllParsedValues(scale) {
     const parsed = this._cachedMeta._parsed;
-    const values2 = [];
+    const values = [];
     let i2, ilen, value;
     for (i2 = 0, ilen = parsed.length; i2 < ilen; ++i2) {
       value = parsed[i2][scale.axis];
       if (isNumberFinite$1(value)) {
-        values2.push(value);
+        values.push(value);
       }
     }
-    return values2;
+    return values;
   }
   getMaxOverflow() {
     return false;
@@ -3842,12 +3843,12 @@ let DatasetController$1 = (_a = class {
     const scopes = config2.getOptionScopes(this.getDataset(), scopeKeys);
     const names2 = Object.keys(defaults$2.elements[elementType]);
     const context = () => this.getContext(index2, active, mode);
-    const values2 = config2.resolveNamedOptions(scopes, names2, context, prefixes);
-    if (values2.$shared) {
-      values2.$shared = sharing;
-      cache2[cacheKey] = Object.freeze(cloneIfNotShared$1(values2, sharing));
+    const values = config2.resolveNamedOptions(scopes, names2, context, prefixes);
+    if (values.$shared) {
+      values.$shared = sharing;
+      cache2[cacheKey] = Object.freeze(cloneIfNotShared$1(values, sharing));
     }
-    return values2;
+    return values;
   }
   _resolveAnimations(index2, transition, active) {
     const chart2 = this.chart;
@@ -4043,17 +4044,17 @@ let DatasetController$1 = (_a = class {
 function getAllScaleValues$1(scale, type) {
   if (!scale._cache.$bar) {
     const visibleMetas = scale.getMatchingVisibleMetas(type);
-    let values2 = [];
+    let values = [];
     for (let i2 = 0, ilen = visibleMetas.length; i2 < ilen; i2++) {
-      values2 = values2.concat(visibleMetas[i2].controller.getAllParsedValues(scale));
+      values = values.concat(visibleMetas[i2].controller.getAllParsedValues(scale));
     }
-    scale._cache.$bar = _arrayUnique$1(values2.sort((a2, b2) => a2 - b2));
+    scale._cache.$bar = _arrayUnique$1(values.sort((a2, b2) => a2 - b2));
   }
   return scale._cache.$bar;
 }
 function computeMinSampleSize$1(meta) {
   const scale = meta.iScale;
-  const values2 = getAllScaleValues$1(scale, meta.type);
+  const values = getAllScaleValues$1(scale, meta.type);
   let min = scale._length;
   let i2, ilen, curr, prev;
   const updateMinAndPrev = () => {
@@ -4065,8 +4066,8 @@ function computeMinSampleSize$1(meta) {
     }
     prev = curr;
   };
-  for (i2 = 0, ilen = values2.length; i2 < ilen; ++i2) {
-    curr = scale.getPixelForValue(values2[i2]);
+  for (i2 = 0, ilen = values.length; i2 < ilen; ++i2) {
+    curr = scale.getPixelForValue(values[i2]);
     updateMinAndPrev();
   }
   prev = void 0;
@@ -12562,13 +12563,13 @@ function setMajorTicks$1(scale, ticks, map2, majorUnit) {
   }
   return ticks;
 }
-function ticksFromTimestamps$1(scale, values2, majorUnit) {
+function ticksFromTimestamps$1(scale, values, majorUnit) {
   const ticks = [];
   const map2 = {};
-  const ilen = values2.length;
+  const ilen = values.length;
   let i2, value;
   for (i2 = 0; i2 < ilen; ++i2) {
-    value = values2[i2];
+    value = values[i2];
     map2[value] = i2;
     ticks.push({
       value,
@@ -12840,8 +12841,8 @@ let TimeScale$1 = (_q = class extends Scale$1 {
     }
     return this._cache.labels = this._normalized ? timestamps : this.normalize(timestamps);
   }
-  normalize(values2) {
-    return _arrayUnique$1(values2.sort(sorter$1));
+  normalize(values) {
+    return _arrayUnique$1(values.sort(sorter$1));
   }
 }, __publicField(_q, "id", "time"), __publicField(_q, "defaults", {
   bounds: "data",
@@ -13086,7 +13087,7 @@ function ChartComponent(props, ref) {
     renderChart();
     return () => destroyChart();
   }, []);
-  return /* @__PURE__ */ React.createElement("canvas", Object.assign({
+  return /* @__PURE__ */ React__default.createElement("canvas", Object.assign({
     ref: canvasRef,
     role: "img",
     height,
@@ -13096,7 +13097,7 @@ function ChartComponent(props, ref) {
 const Chart$1 = /* @__PURE__ */ forwardRef(ChartComponent);
 function createTypedChart(type, registerables) {
   Chart$2.register(registerables);
-  return /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ React.createElement(Chart$1, Object.assign({}, props, {
+  return /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ React__default.createElement(Chart$1, Object.assign({}, props, {
     ref,
     type
   })));
@@ -13266,14 +13267,14 @@ var hammer = { exports: {} };
     }
     function uniqueArray(src, key, sort) {
       var results = [];
-      var values2 = [];
+      var values = [];
       var i2 = 0;
       while (i2 < src.length) {
         var val = key ? src[i2][key] : src[i2];
-        if (inArray(values2, val) < 0) {
+        if (inArray(values, val) < 0) {
           results.push(src[i2]);
         }
-        values2[i2] = val;
+        values[i2] = val;
         i2++;
       }
       if (sort) {
@@ -22173,127 +22174,6 @@ class HTML5BackendImpl {
 const HTML5Backend = function createBackend(manager, context, options) {
   return new HTML5BackendImpl(manager, context, options);
 };
-const BORDER_WIDTH = {
-  INITIAL: 2,
-  HOVERED: 6,
-  POINT_HOVERED: 8
-};
-const BORDER_COLOR = "rgba(0,0,0,0.1)";
-const ANNOTATION_DASH = [10, 2];
-const DEFAULT_FONT_SIZE = 12;
-const DEFAULT_FONT_FAMILY = '"Roobert", "Noto Sans", sans-serif';
-const DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
-const LEGEND_LABEL_BOX_SIZE = 12;
-const TOOLTIP_PADDING = 8;
-const TOOLTIP_BOX_PADDING = 4;
-const TRANSPARENT = "transparent";
-const LOGARITHMIC_STEPS = [1, 10, 100, 1e3, 1e4];
-const COLORS = [
-  "#3366cc",
-  "#dc3912",
-  "#ff9900",
-  "#109618",
-  "#990099",
-  "#0099c6",
-  "#dd4477",
-  "#66aa00",
-  "#b82e2e",
-  "#316395",
-  "#994499",
-  "#22aa99",
-  "#aaaa11",
-  "#6633cc",
-  "#e67300",
-  "#8b0707",
-  "#651067",
-  "#329262",
-  "#5574a6",
-  "#3b3eac"
-];
-const ALPHA_CHANEL = "99";
-const WHITE_COLOR_AS_DECIMAL = 16777215;
-const AUTO = "auto";
-const ANIMATION_DURATION = {
-  NO: 0,
-  SLOW: 400,
-  FAST: 1e3
-};
-const DEFAULT_CHART_NAME = "new_chart";
-const CUSTOM_LEGEND_PLUGIN_NAME = "htmlLegend";
-const DECIMAL_POINT_TOLERANCE = 9;
-const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;
-const findRadii = (points, mainPoint, isXReverse, isYReverse) => {
-  if ((points == null ? void 0 : points.length) === 0) {
-    throw new Error("Array of points is empty");
-  }
-  let top2 = mainPoint;
-  let bottom2 = mainPoint;
-  let left2 = mainPoint;
-  let right2 = mainPoint;
-  for (const point of points) {
-    if (isYReverse ? point.y < top2.y : point.y > top2.y) {
-      top2 = point;
-    }
-    if (isYReverse ? point.y > bottom2.y : point.y < bottom2.y) {
-      bottom2 = point;
-    }
-    if (isXReverse ? point.x > left2.x : point.x < left2.x) {
-      left2 = point;
-    }
-    if (isXReverse ? point.x < right2.x : point.x > right2.x) {
-      right2 = point;
-    }
-  }
-  const radiusX = Math.abs(right2.x - left2.x) / 2;
-  const radiusY = Math.abs(bottom2.y - top2.y) / 2;
-  return { radiusX, radiusY };
-};
-const ellipsisAnnotationPlugin = {
-  id: "ellipsisAnnotationPlugin",
-  afterDraw: (chart2) => {
-    var _a2, _b2, _c2, _d2;
-    const {
-      ctx,
-      scales: { x: x2, y: y2 },
-      data: { datasets },
-      options
-    } = chart2;
-    const isXReverse = ((_b2 = (_a2 = options == null ? void 0 : options.scales) == null ? void 0 : _a2.x) == null ? void 0 : _b2.reverse) || false;
-    const isYReverse = ((_d2 = (_c2 = options == null ? void 0 : options.scales) == null ? void 0 : _c2.y) == null ? void 0 : _d2.reverse) || false;
-    datasets.forEach((dataset) => {
-      dataset.data.forEach((item) => {
-        if (item.ellipsePoints && item.ellipsePoints.length) {
-          const centerX = x2.getPixelForValue(item.x);
-          const centerY = y2.getPixelForValue(item.y);
-          const points = item.ellipsePoints.map((point) => ({
-            x: x2.getPixelForValue(point.x),
-            y: y2.getPixelForValue(point.y)
-          }));
-          const mainPoint = { x: centerX, y: centerY };
-          const { radiusX, radiusY } = findRadii(
-            points,
-            mainPoint,
-            isXReverse,
-            isYReverse
-          );
-          const rotationAngle = item.ellipseRotation * Math.PI / 180;
-          ctx.beginPath();
-          ctx.ellipse(
-            centerX,
-            centerY,
-            radiusX,
-            radiusY,
-            rotationAngle,
-            0,
-            2 * Math.PI
-          );
-          ctx.strokeStyle = (dataset == null ? void 0 : dataset.borderColor) ?? DEFAULT_COLOR;
-          ctx.stroke();
-        }
-      });
-    });
-  }
-};
 const chart$3 = "_chart_e3qdd_1";
 const canvas$1 = "_canvas_e3qdd_11";
 const fixedHeight$3 = "_fixedHeight_e3qdd_20";
@@ -22587,6 +22467,67 @@ const chartMinorGridlinesPlugin = {
     Object.keys(scales).forEach((id) => drawMinorTicksForScale(scales[id]));
   }
 };
+const BORDER_WIDTH = {
+  INITIAL: 2,
+  HOVERED: 6,
+  POINT_HOVERED: 8
+};
+const BORDER_COLOR = "rgba(0,0,0,0.1)";
+const ANNOTATION_DASH = [10, 2];
+const DEFAULT_FONT_SIZE = 12;
+const DEFAULT_FONT_FAMILY = '"Roobert", "Noto Sans", sans-serif';
+const DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
+const LEGEND_LABEL_BOX_SIZE = 12;
+const TOOLTIP_PADDING = 8;
+const TOOLTIP_BOX_PADDING = 4;
+const TRANSPARENT = "transparent";
+const LOGARITHMIC_STEPS = [1, 10, 100, 1e3, 1e4];
+const COLORS = [
+  "#3366cc",
+  "#dc3912",
+  "#ff9900",
+  "#109618",
+  "#990099",
+  "#0099c6",
+  "#dd4477",
+  "#66aa00",
+  "#b82e2e",
+  "#316395",
+  "#994499",
+  "#22aa99",
+  "#aaaa11",
+  "#6633cc",
+  "#e67300",
+  "#8b0707",
+  "#651067",
+  "#329262",
+  "#5574a6",
+  "#3b3eac"
+];
+const ALPHA_CHANEL = "99";
+const WHITE_COLOR_AS_DECIMAL = 16777215;
+const AUTO = "auto";
+const ANIMATION_DURATION = {
+  NO: 0,
+  SLOW: 400,
+  FAST: 1e3
+};
+const DEFAULT_CHART_NAME = "new_chart";
+const CUSTOM_LEGEND_PLUGIN_NAME = "htmlLegend";
+const DECIMAL_POINT_TOLERANCE = 9;
+const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;
+const GRADIENT_COLORS = [
+  { offset: 0, color: "rgba(144,238,144,0.8)" },
+  // Light green
+  { offset: 0.6, color: "rgba(255,255,224,0.8)" },
+  // Light yellow
+  { offset: 0.8, color: "rgba(255,255,224,0.8)" },
+  // Light yellow
+  { offset: 0.92, color: "rgba(255,182,193,0.5)" },
+  // Light red
+  { offset: 0.99, color: "rgba(255,182,193,0.8)" }
+  // Light red
+];
 const chartAreaBorderPlugin = {
   id: "chartAreaBorder",
   beforeDraw(chart2, _2, options) {
@@ -22732,8 +22673,8 @@ const getAxisTypeFromKey = (string) => {
   var _a2;
   return ((_a2 = string == null ? void 0 : string.match(/[^0-9/]+/gi)) == null ? void 0 : _a2[0]) ?? "";
 };
-const generateKey = (values2) => {
-  const key = values2.join("");
+const generateKey = (values) => {
+  const key = values.join("");
   return key;
 };
 const isPrimitiveValue = (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null;
@@ -22855,9 +22796,18 @@ const initialState = ({ options, persistenceId }) => {
     initialAxesRanges: []
   };
 };
-const lineOnlyIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgxMnYxMmgtMTJ6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im0uNSA2LjV2LTFoMTF2MWMtNC4xNjEwNCAwLTYuNjM1NDkgMC0xMSAweiIvPjwvZz48L3N2Zz4=";
-const pointOnlyIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjIiLz48L3N2Zz4=";
-const lineAndPointIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgxMnYxMmgtMTJ6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im03LjkzNyA2LjVjLS4xMTEyMi40MjkxMi0uMzYxNzkuODA5MTYtLjcxMjM3IDEuMDgwNDctLjM1MDU4LjI3MTMtLjc4MTMzLjQxODUtMS4yMjQ2My40MTg1cy0uODc0MDUtLjE0NzItMS4yMjQ2My0uNDE4NWMtLjM1MDU4LS4yNzEzMS0uNjAxMTUtLjY1MTM1LS43MTIzNy0xLjA4MDQ3aC0zLjU2M3YtMWgzLjU2M2MuMTExMjItLjQyOTEyLjM2MTc5LS44MDkxNi43MTIzNy0xLjA4MDQ2cy43ODEzMy0uNDE4NTEgMS4yMjQ2My0uNDE4NTEuODc0MDUuMTQ3MjEgMS4yMjQ2My40MTg1MS42MDExNS42NTEzNC43MTIzNyAxLjA4MDQ2aDMuNTYzdjF6Ii8+PC9nPjwvc3ZnPg==";
+const ControlsPortal = ({
+  children,
+  controlsPortalId
+}) => {
+  if (controlsPortalId) {
+    return /* @__PURE__ */ jsx(Portal, { id: controlsPortalId, children });
+  }
+  return children;
+};
+const SvgLineOnly = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 12 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props }, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { d: "m0 0h12v12h-12z" })), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m.5 6.5v-1h11v1c-4.16104 0-6.63549 0-11 0z" })));
+const SvgPointOnly = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 12 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 6, cy: 6, r: 2 }));
+const SvgLineAndPoint = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 12 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props }, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { d: "m0 0h12v12h-12z" })), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m7.937 6.5c-.11122.42912-.36179.80916-.71237 1.08047-.35058.2713-.78133.4185-1.22463.4185s-.87405-.1472-1.22463-.4185c-.35058-.27131-.60115-.65135-.71237-1.08047h-3.563v-1h3.563c.11122-.42912.36179-.80916.71237-1.08046s.78133-.41851 1.22463-.41851.87405.14721 1.22463.41851.60115.65134.71237 1.08046h3.563v1z" })));
 const LineOptions = ({
   lineEnabled,
   onToggleLine,
@@ -22868,7 +22818,7 @@ const LineOptions = ({
   const options = [
     {
       label: translations.pointsLines,
-      icon: /* @__PURE__ */ jsx(Icon, { icon: lineAndPointIcon }),
+      icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineAndPoint, {}) }),
       selected: pointsEnabled && lineEnabled,
       onClick: () => {
         onTogglePoints();
@@ -22876,7 +22826,7 @@ const LineOptions = ({
     },
     {
       label: translations.linesOnly,
-      icon: /* @__PURE__ */ jsx(Icon, { icon: lineOnlyIcon }),
+      icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineOnly, {}) }),
       selected: !pointsEnabled && lineEnabled,
       onClick: () => {
         onTogglePoints();
@@ -22885,7 +22835,7 @@ const LineOptions = ({
     },
     {
       label: translations.pointsOnly,
-      icon: /* @__PURE__ */ jsx(Icon, { icon: pointOnlyIcon }),
+      icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgPointOnly, {}) }),
       selected: pointsEnabled && !lineEnabled,
       onClick: () => {
         onToggleLine();
@@ -22912,7 +22862,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = React.createContext && React.createContext(DefaultContext);
+var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
 var __assign = globalThis && globalThis.__assign || function() {
   __assign = Object.assign || function(t) {
     for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
@@ -22939,14 +22889,14 @@ var __rest = globalThis && globalThis.__rest || function(s2, e2) {
 };
 function Tree2Element(tree) {
   return tree && tree.map(function(node, i2) {
-    return React.createElement(node.tag, __assign({
+    return React__default.createElement(node.tag, __assign({
       key: i2
     }, node.attr), Tree2Element(node.child));
   });
 }
 function GenIcon(data) {
   return function(props) {
-    return React.createElement(IconBase, __assign({
+    return React__default.createElement(IconBase, __assign({
       attr: __assign({}, data.attr)
     }, props), Tree2Element(data.child));
   };
@@ -22960,7 +22910,7 @@ function IconBase(props) {
       className = conf.className;
     if (props.className)
       className = (className ? className + " " : "") + props.className;
-    return React.createElement("svg", __assign({
+    return React__default.createElement("svg", __assign({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -22972,9 +22922,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && React.createElement("title", null, title), props.children);
+    }), title && React__default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? React.createElement(IconContext.Consumer, null, function(conf) {
+  return IconContext !== void 0 ? React__default.createElement(IconContext.Consumer, null, function(conf) {
     return elem(conf);
   }) : elem(DefaultContext);
 }
@@ -23868,7 +23818,7 @@ async function toPng(node, options = {}) {
 var dist = { exports: {} };
 (function(module, exports) {
   !function(e2, t) {
-    module.exports = t(React);
+    module.exports = t(React__default);
   }(window, function(e2) {
     return function(e3) {
       var t = {};
@@ -24520,15 +24470,6 @@ const AxesOptions = (optionsPopover) => {
     }
   );
 };
-const ControlsPortal = ({
-  children,
-  controlsPortalId
-}) => {
-  if (controlsPortalId && document.getElementById(controlsPortalId)) {
-    return /* @__PURE__ */ jsx(Portal, { id: controlsPortalId, children });
-  }
-  return children;
-};
 const Controls = ({
   headerComponent,
   subheaderComponent,
@@ -25471,21 +25412,17 @@ const handlePointLeave = (element, chart2, annotation2) => {
 };
 const generateAnnotations = (annotationsData) => {
   return annotationsData == null ? void 0 : annotationsData.map((ann, idx) => {
-    var _a2, _b2, _c2, _d2, _e2;
+    var _a2, _b2, _c2, _d2, _e2, _f2;
     const scaleID = (ann == null ? void 0 : ann.annotationAxis) ?? void 0;
     const color2 = (ann == null ? void 0 : ann.color) ?? COLORS[idx];
-    const type = (ann == null ? void 0 : ann.type) || AnnotationType.LINE;
+    const type = (ann == null ? void 0 : ann.type) ?? AnnotationType.LINE;
     const adjustScaleRange2 = ann == null ? void 0 : ann.adjustScaleRange;
     const borderColor = {
       [AnnotationType.LINE]: color2,
       [AnnotationType.POINT]: color2,
-      [AnnotationType.BOX]: color2,
-      [AnnotationType.ELLIPSE]: color2
+      [AnnotationType.BOX]: color2
     }[type] || TRANSPARENT;
-    const borderWidth = {
-      [AnnotationType.LINE]: BORDER_WIDTH.INITIAL,
-      [AnnotationType.ELLIPSE]: (ann == null ? void 0 : ann.borderWidth) ?? 0
-    }[type] ?? 0;
+    const borderWidth = type === AnnotationType.LINE ? BORDER_WIDTH.INITIAL : 0;
     const borderDash = type === AnnotationType.LINE ? ANNOTATION_DASH : void 0;
     const defLabel = {
       content: ann == null ? void 0 : ann.label,
@@ -25502,14 +25439,14 @@ const generateAnnotations = (annotationsData) => {
       [AnnotationType.POINT]: {
         backgroundColor: ((_a2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _a2.backgroundColor) ?? TRANSPARENT,
         content: ann == null ? void 0 : ann.label,
-        display: !!(ann == null ? void 0 : ann.label),
-        position: ((_b2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _b2.position) ?? Position.Bottom,
-        color: ((_c2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _c2.color) ?? DEFAULT_COLOR,
-        font: ((_d2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _d2.font) ?? `12px ${DEFAULT_FONT_FAMILY}`,
+        display: ((_b2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _b2.display) ?? !!(ann == null ? void 0 : ann.label),
+        position: ((_c2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _c2.position) ?? Position.Bottom,
+        color: ((_d2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _d2.color) ?? DEFAULT_COLOR,
+        font: ((_e2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _e2.font) ?? `12px ${DEFAULT_FONT_FAMILY}`,
         borderWidth: BORDER_WIDTH.INITIAL,
         padding: 5,
         borderRadius: 3,
-        borderColor: ((_e2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _e2.borderColor) ?? TRANSPARENT
+        borderColor: ((_f2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _f2.borderColor) ?? TRANSPARENT
       },
       [AnnotationType.BOX]: defLabel,
       [AnnotationType.ELLIPSE]: defLabel
@@ -25559,7 +25496,7 @@ const generateAnnotations = (annotationsData) => {
       id: `${ann == null ? void 0 : ann.label}-${ann == null ? void 0 : ann.value}-${idx}`,
       scaleID,
       label,
-      backgroundColor: (ann == null ? void 0 : ann.backgroundColor) ?? color2,
+      backgroundColor: color2,
       borderColor,
       borderWidth,
       borderDash,
@@ -26523,6 +26460,7 @@ const styles$3 = {
   isActive,
   resizeContainer
 };
+const SvgCircle = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 12, fill: "currentColor" }));
 var ChartType = /* @__PURE__ */ ((ChartType2) => {
   ChartType2["LINE"] = "line";
   ChartType2["BAR"] = "bar";
@@ -26535,10 +26473,9 @@ var ChartDirection = /* @__PURE__ */ ((ChartDirection2) => {
   ChartDirection2["HORIZONTAL"] = "horizontal";
   return ChartDirection2;
 })(ChartDirection || {});
-const circleSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz48L3N2Zz4=";
-const rectSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+PC9zdmc+";
-const rectRotSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBmaWxsPSJjdXJyZW50Q29sb3IiIHRyYW5zZm9ybT0ncm90YXRlKDQ1IDEyIDEyKScgLz48L3N2Zz4=";
-const triangleSvg = "data:image/svg+xml;base64,PHN2ZyAgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgyNHYyNGgtMjR6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im0yMi43OTk4IDIyLjA2MjNoLTIxLjU5OTZjLS4yMTA2Ni4wMDAxLS40MTc2MTctLjA1NTQtLjYwMDA2Ny0uMTYwNy0uMTgyNDUxLS4xMDUzLS4zMzM5NjUtLjI1NjctLjQzOTMxMS0uNDM5Mi0uMTA1MzQ2NC0uMTgyNC0uMTYwODEyMjgtLjM4OTMtLjE2MDgyMi0uNnMuMDU1NDM3Mi0uNDE3Ni4xNjA3NjctLjZsMTAuNzk5ODMzLTE4LjcwNTE4Yy4xMTM5LS4xNzEzNy4yNjg0LS4zMTE5MS40NDk3LS40MDkxMy4xODE0LS4wOTcyMi4zODM5LS4xNDgwOS41ODk3LS4xNDgwOXMuNDA4My4wNTA4Ny41ODk3LjE0ODA5Yy4xODEzLjA5NzIyLjMzNTguMjM3NzYuNDQ5Ny40MDkxM2wxMC43OTk4IDE4LjcwNTE4Yy4xMDU0LjE4MjQuMTYwOC4zODkzLjE2MDguNnMtLjA1NTUuNDE3Ni0uMTYwOC42Yy0uMTA1NC4xODI1LS4yNTY5LjMzMzktLjQzOTMuNDM5Mi0uMTgyNS4xMDUzLS4zODk0LjE2MDgtLjYwMDEuMTYwN3oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvZz48L3N2Zz4=";
+const SvgRect = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("rect", { x: 2, y: 2, width: 20, height: 20, fill: "currentColor" }));
+const SvgRectRot = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("rect", { x: 3, y: 3, width: 18, height: 18, fill: "currentColor", transform: "rotate(45 12 12)" }));
+const SvgTriangle = (props) => /* @__PURE__ */ React.createElement("svg", { height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props }, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { d: "m0 0h24v24h-24z" })), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m22.7998 22.0623h-21.5996c-.21066.0001-.417617-.0554-.600067-.1607-.182451-.1053-.333965-.2567-.439311-.4392-.1053464-.1824-.16081228-.3893-.160822-.6s.0554372-.4176.160767-.6l10.799833-18.70518c.1139-.17137.2684-.31191.4497-.40913.1814-.09722.3839-.14809.5897-.14809s.4083.05087.5897.14809c.1813.09722.3358.23776.4497.40913l10.7998 18.70518c.1054.1824.1608.3893.1608.6s-.0555.4176-.1608.6c-.1054.1825-.2569.3339-.4393.4392-.1825.1053-.3894.1608-.6001.1607z", fill: "currentColor" })));
 const LEGEND_SYMBOL_SIZE$1 = 16;
 const LineItem = ({ dataset }) => {
   var _a2;
@@ -26572,15 +26509,15 @@ const PointItem = ({ dataset }) => {
     return null;
   const size = pointRadius * 2;
   const icons = {
-    circle: circleSvg,
-    triangle: triangleSvg,
-    rectRot: rectRotSvg,
-    rect: rectSvg
+    circle: /* @__PURE__ */ jsx(SvgCircle, {}),
+    triangle: /* @__PURE__ */ jsx(SvgTriangle, {}),
+    rectRot: /* @__PURE__ */ jsx(SvgRectRot, {}),
+    rect: /* @__PURE__ */ jsx(SvgRect, {})
   };
   return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(
     Icon,
     {
-      icon: icons[pointStyle] || circleSvg,
+      icon: icons[pointStyle] ?? /* @__PURE__ */ jsx(SvgCircle, {}),
       size,
       color: pointBackgroundColor
     }
@@ -26614,7 +26551,7 @@ const renderLegendItemSymbol = (dataset, chartType) => {
     case ChartType.BAR:
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: dataset.borderColor }) });
     case ChartType.PIE:
-      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: circleSvg }) });
+      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgCircle, {}) }) });
     case ChartType.SCATTER:
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: dataset.borderColor }) });
     default:
@@ -26647,13 +26584,15 @@ const LegendItem = ({
   );
 };
 const generateAnnotationLabels = (chart2) => {
-  const annotations = cloneDeep(
-    get$1(chart2, "options.plugins.annotation.annotations", {})
+  const annotations = get$1(
+    chart2,
+    "options.plugins.annotation.annotations",
+    null
   );
   if (!annotations || !Object.keys(annotations).length) {
     return [];
   }
-  return values(annotations);
+  return Object.values(annotations);
 };
 const generatedLabels = (chart2) => {
   var _a2, _b2, _c2, _d2, _e2;
@@ -26896,8 +26835,7 @@ Chart$2.register(
   plugin,
   annotation,
   chartAreaTextPlugin,
-  annotationDraggerPlugin,
-  ellipsisAnnotationPlugin
+  annotationDraggerPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;
@@ -27671,16 +27609,16 @@ function _lookup(table2, value, cmp) {
 }
 const _lookupByKey = (table2, key, value, last) => _lookup(table2, value, last ? (index2) => table2[index2][key] <= value : (index2) => table2[index2][key] < value);
 const _rlookupByKey = (table2, key, value) => _lookup(table2, value, (index2) => table2[index2][key] >= value);
-function _filterBetween(values2, min, max) {
+function _filterBetween(values, min, max) {
   let start = 0;
-  let end = values2.length;
-  while (start < end && values2[start] < min) {
+  let end = values.length;
+  while (start < end && values[start] < min) {
     start++;
   }
-  while (end > start && values2[end - 1] > max) {
+  while (end > start && values[end - 1] > max) {
     end--;
   }
-  return start > 0 || end < values2.length ? values2.slice(start, end) : values2;
+  return start > 0 || end < values.length ? values.slice(start, end) : values;
 }
 const arrayEvents = ["push", "pop", "shift", "splice", "unshift"];
 function listenArrayEvents(array, listener) {
@@ -28483,9 +28421,9 @@ function getScope$1(node, key) {
   }
   return node;
 }
-function set(root, scope2, values2) {
+function set(root, scope2, values) {
   if (typeof scope2 === "string") {
-    return merge(getScope$1(root, scope2), values2);
+    return merge(getScope$1(root, scope2), values);
   }
   return merge(getScope$1(root, ""), scope2);
 }
@@ -28534,17 +28472,17 @@ class Defaults2 {
     this.drawActiveElementsOnTop = true;
     this.describe(_descriptors2);
   }
-  set(scope2, values2) {
-    return set(this, scope2, values2);
+  set(scope2, values) {
+    return set(this, scope2, values);
   }
   get(scope2) {
     return getScope$1(this, scope2);
   }
-  describe(scope2, values2) {
-    return set(descriptors, scope2, values2);
+  describe(scope2, values) {
+    return set(descriptors, scope2, values);
   }
-  override(scope2, values2) {
-    return set(overrides, scope2, values2);
+  override(scope2, values) {
+    return set(overrides, scope2, values);
   }
   route(scope2, name, targetScope, targetName) {
     const scopeObject = getScope$1(this, scope2);
@@ -30209,8 +30147,8 @@ class Animations2 {
       });
     });
   }
-  _animateOptions(target, values2) {
-    const newOptions = values2.options;
+  _animateOptions(target, values) {
+    const newOptions = values.options;
     const options = resolveTargetOptions(target, newOptions);
     if (!options) {
       return [];
@@ -30224,11 +30162,11 @@ class Animations2 {
     }
     return animations;
   }
-  _createAnimations(target, values2) {
+  _createAnimations(target, values) {
     const animatedProps = this._properties;
     const animations = [];
     const running = target.$animations || (target.$animations = {});
-    const props = Object.keys(values2);
+    const props = Object.keys(values);
     const date = Date.now();
     let i2;
     for (i2 = props.length - 1; i2 >= 0; --i2) {
@@ -30237,10 +30175,10 @@ class Animations2 {
         continue;
       }
       if (prop === "options") {
-        animations.push(...this._animateOptions(target, values2));
+        animations.push(...this._animateOptions(target, values));
         continue;
       }
-      const value = values2[prop];
+      const value = values[prop];
       let animation = running[prop];
       const cfg = animatedProps.get(prop);
       if (animation) {
@@ -30260,12 +30198,12 @@ class Animations2 {
     }
     return animations;
   }
-  update(target, values2) {
+  update(target, values) {
     if (this._properties.size === 0) {
-      Object.assign(target, values2);
+      Object.assign(target, values);
       return;
     }
-    const animations = this._createAnimations(target, values2);
+    const animations = this._createAnimations(target, values);
     if (animations.length) {
       animator.add(this._chart, animations);
       return true;
@@ -30703,9 +30641,9 @@ class DatasetController {
   updateRangeFromParsed(range, scale, parsed, stack) {
     const parsedValue = parsed[scale.axis];
     let value = parsedValue === null ? NaN : parsedValue;
-    const values2 = stack && parsed._stacks[scale.axis];
-    if (stack && values2) {
-      stack.values = values2;
+    const values = stack && parsed._stacks[scale.axis];
+    if (stack && values) {
+      stack.values = values;
       value = applyStack(stack, parsedValue, this._cachedMeta.index);
     }
     range.min = Math.min(range.min, value);
@@ -30748,15 +30686,15 @@ class DatasetController {
   }
   getAllParsedValues(scale) {
     const parsed = this._cachedMeta._parsed;
-    const values2 = [];
+    const values = [];
     let i2, ilen, value;
     for (i2 = 0, ilen = parsed.length; i2 < ilen; ++i2) {
       value = parsed[i2][scale.axis];
       if (isNumberFinite(value)) {
-        values2.push(value);
+        values.push(value);
       }
     }
-    return values2;
+    return values;
   }
   getMaxOverflow() {
     return false;
@@ -30850,12 +30788,12 @@ class DatasetController {
     const scopes = config2.getOptionScopes(this.getDataset(), scopeKeys);
     const names2 = Object.keys(defaults.elements[elementType]);
     const context = () => this.getContext(index2, active);
-    const values2 = config2.resolveNamedOptions(scopes, names2, context, prefixes);
-    if (values2.$shared) {
-      values2.$shared = sharing;
-      cache2[cacheKey] = Object.freeze(cloneIfNotShared(values2, sharing));
+    const values = config2.resolveNamedOptions(scopes, names2, context, prefixes);
+    if (values.$shared) {
+      values.$shared = sharing;
+      cache2[cacheKey] = Object.freeze(cloneIfNotShared(values, sharing));
     }
-    return values2;
+    return values;
   }
   _resolveAnimations(index2, transition, active) {
     const chart2 = this.chart;
@@ -31024,17 +30962,17 @@ DatasetController.prototype.dataElementType = null;
 function getAllScaleValues(scale, type) {
   if (!scale._cache.$bar) {
     const visibleMetas = scale.getMatchingVisibleMetas(type);
-    let values2 = [];
+    let values = [];
     for (let i2 = 0, ilen = visibleMetas.length; i2 < ilen; i2++) {
-      values2 = values2.concat(visibleMetas[i2].controller.getAllParsedValues(scale));
+      values = values.concat(visibleMetas[i2].controller.getAllParsedValues(scale));
     }
-    scale._cache.$bar = _arrayUnique(values2.sort((a2, b2) => a2 - b2));
+    scale._cache.$bar = _arrayUnique(values.sort((a2, b2) => a2 - b2));
   }
   return scale._cache.$bar;
 }
 function computeMinSampleSize(meta) {
   const scale = meta.iScale;
-  const values2 = getAllScaleValues(scale, meta.type);
+  const values = getAllScaleValues(scale, meta.type);
   let min = scale._length;
   let i2, ilen, curr, prev;
   const updateMinAndPrev = () => {
@@ -31046,8 +30984,8 @@ function computeMinSampleSize(meta) {
     }
     prev = curr;
   };
-  for (i2 = 0, ilen = values2.length; i2 < ilen; ++i2) {
-    curr = scale.getPixelForValue(values2[i2]);
+  for (i2 = 0, ilen = values.length; i2 < ilen; ++i2) {
+    curr = scale.getPixelForValue(values[i2]);
     updateMinAndPrev();
   }
   prev = void 0;
@@ -31547,16 +31485,16 @@ class BubbleController extends DatasetController {
   }
   resolveDataElementOptions(index2, mode) {
     const parsed = this.getParsed(index2);
-    let values2 = super.resolveDataElementOptions(index2, mode);
-    if (values2.$shared) {
-      values2 = Object.assign({}, values2, { $shared: false });
+    let values = super.resolveDataElementOptions(index2, mode);
+    if (values.$shared) {
+      values = Object.assign({}, values, { $shared: false });
     }
-    const radius = values2.radius;
+    const radius = values.radius;
     if (mode !== "active") {
-      values2.radius = 0;
+      values.radius = 0;
     }
-    values2.radius += valueOrDefault(parsed && parsed._custom, radius);
-    return values2;
+    values.radius += valueOrDefault(parsed && parsed._custom, radius);
+    return values;
   }
 }
 BubbleController.id = "bubble";
@@ -38579,13 +38517,13 @@ function setMajorTicks(scale, ticks, map2, majorUnit) {
   }
   return ticks;
 }
-function ticksFromTimestamps(scale, values2, majorUnit) {
+function ticksFromTimestamps(scale, values, majorUnit) {
   const ticks = [];
   const map2 = {};
-  const ilen = values2.length;
+  const ilen = values.length;
   let i2, value;
   for (i2 = 0; i2 < ilen; ++i2) {
-    value = values2[i2];
+    value = values[i2];
     map2[value] = i2;
     ticks.push({
       value,
@@ -38835,8 +38773,8 @@ class TimeScale extends Scale2 {
     }
     return this._cache.labels = this._normalized ? timestamps : this.normalize(timestamps);
   }
-  normalize(values2) {
-    return _arrayUnique(values2.sort(sorter));
+  normalize(values) {
+    return _arrayUnique(values.sort(sorter));
   }
 }
 TimeScale.id = "time";
@@ -39895,9 +39833,14 @@ const getBarChartDataLabels = (options) => {
       dataLabel = Number.isInteger(dataElement) ? dataElement : dataElement.toFixed(2);
     }
     if (Array.isArray(dataElement)) {
-      dataLabel = dataElement.reduce((acc, curr, i2) => {
-        return i2 === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
-      }, "");
+      if (dataElement.length === 2) {
+        const sum = dataElement[1] - dataElement[0];
+        dataLabel = sum < 0 ? round$2(sum, 2) : `+${round$2(sum, 2)}`;
+      } else {
+        dataLabel = dataElement.reduce((acc, curr, i2) => {
+          return i2 === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
+        }, "");
+      }
     }
     return dataLabel;
   };
@@ -39973,8 +39916,7 @@ const getBarChartToolTips = (options) => {
           },
           ""
         );
-      }
-      if (typeof tooltipItem.raw === "object") {
+      } else if (typeof tooltipItem.raw === "object") {
         tooltipItemValue2 = labelNumberFormatted;
       }
       return tooltipItemValue2;
@@ -40132,6 +40074,7 @@ const getDefaultProps$1 = (props) => {
   const options = (chart2 == null ? void 0 : chart2.options) || {};
   return {
     testId: (chart2 == null ? void 0 : chart2.testId) ?? "",
+    controlsPortalId: (chart2 == null ? void 0 : chart2.controlsPortalId) ?? "",
     data: chart2 == null ? void 0 : chart2.data,
     options: {
       title: (options == null ? void 0 : options.title) || "",
@@ -40173,7 +40116,7 @@ const BarChart = (props) => {
   const chartRef = useRef(null);
   const chart2 = getDefaultProps$1(props);
   const { translations, languageKey } = getConfig();
-  const { options, testId } = chart2;
+  const { options, testId, controlsPortalId } = chart2;
   const { chartStyling, graph } = options;
   const { generatedDatasets } = useBarChartConfig(chartRef, chart2);
   const barChartOptions = useBarChartOptions({ chart: chart2, chartRef });
@@ -40188,7 +40131,7 @@ const BarChart = (props) => {
       },
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles$1.actions, children: /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId, children: /* @__PURE__ */ jsx("div", { className: styles$1.actions, children: /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
           Button,
           {
             small: true,
@@ -40198,7 +40141,7 @@ const BarChart = (props) => {
             icon: "download",
             onClick: () => downloadPgn(chartRef)
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles$1.canvas, id: "canvas", children: [
           /* @__PURE__ */ jsx(
             Bar,
@@ -40375,12 +40318,18 @@ const useScatterChartConfig = (chart2, chartRef) => {
   const scatterOptions = {
     onClick,
     onHover,
-    chartStyling,
+    ...chartStyling,
     interactions: {
       onLegendClick: legendClick,
       onHover
     },
     scales: getScatterChartScales(chart2 == null ? void 0 : chart2.options),
+    animation: chartStyling.performanceMode ? {
+      duration: ANIMATION_DURATION.NO
+    } : {
+      duration: ANIMATION_DURATION.FAST,
+      onComplete: interactions == null ? void 0 : interactions.onAnimationComplete
+    },
     plugins: {
       legend: { ...legend2, display: false },
       // hide default legend
@@ -40401,12 +40350,29 @@ const useScatterChartConfig = (chart2, chartRef) => {
     scatterOptions
   };
 };
+var GradientDirection = /* @__PURE__ */ ((GradientDirection2) => {
+  GradientDirection2[GradientDirection2["TopToBottom"] = 0] = "TopToBottom";
+  GradientDirection2[GradientDirection2["BottomToTop"] = 1] = "BottomToTop";
+  GradientDirection2[GradientDirection2["LeftToRight"] = 2] = "LeftToRight";
+  GradientDirection2[GradientDirection2["RightToLeft"] = 3] = "RightToLeft";
+  GradientDirection2[GradientDirection2["TopLeftToBottomRight"] = 4] = "TopLeftToBottomRight";
+  GradientDirection2[GradientDirection2["BottomRightToTopLeft"] = 5] = "BottomRightToTopLeft";
+  GradientDirection2[GradientDirection2["BottomLeftToTopRight"] = 6] = "BottomLeftToTopRight";
+  GradientDirection2[GradientDirection2["TopRightToBottomLeft"] = 7] = "TopRightToBottomLeft";
+  return GradientDirection2;
+})(GradientDirection || {});
+const defaultChartGradient = (gradient) => ({
+  display: (gradient == null ? void 0 : gradient.display) ?? false,
+  gradientColors: (gradient == null ? void 0 : gradient.gradientColors) ?? GRADIENT_COLORS,
+  direction: (gradient == null ? void 0 : gradient.direction) ?? GradientDirection.BottomLeftToTopRight
+});
 const defaultChartStyling = (styling) => ({
   width: (styling == null ? void 0 : styling.width) ?? AUTO,
   height: (styling == null ? void 0 : styling.height) ?? AUTO,
   maintainAspectRatio: (styling == null ? void 0 : styling.maintainAspectRatio) || false,
   staticChartHeight: (styling == null ? void 0 : styling.staticChartHeight) || false,
-  performanceMode: (styling == null ? void 0 : styling.performanceMode) ?? true
+  performanceMode: (styling == null ? void 0 : styling.performanceMode) ?? true,
+  gradient: defaultChartGradient(styling == null ? void 0 : styling.gradient)
 });
 const defaultTooltip = (tooltip) => ({
   enabled: (tooltip == null ? void 0 : tooltip.enabled) ?? true,
@@ -40432,7 +40398,8 @@ const defaultChartOptions = (options) => ({
 const defaultInteractions = (interactions) => ({
   onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
   onHover: interactions == null ? void 0 : interactions.onHover,
-  onUnhover: interactions == null ? void 0 : interactions.onUnhover
+  onUnhover: interactions == null ? void 0 : interactions.onUnhover,
+  onAnimationComplete: interactions == null ? void 0 : interactions.onAnimationComplete
 });
 const defaultChartData = (data) => {
   return {
@@ -40485,6 +40452,57 @@ const getDefaultProps = (props) => {
     }
   };
 };
+const getGradientCoordinates = (direction, chartArea) => {
+  switch (direction) {
+    case GradientDirection.TopToBottom:
+      return [chartArea.left, chartArea.top, chartArea.left, chartArea.bottom];
+    case GradientDirection.BottomToTop:
+      return [chartArea.left, chartArea.bottom, chartArea.left, chartArea.top];
+    case GradientDirection.LeftToRight:
+      return [chartArea.left, chartArea.top, chartArea.right, chartArea.top];
+    case GradientDirection.RightToLeft:
+      return [chartArea.right, chartArea.top, chartArea.left, chartArea.top];
+    case GradientDirection.TopLeftToBottomRight:
+      return [chartArea.left, chartArea.top, chartArea.right, chartArea.bottom];
+    case GradientDirection.BottomRightToTopLeft:
+      return [chartArea.right, chartArea.bottom, chartArea.left, chartArea.top];
+    case GradientDirection.BottomLeftToTopRight:
+      return [chartArea.left, chartArea.bottom, chartArea.right, chartArea.top];
+    case GradientDirection.TopRightToBottomLeft:
+      return [chartArea.right, chartArea.top, chartArea.left, chartArea.bottom];
+    default:
+      return [chartArea.left, chartArea.bottom, chartArea.right, chartArea.top];
+  }
+};
+const gradientBackgroundPlugin = {
+  id: "gradientBackgroundPlugin",
+  beforeDraw: (chart2) => {
+    const { ctx, chartArea, options } = chart2;
+    const gradientOptions = options.gradient;
+    const {
+      display = false,
+      gradientColors,
+      direction = GradientDirection.BottomLeftToTopRight
+    } = gradientOptions ?? {};
+    if (!display || !gradientColors || gradientColors.length === 0)
+      return;
+    const [x0, y0, x1, y1] = getGradientCoordinates(direction, chartArea);
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    gradientColors.forEach(({ offset, color: color2 }) => {
+      gradient.addColorStop(offset, color2);
+    });
+    ctx.save();
+    ctx.globalCompositeOperation = "destination-over";
+    ctx.fillStyle = gradient;
+    ctx.fillRect(
+      chartArea.left,
+      chartArea.top,
+      chartArea.right - chartArea.left,
+      chartArea.bottom - chartArea.top
+    );
+    ctx.restore();
+  }
+};
 const chart = "_chart_1jdnu_1";
 const fixedHeight = "_fixedHeight_1jdnu_13";
 const stretchHeight = "_stretchHeight_1jdnu_19";
@@ -40510,7 +40528,8 @@ Chart$2.register(
   plugin_title,
   plugin$1,
   plugin,
-  annotation
+  annotation,
+  gradientBackgroundPlugin
 );
 const ScatterChart = (props) => {
   setDefaultTheme();