@corva/ui 3.1.0-rc.3 → 3.1.0-rc.5

package/components/EChartsWrapper/EChartsWrapper.js

@@ -0,0 +1,343 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useState, useEffect, Children, cloneElement } from 'react';
+import { noop } from 'lodash';
+import { makeStyles, useTheme } from '@material-ui/core';
+import classNames from 'classnames';
+import { Toolbox } from './components/Toolbox/Toolbox.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var AXIS_ZOOM_STEP_PERCENT = 0.05;
+var useStyles = makeStyles(function () {
+  return {
+    container: {
+      position: 'relative',
+      width: '100%',
+      height: '100%'
+    }
+  };
+});
+var EChartsWrapper = function EChartsWrapper(_ref) {
+  var containerClassName = _ref.containerClassName,
+    customToolboxContainerClass = _ref.customToolboxContainerClass,
+    onDataZoomCustom = _ref.onDataZoom,
+    toolboxProps = _ref.toolboxProps,
+    children = _ref.children;
+  var classes = useStyles();
+  var chartRef = useRef(null);
+  var chart = chartRef.current;
+  var theme = useTheme();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isNeedInitialOptions = _useState2[0],
+    setIsNeedInitialOptions = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isPaneEnabled = _useState4[0],
+    setIsPaneEnabled = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isBrushEnabled = _useState6[0],
+    setIsBrushEnabled = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isZoomed = _useState8[0],
+    setIsZoomed = _useState8[1];
+  var axisRange = useRef(null);
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    currentZoomRange = _useState10[0],
+    setCurrentZoomRange = _useState10[1];
+  var handleZoomChart = function handleZoomChart(range) {
+    var _options$xAxis, _options$yAxis;
+    var options = chart.getOption();
+    var series = options.series;
+    var isMultipleAxis = ((_options$xAxis = options.xAxis) === null || _options$xAxis === void 0 ? void 0 : _options$xAxis.length) > 1 || ((_options$yAxis = options.yAxis) === null || _options$yAxis === void 0 ? void 0 : _options$yAxis.length) > 1;
+    if (!isMultipleAxis) {
+      var data = Array.isArray(series) ? series.reduce(function (acc, serie) {
+        return acc.concat(serie.data);
+      }, []) : series.data;
+      var isDataExists = data.some(function (dataItem) {
+        // case when dot structure is [x,y]
+        if (Array.isArray(dataItem)) {
+          return dataItem[0] > range.x.start && dataItem[0] < range.x.end && dataItem[1] > range.y.start && dataItem[1] < range.y.end;
+        }
+        return dataItem.x > range.x.start && dataItem.x < range.x.end && dataItem.y > range.y.start && dataItem.y < range.y.end;
+      });
+      if (!isDataExists) return;
+    }
+    var absoluteXStart = Math.abs(range.x.start - axisRange.current.x.start) * 100;
+    var absoluteXEnd = Math.abs(range.x.end - axisRange.current.x.start) * 100;
+    var absoluteYStart = Math.abs(range.y.start - axisRange.current.y.start) * 100;
+    var absoluteYEnd = Math.abs(range.y.end - axisRange.current.y.start) * 100;
+    var yStartPercent = absoluteYStart / Math.abs(axisRange.current.y.start - axisRange.current.y.end);
+    var yEndPercent = absoluteYEnd / Math.abs(axisRange.current.y.start - axisRange.current.y.end);
+    var xStartPercent = absoluteXStart / Math.abs(axisRange.current.x.start - axisRange.current.x.end);
+    var xEndPercent = absoluteXEnd / Math.abs(axisRange.current.x.start - axisRange.current.x.end);
+    chart.dispatchAction({
+      type: 'dataZoom',
+      moveOnMouseMove: isPaneEnabled,
+      filterMode: 'none',
+      rangeMode: ['percent', 'percent'],
+      batch: [{
+        start: +xStartPercent.toFixed(2),
+        end: +xEndPercent.toFixed(2),
+        dataZoomIndex: 0
+      }, {
+        start: +yStartPercent.toFixed(2),
+        end: +yEndPercent.toFixed(2),
+        dataZoomIndex: 1
+      }]
+    });
+  };
+  var handleSaveAxisRanges = function handleSaveAxisRanges() {
+    var _chart$getModel, _chart$getModel$getCo, _chart$getModel$getCo2, _chart$getModel$getCo3, _chart$getModel2, _chart$getModel2$getC, _chart$getModel2$getC2, _chart$getModel2$getC3;
+    // @ts-ignore
+    var xRange = chart === null || chart === void 0 ? void 0 : (_chart$getModel = chart.getModel()) === null || _chart$getModel === void 0 ? void 0 : (_chart$getModel$getCo = _chart$getModel.getComponent('xAxis', 0)) === null || _chart$getModel$getCo === void 0 ? void 0 : (_chart$getModel$getCo2 = _chart$getModel$getCo.axis) === null || _chart$getModel$getCo2 === void 0 ? void 0 : (_chart$getModel$getCo3 = _chart$getModel$getCo2.scale) === null || _chart$getModel$getCo3 === void 0 ? void 0 : _chart$getModel$getCo3.getExtent();
+    // @ts-ignore
+    var yRange = chart === null || chart === void 0 ? void 0 : (_chart$getModel2 = chart.getModel()) === null || _chart$getModel2 === void 0 ? void 0 : (_chart$getModel2$getC = _chart$getModel2.getComponent('yAxis', 0)) === null || _chart$getModel2$getC === void 0 ? void 0 : (_chart$getModel2$getC2 = _chart$getModel2$getC.axis) === null || _chart$getModel2$getC2 === void 0 ? void 0 : (_chart$getModel2$getC3 = _chart$getModel2$getC2.scale) === null || _chart$getModel2$getC3 === void 0 ? void 0 : _chart$getModel2$getC3.getExtent();
+    if (xRange && yRange) {
+      var _xRange = _slicedToArray(xRange, 2),
+        _xMin = _xRange[0],
+        _xMax = _xRange[1];
+      var _yRange = _slicedToArray(yRange, 2),
+        _yMin = _yRange[0],
+        _yMax = _yRange[1];
+      axisRange.current = {
+        x: {
+          start: +_xMin.toFixed(2),
+          end: +_xMax.toFixed(2)
+        },
+        y: {
+          start: +_yMin.toFixed(2),
+          end: +_yMax.toFixed(2)
+        }
+      };
+    }
+  };
+  var handleSaveZoomRange = function handleSaveZoomRange() {
+    // getModel is not standardized and documented
+    // https://github.com/apache/echarts/issues/16479#issuecomment-1033349403
+    // @ts-ignore
+    var _chart$getModel$getCo4 = chart.getModel().getComponent('yAxis', 0).axis.scale.getExtent(),
+      _chart$getModel$getCo5 = _slicedToArray(_chart$getModel$getCo4, 2),
+      yMin = _chart$getModel$getCo5[0],
+      yMax = _chart$getModel$getCo5[1];
+    // @ts-ignore
+    var _chart$getModel$getCo6 = chart.getModel().getComponent('xAxis', 0).axis.scale.getExtent(),
+      _chart$getModel$getCo7 = _slicedToArray(_chart$getModel$getCo6, 2),
+      xMin = _chart$getModel$getCo7[0],
+      xMax = _chart$getModel$getCo7[1];
+    var range = {
+      x: {
+        start: xMin,
+        end: xMax
+      },
+      y: {
+        start: yMin,
+        end: yMax
+      }
+    };
+    setCurrentZoomRange(range);
+    onDataZoomCustom(range);
+  };
+  var handleZoomIn = function handleZoomIn() {
+    if (!isZoomed) {
+      handleSaveAxisRanges();
+      setIsZoomed(true);
+    }
+    var targetRange = currentZoomRange || axisRange.current;
+    var currentXStep = Math.abs(targetRange.x.start - targetRange.x.end) * AXIS_ZOOM_STEP_PERCENT;
+    var currentYStep = Math.abs(targetRange.y.start - targetRange.y.end) * AXIS_ZOOM_STEP_PERCENT;
+    var XStart = +(targetRange.x.start + currentXStep).toFixed(2);
+    var XEnd = +(targetRange.x.end - currentXStep).toFixed(2);
+    var YStart = +(targetRange.y.start + currentYStep).toFixed(2);
+    var YEnd = +(targetRange.y.end - currentYStep).toFixed(2);
+    var isXExceeds = XStart >= XEnd;
+    var isYExceeds = YStart >= YEnd;
+    handleZoomChart({
+      x: {
+        start: isXExceeds ? targetRange.x.start : XStart,
+        end: isXExceeds ? targetRange.x.end : XEnd
+      },
+      y: {
+        start: isYExceeds ? targetRange.y.start : YStart,
+        end: isYExceeds ? targetRange.y.end : YEnd
+      }
+    });
+  };
+  var handleZoomOut = function handleZoomOut() {
+    var currentXStep = Math.abs(axisRange.current.x.start - axisRange.current.x.end) * AXIS_ZOOM_STEP_PERCENT;
+    var currentYStep = Math.abs(axisRange.current.y.start - axisRange.current.y.end) * AXIS_ZOOM_STEP_PERCENT;
+    var XStart = +(currentZoomRange.x.start - currentXStep).toFixed(2);
+    var XEnd = +(currentZoomRange.x.end + currentXStep).toFixed(2);
+    var YStart = +(currentZoomRange.y.start - currentYStep).toFixed(2);
+    var YEnd = +(currentZoomRange.y.end + currentYStep).toFixed(2);
+    var isXExceeds = XStart <= axisRange.current.x.start || XEnd >= axisRange.current.x.end;
+    var isYExceeds = YStart <= axisRange.current.y.start || YEnd >= axisRange.current.y.end;
+    if (isXExceeds && isYExceeds) {
+      return handleZoomReset();
+    }
+    handleZoomChart({
+      x: isXExceeds ? axisRange.current.x : {
+        start: XStart,
+        end: XEnd
+      },
+      y: isYExceeds ? axisRange.current.y : {
+        start: YStart,
+        end: YEnd
+      }
+    });
+  };
+  var handleZoomReset = function handleZoomReset() {
+    setIsZoomed(false);
+    setIsPaneEnabled(false);
+    setIsBrushEnabled(true);
+    chart.dispatchAction({
+      type: 'dataZoom',
+      start: 0,
+      end: 100,
+      rangeMode: ['percent', 'percent']
+    });
+  };
+  var onDataZoom = function onDataZoom(evt) {
+    var _evt$batch, _evt$batch$;
+    var isResetEvent = evt.start === 0 && evt.end === 100;
+    var isNativeDataZoom = (_evt$batch = evt.batch) === null || _evt$batch === void 0 ? void 0 : (_evt$batch$ = _evt$batch[0]) === null || _evt$batch$ === void 0 ? void 0 : _evt$batch$.startValue;
+    setIsZoomed(function (prev) {
+      if (isNativeDataZoom) return true;
+      if (isResetEvent) {
+        handleSaveAxisRanges();
+      }
+      return !isResetEvent;
+    });
+    handleSaveZoomRange();
+  };
+  useEffect(function () {
+    if (!chart) return;
+    if (!isZoomed) {
+      handleSaveAxisRanges();
+    }
+    if (isNeedInitialOptions) {
+      chart.setOption({
+        toolbox: {
+          show: true,
+          width: 0,
+          height: 0,
+          feature: {
+            dataZoom: {
+              show: true,
+              icon: null,
+              brushStyle: {
+                borderWidth: 0,
+                opacity: 0.1,
+                color: theme.palette.primary.light
+              }
+            }
+          }
+        },
+        dataZoom: [{
+          type: 'inside',
+          xAxisIndex: 'all',
+          filterMode: 'none',
+          zoomOnMouseWheel: false,
+          moveOnMouseMove: false
+        }, {
+          type: 'inside',
+          yAxisIndex: 'all',
+          filterMode: 'none',
+          zoomOnMouseWheel: false,
+          moveOnMouseMove: false
+        }]
+      }, {
+        replaceMerge: 'dataZoom'
+      });
+      chart.on('dataZoom', onDataZoom);
+      setIsNeedInitialOptions(false);
+      chart.dispatchAction({
+        type: 'takeGlobalCursor',
+        key: 'dataZoomSelect',
+        dataZoomSelectActive: true
+      });
+    }
+  }, [chart, isNeedInitialOptions, isZoomed]);
+  useEffect(function () {
+    // cursor grab in pane mode works only for canvas renderer
+    var zRender = chart === null || chart === void 0 ? void 0 : chart.getZr();
+    if (zRender) {
+      var canvas = Array.from(zRender.dom.getElementsByTagName('canvas')).at(-1);
+      if (canvas) {
+        canvas.style.cursor = isPaneEnabled ? 'grab' : isBrushEnabled ? 'crosshair' : 'default';
+      } else {
+        console.error('Canvas not found');
+      }
+    }
+  }, [chart, isPaneEnabled, isBrushEnabled]);
+  useEffect(function () {
+    if (!chart) return;
+    chart.setOption({
+      dataZoom: [{
+        type: 'inside',
+        xAxisIndex: 'all',
+        filterMode: 'none',
+        zoomOnMouseWheel: false,
+        moveOnMouseMove: isPaneEnabled
+      }, {
+        type: 'inside',
+        yAxisIndex: 'all',
+        filterMode: 'none',
+        zoomOnMouseWheel: false,
+        moveOnMouseMove: isPaneEnabled
+      }]
+    });
+  }, [isPaneEnabled]);
+  useEffect(function () {
+    chart === null || chart === void 0 ? void 0 : chart.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: isBrushEnabled
+    });
+  }, [isBrushEnabled]);
+  var onChartReadyExtended = function onChartReadyExtended(childCallback) {
+    return function (instance) {
+      if (childCallback) {
+        childCallback(instance);
+      }
+      setIsNeedInitialOptions(true);
+      chartRef.current = instance;
+    };
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(classes.container, containerClassName),
+    children: [Children.map(children, function (child) {
+      var onChartReady = child.props.onChartReady;
+      // @ts-ignore
+      return cloneElement(child, {
+        onChartReady: onChartReadyExtended(onChartReady)
+      });
+    }), /*#__PURE__*/jsx(Toolbox, _objectSpread(_objectSpread({}, toolboxProps), {}, {
+      handleTogglePane: function handleTogglePane(isEnabled) {
+        return setIsPaneEnabled(isEnabled);
+      },
+      handleToggleBrush: function handleToggleBrush(isEnabled) {
+        return setIsBrushEnabled(isEnabled);
+      },
+      isPaneEnabled: isPaneEnabled,
+      isBrushEnabled: isBrushEnabled,
+      isZoomed: isZoomed,
+      chart: chart,
+      handleZoomReset: handleZoomReset,
+      handleZoomOut: handleZoomOut,
+      handleZoomIn: handleZoomIn,
+      customToolboxContainerClass: classNames(toolboxProps === null || toolboxProps === void 0 ? void 0 : toolboxProps.customToolboxContainerClass, customToolboxContainerClass)
+    }))]
+  });
+};
+EChartsWrapper.defaultProps = {
+  onDataZoom: noop
+};
+
+export { EChartsWrapper as default };
+//# sourceMappingURL=EChartsWrapper.js.map

package/components/EChartsWrapper/EChartsWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EChartsWrapper.js","sources":["../../../src/components/EChartsWrapper/EChartsWrapper.tsx"],"sourcesContent":["import { Children, cloneElement, FC, useEffect, useRef, useState } from 'react';\nimport { noop } from 'lodash';\nimport ReactECharts from 'echarts-for-react';\nimport { EChartsType, SeriesOption } from 'echarts';\nimport { AxisRange, ChartWrapperProps, DataZoomEvent, SeriesDataItem } from './types';\nimport { XAXisOption, YAXisOption } from 'echarts/types/dist/shared';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport classnames from 'classnames';\n\nimport { Toolbox } from './components/Toolbox/Toolbox';\n\nconst AXIS_ZOOM_STEP_PERCENT = 0.05;\n\nconst useStyles = makeStyles(() => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n}));\n\nconst EChartsWrapper: FC<ChartWrapperProps> = ({\n  containerClassName,\n  customToolboxContainerClass,\n  onDataZoom: onDataZoomCustom,\n  toolboxProps,\n\n  // @ts-ignore\n  children,\n}) => {\n  const classes = useStyles();\n  const chartRef = useRef<EChartsType | null>(null);\n  const chart = chartRef.current;\n  const theme = useTheme();\n  const [isNeedInitialOptions, setIsNeedInitialOptions] = useState(false);\n  const [isPaneEnabled, setIsPaneEnabled] = useState(false);\n  const [isBrushEnabled, setIsBrushEnabled] = useState(true);\n  const [isZoomed, setIsZoomed] = useState(false);\n  const axisRange = useRef<AxisRange | null>(null);\n  const [currentZoomRange, setCurrentZoomRange] = useState<AxisRange | null>(null);\n\n  const handleZoomChart = (range: AxisRange) => {\n    const options = chart.getOption();\n    const series = options.series as SeriesOption[] | SeriesOption;\n    const isMultipleAxis =\n      (options.xAxis as XAXisOption[])?.length > 1 || (options.yAxis as YAXisOption[])?.length > 1;\n    if (!isMultipleAxis) {\n      const data = (\n        Array.isArray(series)\n          ? series.reduce((acc, serie) => acc.concat(serie.data), [])\n          : series.data\n      ) as SeriesDataItem[];\n\n      const isDataExists = data.some((dataItem: SeriesDataItem) => {\n        // case when dot structure is [x,y]\n        if (Array.isArray(dataItem)) {\n          return (\n            dataItem[0] > range.x.start &&\n            dataItem[0] < range.x.end &&\n            dataItem[1] > range.y.start &&\n            dataItem[1] < range.y.end\n          );\n        }\n        return (\n          dataItem.x > range.x.start &&\n          dataItem.x < range.x.end &&\n          dataItem.y > range.y.start &&\n          dataItem.y < range.y.end\n        );\n      });\n\n      if (!isDataExists) return;\n    }\n\n    const absoluteXStart = Math.abs(range.x.start - axisRange.current.x.start) * 100;\n    const absoluteXEnd = Math.abs(range.x.end - axisRange.current.x.start) * 100;\n\n    const absoluteYStart = Math.abs(range.y.start - axisRange.current.y.start) * 100;\n    const absoluteYEnd = Math.abs(range.y.end - axisRange.current.y.start) * 100;\n\n    const yStartPercent =\n      absoluteYStart / Math.abs(axisRange.current.y.start - axisRange.current.y.end);\n    const yEndPercent =\n      absoluteYEnd / Math.abs(axisRange.current.y.start - axisRange.current.y.end);\n\n    const xStartPercent =\n      absoluteXStart / Math.abs(axisRange.current.x.start - axisRange.current.x.end);\n    const xEndPercent =\n      absoluteXEnd / Math.abs(axisRange.current.x.start - axisRange.current.x.end);\n\n    chart.dispatchAction({\n      type: 'dataZoom',\n      moveOnMouseMove: isPaneEnabled,\n      filterMode: 'none',\n      rangeMode: ['percent', 'percent'],\n      batch: [\n        { start: +xStartPercent.toFixed(2), end: +xEndPercent.toFixed(2), dataZoomIndex: 0 },\n        {\n          start: +yStartPercent.toFixed(2),\n          end: +yEndPercent.toFixed(2),\n          dataZoomIndex: 1,\n        },\n      ],\n    });\n  };\n\n  const handleSaveAxisRanges = () => {\n    // @ts-ignore\n    const xRange = chart?.getModel()?.getComponent('xAxis', 0)?.axis?.scale?.getExtent() as [\n      xMin: number,\n      xMax: number\n    ];\n    // @ts-ignore\n    const yRange = chart?.getModel()?.getComponent('yAxis', 0)?.axis?.scale?.getExtent() as [\n      yMin: number,\n      yMax: number\n    ];\n\n    if (xRange && yRange) {\n      const [xMin, xMax] = xRange;\n      const [yMin, yMax] = yRange;\n      axisRange.current = {\n        x: {\n          start: +xMin.toFixed(2),\n          end: +xMax.toFixed(2),\n        },\n        y: {\n          start: +yMin.toFixed(2),\n          end: +yMax.toFixed(2),\n        },\n      };\n    }\n  };\n\n  const handleSaveZoomRange = () => {\n    // getModel is not standardized and documented\n    // https://github.com/apache/echarts/issues/16479#issuecomment-1033349403\n    // @ts-ignore\n    const [yMin, yMax] = chart.getModel().getComponent('yAxis', 0).axis.scale.getExtent();\n    // @ts-ignore\n    const [xMin, xMax] = chart.getModel().getComponent('xAxis', 0).axis.scale.getExtent();\n\n    const range = {\n      x: {\n        start: xMin,\n        end: xMax,\n      },\n      y: {\n        start: yMin,\n        end: yMax,\n      },\n    };\n    setCurrentZoomRange(range);\n    onDataZoomCustom(range);\n  };\n\n  const handleZoomIn = (): void => {\n    if (!isZoomed) {\n      handleSaveAxisRanges();\n      setIsZoomed(true);\n    }\n    const targetRange = currentZoomRange || axisRange.current;\n\n    const currentXStep = Math.abs(targetRange.x.start - targetRange.x.end) * AXIS_ZOOM_STEP_PERCENT;\n    const currentYStep = Math.abs(targetRange.y.start - targetRange.y.end) * AXIS_ZOOM_STEP_PERCENT;\n\n    const XStart = +(targetRange.x.start + currentXStep).toFixed(2);\n    const XEnd = +(targetRange.x.end - currentXStep).toFixed(2);\n\n    const YStart = +(targetRange.y.start + currentYStep).toFixed(2);\n    const YEnd = +(targetRange.y.end - currentYStep).toFixed(2);\n    const isXExceeds = XStart >= XEnd;\n    const isYExceeds = YStart >= YEnd;\n\n    handleZoomChart({\n      x: {\n        start: isXExceeds ? targetRange.x.start : XStart,\n        end: isXExceeds ? targetRange.x.end : XEnd,\n      },\n      y: {\n        start: isYExceeds ? targetRange.y.start : YStart,\n        end: isYExceeds ? targetRange.y.end : YEnd,\n      },\n    });\n  };\n\n  const handleZoomOut = (): void => {\n    const currentXStep =\n      Math.abs(axisRange.current.x.start - axisRange.current.x.end) * AXIS_ZOOM_STEP_PERCENT;\n    const currentYStep =\n      Math.abs(axisRange.current.y.start - axisRange.current.y.end) * AXIS_ZOOM_STEP_PERCENT;\n\n    const XStart = +(currentZoomRange.x.start - currentXStep).toFixed(2);\n    const XEnd = +(currentZoomRange.x.end + currentXStep).toFixed(2);\n\n    const YStart = +(currentZoomRange.y.start - currentYStep).toFixed(2);\n    const YEnd = +(currentZoomRange.y.end + currentYStep).toFixed(2);\n\n    const isXExceeds = XStart <= axisRange.current.x.start || XEnd >= axisRange.current.x.end;\n    const isYExceeds = YStart <= axisRange.current.y.start || YEnd >= axisRange.current.y.end;\n\n    if (isXExceeds && isYExceeds) {\n      return handleZoomReset();\n    }\n\n    handleZoomChart({\n      x: isXExceeds\n        ? axisRange.current.x\n        : {\n            start: XStart,\n            end: XEnd,\n          },\n      y: isYExceeds\n        ? axisRange.current.y\n        : {\n            start: YStart,\n            end: YEnd,\n          },\n    });\n  };\n\n  const handleZoomReset = () => {\n    setIsZoomed(false);\n    setIsPaneEnabled(false);\n    setIsBrushEnabled(true);\n    chart.dispatchAction({\n      type: 'dataZoom',\n      start: 0,\n      end: 100,\n      rangeMode: ['percent', 'percent'],\n    });\n  };\n\n  const onDataZoom = (evt: DataZoomEvent) => {\n    const isResetEvent = evt.start === 0 && evt.end === 100;\n    const isNativeDataZoom = evt.batch?.[0]?.startValue;\n    setIsZoomed(prev => {\n      if (isNativeDataZoom) return true;\n      if (isResetEvent) {\n        handleSaveAxisRanges();\n      }\n      return !isResetEvent;\n    });\n\n    handleSaveZoomRange();\n  };\n\n  useEffect(() => {\n    if (!chart) return;\n    if (!isZoomed) {\n      handleSaveAxisRanges();\n    }\n\n    if (isNeedInitialOptions) {\n      chart.setOption(\n        {\n          toolbox: {\n            show: true,\n            width: 0,\n            height: 0,\n            feature: {\n              dataZoom: {\n                show: true,\n                icon: null,\n                brushStyle: {\n                  borderWidth: 0,\n                  opacity: 0.1,\n                  color: theme.palette.primary.light,\n                },\n              },\n            },\n          },\n          dataZoom: [\n            {\n              type: 'inside',\n              xAxisIndex: 'all',\n              filterMode: 'none',\n              zoomOnMouseWheel: false,\n              moveOnMouseMove: false,\n            },\n            {\n              type: 'inside',\n              yAxisIndex: 'all',\n              filterMode: 'none',\n              zoomOnMouseWheel: false,\n              moveOnMouseMove: false,\n            },\n          ],\n        },\n        { replaceMerge: 'dataZoom' }\n      );\n      chart.on('dataZoom', onDataZoom);\n      setIsNeedInitialOptions(false);\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }, [chart, isNeedInitialOptions, isZoomed]);\n\n  useEffect(() => {\n    // cursor grab in pane mode works only for canvas renderer\n    const zRender = chart?.getZr();\n    if (zRender) {\n      const canvas = Array.from(zRender.dom.getElementsByTagName('canvas')).at(\n        -1\n      ) as HTMLCanvasElement;\n      if (canvas) {\n        canvas.style.cursor = isPaneEnabled ? 'grab' : isBrushEnabled ? 'crosshair' : 'default';\n      } else {\n        console.error('Canvas not found');\n      }\n    }\n  }, [chart, isPaneEnabled, isBrushEnabled]);\n\n  useEffect(() => {\n    if (!chart) return;\n    chart.setOption({\n      dataZoom: [\n        {\n          type: 'inside',\n          xAxisIndex: 'all',\n          filterMode: 'none',\n          zoomOnMouseWheel: false,\n          moveOnMouseMove: isPaneEnabled,\n        },\n        {\n          type: 'inside',\n          yAxisIndex: 'all',\n          filterMode: 'none',\n          zoomOnMouseWheel: false,\n          moveOnMouseMove: isPaneEnabled,\n        },\n      ],\n    });\n  }, [isPaneEnabled]);\n\n  useEffect(() => {\n    chart?.dispatchAction({\n      type: 'takeGlobalCursor',\n      key: 'dataZoomSelect',\n      dataZoomSelectActive: isBrushEnabled,\n    });\n  }, [isBrushEnabled]);\n\n  const onChartReadyExtended =\n    (childCallback?: (instance: EChartsType) => any) => (instance: EChartsType) => {\n      if (childCallback) {\n        childCallback(instance);\n      }\n      setIsNeedInitialOptions(true);\n      chartRef.current = instance;\n    };\n\n  return (\n    <div className={classnames(classes.container, containerClassName)}>\n      {Children.map(children, (child: ReactECharts) => {\n        const { onChartReady } = child.props;\n        // @ts-ignore\n        return cloneElement(child, {\n          onChartReady: onChartReadyExtended(onChartReady),\n        });\n      })}\n      <Toolbox\n        {...toolboxProps}\n        handleTogglePane={isEnabled => setIsPaneEnabled(isEnabled)}\n        handleToggleBrush={isEnabled => setIsBrushEnabled(isEnabled)}\n        isPaneEnabled={isPaneEnabled}\n        isBrushEnabled={isBrushEnabled}\n        isZoomed={isZoomed}\n        chart={chart}\n        handleZoomReset={handleZoomReset}\n        handleZoomOut={handleZoomOut}\n        handleZoomIn={handleZoomIn}\n        customToolboxContainerClass={classnames(\n          toolboxProps?.customToolboxContainerClass,\n          customToolboxContainerClass\n        )}\n      />\n    </div>\n  );\n};\n\nEChartsWrapper.defaultProps = {\n  onDataZoom: noop,\n};\n\nexport default EChartsWrapper;\n"],"names":["AXIS_ZOOM_STEP_PERCENT","useStyles","makeStyles","container","position","width","height","EChartsWrapper","containerClassName","customToolboxContainerClass","onDataZoomCustom","onDataZoom","toolboxProps","children","classes","chartRef","useRef","chart","current","theme","useTheme","useState","isNeedInitialOptions","setIsNeedInitialOptions","isPaneEnabled","setIsPaneEnabled","isBrushEnabled","setIsBrushEnabled","isZoomed","setIsZoomed","axisRange","currentZoomRange","setCurrentZoomRange","handleZoomChart","range","options","getOption","series","isMultipleAxis","xAxis","length","yAxis","data","Array","isArray","reduce","acc","serie","concat","isDataExists","some","dataItem","x","start","end","y","absoluteXStart","Math","abs","absoluteXEnd","absoluteYStart","absoluteYEnd","yStartPercent","yEndPercent","xStartPercent","xEndPercent","dispatchAction","type","moveOnMouseMove","filterMode","rangeMode","batch","toFixed","dataZoomIndex","handleSaveAxisRanges","xRange","getModel","getComponent","axis","scale","getExtent","yRange","xMin","xMax","yMin","yMax","handleSaveZoomRange","handleZoomIn","targetRange","currentXStep","currentYStep","XStart","XEnd","YStart","YEnd","isXExceeds","isYExceeds","handleZoomOut","handleZoomReset","evt","isResetEvent","isNativeDataZoom","startValue","prev","useEffect","setOption","toolbox","show","feature","dataZoom","icon","brushStyle","borderWidth","opacity","color","palette","primary","light","xAxisIndex","zoomOnMouseWheel","yAxisIndex","replaceMerge","on","key","dataZoomSelectActive","zRender","getZr","canvas","from","dom","getElementsByTagName","at","style","cursor","console","error","onChartReadyExtended","childCallback","instance","_jsxs","classnames","Children","map","child","onChartReady","props","cloneElement","_jsx","isEnabled","defaultProps","noop"],"mappings":";;;;;;;;;;;AAWA,IAAMA,sBAAsB,GAAG,IAAI,CAAA;AAEnC,IAAMC,SAAS,GAAGC,UAAU,CAAC,YAAA;EAAA,OAAO;AAClCC,IAAAA,SAAS,EAAE;AACTC,MAAAA,QAAQ,EAAE,UAAU;AACpBC,MAAAA,KAAK,EAAE,MAAM;AACbC,MAAAA,MAAM,EAAE,MAAA;AACV,KAAA;GACD,CAAA;AAAA,CAAC,CAAC,CAAA;AAEH,IAAMC,cAAqC,GAAG,SAAxCA,cAAqC,CAQrC,IAAA,EAAA;EAAA,IAPJC,kBAAkB,QAAlBA,kBAAkB;AAClBC,IAAAA,2BAA2B,QAA3BA,2BAA2B;AACfC,IAAAA,gBAAgB,QAA5BC,UAAU;AACVC,IAAAA,YAAY,QAAZA,YAAY;AAGZC,IAAAA,QAAQ,QAARA,QAAQ,CAAA;EAER,IAAMC,OAAO,GAAGb,SAAS,EAAE,CAAA;AAC3B,EAAA,IAAMc,QAAQ,GAAGC,MAAM,CAAqB,IAAI,CAAC,CAAA;AACjD,EAAA,IAAMC,KAAK,GAAGF,QAAQ,CAACG,OAAO,CAAA;EAC9B,IAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;EACxB,IAAwDC,SAAAA,GAAAA,QAAQ,CAAC,KAAK,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,SAAA,EAAA,CAAA,CAAA;IAAhEC,oBAAoB,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,uBAAuB,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EACpD,IAA0CF,UAAAA,GAAAA,QAAQ,CAAC,KAAK,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAAlDG,aAAa,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,gBAAgB,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EACtC,IAA4CJ,UAAAA,GAAAA,QAAQ,CAAC,IAAI,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAAnDK,cAAc,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,iBAAiB,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EACxC,IAAgCN,UAAAA,GAAAA,QAAQ,CAAC,KAAK,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAAxCO,QAAQ,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,WAAW,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;AAC5B,EAAA,IAAMC,SAAS,GAAGd,MAAM,CAAmB,IAAI,CAAC,CAAA;EAChD,IAAgDK,UAAAA,GAAAA,QAAQ,CAAmB,IAAI,CAAC;AAAA,IAAA,WAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAAzEU,gBAAgB,GAAA,WAAA,CAAA,CAAA,CAAA;IAAEC,mBAAmB,GAAA,WAAA,CAAA,CAAA,CAAA,CAAA;AAE5C,EAAA,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIC,KAAgB,EAAK;AAAA,IAAA,IAAA,cAAA,EAAA,cAAA,CAAA;AAC5C,IAAA,IAAMC,OAAO,GAAGlB,KAAK,CAACmB,SAAS,EAAE,CAAA;AACjC,IAAA,IAAMC,MAAM,GAAGF,OAAO,CAACE,MAAuC,CAAA;IAC9D,IAAMC,cAAc,GAClB,CAACH,CAAAA,cAAAA,GAAAA,OAAO,CAACI,KAAK,MAAA,IAAA,IAAA,cAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAd,eAAkCC,MAAM,IAAG,CAAC,IAAI,CAAA,CAAA,cAAA,GAACL,OAAO,CAACM,KAAK,mDAAd,cAAkCD,CAAAA,MAAM,IAAG,CAAC,CAAA;IAC9F,IAAI,CAACF,cAAc,EAAE;AACnB,MAAA,IAAMI,IAAI,GACRC,KAAK,CAACC,OAAO,CAACP,MAAM,CAAC,GACjBA,MAAM,CAACQ,MAAM,CAAC,UAACC,GAAG,EAAEC,KAAK,EAAA;AAAA,QAAA,OAAKD,GAAG,CAACE,MAAM,CAACD,KAAK,CAACL,IAAI,CAAC,CAAA;AAAA,OAAA,EAAE,EAAE,CAAC,GACzDL,MAAM,CAACK,IACQ,CAAA;MAErB,IAAMO,YAAY,GAAGP,IAAI,CAACQ,IAAI,CAAC,UAACC,QAAwB,EAAK;AAC3D;AACA,QAAA,IAAIR,KAAK,CAACC,OAAO,CAACO,QAAQ,CAAC,EAAE;AAC3B,UAAA,OACEA,QAAQ,CAAC,CAAC,CAAC,GAAGjB,KAAK,CAACkB,CAAC,CAACC,KAAK,IAC3BF,QAAQ,CAAC,CAAC,CAAC,GAAGjB,KAAK,CAACkB,CAAC,CAACE,GAAG,IACzBH,QAAQ,CAAC,CAAC,CAAC,GAAGjB,KAAK,CAACqB,CAAC,CAACF,KAAK,IAC3BF,QAAQ,CAAC,CAAC,CAAC,GAAGjB,KAAK,CAACqB,CAAC,CAACD,GAAG,CAAA;AAE7B,SAAA;AACA,QAAA,OACEH,QAAQ,CAACC,CAAC,GAAGlB,KAAK,CAACkB,CAAC,CAACC,KAAK,IAC1BF,QAAQ,CAACC,CAAC,GAAGlB,KAAK,CAACkB,CAAC,CAACE,GAAG,IACxBH,QAAQ,CAACI,CAAC,GAAGrB,KAAK,CAACqB,CAAC,CAACF,KAAK,IAC1BF,QAAQ,CAACI,CAAC,GAAGrB,KAAK,CAACqB,CAAC,CAACD,GAAG,CAAA;AAE5B,OAAC,CAAC,CAAA;MAEF,IAAI,CAACL,YAAY,EAAE,OAAA;AACrB,KAAA;IAEA,IAAMO,cAAc,GAAGC,IAAI,CAACC,GAAG,CAACxB,KAAK,CAACkB,CAAC,CAACC,KAAK,GAAGvB,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACC,KAAK,CAAC,GAAG,GAAG,CAAA;IAChF,IAAMM,YAAY,GAAGF,IAAI,CAACC,GAAG,CAACxB,KAAK,CAACkB,CAAC,CAACE,GAAG,GAAGxB,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACC,KAAK,CAAC,GAAG,GAAG,CAAA;IAE5E,IAAMO,cAAc,GAAGH,IAAI,CAACC,GAAG,CAACxB,KAAK,CAACqB,CAAC,CAACF,KAAK,GAAGvB,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACF,KAAK,CAAC,GAAG,GAAG,CAAA;IAChF,IAAMQ,YAAY,GAAGJ,IAAI,CAACC,GAAG,CAACxB,KAAK,CAACqB,CAAC,CAACD,GAAG,GAAGxB,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACF,KAAK,CAAC,GAAG,GAAG,CAAA;IAE5E,IAAMS,aAAa,GACjBF,cAAc,GAAGH,IAAI,CAACC,GAAG,CAAC5B,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACF,KAAK,GAAGvB,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACD,GAAG,CAAC,CAAA;IAChF,IAAMS,WAAW,GACfF,YAAY,GAAGJ,IAAI,CAACC,GAAG,CAAC5B,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACF,KAAK,GAAGvB,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACD,GAAG,CAAC,CAAA;IAE9E,IAAMU,aAAa,GACjBR,cAAc,GAAGC,IAAI,CAACC,GAAG,CAAC5B,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACC,KAAK,GAAGvB,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACE,GAAG,CAAC,CAAA;IAChF,IAAMW,WAAW,GACfN,YAAY,GAAGF,IAAI,CAACC,GAAG,CAAC5B,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACC,KAAK,GAAGvB,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACE,GAAG,CAAC,CAAA;IAE9ErC,KAAK,CAACiD,cAAc,CAAC;AACnBC,MAAAA,IAAI,EAAE,UAAU;AAChBC,MAAAA,eAAe,EAAE5C,aAAa;AAC9B6C,MAAAA,UAAU,EAAE,MAAM;AAClBC,MAAAA,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;AACjCC,MAAAA,KAAK,EAAE,CACL;AAAElB,QAAAA,KAAK,EAAE,CAACW,aAAa,CAACQ,OAAO,CAAC,CAAC,CAAC;AAAElB,QAAAA,GAAG,EAAE,CAACW,WAAW,CAACO,OAAO,CAAC,CAAC,CAAC;AAAEC,QAAAA,aAAa,EAAE,CAAA;AAAE,OAAC,EACpF;AACEpB,QAAAA,KAAK,EAAE,CAACS,aAAa,CAACU,OAAO,CAAC,CAAC,CAAC;AAChClB,QAAAA,GAAG,EAAE,CAACS,WAAW,CAACS,OAAO,CAAC,CAAC,CAAC;AAC5BC,QAAAA,aAAa,EAAE,CAAA;OAChB,CAAA;AAEL,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,GAAS;AAAA,IAAA,IAAA,eAAA,EAAA,qBAAA,EAAA,sBAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,qBAAA,EAAA,sBAAA,EAAA,sBAAA,CAAA;AACjC;IACA,IAAMC,MAAM,GAAG1D,KAAK,KAALA,IAAAA,IAAAA,KAAK,KAALA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,eAAAA,GAAAA,KAAK,CAAE2D,QAAQ,EAAE,MAAA,IAAA,IAAA,eAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,qBAAA,GAAjB,eAAmBC,CAAAA,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,MAAA,IAAA,IAAA,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,sBAAA,GAA3C,qBAA6CC,CAAAA,IAAI,MAAjD,IAAA,IAAA,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,sBAAA,GAAA,sBAAA,CAAmDC,KAAK,MAAA,IAAA,IAAA,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAxD,sBAA0DC,CAAAA,SAAS,EAGjF,CAAA;AACD;IACA,IAAMC,MAAM,GAAGhE,KAAK,KAALA,IAAAA,IAAAA,KAAK,KAALA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,gBAAAA,GAAAA,KAAK,CAAE2D,QAAQ,EAAE,MAAA,IAAA,IAAA,gBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,qBAAA,GAAjB,gBAAmBC,CAAAA,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,MAAA,IAAA,IAAA,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,sBAAA,GAA3C,qBAA6CC,CAAAA,IAAI,MAAjD,IAAA,IAAA,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,sBAAA,GAAA,sBAAA,CAAmDC,KAAK,MAAA,IAAA,IAAA,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAxD,sBAA0DC,CAAAA,SAAS,EAGjF,CAAA;IAED,IAAIL,MAAM,IAAIM,MAAM,EAAE;AACpB,MAAA,IAAA,OAAA,GAAA,cAAA,CAAqBN,MAAM,EAAA,CAAA,CAAA;QAApBO,KAAI,GAAA,OAAA,CAAA,CAAA,CAAA;QAAEC,KAAI,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AACjB,MAAA,IAAA,OAAA,GAAA,cAAA,CAAqBF,MAAM,EAAA,CAAA,CAAA;QAApBG,KAAI,GAAA,OAAA,CAAA,CAAA,CAAA;QAAEC,KAAI,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;MACjBvD,SAAS,CAACZ,OAAO,GAAG;AAClBkC,QAAAA,CAAC,EAAE;AACDC,UAAAA,KAAK,EAAE,CAAC6B,KAAI,CAACV,OAAO,CAAC,CAAC,CAAC;AACvBlB,UAAAA,GAAG,EAAE,CAAC6B,KAAI,CAACX,OAAO,CAAC,CAAC,CAAA;SACrB;AACDjB,QAAAA,CAAC,EAAE;AACDF,UAAAA,KAAK,EAAE,CAAC+B,KAAI,CAACZ,OAAO,CAAC,CAAC,CAAC;AACvBlB,UAAAA,GAAG,EAAE,CAAC+B,KAAI,CAACb,OAAO,CAAC,CAAC,CAAA;AACtB,SAAA;OACD,CAAA;AACH,KAAA;GACD,CAAA;AAED,EAAA,IAAMc,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;AAChC;AACA;AACA;AACA,IAAA,IAAA,sBAAA,GAAqBrE,KAAK,CAAC2D,QAAQ,EAAE,CAACC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,EAAE;AAAA,MAAA,sBAAA,GAAA,cAAA,CAAA,sBAAA,EAAA,CAAA,CAAA;MAA9EI,IAAI,GAAA,sBAAA,CAAA,CAAA,CAAA;MAAEC,IAAI,GAAA,sBAAA,CAAA,CAAA,CAAA,CAAA;AACjB;AACA,IAAA,IAAA,sBAAA,GAAqBpE,KAAK,CAAC2D,QAAQ,EAAE,CAACC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,EAAE;AAAA,MAAA,sBAAA,GAAA,cAAA,CAAA,sBAAA,EAAA,CAAA,CAAA;MAA9EE,IAAI,GAAA,sBAAA,CAAA,CAAA,CAAA;MAAEC,IAAI,GAAA,sBAAA,CAAA,CAAA,CAAA,CAAA;AAEjB,IAAA,IAAMjD,KAAK,GAAG;AACZkB,MAAAA,CAAC,EAAE;AACDC,QAAAA,KAAK,EAAE6B,IAAI;AACX5B,QAAAA,GAAG,EAAE6B,IAAAA;OACN;AACD5B,MAAAA,CAAC,EAAE;AACDF,QAAAA,KAAK,EAAE+B,IAAI;AACX9B,QAAAA,GAAG,EAAE+B,IAAAA;AACP,OAAA;KACD,CAAA;IACDrD,mBAAmB,CAACE,KAAK,CAAC,CAAA;IAC1BxB,gBAAgB,CAACwB,KAAK,CAAC,CAAA;GACxB,CAAA;AAED,EAAA,IAAMqD,YAAY,GAAG,SAAfA,YAAY,GAAe;IAC/B,IAAI,CAAC3D,QAAQ,EAAE;AACb8C,MAAAA,oBAAoB,EAAE,CAAA;MACtB7C,WAAW,CAAC,IAAI,CAAC,CAAA;AACnB,KAAA;AACA,IAAA,IAAM2D,WAAW,GAAGzD,gBAAgB,IAAID,SAAS,CAACZ,OAAO,CAAA;AAEzD,IAAA,IAAMuE,YAAY,GAAGhC,IAAI,CAACC,GAAG,CAAC8B,WAAW,CAACpC,CAAC,CAACC,KAAK,GAAGmC,WAAW,CAACpC,CAAC,CAACE,GAAG,CAAC,GAAGtD,sBAAsB,CAAA;AAC/F,IAAA,IAAM0F,YAAY,GAAGjC,IAAI,CAACC,GAAG,CAAC8B,WAAW,CAACjC,CAAC,CAACF,KAAK,GAAGmC,WAAW,CAACjC,CAAC,CAACD,GAAG,CAAC,GAAGtD,sBAAsB,CAAA;AAE/F,IAAA,IAAM2F,MAAM,GAAG,CAAC,CAACH,WAAW,CAACpC,CAAC,CAACC,KAAK,GAAGoC,YAAY,EAAEjB,OAAO,CAAC,CAAC,CAAC,CAAA;AAC/D,IAAA,IAAMoB,IAAI,GAAG,CAAC,CAACJ,WAAW,CAACpC,CAAC,CAACE,GAAG,GAAGmC,YAAY,EAAEjB,OAAO,CAAC,CAAC,CAAC,CAAA;AAE3D,IAAA,IAAMqB,MAAM,GAAG,CAAC,CAACL,WAAW,CAACjC,CAAC,CAACF,KAAK,GAAGqC,YAAY,EAAElB,OAAO,CAAC,CAAC,CAAC,CAAA;AAC/D,IAAA,IAAMsB,IAAI,GAAG,CAAC,CAACN,WAAW,CAACjC,CAAC,CAACD,GAAG,GAAGoC,YAAY,EAAElB,OAAO,CAAC,CAAC,CAAC,CAAA;AAC3D,IAAA,IAAMuB,UAAU,GAAGJ,MAAM,IAAIC,IAAI,CAAA;AACjC,IAAA,IAAMI,UAAU,GAAGH,MAAM,IAAIC,IAAI,CAAA;AAEjC7D,IAAAA,eAAe,CAAC;AACdmB,MAAAA,CAAC,EAAE;QACDC,KAAK,EAAE0C,UAAU,GAAGP,WAAW,CAACpC,CAAC,CAACC,KAAK,GAAGsC,MAAM;QAChDrC,GAAG,EAAEyC,UAAU,GAAGP,WAAW,CAACpC,CAAC,CAACE,GAAG,GAAGsC,IAAAA;OACvC;AACDrC,MAAAA,CAAC,EAAE;QACDF,KAAK,EAAE2C,UAAU,GAAGR,WAAW,CAACjC,CAAC,CAACF,KAAK,GAAGwC,MAAM;QAChDvC,GAAG,EAAE0C,UAAU,GAAGR,WAAW,CAACjC,CAAC,CAACD,GAAG,GAAGwC,IAAAA;AACxC,OAAA;AACF,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,IAAMG,aAAa,GAAG,SAAhBA,aAAa,GAAe;IAChC,IAAMR,YAAY,GAChBhC,IAAI,CAACC,GAAG,CAAC5B,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACC,KAAK,GAAGvB,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACE,GAAG,CAAC,GAAGtD,sBAAsB,CAAA;IACxF,IAAM0F,YAAY,GAChBjC,IAAI,CAACC,GAAG,CAAC5B,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACF,KAAK,GAAGvB,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACD,GAAG,CAAC,GAAGtD,sBAAsB,CAAA;AAExF,IAAA,IAAM2F,MAAM,GAAG,CAAC,CAAC5D,gBAAgB,CAACqB,CAAC,CAACC,KAAK,GAAGoC,YAAY,EAAEjB,OAAO,CAAC,CAAC,CAAC,CAAA;AACpE,IAAA,IAAMoB,IAAI,GAAG,CAAC,CAAC7D,gBAAgB,CAACqB,CAAC,CAACE,GAAG,GAAGmC,YAAY,EAAEjB,OAAO,CAAC,CAAC,CAAC,CAAA;AAEhE,IAAA,IAAMqB,MAAM,GAAG,CAAC,CAAC9D,gBAAgB,CAACwB,CAAC,CAACF,KAAK,GAAGqC,YAAY,EAAElB,OAAO,CAAC,CAAC,CAAC,CAAA;AACpE,IAAA,IAAMsB,IAAI,GAAG,CAAC,CAAC/D,gBAAgB,CAACwB,CAAC,CAACD,GAAG,GAAGoC,YAAY,EAAElB,OAAO,CAAC,CAAC,CAAC,CAAA;IAEhE,IAAMuB,UAAU,GAAGJ,MAAM,IAAI7D,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACC,KAAK,IAAIuC,IAAI,IAAI9D,SAAS,CAACZ,OAAO,CAACkC,CAAC,CAACE,GAAG,CAAA;IACzF,IAAM0C,UAAU,GAAGH,MAAM,IAAI/D,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACF,KAAK,IAAIyC,IAAI,IAAIhE,SAAS,CAACZ,OAAO,CAACqC,CAAC,CAACD,GAAG,CAAA;IAEzF,IAAIyC,UAAU,IAAIC,UAAU,EAAE;AAC5B,MAAA,OAAOE,eAAe,EAAE,CAAA;AAC1B,KAAA;AAEAjE,IAAAA,eAAe,CAAC;MACdmB,CAAC,EAAE2C,UAAU,GACTjE,SAAS,CAACZ,OAAO,CAACkC,CAAC,GACnB;AACEC,QAAAA,KAAK,EAAEsC,MAAM;AACbrC,QAAAA,GAAG,EAAEsC,IAAAA;OACN;MACLrC,CAAC,EAAEyC,UAAU,GACTlE,SAAS,CAACZ,OAAO,CAACqC,CAAC,GACnB;AACEF,QAAAA,KAAK,EAAEwC,MAAM;AACbvC,QAAAA,GAAG,EAAEwC,IAAAA;AACP,OAAA;AACN,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,IAAMI,eAAe,GAAG,SAAlBA,eAAe,GAAS;IAC5BrE,WAAW,CAAC,KAAK,CAAC,CAAA;IAClBJ,gBAAgB,CAAC,KAAK,CAAC,CAAA;IACvBE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACvBV,KAAK,CAACiD,cAAc,CAAC;AACnBC,MAAAA,IAAI,EAAE,UAAU;AAChBd,MAAAA,KAAK,EAAE,CAAC;AACRC,MAAAA,GAAG,EAAE,GAAG;AACRgB,MAAAA,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,CAAA;AAClC,KAAC,CAAC,CAAA;GACH,CAAA;AAED,EAAA,IAAM3D,UAAU,GAAG,SAAbA,UAAU,CAAIwF,GAAkB,EAAK;AAAA,IAAA,IAAA,UAAA,EAAA,WAAA,CAAA;AACzC,IAAA,IAAMC,YAAY,GAAGD,GAAG,CAAC9C,KAAK,KAAK,CAAC,IAAI8C,GAAG,CAAC7C,GAAG,KAAK,GAAG,CAAA;IACvD,IAAM+C,gBAAgB,GAAGF,CAAAA,UAAAA,GAAAA,GAAG,CAAC5B,KAAK,MAAT,IAAA,IAAA,UAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,WAAA,GAAA,UAAA,CAAY,CAAC,CAAC,MAAd,IAAA,IAAA,WAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAgB+B,UAAU,CAAA;IACnDzE,WAAW,CAAC,UAAA0E,IAAI,EAAI;MAClB,IAAIF,gBAAgB,EAAE,OAAO,IAAI,CAAA;AACjC,MAAA,IAAID,YAAY,EAAE;AAChB1B,QAAAA,oBAAoB,EAAE,CAAA;AACxB,OAAA;AACA,MAAA,OAAO,CAAC0B,YAAY,CAAA;AACtB,KAAC,CAAC,CAAA;AAEFd,IAAAA,mBAAmB,EAAE,CAAA;GACtB,CAAA;AAEDkB,EAAAA,SAAS,CAAC,YAAM;IACd,IAAI,CAACvF,KAAK,EAAE,OAAA;IACZ,IAAI,CAACW,QAAQ,EAAE;AACb8C,MAAAA,oBAAoB,EAAE,CAAA;AACxB,KAAA;AAEA,IAAA,IAAIpD,oBAAoB,EAAE;MACxBL,KAAK,CAACwF,SAAS,CACb;AACEC,QAAAA,OAAO,EAAE;AACPC,UAAAA,IAAI,EAAE,IAAI;AACVtG,UAAAA,KAAK,EAAE,CAAC;AACRC,UAAAA,MAAM,EAAE,CAAC;AACTsG,UAAAA,OAAO,EAAE;AACPC,YAAAA,QAAQ,EAAE;AACRF,cAAAA,IAAI,EAAE,IAAI;AACVG,cAAAA,IAAI,EAAE,IAAI;AACVC,cAAAA,UAAU,EAAE;AACVC,gBAAAA,WAAW,EAAE,CAAC;AACdC,gBAAAA,OAAO,EAAE,GAAG;AACZC,gBAAAA,KAAK,EAAE/F,KAAK,CAACgG,OAAO,CAACC,OAAO,CAACC,KAAAA;AAC/B,eAAA;AACF,aAAA;AACF,WAAA;SACD;AACDR,QAAAA,QAAQ,EAAE,CACR;AACE1C,UAAAA,IAAI,EAAE,QAAQ;AACdmD,UAAAA,UAAU,EAAE,KAAK;AACjBjD,UAAAA,UAAU,EAAE,MAAM;AAClBkD,UAAAA,gBAAgB,EAAE,KAAK;AACvBnD,UAAAA,eAAe,EAAE,KAAA;AACnB,SAAC,EACD;AACED,UAAAA,IAAI,EAAE,QAAQ;AACdqD,UAAAA,UAAU,EAAE,KAAK;AACjBnD,UAAAA,UAAU,EAAE,MAAM;AAClBkD,UAAAA,gBAAgB,EAAE,KAAK;AACvBnD,UAAAA,eAAe,EAAE,KAAA;SAClB,CAAA;AAEL,OAAC,EACD;AAAEqD,QAAAA,YAAY,EAAE,UAAA;AAAW,OAAC,CAC7B,CAAA;AACDxG,MAAAA,KAAK,CAACyG,EAAE,CAAC,UAAU,EAAE/G,UAAU,CAAC,CAAA;MAChCY,uBAAuB,CAAC,KAAK,CAAC,CAAA;MAC9BN,KAAK,CAACiD,cAAc,CAAC;AACnBC,QAAAA,IAAI,EAAE,kBAAkB;AACxBwD,QAAAA,GAAG,EAAE,gBAAgB;AACrBC,QAAAA,oBAAoB,EAAE,IAAA;AACxB,OAAC,CAAC,CAAA;AACJ,KAAA;GACD,EAAE,CAAC3G,KAAK,EAAEK,oBAAoB,EAAEM,QAAQ,CAAC,CAAC,CAAA;AAE3C4E,EAAAA,SAAS,CAAC,YAAM;AACd;IACA,IAAMqB,OAAO,GAAG5G,KAAK,KAAA,IAAA,IAALA,KAAK,KAALA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,KAAK,CAAE6G,KAAK,EAAE,CAAA;AAC9B,IAAA,IAAID,OAAO,EAAE;MACX,IAAME,MAAM,GAAGpF,KAAK,CAACqF,IAAI,CAACH,OAAO,CAACI,GAAG,CAACC,oBAAoB,CAAC,QAAQ,CAAC,CAAC,CAACC,EAAE,CACtE,CAAC,CAAC,CACkB,CAAA;AACtB,MAAA,IAAIJ,MAAM,EAAE;AACVA,QAAAA,MAAM,CAACK,KAAK,CAACC,MAAM,GAAG7G,aAAa,GAAG,MAAM,GAAGE,cAAc,GAAG,WAAW,GAAG,SAAS,CAAA;AACzF,OAAC,MAAM;AACL4G,QAAAA,OAAO,CAACC,KAAK,CAAC,kBAAkB,CAAC,CAAA;AACnC,OAAA;AACF,KAAA;GACD,EAAE,CAACtH,KAAK,EAAEO,aAAa,EAAEE,cAAc,CAAC,CAAC,CAAA;AAE1C8E,EAAAA,SAAS,CAAC,YAAM;IACd,IAAI,CAACvF,KAAK,EAAE,OAAA;IACZA,KAAK,CAACwF,SAAS,CAAC;AACdI,MAAAA,QAAQ,EAAE,CACR;AACE1C,QAAAA,IAAI,EAAE,QAAQ;AACdmD,QAAAA,UAAU,EAAE,KAAK;AACjBjD,QAAAA,UAAU,EAAE,MAAM;AAClBkD,QAAAA,gBAAgB,EAAE,KAAK;AACvBnD,QAAAA,eAAe,EAAE5C,aAAAA;AACnB,OAAC,EACD;AACE2C,QAAAA,IAAI,EAAE,QAAQ;AACdqD,QAAAA,UAAU,EAAE,KAAK;AACjBnD,QAAAA,UAAU,EAAE,MAAM;AAClBkD,QAAAA,gBAAgB,EAAE,KAAK;AACvBnD,QAAAA,eAAe,EAAE5C,aAAAA;OAClB,CAAA;AAEL,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEnBgF,EAAAA,SAAS,CAAC,YAAM;AACdvF,IAAAA,KAAK,aAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAALA,KAAK,CAAEiD,cAAc,CAAC;AACpBC,MAAAA,IAAI,EAAE,kBAAkB;AACxBwD,MAAAA,GAAG,EAAE,gBAAgB;AACrBC,MAAAA,oBAAoB,EAAElG,cAAAA;AACxB,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACA,cAAc,CAAC,CAAC,CAAA;AAEpB,EAAA,IAAM8G,oBAAoB,GACxB,SADIA,oBAAoB,CACvBC,aAA8C,EAAA;IAAA,OAAK,UAACC,QAAqB,EAAK;AAC7E,MAAA,IAAID,aAAa,EAAE;QACjBA,aAAa,CAACC,QAAQ,CAAC,CAAA;AACzB,OAAA;MACAnH,uBAAuB,CAAC,IAAI,CAAC,CAAA;MAC7BR,QAAQ,CAACG,OAAO,GAAGwH,QAAQ,CAAA;KAC5B,CAAA;AAAA,GAAA,CAAA;EAEH,oBACEC,IAAA,CAAA,KAAA,EAAA;IAAK,SAAS,EAAEC,UAAU,CAAC9H,OAAO,CAACX,SAAS,EAAEK,kBAAkB,CAAE;IAAA,QAC/DqI,EAAAA,CAAAA,QAAQ,CAACC,GAAG,CAACjI,QAAQ,EAAE,UAACkI,KAAmB,EAAK;AAC/C,MAAA,IAAQC,YAAY,GAAKD,KAAK,CAACE,KAAK,CAA5BD,YAAY,CAAA;AACpB;MACA,OAAOE,YAAY,CAACH,KAAK,EAAE;QACzBC,YAAY,EAAER,oBAAoB,CAACQ,YAAY,CAAA;AACjD,OAAC,CAAC,CAAA;AACJ,KAAC,CAAC,eACFG,GAAC,CAAA,OAAO,kCACFvI,YAAY,CAAA,EAAA,EAAA,EAAA;MAChB,gBAAgB,EAAE,0BAAAwI,SAAS,EAAA;QAAA,OAAI3H,gBAAgB,CAAC2H,SAAS,CAAC,CAAA;OAAC;MAC3D,iBAAiB,EAAE,2BAAAA,SAAS,EAAA;QAAA,OAAIzH,iBAAiB,CAACyH,SAAS,CAAC,CAAA;OAAC;AAC7D,MAAA,aAAa,EAAE5H,aAAc;AAC7B,MAAA,cAAc,EAAEE,cAAe;AAC/B,MAAA,QAAQ,EAAEE,QAAS;AACnB,MAAA,KAAK,EAAEX,KAAM;AACb,MAAA,eAAe,EAAEiF,eAAgB;AACjC,MAAA,aAAa,EAAED,aAAc;AAC7B,MAAA,YAAY,EAAEV,YAAa;MAC3B,2BAA2B,EAAEqD,UAAU,CACrChI,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZA,YAAY,CAAEH,2BAA2B,EACzCA,2BAA2B,CAAA;KAE7B,CAAA,CAAA,CAAA;GACE,CAAA,CAAA;AAEV,EAAC;AAEDF,cAAc,CAAC8I,YAAY,GAAG;AAC5B1I,EAAAA,UAAU,EAAE2I,IAAAA;AACd,CAAC;;;;"}

package/components/EChartsWrapper/components/Toolbox/Toolbox.js

@@ -0,0 +1,168 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import classNames from 'classnames';
+import { useState, useCallback, useEffect } from 'react';
+import { makeStyles } from '@material-ui/core';
+import { UndoIcon, FiveIcon, MoveInIcon, PlusIcon, MinusIcon } from '../../../../icons/iconParkIcons.js';
+import '../../../../icons/customIcons/icons/AddMessage.js';
+import '../../../../icons/customIcons/icons/Attention.js';
+import '../../../../icons/customIcons/icons/Collapse.js';
+import '../../../../icons/customIcons/icons/Dashboard.js';
+import '../../../../icons/customIcons/icons/Expand.js';
+import '../../../../icons/customIcons/icons/FolderClosed.js';
+import '../../../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../../../icons/customIcons/icons/FolderOpened.js';
+import '../../../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../../../icons/customIcons/icons/LessOrEqual.js';
+import '../../../../icons/customIcons/icons/Search.js';
+import '../../../../icons/customIcons/icons/Wellhub.js';
+import '../../../../icons/customIcons/icons/MultiRuler.js';
+import '../../../../icons/customIcons/icons/Checkbox.js';
+import '../../../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../../../icons/customIcons/icons/Radio.js';
+import '../../../../icons/customIcons/icons/RadioChecked.js';
+import '../../../../icons/customIcons/icons/SimulFrac.js';
+import '../../../../icons/customIcons/icons/ZipperFrac.js';
+import '../../../../icons/customIcons/icons/CautionFilled.js';
+import '../../../../icons/customIcons/icons/MoreApp.js';
+import '../../../../icons/customIcons/icons/Pad.js';
+import '../../../../icons/customIcons/icons/Gap.js';
+import { ToolboxButton } from './ToolboxButton.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var useStyles = makeStyles(function (_ref) {
+  var palette = _ref.palette;
+  return {
+    toolboxContainer: {
+      position: 'absolute',
+      zIndex: 1,
+      right: function right(_ref2) {
+        var _right = _ref2.right;
+        return _right + 7;
+      },
+      bottom: function bottom(_ref3) {
+        var _bottom = _ref3.bottom;
+        return _bottom + 8;
+      },
+      width: 30,
+      height: 'fit-content',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-end',
+      gap: '4px 0'
+    },
+    activeIcon: {
+      color: "".concat(palette.primary.main, " !important")
+    },
+    tooltipButton: {
+      width: 30,
+      height: 30,
+      backgroundColor: palette.background.b6,
+      minWidth: 0
+    },
+    disabledButton: {
+      cursor: 'not-allowed',
+      color: "".concat(palette.primary.text6, " !important"),
+      backgroundColor: "".concat(palette.background.b6, " !important")
+    }
+  };
+});
+var Toolbox = function Toolbox(_ref4) {
+  var _controls$resetZoom, _controls$resetZoom2, _controls$pane, _controls$pane2, _controls$brush, _controls$brush2, _controls$zoomIn, _controls$zoomIn2, _controls$zoomOut, _controls$zoomOut2;
+  var isPaneEnabled = _ref4.isPaneEnabled,
+    handleTogglePane = _ref4.handleTogglePane,
+    handleToggleBrush = _ref4.handleToggleBrush,
+    isBrushEnabled = _ref4.isBrushEnabled,
+    isZoomed = _ref4.isZoomed,
+    chart = _ref4.chart,
+    customToolboxContainerClass = _ref4.customToolboxContainerClass,
+    handleZoomReset = _ref4.handleZoomReset,
+    handleZoomOut = _ref4.handleZoomOut,
+    handleZoomIn = _ref4.handleZoomIn,
+    controls = _ref4.controls;
+  var _useState = useState({
+      bottom: 0,
+      right: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    chartGrid = _useState2[0],
+    setChartGrid = _useState2[1];
+  var classes = useStyles({
+    bottom: chartGrid.bottom,
+    right: chartGrid.right
+  });
+  var handleSaveGrid = useCallback(function () {
+    var _chart$getOption, _chart$getOption$grid, _chart$getOption$grid2, _chart$getOption2, _chart$getOption2$gri, _chart$getOption2$gri2;
+    var chartGridOptionBottom = chart === null || chart === void 0 ? void 0 : (_chart$getOption = chart.getOption()) === null || _chart$getOption === void 0 ? void 0 : (_chart$getOption$grid = _chart$getOption.grid) === null || _chart$getOption$grid === void 0 ? void 0 : (_chart$getOption$grid2 = _chart$getOption$grid[0]) === null || _chart$getOption$grid2 === void 0 ? void 0 : _chart$getOption$grid2.bottom;
+    var chartGridOptionRight = chart === null || chart === void 0 ? void 0 : (_chart$getOption2 = chart.getOption()) === null || _chart$getOption2 === void 0 ? void 0 : (_chart$getOption2$gri = _chart$getOption2.grid) === null || _chart$getOption2$gri === void 0 ? void 0 : (_chart$getOption2$gri2 = _chart$getOption2$gri[0]) === null || _chart$getOption2$gri2 === void 0 ? void 0 : _chart$getOption2$gri2.right;
+    if (chartGridOptionBottom !== chartGrid.bottom || chartGridOptionRight !== chartGrid.right) {
+      setChartGrid({
+        bottom: +chartGridOptionBottom,
+        right: +chartGridOptionRight
+      });
+    }
+  }, [chartGrid, chart]);
+  useEffect(function () {
+    if (chart && !chartGrid.bottom && !chartGrid.right) {
+      chart.on('rendered', handleSaveGrid);
+    }
+  }, [chart]);
+  var handlePaneClick = function handlePaneClick() {
+    handleTogglePane(!isPaneEnabled);
+    handleToggleBrush(false);
+  };
+  var handleBrushClick = function handleBrushClick() {
+    handleToggleBrush(!isBrushEnabled);
+    handleTogglePane(false);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(classes.toolboxContainer, customToolboxContainerClass),
+    children: [isZoomed && /*#__PURE__*/jsx(ToolboxButton, {
+      icon: /*#__PURE__*/jsx(UndoIcon, {
+        size: "small"
+      }),
+      title: "Reset Zoom",
+      onClick: handleZoomReset,
+      disabled: controls === null || controls === void 0 ? void 0 : (_controls$resetZoom = controls.resetZoom) === null || _controls$resetZoom === void 0 ? void 0 : _controls$resetZoom.disabled,
+      className: classNames(classes.tooltipButton, _defineProperty({}, classes.disabledButton, controls === null || controls === void 0 ? void 0 : (_controls$resetZoom2 = controls.resetZoom) === null || _controls$resetZoom2 === void 0 ? void 0 : _controls$resetZoom2.disabled))
+    }), /*#__PURE__*/jsx(ToolboxButton, {
+      icon: /*#__PURE__*/jsx(FiveIcon, {
+        className: classNames(isPaneEnabled && classes.activeIcon),
+        size: "small"
+      }),
+      onClick: handlePaneClick,
+      title: "Pan",
+      disabled: !isZoomed || (controls === null || controls === void 0 ? void 0 : (_controls$pane = controls.pane) === null || _controls$pane === void 0 ? void 0 : _controls$pane.disabled),
+      className: classNames(classes.tooltipButton, _defineProperty({}, classes.disabledButton, !isZoomed || (controls === null || controls === void 0 ? void 0 : (_controls$pane2 = controls.pane) === null || _controls$pane2 === void 0 ? void 0 : _controls$pane2.disabled)))
+    }), /*#__PURE__*/jsx(ToolboxButton, {
+      icon: /*#__PURE__*/jsx(MoveInIcon, {
+        className: classNames(isBrushEnabled && classes.activeIcon),
+        size: "small"
+      }),
+      onClick: handleBrushClick,
+      title: "Drag To Zoom",
+      disabled: controls === null || controls === void 0 ? void 0 : (_controls$brush = controls.brush) === null || _controls$brush === void 0 ? void 0 : _controls$brush.disabled,
+      className: classNames(classes.tooltipButton, _defineProperty({}, classes.disabledButton, controls === null || controls === void 0 ? void 0 : (_controls$brush2 = controls.brush) === null || _controls$brush2 === void 0 ? void 0 : _controls$brush2.disabled))
+    }), /*#__PURE__*/jsx(ToolboxButton, {
+      icon: /*#__PURE__*/jsx(PlusIcon, {
+        size: "small"
+      }),
+      onClick: handleZoomIn,
+      title: "Zoom In",
+      disabled: controls === null || controls === void 0 ? void 0 : (_controls$zoomIn = controls.zoomIn) === null || _controls$zoomIn === void 0 ? void 0 : _controls$zoomIn.disabled,
+      className: classNames(classes.tooltipButton, _defineProperty({}, classes.disabledButton, controls === null || controls === void 0 ? void 0 : (_controls$zoomIn2 = controls.zoomIn) === null || _controls$zoomIn2 === void 0 ? void 0 : _controls$zoomIn2.disabled))
+    }), /*#__PURE__*/jsx(ToolboxButton, {
+      icon: /*#__PURE__*/jsx(MinusIcon, {
+        size: "small"
+      }),
+      onClick: handleZoomOut,
+      title: "Zoom Out",
+      disabled: !isZoomed || (controls === null || controls === void 0 ? void 0 : (_controls$zoomOut = controls.zoomOut) === null || _controls$zoomOut === void 0 ? void 0 : _controls$zoomOut.disabled),
+      className: classNames(classes.tooltipButton, _defineProperty({}, classes.disabledButton, !isZoomed || (controls === null || controls === void 0 ? void 0 : (_controls$zoomOut2 = controls.zoomOut) === null || _controls$zoomOut2 === void 0 ? void 0 : _controls$zoomOut2.disabled)))
+    })]
+  });
+};
+
+export { Toolbox };
+//# sourceMappingURL=Toolbox.js.map

package/components/EChartsWrapper/components/Toolbox/ToolboxButton.js

@@ -0,0 +1,24 @@
+import { Tooltip, Button } from '@material-ui/core';
+import { jsx } from 'react/jsx-runtime';
+
+var ToolboxButton = function ToolboxButton(_ref) {
+  var icon = _ref.icon,
+    onClick = _ref.onClick,
+    title = _ref.title,
+    placement = _ref.placement,
+    disabled = _ref.disabled,
+    className = _ref.className;
+  return /*#__PURE__*/jsx(Tooltip, {
+    title: disabled ? '' : title,
+    placement: placement || 'left',
+    children: /*#__PURE__*/jsx(Button, {
+      className: className,
+      onClick: !disabled ? onClick : null,
+      disableRipple: disabled,
+      children: icon
+    })
+  });
+};
+
+export { ToolboxButton };
+//# sourceMappingURL=ToolboxButton.js.map

package/components/EChartsWrapper/components/Toolbox/ToolboxButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolboxButton.js","sources":["../../../../../src/components/EChartsWrapper/components/Toolbox/ToolboxButton.tsx"],"sourcesContent":["import { FunctionComponent } from 'react';\nimport { Button, Tooltip } from '@material-ui/core';\nimport { ToolboxButtonProps } from '../../types';\n\nexport const ToolboxButton: FunctionComponent<ToolboxButtonProps> = ({\n  icon,\n  onClick,\n  title,\n  placement,\n  disabled,\n  className,\n}) => {\n  return (\n    <Tooltip title={disabled ? '' : title} placement={placement || 'left'}>\n      <Button className={className} onClick={!disabled ? onClick : null} disableRipple={disabled}>\n        {icon}\n      </Button>\n    </Tooltip>\n  );\n};\n"],"names":["ToolboxButton","icon","onClick","title","placement","disabled","className","_jsx"],"mappings":";;;AAIaA,IAAAA,aAAoD,GAAG,SAAvDA,aAAoD,CAO3D,IAAA,EAAA;EAAA,IANJC,IAAI,QAAJA,IAAI;AACJC,IAAAA,OAAO,QAAPA,OAAO;AACPC,IAAAA,KAAK,QAALA,KAAK;AACLC,IAAAA,SAAS,QAATA,SAAS;AACTC,IAAAA,QAAQ,QAARA,QAAQ;AACRC,IAAAA,SAAS,QAATA,SAAS,CAAA;AAET,EAAA,oBACEC,IAAC,OAAO,EAAA;AAAC,IAAA,KAAK,EAAEF,QAAQ,GAAG,EAAE,GAAGF,KAAM;IAAC,SAAS,EAAEC,SAAS,IAAI,MAAO;AAAA,IAAA,QAAA,eACpEG,IAAC,MAAM,EAAA;AAAC,MAAA,SAAS,EAAED,SAAU;AAAC,MAAA,OAAO,EAAE,CAACD,QAAQ,GAAGH,OAAO,GAAG,IAAK;AAAC,MAAA,aAAa,EAAEG,QAAS;MAAA,QACxFJ,EAAAA,IAAAA;AAAI,KAAA,CAAA;GAEC,CAAA,CAAA;AAEd;;;;"}