@oliasoft-open-source/charts-library 4.0.5 → 4.1.0

package/dist/index.js

@@ -13742,13 +13742,13 @@ var hammer = { exports: {} };
        * @returns {String} value
        */
       compute: function() {
-        var actions = [];
+        var actions2 = [];
         each2(this.manager.recognizers, function(recognizer) {
           if (boolOrFn(recognizer.options.enable, [recognizer])) {
-            actions = actions.concat(recognizer.getTouchAction());
+            actions2 = actions2.concat(recognizer.getTouchAction());
           }
         });
-        return cleanTouchActions(actions.join(" "));
+        return cleanTouchActions(actions2.join(" "));
       },
       /**
        * this method is called on each input cycle and provides the preventing of the browser behavior
@@ -13761,10 +13761,10 @@ var hammer = { exports: {} };
           srcEvent.preventDefault();
           return;
         }
-        var actions = this.actions;
-        var hasNone = inStr(actions, TOUCH_ACTION_NONE) && !TOUCH_ACTION_MAP[TOUCH_ACTION_NONE];
-        var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_Y];
-        var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_X];
+        var actions2 = this.actions;
+        var hasNone = inStr(actions2, TOUCH_ACTION_NONE) && !TOUCH_ACTION_MAP[TOUCH_ACTION_NONE];
+        var hasPanY = inStr(actions2, TOUCH_ACTION_PAN_Y) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_Y];
+        var hasPanX = inStr(actions2, TOUCH_ACTION_PAN_X) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_X];
         if (hasNone) {
           var isTapPointer = input.pointers.length === 1;
           var isTapMovement = input.distance < 2;
@@ -13789,19 +13789,19 @@ var hammer = { exports: {} };
         srcEvent.preventDefault();
       }
     };
-    function cleanTouchActions(actions) {
-      if (inStr(actions, TOUCH_ACTION_NONE)) {
+    function cleanTouchActions(actions2) {
+      if (inStr(actions2, TOUCH_ACTION_NONE)) {
         return TOUCH_ACTION_NONE;
       }
-      var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
-      var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);
+      var hasPanX = inStr(actions2, TOUCH_ACTION_PAN_X);
+      var hasPanY = inStr(actions2, TOUCH_ACTION_PAN_Y);
       if (hasPanX && hasPanY) {
         return TOUCH_ACTION_NONE;
       }
       if (hasPanX || hasPanY) {
         return hasPanX ? TOUCH_ACTION_PAN_X : TOUCH_ACTION_PAN_Y;
       }
-      if (inStr(actions, TOUCH_ACTION_MANIPULATION)) {
+      if (inStr(actions2, TOUCH_ACTION_MANIPULATION)) {
         return TOUCH_ACTION_MANIPULATION;
       }
       return TOUCH_ACTION_AUTO;
@@ -14117,14 +14117,14 @@ var hammer = { exports: {} };
       },
       getTouchAction: function() {
         var direction = this.options.direction;
-        var actions = [];
+        var actions2 = [];
         if (direction & DIRECTION_HORIZONTAL) {
-          actions.push(TOUCH_ACTION_PAN_Y);
+          actions2.push(TOUCH_ACTION_PAN_Y);
         }
         if (direction & DIRECTION_VERTICAL) {
-          actions.push(TOUCH_ACTION_PAN_X);
+          actions2.push(TOUCH_ACTION_PAN_X);
         }
-        return actions;
+        return actions2;
       },
       directionTest: function(input) {
         var options = this.options;
@@ -19405,9 +19405,9 @@ class DragDropManagerImpl {
         }
       };
     }
-    const actions = createDragDropActions(this);
-    return Object.keys(actions).reduce((boundActions, key) => {
-      const action = actions[key];
+    const actions2 = createDragDropActions(this);
+    return Object.keys(actions2).reduce((boundActions, key) => {
+      const action = actions2[key];
       boundActions[key] = bindActionCreator(action);
       return boundActions;
     }, {});
@@ -22049,7 +22049,7 @@ const HTML5Backend = function createBackend(manager, context, options) {
   return new HTML5BackendImpl(manager, context, options);
 };
 const chart$2 = "_chart_e3qdd_1";
-const canvas = "_canvas_e3qdd_11";
+const canvas$1 = "_canvas_e3qdd_11";
 const fixedHeight$2 = "_fixedHeight_e3qdd_20";
 const stretchHeight$2 = "_stretchHeight_e3qdd_26";
 const squareAspectRatio = "_squareAspectRatio_e3qdd_32";
@@ -22060,7 +22060,7 @@ const autoWeight$2 = "_autoWeight_e3qdd_58";
 const table = "_table_e3qdd_62";
 const styles$4 = {
   chart: chart$2,
-  canvas,
+  canvas: canvas$1,
   fixedHeight: fixedHeight$2,
   stretchHeight: stretchHeight$2,
   squareAspectRatio,
@@ -22187,11 +22187,11 @@ var Position = /* @__PURE__ */ ((Position2) => {
   Position2["BottomRight"] = "bottom-right";
   return Position2;
 })(Position || {});
-var ChartType = /* @__PURE__ */ ((ChartType2) => {
+var ChartType$1 = /* @__PURE__ */ ((ChartType2) => {
   ChartType2["Line"] = "line";
   ChartType2["Bar"] = "bar";
   return ChartType2;
-})(ChartType || {});
+})(ChartType$1 || {});
 var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
   CursorStyle2["Pointer"] = "pointer";
   CursorStyle2["Initial"] = "initial";
@@ -22783,6 +22783,9 @@ function TbList(props) {
 function TbRuler(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-7a1 1 0 0 0 -1 1v7a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1" } }, { "tag": "path", "attr": { "d": "M4 8l2 0" } }, { "tag": "path", "attr": { "d": "M4 12l3 0" } }, { "tag": "path", "attr": { "d": "M4 16l2 0" } }, { "tag": "path", "attr": { "d": "M8 4l0 2" } }, { "tag": "path", "attr": { "d": "M12 4l0 3" } }, { "tag": "path", "attr": { "d": "M16 4l0 2" } }] })(props);
 }
+function TbSquareFilled(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M19 2h-14a3 3 0 0 0 -3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3 -3v-14a3 3 0 0 0 -3 -3z", "strokeWidth": "0", "fill": "currentColor" } }] })(props);
+}
 function TbX(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M18 6l-12 12" } }, { "tag": "path", "attr": { "d": "M6 6l12 12" } }] })(props);
 }
@@ -23841,6 +23844,24 @@ var dist = { exports: {} };
   });
 })(dist);
 var distExports = dist.exports;
+const downloadPgn = (chartRef, state) => {
+  var _a2;
+  const chart2 = chartRef.current;
+  const canvasElement = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.parentElement;
+  if (!canvasElement)
+    return;
+  const { ctx } = chart2;
+  ctx.save();
+  ctx.globalCompositeOperation = "destination-over";
+  const isDark = document.body.dataset.theme === "dark";
+  ctx.fillStyle = isDark ? "black" : "white";
+  ctx.fillRect(0, 0, chart2.width, chart2.height);
+  ctx.restore();
+  const fileName = getChartFileName(state == null ? void 0 : state.axes);
+  toPng(canvasElement).then((dataUrl) => {
+    distExports.triggerBase64Download(dataUrl, fileName);
+  });
+};
 const useChartFunctions = ({
   chartRef,
   state,
@@ -23877,24 +23898,10 @@ const useChartFunctions = ({
     },
     []
   );
-  const handleDownload = useCallback(() => {
-    var _a2;
-    const chart2 = chartRef.current;
-    const canvasElement = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.parentElement;
-    if (!canvasElement)
-      return;
-    const { ctx } = chart2;
-    ctx.save();
-    ctx.globalCompositeOperation = "destination-over";
-    const isDark = document.body.dataset.theme === "dark";
-    ctx.fillStyle = isDark ? "black" : "white";
-    ctx.fillRect(0, 0, chart2.width, chart2.height);
-    ctx.restore();
-    const fileName = getChartFileName(state.axes);
-    toPng(canvasElement).then((dataUrl) => {
-      distExports.triggerBase64Download(dataUrl, fileName);
-    });
-  }, [chartRef, state.axes]);
+  const handleDownload = useCallback(
+    () => downloadPgn(chartRef, state),
+    [chartRef, state.axes]
+  );
   const handleKeyDown = useCallback(
     (event) => {
       var _a2, _b2, _c2, _d2, _e2;
@@ -24417,577 +24424,85 @@ const Controls = ({
     subheaderComponent
   ] });
 };
-var noop = function() {
-};
-var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-const useIsomorphicLayoutEffect$1 = useIsomorphicLayoutEffect;
-var defaultState = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0
-};
-function useMeasure() {
-  var _a2 = useState(null), element = _a2[0], ref = _a2[1];
-  var _b2 = useState(defaultState), rect = _b2[0], setRect = _b2[1];
-  var observer = useMemo(function() {
-    return new window.ResizeObserver(function(entries) {
-      if (entries[0]) {
-        var _a3 = entries[0].contentRect, x2 = _a3.x, y2 = _a3.y, width = _a3.width, height = _a3.height, top_1 = _a3.top, left2 = _a3.left, bottom2 = _a3.bottom, right2 = _a3.right;
-        setRect({ x: x2, y: y2, width, height, top: top_1, left: left2, bottom: bottom2, right: right2 });
-      }
-    });
-  }, []);
-  useIsomorphicLayoutEffect$1(function() {
-    if (!element)
-      return;
-    observer.observe(element);
-    return function() {
-      observer.disconnect();
-    };
-  }, [element]);
-  return [ref, rect];
-}
-const useMeasure$1 = isBrowser && typeof window.ResizeObserver !== "undefined" ? useMeasure : function() {
-  return [noop, defaultState];
-};
-const legend = "_legend_wpro0_1";
-const isDragging = "_isDragging_wpro0_8";
-const legendItems = "_legendItems_wpro0_11";
-const isHidden = "_isHidden_wpro0_47";
-const legendToggle = "_legendToggle_wpro0_50";
-const legendItem = "_legendItem_wpro0_11";
-const legendItemSymbol = "_legendItemSymbol_wpro0_80";
-const legendItemBox = "_legendItemBox_wpro0_90";
-const legendItemLine = "_legendItemLine_wpro0_95";
-const legendItemPoint = "_legendItemPoint_wpro0_103";
-const legendItemText = "_legendItemText_wpro0_110";
-const scrollbars = "_scrollbars_wpro0_113";
-const dropzoneContainer = "_dropzoneContainer_wpro0_140";
-const dropzone = "_dropzone_wpro0_140";
-const left = "_left_wpro0_149";
-const right = "_right_wpro0_153";
-const top = "_top_wpro0_157";
-const bottom = "_bottom_wpro0_161";
-const dropzonePlaceholder = "_dropzonePlaceholder_wpro0_165";
-const isActive = "_isActive_wpro0_173";
-const resizeContainer = "_resizeContainer_wpro0_176";
-const styles$2 = {
-  legend,
-  isDragging,
-  legendItems,
-  isHidden,
-  legendToggle,
-  legendItem,
-  legendItemSymbol,
-  legendItemBox,
-  legendItemLine,
-  legendItemPoint,
-  legendItemText,
-  scrollbars,
-  dropzoneContainer,
-  dropzone,
-  left,
-  right,
-  top,
-  bottom,
-  dropzonePlaceholder,
-  isActive,
-  resizeContainer
-};
-const circleSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz48L3N2Zz4=";
-const rectSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+PC9zdmc+";
-const rectRotSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBmaWxsPSJjdXJyZW50Q29sb3IiIHRyYW5zZm9ybT0ncm90YXRlKDQ1IDEyIDEyKScgLz48L3N2Zz4=";
-const triangleSvg = "data:image/svg+xml;base64,PHN2ZyAgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgyNHYyNGgtMjR6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im0yMi43OTk4IDIyLjA2MjNoLTIxLjU5OTZjLS4yMTA2Ni4wMDAxLS40MTc2MTctLjA1NTQtLjYwMDA2Ny0uMTYwNy0uMTgyNDUxLS4xMDUzLS4zMzM5NjUtLjI1NjctLjQzOTMxMS0uNDM5Mi0uMTA1MzQ2NC0uMTgyNC0uMTYwODEyMjgtLjM4OTMtLjE2MDgyMi0uNnMuMDU1NDM3Mi0uNDE3Ni4xNjA3NjctLjZsMTAuNzk5ODMzLTE4LjcwNTE4Yy4xMTM5LS4xNzEzNy4yNjg0LS4zMTE5MS40NDk3LS40MDkxMy4xODE0LS4wOTcyMi4zODM5LS4xNDgwOS41ODk3LS4xNDgwOXMuNDA4My4wNTA4Ny41ODk3LjE0ODA5Yy4xODEzLjA5NzIyLjMzNTguMjM3NzYuNDQ5Ny40MDkxM2wxMC43OTk4IDE4LjcwNTE4Yy4xMDU0LjE4MjQuMTYwOC4zODkzLjE2MDguNnMtLjA1NTUuNDE3Ni0uMTYwOC42Yy0uMTA1NC4xODI1LS4yNTY5LjMzMzktLjQzOTMuNDM5Mi0uMTgyNS4xMDUzLS4zODk0LjE2MDgtLjYwMDEuMTYwN3oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvZz48L3N2Zz4=";
-const LEGEND_SYMBOL_SIZE = 16;
-const LegendItemLine = ({ dataset }) => {
-  const { borderColor, borderDash, borderWidth } = dataset;
-  const offset = borderDash.length ? (LEGEND_SYMBOL_SIZE - borderDash[0]) / 2 % (borderDash[0] + borderDash[1]) * -1 : 0;
-  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemLine, children: /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: `0 0 ${LEGEND_SYMBOL_SIZE} ${LEGEND_SYMBOL_SIZE}`,
-      children: /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: "0",
-          y1: "50%",
-          x2: "100%",
-          y2: "50%",
-          stroke: borderColor,
-          strokeWidth: borderWidth,
-          strokeDasharray: borderDash,
-          strokeDashoffset: offset
-        }
-      )
-    }
-  ) });
+const TextLabelPosition = {
+  TOP_LEFT: "top-left",
+  TOP_CENTER: "top-center",
+  TOP_RIGHT: "top-right",
+  MIDDLE_LEFT: "middle-left",
+  MIDDLE_CENTER: "middle-center",
+  MIDDLE_RIGHT: "middle-right",
+  BOTTOM_LEFT: "bottom-left",
+  BOTTOM_CENTER: "bottom-center",
+  BOTTOM_RIGHT: "bottom-right"
 };
-const LegendItemPoint = ({ dataset }) => {
-  const { pointBackgroundColor, pointRadius, pointStyle = "" } = dataset;
-  if (!pointRadius)
-    return null;
-  const size = pointRadius * 2;
-  const icons = {
-    circle: circleSvg,
-    triangle: triangleSvg,
-    rectRot: rectRotSvg,
-    rect: rectSvg
-  };
-  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(
-    Icon,
-    {
-      icon: icons[pointStyle] || circleSvg,
-      size,
-      color: pointBackgroundColor
+const defaultAxis = (position) => ({
+  label: "",
+  position,
+  color: "",
+  unit: {
+    options: [],
+    selectedUnit: "",
+    setSelectedUnit: () => {
     }
-  ) });
-};
-const LegendItemBox = ({ dataset }) => {
-  const { backgroundColor } = dataset;
-  const style = { backgroundColor };
-  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemBox, style });
-};
-const LegendItemSymbol = ({ dataset }) => {
-  const { annotationType, showLine } = dataset;
-  switch (annotationType) {
-    case AnnotationType.Box:
-    case AnnotationType.Ellipse:
-      return /* @__PURE__ */ jsx(LegendItemBox, { dataset });
-    case AnnotationType.Line:
-      return /* @__PURE__ */ jsx(LegendItemLine, { dataset });
-    default:
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        showLine && /* @__PURE__ */ jsx(LegendItemLine, { dataset }),
-        /* @__PURE__ */ jsx(LegendItemPoint, { dataset })
-      ] });
   }
-};
-const LegendItem = ({ hidden, dataset, handleClick }) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx(styles$2.legendItem, hidden && styles$2.isHidden),
-      onClick: handleClick,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: styles$2.legendItemSymbol,
-            style: { width: LEGEND_SYMBOL_SIZE },
-            children: /* @__PURE__ */ jsx(LegendItemSymbol, { dataset })
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: styles$2.legendItemText, children: dataset.label })
-      ]
-    }
-  );
-};
-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(
-    (_2, legendItem2) => {
-      const { datasetIndex = 0 } = 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 == null ? void 0 : 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) {
-        const legendState = legendItem2.hidden ?? false;
-        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendState);
-      }
-      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;
-  if (datasets[item.datasetIndex].hideLegend) {
-    return null;
-  }
-  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: (_2) => legendClick(_2, item)
-    },
-    `${item.datasetIndex}-hidden-${item.hidden}`
-  );
-}) });
-const LegendPanel = forwardRef((props, ref) => {
-  const {
-    legendPosition,
-    chartRef,
-    state,
-    options,
-    dispatch,
-    generatedDatasets,
-    isDragging: isDragging2
-  } = props;
-  const { legendEnabled } = state;
-  const chart2 = chartRef == null ? void 0 : chartRef.current;
-  if (!chart2)
-    return null;
-  const {
-    data: { datasets }
-  } = chart2;
-  const { legendClick, hiddenStates, clearNonExistentDatasets } = useLegendState({
-    chartRef,
-    options,
-    state,
-    dispatch
-  });
-  const { onToggleLegend } = useToggleHandlers(dispatch);
-  const items = useGeneratedLabels(chartRef, generatedDatasets);
-  const style = createLegendStyle(legendPosition, chart2);
-  useEffect(() => {
-    clearNonExistentDatasets(generatedDatasets);
-  }, [generatedDatasets]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cx(
-        styles$2.legend,
-        !legendEnabled && styles$2.isHidden,
-        isDragging2 && styles$2.isDragging
-      ),
-      style,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: styles$2.legendToggle, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: onToggleLegend,
-            small: true,
-            round: true,
-            icon: legendEnabled ? /* @__PURE__ */ jsx(TbX, {}) : /* @__PURE__ */ jsx(TbList, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          LegendItems,
-          {
-            items,
-            hiddenStates,
-            datasets,
-            legendClick
-          }
-        )
-      ]
-    }
-  );
-});
-const LegendDropZone = (legendDropZoneProps) => {
-  const { position, onDrop, placeholderSize } = legendDropZoneProps;
-  const [{ isOver, canDrop }, dropRef] = useDrop(() => ({
-    accept: "legend",
-    drop: onDrop,
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
-    })
-  }));
-  const isActive2 = isOver && canDrop;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: dropRef,
-      className: cx(
-        styles$2.dropzone,
-        isActive2 && styles$2.isActive,
-        position.includes("left") && styles$2.left,
-        position.includes("right") && styles$2.right,
-        position.includes("top") && styles$2.top,
-        position.includes("bottom") && styles$2.bottom
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: styles$2.dropzonePlaceholder,
-          style: { ...placeholderSize, margin: LEGEND_MARGIN }
-        }
-      )
-    }
-  );
-};
-const LegendDropZones = (legendDropZonesProps) => {
-  const { chartArea, setLegendPosition, isDragging: isDragging2, placeholderSize } = legendDropZonesProps;
-  const positions2 = [
-    Position.TopLeft,
-    Position.TopRight,
-    Position.BottomLeft,
-    Position.BottomRight
-  ];
-  const { top: top2, left: left2, width, height } = chartArea;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: styles$2.dropzoneContainer,
-      style: {
-        top: top2,
-        left: left2,
-        width,
-        height,
-        zIndex: isDragging2 ? 0 : -1
-        // Position dropzones behind chart when not needed
-      },
-      children: positions2.map((position) => /* @__PURE__ */ jsx(
-        LegendDropZone,
-        {
-          position,
-          onDrop: () => setLegendPosition(position),
-          placeholderSize
-        },
-        position
-      ))
-    }
-  );
-};
-const Legend2 = ({
-  chartRef,
-  state,
-  options,
-  dispatch,
-  generatedDatasets
-}) => {
-  const [measureRef] = useMeasure$1();
-  const resizeRef = measureRef;
-  const panelRef = useRef(null);
-  const chart2 = chartRef.current;
-  const [legendPosition, setLegendPosition] = useState(options.legend.position);
-  const panelRect = panelRef.current ? panelRef.current.getBoundingClientRect() : null;
-  const panelSize = { width: panelRect == null ? void 0 : panelRect.width, height: panelRect == null ? void 0 : panelRect.height };
-  const [{ isDragging: isDragging2 }, dragRef] = useDrag(() => ({
-    type: "legend",
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging()
-    })
-  }));
-  if (!chart2)
-    return null;
-  const { chartArea } = chart2;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { ref: resizeRef, className: styles$2.resizeContainer }),
-    /* @__PURE__ */ jsx(
-      LegendPanel,
-      {
-        legendPosition,
-        chartRef,
-        state,
-        options,
-        dispatch,
-        generatedDatasets,
-        isDragging: isDragging2,
-        ref: (r2) => {
-          dragRef(r2);
-          panelRef.current = r2;
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      LegendDropZones,
-      {
-        chartArea,
-        setLegendPosition: (position) => setLegendPosition(position),
-        isDragging: isDragging2,
-        placeholderSize: panelSize
-      }
-    )
-  ] });
-};
-const TextLabelPosition = {
-  TOP_LEFT: "top-left",
-  TOP_CENTER: "top-center",
-  TOP_RIGHT: "top-right",
-  MIDDLE_LEFT: "middle-left",
-  MIDDLE_CENTER: "middle-center",
-  MIDDLE_RIGHT: "middle-right",
-  BOTTOM_LEFT: "bottom-left",
-  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) || [defaultAxis("bottom")],
-  y: (axes == null ? void 0 : axes.y) || [defaultAxis("left")]
-});
-const defaultAdditionalAxesOptions$1 = (options) => ({
-  chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
-  reverse: (options == null ? void 0 : options.reverse) || false,
-  beginAtZero: (options == null ? void 0 : options.beginAtZero) ?? false,
-  stepSize: options == null ? void 0 : options.stepSize,
-  suggestedMin: options == null ? void 0 : options.suggestedMin,
-  suggestedMax: options == null ? void 0 : options.suggestedMax,
-  range: options == null ? void 0 : options.range,
-  autoAxisPadding: (options == null ? void 0 : options.autoAxisPadding) ?? false
-});
-const defaultChartStyling$2 = (options) => ({
-  width: options == null ? void 0 : options.width,
-  height: options == null ? void 0 : options.height,
-  maintainAspectRatio: (options == null ? void 0 : options.maintainAspectRatio) ?? false,
-  staticChartHeight: (options == null ? void 0 : options.staticChartHeight) ?? false,
-  performanceMode: (options == null ? void 0 : options.performanceMode) ?? true,
-  squareAspectRatio: (options == null ? void 0 : options.squareAspectRatio) ?? false,
-  layoutPadding: (options == null ? void 0 : options.layoutPadding) || {
-    top: 0,
-    bottom: 20,
-    left: 0,
-    right: 0
-  }
-});
-const defaultTooltip$2 = (tooltip) => ({
-  tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
-  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) ?? false,
-  hideSimulationName: (tooltip == null ? void 0 : tooltip.hideSimulationName) ?? false,
-  scientificNotation: (tooltip == null ? void 0 : tooltip.scientificNotation) ?? true
-});
-const defaultGraph$2 = (graph) => ({
-  lineTension: (graph == null ? void 0 : graph.lineTension) ?? 0.01,
-  spanGaps: (graph == null ? void 0 : graph.spanGaps) ?? false,
-  showDataLabels: (graph == null ? void 0 : graph.showDataLabels) ?? false,
-  showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) ?? false
-});
-const defaultAnnotations$1 = (annotations) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-  return {
-    labelAnnotation: {
-      showLabel: ((_a2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _a2.showLabel) ?? false,
-      text: ((_b2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _b2.text) ?? "",
-      position: ((_c2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _c2.position) ?? TextLabelPosition.BOTTOM_RIGHT,
-      fontSize: ((_d2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _d2.fontSize) ?? 12,
-      xOffset: ((_e2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _e2.xOffset) ?? 5,
-      yOffset: ((_f2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _f2.yOffset) ?? 5,
-      maxWidth: ((_g2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _g2.maxWidth) ?? 300,
-      lineHeight: ((_h2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _h2.lineHeight) ?? 12
-    },
-    showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
-    controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
-    annotationsData: (annotations == null ? void 0 : annotations.annotationsData) ?? []
-  };
+});
+const defaultAxes$1 = (axes) => ({
+  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",
+  reverse: (options == null ? void 0 : options.reverse) || false,
+  beginAtZero: (options == null ? void 0 : options.beginAtZero) ?? false,
+  stepSize: options == null ? void 0 : options.stepSize,
+  suggestedMin: options == null ? void 0 : options.suggestedMin,
+  suggestedMax: options == null ? void 0 : options.suggestedMax,
+  range: options == null ? void 0 : options.range,
+  autoAxisPadding: (options == null ? void 0 : options.autoAxisPadding) ?? false
+});
+const defaultChartStyling$2 = (options) => ({
+  width: options == null ? void 0 : options.width,
+  height: options == null ? void 0 : options.height,
+  maintainAspectRatio: (options == null ? void 0 : options.maintainAspectRatio) ?? false,
+  staticChartHeight: (options == null ? void 0 : options.staticChartHeight) ?? false,
+  performanceMode: (options == null ? void 0 : options.performanceMode) ?? true,
+  squareAspectRatio: (options == null ? void 0 : options.squareAspectRatio) ?? false,
+  layoutPadding: (options == null ? void 0 : options.layoutPadding) || {
+    top: 0,
+    bottom: 20,
+    left: 0,
+    right: 0
+  }
+});
+const defaultTooltip$2 = (tooltip) => ({
+  tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
+  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) ?? false,
+  hideSimulationName: (tooltip == null ? void 0 : tooltip.hideSimulationName) ?? false,
+  scientificNotation: (tooltip == null ? void 0 : tooltip.scientificNotation) ?? true
+});
+const defaultGraph$2 = (graph) => ({
+  lineTension: (graph == null ? void 0 : graph.lineTension) ?? 0.01,
+  spanGaps: (graph == null ? void 0 : graph.spanGaps) ?? false,
+  showDataLabels: (graph == null ? void 0 : graph.showDataLabels) ?? false,
+  showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) ?? false
+});
+const defaultAnnotations$1 = (annotations) => {
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+  return {
+    labelAnnotation: {
+      showLabel: ((_a2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _a2.showLabel) ?? false,
+      text: ((_b2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _b2.text) ?? "",
+      position: ((_c2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _c2.position) ?? TextLabelPosition.BOTTOM_RIGHT,
+      fontSize: ((_d2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _d2.fontSize) ?? 12,
+      xOffset: ((_e2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _e2.xOffset) ?? 5,
+      yOffset: ((_f2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _f2.yOffset) ?? 5,
+      maxWidth: ((_g2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _g2.maxWidth) ?? 300,
+      lineHeight: ((_h2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _h2.lineHeight) ?? 12
+    },
+    showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
+    controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
+    annotationsData: (annotations == null ? void 0 : annotations.annotationsData) ?? []
+  };
 };
 const defaultLegend$2 = (legend2) => ({
   display: (legend2 == null ? void 0 : legend2.display) ?? true,
@@ -25476,89 +24991,6 @@ const getLineChartDataLabels = (options) => {
     formatter: (_2, context) => context.dataset.data[context.dataIndex].label || ""
   } : { display: false };
 };
-const annotationEnter = (element, chart2) => {
-  var _a2;
-  if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
-    if (element.options.label) {
-      element.options.label.xAdjust = chart2.chartArea.left;
-    }
-  }
-  element.options.borderWidth = BORDER_WIDTH.HOVERED;
-  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, chart2) => {
-  element.options.borderWidth = BORDER_WIDTH.INITIAL;
-  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) || {};
-  return annotationsData == null ? void 0 : annotationsData.reduce((acc, curr, i2) => {
-    var _a2;
-    if (!((_a2 = state == null ? void 0 : state.showAnnotationLineIndex) == null ? void 0 : _a2.includes(i2))) {
-      return { ...acc };
-    }
-    const scaleID = (curr == null ? void 0 : curr.annotationAxis) ?? void 0;
-    const color2 = (curr == null ? void 0 : curr.color) || COLORS[i2];
-    const type = (curr == null ? void 0 : curr.type) || "line";
-    const adjustScaleRange2 = curr == null ? void 0 : curr.adjustScaleRange;
-    const borderColor = type === "line" ? color2 : "transparent";
-    const borderWidth = type === "line" ? BORDER_WIDTH.INITIAL : 0;
-    const borderDash = ANNOTATION_DASH;
-    const label = type === "line" ? {
-      backgroundColor: color2,
-      content: curr == null ? void 0 : curr.label,
-      display: false,
-      position: Position.Top
-    } : {
-      content: curr == null ? void 0 : curr.label,
-      display: true,
-      font: { weight: "normal" }
-    };
-    const enter = ({ element }, { chart: chart2 }) => {
-      if (type !== "line")
-        return;
-      annotationEnter(element, chart2);
-    };
-    const leave = ({ element }, { chart: chart2 }) => {
-      if (type !== "line")
-        return;
-      annotationLeave(element, chart2);
-    };
-    const annotation2 = {
-      ...curr,
-      id: `${curr == null ? void 0 : curr.label}-${curr == null ? void 0 : curr.value}-${i2}`,
-      scaleID,
-      label,
-      backgroundColor: color2,
-      borderColor,
-      borderWidth,
-      borderDash,
-      type,
-      adjustScaleRange: adjustScaleRange2,
-      enter,
-      leave
-    };
-    return { ...acc, [`annotation${i2 + 1}`]: annotation2 };
-  }, {});
-};
-const getAnnotation = (options, state) => {
-  const { showAnnotations, annotationsData } = (options == null ? void 0 : options.annotations) || {};
-  const shouldGenerateAnnotations = showAnnotations && (annotationsData == null ? void 0 : annotationsData.length);
-  const annotations = shouldGenerateAnnotations ? generateAnnotations(options, state) : {};
-  return { annotations };
-};
 const getUnitsFromLabel = (label) => {
   const matches = label.match(/\[(.*)\]/g);
   const units = matches && matches.length > 0 ? matches[0] : "";
@@ -25664,6 +25096,267 @@ const getDraggableData = (options) => {
     }
   } : {};
 };
+const UPSERT_HIDDEN_STATE = "UPSERT_HIDDEN_STATE";
+const TOGGLE_ANNOTATION_VISIBILITY = "TOGGLE_ANNOTATION_VISIBILITY";
+const legendInitialState = {
+  hiddenStates: [],
+  annotation: [],
+  visibleAnnotationsIndexes: []
+};
+const legendReducer = (state, action) => {
+  switch (action.type) {
+    case UPSERT_HIDDEN_STATE: {
+      const { label, hidden, datasetIndex } = action.payload;
+      const existingIndex = state.hiddenStates.findIndex(
+        (hs) => hs.label === label && hs.datasetIndex === datasetIndex
+      );
+      const newHiddenStates = [...state.hiddenStates];
+      if (existingIndex !== -1) {
+        newHiddenStates[existingIndex] = { label, hidden, datasetIndex };
+      } else {
+        newHiddenStates.push({ label, hidden, datasetIndex });
+      }
+      return {
+        ...state,
+        hiddenStates: newHiddenStates
+      };
+    }
+    case TOGGLE_ANNOTATION_VISIBILITY: {
+      const index2 = action.payload;
+      const newVisibleIndexes = state.visibleAnnotationsIndexes.includes(index2) ? state.visibleAnnotationsIndexes.filter((i2) => i2 !== index2) : [...state.visibleAnnotationsIndexes, index2];
+      const annotation2 = state.annotation.map(
+        (el) => el.annotationIndex === index2 ? { ...el, display: !el.display } : el
+      );
+      return {
+        ...state,
+        annotation: annotation2,
+        visibleAnnotationsIndexes: newVisibleIndexes
+      };
+    }
+    default:
+      return state;
+  }
+};
+const annotationEnter = (element, chart2) => {
+  var _a2;
+  if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
+    if (element.options.label) {
+      element.options.label.xAdjust = chart2.chartArea.left;
+    }
+  }
+  element.options.borderWidth = BORDER_WIDTH.HOVERED;
+  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, chart2) => {
+  element.options.borderWidth = BORDER_WIDTH.INITIAL;
+  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 = (annotationsData, visibleAnnotationsIndexes) => {
+  return annotationsData == null ? void 0 : annotationsData.map((ann, idx) => {
+    if (visibleAnnotationsIndexes == null ? void 0 : visibleAnnotationsIndexes.includes(idx)) {
+      const scaleID = (ann == null ? void 0 : ann.annotationAxis) ?? void 0;
+      const color2 = (ann == null ? void 0 : ann.color) || COLORS[idx];
+      const type = (ann == null ? void 0 : ann.type) || "line";
+      const adjustScaleRange2 = ann == null ? void 0 : ann.adjustScaleRange;
+      const borderColor = type === "line" ? color2 : "transparent";
+      const borderWidth = type === "line" ? BORDER_WIDTH.INITIAL : 0;
+      const borderDash = ANNOTATION_DASH;
+      const label = type === "line" ? {
+        backgroundColor: color2,
+        content: ann == null ? void 0 : ann.label,
+        display: false,
+        position: Position.Top
+      } : {
+        content: ann == null ? void 0 : ann.label,
+        display: true,
+        font: { weight: "normal" }
+      };
+      const enter = ({
+        element
+      }, {
+        chart: chart2
+      }) => {
+        if (type !== "line")
+          return;
+        annotationEnter(element, chart2);
+      };
+      const leave = ({
+        element
+      }, {
+        chart: chart2
+      }) => {
+        if (type !== "line")
+          return;
+        annotationLeave(element, chart2);
+      };
+      return {
+        ...ann,
+        display: true,
+        annotationIndex: idx,
+        id: `${ann == null ? void 0 : ann.label}-${ann == null ? void 0 : ann.value}-${idx}`,
+        scaleID,
+        label,
+        backgroundColor: color2,
+        borderColor,
+        borderWidth,
+        borderDash,
+        type,
+        adjustScaleRange: adjustScaleRange2,
+        enter,
+        leave
+      };
+    }
+  });
+};
+const getAnnotation = ({
+  showAnnotations,
+  annotationsData,
+  visibleAnnotationsIndexes
+}) => {
+  const shouldGenerateAnnotations = showAnnotations && annotationsData && (annotationsData == null ? void 0 : annotationsData.length);
+  return shouldGenerateAnnotations ? generateAnnotations(annotationsData, visibleAnnotationsIndexes) ?? [] : [];
+};
+const LegendContext = createContext$2(void 0);
+const LegendProvider = ({ children, options }) => {
+  const { showAnnotations = true, annotationsData = [] } = (options == null ? void 0 : options.annotations) ?? {};
+  const visibleAnnotationsIndexes = setAnnotations(annotationsData);
+  const annotation2 = getAnnotation({
+    showAnnotations,
+    annotationsData,
+    visibleAnnotationsIndexes
+  });
+  const initialState2 = {
+    ...legendInitialState,
+    annotation: annotation2,
+    visibleAnnotationsIndexes
+  };
+  const [state, dispatch] = useReducer(
+    legendReducer,
+    initialState2
+  );
+  const contextValue = useMemo(() => ({ state, dispatch }), [state, dispatch]);
+  return /* @__PURE__ */ jsx(LegendContext.Provider, { value: contextValue, children });
+};
+const useLegend = () => {
+  const context = useContext(LegendContext);
+  if (context === void 0) {
+    throw new Error("useLegend must be used within a LegendProvider");
+  }
+  return context;
+};
+const useLegendState = ({ chartRef, options }) => {
+  const [hiddenStatesLocal, setHiddenStatesLocal] = useState(
+    []
+  );
+  const { state, dispatch } = useLegend();
+  const {
+    annotations,
+    interactions: { onLegendClick },
+    legend: { customLegend }
+  } = options ?? {};
+  const upsertHiddenState = useCallback(
+    ({ label, datasetIndex, hidden }) => {
+      setHiddenStatesLocal((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;
+      });
+      dispatch({ type: UPSERT_HIDDEN_STATE, payload: hiddenStatesLocal });
+    },
+    [dispatch]
+  );
+  const legendClick = useCallback(
+    (_2, legendItem2) => {
+      const { datasetIndex = 0 } = 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 == null ? void 0 : annotations.controlAnnotation) && (dataset == null ? void 0 : dataset.isAnnotation)) {
+        const { annotationIndex = -1 } = dataset;
+        dispatch({
+          type: TOGGLE_ANNOTATION_VISIBILITY,
+          payload: annotationIndex
+        });
+      }
+      if (dataset == null ? void 0 : 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) {
+        const legendState = legendItem2.hidden ?? false;
+        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendState);
+      }
+      chartInstance == null ? void 0 : chartInstance.update();
+    },
+    [chartRef, annotations, onLegendClick, state.hiddenStates]
+  );
+  const legend2 = useMemo(
+    () => getLegend(options, legendClick),
+    [options, legendClick]
+  );
+  const customLegendPlugin = useMemo(
+    () => ({
+      [CUSTOM_LEGEND_PLUGIN_NAME]: (customLegend == null ? void 0 : customLegend.customLegendPlugin) && {
+        containerID: customLegend == null ? void 0 : customLegend.customLegendContainerID
+      }
+    }),
+    [customLegend]
+  );
+  return {
+    legendClick,
+    hiddenStates: hiddenStatesLocal,
+    legend: legend2,
+    customLegendPlugin,
+    upsertHiddenState,
+    visibleAnnotationsIndexes: state.visibleAnnotationsIndexes
+  };
+};
+const toAnnotationObject = (annotationArr = []) => {
+  let annotations = {};
+  if (annotationArr.length) {
+    annotations = annotationArr.reduce(
+      (acc, annotation2, idx) => {
+        acc[`annotation${idx + 1}`] = annotation2;
+        return acc;
+      },
+      {}
+    );
+  }
+  return { annotations };
+};
 const useChartOptions = ({
   chartRef,
   state,
@@ -25687,13 +25380,7 @@ const useChartOptions = ({
     },
     chartStyling: { layoutPadding }
   } = options;
-  const {
-    enableDragPoints,
-    zoomEnabled,
-    panEnabled,
-    lineEnabled,
-    showAnnotationLineIndex
-  } = state;
+  const { enableDragPoints, zoomEnabled, panEnabled, lineEnabled } = state;
   const [hoveredPoint, setHoveredPoint] = useState(
     null
   );
@@ -25704,18 +25391,11 @@ const useChartOptions = ({
     dispatch,
     generatedDatasets
   });
-  const { legendClick, legend: legend2, customLegendPlugin } = useLegendState({
-    chartRef,
-    options,
-    state,
-    dispatch
-  });
+  const { legend: legend2, customLegendPlugin } = useLegendState({ chartRef, options });
+  const { state: legendState } = useLegend();
+  const { annotation: annotation2 } = legendState;
   const datalabels = getLineChartDataLabels(options);
   const tooltip = getLineChartToolTips(options);
-  const annotation2 = useMemo(
-    () => getAnnotation(options, state),
-    [showAnnotationLineIndex, legendClick]
-  );
   const scales = useMemo(
     () => autoScale(options, state, generatedDatasets, chartRef),
     [options, state, generatedDatasets, chartRef]
@@ -25752,7 +25432,7 @@ const useChartOptions = ({
   );
   const plugins = {
     datalabels,
-    annotation: annotation2,
+    annotation: toAnnotationObject(annotation2),
     zoom: { pan: panOptions, zoom: zoomOptions },
     tooltip,
     legend: { ...legend2, display: false },
@@ -26107,48 +25787,458 @@ const chartAreaTextPlugin = {
       position
     });
   }
-};
-var defaultTranslations = /* @__PURE__ */ ((defaultTranslations2) => {
-  defaultTranslations2["label"] = "Label";
-  defaultTranslations2["pointsLines"] = "Points & lines";
-  defaultTranslations2["linesOnly"] = "Lines only";
-  defaultTranslations2["pointsOnly"] = "Points only";
-  defaultTranslations2["axesOptions"] = "Axes options";
-  defaultTranslations2["resetAxes"] = "Reset Axes";
-  defaultTranslations2["done"] = "Done";
-  defaultTranslations2["downloadAsPNG"] = "Download as PNG";
-  defaultTranslations2["showChart"] = "Show chart";
-  defaultTranslations2["showTable"] = "Show table";
-  defaultTranslations2["dragToZoom"] = "Drag to zoom";
-  defaultTranslations2["dragToPan"] = "Drag to pan";
-  defaultTranslations2["dragToMovePoints"] = "Drag to move points";
-  defaultTranslations2["dragDisabled"] = "Drag disabled";
-  defaultTranslations2["hideLegend"] = "Hide Legend";
-  defaultTranslations2["showLegend"] = "Show Legend";
-  defaultTranslations2["mustHaveAValue"] = "Must have a value";
-  defaultTranslations2["mustBeANumber"] = "Must be a number";
-  defaultTranslations2["mustBeLessThanMax"] = "Must be less than max";
-  defaultTranslations2["mustBeGreaterThanMin"] = "Must be greater than min";
-  defaultTranslations2["doubleClickToReset"] = "Double click on canvas to reset";
-  defaultTranslations2["orDoubleClickToCanvas"] = "or double click on canvas";
-  return defaultTranslations2;
-})(defaultTranslations || {});
-const getTranslations = (translations = {}) => {
-  return Object.keys(defaultTranslations).reduce(
-    (acc, key) => ({
-      ...acc,
-      [key]: translations[key] || defaultTranslations[key]
-    }),
-    {}
+};
+var defaultTranslations = /* @__PURE__ */ ((defaultTranslations2) => {
+  defaultTranslations2["label"] = "Label";
+  defaultTranslations2["pointsLines"] = "Points & lines";
+  defaultTranslations2["linesOnly"] = "Lines only";
+  defaultTranslations2["pointsOnly"] = "Points only";
+  defaultTranslations2["axesOptions"] = "Axes options";
+  defaultTranslations2["resetAxes"] = "Reset Axes";
+  defaultTranslations2["done"] = "Done";
+  defaultTranslations2["downloadAsPNG"] = "Download as PNG";
+  defaultTranslations2["showChart"] = "Show chart";
+  defaultTranslations2["showTable"] = "Show table";
+  defaultTranslations2["dragToZoom"] = "Drag to zoom";
+  defaultTranslations2["dragToPan"] = "Drag to pan";
+  defaultTranslations2["dragToMovePoints"] = "Drag to move points";
+  defaultTranslations2["dragDisabled"] = "Drag disabled";
+  defaultTranslations2["hideLegend"] = "Hide Legend";
+  defaultTranslations2["showLegend"] = "Show Legend";
+  defaultTranslations2["mustHaveAValue"] = "Must have a value";
+  defaultTranslations2["mustBeANumber"] = "Must be a number";
+  defaultTranslations2["mustBeLessThanMax"] = "Must be less than max";
+  defaultTranslations2["mustBeGreaterThanMin"] = "Must be greater than min";
+  defaultTranslations2["doubleClickToReset"] = "Double click on canvas to reset";
+  defaultTranslations2["orDoubleClickToCanvas"] = "or double click on canvas";
+  return defaultTranslations2;
+})(defaultTranslations || {});
+const getTranslations = (translations = {}) => {
+  return Object.keys(defaultTranslations).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: translations[key] || defaultTranslations[key]
+    }),
+    {}
+  );
+};
+const config = {
+  [INIT_KEYS.TRANSLATIONS]: getTranslations(),
+  [INIT_KEYS.LANGUAGE_KEY]: "en"
+};
+const getConfig = (key = "") => key ? config[key] : config;
+const setConfig = (key, newValue) => {
+  config[key] = newValue;
+};
+var noop = function() {
+};
+var isBrowser = typeof window !== "undefined";
+var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$1 = useIsomorphicLayoutEffect;
+var defaultState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function useMeasure() {
+  var _a2 = useState(null), element = _a2[0], ref = _a2[1];
+  var _b2 = useState(defaultState), rect = _b2[0], setRect = _b2[1];
+  var observer = useMemo(function() {
+    return new window.ResizeObserver(function(entries) {
+      if (entries[0]) {
+        var _a3 = entries[0].contentRect, x2 = _a3.x, y2 = _a3.y, width = _a3.width, height = _a3.height, top_1 = _a3.top, left2 = _a3.left, bottom2 = _a3.bottom, right2 = _a3.right;
+        setRect({ x: x2, y: y2, width, height, top: top_1, left: left2, bottom: bottom2, right: right2 });
+      }
+    });
+  }, []);
+  useIsomorphicLayoutEffect$1(function() {
+    if (!element)
+      return;
+    observer.observe(element);
+    return function() {
+      observer.disconnect();
+    };
+  }, [element]);
+  return [ref, rect];
+}
+const useMeasure$1 = isBrowser && typeof window.ResizeObserver !== "undefined" ? useMeasure : function() {
+  return [noop, defaultState];
+};
+const legend = "_legend_wpro0_1";
+const isDragging = "_isDragging_wpro0_8";
+const legendItems = "_legendItems_wpro0_11";
+const isHidden = "_isHidden_wpro0_47";
+const legendToggle = "_legendToggle_wpro0_50";
+const legendItem = "_legendItem_wpro0_11";
+const legendItemSymbol = "_legendItemSymbol_wpro0_80";
+const legendItemBox = "_legendItemBox_wpro0_90";
+const legendItemLine = "_legendItemLine_wpro0_95";
+const legendItemPoint = "_legendItemPoint_wpro0_103";
+const legendItemText = "_legendItemText_wpro0_110";
+const scrollbars = "_scrollbars_wpro0_113";
+const dropzoneContainer = "_dropzoneContainer_wpro0_140";
+const dropzone = "_dropzone_wpro0_140";
+const left = "_left_wpro0_149";
+const right = "_right_wpro0_153";
+const top = "_top_wpro0_157";
+const bottom = "_bottom_wpro0_161";
+const dropzonePlaceholder = "_dropzonePlaceholder_wpro0_165";
+const isActive = "_isActive_wpro0_173";
+const resizeContainer = "_resizeContainer_wpro0_176";
+const styles$2 = {
+  legend,
+  isDragging,
+  legendItems,
+  isHidden,
+  legendToggle,
+  legendItem,
+  legendItemSymbol,
+  legendItemBox,
+  legendItemLine,
+  legendItemPoint,
+  legendItemText,
+  scrollbars,
+  dropzoneContainer,
+  dropzone,
+  left,
+  right,
+  top,
+  bottom,
+  dropzonePlaceholder,
+  isActive,
+  resizeContainer
+};
+var ChartType = /* @__PURE__ */ ((ChartType2) => {
+  ChartType2["LINE"] = "line";
+  ChartType2["BAR"] = "bar";
+  ChartType2["PIE"] = "pie";
+  return ChartType2;
+})(ChartType || {});
+const circleSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz48L3N2Zz4=";
+const rectSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+PC9zdmc+";
+const rectRotSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBmaWxsPSJjdXJyZW50Q29sb3IiIHRyYW5zZm9ybT0ncm90YXRlKDQ1IDEyIDEyKScgLz48L3N2Zz4=";
+const triangleSvg = "data:image/svg+xml;base64,PHN2ZyAgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgyNHYyNGgtMjR6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im0yMi43OTk4IDIyLjA2MjNoLTIxLjU5OTZjLS4yMTA2Ni4wMDAxLS40MTc2MTctLjA1NTQtLjYwMDA2Ny0uMTYwNy0uMTgyNDUxLS4xMDUzLS4zMzM5NjUtLjI1NjctLjQzOTMxMS0uNDM5Mi0uMTA1MzQ2NC0uMTgyNC0uMTYwODEyMjgtLjM4OTMtLjE2MDgyMi0uNnMuMDU1NDM3Mi0uNDE3Ni4xNjA3NjctLjZsMTAuNzk5ODMzLTE4LjcwNTE4Yy4xMTM5LS4xNzEzNy4yNjg0LS4zMTE5MS40NDk3LS40MDkxMy4xODE0LS4wOTcyMi4zODM5LS4xNDgwOS41ODk3LS4xNDgwOXMuNDA4My4wNTA4Ny41ODk3LjE0ODA5Yy4xODEzLjA5NzIyLjMzNTguMjM3NzYuNDQ5Ny40MDkxM2wxMC43OTk4IDE4LjcwNTE4Yy4xMDU0LjE4MjQuMTYwOC4zODkzLjE2MDguNnMtLjA1NTUuNDE3Ni0uMTYwOC42Yy0uMTA1NC4xODI1LS4yNTY5LjMzMzktLjQzOTMuNDM5Mi0uMTgyNS4xMDUzLS4zODk0LjE2MDgtLjYwMDEuMTYwN3oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvZz48L3N2Zz4=";
+const LEGEND_SYMBOL_SIZE$1 = 16;
+const LineItem = ({ dataset }) => {
+  var _a2;
+  const { borderColor, borderDash, borderWidth } = dataset;
+  const offset = borderDash.length ? (LEGEND_SYMBOL_SIZE$1 - borderDash[0]) / 2 % (borderDash[0] + borderDash[1]) * -1 : 0;
+  const borderDashString = ((_a2 = dataset.borderDash) == null ? void 0 : _a2.join(" ")) || "";
+  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemLine, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${LEGEND_SYMBOL_SIZE$1} ${LEGEND_SYMBOL_SIZE$1}`,
+      children: /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "0",
+          y1: "50%",
+          x2: "100%",
+          y2: "50%",
+          stroke: borderColor,
+          strokeWidth: borderWidth,
+          strokeDasharray: borderDashString,
+          strokeDashoffset: offset
+        }
+      )
+    }
+  ) });
+};
+const PointItem = ({ dataset }) => {
+  const { pointBackgroundColor, pointRadius, pointStyle = "" } = dataset;
+  if (!pointRadius)
+    return null;
+  const size = pointRadius * 2;
+  const icons = {
+    circle: circleSvg,
+    triangle: triangleSvg,
+    rectRot: rectRotSvg,
+    rect: rectSvg
+  };
+  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      icon: icons[pointStyle] || circleSvg,
+      size,
+      color: pointBackgroundColor
+    }
+  ) });
+};
+const BoxItem = ({ dataset }) => {
+  const { backgroundColor } = dataset;
+  const style = { backgroundColor };
+  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemBox, style });
+};
+const LegendItemLine = ({ dataset }) => {
+  const { annotationType, showLine } = dataset;
+  switch (annotationType) {
+    case AnnotationType.Box:
+    case AnnotationType.Ellipse:
+      return /* @__PURE__ */ jsx(BoxItem, { dataset });
+    case AnnotationType.Line:
+      return /* @__PURE__ */ jsx(LineItem, { dataset });
+    default:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        showLine && /* @__PURE__ */ jsx(LineItem, { dataset }),
+        /* @__PURE__ */ jsx(PointItem, { dataset })
+      ] });
+  }
+};
+const LEGEND_SYMBOL_SIZE = 16;
+const renderLegendItemSymbol = (dataset, chartType) => {
+  switch (chartType) {
+    case ChartType.LINE:
+      return /* @__PURE__ */ jsx(LegendItemLine, { dataset });
+    case ChartType.BAR:
+      return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: dataset.borderColor }) });
+    case ChartType.PIE:
+      return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: circleSvg }) });
+    default:
+      return null;
+  }
+};
+const LegendItem = ({
+  hidden,
+  dataset,
+  handleClick,
+  chartType
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(styles$2.legendItem, hidden && styles$2.isHidden),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: styles$2.legendItemSymbol,
+            style: { width: LEGEND_SYMBOL_SIZE },
+            children: renderLegendItemSymbol(dataset, chartType)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: styles$2.legendItemText, children: dataset.label })
+      ]
+    }
+  );
+};
+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 LEGEND_MARGIN = 4;
+const createLegendStyle = (legendPosition, chart2) => {
+  const { height = 0, width = 0, chartArea } = chart2 ?? {};
+  const { top: top2 = 0, left: left2 = 0, bottom: bottom2 = 0, right: right2 = 0 } = 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.9 * (right2 - left2 - LEGEND_MARGIN * 2),
+    margin: LEGEND_MARGIN
+  };
+};
+const LegendItems = ({
+  items,
+  hiddenStates,
+  datasets,
+  legendClick,
+  chartType
+}) => /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => {
+  var _a2;
+  if (datasets[item.datasetIndex].hideLegend) {
+    return null;
+  }
+  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: (_2) => legendClick(_2, item),
+      chartType
+    },
+    `${item.datasetIndex}-hidden-${item.hidden}`
+  );
+}) });
+const LegendPanel = forwardRef(
+  ({ legendPosition, chartRef, isDragging: isDragging2, legendConfig }, ref) => {
+    var _a2;
+    const chart2 = chartRef == null ? void 0 : chartRef.current;
+    const { options, generatedDatasets, chartType } = legendConfig;
+    const datasets = (_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.datasets;
+    const { legend: legend2, legendClick, hiddenStates } = useLegendState({
+      chartRef,
+      options
+    });
+    const [legendEnabled, setLegendEnabled] = useState((legend2 == null ? void 0 : legend2.display) ?? true);
+    const items = useGeneratedLabels(chartRef, generatedDatasets);
+    const style = createLegendStyle(legendPosition, chart2);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cx(
+          styles$2.legend,
+          !legendEnabled && styles$2.isHidden,
+          isDragging2 && styles$2.isDragging
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles$2.legendToggle, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => setLegendEnabled(!legendEnabled),
+              small: true,
+              round: true,
+              icon: legendEnabled ? /* @__PURE__ */ jsx(TbX, {}) : /* @__PURE__ */ jsx(TbList, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            LegendItems,
+            {
+              items,
+              hiddenStates,
+              datasets,
+              legendClick,
+              chartType
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const LegendDropZone = (legendDropZoneProps) => {
+  const { position, onDrop, placeholderSize } = legendDropZoneProps;
+  const [{ isOver, canDrop }, dropRef] = useDrop(() => ({
+    accept: "legend",
+    drop: onDrop,
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  }));
+  const isActive2 = isOver && canDrop;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: dropRef,
+      className: cx(
+        styles$2.dropzone,
+        isActive2 && styles$2.isActive,
+        position.includes("left") && styles$2.left,
+        position.includes("right") && styles$2.right,
+        position.includes("top") && styles$2.top,
+        position.includes("bottom") && styles$2.bottom
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles$2.dropzonePlaceholder,
+          style: { ...placeholderSize, margin: LEGEND_MARGIN }
+        }
+      )
+    }
   );
 };
-const config = {
-  [INIT_KEYS.TRANSLATIONS]: getTranslations(),
-  [INIT_KEYS.LANGUAGE_KEY]: "en"
+const LegendDropZones = (legendDropZonesProps) => {
+  const { chartArea, setLegendPosition, isDragging: isDragging2, placeholderSize } = legendDropZonesProps ?? {};
+  const positions2 = [
+    Position.TopLeft,
+    Position.TopRight,
+    Position.BottomLeft,
+    Position.BottomRight
+  ];
+  const { top: top2, left: left2, width, height } = chartArea ?? {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles$2.dropzoneContainer,
+      style: {
+        top: top2,
+        left: left2,
+        width,
+        height,
+        zIndex: isDragging2 ? 0 : -1
+        // Position dropzones behind chart when not needed
+      },
+      children: positions2.map((position) => /* @__PURE__ */ jsx(
+        LegendDropZone,
+        {
+          position,
+          onDrop: () => setLegendPosition(position),
+          placeholderSize
+        },
+        position
+      ))
+    }
+  );
 };
-const getConfig = (key = "") => key ? config[key] : config;
-const setConfig = (key, newValue) => {
-  config[key] = newValue;
+const Legend2 = ({ chartRef, legendConfig }) => {
+  const chart2 = chartRef == null ? void 0 : chartRef.current;
+  const { chartArea } = chart2 ?? {};
+  const {
+    options: { legend: legend2 }
+  } = legendConfig ?? {};
+  const [measureRef] = useMeasure$1();
+  const resizeRef = measureRef;
+  const panelRef = useRef(null);
+  const [legendPosition, setLegendPosition] = useState(
+    (legend2 == null ? void 0 : legend2.position) || Position.BottomLeft
+  );
+  const panelRect = panelRef.current ? panelRef.current.getBoundingClientRect() : null;
+  const panelSize = { width: panelRect == null ? void 0 : panelRect.width, height: panelRect == null ? void 0 : panelRect.height };
+  const [{ isDragging: isDragging2 }, dragRef] = useDrag(() => ({
+    type: "legend",
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging()
+    })
+  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: resizeRef, className: styles$2.resizeContainer }),
+    /* @__PURE__ */ jsx(
+      LegendPanel,
+      {
+        chartRef,
+        legendPosition,
+        isDragging: isDragging2,
+        ref: (r2) => {
+          dragRef(r2);
+          panelRef.current = r2;
+        },
+        legendConfig
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LegendDropZones,
+      {
+        chartArea,
+        setLegendPosition: (position) => setLegendPosition(position),
+        isDragging: isDragging2,
+        placeholderSize: panelSize
+      }
+    )
+  ] });
 };
 Chart$2.register(
   LinearScale$1,
@@ -26257,11 +26347,11 @@ const LineChart = (props) => {
             Legend2,
             {
               chartRef,
-              state,
-              options,
-              dispatch,
-              generatedDatasets,
-              translations
+              legendConfig: {
+                options,
+                generatedDatasets,
+                chartType: ChartType.LINE
+              }
             }
           )
         ] }) })
@@ -26275,6 +26365,10 @@ const LineChart = (props) => {
     ])
   );
 };
+const LineChartWithLegend = (props) => {
+  const { options } = getDefaultProps$2(props);
+  return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(LineChart, { ...props }) });
+};
 const initializeLineChart = ({ languageKey = "en", ...options }) => {
   setConfig(INIT_KEYS.LANGUAGE_KEY, languageKey);
   Object.entries(options).forEach(([key, value]) => {
@@ -26368,7 +26462,8 @@ const usePieChartConfig = (chart2) => {
         backgroundColor: [],
         borderColor: [],
         borderWidth: Number(copyDataset[0].borderWidth) || 1,
-        data: []
+        data: [],
+        borderDash: []
       };
       data.labels.map((_label, labelIndex) => {
         copyDataset.map((arc, arcIndex) => {
@@ -26601,6 +26696,10 @@ const PieChart = (props) => {
     }
   );
 };
+const PieChartWithLegend = (props) => {
+  const { options } = getDefaultProps$1(props);
+  return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(PieChart, { ...props }) });
+};
 /*!
  * Chart.js v3.9.1
  * https://www.chartjs.org
@@ -38961,17 +39060,11 @@ const Ht = { id: "dragdata", afterInit: function(t) {
     return t.tooltip && t.tooltip.update(), false;
 } };
 Chart.register(Ht);
-const useBarChartConfig = ({
-  chart: chart2,
-  chartRef
-}) => {
+const useBarChartConfig = (chartRef, chart2) => {
   var _a2;
   const { options } = chart2;
-  const { annotations, interactions } = options;
+  const { interactions } = options;
   const [pointHover, setPointHover] = useState(false);
-  const [visibleAnnotationsIndexes, setVisibleAnnotationsIndexes] = useState(
-    setAnnotations(annotations.annotationsData)
-  );
   const generateBarChartDatasets = ({
     datasets,
     options: options2
@@ -38979,22 +39072,18 @@ const useBarChartConfig = ({
     const {
       annotations: { controlAnnotation, showAnnotations, annotationsData } = {}
     } = options2;
-    const barDatasetsCopy = [...datasets];
-    if (controlAnnotation && showAnnotations && (annotationsData == null ? void 0 : annotationsData.length)) {
-      annotationsData.forEach(
-        (annotation2, index2) => {
-          barDatasetsCopy.push({
-            isAnnotation: true,
-            label: annotation2.label,
-            annotationIndex: index2,
-            backgroundColor: annotation2.color || COLORS[index2],
-            borderColor: annotation2.color || COLORS[index2],
-            data: [],
-            type: ChartType.Bar
-          });
-        }
-      );
-    }
+    const annotationsDatasets = controlAnnotation && showAnnotations && (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map(
+      (annotation2, index2) => ({
+        isAnnotation: true,
+        label: annotation2.label,
+        annotationIndex: index2,
+        backgroundColor: annotation2.color || COLORS[index2],
+        borderColor: annotation2.color || COLORS[index2],
+        data: [],
+        type: ChartType$1.Bar
+      })
+    ) : [];
+    const barDatasetsCopy = [...datasets, ...annotationsDatasets];
     const generatedDatasets2 = barDatasetsCopy.map((barDataset, index2) => {
       const colorSchema = COLORS;
       const colors2 = barDataset.data.map((_2, i2) => {
@@ -39002,9 +39091,12 @@ const useBarChartConfig = ({
         return colorSchema[colorSelectionIndex] || generateRandomColor(COLORS);
       });
       const backgroundColors = barDataset.backgroundColor || colors2.map((color2) => color2 + ALPHA_CHANEL);
+      const datasetWithBorderWidth = "borderWidth" in barDatasetsCopy ? {
+        borderWidth: parseFloat(String(barDatasetsCopy.borderWidth)) ?? 1
+      } : {};
       return {
         ...barDataset,
-        borderWidth: parseFloat(String(barDataset.borderWidth)) ?? 1,
+        ...datasetWithBorderWidth,
         borderColor: barDataset.borderColor || colors2[index2],
         backgroundColor: backgroundColors
       };
@@ -39015,44 +39107,6 @@ const useBarChartConfig = ({
     datasets: (_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.datasets,
     options
   });
-  const legendClick = (_e2, legendItem2) => {
-    const index2 = (legendItem2 == null ? void 0 : legendItem2.datasetIndex) ?? null;
-    const chartInstance = chartRef.current;
-    if (chartInstance && index2 !== null) {
-      const { datasets } = chartInstance.data;
-      const dataset = datasets[index2];
-      const meta = chartInstance.getDatasetMeta(index2);
-      meta.hidden = meta.hidden === null ? !dataset.hidden : null;
-      if (annotations.controlAnnotation && dataset.isAnnotation) {
-        const { annotationIndex } = dataset;
-        if (visibleAnnotationsIndexes.includes(annotationIndex)) {
-          setVisibleAnnotationsIndexes(
-            visibleAnnotationsIndexes.filter((ann) => ann !== annotationIndex)
-          );
-        } else {
-          setVisibleAnnotationsIndexes([
-            ...visibleAnnotationsIndexes,
-            annotationIndex
-          ]);
-        }
-      }
-      if (dataset.displayGroup) {
-        datasets.forEach((ds, ix) => {
-          if (ds.displayGroup !== dataset.displayGroup) {
-            return;
-          }
-          chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
-        });
-      }
-      if (interactions.onLegendClick) {
-        interactions.onLegendClick(
-          legendItem2 == null ? void 0 : legendItem2.text,
-          (legendItem2 == null ? void 0 : legendItem2.hidden) ?? false
-        );
-      }
-      chartInstance.update();
-    }
-  };
   const onClick = (_evt, _elements, chartInstance) => {
     chartInstance.resetZoom();
   };
@@ -39072,13 +39126,14 @@ const useBarChartConfig = ({
       }
     }
   };
-  return {
-    generatedDatasets,
-    legendClick,
-    onClick,
-    onHover,
-    visibleAnnotationsIndexes
-  };
+  return useMemo(
+    () => ({
+      generatedDatasets,
+      onClick,
+      onHover
+    }),
+    [chartRef, chart2]
+  );
 };
 const getBarChartAxis = ({
   chart: chart2,
@@ -39296,10 +39351,12 @@ const useBarChartOptions = ({
   chart: chart2,
   chartRef
 }) => {
-  var _a2, _b2, _c2, _d2;
   const { options } = chart2;
   const { chartStyling, dragData } = options;
-  const { legendClick, onClick, onHover, visibleAnnotationsIndexes } = useBarChartConfig({ chart: chart2, chartRef });
+  const { state: legendState } = useLegend();
+  const { annotation: annotation2 } = legendState;
+  const { onClick, onHover } = useBarChartConfig(chartRef, chart2);
+  const { legend: legend2, customLegendPlugin } = useLegendState({ chartRef, options });
   return {
     onClick,
     onHover,
@@ -39316,14 +39373,11 @@ const useBarChartOptions = ({
     plugins: {
       title: getTitle(options),
       datalabels: getBarChartDataLabels(options),
-      annotation: getAnnotation(options, {
-        showAnnotationLineIndex: visibleAnnotationsIndexes
-      }),
+      annotation: toAnnotationObject(annotation2),
       tooltip: getBarChartToolTips(options),
-      legend: getLegend(options, legendClick),
-      [CUSTOM_LEGEND_PLUGIN_NAME]: ((_b2 = (_a2 = options == null ? void 0 : options.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendPlugin) && {
-        containerID: ((_d2 = (_c2 = options == null ? void 0 : options.legend) == null ? void 0 : _c2.customLegend) == null ? void 0 : _d2.customLegendContainerID) ?? ""
-      },
+      legend: { ...legend2, display: false },
+      // hide default legend
+      customLegendPlugin,
       chartAreaBorder: {
         borderColor: BORDER_COLOR
       },
@@ -39331,21 +39385,25 @@ const useBarChartOptions = ({
     }
   };
 };
-const chart = "_chart_1t41j_1";
-const fixedHeight = "_fixedHeight_1t41j_13";
-const stretchHeight = "_stretchHeight_1t41j_19";
-const zoomForm = "_zoomForm_1t41j_32";
-const zoomReset = "_zoomReset_1t41j_40";
-const help = "_help_1t41j_43";
-const autoWeight = "_autoWeight_1t41j_47";
+const chart = "_chart_x1sru_1";
+const canvas = "_canvas_x1sru_10";
+const fixedHeight = "_fixedHeight_x1sru_19";
+const stretchHeight = "_stretchHeight_x1sru_25";
+const zoomForm = "_zoomForm_x1sru_38";
+const zoomReset = "_zoomReset_x1sru_46";
+const help = "_help_x1sru_49";
+const autoWeight = "_autoWeight_x1sru_53";
+const actions = "_actions_x1sru_57";
 const styles = {
   chart,
+  canvas,
   fixedHeight,
   stretchHeight,
   zoomForm,
   zoomReset,
   help,
-  autoWeight
+  autoWeight,
+  actions
 };
 const defaultAxes = (axes) => ({
   x: (axes == null ? void 0 : axes.x) || [{}],
@@ -39384,7 +39442,7 @@ const defaultAnnotations = (annotations) => ({
 });
 const defaultLegend = (legend2) => ({
   display: (legend2 == null ? void 0 : legend2.display) ?? true,
-  position: (legend2 == null ? void 0 : legend2.position) || Position.Bottom,
+  position: (legend2 == null ? void 0 : legend2.position) || Position.TopLeft,
   align: (legend2 == null ? void 0 : legend2.align) || AlignOptions.Center,
   customLegend: (legend2 == null ? void 0 : legend2.customLegend) || {
     customLegendPlugin: null,
@@ -39449,15 +39507,17 @@ Chart$2.register(
   Ht
 );
 const BarChart = (props) => {
-  var _a2, _b2;
+  var _a2, _b2, _c2, _d2;
   setDefaultTheme();
   const chartRef = useRef(null);
   const chart2 = getDefaultProps(props);
+  const { translations, languageKey } = getConfig();
   const { options, testId } = chart2;
   const { chartStyling, graph } = options;
-  const { generatedDatasets } = useBarChartConfig({ chart: chart2, chartRef });
+  const { generatedDatasets } = useBarChartConfig(chartRef, chart2);
   const barChartOptions = useBarChartOptions({ chart: chart2, chartRef });
-  return /* @__PURE__ */ jsx(
+  const showCustomLegend = !((_b2 = (_a2 = options == null ? void 0 : options.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendContainerID);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: getClassName(chartStyling, styles),
@@ -39466,25 +39526,56 @@ const BarChart = (props) => {
         height: chartStyling.height || AUTO
       },
       "data-testid": testId,
-      children: /* @__PURE__ */ jsx(
-        Bar,
-        {
-          ref: chartRef,
-          data: {
-            labels: ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.labels) == null ? void 0 : _b2.length) ? chart2.data.labels : [""],
-            datasets: generatedDatasets
-          },
-          options: barChartOptions,
-          plugins: getPlugins(graph, options.legend)
-        }
-      )
-    }
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.actions, children: /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            small: true,
+            basic: true,
+            colored: "muted",
+            round: true,
+            icon: "download",
+            onClick: () => downloadPgn(chartRef)
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles.canvas, id: "canvas", children: [
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              ref: chartRef,
+              data: {
+                labels: ((_d2 = (_c2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.length) ? chart2.data.labels : [""],
+                datasets: generatedDatasets
+              },
+              options: barChartOptions,
+              plugins: getPlugins(graph, options.legend)
+            }
+          ),
+          showCustomLegend && !!generatedDatasets.length && /* @__PURE__ */ jsx(
+            Legend2,
+            {
+              chartRef,
+              legendConfig: {
+                options,
+                generatedDatasets,
+                chartType: ChartType.BAR
+              }
+            }
+          )
+        ] }) })
+      ]
+    },
+    languageKey
   );
 };
+const BarChartWithLegend = (props) => {
+  const { options } = getDefaultProps(props);
+  return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(BarChart, { ...props }) });
+};
 export {
-  BarChart,
-  LineChart,
-  PieChart,
+  BarChartWithLegend as BarChart,
+  LineChartWithLegend as LineChart,
+  PieChartWithLegend as PieChart,
   initializeLineChart
 };
 //# sourceMappingURL=index.js.map
@@ -39493,7 +39584,7 @@ export {
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      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_gbo9q_1 {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--padding-xs);\n}\n._buttons_gbo9q_7 {\n  display: flex;\n  align-items: flex-start;\n  margin-left: auto;\n  gap: var(--padding-xxs);\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_gbo9q_1 {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--padding-xs);\n}\n._buttons_gbo9q_7 {\n  display: flex;\n  align-items: flex-start;\n  margin-left: auto;\n  gap: var(--padding-xxs);\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_x1sru_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_x1sru_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_x1sru_1._fixedHeight_x1sru_19 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_x1sru_1._stretchHeight_x1sru_25 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_x1sru_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_x1sru_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_x1sru_38 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_x1sru_38 ._zoomReset_x1sru_46 {\n  margin-left: 10px;\n}\n._zoomForm_x1sru_38 ._help_x1sru_49 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_x1sru_53 {\n  width: auto;\n  height: auto;\n}\n._actions_x1sru_57 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {