@oliasoft-open-source/charts-library 3.7.0-beta-2 → 3.7.0

package/dist/index.js

@@ -4,14 +4,14 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
 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 { round as round$2, toNum, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
-import cx from "classnames";
 import { produce } from "immer";
+import { round as round$2, displayNumber, isCloseTo, roundByMagnitude, toNum } 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 { debounce as debounce$3, isEqual } from "lodash";
+import { isEmpty, isArray as isArray$2, some, has, debounce as debounce$3, isEqual } from "lodash";
 import { roundNumberToPrecision } from "@oliasoft-open-source/units/dist/rounding/rounding";
 /*!
  * @kurkle/color v0.3.2
@@ -4914,130 +4914,6 @@ let PieController$1 = (_e = class extends DoughnutController$1 {
   circumference: 360,
   radius: "100%"
 }), _e);
-let ScatterController$1 = (_f = class extends DatasetController$1 {
-  getLabelAndValue(index2) {
-    const meta = this._cachedMeta;
-    const labels = this.chart.data.labels || [];
-    const { xScale, yScale } = meta;
-    const parsed = this.getParsed(index2);
-    const x2 = xScale.getLabelForValue(parsed.x);
-    const y2 = yScale.getLabelForValue(parsed.y);
-    return {
-      label: labels[index2] || "",
-      value: "(" + x2 + ", " + y2 + ")"
-    };
-  }
-  update(mode) {
-    const meta = this._cachedMeta;
-    const { data: points = [] } = meta;
-    const animationsDisabled = this.chart._animationsDisabled;
-    let { start, count } = _getStartAndCountOfVisiblePoints$1(meta, points, animationsDisabled);
-    this._drawStart = start;
-    this._drawCount = count;
-    if (_scaleRangesChanged$1(meta)) {
-      start = 0;
-      count = points.length;
-    }
-    if (this.options.showLine) {
-      if (!this.datasetElementType) {
-        this.addElements();
-      }
-      const { dataset: line, _dataset } = meta;
-      line._chart = this.chart;
-      line._datasetIndex = this.index;
-      line._decimated = !!_dataset._decimated;
-      line.points = points;
-      const options = this.resolveDatasetElementOptions(mode);
-      options.segment = this.options.segment;
-      this.updateElement(line, void 0, {
-        animated: !animationsDisabled,
-        options
-      }, mode);
-    } else if (this.datasetElementType) {
-      delete meta.dataset;
-      this.datasetElementType = false;
-    }
-    this.updateElements(points, start, count, mode);
-  }
-  addElements() {
-    const { showLine } = this.options;
-    if (!this.datasetElementType && showLine) {
-      this.datasetElementType = this.chart.registry.getElement("line");
-    }
-    super.addElements();
-  }
-  updateElements(points, start, count, mode) {
-    const reset = mode === "reset";
-    const { iScale, vScale, _stacked, _dataset } = this._cachedMeta;
-    const firstOpts = this.resolveDataElementOptions(start, mode);
-    const sharedOptions = this.getSharedOptions(firstOpts);
-    const includeOptions = this.includeOptions(mode, sharedOptions);
-    const iAxis = iScale.axis;
-    const vAxis = vScale.axis;
-    const { spanGaps, segment } = this.options;
-    const maxGapLength = isNumber$1(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
-    const directUpdate = this.chart._animationsDisabled || reset || mode === "none";
-    let prevParsed = start > 0 && this.getParsed(start - 1);
-    for (let i2 = start; i2 < start + count; ++i2) {
-      const point = points[i2];
-      const parsed = this.getParsed(i2);
-      const properties = directUpdate ? point : {};
-      const nullData = isNullOrUndef$1(parsed[vAxis]);
-      const iPixel = properties[iAxis] = iScale.getPixelForValue(parsed[iAxis], i2);
-      const vPixel = properties[vAxis] = reset || nullData ? vScale.getBasePixel() : vScale.getPixelForValue(_stacked ? this.applyStack(vScale, parsed, _stacked) : parsed[vAxis], i2);
-      properties.skip = isNaN(iPixel) || isNaN(vPixel) || nullData;
-      properties.stop = i2 > 0 && Math.abs(parsed[iAxis] - prevParsed[iAxis]) > maxGapLength;
-      if (segment) {
-        properties.parsed = parsed;
-        properties.raw = _dataset.data[i2];
-      }
-      if (includeOptions) {
-        properties.options = sharedOptions || this.resolveDataElementOptions(i2, point.active ? "active" : mode);
-      }
-      if (!directUpdate) {
-        this.updateElement(point, i2, properties, mode);
-      }
-      prevParsed = parsed;
-    }
-    this.updateSharedOptions(sharedOptions, mode, firstOpts);
-  }
-  getMaxOverflow() {
-    const meta = this._cachedMeta;
-    const data = meta.data || [];
-    if (!this.options.showLine) {
-      let max = 0;
-      for (let i2 = data.length - 1; i2 >= 0; --i2) {
-        max = Math.max(max, data[i2].size(this.resolveDataElementOptions(i2)) / 2);
-      }
-      return max > 0 && max;
-    }
-    const dataset = meta.dataset;
-    const border = dataset.options && dataset.options.borderWidth || 0;
-    if (!data.length) {
-      return border;
-    }
-    const firstPoint = data[0].size(this.resolveDataElementOptions(0));
-    const lastPoint = data[data.length - 1].size(this.resolveDataElementOptions(data.length - 1));
-    return Math.max(border, firstPoint, lastPoint) / 2;
-  }
-}, __publicField(_f, "id", "scatter"), __publicField(_f, "defaults", {
-  datasetElementType: false,
-  dataElementType: "point",
-  showLine: false,
-  fill: false
-}), __publicField(_f, "overrides", {
-  interaction: {
-    mode: "point"
-  },
-  scales: {
-    x: {
-      type: "linear"
-    },
-    y: {
-      type: "linear"
-    }
-  }
-}), _f);
 function abstract$1() {
   throw new Error("This method is not implemented: Check that a complete date adapter is provided.");
 }
@@ -5927,7 +5803,7 @@ function _detectPlatform$1(canvas2) {
   }
   return DomPlatform$1;
 }
-let Element$2 = (_g = class {
+let Element$2 = (_f = class {
   constructor() {
     __publicField(this, "x");
     __publicField(this, "y");
@@ -5959,7 +5835,7 @@ let Element$2 = (_g = class {
     });
     return ret;
   }
-}, __publicField(_g, "defaults", {}), __publicField(_g, "defaultRoutes"), _g);
+}, __publicField(_f, "defaults", {}), __publicField(_f, "defaultRoutes"), _f);
 function autoSkip$1(scale, ticks) {
   const tickOpts = scale.options.ticks;
   const determinedMaxTicks = determineMaxTicks$1(scale);
@@ -8046,7 +7922,7 @@ function getDatasetArea(meta, chartArea) {
   }
   return chartArea;
 }
-let Chart$2 = (_h = class {
+let Chart$2 = (_g = class {
   static register(...items) {
     registry$1.add(...items);
     invalidatePlugins$1();
@@ -8866,7 +8742,7 @@ let Chart$2 = (_h = class {
     const hoverOptions = this.options.hover;
     return this.getElementsAtEventForMode(e2, hoverOptions.mode, hoverOptions, useFinalPosition);
   }
-}, __publicField(_h, "defaults", defaults$2), __publicField(_h, "instances", instances$1), __publicField(_h, "overrides", overrides$1), __publicField(_h, "registry", registry$1), __publicField(_h, "version", version$3), __publicField(_h, "getChart", getChart$1), _h);
+}, __publicField(_g, "defaults", defaults$2), __publicField(_g, "instances", instances$1), __publicField(_g, "overrides", overrides$1), __publicField(_g, "registry", registry$1), __publicField(_g, "version", version$3), __publicField(_g, "getChart", getChart$1), _g);
 function invalidatePlugins$1() {
   return each$1(Chart$2.instances, (chart2) => chart2._plugins.invalidate());
 }
@@ -9028,7 +8904,7 @@ function drawBorder$1(ctx, element, offset, spacing, circular) {
     ctx.stroke();
   }
 }
-let ArcElement$1 = (_i = class extends Element$2 {
+let ArcElement$1 = (_h = class extends Element$2 {
   constructor(cfg) {
     super();
     __publicField(this, "circumference");
@@ -9113,7 +8989,7 @@ let ArcElement$1 = (_i = class extends Element$2 {
     drawBorder$1(ctx, this, radiusOffset, spacing, circular);
     ctx.restore();
   }
-}, __publicField(_i, "id", "arc"), __publicField(_i, "defaults", {
+}, __publicField(_h, "id", "arc"), __publicField(_h, "defaults", {
   borderAlign: "center",
   borderColor: "#fff",
   borderDash: [],
@@ -9125,12 +9001,12 @@ let ArcElement$1 = (_i = class extends Element$2 {
   spacing: 0,
   angle: void 0,
   circular: true
-}), __publicField(_i, "defaultRoutes", {
+}), __publicField(_h, "defaultRoutes", {
   backgroundColor: "backgroundColor"
-}), __publicField(_i, "descriptors", {
+}), __publicField(_h, "descriptors", {
   _scriptable: true,
   _indexable: (name) => name !== "borderDash"
-}), _i);
+}), _h);
 function setStyle$1(ctx, options, style = options) {
   ctx.lineCap = valueOrDefault$1(style.borderCapStyle, options.borderCapStyle);
   ctx.setLineDash(valueOrDefault$1(style.borderDash, options.borderDash));
@@ -9283,7 +9159,7 @@ function draw$3(ctx, line, start, count) {
     strokePathDirect$1(ctx, line, start, count);
   }
 }
-let LineElement$1 = (_j = class extends Element$2 {
+let LineElement$1 = (_i = class extends Element$2 {
   constructor(cfg) {
     super();
     this.animated = true;
@@ -9393,7 +9269,7 @@ let LineElement$1 = (_j = class extends Element$2 {
       this._path = void 0;
     }
   }
-}, __publicField(_j, "id", "line"), __publicField(_j, "defaults", {
+}, __publicField(_i, "id", "line"), __publicField(_i, "defaults", {
   borderCapStyle: "butt",
   borderDash: [],
   borderDashOffset: 0,
@@ -9405,13 +9281,13 @@ let LineElement$1 = (_j = class extends Element$2 {
   spanGaps: false,
   stepped: false,
   tension: 0
-}), __publicField(_j, "defaultRoutes", {
+}), __publicField(_i, "defaultRoutes", {
   backgroundColor: "backgroundColor",
   borderColor: "borderColor"
-}), __publicField(_j, "descriptors", {
+}), __publicField(_i, "descriptors", {
   _scriptable: true,
   _indexable: (name) => name !== "borderDash" && name !== "fill"
-}), _j);
+}), _i);
 function inRange$1$1(el, pos, axis, useFinalPosition) {
   const options = el.options;
   const { [axis]: value } = el.getProps([
@@ -9419,7 +9295,7 @@ function inRange$1$1(el, pos, axis, useFinalPosition) {
   ], useFinalPosition);
   return Math.abs(pos - value) < options.radius + options.hitRadius;
 }
-let PointElement$1 = (_k = class extends Element$2 {
+let PointElement$1 = (_j = class extends Element$2 {
   constructor(cfg) {
     super();
     __publicField(this, "parsed");
@@ -9478,10 +9354,10 @@ let PointElement$1 = (_k = class extends Element$2 {
     const options = this.options || {};
     return options.radius + options.hitRadius;
   }
-}, __publicField(_k, "id", "point"), /**
+}, __publicField(_j, "id", "point"), /**
 * @type {any}
 */
-__publicField(_k, "defaults", {
+__publicField(_j, "defaults", {
   borderWidth: 1,
   hitRadius: 1,
   hoverBorderWidth: 1,
@@ -9492,10 +9368,10 @@ __publicField(_k, "defaults", {
 }), /**
 * @type {any}
 */
-__publicField(_k, "defaultRoutes", {
+__publicField(_j, "defaultRoutes", {
   backgroundColor: "backgroundColor",
   borderColor: "borderColor"
-}), _k);
+}), _j);
 function getBarBounds$1(bar, useFinalPosition) {
   const { x: x2, y: y2, base, width, height } = bar.getProps([
     "x",
@@ -9609,7 +9485,7 @@ function inflateRect$1(rect, amount, refRect = {}) {
     radius: rect.radius
   };
 }
-let BarElement$1 = (_l = class extends Element$2 {
+let BarElement$1 = (_k = class extends Element$2 {
   constructor(cfg) {
     super();
     this.options = void 0;
@@ -9665,16 +9541,16 @@ let BarElement$1 = (_l = class extends Element$2 {
   getRange(axis) {
     return axis === "x" ? this.width / 2 : this.height / 2;
   }
-}, __publicField(_l, "id", "bar"), __publicField(_l, "defaults", {
+}, __publicField(_k, "id", "bar"), __publicField(_k, "defaults", {
   borderSkipped: "start",
   borderWidth: 0,
   borderRadius: 0,
   inflateAmount: "auto",
   pointStyle: void 0
-}), __publicField(_l, "defaultRoutes", {
+}), __publicField(_k, "defaultRoutes", {
   backgroundColor: "backgroundColor",
   borderColor: "borderColor"
-}), _l);
+}), _k);
 function _segments(line, target, property) {
   const segments = line.segments;
   const points = line.points;
@@ -11243,7 +11119,7 @@ function invokeCallbackWithFallback(callbacks, name, ctx, arg) {
   }
   return result;
 }
-let Tooltip$1 = (_m = class extends Element$2 {
+let Tooltip$1 = (_l = class extends Element$2 {
   constructor(config2) {
     super();
     this.opacity = 0;
@@ -11782,7 +11658,7 @@ let Tooltip$1 = (_m = class extends Element$2 {
     const position = positioners$2[options.position].call(this, active, e2);
     return position !== false && (caretX !== position.x || caretY !== position.y);
   }
-}, __publicField(_m, "positioners", positioners$2), _m);
+}, __publicField(_l, "positioners", positioners$2), _l);
 var plugin_tooltip = {
   id: "tooltip",
   _element: Tooltip$1,
@@ -11937,7 +11813,7 @@ function _getLabelForValue(value) {
   }
   return value;
 }
-let CategoryScale$1 = (_n = class extends Scale$1 {
+let CategoryScale$1 = (_m = class extends Scale$1 {
   constructor(cfg) {
     super(cfg);
     this._startValue = void 0;
@@ -12023,11 +11899,11 @@ let CategoryScale$1 = (_n = class extends Scale$1 {
   getBasePixel() {
     return this.bottom;
   }
-}, __publicField(_n, "id", "category"), __publicField(_n, "defaults", {
+}, __publicField(_m, "id", "category"), __publicField(_m, "defaults", {
   ticks: {
     callback: _getLabelForValue
   }
-}), _n);
+}), _m);
 function generateTicks$1$1(generationOptions, dataRange) {
   const ticks = [];
   const MIN_SPACING = 1e-14;
@@ -12250,7 +12126,7 @@ let LinearScaleBase$1 = class LinearScaleBase extends Scale$1 {
     return formatNumber$1(value, this.chart.options.locale, this.options.ticks.format);
   }
 };
-let LinearScale$1 = (_o = class extends LinearScaleBase$1 {
+let LinearScale$1 = (_n = class extends LinearScaleBase$1 {
   determineDataLimits() {
     const { min, max } = this.getMinMax(true);
     this.min = isNumberFinite$1(min) ? min : 0;
@@ -12271,11 +12147,11 @@ let LinearScale$1 = (_o = class extends LinearScaleBase$1 {
   getValueForPixel(pixel) {
     return this._startValue + this.getDecimalForPixel(pixel) * this._valueRange;
   }
-}, __publicField(_o, "id", "linear"), __publicField(_o, "defaults", {
+}, __publicField(_n, "id", "linear"), __publicField(_n, "defaults", {
   ticks: {
     callback: Ticks$1.formatters.numeric
   }
-}), _o);
+}), _n);
 const log10Floor = (v2) => Math.floor(log10$1(v2));
 const changeExponent = (v2, m2) => Math.pow(10, log10Floor(v2) + m2);
 function isMajor$1(tickVal) {
@@ -12337,7 +12213,7 @@ function generateTicks$2(generationOptions, { min, max }) {
   });
   return ticks;
 }
-let LogarithmicScale$1 = (_p = class extends Scale$1 {
+let LogarithmicScale$1 = (_o = class extends Scale$1 {
   constructor(cfg) {
     super(cfg);
     this.start = void 0;
@@ -12434,14 +12310,14 @@ let LogarithmicScale$1 = (_p = class extends Scale$1 {
     const decimal = this.getDecimalForPixel(pixel);
     return Math.pow(10, this._startValue + decimal * this._valueRange);
   }
-}, __publicField(_p, "id", "logarithmic"), __publicField(_p, "defaults", {
+}, __publicField(_o, "id", "logarithmic"), __publicField(_o, "defaults", {
   ticks: {
     callback: Ticks$1.formatters.logarithmic,
     major: {
       enabled: true
     }
   }
-}), _p);
+}), _o);
 const INTERVALS$1 = {
   millisecond: {
     common: true,
@@ -12577,7 +12453,7 @@ function ticksFromTimestamps$1(scale, values, majorUnit) {
   }
   return ilen === 0 || !majorUnit ? ticks : setMajorTicks$1(scale, ticks, map2, majorUnit);
 }
-let TimeScale$1 = (_q = class extends Scale$1 {
+let TimeScale$1 = (_p = class extends Scale$1 {
   constructor(props) {
     super(props);
     this._cache = {
@@ -12843,7 +12719,7 @@ let TimeScale$1 = (_q = class extends Scale$1 {
   normalize(values) {
     return _arrayUnique$1(values.sort(sorter$1));
   }
-}, __publicField(_q, "id", "time"), __publicField(_q, "defaults", {
+}, __publicField(_p, "id", "time"), __publicField(_p, "defaults", {
   bounds: "data",
   adapters: {},
   time: {
@@ -12861,7 +12737,7 @@ let TimeScale$1 = (_q = class extends Scale$1 {
       enabled: false
     }
   }
-}), _q);
+}), _p);
 function interpolate$2(table2, val, reverse) {
   let lo = 0;
   let hi = table2.length - 1;
@@ -12882,7 +12758,7 @@ function interpolate$2(table2, val, reverse) {
   const span = nextSource - prevSource;
   return span ? prevTarget + (nextTarget - prevTarget) * (val - prevSource) / span : prevTarget;
 }
-let TimeSeriesScale$1 = (_r = class extends TimeScale$1 {
+let TimeSeriesScale$1 = (_q = class extends TimeScale$1 {
   constructor(props) {
     super(props);
     this._table = [];
@@ -12967,7 +12843,7 @@ let TimeSeriesScale$1 = (_r = class extends TimeScale$1 {
     const decimal = this.getDecimalForPixel(pixel) / offsets.factor - offsets.end;
     return interpolate$2(this._table, decimal * this._tableRange + this._minPos, true);
   }
-}, __publicField(_r, "id", "timeseries"), __publicField(_r, "defaults", TimeScale$1.defaults), _r);
+}, __publicField(_q, "id", "timeseries"), __publicField(_q, "defaults", TimeScale$1.defaults), _q);
 const defaultDatasetIdKey = "label";
 function reforwardRef(ref, value) {
   if (typeof ref === "function") {
@@ -13104,343 +12980,6 @@ function createTypedChart(type, registerables) {
 const Line = /* @__PURE__ */ createTypedChart("line", LineController$1);
 const Bar = /* @__PURE__ */ createTypedChart("bar", BarController$1);
 const Pie = /* @__PURE__ */ createTypedChart("pie", PieController$1);
-const Scatter = /* @__PURE__ */ createTypedChart("scatter", ScatterController$1);
-const MINOR_TICKS_PER_MAJOR = 10;
-const getLargestMajorTickWidth = (majorTickPositions) => {
-  return majorTickPositions.reduce(
-    (acc, curr, index2) => {
-      if (index2 === 0)
-        return acc;
-      const gap = Math.abs(curr - majorTickPositions[index2 - 1]);
-      return Math.max(gap, acc);
-    },
-    0
-  );
-};
-const isValidPosition = (minorTickPosition, majorTickPositions, scale) => {
-  const { axis, left: left2, top: top2, right: right2, bottom: bottom2 } = scale;
-  const isHorizontal = axis === "x";
-  const start = isHorizontal ? left2 : top2;
-  const end = isHorizontal ? right2 : bottom2;
-  const isAfterStart = minorTickPosition > start;
-  const isBeforeEnd = minorTickPosition < end;
-  const isDuplicate = majorTickPositions.indexOf(minorTickPosition) !== -1;
-  return isAfterStart && isBeforeEnd && !isDuplicate;
-};
-const getMinorTickPositions = (majorTickPositions, scale) => {
-  const sortedMajorTickPositions = majorTickPositions.sort((a2, b2) => {
-    return a2 - b2;
-  });
-  const minorTickWidth = getLargestMajorTickWidth(majorTickPositions) / 10;
-  const startPosition = majorTickPositions[0];
-  const numMinorTicks = (majorTickPositions.length + 1) * MINOR_TICKS_PER_MAJOR;
-  const positions2 = [...Array(numMinorTicks)].map((_2, index2) => {
-    const minorTickPosition = startPosition + (index2 - MINOR_TICKS_PER_MAJOR + 1) * minorTickWidth;
-    return parseFloat(minorTickPosition.toFixed(1));
-  }).filter(
-    (position) => isValidPosition(position, sortedMajorTickPositions, scale)
-  );
-  return positions2;
-};
-const drawMinorTicksForScale = (scale) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
-  const { chart: chart2, ctx } = scale;
-  const config2 = chart2.config;
-  if (!((_d2 = (_c2 = (_b2 = (_a2 = config2 == null ? void 0 : config2.options) == null ? void 0 : _a2.scales) == null ? void 0 : _b2[scale.id]) == null ? void 0 : _c2.grid) == null ? void 0 : _d2.drawOnChartArea))
-    return;
-  if (config2.options.indexAxis === scale.axis)
-    return;
-  const isHorizontal = scale.axis === "x";
-  const majorTickPositions = scale.ticks.map((_2, index2) => scale.getPixelForTick(index2)).sort((a2, b2) => a2 - b2);
-  const minorTickPositions = getMinorTickPositions(majorTickPositions, scale);
-  ctx.save();
-  ctx.strokeStyle = ((_i2 = (_h2 = (_g2 = (_f2 = (_e2 = config2 == null ? void 0 : config2._config) == null ? void 0 : _e2.options) == null ? void 0 : _f2.scales) == null ? void 0 : _g2[scale.id]) == null ? void 0 : _h2.grid) == null ? void 0 : _i2.color) || "rgba(0,0,0,0.06)";
-  ctx.lineWidth = 0.5;
-  minorTickPositions.forEach((minorTickPosition) => {
-    ctx.beginPath();
-    if (isHorizontal) {
-      const { top: top2, bottom: bottom2 } = chart2.chartArea;
-      ctx.moveTo(minorTickPosition, top2);
-      ctx.lineTo(minorTickPosition, bottom2);
-    } else {
-      const { left: left2, right: right2 } = chart2.chartArea;
-      ctx.moveTo(left2, minorTickPosition);
-      ctx.lineTo(right2, minorTickPosition);
-    }
-    ctx.stroke();
-  });
-  ctx.restore();
-};
-const chartMinorGridlinesPlugin = {
-  id: "minorGridlines",
-  beforeDatasetsDraw: (chart2) => {
-    const { scales } = chart2;
-    Object.keys(scales).forEach((id) => drawMinorTicksForScale(scales[id]));
-  }
-};
-const BORDER_WIDTH = {
-  INITIAL: 2,
-  HOVERED: 6
-};
-const BORDER_COLOR = "rgba(0,0,0,0.1)";
-const ANNOTATION_DASH = [10, 2];
-const DEFAULT_FONT_SIZE = 12;
-const DEFAULT_FONT_FAMILY = '"Roobert", 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 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;
-var AxisType = /* @__PURE__ */ ((AxisType2) => {
-  AxisType2["X"] = "x";
-  AxisType2["Y"] = "y";
-  return AxisType2;
-})(AxisType || {});
-var Position = /* @__PURE__ */ ((Position2) => {
-  Position2["Bottom"] = "bottom";
-  Position2["Top"] = "top";
-  Position2["Left"] = "left";
-  Position2["Right"] = "right";
-  Position2["TopRight"] = "top-right";
-  Position2["TopLeft"] = "top-left";
-  Position2["BottomLeft"] = "bottom-left";
-  Position2["BottomRight"] = "bottom-right";
-  return Position2;
-})(Position || {});
-var ChartType = /* @__PURE__ */ ((ChartType2) => {
-  ChartType2["Line"] = "line";
-  ChartType2["Bar"] = "bar";
-  return ChartType2;
-})(ChartType || {});
-var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
-  CursorStyle2["Pointer"] = "pointer";
-  CursorStyle2["Initial"] = "initial";
-  return CursorStyle2;
-})(CursorStyle || {});
-var ScaleType = /* @__PURE__ */ ((ScaleType2) => {
-  ScaleType2["Category"] = "category";
-  ScaleType2["Linear"] = "linear";
-  ScaleType2["Logarithmic"] = "logarithmic";
-  return ScaleType2;
-})(ScaleType || {});
-var ChartDirection = /* @__PURE__ */ ((ChartDirection2) => {
-  ChartDirection2["Vertical"] = "vertical";
-  return ChartDirection2;
-})(ChartDirection || {});
-var TooltipLabel = /* @__PURE__ */ ((TooltipLabel2) => {
-  TooltipLabel2["Y"] = "yLabel";
-  TooltipLabel2["X"] = "xLabel";
-  return TooltipLabel2;
-})(TooltipLabel || {});
-var AlignOptions = /* @__PURE__ */ ((AlignOptions2) => {
-  AlignOptions2["End"] = "end";
-  AlignOptions2["Start"] = "start";
-  AlignOptions2["Center"] = "center";
-  AlignOptions2["Right"] = "right";
-  AlignOptions2["Left"] = "left";
-  return AlignOptions2;
-})(AlignOptions || {});
-var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
-  AnnotationType2["Box"] = "box";
-  AnnotationType2["Ellipse"] = "ellipse";
-  AnnotationType2["Line"] = "line";
-  AnnotationType2["Text"] = "text";
-  return AnnotationType2;
-})(AnnotationType || {});
-var PointStyle = /* @__PURE__ */ ((PointStyle2) => {
-  PointStyle2["Circle"] = "circle";
-  return PointStyle2;
-})(PointStyle || {});
-var ChartHoverMode = /* @__PURE__ */ ((ChartHoverMode2) => {
-  ChartHoverMode2["Nearest"] = "nearest";
-  return ChartHoverMode2;
-})(ChartHoverMode || {});
-var PanZoomMode = /* @__PURE__ */ ((PanZoomMode2) => {
-  PanZoomMode2["X"] = "x";
-  PanZoomMode2["Y"] = "y";
-  PanZoomMode2["XY"] = "xy";
-  PanZoomMode2["Z"] = "z";
-  return PanZoomMode2;
-})(PanZoomMode || {});
-var Key = /* @__PURE__ */ ((Key2) => {
-  Key2["Shift"] = "Shift";
-  return Key2;
-})(Key || {});
-var Events = /* @__PURE__ */ ((Events2) => {
-  Events2["Mousemove"] = "mousemove";
-  Events2["Mouseout"] = "mouseout";
-  Events2["Click"] = "click";
-  Events2["Touchstart"] = "touchstart";
-  Events2["Touchmove"] = "touchmove";
-  Events2["Dblclick"] = "dblclick";
-  return Events2;
-})(Events || {});
-const chartAreaBorderPlugin = {
-  id: "chartAreaBorder",
-  beforeDraw(chart2, _args, options) {
-    const {
-      ctx,
-      chartArea: { left: left2, top: top2, width, height }
-    } = chart2;
-    ctx.save();
-    ctx.strokeStyle = options.borderColor;
-    ctx.lineWidth = options.borderWidth;
-    ctx.setLineDash(options.borderDash || []);
-    ctx.lineDashOffset = options.borderDashOffset;
-    ctx.strokeRect(left2, top2, width, height);
-    ctx.restore();
-  }
-};
-const getPlugins = (graph, legend2) => {
-  var _a2;
-  let plugins = [];
-  if (graph.showMinorGridlines) {
-    plugins.push(chartMinorGridlinesPlugin);
-  }
-  const customLegend = legend2 == null ? void 0 : legend2.customLegend;
-  if ((customLegend == null ? void 0 : customLegend.customLegendPlugin) && (customLegend == null ? void 0 : customLegend.customLegendContainerID)) {
-    plugins.push({
-      id: CUSTOM_LEGEND_PLUGIN_NAME,
-      ...(_a2 = legend2 == null ? void 0 : legend2.customLegend) == null ? void 0 : _a2.customLegendPlugin
-    });
-  }
-  plugins.push(chartAreaBorderPlugin);
-  return plugins;
-};
-const generateRandomColor = (colors2) => {
-  const color2 = `#${Math.floor(Math.random() * WHITE_COLOR_AS_DECIMAL).toString(
-    16
-  )}`;
-  if (colors2.includes(color2)) {
-    return generateRandomColor(colors2);
-  } else {
-    colors2.push(color2);
-    return colors2;
-  }
-};
-const setAnnotations = (annotationsData) => {
-  return (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map((_v, i2) => i2) : [];
-};
-const getTitle = (options) => {
-  return options.title !== "" ? {
-    display: true,
-    text: options.title
-  } : {};
-};
-const isVertical = (direction) => {
-  return direction === ChartDirection.Vertical;
-};
-const getAxisPosition = (axisType, i2) => {
-  const [positionA, positionB] = axisType === AxisType.Y ? [Position.Left, Position.Right] : [Position.Top, Position.Bottom];
-  return i2 % 2 === 0 ? positionA : positionB;
-};
-const getClassName = (chartStyling, styles2) => {
-  const { width, height, staticChartHeight, squareAspectRatio: squareAspectRatio2 } = chartStyling;
-  const squareAspectRatioStyle = squareAspectRatio2 ? styles2.squareAspectRatio : "";
-  let heightStyles = "";
-  if (width || height) {
-    heightStyles = "";
-  } else {
-    heightStyles = staticChartHeight ? styles2 == null ? void 0 : styles2.fixedHeight : styles2 == null ? void 0 : styles2.stretchHeight;
-  }
-  return cx(styles2.chart, heightStyles, squareAspectRatioStyle);
-};
-const getLegend = (options, clickHandler) => {
-  const { legend: legend2 } = options || {};
-  return {
-    position: (legend2 == null ? void 0 : legend2.position) || Position.Top,
-    display: legend2 == null ? void 0 : legend2.display,
-    align: legend2 == null ? void 0 : legend2.align,
-    labels: {
-      boxHeight: LEGEND_LABEL_BOX_SIZE,
-      boxWidth: (legend2 == null ? void 0 : legend2.usePointStyle) ? LEGEND_LABEL_BOX_SIZE : void 0,
-      usePointStyle: legend2 == null ? void 0 : legend2.usePointStyle
-    },
-    onClick: clickHandler
-  };
-};
-const afterLabelCallback = (tooltipItem) => {
-  const { error } = tooltipItem.dataset.data[tooltipItem == null ? void 0 : tooltipItem.dataIndex];
-  return error ? `Error: ${round$2(error, 4)}` : "";
-};
-const getTooltipLabel = (tooltipItem, showLabelsInTooltips) => {
-  var _a2;
-  const datasetDataLabel = (_a2 = tooltipItem.dataset.data[tooltipItem.dataIndex]) == null ? void 0 : _a2.label;
-  const dataLabel = Array.isArray(datasetDataLabel) ? datasetDataLabel.join(" , ") : datasetDataLabel;
-  return showLabelsInTooltips && (dataLabel == null ? void 0 : dataLabel.length) ? ` (${dataLabel})` : "";
-};
-const getChartFileName = (axes) => {
-  if (!axes) {
-    return DEFAULT_CHART_NAME;
-  }
-  const axesLabels = axes.reduce((acc, cur, index2) => {
-    var _a2;
-    const labelWithNoSpace = ((_a2 = cur.label) == null ? void 0 : _a2.replace(/\s/g, "_")) || String(index2);
-    return [...acc, labelWithNoSpace];
-  }, []);
-  return axesLabels.join("_");
-};
-const setDefaultTheme = () => {
-  defaults$2.font.size = DEFAULT_FONT_SIZE;
-  defaults$2.font.family = DEFAULT_FONT_FAMILY;
-  defaults$2.color = DEFAULT_COLOR;
-  defaults$2.borderColor = BORDER_COLOR;
-};
-const isNilOrEmpty = (value) => {
-  if (value === null || value === void 0 || value === "") {
-    return true;
-  }
-  if (Array.isArray(value) && value.length === 0) {
-    return true;
-  }
-  if (typeof value === "object" && Object.keys(value).length === 0) {
-    return true;
-  }
-  return false;
-};
-const chart$3 = "_chart_1v6ps_1";
-const styles$5 = {
-  chart: chart$3
-};
-const ScatterChart = (props) => {
-  setDefaultTheme();
-  const { data = { datasets: [] }, options, testId = null } = props.chart;
-  return /* @__PURE__ */ jsx("div", { className: styles$5.chart, children: /* @__PURE__ */ jsx(Scatter, { options, data, "data-testid": testId }) });
-};
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -22632,6 +22171,338 @@ const reducer$1 = (state, action) => {
     }
   });
 };
+var AxisType = /* @__PURE__ */ ((AxisType2) => {
+  AxisType2["X"] = "x";
+  AxisType2["Y"] = "y";
+  return AxisType2;
+})(AxisType || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["Bottom"] = "bottom";
+  Position2["Top"] = "top";
+  Position2["Left"] = "left";
+  Position2["Right"] = "right";
+  Position2["TopRight"] = "top-right";
+  Position2["TopLeft"] = "top-left";
+  Position2["BottomLeft"] = "bottom-left";
+  Position2["BottomRight"] = "bottom-right";
+  return Position2;
+})(Position || {});
+var ChartType = /* @__PURE__ */ ((ChartType2) => {
+  ChartType2["Line"] = "line";
+  ChartType2["Bar"] = "bar";
+  return ChartType2;
+})(ChartType || {});
+var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
+  CursorStyle2["Pointer"] = "pointer";
+  CursorStyle2["Initial"] = "initial";
+  return CursorStyle2;
+})(CursorStyle || {});
+var ScaleType = /* @__PURE__ */ ((ScaleType2) => {
+  ScaleType2["Category"] = "category";
+  ScaleType2["Linear"] = "linear";
+  ScaleType2["Logarithmic"] = "logarithmic";
+  return ScaleType2;
+})(ScaleType || {});
+var ChartDirection = /* @__PURE__ */ ((ChartDirection2) => {
+  ChartDirection2["Vertical"] = "vertical";
+  return ChartDirection2;
+})(ChartDirection || {});
+var TooltipLabel = /* @__PURE__ */ ((TooltipLabel2) => {
+  TooltipLabel2["Y"] = "yLabel";
+  TooltipLabel2["X"] = "xLabel";
+  return TooltipLabel2;
+})(TooltipLabel || {});
+var AlignOptions = /* @__PURE__ */ ((AlignOptions2) => {
+  AlignOptions2["End"] = "end";
+  AlignOptions2["Start"] = "start";
+  AlignOptions2["Center"] = "center";
+  AlignOptions2["Right"] = "right";
+  AlignOptions2["Left"] = "left";
+  return AlignOptions2;
+})(AlignOptions || {});
+var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
+  AnnotationType2["Box"] = "box";
+  AnnotationType2["Ellipse"] = "ellipse";
+  AnnotationType2["Line"] = "line";
+  AnnotationType2["Text"] = "text";
+  return AnnotationType2;
+})(AnnotationType || {});
+var PointStyle = /* @__PURE__ */ ((PointStyle2) => {
+  PointStyle2["Circle"] = "circle";
+  return PointStyle2;
+})(PointStyle || {});
+var ChartHoverMode = /* @__PURE__ */ ((ChartHoverMode2) => {
+  ChartHoverMode2["Nearest"] = "nearest";
+  return ChartHoverMode2;
+})(ChartHoverMode || {});
+var PanZoomMode = /* @__PURE__ */ ((PanZoomMode2) => {
+  PanZoomMode2["X"] = "x";
+  PanZoomMode2["Y"] = "y";
+  PanZoomMode2["XY"] = "xy";
+  PanZoomMode2["Z"] = "z";
+  return PanZoomMode2;
+})(PanZoomMode || {});
+var Key = /* @__PURE__ */ ((Key2) => {
+  Key2["Shift"] = "Shift";
+  return Key2;
+})(Key || {});
+var Events = /* @__PURE__ */ ((Events2) => {
+  Events2["Mousemove"] = "mousemove";
+  Events2["Mouseout"] = "mouseout";
+  Events2["Click"] = "click";
+  Events2["Touchstart"] = "touchstart";
+  Events2["Touchmove"] = "touchmove";
+  Events2["Dblclick"] = "dblclick";
+  return Events2;
+})(Events || {});
+const MINOR_TICKS_PER_MAJOR = 10;
+const getLargestMajorTickWidth = (majorTickPositions) => {
+  return majorTickPositions.reduce(
+    (acc, curr, index2) => {
+      if (index2 === 0)
+        return acc;
+      const gap = Math.abs(curr - majorTickPositions[index2 - 1]);
+      return Math.max(gap, acc);
+    },
+    0
+  );
+};
+const isValidPosition = (minorTickPosition, majorTickPositions, scale) => {
+  const { axis, left: left2, top: top2, right: right2, bottom: bottom2 } = scale;
+  const isHorizontal = axis === "x";
+  const start = isHorizontal ? left2 : top2;
+  const end = isHorizontal ? right2 : bottom2;
+  const isAfterStart = minorTickPosition > start;
+  const isBeforeEnd = minorTickPosition < end;
+  const isDuplicate = majorTickPositions.indexOf(minorTickPosition) !== -1;
+  return isAfterStart && isBeforeEnd && !isDuplicate;
+};
+const getMinorTickPositions = (majorTickPositions, scale) => {
+  const sortedMajorTickPositions = majorTickPositions.sort((a2, b2) => {
+    return a2 - b2;
+  });
+  const minorTickWidth = getLargestMajorTickWidth(majorTickPositions) / 10;
+  const startPosition = majorTickPositions[0];
+  const numMinorTicks = (majorTickPositions.length + 1) * MINOR_TICKS_PER_MAJOR;
+  const positions2 = [...Array(numMinorTicks)].map((_2, index2) => {
+    const minorTickPosition = startPosition + (index2 - MINOR_TICKS_PER_MAJOR + 1) * minorTickWidth;
+    return parseFloat(minorTickPosition.toFixed(1));
+  }).filter(
+    (position) => isValidPosition(position, sortedMajorTickPositions, scale)
+  );
+  return positions2;
+};
+const drawMinorTicksForScale = (scale) => {
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+  const { chart: chart2, ctx } = scale;
+  const config2 = chart2.config;
+  if (!((_d2 = (_c2 = (_b2 = (_a2 = config2 == null ? void 0 : config2.options) == null ? void 0 : _a2.scales) == null ? void 0 : _b2[scale.id]) == null ? void 0 : _c2.grid) == null ? void 0 : _d2.drawOnChartArea))
+    return;
+  if (config2.options.indexAxis === scale.axis)
+    return;
+  const isHorizontal = scale.axis === "x";
+  const majorTickPositions = scale.ticks.map((_2, index2) => scale.getPixelForTick(index2)).sort((a2, b2) => a2 - b2);
+  const minorTickPositions = getMinorTickPositions(majorTickPositions, scale);
+  ctx.save();
+  ctx.strokeStyle = ((_i2 = (_h2 = (_g2 = (_f2 = (_e2 = config2 == null ? void 0 : config2._config) == null ? void 0 : _e2.options) == null ? void 0 : _f2.scales) == null ? void 0 : _g2[scale.id]) == null ? void 0 : _h2.grid) == null ? void 0 : _i2.color) || "rgba(0,0,0,0.06)";
+  ctx.lineWidth = 0.5;
+  minorTickPositions.forEach((minorTickPosition) => {
+    ctx.beginPath();
+    if (isHorizontal) {
+      const { top: top2, bottom: bottom2 } = chart2.chartArea;
+      ctx.moveTo(minorTickPosition, top2);
+      ctx.lineTo(minorTickPosition, bottom2);
+    } else {
+      const { left: left2, right: right2 } = chart2.chartArea;
+      ctx.moveTo(left2, minorTickPosition);
+      ctx.lineTo(right2, minorTickPosition);
+    }
+    ctx.stroke();
+  });
+  ctx.restore();
+};
+const chartMinorGridlinesPlugin = {
+  id: "minorGridlines",
+  beforeDatasetsDraw: (chart2) => {
+    const { scales } = chart2;
+    Object.keys(scales).forEach((id) => drawMinorTicksForScale(scales[id]));
+  }
+};
+const BORDER_WIDTH = {
+  INITIAL: 2,
+  HOVERED: 6
+};
+const BORDER_COLOR = "rgba(0,0,0,0.1)";
+const ANNOTATION_DASH = [10, 2];
+const DEFAULT_FONT_SIZE = 13;
+const DEFAULT_FONT_FAMILY = '"Lato", sans-serif';
+const DEFAULT_COLOR = "rgba(0,0,0,.87)";
+const LEGEND_LABEL_BOX_SIZE = 12;
+const TOOLTIP_PADDING = 8;
+const TOOLTIP_BOX_PADDING = 4;
+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 chartAreaBorderPlugin = {
+  id: "chartAreaBorder",
+  beforeDraw(chart2, _args, options) {
+    const {
+      ctx,
+      chartArea: { left: left2, top: top2, width, height }
+    } = chart2;
+    ctx.save();
+    ctx.strokeStyle = options.borderColor;
+    ctx.lineWidth = options.borderWidth;
+    ctx.setLineDash(options.borderDash || []);
+    ctx.lineDashOffset = options.borderDashOffset;
+    ctx.strokeRect(left2, top2, width, height);
+    ctx.restore();
+  }
+};
+const getPlugins = (graph, legend2) => {
+  var _a2;
+  let plugins = [];
+  if (graph.showMinorGridlines) {
+    plugins.push(chartMinorGridlinesPlugin);
+  }
+  const customLegend = legend2 == null ? void 0 : legend2.customLegend;
+  if ((customLegend == null ? void 0 : customLegend.customLegendPlugin) && (customLegend == null ? void 0 : customLegend.customLegendContainerID)) {
+    plugins.push({
+      id: CUSTOM_LEGEND_PLUGIN_NAME,
+      ...(_a2 = legend2 == null ? void 0 : legend2.customLegend) == null ? void 0 : _a2.customLegendPlugin
+    });
+  }
+  plugins.push(chartAreaBorderPlugin);
+  return plugins;
+};
+const generateRandomColor = (colors2) => {
+  const color2 = `#${Math.floor(Math.random() * WHITE_COLOR_AS_DECIMAL).toString(
+    16
+  )}`;
+  if (colors2.includes(color2)) {
+    return generateRandomColor(colors2);
+  } else {
+    colors2.push(color2);
+    return colors2;
+  }
+};
+const setAnnotations = (annotationsData) => {
+  return (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map((_v, i2) => i2) : [];
+};
+const getTitle = (options) => {
+  return options.title !== "" ? {
+    display: true,
+    text: options.title
+  } : {};
+};
+const isVertical = (direction) => {
+  return direction === ChartDirection.Vertical;
+};
+const getAxisPosition = (axisType, i2) => {
+  const [positionA, positionB] = axisType === AxisType.Y ? [Position.Left, Position.Right] : [Position.Top, Position.Bottom];
+  return i2 % 2 === 0 ? positionA : positionB;
+};
+const getClassName = (chartStyling, styles2) => {
+  const {
+    width,
+    height,
+    staticChartHeight = false,
+    squareAspectRatio: squareAspectRatio2 = 0
+  } = chartStyling;
+  const squareAspectRatioStyle = squareAspectRatio2 ? styles2.squareAspectRatio : "";
+  let heightStyles = "";
+  if (width || height) {
+    heightStyles = "";
+  } else {
+    heightStyles = staticChartHeight ? styles2 == null ? void 0 : styles2.fixedHeight : styles2 == null ? void 0 : styles2.stretchHeight;
+  }
+  return cx(styles2.chart, heightStyles, squareAspectRatioStyle);
+};
+const getLegend = (options, clickHandler) => {
+  const { legend: legend2 } = options || {};
+  return {
+    position: (legend2 == null ? void 0 : legend2.position) || Position.Top,
+    display: legend2 == null ? void 0 : legend2.display,
+    align: legend2 == null ? void 0 : legend2.align,
+    labels: {
+      boxHeight: LEGEND_LABEL_BOX_SIZE,
+      boxWidth: (legend2 == null ? void 0 : legend2.usePointStyle) ? LEGEND_LABEL_BOX_SIZE : void 0,
+      usePointStyle: legend2 == null ? void 0 : legend2.usePointStyle
+    },
+    onClick: clickHandler
+  };
+};
+const afterLabelCallback = (tooltipItem) => {
+  const { error } = tooltipItem.dataset.data[tooltipItem == null ? void 0 : tooltipItem.dataIndex];
+  return error ? `Error: ${round$2(error, 4)}` : "";
+};
+const getTooltipLabel = (tooltipItem, showLabelsInTooltips) => {
+  var _a2;
+  const datasetDataLabel = (_a2 = tooltipItem.dataset.data[tooltipItem.dataIndex]) == null ? void 0 : _a2.label;
+  const dataLabel = Array.isArray(datasetDataLabel) ? datasetDataLabel.join(" , ") : datasetDataLabel;
+  return showLabelsInTooltips && (dataLabel == null ? void 0 : dataLabel.length) ? ` (${dataLabel})` : "";
+};
+const getChartFileName = (axes) => {
+  if (!axes) {
+    return DEFAULT_CHART_NAME;
+  }
+  const axesLabels = axes.reduce((acc, cur, index2) => {
+    var _a2;
+    const labelWithNoSpace = ((_a2 = cur.label) == null ? void 0 : _a2.replace(/\s/g, "_")) || String(index2);
+    return [...acc, labelWithNoSpace];
+  }, []);
+  return axesLabels.join("_");
+};
+const setDefaultTheme = () => {
+  defaults$2.font.size = DEFAULT_FONT_SIZE;
+  defaults$2.font.family = DEFAULT_FONT_FAMILY;
+  defaults$2.color = DEFAULT_COLOR;
+  defaults$2.borderColor = BORDER_COLOR;
+};
+const isNilOrEmpty = (value) => {
+  if (value === null || value === void 0 || value === "") {
+    return true;
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    return true;
+  }
+  if (typeof value === "object" && Object.keys(value).length === 0) {
+    return true;
+  }
+  return false;
+};
 const isLessThanMax = (value, max) => {
   return value === void 0 || max === void 0 || Number(value) < Number(max);
 };
@@ -22766,7 +22637,8 @@ const initialState = ({ options, persistenceId }) => {
     axes: stateAxes,
     showAnnotationLineIndex: setAnnotations(annotationsData),
     showTable: false,
-    enableDragPoints: dragData.enableDragData && enableDragPoints
+    enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
+    initialAxesRanges: []
   };
 };
 var DefaultContext = {
@@ -22871,7 +22743,8 @@ const LineOptions = ({
   onToggleLine,
   onTogglePoints,
   pointsEnabled,
-  translations
+  translations,
+  hasCustomOpt
 }) => {
   const options = [
     {
@@ -22901,17 +22774,26 @@ const LineOptions = ({
     }
   ];
   const selectedOption = options.find((option) => option.selected);
-  return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption == null ? void 0 : selectedOption.label, placement: "bottom", children: /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ jsx(
+    Tooltip$2,
     {
-      small: true,
-      basic: true,
-      colored: "muted",
-      round: true,
-      icon: selectedOption == null ? void 0 : selectedOption.icon,
-      onClick: selectedOption == null ? void 0 : selectedOption.onClick
+      text: selectedOption == null ? void 0 : selectedOption.label,
+      placement: "bottom",
+      enabled: !hasCustomOpt,
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          small: true,
+          basic: true,
+          colored: "muted",
+          round: true,
+          icon: selectedOption == null ? void 0 : selectedOption.icon,
+          onClick: selectedOption == null ? void 0 : selectedOption.onClick,
+          disabled: hasCustomOpt
+        }
+      )
     }
-  ) });
+  );
 };
 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);
@@ -23982,41 +23864,9 @@ const useChartFunctions = ({
   generatedDatasets
 }) => {
   const {
-    annotations,
-    interactions: {
-      onLegendClick,
-      onHover: onPointHover,
-      onUnhover: onPointUnhover
-    },
-    additionalAxesOptions,
+    interactions: { onHover: onPointHover, onUnhover: onPointUnhover },
     axes
   } = options;
-  const legendClick = useCallback(
-    (_e2, legendItem2) => {
-      const { datasetIndex } = legendItem2;
-      const chartInstance = chartRef == null ? void 0 : chartRef.current;
-      const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
-      const dataset = datasets[datasetIndex];
-      const meta = chartInstance.getDatasetMeta(datasetIndex);
-      meta.hidden = meta.hidden === null ? !dataset.hidden : null;
-      if (annotations.controlAnnotation && dataset.isAnnotation) {
-        const { annotationIndex } = dataset;
-        dispatch({ type: "TOGGLE_ANNOTATION", payload: { annotationIndex } });
-      }
-      if (dataset.displayGroup) {
-        datasets == null ? void 0 : datasets.forEach((ds, ix) => {
-          if (ds.displayGroup !== dataset.displayGroup)
-            return;
-          chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
-        });
-      }
-      if (onLegendClick) {
-        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
-      }
-      chartInstance == null ? void 0 : chartInstance.update();
-    },
-    [onLegendClick, annotations]
-  );
   const resetZoom2 = useCallback(() => {
     const chartInstance = chartRef == null ? void 0 : chartRef.current;
     chartInstance == null ? void 0 : chartInstance.resetZoom();
@@ -24087,18 +23937,6 @@ const useChartFunctions = ({
     },
     [chartRef]
   );
-  const controlsAxes = state.axes.map((axis, i2) => {
-    var _a2, _b2, _c2, _d2;
-    const axisType = i2 ? AxisType.Y : AxisType.X;
-    const min = axis.min ?? ((_b2 = (_a2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _a2[axisType]) == null ? void 0 : _b2.min);
-    const max = axis.max ?? ((_d2 = (_c2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _c2[axisType]) == null ? void 0 : _d2.max);
-    return {
-      ...axis,
-      // only add min and max properties if they are defined:
-      ...min ? { min } : {},
-      ...max ? { max } : {}
-    };
-  });
   const getControlsAxesLabels = useCallback(
     (propsAxes) => {
       var _a2;
@@ -24150,13 +23988,11 @@ const useChartFunctions = ({
     dispatch({ type: UPDATE_AXES_RANGES, payload: { axes: axes2 } });
   }, []);
   return {
-    legendClick,
     resetZoom: resetZoom2,
     onHover,
     handleDownload,
     handleKeyDown,
     handleKeyUp,
-    controlsAxes,
     controlsAxesLabels: getControlsAxesLabels(axes),
     updateAxesRangesFromChart,
     onResetAxes,
@@ -24230,10 +24066,11 @@ const reducer = (state, action) => {
       });
     case actionTypes.UnitUpdated:
       return produce(state, (draft) => {
+        var _a2;
         const { name, value, id } = action.payload;
-        const axis = draft.find((a2) => a2.id === id);
-        if (axis) {
-          axis.unit[name] = value;
+        const unit = (_a2 = draft.find((a2) => a2.id === id)) == null ? void 0 : _a2.unit;
+        if (unit && name) {
+          unit[name] = value;
         }
       });
     default:
@@ -24248,9 +24085,9 @@ const AxesOptionsPopover = (optionsPopover) => {
     controlsAxesLabels,
     onUpdateAxes,
     onResetAxes,
-    close,
     depthType,
-    translations
+    translations,
+    close
   } = optionsPopover;
   const [depthTypeState, setDepthTypeState] = useState(
     depthType == null ? void 0 : depthType.selectedDepthType
@@ -24281,8 +24118,8 @@ const AxesOptionsPopover = (optionsPopover) => {
     if (valid) {
       const sanitizedFormState = formState.map((axis) => ({
         ...axis,
-        min: toNum(axis.min),
-        max: toNum(axis.max)
+        min: typeof axis.min === "string" ? Number(axis.min) : axis.min,
+        max: typeof axis.max === "string" ? Number(axis.max) : axis.max
       }));
       onUpdateAxes({
         axes: sanitizedFormState
@@ -24324,7 +24161,9 @@ const AxesOptionsPopover = (optionsPopover) => {
         (el) => el.id === axis.id
       );
       const axisLabel = axisControl == null ? void 0 : axisControl.label;
-      const axisState = formState.find((a2) => a2.id === axis.id);
+      const axisState = formState.find(
+        (a2) => a2.id === axis.id
+      );
       const axisErrors = errors == null ? void 0 : errors.find((a2) => a2.id === axis.id);
       const { min, max, unit } = axisState || {};
       const minErrorMsg = ((_a3 = axisErrors == null ? void 0 : axisErrors.min) == null ? void 0 : _a3[0]) ? translations[axisErrors.min[0]] : null;
@@ -24368,7 +24207,7 @@ const AxesOptionsPopover = (optionsPopover) => {
           {
             name: "selectedUnit",
             options: (_c2 = axis == null ? void 0 : axis.unit) == null ? void 0 : _c2.options,
-            value: unit == null ? void 0 : unit.selectedUnit,
+            value: typeof unit !== "string" ? unit == null ? void 0 : unit.selectedUnit : void 0,
             onChange: (e2) => {
               onEditUnit({
                 name: e2.target.name,
@@ -24472,6 +24311,27 @@ const ControlsPortal = ({
   }
   return children;
 };
+const checkCustomOption = (data, customOptions) => {
+  if (isEmpty(data) || isEmpty(customOptions))
+    return false;
+  const checkOption = (dataset) => {
+    if (typeof customOptions === "string") {
+      return has(dataset, customOptions);
+    } else if (isArray$2(customOptions)) {
+      return some(customOptions, (option) => has(dataset, option));
+    } else {
+      return some(
+        Object.values(customOptions),
+        (option) => has(dataset, option)
+      );
+    }
+  };
+  if (isArray$2(data)) {
+    return some(data, (dataset) => checkOption(dataset));
+  } else {
+    return checkOption(data);
+  }
+};
 const Controls = ({
   headerComponent,
   subheaderComponent,
@@ -24503,19 +24363,14 @@ const Controls = ({
     onToggleDragPoints,
     onDisableDragOptions
   } = useToggleHandlers(dispatch);
-  const {
-    handleDownload,
-    controlsAxes,
-    controlsAxesLabels,
-    onResetAxes,
-    onUpdateAxes
-  } = useChartFunctions({
+  const { handleDownload, controlsAxesLabels, onResetAxes, onUpdateAxes } = useChartFunctions({
     chartRef,
     state,
     options,
     dispatch,
     generatedDatasets
   });
+  const hasCustomOpt = checkCustomOption(generatedDatasets, "hasCustomOpt");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles$3.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
@@ -24526,7 +24381,7 @@ const Controls = ({
             AxesOptions,
             {
               initialAxesRanges,
-              axes: controlsAxes,
+              axes: state.axes,
               controlsAxesLabels,
               onUpdateAxes,
               onResetAxes,
@@ -24541,7 +24396,8 @@ const Controls = ({
               pointsEnabled,
               onToggleLine,
               onTogglePoints,
-              translations
+              translations,
+              hasCustomOpt
             }
           ),
           /* @__PURE__ */ jsx(
@@ -24570,7 +24426,7 @@ const Controls = ({
               onTogglePan,
               onToggleZoom,
               enableDragPoints,
-              isDragDataAllowed: dragData.enableDragData,
+              isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
               onToggleDragPoints,
               onDisableDragOptions,
               translations
@@ -24772,9 +24628,143 @@ const LegendItem = ({ hidden, dataset, handleClick }) => {
     }
   );
 };
+const useLegendState = ({
+  chartRef,
+  options,
+  state,
+  dispatch
+}) => {
+  const {
+    annotations,
+    interactions: { onLegendClick },
+    legend: { customLegend }
+  } = options;
+  const { legendEnabled } = state;
+  const [hiddenStates, setHiddenStates] = useState([]);
+  const upsertHiddenState = ({ label, datasetIndex, hidden }) => {
+    setHiddenStates((prevStates) => {
+      const existingIndex = prevStates.findIndex(
+        (state2) => state2.label === label
+      );
+      const newStates = [...prevStates];
+      const newState = { label, datasetIndex, hidden };
+      if (existingIndex !== -1) {
+        newStates[existingIndex] = newState;
+      } else {
+        newStates.push(newState);
+      }
+      return newStates;
+    });
+  };
+  const clearNonExistentDatasets = (datasets) => {
+    const existingLabels = datasets.map((ds) => ds.label);
+    setHiddenStates(
+      (prevStates) => prevStates.filter((state2) => existingLabels.includes(state2.label))
+    );
+  };
+  const legendClick = useCallback(
+    (_e2, legendItem2) => {
+      const { datasetIndex } = legendItem2;
+      const chartInstance = chartRef == null ? void 0 : chartRef.current;
+      const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
+      const dataset = datasets == null ? void 0 : datasets[datasetIndex];
+      const meta = chartInstance == null ? void 0 : chartInstance.getDatasetMeta(datasetIndex);
+      const isDatasetVisible = (chartInstance == null ? void 0 : chartInstance.isDatasetVisible(datasetIndex)) ?? true;
+      upsertHiddenState({
+        label: dataset.label,
+        datasetIndex,
+        hidden: isDatasetVisible
+      });
+      chartInstance == null ? void 0 : chartInstance.setDatasetVisibility(datasetIndex, !isDatasetVisible);
+      if (annotations.controlAnnotation && (dataset == null ? void 0 : dataset.isAnnotation)) {
+        const { annotationIndex } = dataset;
+        dispatch({ type: TOGGLE_ANNOTATION, payload: { annotationIndex } });
+      }
+      if (dataset.displayGroup) {
+        datasets == null ? void 0 : datasets.forEach((ds, ix) => {
+          if (ds.displayGroup !== dataset.displayGroup)
+            return;
+          if (chartInstance && meta) {
+            chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
+          }
+        });
+      }
+      if (onLegendClick) {
+        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
+      }
+      chartInstance == null ? void 0 : chartInstance.update();
+    },
+    [chartRef, annotations, onLegendClick, hiddenStates]
+  );
+  const legend2 = useMemo(
+    () => getLegend(options, legendClick),
+    [legendEnabled]
+  );
+  const customLegendPlugin = useMemo(
+    () => ({
+      [CUSTOM_LEGEND_PLUGIN_NAME]: (customLegend == null ? void 0 : customLegend.customLegendPlugin) && {
+        containerID: customLegend == null ? void 0 : customLegend.customLegendContainerID
+      }
+    }),
+    [customLegend]
+  );
+  return {
+    legendClick,
+    hiddenStates,
+    legend: legend2,
+    customLegendPlugin,
+    upsertHiddenState,
+    clearNonExistentDatasets
+  };
+};
 const LEGEND_MARGIN = 4;
+const createLegendStyle = (legendPosition, chart2) => {
+  const { height = 0, width = 0, chartArea } = chart2;
+  const { top: top2, left: left2, bottom: bottom2, right: right2 } = chartArea;
+  return {
+    left: legendPosition.includes("left") ? left2 : void 0,
+    right: legendPosition.includes("right") ? width - right2 : void 0,
+    top: legendPosition.includes("top") ? top2 : void 0,
+    bottom: legendPosition.includes("bottom") ? height - bottom2 : void 0,
+    maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
+    maxWidth: 0.5 * (right2 - left2 - LEGEND_MARGIN * 2),
+    margin: LEGEND_MARGIN
+  };
+};
+const getGeneratedLabels = (chart2) => {
+  var _a2, _b2, _c2, _d2, _e2;
+  return ((_e2 = (_d2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels) == null ? void 0 : _e2.call(_d2, chart2)) ?? [];
+};
+const useGeneratedLabels = (chartRef, generatedDatasets) => {
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    const chart2 = chartRef.current;
+    if (!chart2)
+      return;
+    const newItems = getGeneratedLabels(chart2);
+    setItems(newItems);
+  }, [generatedDatasets, chartRef]);
+  return items;
+};
+const LegendItems = ({
+  items,
+  hiddenStates,
+  datasets,
+  legendClick
+}) => /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => {
+  var _a2;
+  const hiddenState = ((_a2 = hiddenStates.find((state) => state.label === item.text)) == null ? void 0 : _a2.hidden) ?? false;
+  return /* @__PURE__ */ jsx(
+    LegendItem,
+    {
+      hidden: hiddenState,
+      dataset: datasets[item.datasetIndex],
+      handleClick: (event) => legendClick(event, item)
+    },
+    `${item.datasetIndex}-hidden-${item.hidden}`
+  );
+}) });
 const LegendPanel = forwardRef((props, ref) => {
-  var _a2, _b2, _c2, _d2;
   const {
     legendPosition,
     chartRef,
@@ -24784,32 +24774,25 @@ const LegendPanel = forwardRef((props, ref) => {
     generatedDatasets,
     isDragging: isDragging2
   } = props;
-  const [refresh, setRefresh] = useState(false);
   const { legendEnabled } = state;
-  const { legendClick } = useChartFunctions({
+  const chart2 = chartRef == null ? void 0 : chartRef.current;
+  if (!chart2)
+    return null;
+  const {
+    data: { datasets }
+  } = chart2;
+  const { legendClick, hiddenStates, clearNonExistentDatasets } = useLegendState({
     chartRef,
-    state,
     options,
-    dispatch,
-    generatedDatasets
+    state,
+    dispatch
   });
   const { onToggleLegend } = useToggleHandlers(dispatch);
-  const chart2 = chartRef.current;
-  if (!chart2)
-    return null;
-  const { data, chartArea, height = 0, width = 0 } = chart2;
-  const { datasets } = data;
-  const { top: top2, left: left2, bottom: bottom2, right: right2 } = chartArea;
-  const items = ((_d2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels(chart2)) ?? [];
-  const style = {
-    left: legendPosition.includes("left") ? left2 : void 0,
-    right: legendPosition.includes("right") ? width - right2 : void 0,
-    top: legendPosition.includes("top") ? top2 : void 0,
-    bottom: legendPosition.includes("bottom") ? height - bottom2 : void 0,
-    maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
-    maxWidth: 0.5 * (right2 - left2 - LEGEND_MARGIN * 2),
-    margin: LEGEND_MARGIN
-  };
+  const items = useGeneratedLabels(chartRef, generatedDatasets);
+  const style = createLegendStyle(legendPosition, chart2);
+  useEffect(() => {
+    clearNonExistentDatasets(generatedDatasets);
+  }, [generatedDatasets]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -24830,18 +24813,15 @@ const LegendPanel = forwardRef((props, ref) => {
             icon: legendEnabled ? /* @__PURE__ */ jsx(TbX, {}) : /* @__PURE__ */ jsx(TbList, {})
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => /* @__PURE__ */ jsx(
-          LegendItem,
+        /* @__PURE__ */ jsx(
+          LegendItems,
           {
-            hidden: item.hidden,
-            dataset: datasets[item.datasetIndex],
-            handleClick: (event) => {
-              legendClick(event, item);
-              setRefresh(!refresh);
-            }
-          },
-          `${item.datasetIndex}-hidden-${item.hidden}`
-        )) })
+            items,
+            hiddenStates,
+            datasets,
+            legendClick
+          }
+        )
       ]
     }
   );
@@ -24974,9 +24954,20 @@ const TextLabelPosition = {
   BOTTOM_CENTER: "bottom-center",
   BOTTOM_RIGHT: "bottom-right"
 };
+const defaultAxis = (position) => ({
+  label: "",
+  position,
+  color: "",
+  unit: {
+    options: [],
+    selectedUnit: "",
+    setSelectedUnit: () => {
+    }
+  }
+});
 const defaultAxes$1 = (axes) => ({
-  x: (axes == null ? void 0 : axes.x) || [{}],
-  y: (axes == null ? void 0 : axes.y) || [{}]
+  x: (axes == null ? void 0 : axes.x) || [defaultAxis("bottom")],
+  y: (axes == null ? void 0 : axes.y) || [defaultAxis("left")]
 });
 const defaultAdditionalAxesOptions$1 = (options) => ({
   chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
@@ -25070,7 +25061,7 @@ const getDefaultProps$2 = (props) => {
   return {
     persistenceId: (chart2 == null ? void 0 : chart2.persistenceId) ?? "",
     controlsPortalId: (chart2 == null ? void 0 : chart2.controlsPortalId) ?? "",
-    testId: (chart2 == null ? void 0 : chart2.testId) ?? null,
+    testId: (chart2 == null ? void 0 : chart2.testId) ?? void 0,
     data: chart2 == null ? void 0 : chart2.data,
     options: {
       title: (options == null ? void 0 : options.title) ?? "",
@@ -25104,6 +25095,11 @@ const INIT_KEYS = {
 };
 const LOWER_BOUND = 1e-4;
 const UPPER_BOUND = 1e7;
+var CUSTOM_OPTION = /* @__PURE__ */ ((CUSTOM_OPTION2) => {
+  CUSTOM_OPTION2["showLine"] = "showLine";
+  CUSTOM_OPTION2["showPoints"] = "showPoints";
+  return CUSTOM_OPTION2;
+})(CUSTOM_OPTION || {});
 const generateLineChartDatasets = (datasets, state, options, { label }) => {
   const copyDataset = [...datasets];
   const { annotations, graph } = options;
@@ -25145,7 +25141,9 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       borderColor,
       backgroundColor,
       pointBackgroundColor,
-      borderDash
+      borderDash,
+      showPoints = true,
+      showLine
     } = line ?? {};
     const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
     const { lineTension, spanGaps } = graph ?? {};
@@ -25163,14 +25161,15 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     const filteredData = data.filter(Boolean) || [];
     const isSinglePoint = (filteredData == null ? void 0 : filteredData.length) === 1;
     const linePointRadius = parseFloat(pointRadiusProp) || DEFAULT_POINT_RADIUS;
-    const pointRadius = pointsEnabled || isSinglePoint ? linePointRadius : 0;
+    const pointRadius = (pointsEnabled || isSinglePoint) && showPoints ? linePointRadius : 0;
     const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
     const indexedColor = COLORS[i2];
+    const hasCustomOpt = checkCustomOption(line, CUSTOM_OPTION);
     return {
       ...line,
       label: line.label || `${label} ${i2 + 1}`,
       data: filteredData,
-      showLine: lineEnabled,
+      showLine: showLine ?? lineEnabled,
       lineTension,
       spanGaps,
       borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
@@ -25181,7 +25180,8 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       pointBackgroundColor: pointBackgroundColor ?? indexedColor ?? generateRandomColor(COLORS),
       pointRadius,
       pointHoverRadius: hoverRadius,
-      pointHitRadius: line.pointHitRadius ?? hoverRadius
+      pointHitRadius: line.pointHitRadius ?? hoverRadius,
+      ...hasCustomOpt ? { hasCustomOpt } : {}
     };
   });
 };
@@ -25192,7 +25192,7 @@ const calculateDelta$1 = (tickValue, ticks) => {
   }
   return delta;
 };
-const formatAxisLabelNumbers = (tickValue, ticks, locale = "en-gb") => {
+const formatAxisLabelNumbers = (tickValue, ticks) => {
   if (tickValue === 0 || tickValue === null) {
     return "0";
   }
@@ -25239,7 +25239,7 @@ const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
       //OW-10088 disable irregular axis ticks
       ...ticksConfigFromProps,
       font: {
-        size: DEFAULT_FONT_SIZE
+        size: 14
       }
     };
     return ticks;
@@ -25471,23 +25471,29 @@ const getLineChartDataLabels = (options) => {
     formatter: (_value, context) => context.dataset.data[context.dataIndex].label || ""
   } : { display: false };
 };
-const annotationEnter = ({ element }, { chart: chart2 }) => {
+const annotationEnter = (element, chart2) => {
   var _a2;
   if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
     element.options.label.xAdjust = chart2.chartArea.left;
   }
   element.options.borderWidth = BORDER_WIDTH.HOVERED;
-  if (element.options.label)
+  if (element.options.label) {
+    element.label.options.display = true;
     element.options.label.enabled = true;
+  }
   chart2.draw();
   chart2.canvas.style.cursor = CursorStyle.Pointer;
+  return true;
 };
-const annotationLeave = ({ element }, { chart: chart2 }) => {
+const annotationLeave = (element, chart2) => {
   element.options.borderWidth = BORDER_WIDTH.INITIAL;
-  if (element.options.label)
+  if (element.options.label) {
+    element.label.options.display = false;
     element.options.label.enabled = false;
+  }
   chart2.draw();
   chart2.canvas.style.cursor = CursorStyle.Initial;
+  return true;
 };
 const generateAnnotations = (options, state) => {
   const { annotationsData } = (options == null ? void 0 : options.annotations) || {};
@@ -25506,22 +25512,22 @@ const generateAnnotations = (options, state) => {
     const label = type === "line" ? {
       backgroundColor: color2,
       content: curr == null ? void 0 : curr.label,
-      enabled: false,
+      display: false,
       position: Position.Top
     } : {
       content: curr == null ? void 0 : curr.label,
-      enabled: true,
+      display: true,
       font: { weight: "normal" }
     };
-    const enter = (context, event) => {
+    const enter = ({ element }, { chart: chart2 }) => {
       if (type !== "line")
         return;
-      annotationEnter(context, event);
+      annotationEnter(element, chart2);
     };
-    const leave = (context, event) => {
+    const leave = ({ element }, { chart: chart2 }) => {
       if (type !== "line")
         return;
-      annotationLeave(context, event);
+      annotationLeave(element, chart2);
     };
     const annotation2 = {
       ...curr,
@@ -25653,7 +25659,6 @@ const useChartOptions = ({
   dispatch,
   generatedDatasets
 }) => {
-  var _a2, _b2;
   const {
     interactions: { onAnimationComplete },
     annotations: {
@@ -25675,29 +25680,28 @@ const useChartOptions = ({
     zoomEnabled,
     panEnabled,
     lineEnabled,
-    showAnnotationLineIndex,
-    legendEnabled
+    showAnnotationLineIndex
   } = state;
   const [hoveredPoint, setHoveredPoint] = useState(null);
-  const { legendClick, updateAxesRangesFromChart, onHover } = useChartFunctions(
-    {
-      chartRef,
-      state,
-      options,
-      dispatch,
-      generatedDatasets
-    }
-  );
+  const { updateAxesRangesFromChart, onHover } = useChartFunctions({
+    chartRef,
+    state,
+    options,
+    dispatch,
+    generatedDatasets
+  });
+  const { legendClick, legend: legend2, customLegendPlugin } = useLegendState({
+    chartRef,
+    options,
+    state,
+    dispatch
+  });
   const datalabels = getLineChartDataLabels(options);
   const tooltip = getLineChartToolTips(options);
   const annotation2 = useMemo(
     () => getAnnotation(options, state),
     [showAnnotationLineIndex, legendClick]
   );
-  const legend2 = useMemo(
-    () => getLegend(options, legendClick),
-    [legendEnabled]
-  );
   const scales = useMemo(
     () => autoScale(options, state, generatedDatasets, chartRef),
     [options, state, generatedDatasets, chartRef]
@@ -25739,9 +25743,7 @@ const useChartOptions = ({
     tooltip,
     legend: { ...legend2, display: false },
     // hide default legend for line chart only
-    [CUSTOM_LEGEND_PLUGIN_NAME]: ((_a2 = options.legend.customLegend) == null ? void 0 : _a2.customLegendPlugin) && {
-      containerID: (_b2 = options.legend.customLegend) == null ? void 0 : _b2.customLegendContainerID
-    },
+    customLegendPlugin,
     chartAreaBorder: {
       borderColor: BORDER_COLOR
     },
@@ -25796,7 +25798,7 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     [resetZoom2]
   );
   const handleDoubleClick = useCallback(
-    (_chart, args) => {
+    (_2, args) => {
       const { event } = args;
       if (event.type === DOUBLE_CLICK) {
         debouncedResetZoom();
@@ -25828,6 +25830,23 @@ const getAxesRangesFromChart = (chartRef, axes) => {
     };
   });
 };
+const getAxisRangeByType = (chartRef, axesType, annotationsData) => {
+  if (!chartRef || !chartRef.current)
+    return null;
+  const metasets = chartRef.current.getSortedVisibleDatasetMetas();
+  const annotDataByType = getAnnotationsData(annotationsData)[axesType] ?? [];
+  let allData = [];
+  metasets.forEach((metaset) => {
+    const data = metaset._parsed.map((parsedData) => parsedData[axesType]).filter((value) => value != null && !isNaN(value));
+    allData = allData.concat(data);
+  });
+  allData = allData.concat(annotDataByType);
+  if (allData.length === 0)
+    return null;
+  const min = Math.min(...allData);
+  const max = Math.max(...allData);
+  return { min, max };
+};
 const useToggleCustomLegendVisibility = (memoState, memoOptions) => {
   var _a2, _b2;
   useEffect(() => {
@@ -25858,18 +25877,23 @@ const useStoreChartStateInStorage = (memoState, persistenceId) => {
   ]);
 };
 const useUpdateAxesRanges = ({
+  chartRef,
   range,
   state,
-  dispatch
+  dispatch,
+  annotationsData
 }) => {
   const prevAxes = useRef(state.axes);
   useEffect(() => {
     if (range && isRangeValid(range)) {
-      const newAxes = Object.entries(range).map(([key, { min, max }]) => ({
-        id: key,
-        min: min ?? 0,
-        max: max ?? 0
-      }));
+      const newAxes = Object.entries(range).map(([key, { min, max }]) => {
+        const { min: minFromData = 0, max: maxFromData = 0 } = getAxisRangeByType(chartRef, key, annotationsData) ?? {};
+        return {
+          id: key,
+          min: min ?? minFromData,
+          max: max ?? maxFromData
+        };
+      });
       const mergedAxes = [...prevAxes.current ?? []].map((axis) => {
         const newAxis = newAxes.find((a2) => a2.id === axis.id);
         return newAxis ? { ...axis, ...newAxis } : axis;
@@ -25884,27 +25908,21 @@ const useUpdateAxesRanges = ({
     }
   }, [range]);
 };
-const useSaveInitialAxesRanges = (chartRef, axes, generatedDatasets, dispatch) => {
-  const prevGeneratedDatasets = useRef();
-  const saveInitialAxesRanges = useCallback(() => {
-    if (chartRef && !isEqual(generatedDatasets, prevGeneratedDatasets.current)) {
+const useSaveInitialAxesRanges = (chartRef, axes, dispatch) => {
+  useEffect(() => {
+    if (chartRef.current) {
       const initialAxesRanges = getAxesRangesFromChart(chartRef, axes);
       dispatch({
         type: SAVE_INITIAL_AXES_RANGES,
         payload: { initialAxesRanges }
       });
-      prevGeneratedDatasets.current = generatedDatasets;
     }
-  }, [chartRef, generatedDatasets]);
-  useEffect(() => {
-    saveInitialAxesRanges();
-  }, [saveInitialAxesRanges, generatedDatasets]);
+  }, []);
 };
 const useChartState = ({
   chartRef,
   options,
   state,
-  generatedDatasets,
   dispatch,
   persistenceId
 }) => {
@@ -25912,12 +25930,19 @@ const useChartState = ({
   const memoOptions = useMemo(() => options, [options]);
   const {
     additionalAxesOptions: { range = void 0 },
+    annotations: { annotationsData = [] } = {},
     axes
   } = memoOptions;
   useStoreChartStateInStorage(memoState, persistenceId);
   useToggleCustomLegendVisibility(memoState, memoOptions);
-  useUpdateAxesRanges({ range, state: memoState, dispatch });
-  useSaveInitialAxesRanges(chartRef, axes, generatedDatasets, dispatch);
+  useUpdateAxesRanges({
+    range,
+    state: memoState,
+    dispatch,
+    chartRef,
+    annotationsData
+  });
+  useSaveInitialAxesRanges(chartRef, axes, dispatch);
 };
 const WORD_SEPARATOR = " ";
 const SEMI_TRANSPARENT = "rgba(0, 0, 0, 0.5)";
@@ -26123,6 +26148,7 @@ Chart$2.register(
   chartAreaTextPlugin
 );
 const LineChart = (props) => {
+  var _a2, _b2;
   setDefaultTheme();
   const chartRef = useRef(null);
   const { table: table2 } = props;
@@ -26136,7 +26162,7 @@ const LineChart = (props) => {
     controlsPortalId
   } = chart2;
   const { annotations, axes, chartStyling, graph } = options;
-  const showCustomLegend = !options.legend.customLegend.customLegendContainerID;
+  const showCustomLegend = !((_b2 = (_a2 = options == null ? void 0 : options.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendContainerID);
   const [state, dispatch] = useReducer(
     reducer$1,
     {
@@ -26152,7 +26178,6 @@ const LineChart = (props) => {
     chartRef,
     options,
     state,
-    generatedDatasets,
     dispatch,
     persistenceId
   });
@@ -39049,7 +39074,7 @@ const defaultInteractions = (interactions) => ({
   onUnhover: interactions == null ? void 0 : interactions.onUnhover
 });
 const defaultDragData = (dragData) => ({
-  enableDragData: (dragData == null ? void 0 : dragData.enableDragData) || false,
+  enableDragData: (dragData == null ? void 0 : dragData.enableDragData) ?? false,
   showTooltip: (dragData == null ? void 0 : dragData.showTooltip) ?? true,
   roundPoints: (dragData == null ? void 0 : dragData.roundPoints) ?? true,
   dragX: (dragData == null ? void 0 : dragData.dragX) ?? true,
@@ -39115,14 +39140,16 @@ const getBarChartAxis = ({
     } : {};
     const ticks = {
       ...stepSize,
-      callback: ticksFormattingCallback,
       includeBounds: false,
       //OW-10088 disable irregular axis ticks
       ...ticksConfigFromProps,
       font: {
-        size: DEFAULT_FONT_SIZE
+        size: 14
       }
     };
+    if ((additionalAxesOptions == null ? void 0 : additionalAxesOptions.chartScaleType) === ScaleType.Logarithmic) {
+      ticks.callback = ticksFormattingCallback;
+    }
     return ticks;
   };
   return {
@@ -39311,7 +39338,7 @@ const BarChart = (props) => {
   const [pointHover, setPointHover] = useState(false);
   const chart2 = getDefaultProps(props);
   const { options, testId } = chart2;
-  const { annotations, chartStyling, interactions, graph } = chart2.options;
+  const { annotations, chartStyling, interactions, graph, dragData } = chart2.options;
   const [visibleAnnotationsIndices, setVisibleAnnotationsIndices] = useState(
     setAnnotations(annotations.annotationsData)
   );
@@ -39436,9 +39463,6 @@ const BarChart = (props) => {
               mode: ChartHoverMode.Nearest,
               intersect: true
             },
-            // elements: {
-            //   bar: { pointStyle: PointStyle.Circle },
-            // },
             scales: getBarChartScales(chart2),
             plugins: {
               title: getTitle(options),
@@ -39454,7 +39478,7 @@ const BarChart = (props) => {
               chartAreaBorder: {
                 borderColor: BORDER_COLOR
               },
-              dragData: getDraggableData(options)
+              dragData: (dragData == null ? void 0 : dragData.enableDragData) && getDraggableData(options)
             }
           },
           plugins: getPlugins(graph, options.legend)
@@ -39467,7 +39491,6 @@ export {
   BarChart,
   LineChart,
   PieChart,
-  ScatterChart,
   initializeLineChart
 };
 //# sourceMappingURL=index.js.map
@@ -39476,7 +39499,7 @@ export {
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("html[data-theme='dark'] ._chart_1v6ps_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\nhtml[data-theme='dark'] ._chart_e3qdd_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_e3qdd_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_e3qdd_1._fixedHeight_e3qdd_20 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_e3qdd_1._stretchHeight_e3qdd_26 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_e3qdd_1._squareAspectRatio_e3qdd_32 {\n  aspect-ratio: 1;\n  min-height: 0;\n  min-width: 0;\n}\n._chart_e3qdd_1:focus {\n  outline: none;\n}\n._chart_e3qdd_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_e3qdd_43 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_e3qdd_43 ._zoomReset_e3qdd_51 {\n  margin-left: 10px;\n}\n._zoomForm_e3qdd_43 ._help_e3qdd_54 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_e3qdd_58 {\n  width: auto;\n  height: auto;\n}\n._table_e3qdd_62 {\n  overflow: auto;\n}\n._controls_fa3yo_1 {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n._buttons_fa3yo_7 {\n  display: flex;\n  margin-left: auto;\n  gap: 4px;\n}\n._legend_wpro0_1 {\n  position: absolute;\n  opacity: 0.9;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n}\n._legend_wpro0_1._isDragging_wpro0_8 {\n  opacity: 0;\n}\n._legendItems_wpro0_11 {\n  background-color: var(--color-background-raised);\n  border: 1px solid var(--color-border);\n  padding: 4px 8px;\n  border-radius: 2px;\n  overflow-y: auto;\n  max-height: 100%;\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._legendItems_wpro0_11::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-button {\n  display: none;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  pointer-events: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  display: none;\n}\n._legendToggle_wpro0_50 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50,\n._legend_wpro0_1:hover ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: block;\n}\n._legend_wpro0_1:active ._legendToggle_wpro0_50._legendToggle_wpro0_50:not(:hover) {\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  position: static;\n  transform: none;\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: none;\n}\n._legendItem_wpro0_11 {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  user-select: none;\n  cursor: pointer;\n  font-size: 12px;\n  line-height: 16px;\n}\n._legendItemSymbol_wpro0_80 {\n  display: flex;\n  align-items: center;\n  height: 16px;\n  position: relative;\n  flex-shrink: 0;\n}\nhtml[data-theme='dark'] ._legendItemSymbol_wpro0_80._legendItemSymbol_wpro0_80 {\n  filter: invert(1) hue-rotate(180deg);\n}\n._legendItemBox_wpro0_90 {\n  width: 100%;\n  height: 12px;\n  display: block;\n}\n._legendItemLine_wpro0_95 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  transform: translateY(-50%);\n}\n._legendItemPoint_wpro0_103 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n._isHidden_wpro0_47 ._legendItemText_wpro0_110._legendItemText_wpro0_110 {\n  text-decoration: line-through;\n}\n._scrollbars_wpro0_113 {\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-button {\n  display: none;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._dropzoneContainer_wpro0_140 {\n  position: absolute;\n}\n._dropzone_wpro0_140 {\n  position: absolute;\n  width: 50%;\n  height: 50%;\n  display: flex;\n}\n._dropzone_wpro0_140._left_wpro0_149 {\n  left: 0;\n  justify-content: flex-start;\n}\n._dropzone_wpro0_140._right_wpro0_153 {\n  right: 0;\n  justify-content: flex-end;\n}\n._dropzone_wpro0_140._top_wpro0_157 {\n  top: 0;\n  align-items: flex-start;\n}\n._dropzone_wpro0_140._bottom_wpro0_161 {\n  bottom: 0;\n  align-items: flex-end;\n}\n._dropzonePlaceholder_wpro0_165 {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.05);\n  display: none;\n}\n[data-theme='dark'] ._dropzonePlaceholder_wpro0_165 {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n._isActive_wpro0_173 ._dropzonePlaceholder_wpro0_165._dropzonePlaceholder_wpro0_165 {\n  display: block;\n}\n._resizeContainer_wpro0_176 {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1jdnu_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1jdnu_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1jdnu_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n  margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n  width: 'auto';\n  height: 'auto';\n}\nhtml[data-theme='dark'] ._chart_1t41j_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1t41j_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1t41j_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1t41j_1._fixedHeight_1t41j_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1t41j_1._stretchHeight_1t41j_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1t41j_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1t41j_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1t41j_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1t41j_32 ._zoomReset_1t41j_40 {\n  margin-left: 10px;\n}\n._zoomForm_1t41j_32 ._help_1t41j_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1t41j_47 {\n  width: auto;\n  height: auto;\n}"));
+      elementStyle.appendChild(document.createTextNode("html[data-theme='dark'] ._chart_e3qdd_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_e3qdd_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_e3qdd_1._fixedHeight_e3qdd_20 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_e3qdd_1._stretchHeight_e3qdd_26 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_e3qdd_1._squareAspectRatio_e3qdd_32 {\n  aspect-ratio: 1;\n  min-height: 0;\n  min-width: 0;\n}\n._chart_e3qdd_1:focus {\n  outline: none;\n}\n._chart_e3qdd_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_e3qdd_43 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_e3qdd_43 ._zoomReset_e3qdd_51 {\n  margin-left: 10px;\n}\n._zoomForm_e3qdd_43 ._help_e3qdd_54 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_e3qdd_58 {\n  width: auto;\n  height: auto;\n}\n._table_e3qdd_62 {\n  overflow: auto;\n}\n._controls_fa3yo_1 {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n._buttons_fa3yo_7 {\n  display: flex;\n  margin-left: auto;\n  gap: 4px;\n}\n._legend_wpro0_1 {\n  position: absolute;\n  opacity: 0.9;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n}\n._legend_wpro0_1._isDragging_wpro0_8 {\n  opacity: 0;\n}\n._legendItems_wpro0_11 {\n  background-color: var(--color-background-raised);\n  border: 1px solid var(--color-border);\n  padding: 4px 8px;\n  border-radius: 2px;\n  overflow-y: auto;\n  max-height: 100%;\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._legendItems_wpro0_11::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-button {\n  display: none;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  pointer-events: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  display: none;\n}\n._legendToggle_wpro0_50 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50,\n._legend_wpro0_1:hover ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: block;\n}\n._legend_wpro0_1:active ._legendToggle_wpro0_50._legendToggle_wpro0_50:not(:hover) {\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  position: static;\n  transform: none;\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: none;\n}\n._legendItem_wpro0_11 {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  user-select: none;\n  cursor: pointer;\n  font-size: 12px;\n  line-height: 16px;\n}\n._legendItemSymbol_wpro0_80 {\n  display: flex;\n  align-items: center;\n  height: 16px;\n  position: relative;\n  flex-shrink: 0;\n}\nhtml[data-theme='dark'] ._legendItemSymbol_wpro0_80._legendItemSymbol_wpro0_80 {\n  filter: invert(1) hue-rotate(180deg);\n}\n._legendItemBox_wpro0_90 {\n  width: 100%;\n  height: 12px;\n  display: block;\n}\n._legendItemLine_wpro0_95 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  transform: translateY(-50%);\n}\n._legendItemPoint_wpro0_103 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n._isHidden_wpro0_47 ._legendItemText_wpro0_110._legendItemText_wpro0_110 {\n  text-decoration: line-through;\n}\n._scrollbars_wpro0_113 {\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-button {\n  display: none;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._dropzoneContainer_wpro0_140 {\n  position: absolute;\n}\n._dropzone_wpro0_140 {\n  position: absolute;\n  width: 50%;\n  height: 50%;\n  display: flex;\n}\n._dropzone_wpro0_140._left_wpro0_149 {\n  left: 0;\n  justify-content: flex-start;\n}\n._dropzone_wpro0_140._right_wpro0_153 {\n  right: 0;\n  justify-content: flex-end;\n}\n._dropzone_wpro0_140._top_wpro0_157 {\n  top: 0;\n  align-items: flex-start;\n}\n._dropzone_wpro0_140._bottom_wpro0_161 {\n  bottom: 0;\n  align-items: flex-end;\n}\n._dropzonePlaceholder_wpro0_165 {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.05);\n  display: none;\n}\n[data-theme='dark'] ._dropzonePlaceholder_wpro0_165 {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n._isActive_wpro0_173 ._dropzonePlaceholder_wpro0_165._dropzonePlaceholder_wpro0_165 {\n  display: block;\n}\n._resizeContainer_wpro0_176 {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1jdnu_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1jdnu_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1jdnu_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n  margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n  width: 'auto';\n  height: 'auto';\n}\nhtml[data-theme='dark'] ._chart_1t41j_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1t41j_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1t41j_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1t41j_1._fixedHeight_1t41j_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1t41j_1._stretchHeight_1t41j_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1t41j_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1t41j_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1t41j_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1t41j_32 ._zoomReset_1t41j_40 {\n  margin-left: 10px;\n}\n._zoomForm_1t41j_32 ._help_1t41j_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1t41j_47 {\n  width: auto;\n  height: auto;\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {