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

package/dist/index.js

@@ -10,7 +10,7 @@ import React, { forwardRef, useRef, useEffect, createContext as createContext$2,
 import { round as round$2, toNum, displayNumber, isCloseTo } from "@oliasoft-open-source/units";
 import cx from "classnames";
 import { produce } from "immer";
-import { Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer } from "@oliasoft-open-source/react-ui-library";
+import { Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Portal } from "@oliasoft-open-source/react-ui-library";
 import PropTypes from "prop-types";
 import { debounce as debounce$3, isEqual } from "lodash";
 import { jsx as jsx$1 } from "react/jsx-runtime.js";
@@ -13234,11 +13234,10 @@ const getClassName = (chartStyling, styles2) => {
   return cx(styles2.chart, heightStyles, squareAspectRatioStyle);
 };
 const getLegend = (options, clickHandler, state = null) => {
-  var _a2;
   const { legend: legend2 } = options;
   return {
     position: legend2.position || Position.Top,
-    display: !((_a2 = legend2 == null ? void 0 : legend2.customLegend) == null ? void 0 : _a2.customLegendPlugin) ? state ? state.legendEnabled : legend2.display : false,
+    display: legend2.display,
     align: legend2.align,
     labels: {
       boxHeight: LEGEND_LABEL_BOX_SIZE,
@@ -34361,9 +34360,10 @@ const reducer$1 = (state, action) => {
         break;
       }
       case RESET_AXES_RANGES: {
-        const { axes } = draft;
-        draft.axes = axes.map((axis) => ({
-          id: axis.id
+        const { initialAxesRanges } = draft;
+        draft.axes = initialAxesRanges.map((axis) => ({
+          id: axis.id,
+          ...axis.unit && { unit: axis.unit }
         }));
         break;
       }
@@ -34518,7 +34518,7 @@ const initialState = ({ options, persistenceId }) => {
     panEnabled: panEnabled ?? enablePan,
     pointsEnabled: pointsEnabled ?? showPoints,
     lineEnabled: lineEnabled ?? showLine,
-    legendEnabled: legendEnabled ?? display,
+    legendEnabled: legendEnabled ?? true,
     axes: stateAxes,
     showAnnotationLineIndex: setAnnotations(annotationsData),
     showTable: false,
@@ -34756,10 +34756,18 @@ const DragOptions = ({
     Menu,
     {
       menu: {
-        label: selectedOption.buttonLabel || selectedOption.label,
         sections: optionsWithDragPoints,
-        trigger: "DropDownButton",
-        small: true
+        trigger: "Component",
+        component: /* @__PURE__ */ jsx(
+          Button,
+          {
+            colored: "muted",
+            basic: true,
+            small: true,
+            label: selectedOption.buttonLabel || selectedOption.label,
+            icon: selectedOption.icon
+          }
+        )
       }
     }
   );
@@ -36068,7 +36076,7 @@ const AxesOptionsPopover = ({
       const minError = (_e2 = (_d2 = errors == null ? void 0 : errors.find((a2) => a2.id === axis.id)) == null ? void 0 : _d2.min) == null ? void 0 : _e2[0];
       const maxError = (_g2 = (_f2 = errors == null ? void 0 : errors.find((a2) => a2.id === axis.id)) == null ? void 0 : _f2.max) == null ? void 0 : _g2[0];
       const unit = (_h2 = formState.find((a2) => a2.id === axis.id)) == null ? void 0 : _h2.unit;
-      return /* @__PURE__ */ jsx(Field, { label: axisLabel || axis.id || "", children: /* @__PURE__ */ jsxs(InputGroup, { small: true, children: [
+      return /* @__PURE__ */ jsx(Field, { label: axisLabel || axis.id || "", children: /* @__PURE__ */ jsxs(InputGroup, { small: true, width: "300px", children: [
         /* @__PURE__ */ jsx(
           NumberInput,
           {
@@ -36115,7 +36123,8 @@ const AxesOptionsPopover = ({
                 id: axis.id
               });
             },
-            width: "auto"
+            autoLayerWidth: true,
+            width: "15%"
           }
         ) : null
       ] }) }, i2);
@@ -36219,6 +36228,12 @@ AxesOptionsPopover.propTypes = {
     options: PropTypes.arrayOf(PropTypes.string)
   })
 };
+const ControlsPortal = ({ children, controlsPortalId }) => {
+  if (controlsPortalId && document.getElementById(controlsPortalId)) {
+    return /* @__PURE__ */ jsx(Portal, { id: controlsPortalId, children });
+  }
+  return children;
+};
 const Controls = ({
   props: { headerComponent, subheaderComponent, table: table2 },
   chartRef,
@@ -36226,7 +36241,8 @@ const Controls = ({
   options,
   dispatch,
   generatedDatasets,
-  translations
+  translations,
+  controlsPortalId
 }) => {
   const {
     enableDragPoints,
@@ -36264,7 +36280,7 @@ const Controls = ({
     /* @__PURE__ */ jsxs("div", { className: styles$3.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
       headerComponent,
-      /* @__PURE__ */ jsxs("div", { className: styles$3.buttons, children: [
+      /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId, children: /* @__PURE__ */ jsxs("div", { className: styles$3.buttons, children: [
         !showTable && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             AxesOptions,
@@ -36288,17 +36304,24 @@ const Controls = ({
               translations
             }
           ),
-          /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
-            Button,
+          /* @__PURE__ */ jsx(
+            Tooltip$2,
             {
-              small: true,
-              basic: true,
-              colored: "muted",
-              round: true,
-              icon: /* @__PURE__ */ jsx(RiFileDownloadLine, {}),
-              onClick: handleDownload
+              text: translations.downloadAsPNG,
+              placement: "bottom-end",
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  small: true,
+                  basic: true,
+                  colored: "muted",
+                  round: true,
+                  icon: /* @__PURE__ */ jsx(RiFileDownloadLine, {}),
+                  onClick: handleDownload
+                }
+              )
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsx(
             DragOptions,
             {
@@ -36332,7 +36355,7 @@ const Controls = ({
             )
           }
         ) : null
-      ] })
+      ] }) })
     ] }),
     subheaderComponent
   ] });
@@ -36341,7 +36364,8 @@ Controls.defaultProps = {
   props: {
     headerComponent: null,
     subheaderComponent: null,
-    table: null
+    table: null,
+    controlsPortalId: null
   },
   state: {
     initialAxesRanges: []
@@ -36352,7 +36376,8 @@ Controls.propTypes = {
   props: PropTypes.shape({
     headerComponent: PropTypes.node,
     subheaderComponent: PropTypes.node,
-    table: PropTypes.node
+    table: PropTypes.node,
+    controlsPortalId: PropTypes.string
   }),
   chartRef: PropTypes.object.isRequired,
   state: PropTypes.shape({
@@ -36372,26 +36397,26 @@ Controls.propTypes = {
   dispatch: PropTypes.func.isRequired,
   generatedDatasets: PropTypes.arrayOf(PropTypes.object).isRequired
 };
-const legend = "_legend_1uauv_1";
-const isDragging = "_isDragging_1uauv_8";
-const legendItems = "_legendItems_1uauv_11";
-const isHidden = "_isHidden_1uauv_47";
-const legendToggle = "_legendToggle_1uauv_50";
-const legendItem = "_legendItem_1uauv_11";
-const legendItemSymbol = "_legendItemSymbol_1uauv_78";
-const legendItemBox = "_legendItemBox_1uauv_88";
-const legendItemLine = "_legendItemLine_1uauv_93";
-const legendItemPoint = "_legendItemPoint_1uauv_101";
-const legendItemText = "_legendItemText_1uauv_108";
-const scrollbars = "_scrollbars_1uauv_111";
-const dropzoneContainer = "_dropzoneContainer_1uauv_138";
-const dropzone = "_dropzone_1uauv_138";
-const left = "_left_1uauv_147";
-const right = "_right_1uauv_151";
-const top = "_top_1uauv_155";
-const bottom = "_bottom_1uauv_159";
-const dropzonePlaceholder = "_dropzonePlaceholder_1uauv_163";
-const isActive = "_isActive_1uauv_171";
+const legend = "_legend_2182d_1";
+const isDragging = "_isDragging_2182d_8";
+const legendItems = "_legendItems_2182d_11";
+const isHidden = "_isHidden_2182d_47";
+const legendToggle = "_legendToggle_2182d_50";
+const legendItem = "_legendItem_2182d_11";
+const legendItemSymbol = "_legendItemSymbol_2182d_80";
+const legendItemBox = "_legendItemBox_2182d_90";
+const legendItemLine = "_legendItemLine_2182d_95";
+const legendItemPoint = "_legendItemPoint_2182d_103";
+const legendItemText = "_legendItemText_2182d_110";
+const scrollbars = "_scrollbars_2182d_113";
+const dropzoneContainer = "_dropzoneContainer_2182d_140";
+const dropzone = "_dropzone_2182d_140";
+const left = "_left_2182d_149";
+const right = "_right_2182d_153";
+const top = "_top_2182d_157";
+const bottom = "_bottom_2182d_161";
+const dropzonePlaceholder = "_dropzonePlaceholder_2182d_165";
+const isActive = "_isActive_2182d_173";
 const styles$2 = {
   legend,
   isDragging,
@@ -36418,22 +36443,30 @@ const circleSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 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 ? (32 - 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 32 16", children: /* @__PURE__ */ jsx(
-    "line",
+  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",
     {
-      x1: "0",
-      y1: "50%",
-      x2: "100%",
-      y2: "50%",
-      stroke: borderColor,
-      strokeWidth: borderWidth,
-      strokeDasharray: borderDash,
-      strokeDashoffset: offset
+      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 LegendItemPoint = ({ dataset }) => {
   const { pointBackgroundColor, pointRadius, pointStyle } = dataset;
@@ -36482,7 +36515,14 @@ const LegendItem = ({ hidden, dataset, handleClick }) => {
       className: cx(styles$2.legendItem, hidden && styles$2.isHidden),
       onClick: handleClick,
       children: [
-        /* @__PURE__ */ jsx("span", { className: styles$2.legendItemSymbol, children: /* @__PURE__ */ jsx(LegendItemSymbol, { dataset }) }),
+        /* @__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 })
       ]
     }
@@ -36522,8 +36562,8 @@ const LegendPanel = forwardRef((props, ref) => {
     right: legendPosition.includes("right") ? width - right2 : null,
     top: legendPosition.includes("top") ? top2 : null,
     bottom: legendPosition.includes("bottom") ? height - bottom2 : null,
-    maxHeight: bottom2 - top2 - LEGEND_MARGIN * 2,
-    maxWidth: right2 - left2 - LEGEND_MARGIN * 2,
+    maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
+    maxWidth: 0.5 * (right2 - left2 - LEGEND_MARGIN * 2),
     margin: LEGEND_MARGIN
   };
   return /* @__PURE__ */ jsxs(
@@ -36689,6 +36729,7 @@ const LineChartPropTypes = {
   table: PropTypes.node,
   chart: PropTypes.shape({
     persistenceId: PropTypes.string,
+    controlsPortalId: PropTypes.string,
     testId: PropTypes.string,
     data: PropTypes.object.isRequired,
     options: PropTypes.shape({
@@ -36857,6 +36898,7 @@ const getDefaultProps$2 = (props) => {
   props.chart.options.dragData = props.chart.options.dragData || {};
   const chart2 = {
     persistenceId: props.chart.persistenceId ?? "",
+    controlsPortalId: props.chart.controlsPortalId ?? null,
     testId: props.chart.testId ?? null,
     data: props.chart.data,
     options: {
@@ -36917,7 +36959,8 @@ const getDefaultProps$2 = (props) => {
         annotationsData: props.chart.options.annotations.annotationsData || []
       },
       legend: {
-        display: props.chart.options.legend.display ?? true,
+        display: !!props.chart.options.legend.customLegend.customLegendContainerID,
+        // ChartJS legend is replaced by draggable legend if customLegendContainerID is not set,
         position: props.chart.options.legend.position || "bottom-left",
         align: props.chart.options.legend.align || "center",
         customLegend: props.chart.options.legend.customLegend,
@@ -36974,6 +37017,8 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
   if (controlAnnotation && showAnnotations) {
     const annotationDatasets = annotationsData.map((annotation2, index2) => {
       const color2 = annotation2.color ?? COLORS[index2];
+      const borderDash = ANNOTATION_DASH;
+      const borderWidth = BORDER_WIDTH.INITIAL;
       return {
         isAnnotation: true,
         annotationType: annotation2.type,
@@ -36982,8 +37027,8 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
         backgroundColor: color2,
         pointBackgroundColor: color2,
         borderColor: color2,
-        borderDash: annotation2.borderDash,
-        borderWidth: annotation2.borderWidth,
+        borderDash,
+        borderWidth,
         data: [{}]
       };
     });
@@ -37056,16 +37101,17 @@ const formatAxisLabelNumbers = (tickValue, ticks, locale = "en-gb") => {
       Math.abs(ticks[0].value),
       Math.abs(ticks[ticks.length - 1].value)
     );
-    if (maxTick < 1e-4 || maxTick > 1e15) {
+    if (maxTick < 1e-4 || maxTick > 1e7) {
       notation = "scientific";
     }
     delta = calculateDelta(tickValue, ticks);
   }
   const logDelta = Math.log10(Math.abs(delta));
   const numDecimal = isNaN(logDelta) ? 1 : Math.max(Math.min(-1 * Math.floor(logDelta), 20), 0);
+  const roundScientificCoefficient = numDecimal === 0 ? 1 : numDecimal;
   return displayNumber(round$2(tickValue, numDecimal), {
     scientific: notation === "scientific",
-    roundScientificCoefficientToNDecimals: numDecimal
+    roundScientificCoefficient
   });
 };
 const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
@@ -37988,7 +38034,8 @@ const LineChart = (props) => {
     data: { datasets },
     options,
     testId,
-    persistenceId
+    persistenceId,
+    controlsPortalId
   } = chart2;
   const { annotations, axes, chartStyling, graph } = options;
   const showCustomLegend = !options.legend.customLegend.customLegendContainerID;
@@ -38048,7 +38095,8 @@ const LineChart = (props) => {
             options,
             dispatch,
             generatedDatasets,
-            translations
+            translations,
+            controlsPortalId
           }
         ),
         table2 && state.showTable ? /* @__PURE__ */ jsx("div", { className: styles$4.table, children: table2 }) : /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, children: /* @__PURE__ */ jsxs("div", { className: styles$4.canvas, id: "canvas", children: [
@@ -39127,7 +39175,7 @@ export {
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("html[data-theme='dark'] ._chart_1v6ps_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\nhtml[data-theme='dark'] ._chart_e3qdd_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_e3qdd_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_e3qdd_1._fixedHeight_e3qdd_20 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_e3qdd_1._stretchHeight_e3qdd_26 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_e3qdd_1._squareAspectRatio_e3qdd_32 {\n  aspect-ratio: 1;\n  min-height: 0;\n  min-width: 0;\n}\n._chart_e3qdd_1:focus {\n  outline: none;\n}\n._chart_e3qdd_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_e3qdd_43 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_e3qdd_43 ._zoomReset_e3qdd_51 {\n  margin-left: 10px;\n}\n._zoomForm_e3qdd_43 ._help_e3qdd_54 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_e3qdd_58 {\n  width: auto;\n  height: auto;\n}\n._table_e3qdd_62 {\n  overflow: auto;\n}\n._controls_fa3yo_1 {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n._buttons_fa3yo_7 {\n  display: flex;\n  margin-left: auto;\n  gap: 4px;\n}\n._legend_1uauv_1 {\n  position: absolute;\n  opacity: 0.9;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n}\n._legend_1uauv_1._isDragging_1uauv_8 {\n  opacity: 0;\n}\n._legendItems_1uauv_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_1uauv_11::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._legendItems_1uauv_11::-webkit-scrollbar-button {\n  display: none;\n}\n._legendItems_1uauv_11::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._legendItems_1uauv_11::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._legendItems_1uauv_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_1uauv_11::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._legend_1uauv_1._isDragging_1uauv_8 ._legendItems_1uauv_11._legendItems_1uauv_11 {\n  pointer-events: none;\n}\n._legend_1uauv_1._isHidden_1uauv_47 ._legendItems_1uauv_11._legendItems_1uauv_11 {\n  display: none;\n}\n._legendToggle_1uauv_50 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: none;\n}\n._legend_1uauv_1._isHidden_1uauv_47 ._legendToggle_1uauv_50._legendToggle_1uauv_50,\n._legend_1uauv_1:hover ._legendToggle_1uauv_50._legendToggle_1uauv_50 {\n  display: block;\n}\n._legend_1uauv_1:active ._legendToggle_1uauv_50._legendToggle_1uauv_50:not(:hover) {\n  display: none;\n}\n._legend_1uauv_1._isHidden_1uauv_47 ._legendToggle_1uauv_50._legendToggle_1uauv_50 {\n  position: static;\n  transform: none;\n}\n._legend_1uauv_1._isDragging_1uauv_8 ._legendToggle_1uauv_50._legendToggle_1uauv_50 {\n  display: none;\n}\n._legendItem_1uauv_11 {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  user-select: none;\n  cursor: pointer;\n}\n._legendItemSymbol_1uauv_78 {\n  display: flex;\n  align-items: center;\n  width: 32px;\n  height: 20px;\n  position: relative;\n}\nhtml[data-theme='dark'] ._legendItemSymbol_1uauv_78._legendItemSymbol_1uauv_78 {\n  filter: invert(1) hue-rotate(180deg);\n}\n._legendItemBox_1uauv_88 {\n  width: 100%;\n  height: 12px;\n  display: block;\n}\n._legendItemLine_1uauv_93 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  transform: translateY(-50%);\n}\n._legendItemPoint_1uauv_101 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n._isHidden_1uauv_47 ._legendItemText_1uauv_108._legendItemText_1uauv_108 {\n  text-decoration: line-through;\n}\n._scrollbars_1uauv_111 {\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._scrollbars_1uauv_111::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._scrollbars_1uauv_111::-webkit-scrollbar-button {\n  display: none;\n}\n._scrollbars_1uauv_111::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._scrollbars_1uauv_111::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._scrollbars_1uauv_111::-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_1uauv_111::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._dropzoneContainer_1uauv_138 {\n  position: absolute;\n}\n._dropzone_1uauv_138 {\n  position: absolute;\n  width: 50%;\n  height: 50%;\n  display: flex;\n}\n._dropzone_1uauv_138._left_1uauv_147 {\n  left: 0;\n  justify-content: flex-start;\n}\n._dropzone_1uauv_138._right_1uauv_151 {\n  right: 0;\n  justify-content: flex-end;\n}\n._dropzone_1uauv_138._top_1uauv_155 {\n  top: 0;\n  align-items: flex-start;\n}\n._dropzone_1uauv_138._bottom_1uauv_159 {\n  bottom: 0;\n  align-items: flex-end;\n}\n._dropzonePlaceholder_1uauv_163 {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.05);\n  display: none;\n}\n[data-theme='dark'] ._dropzonePlaceholder_1uauv_163 {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n._isActive_1uauv_171 ._dropzonePlaceholder_1uauv_163._dropzonePlaceholder_1uauv_163 {\n  display: block;\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_1v6ps_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\nhtml[data-theme='dark'] ._chart_e3qdd_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_e3qdd_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_e3qdd_1._fixedHeight_e3qdd_20 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_e3qdd_1._stretchHeight_e3qdd_26 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_e3qdd_1._squareAspectRatio_e3qdd_32 {\n  aspect-ratio: 1;\n  min-height: 0;\n  min-width: 0;\n}\n._chart_e3qdd_1:focus {\n  outline: none;\n}\n._chart_e3qdd_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_e3qdd_43 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_e3qdd_43 ._zoomReset_e3qdd_51 {\n  margin-left: 10px;\n}\n._zoomForm_e3qdd_43 ._help_e3qdd_54 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_e3qdd_58 {\n  width: auto;\n  height: auto;\n}\n._table_e3qdd_62 {\n  overflow: auto;\n}\n._controls_fa3yo_1 {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n._buttons_fa3yo_7 {\n  display: flex;\n  margin-left: auto;\n  gap: 4px;\n}\n._legend_2182d_1 {\n  position: absolute;\n  opacity: 0.9;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n}\n._legend_2182d_1._isDragging_2182d_8 {\n  opacity: 0;\n}\n._legendItems_2182d_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_2182d_11::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._legendItems_2182d_11::-webkit-scrollbar-button {\n  display: none;\n}\n._legendItems_2182d_11::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._legendItems_2182d_11::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._legendItems_2182d_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_2182d_11::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._legend_2182d_1._isDragging_2182d_8 ._legendItems_2182d_11._legendItems_2182d_11 {\n  pointer-events: none;\n}\n._legend_2182d_1._isHidden_2182d_47 ._legendItems_2182d_11._legendItems_2182d_11 {\n  display: none;\n}\n._legendToggle_2182d_50 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: none;\n}\n._legend_2182d_1._isHidden_2182d_47 ._legendToggle_2182d_50._legendToggle_2182d_50,\n._legend_2182d_1:hover ._legendToggle_2182d_50._legendToggle_2182d_50 {\n  display: block;\n}\n._legend_2182d_1:active ._legendToggle_2182d_50._legendToggle_2182d_50:not(:hover) {\n  display: none;\n}\n._legend_2182d_1._isHidden_2182d_47 ._legendToggle_2182d_50._legendToggle_2182d_50 {\n  position: static;\n  transform: none;\n}\n._legend_2182d_1._isDragging_2182d_8 ._legendToggle_2182d_50._legendToggle_2182d_50 {\n  display: none;\n}\n._legendItem_2182d_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_2182d_80 {\n  display: flex;\n  align-items: center;\n  height: 16px;\n  position: relative;\n  flex-shrink: 0;\n}\nhtml[data-theme='dark'] ._legendItemSymbol_2182d_80._legendItemSymbol_2182d_80 {\n  filter: invert(1) hue-rotate(180deg);\n}\n._legendItemBox_2182d_90 {\n  width: 100%;\n  height: 12px;\n  display: block;\n}\n._legendItemLine_2182d_95 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  transform: translateY(-50%);\n}\n._legendItemPoint_2182d_103 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n._isHidden_2182d_47 ._legendItemText_2182d_110._legendItemText_2182d_110 {\n  text-decoration: line-through;\n}\n._scrollbars_2182d_113 {\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._scrollbars_2182d_113::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._scrollbars_2182d_113::-webkit-scrollbar-button {\n  display: none;\n}\n._scrollbars_2182d_113::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._scrollbars_2182d_113::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._scrollbars_2182d_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_2182d_113::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._dropzoneContainer_2182d_140 {\n  position: absolute;\n}\n._dropzone_2182d_140 {\n  position: absolute;\n  width: 50%;\n  height: 50%;\n  display: flex;\n}\n._dropzone_2182d_140._left_2182d_149 {\n  left: 0;\n  justify-content: flex-start;\n}\n._dropzone_2182d_140._right_2182d_153 {\n  right: 0;\n  justify-content: flex-end;\n}\n._dropzone_2182d_140._top_2182d_157 {\n  top: 0;\n  align-items: flex-start;\n}\n._dropzone_2182d_140._bottom_2182d_161 {\n  bottom: 0;\n  align-items: flex-end;\n}\n._dropzonePlaceholder_2182d_165 {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.05);\n  display: none;\n}\n[data-theme='dark'] ._dropzonePlaceholder_2182d_165 {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n._isActive_2182d_173 ._dropzonePlaceholder_2182d_165._dropzonePlaceholder_2182d_165 {\n  display: block;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1jdnu_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1jdnu_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1jdnu_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n  margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n  width: 'auto';\n  height: 'auto';\n}\nhtml[data-theme='dark'] ._chart_1t41j_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1t41j_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1t41j_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1t41j_1._fixedHeight_1t41j_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1t41j_1._stretchHeight_1t41j_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1t41j_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1t41j_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1t41j_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1t41j_32 ._zoomReset_1t41j_40 {\n  margin-left: 10px;\n}\n._zoomForm_1t41j_32 ._help_1t41j_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1t41j_47 {\n  width: auto;\n  height: auto;\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {