@corva/ui 3.1.0-rc.5 → 3.1.0

package/components/EChartsWrapper/EChartsWrapper.js

@@ -1,343 +1 @@
-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
+import{__assign as t}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useRef as n,useState as r,useEffect as a,Children as i,cloneElement as d}from"react";import{noop as s}from"lodash";import{makeStyles as l,useTheme as u}from"@material-ui/core";import c from"classnames";import{Toolbox as x}from"./components/Toolbox/Toolbox.js";var m=l((function(){return{container:{position:"relative",width:"100%",height:"100%"}}})),y=function(s){var l=s.containerClassName,y=s.customToolboxContainerClass,v=s.onDataZoom,h=s.toolboxProps,f=s.children,p=m(),M=n(null),b=M.current,g=u(),A=r(!1),Z=A[0],C=A[1],F=r(!1),O=F[0],T=F[1],E=r(!0),I=E[0],S=E[1],W=r(!1),k=W[0],w=W[1],z=n(null),P=r(null),j=P[0],B=P[1],N=function(t){var e,o,n=b.getOption(),r=n.series;if(!((null===(e=n.xAxis)||void 0===e?void 0:e.length)>1||(null===(o=n.yAxis)||void 0===o?void 0:o.length)>1)&&!(Array.isArray(r)?r.reduce((function(t,e){return t.concat(e.data)}),[]):r.data).some((function(e){return Array.isArray(e)?e[0]>t.x.start&&e[0]<t.x.end&&e[1]>t.y.start&&e[1]<t.y.end:e.x>t.x.start&&e.x<t.x.end&&e.y>t.y.start&&e.y<t.y.end})))return;var a=100*Math.abs(t.x.start-z.current.x.start),i=100*Math.abs(t.x.end-z.current.x.start),d=100*Math.abs(t.y.start-z.current.y.start),s=100*Math.abs(t.y.end-z.current.y.start),l=d/Math.abs(z.current.y.start-z.current.y.end),u=s/Math.abs(z.current.y.start-z.current.y.end),c=a/Math.abs(z.current.x.start-z.current.x.end),x=i/Math.abs(z.current.x.start-z.current.x.end);b.dispatchAction({type:"dataZoom",moveOnMouseMove:O,filterMode:"none",rangeMode:["percent","percent"],batch:[{start:+c.toFixed(2),end:+x.toFixed(2),dataZoomIndex:0},{start:+l.toFixed(2),end:+u.toFixed(2),dataZoomIndex:1}]})},R=function(){var t,e,o,n,r,a,i,d,s=null===(n=null===(o=null===(e=null===(t=null==b?void 0:b.getModel())||void 0===t?void 0:t.getComponent("xAxis",0))||void 0===e?void 0:e.axis)||void 0===o?void 0:o.scale)||void 0===n?void 0:n.getExtent(),l=null===(d=null===(i=null===(a=null===(r=null==b?void 0:b.getModel())||void 0===r?void 0:r.getComponent("yAxis",0))||void 0===a?void 0:a.axis)||void 0===i?void 0:i.scale)||void 0===d?void 0:d.getExtent();if(s&&l){var u=s[0],c=s[1],x=l[0],m=l[1];z.current={x:{start:+u.toFixed(2),end:+c.toFixed(2)},y:{start:+x.toFixed(2),end:+m.toFixed(2)}}}},D=function(){w(!1),T(!1),S(!0),b.dispatchAction({type:"dataZoom",start:0,end:100,rangeMode:["percent","percent"]})},G=function(t){var e,o,n=0===t.start&&100===t.end,r=null===(o=null===(e=t.batch)||void 0===e?void 0:e[0])||void 0===o?void 0:o.startValue;w((function(t){return!!r||(n&&R(),!n)})),function(){var t=b.getModel().getComponent("yAxis",0).axis.scale.getExtent(),e=t[0],o=t[1],n=b.getModel().getComponent("xAxis",0).axis.scale.getExtent(),r={x:{start:n[0],end:n[1]},y:{start:e,end:o}};B(r),v(r)}()};a((function(){b&&(k||R(),Z&&(b.setOption({toolbox:{show:!0,width:0,height:0,feature:{dataZoom:{show:!0,icon:null,brushStyle:{borderWidth:0,opacity:.1,color:g.palette.primary.light}}}},dataZoom:[{type:"inside",xAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:!1},{type:"inside",yAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:!1}]},{replaceMerge:"dataZoom"}),b.on("dataZoom",G),C(!1),b.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0})))}),[b,Z,k]),a((function(){var t=null==b?void 0:b.getZr();if(t){var e=Array.from(t.dom.getElementsByTagName("canvas")).at(-1);e?e.style.cursor=O?"grab":I?"crosshair":"default":console.error("Canvas not found")}}),[b,O,I]),a((function(){b&&b.setOption({dataZoom:[{type:"inside",xAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:O},{type:"inside",yAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:O}]})}),[O]),a((function(){null==b||b.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:I})}),[I]);return e("div",{className:c(p.container,l),children:[i.map(f,(function(t){var e,o=t.props.onChartReady;return d(t,{onChartReady:(e=o,function(t){e&&e(t),C(!0),M.current=t})})})),o(x,t({},h,{handleTogglePane:function(t){return T(t)},handleToggleBrush:function(t){return S(t)},isPaneEnabled:O,isBrushEnabled:I,isZoomed:k,chart:b,handleZoomReset:D,handleZoomOut:function(){var t=.05*Math.abs(z.current.x.start-z.current.x.end),e=.05*Math.abs(z.current.y.start-z.current.y.end),o=+(j.x.start-t).toFixed(2),n=+(j.x.end+t).toFixed(2),r=+(j.y.start-e).toFixed(2),a=+(j.y.end+e).toFixed(2),i=o<=z.current.x.start||n>=z.current.x.end,d=r<=z.current.y.start||a>=z.current.y.end;if(i&&d)return D();N({x:i?z.current.x:{start:o,end:n},y:d?z.current.y:{start:r,end:a}})},handleZoomIn:function(){k||(R(),w(!0));var t=j||z.current,e=.05*Math.abs(t.x.start-t.x.end),o=.05*Math.abs(t.y.start-t.y.end),n=+(t.x.start+e).toFixed(2),r=+(t.x.end-e).toFixed(2),a=+(t.y.start+o).toFixed(2),i=+(t.y.end-o).toFixed(2),d=n>=r,s=a>=i;N({x:{start:d?t.x.start:n,end:d?t.x.end:r},y:{start:s?t.y.start:a,end:s?t.y.end:i}})},customToolboxContainerClass:c(null==h?void 0:h.customToolboxContainerClass,y)}))]})};y.defaultProps={onDataZoom:s};export{y as default};

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

@@ -1,168 +1 @@
-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
+import{jsxs as o,jsx as i}from"react/jsx-runtime";import n from"classnames";import{useState as s,useCallback as t,useEffect as c}from"react";import{makeStyles as l}from"@material-ui/core";import{UndoIcon as e,FiveIcon as d,MoveInIcon as r,PlusIcon as a,MinusIcon as m}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 as u}from"./ToolboxButton.js";var p=l((function(o){var i=o.palette;return{toolboxContainer:{position:"absolute",zIndex:1,right:function(o){var i=o.right;return i+7},bottom:function(o){var i=o.bottom;return i+8},width:30,height:"fit-content",display:"flex",flexDirection:"column",alignItems:"flex-end",gap:"4px 0"},activeIcon:{color:"".concat(i.primary.main," !important")},tooltipButton:{width:30,height:30,backgroundColor:i.background.b6,minWidth:0},disabledButton:{cursor:"not-allowed",color:"".concat(i.primary.text6," !important"),backgroundColor:"".concat(i.background.b6," !important")}}})),v=function(l){var v,b,h,I,g,j,C,f,x,k,B,Z,z,O,N,F=l.isPaneEnabled,E=l.handleTogglePane,P=l.handleToggleBrush,R=l.isBrushEnabled,T=l.isZoomed,w=l.chart,y=l.customToolboxContainerClass,A=l.handleZoomReset,D=l.handleZoomOut,M=l.handleZoomIn,q=l.controls,G=s({bottom:0,right:0}),S=G[0],W=G[1],L=p({bottom:S.bottom,right:S.right}),H=t((function(){var o,i,n,s,t,c,l=null===(n=null===(i=null===(o=null==w?void 0:w.getOption())||void 0===o?void 0:o.grid)||void 0===i?void 0:i[0])||void 0===n?void 0:n.bottom,e=null===(c=null===(t=null===(s=null==w?void 0:w.getOption())||void 0===s?void 0:s.grid)||void 0===t?void 0:t[0])||void 0===c?void 0:c.right;l===S.bottom&&e===S.right||W({bottom:+l,right:+e})}),[S,w]);c((function(){!w||S.bottom||S.right||w.on("rendered",H)}),[w]);return o("div",{className:n(L.toolboxContainer,y),children:[T&&i(u,{icon:i(e,{size:"small"}),title:"Reset Zoom",onClick:A,disabled:null===(j=null==q?void 0:q.resetZoom)||void 0===j?void 0:j.disabled,className:n(L.tooltipButton,(v={},v[L.disabledButton]=null===(C=null==q?void 0:q.resetZoom)||void 0===C?void 0:C.disabled,v))}),i(u,{icon:i(d,{className:n(F&&L.activeIcon),size:"small"}),onClick:function(){E(!F),P(!1)},title:"Pan",disabled:!T||(null===(f=null==q?void 0:q.pane)||void 0===f?void 0:f.disabled),className:n(L.tooltipButton,(b={},b[L.disabledButton]=!T||(null===(x=null==q?void 0:q.pane)||void 0===x?void 0:x.disabled),b))}),i(u,{icon:i(r,{className:n(R&&L.activeIcon),size:"small"}),onClick:function(){P(!R),E(!1)},title:"Drag To Zoom",disabled:null===(k=null==q?void 0:q.brush)||void 0===k?void 0:k.disabled,className:n(L.tooltipButton,(h={},h[L.disabledButton]=null===(B=null==q?void 0:q.brush)||void 0===B?void 0:B.disabled,h))}),i(u,{icon:i(a,{size:"small"}),onClick:M,title:"Zoom In",disabled:null===(Z=null==q?void 0:q.zoomIn)||void 0===Z?void 0:Z.disabled,className:n(L.tooltipButton,(I={},I[L.disabledButton]=null===(z=null==q?void 0:q.zoomIn)||void 0===z?void 0:z.disabled,I))}),i(u,{icon:i(m,{size:"small"}),onClick:D,title:"Zoom Out",disabled:!T||(null===(O=null==q?void 0:q.zoomOut)||void 0===O?void 0:O.disabled),className:n(L.tooltipButton,(g={},g[L.disabledButton]=!T||(null===(N=null==q?void 0:q.zoomOut)||void 0===N?void 0:N.disabled),g))})]})};export{v as Toolbox};

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

@@ -1,24 +1 @@
-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
+import{jsx as e}from"react/jsx-runtime";import{Tooltip as l,Button as i}from"@material-ui/core";var r=function(r){var t=r.icon,a=r.onClick,c=r.title,n=r.placement,m=r.disabled,o=r.className;return e(l,{title:m?"":c,placement:n||"left",children:e(i,{className:o,onClick:m?null:a,disableRipple:m,children:t})})};export{r as ToolboxButton};