@evergis/charts 3.1.1 → 3.1.2

package/dist/charts.cjs.development.js

@@ -14,45 +14,25 @@ var lodash = require('lodash');
 var reactDom = require('react-dom');
 
 function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-
-  return target;
+  return t;
 }
-
-function _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
+function _taggedTemplateLiteralLoose(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
 }
 
 var _templateObject;
@@ -83,8 +63,8 @@ const useResize = (width, callback, delay) => {
     return callback ? throttle(callback, delay || THROTTLE_DELAY) : undefined;
   }, [callback, delay]);
   React.useEffect(() => {
-    throttledCallback && typeof width !== 'number' && window.addEventListener('resize', throttledCallback);
-    return () => throttledCallback && window.removeEventListener('resize', throttledCallback);
+    throttledCallback && typeof width !== "number" && window.addEventListener("resize", throttledCallback);
+    return () => throttledCallback && window.removeEventListener("resize", throttledCallback);
   }, [width, throttledCallback]);
 };
 
@@ -107,11 +87,9 @@ function animate(_ref) {
   let requestId;
   requestAnimationFrame(function requestAnimate(time) {
     let timeFraction = (time - start) / duration;
-
     if (timeFraction < 1) {
       requestId = requestAnimationFrame(requestAnimate);
     }
-
     if (timeFraction > 1) cancelAnimationFrame(requestId);
     const progress = timing(timeFraction);
     draw(progress, requestId);
@@ -120,7 +98,6 @@ function animate(_ref) {
 const easeOutQuad = time => time * (2 - time);
 
 const range = (num, min, max) => Math.min(Math.max(num, min), max);
-
 const defaultRefs = {
   animation: 0,
   speed: 0,
@@ -156,7 +133,6 @@ const useSwipe = (node, _ref) => {
     const maxX = width - nodeWidth;
     const translateX = range(newX, -maxX, 0);
     container.style('transform', "translateX(" + translateX + "px)");
-
     if (refs.current.currentX) {
       const hundred = 100;
       const now = Date.now();
@@ -166,7 +142,6 @@ const useSwipe = (node, _ref) => {
       refs.current.speed = speedX;
       refs.current.timestamp = now;
     }
-
     refs.current.currentX = translateX;
     onSwipe && onSwipe(translateX, container);
   }, [onSwipe, width, node, container]);
@@ -178,16 +153,13 @@ const useSwipe = (node, _ref) => {
     };
     documentSelect.on('mousemove.swipe touchmove.swipe mouseup.swipe touchend.swipe', null);
     body.style('cursor', null);
-
     if (width > nodeWidth) {
       container.style('cursor', 'grab');
     } else {
       container.style('cursor', null);
     }
-
     const dt = Date.now() - refs.current.timestamp;
     const dtEnd = 44;
-
     if (dt < dtEnd) {
       animate({
         duration: duration,
@@ -199,7 +171,6 @@ const useSwipe = (node, _ref) => {
           const maxX = width - nodeWidth;
           const translateX = range(currX, -maxX, 0);
           const transX = Math.max(Math.min(currX, maxX), 0);
-
           if (refs.current.currentX !== transX) {
             container.style('transform', "translateX(" + translateX + "px)");
             onSwipe && onSwipe(translateX, container);
@@ -218,12 +189,10 @@ const useSwipe = (node, _ref) => {
     };
     body.style('cursor', 'grabbing');
     container.style('cursor', 'grabbing');
-
     if (refs.current.animation) {
       cancelAnimationFrame(refs.current.animation);
       refs.current = defaultRefs;
     }
-
     refs.current.startX = Math.max(x + left, 0);
     documentSelect.on('mousemove.swipe touchmove.swipe', onMove);
     documentSelect.on('mouseup.swipe touchend.swipe', onEnd);
@@ -233,7 +202,6 @@ const useSwipe = (node, _ref) => {
       const {
         width: nodeWidth
       } = node.getBoundingClientRect();
-
       if (width > nodeWidth) {
         container.style('cursor', 'grab');
         container.on('mousedown.swipe touchstart.swipe', onStart);
@@ -245,12 +213,11 @@ const useSwipe = (node, _ref) => {
 const _excluded = ["children", "width", "onSwipe"];
 const SwipeScroll = _ref => {
   let {
-    children,
-    width,
-    onSwipe
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      children,
+      width,
+      onSwipe
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const [ref, draggingNode] = useNode();
   useSwipe(draggingNode, _extends({
     width,
@@ -269,24 +236,19 @@ const degByIndex = (index, count) => {
   const deg = degs / count * index;
   return deg;
 };
-
 const getTextAnchor = (index, length) => {
   const deg = degByIndex(index, length);
   const halfAngle = 180;
-
   if ([0, halfAngle].includes(deg)) {
     return 'middle';
   }
-
   if (deg < halfAngle) {
     return 'start';
   }
-
   return 'end';
 };
 
 var _templateObject$2;
-
 const getTranslate = _ref => {
   let {
     anchor,
@@ -294,7 +256,6 @@ const getTranslate = _ref => {
     translateX,
     translateY
   } = _ref;
-
   if (index === 0 && anchor === 'middle') {
     return "translate(calc(-50% + " + translateX + "px), calc(-100% + " + translateY + "px))";
   } else if (anchor === 'middle') {
@@ -304,10 +265,8 @@ const getTranslate = _ref => {
   } else if (anchor === 'end') {
     return "translate(calc(-100% + " + translateX + "px), calc(-50% + " + translateY + "px))";
   }
-
   return "translate(" + translateX + "px, " + translateY + "px)";
 };
-
 const LabelContainer = /*#__PURE__*/styled__default.div.attrs(props => ({
   style: {
     transform: getTranslate(props)
@@ -332,13 +291,9 @@ const drawRadialLabels = _ref => {
   } = _ref;
   const d3container = d3.select(node);
   d3container.selectAll("." + labelClassName).remove();
-
   const pxToValue = value => maxValue / radius * value;
-
   const axisX = i => radiusScale(maxValue + pxToValue(xOffset || 0)) * Math.cos(angleSlice * i - Math.PI / 2);
-
   const axisY = i => radiusScale((maxValue + pxToValue(yOffset || 0)) * Math.sin(angleSlice * i - Math.PI / 2));
-
   const labels = Array.from({
     length: dataLength
   }, (_, index) => ({
@@ -374,17 +329,15 @@ const getTranslate$1 = _ref => {
     translateX,
     translateY
   } = _ref;
-
-  if (index === 0 && anchor === 'middle') {
+  if (index === 0 && anchor === "middle") {
     return "translate(calc(-50% + " + translateX + "px), calc(-100% + " + translateY + "px))";
-  } else if (anchor === 'middle') {
+  } else if (anchor === "middle") {
     return "translate(calc(-50% + " + translateX + "px), calc(" + translateY + "px))";
-  } else if (anchor === 'start') {
+  } else if (anchor === "start") {
     return "translate(calc(" + translateX + "px), calc(-50% + " + translateY + "px))";
-  } else if (anchor === 'end') {
+  } else if (anchor === "end") {
     return "translate(calc(-100% + " + translateX + "px), calc(-50% + " + translateY + "px))";
   }
-
   return "translate(" + translateX + "px, " + translateY + "px)";
 };
 const Label = /*#__PURE__*/styled__default.div(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n"])));
@@ -426,7 +379,6 @@ const draw = (node, props) => {
     labelIndex,
     selectLabel: _selectLabel
   } = props;
-
   if (node !== null && data.length) {
     const defaultBleedLength = 10;
     const bleedLength = typeof props.bleedLength === 'number' ? props.bleedLength : defaultBleedLength;
@@ -455,23 +407,23 @@ const draw = (node, props) => {
     const ticks = d3.scaleLinear().domain([0, maxValue || 1]).range([]).ticks(props.levels || defaultLevels);
     const lastTick = ticks[ticks.length - 1];
     const newLastTick = lastTick + (ticks[1] - ticks[0]);
-
     if (lastTick < maxValue) {
       ticks.push(newLastTick);
     }
-
     const levels = props.levels || ticks.length - 1;
     const newMaxValue = ticks[ticks.length - 1];
     const angleSlice = Math.PI * 2 / data[0].length;
     const radiusScale = d3.scaleLinear().range([0, radius]).domain([0, newMaxValue]);
-    const radarLine = d3.lineRadial().curve(d3.curveLinearClosed) // @ts-ignore
+    const radarLine = d3.lineRadial().curve(d3.curveLinearClosed)
+    // @ts-ignore
     .radius(_ref3 => {
       let {
         value
       } = _ref3;
       return radiusScale(value);
     }).angle((_, i) => i * angleSlice);
-    const radarValue = d3.lineRadial().curve(curve || d3.curveLinearClosed) // @ts-ignore
+    const radarValue = d3.lineRadial().curve(curve || d3.curveLinearClosed)
+    // @ts-ignore
     .radius(_ref4 => {
       let {
         value
@@ -481,11 +433,8 @@ const draw = (node, props) => {
     const svg = appendSvg(node, width, height);
     const globalCenter = svg.append('g');
     const levelsGrid = d3.range(1, levels + 1).reverse();
-
     const axisGridY = value => -value * radius / levels;
-
     const getAxisValue = value => newMaxValue * value / levels;
-
     const gridGlobal = globalCenter.append('g').attr('class', radarChartclassNames.radarAxis).selectAll().data([data[0]]).enter();
     const radarGlobal = globalCenter.append('g').attr('class', radarChartclassNames.radar);
     const axis = gridGlobal.selectAll().data(data[0].map(_ref5 => {
@@ -495,7 +444,6 @@ const draw = (node, props) => {
       return name;
     })).enter();
     let maxGridHeight = 0;
-
     if (polar) {
       levelsGrid.forEach(value => {
         const path = gridGlobal.append('circle').attr('cx', 0).attr('cy', 0).attr('r', () => radius / levels * value);
@@ -505,7 +453,8 @@ const draw = (node, props) => {
       });
     } else {
       levelsGrid.map(getAxisValue).forEach(value => {
-        const path = gridGlobal.append('path').attr('d', () => // @ts-ignore
+        const path = gridGlobal.append('path').attr('d', () =>
+        // @ts-ignore
         radarLine(Array.from({
           length: data[0].length
         }, () => ({
@@ -516,10 +465,10 @@ const draw = (node, props) => {
         maxGridHeight = Math.max(maxGridHeight, pathHeight);
       });
     }
-
     const radiusByMaxValue = radiusScale(newMaxValue) + bleedLength;
     axis.append('line').attr('x1', 0).attr('y1', 0).attr('x2', (_, i) => Math.round(radiusByMaxValue * Math.cos(angleSlice * i - Math.PI / 2))).attr('y2', (_, i) => Math.round(radiusByMaxValue * Math.sin(angleSlice * i - Math.PI / 2)));
-    radarGlobal.selectAll('path').data(data).join('path').attr('class', radarChartclassNames.radarPolygon).attr('style', (_, index) => (radarStyles == null ? void 0 : radarStyles[index]) || '').attr('d', d => radarValue( // @ts-ignore
+    radarGlobal.selectAll('path').data(data).join('path').attr('class', radarChartclassNames.radarPolygon).attr('style', (_, index) => (radarStyles == null ? void 0 : radarStyles[index]) || '').attr('d', d => radarValue(
+    // @ts-ignore
     d.map(dataItem => _extends({}, dataItem, {
       value: dataItem.value - minValue
     }))));
@@ -582,7 +531,6 @@ const draw = (node, props) => {
         if (_selectLabel) {
           const items = data.map(item => item[index]);
           const item = data[labelIndex || 0][index];
-
           _selectLabel(label, {
             index,
             item,
@@ -592,12 +540,10 @@ const draw = (node, props) => {
         }
       }
     });
-
     if (svgElements) {
       const html = ReactDOMServer.renderToString(svgElements);
       svg.append('g').html(html);
     }
-
     customize && customize(svg);
   }
 };
@@ -611,9 +557,7 @@ const RadarChart = props => {
   React.useEffect(() => {
     node && draw(node, props);
   }, [node, props]);
-
   const onDraw = () => draw(node, props);
-
   useResize(props.width, onDraw);
   return React__default.createElement("div", {
     className: className,
@@ -681,7 +625,6 @@ const drawRadialLabels$1 = _ref => {
   } = _ref;
   const d3container = d3.select(node);
   d3container.selectAll("." + pieChartclassNames.pieRadialLabel).remove();
-
   if (enableRadialLabels) {
     const defaultRadialLabelsLinkHorizontalLength = 4;
     const outerArc = d3.arc().innerRadius(radius).outerRadius(radius);
@@ -693,47 +636,52 @@ const drawRadialLabels$1 = _ref => {
       const posCPi = [(radius + (radialLabelsLinkHorizontalLength || defaultRadialLabelsLinkHorizontalLength)) * midFactor, posC[1]];
       return [[posA[0], posA[1]], [posB[0] + (radialAngleXOffset || 0) * midFactor, posB[1] - (radialLabelYOffset || 0) * d.index], [posCPi[0], posCPi[1] - (radialLabelYOffset || 0) * d.index]];
     });
-
     const getPosition = d => {
       const pos = outerArc.centroid(d);
       return [(radius + (radialLabelsLinkHorizontalLength || defaultRadialLabelsLinkHorizontalLength)) * getMidFactor(d), pos[1]];
     };
-
     const defaultRadialLabelsTextXOffset = 4;
-    d3container.selectAll('allLabels').data(dataReady).enter().append('div') // @ts-ignore
+    d3container.selectAll('allLabels').data(dataReady).enter().append('div')
+    // @ts-ignore
     .html(d => {
-      const html = ReactDOMServer.renderToString( // @ts-ignore
+      const html = ReactDOMServer.renderToString(
+      // @ts-ignore
       formatRadialLabel ? formatRadialLabel(d) : d.data.name);
       return html;
-    }).attr('class', pieChartclassNames.pieRadialLabel) // @ts-ignore
+    }).attr('class', pieChartclassNames.pieRadialLabel)
+    // @ts-ignore
     .style('transform', d => getTranslate$1({
       anchor: getAlign(d),
       index: d.index,
       translateX,
       translateY: translateY - (radialLabelYOffset || 0) * d.index
-    })) // @ts-ignore
-    .style('left', // @ts-ignore
-    d => getPosition(d)[0] - (getAlign(d) === 'start' ? -(radialLabelsTextXOffset || defaultRadialLabelsTextXOffset) : radialLabelsTextXOffset || defaultRadialLabelsTextXOffset) + "px") // @ts-ignore
-    .style('top', d => getPosition(d)[1] + "px") // @ts-ignore
+    }))
+    // @ts-ignore
+    .style('left',
+    // @ts-ignore
+    d => getPosition(d)[0] - (getAlign(d) === 'start' ? -(radialLabelsTextXOffset || defaultRadialLabelsTextXOffset) : radialLabelsTextXOffset || defaultRadialLabelsTextXOffset) + "px")
+    // @ts-ignore
+    .style('top', d => getPosition(d)[1] + "px")
+    // @ts-ignore
     .style('text-align', getAlign);
   }
 };
 
-var _templateObject$6, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject$6, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
 const TooltipFlex = /*#__PURE__*/styled__default.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 0;\n  height: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  pointer-events: none;\n  white-space: nowrap;\n"])));
 const LabelFlex = /*#__PURE__*/styled__default(TooltipFlex)(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 const LabelFlexCenter = /*#__PURE__*/styled__default(LabelFlex)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-items: center;\n"])));
-const TooltipContainer = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  font-size: 11px;\n  color: #fff;\n  margin-bottom: 8px;\n  padding: 4px 6px;\n  background-color: rgba(48, 69, 79, 1);\n  border-radius: 4px;\n  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);\n  :before {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 100%);\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 4px 3px 0 3px;\n    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;\n  }\n"])));
+const TooltipContainer = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  font-size: 11px;\n  color: #fff;\n  margin-bottom: 8px;\n  padding: 4px 6px;\n  background-color: rgba(48, 69, 79, 1);\n  border-radius: 4px;\n  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);\n\n  :before {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 100%);\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 4px 3px 0 3px;\n    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;\n  }\n"])));
 const TooltipGroupName = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  margin-bottom: 6px;\n"])));
-const TooltipItem = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.25rem;\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"])));
+const TooltipItem = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.25rem;\n\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"])));
 const ColFlex = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: 4px;\n"])));
 const ColorBox = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  width: 10px;\n  height: 10px;\n  border-radius: 2px;\n"])));
 const ColorLine = /*#__PURE__*/styled__default(ColorBox)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  border-radius: 0;\n"])));
-const Name$1 = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n"])));
-const Value = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: right;\n  flex-shrink: 0;\n  flex-grow: 1;\n"])));
-const Label$1 = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  font-size: 11px;\n  color: #fff;\n  font-weight: bold;\n  letter-spacing: 0.52px;\n"])));
-const LabelTop = /*#__PURE__*/styled__default(Label$1)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 6px;\n"])));
-const LabelBottom = /*#__PURE__*/styled__default(Label$1)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  bottom: 6px;\n"])));
+const Name$1 = /*#__PURE__*/styled__default.div(_templateObject0 || (_templateObject0 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n"])));
+const Value = /*#__PURE__*/styled__default.div(_templateObject1 || (_templateObject1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: right;\n  flex-shrink: 0;\n  flex-grow: 1;\n"])));
+const Label$1 = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  font-size: 11px;\n  color: #fff;\n  font-weight: bold;\n  letter-spacing: 0.52px;\n"])));
+const LabelTop = /*#__PURE__*/styled__default(Label$1)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 6px;\n"])));
+const LabelBottom = /*#__PURE__*/styled__default(Label$1)(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  bottom: 6px;\n"])));
 
 const drawTooltip = _ref => {
   let {
@@ -756,26 +704,21 @@ const drawTooltip = _ref => {
   const pieTooltipContainer = d3.select(container).select("." + pieChartclassNames.pieTooltipContainer);
   const isEmpty = pieTooltipContainer.empty();
   const tooltipContainer = isEmpty ? d3.select(container).append('div').attr('class', pieChartclassNames.pieTooltipContainer + " " + (tooltipClassName || '')).style('position', 'absolute').style('opacity', '0').style('z-index', '103') : pieTooltipContainer;
-
   if (tooltipStyle) {
     Object.entries(tooltipStyle).forEach(_ref2 => {
       let [prop, val] = _ref2;
       return tooltipContainer.style(prop, val);
     });
   }
-
   tooltipContainer.html('');
   let isVisible = false;
-
   const setVisible = visible => {
     isVisible = Boolean(visible);
     const opacity = isVisible ? '1' : '0';
     tooltipContainer.style('opacity', opacity);
   };
-
   const setPosition = (event, pieChartDatum) => {
     let [x, y] = d3.pointer(event, document);
-
     if (!tooltipBind && fullChartTooltip) {
       const [itemX, itemY] = d3.pointer(event, event.target);
       x = x - itemX;
@@ -797,10 +740,8 @@ const drawTooltip = _ref => {
       x = itemX + itemWidth / 2 + arcX;
       y = itemY + itemHeight / 2 + arcY;
     }
-
     tooltipContainer.style('left', x + 'px').style('top', y + 'px');
   };
-
   const setTooltip = (event, pieChartDatum) => {
     setVisible(true);
     setPosition(event, pieChartDatum);
@@ -833,28 +774,23 @@ const drawTooltip = _ref => {
       return html;
     });
   };
-
   if (fullChartTooltip) {
     global.on('mouseover.fulltooltip', event => setTooltip(event));
     global.on('mouseout.fulltooltip', () => {
       tooltipContainer.html('');
       setVisible();
     });
-
     if (width && height) {
       global.append('circle').attr('class', pieChartclassNames.pieFullChartTooltipCircle).attr('r', radius).attr('cx', 0).attr('cy', 0);
     }
-
     if (!tooltipBind) {
       global.on('touchmove.tooltipBind mousemove.tooltipBind', event => setPosition(event));
     }
   } else {
     allSlices.on('mouseover.slice', setTooltip);
-
     if (!tooltipBind) {
       allSlices.on('touchmove.slice mousemove.slice', setPosition);
     }
-
     allSlices.on('mouseout.slice', () => {
       tooltipContainer.html('');
       setVisible();
@@ -895,7 +831,6 @@ const draw$1 = (node, props) => {
     renderTooltip,
     tooltipStyle
   } = props;
-
   if (node !== null && data.length) {
     const marginTop = margin ? margin.top : 0;
     const marginRight = margin ? margin.right : 0;
@@ -913,56 +848,58 @@ const draw$1 = (node, props) => {
     const maxPadAngle = 45;
     const dividerPadAngle = 100;
     const fullAngle = 360;
-    const pie = d3.pie().startAngle(-degreesToRadians(startAngle || 0)).endAngle(degreesToRadians(endAngle || fullAngle)).padAngle(padAngle ? Math.max(Math.min(padAngle / dividerPadAngle, maxPadAngle), 0) : 0).sort(null) // @ts-ignore
+    const pie = d3.pie().startAngle(-degreesToRadians(startAngle || 0)).endAngle(degreesToRadians(endAngle || fullAngle)).padAngle(padAngle ? Math.max(Math.min(padAngle / dividerPadAngle, maxPadAngle), 0) : 0).sort(null)
+    // @ts-ignore
     .value(_ref => {
       let {
         value
       } = _ref;
       return value;
-    }); // @ts-ignore
-
+    });
+    // @ts-ignore
     const dataReady = pie(data);
     const maxOuterRadius = 0.95;
     const arc = d3.arc().cornerRadius(cornerRadius || 0).innerRadius(radius).outerRadius(radius * Math.min(Math.max(outerRadius || 0, 0), maxOuterRadius));
-
     if (typeof backgroundColor === 'string') {
-      global.append('path').attr('fill', backgroundColor).attr('d', () => // @ts-ignore
+      global.append('path').attr('fill', backgroundColor).attr('d', () =>
+      // @ts-ignore
       arc({
         startAngle: degreesToRadians(0),
         endAngle: degreesToRadians(fullAngle)
       }));
     }
-
     const format = d3.format(',');
-    const allSlices = global.selectAll('allSlices').data(dataReady).enter().append('path') // @ts-ignore
+    const allSlices = global.selectAll('allSlices').data(dataReady).enter().append('path')
+    // @ts-ignore
     .attr('d', arc);
     allSlices.attr('class', pieChartclassNames.pieSlice).attr('fill', _ref2 => {
       let {
         index
       } = _ref2;
       return data[index].color || '';
-    }).attr('stroke', borderColor || '').attr('stroke-width', borderWidth || 0).attr('style', onClick ? 'cursor: pointer' : '').on('click', // @ts-ignore
-    (_, d) => onClick && onClick(data[d.index])).append('svg:title').text(d => formatSliceTitle ? // @ts-ignore
+    }).attr('stroke', borderColor || '').attr('stroke-width', borderWidth || 0).attr('style', onClick ? 'cursor: pointer' : '').on('click',
+    // @ts-ignore
+    (_, d) => onClick && onClick(data[d.index])).append('svg:title').text(d => formatSliceTitle ?
+    // @ts-ignore
     formatSliceTitle(d) : fullChartTooltip || withTooltip ? '' : (data[d.index].name || '') + " (" + format(data[d.index].value) + ")");
-
     if (enableSlicesLabels) {
-      const text = global.selectAll('allSlices').data(dataReady).enter().append('text').attr('class', pieChartclassNames.pieSliceLabel).attr('text-anchor', 'middle').attr('dominant-baseline', 'central').attr('transform', // @ts-ignore
+      const text = global.selectAll('allSlices').data(dataReady).enter().append('text').attr('class', pieChartclassNames.pieSliceLabel).attr('text-anchor', 'middle').attr('dominant-baseline', 'central').attr('transform',
+      // @ts-ignore
       d => 'translate(' + arc.centroid(d) + ')');
-      text.append('tspan').attr('class', pieChartclassNames.pieSliceLabelValue) // @ts-ignore
+      text.append('tspan').attr('class', pieChartclassNames.pieSliceLabelValue)
+      // @ts-ignore
       .text(d => {
         const deg = radiansToDegrees(d.endAngle - d.startAngle);
-
         if (!slicesLabelsSkipAngle || deg > slicesLabelsSkipAngle) {
           return formatSliceLabel ? formatSliceLabel(d) : d.value;
         }
       });
-
       if (enableSlicesLabelsName) {
-        text.append('tspan').attr('class', pieChartclassNames.pieSliceLabelName) // @ts-ignore
+        text.append('tspan').attr('class', pieChartclassNames.pieSliceLabelName)
+        // @ts-ignore
         .text(d => formatSliceLabelName ? formatSliceLabelName(d) : d.data.name).attr('x', '0').attr('dy', '1.2em');
       }
     }
-
     drawRadialLabels$1({
       arc,
       enableRadialLabels,
@@ -978,7 +915,6 @@ const draw$1 = (node, props) => {
       radialLabelYOffset,
       radialAngleXOffset
     });
-
     if (withTooltip || fullChartTooltip) {
       drawTooltip({
         fullChartTooltip,
@@ -995,7 +931,6 @@ const draw$1 = (node, props) => {
         radius
       });
     }
-
     if (svgElements) {
       const html = ReactDOMServer.renderToString(svgElements);
       svg.append('g').html(html);
@@ -1013,9 +948,7 @@ const PieChart = props => {
   React.useEffect(() => {
     node && draw$1(node, props);
   }, [node, props]);
-
   const onDraw = () => draw$1(node, props);
-
   useResize(props.width, onDraw);
   return React__default.createElement("div", {
     className: className,
@@ -1041,25 +974,20 @@ const legendClassNames = {
   legendTickLine: 'd3-legend-tick-line',
   legendTickText: 'd3-legend-tick-text'
 };
-
 function ramp(color, n) {
   if (n === void 0) {
     n = defaultN;
   }
-
   const canvas = document.createElement('canvas');
   canvas.width = n;
   canvas.height = 1;
   const context = canvas.getContext('2d');
-
   for (let i = 0; i < n; ++i) {
     context.fillStyle = color(i / (n - 1));
     context.fillRect(i, 0, 1, 1);
   }
-
   return canvas;
 }
-
 const legendDefaultParams = {
   tickSize: 6,
   height: 44,
@@ -1085,9 +1013,9 @@ const getLegend = _ref => {
     tickValues,
     titleMarginBottom
   } = _ref;
-  const svg = d3.create('svg').attr('width', width).attr('height', height) // @ts-ignore
+  const svg = d3.create('svg').attr('width', width).attr('height', height)
+  // @ts-ignore
   .attr('viewBox', [0, 0, width, height]).style('overflow', 'visible').style('display', 'block');
-
   let tickAdjust = g => {
     const tick = g.selectAll('.tick');
     tick.selectAll('.tick line').attr('y1', marginTop + marginBottom - height).attr('class', legendClassNames.legendTickLine);
@@ -1095,56 +1023,57 @@ const getLegend = _ref => {
     tick.attr('class', legendClassNames.legendTick);
     return tick;
   };
-
-  let x; // Continuous
-
+  let x;
+  // Continuous
   if (color.interpolate) {
     const n = Math.min(color.domain().length, color.range().length);
     x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n));
     svg.append('image').attr('x', marginLeft).attr('y', marginTop).attr('class', legendClassNames.legendContainer).attr('width', width - marginLeft - marginRight).attr('height', height - marginTop - marginBottom).attr('preserveAspectRatio', 'none').attr('xlink:href', ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL());
-  } // Sequential
+  }
+  // Sequential
   else if (color.interpolator) {
     x = Object.assign(color.copy().interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {
       range() {
         return [marginLeft, width - marginRight];
       }
-
     });
-    svg.append('image').attr('x', marginLeft).attr('y', marginTop).attr('width', width - marginLeft - marginRight).attr('height', height - marginTop - marginBottom).attr('preserveAspectRatio', 'none').attr('xlink:href', ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat.
-
+    svg.append('image').attr('x', marginLeft).attr('y', marginTop).attr('width', width - marginLeft - marginRight).attr('height', height - marginTop - marginBottom).attr('preserveAspectRatio', 'none').attr('xlink:href', ramp(color.interpolator()).toDataURL());
+    // scaleSequentialQuantile doesn’t implement ticks or tickFormat.
     if (!x.ticks) {
       if (tickValues === undefined) {
         const n = Math.round(ticks + 1);
         tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1)));
       }
-
       if (typeof tickFormat !== 'function') {
         tickFormat = d3.format(tickFormat === undefined ? ',f' : tickFormat);
       }
     }
   }
-
-  svg.append('g').attr('transform', "translate(0," + (height - marginBottom) + ")").call(d3.axisBottom(x).ticks(ticks, typeof tickFormat === 'string' ? tickFormat : undefined) // @ts-ignore
-  .tickFormat(typeof tickFormat === 'function' ? tickFormat : undefined).tickSize(tickSize) // @ts-ignore
+  svg.append('g').attr('transform', "translate(0," + (height - marginBottom) + ")")
+  // @ts-ignore
+  .call(d3.axisBottom(x).ticks(ticks, typeof tickFormat === 'string' ? tickFormat : undefined)
+  // @ts-ignore
+  .tickFormat(typeof tickFormat === 'function' ? tickFormat : undefined).tickSize(tickSize)
+  // @ts-ignore
   .tickValues(tickValues)).call(tickAdjust).call(g => g.select('.domain').remove()).call(g => g.append('text').attr('x', marginLeft).attr('class', legendClassNames.legendTitle).attr('y', marginTop + marginBottom - height - (titleMarginBottom || legendDefaultParams.titleMarginBottom)).attr('fill', 'currentColor').attr('text-anchor', 'start').attr('font-weight', 'bold').text(title));
   return svg;
 };
 
 var _templateObject$7;
 const calendarChartClassNames = /*#__PURE__*/_extends({
-  calendarChart: 'calendarChart',
-  calendarYear: 'calendarYear',
-  calendarAxis: 'calendarAxis',
-  calendarBody: 'calendarBody',
-  calendarHeader: 'calendarHeader',
-  calendarYearTitle: 'calendarYearTitle',
-  calendarWeekDay: 'calendarWeekDay',
-  calendarMonth: 'calendarMonth',
-  calendarDays: 'calendarDays',
-  calendarDay: 'calendarDay'
+  calendarChart: "calendarChart",
+  calendarYear: "calendarYear",
+  calendarAxis: "calendarAxis",
+  calendarBody: "calendarBody",
+  calendarHeader: "calendarHeader",
+  calendarYearTitle: "calendarYearTitle",
+  calendarWeekDay: "calendarWeekDay",
+  calendarMonth: "calendarMonth",
+  calendarDays: "calendarDays",
+  calendarDay: "calendarDay"
 }, legendClassNames);
-const headerHeight = '20px';
-const SvgWrapper$2 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    display: flex;\n    margin-bottom: 16px;\n  }\n  .", " {\n    display: inline-flex;\n    align-items: flex-end;\n    height: ", ";\n    margin-bottom: 4px;\n    font-weight: bold;\n  }\n  .", " {\n    height: ", ";\n    margin-bottom: 4px;\n    position: relative;\n    display: flex;\n  }\n  .", " {\n    font-size: 14px;\n    bottom: 0;\n    position: absolute;\n  }\n  .", " {\n    display: flex;\n    flex-direction: column;\n    margin-right: 10px;\n  }\n  .", " {\n    font-size: 12px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n  .", " {\n    position: relative;\n  }\n  .", " {\n    position: absolute;\n  }\n"])), calendarChartClassNames.calendarYear, calendarChartClassNames.calendarYearTitle, headerHeight, calendarChartClassNames.calendarHeader, headerHeight, calendarChartClassNames.calendarMonth, calendarChartClassNames.calendarAxis, calendarChartClassNames.calendarWeekDay, calendarChartClassNames.calendarDays, calendarChartClassNames.calendarDay);
+const headerHeight = "20px";
+const SvgWrapper$2 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    display: flex;\n    margin-bottom: 16px;\n  }\n\n  .", " {\n    display: inline-flex;\n    align-items: flex-end;\n    height: ", ";\n    margin-bottom: 4px;\n    font-weight: bold;\n  }\n\n  .", " {\n    height: ", ";\n    margin-bottom: 4px;\n    position: relative;\n    display: flex;\n  }\n\n  .", " {\n    font-size: 14px;\n    bottom: 0;\n    position: absolute;\n  }\n\n  .", " {\n    display: flex;\n    flex-direction: column;\n    margin-right: 10px;\n  }\n\n  .", " {\n    font-size: 12px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  .", " {\n    position: relative;\n  }\n\n  .", " {\n    position: absolute;\n  }\n"])), calendarChartClassNames.calendarYear, calendarChartClassNames.calendarYearTitle, headerHeight, calendarChartClassNames.calendarHeader, headerHeight, calendarChartClassNames.calendarMonth, calendarChartClassNames.calendarAxis, calendarChartClassNames.calendarWeekDay, calendarChartClassNames.calendarDays, calendarChartClassNames.calendarDay);
 
 const draw$2 = (node, props) => {
   const {
@@ -1157,28 +1086,20 @@ const draw$2 = (node, props) => {
     colorRange,
     legendProps
   } = props;
-
   if (node !== null && data.length) {
     const years = d3.group(data, d => d.date.getUTCFullYear());
     const cellOffset = typeof props.cellOffset === 'number' ? props.cellOffset : 0;
     const weekDays = 7;
     const defaultCellSize = 18;
     const cellSize = props.cellSize || defaultCellSize;
-
     const countDay = i => startSunday ? i : (i + (weekDays - 1)) % weekDays;
-
     const days = weekdays || ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];
     const sundayIndex = 6;
-
     const formatDay = i => startSunday ? days[i] : i === sundayIndex ? days[0] : days[i + 1];
-
     const formatDate = d3.utcFormat('%x');
     const timeWeek = startSunday ? d3.utcSunday : d3.utcMonday;
-
     const getTimeWeekCount = (from, to) => timeWeek.count(d3.utcYear(from), to);
-
     const getMonthSpacing = date => date.getUTCMonth() * (monthSpacing || 0);
-
     const formatMonth = d3.utcFormat('%b');
     const max = d3.max(data.map(_ref => {
       let {
@@ -1192,7 +1113,8 @@ const draw$2 = (node, props) => {
       } = _ref2;
       return value;
     }));
-    const color = colorRange ? d3.scaleLinear().domain([min, max]) // @ts-ignore
+    const color = colorRange ? d3.scaleLinear().domain([min, max])
+    // @ts-ignore
     .range(colorRange) : d3.scaleSequential(interpolator || d3.interpolateGreens).domain([min, +max]);
     let chartWidth = 0;
     years.forEach((values, year) => {
@@ -1205,10 +1127,12 @@ const draw$2 = (node, props) => {
     });
     d3.select(node).select("." + calendarChartClassNames.calendarChart).remove();
     const container = d3.select(node).append('div').attr('class', calendarChartClassNames.calendarChart);
-    const year = container.selectAll('div') // @ts-ignore
+    const year = container.selectAll('div')
+    // @ts-ignore
     .data(years).join('div').attr('class', calendarChartClassNames.calendarYear);
     const calendarWeekdays = year.append('div').attr('class', calendarChartClassNames.calendarAxis);
-    calendarWeekdays.append('div').attr('class', calendarChartClassNames.calendarYearTitle) // @ts-ignore
+    calendarWeekdays.append('div').attr('class', calendarChartClassNames.calendarYearTitle)
+    // @ts-ignore
     .text(_ref3 => {
       let [key] = _ref3;
       return key;
@@ -1216,32 +1140,39 @@ const draw$2 = (node, props) => {
     calendarWeekdays.selectAll('span').data(d3.range(weekDays)).join('div').attr('class', calendarChartClassNames.calendarWeekDay).style('height', cellSize + 'px').style('margin-bottom', cellOffset + 'px').text(formatDay);
     const body = year.append('div').attr('class', calendarChartClassNames.calendarBody);
     const header = body.append('div').attr('class', calendarChartClassNames.calendarHeader);
-    header.selectAll('div') // @ts-ignore
+    header.selectAll('div')
+    // @ts-ignore
     .data(_ref4 => {
       let [_, values] = _ref4;
       const fullYearlastMonth = 12;
       const fullYearlastDate = 31;
       return d3.utcMonths(d3.utcMonth(new Date(values[0].date.getUTCFullYear(), 1, 1)), d3.utcMonth(new Date(values[0].date.getUTCFullYear(), fullYearlastMonth, fullYearlastDate)));
-    }).join('div').attr('class', calendarChartClassNames.calendarMonth).style('left', d => getTimeWeekCount(d, timeWeek.ceil(d)) * (cellSize + cellOffset) + getMonthSpacing(d) + 'px') // @ts-ignore
-    .text(formatMonth); // @ts-ignore
-
-    body.append('div').attr('class', calendarChartClassNames.calendarDays).style('height', (cellSize + cellOffset) * weekDays + 'px').style('width', chartWidth + 'px').selectAll('div') // @ts-ignore
+    }).join('div').attr('class', calendarChartClassNames.calendarMonth).style('left', d => getTimeWeekCount(d, timeWeek.ceil(d)) * (cellSize + cellOffset) + getMonthSpacing(d) + 'px')
+    // @ts-ignore
+    .text(formatMonth);
+    // @ts-ignore
+    body.append('div').attr('class', calendarChartClassNames.calendarDays).style('height', (cellSize + cellOffset) * weekDays + 'px').style('width', chartWidth + 'px').selectAll('div')
+    // @ts-ignore
     .data(_ref5 => {
       let [, values] = _ref5;
       return values;
-    }).join('div') // @ts-ignore
+    }).join('div')
+    // @ts-ignore
     .each((data, index, elements) => {
       if (onEachDay) {
         const element = elements[index];
         const currColor = color(data.value);
         onEachDay(data, element, currColor);
       }
-    }).attr('class', calendarChartClassNames.calendarDay).style('width', cellSize + 'px').style('height', cellSize + 'px') // @ts-ignore
-    .style('left', d => getTimeWeekCount(d.date, d.date) * (cellSize + cellOffset) + getMonthSpacing(d.date) + 'px').style('top', // @ts-ignore
-    d => countDay(d.date.getUTCDay()) * (cellSize + cellOffset) + 'px') // @ts-ignore
-    .style('background-color', d => color(d.value)) // @ts-ignore
+    }).attr('class', calendarChartClassNames.calendarDay).style('width', cellSize + 'px').style('height', cellSize + 'px')
+    // @ts-ignore
+    .style('left', d => getTimeWeekCount(d.date, d.date) * (cellSize + cellOffset) + getMonthSpacing(d.date) + 'px').style('top',
+    // @ts-ignore
+    d => countDay(d.date.getUTCDay()) * (cellSize + cellOffset) + 'px')
+    // @ts-ignore
+    .style('background-color', d => color(d.value))
+    // @ts-ignore
     .attr('title', d => formatDate(d.date) + " - " + d.value);
-
     if (typeof legendProps === 'object') {
       const legend = getLegend(_extends({
         color: color
@@ -1270,7 +1201,8 @@ const CalendarChart = props => {
   } = props;
   const [ref, node] = useNode();
   React.useEffect(() => {
-    node && draw$2(node, props); // eslint-disable-next-line
+    node && draw$2(node, props);
+    // eslint-disable-next-line
   }, [node, data, startSunday, weekdays, cellOffset, cellSize, interpolator, monthSpacing, colorRange, legendProps]);
   return React__default.createElement(SvgWrapper$2, {
     ref: ref,
@@ -1285,7 +1217,6 @@ CalendarChart.defaultProps = {
 function computeDimensions(selection) {
   let dimensions;
   const node = selection.node();
-
   if (node instanceof SVGGraphicsElement) {
     // check if node is svg element
     dimensions = node.getBBox();
@@ -1293,7 +1224,6 @@ function computeDimensions(selection) {
     // else is html element
     dimensions = node.getBoundingClientRect();
   }
-
   return dimensions;
 }
 
@@ -1308,7 +1238,6 @@ const stackedData = data => {
   const stacks = {};
   return data.map((item, index) => {
     stacks[index] = {};
-
     if (index > 0) {
       return _extends({}, item, {
         values: item.values.map((value, valuesIndex) => {
@@ -1322,38 +1251,37 @@ const stackedData = data => {
         stacks[index][valuesIndex] = Number(value);
       });
     }
-
     return item;
   });
 };
 
 var _templateObject$8, _templateObject2$2;
 const lineChartClassNames = {
-  lineChartYScaleGlobal: 'lineChartYScaleGlobal',
-  lineChartYScaleRight: 'lineChartYScaleRight',
-  lineChartXScaleGlobal: 'lineChartXScaleGlobal',
-  lineChartLinesGlobal: 'lineChartLinesGlobal',
-  lineChartLine: 'lineChartLine',
-  lineChartAreasGlobal: 'lineChartAreasGlobal',
-  lineChartArea: 'lineChartArea',
-  lineChartDotsGlobalContainer: 'lineChartDotsGlobalContainer',
-  lineChartDotsGlobal: 'lineChartDotsGlobal',
-  lineChartDot: 'lineChartDot',
-  lineChartGridGlobal: 'lineChartGridGlobal',
-  lineChartGridLineX: 'lineChartGridLineX',
-  lineChartGridLineY: 'lineChartGridLineY',
-  lineChartLabelContainer: 'lineChartLabelContainer',
-  lineChartLabelFlex: 'lineChartLabelFlex',
-  lineChartLabel: 'lineChartLabel',
-  lineChartMouseGlobal: 'lineChartMouseGlobal',
-  lineChartMouseLine: 'lineChartMouseLine',
-  lineChartMouseRect: 'lineChartMouseRect',
-  lineChartMouseCircle: 'lineChartMouseCircle',
-  lineChartMouseLabelContainer: 'lineChartMouseLabelContainer',
-  lineChartMouseLabel: 'lineChartMouseLabel'
-};
-const SvgWrapper$3 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", ",\n    .", ",\n    .", " {\n    shape-rendering: crispEdges;\n  }\n  .", " {\n    fill: none;\n    stroke: steelblue;\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  .", " {\n    fill-opacity: 0.24;\n  }\n  .", ",\n    .", ",\n    .", " {\n    stroke: rgba(149, 149, 149, 0.24);\n  }\n  .", ",\n    .", " {\n    transition: opacity linear 200ms;\n    pointer-events: none;\n    stroke-width: 1px;\n  }\n  .", " {\n    stroke: #fff;\n    stroke-width: 2px;\n  }\n  .", " {\n    shape-rendering: crispEdges;\n  }\n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n"])), lineChartClassNames.lineChartYScaleGlobal, lineChartClassNames.lineChartXScaleGlobal, lineChartClassNames.lineChartGridGlobal, lineChartClassNames.lineChartLinesGlobal, lineChartClassNames.lineChartArea, lineChartClassNames.lineChartGridLineX, lineChartClassNames.lineChartGridLineY, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseCircle, lineChartClassNames.lineChartDot, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseRect);
-const TooltipStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    transition: opacity linear 200ms;\n    z-index: 100;\n    .", " {\n      justify-content: flex-start;\n      align-items: center;\n      pointer-events: none;\n    }\n    .", " {\n      margin: 0 0 0 10px;\n    }\n  }\n"])), lineChartClassNames.lineChartMouseLabel, lineChartClassNames.lineChartLabelFlex, lineChartClassNames.lineChartLabel);
+  lineChartYScaleGlobal: "lineChartYScaleGlobal",
+  lineChartYScaleRight: "lineChartYScaleRight",
+  lineChartXScaleGlobal: "lineChartXScaleGlobal",
+  lineChartLinesGlobal: "lineChartLinesGlobal",
+  lineChartLine: "lineChartLine",
+  lineChartAreasGlobal: "lineChartAreasGlobal",
+  lineChartArea: "lineChartArea",
+  lineChartDotsGlobalContainer: "lineChartDotsGlobalContainer",
+  lineChartDotsGlobal: "lineChartDotsGlobal",
+  lineChartDot: "lineChartDot",
+  lineChartGridGlobal: "lineChartGridGlobal",
+  lineChartGridLineX: "lineChartGridLineX",
+  lineChartGridLineY: "lineChartGridLineY",
+  lineChartLabelContainer: "lineChartLabelContainer",
+  lineChartLabelFlex: "lineChartLabelFlex",
+  lineChartLabel: "lineChartLabel",
+  lineChartMouseGlobal: "lineChartMouseGlobal",
+  lineChartMouseLine: "lineChartMouseLine",
+  lineChartMouseRect: "lineChartMouseRect",
+  lineChartMouseCircle: "lineChartMouseCircle",
+  lineChartMouseLabelContainer: "lineChartMouseLabelContainer",
+  lineChartMouseLabel: "lineChartMouseLabel"
+};
+const SvgWrapper$3 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", ",\n  .", ",\n  .", " {\n    shape-rendering: crispEdges;\n  }\n\n  .", " {\n    fill: none;\n    stroke: steelblue;\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n\n  .", " {\n    fill-opacity: 0.24;\n  }\n\n  .", ",\n  .", ",\n  .", " {\n    stroke: rgba(149, 149, 149, 0.24);\n  }\n\n  .", ",\n  .", " {\n    transition: opacity linear 200ms;\n    pointer-events: none;\n    stroke-width: 1px;\n  }\n\n  .", " {\n    stroke: #fff;\n    stroke-width: 2px;\n  }\n\n  .", " {\n    shape-rendering: crispEdges;\n  }\n\n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n"])), lineChartClassNames.lineChartYScaleGlobal, lineChartClassNames.lineChartXScaleGlobal, lineChartClassNames.lineChartGridGlobal, lineChartClassNames.lineChartLinesGlobal, lineChartClassNames.lineChartArea, lineChartClassNames.lineChartGridLineX, lineChartClassNames.lineChartGridLineY, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseCircle, lineChartClassNames.lineChartDot, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseRect);
+const TooltipStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    transition: opacity linear 200ms;\n    z-index: 100;\n\n    .", " {\n      justify-content: flex-start;\n      align-items: center;\n      pointer-events: none;\n    }\n\n    .", " {\n      margin: 0 0 0 10px;\n    }\n  }\n"])), lineChartClassNames.lineChartMouseLabel, lineChartClassNames.lineChartLabelFlex, lineChartClassNames.lineChartLabel);
 
 const drawGrid = _ref => {
   let {
@@ -1368,11 +1296,9 @@ const drawGrid = _ref => {
   if (!drawGridY && !drawGridX) return;
   const global = svg.append('g').attr('class', lineChartClassNames.lineChartGridGlobal);
   const yTicks = yScale.ticks(yTicksCount);
-
   if (drawGridX) {
     global.append('g').selectAll('line').data(yTicks).join('line').attr('class', lineChartClassNames.lineChartGridLineX).attr('x1', () => xScale(0)).attr('x2', () => xScale(lastIndex)).attr('y1', d => Math.round(yScale(d))).attr('y2', d => Math.round(yScale(d)));
   }
-
   if (drawGridY) {
     global.append('g').selectAll('line').data(Array.from({
       length: lastIndex + 1
@@ -1395,8 +1321,8 @@ const drawLabel = _ref => {
     eachLabel
   } = _ref;
   const labelsDiv = d3.select(node).append('div').attr('class', labelClassName$1);
-  const format = d3.format(','); // @ts-ignore
-
+  const format = d3.format(',');
+  // @ts-ignore
   data.forEach(_ref2 => {
     let {
       values
@@ -1408,7 +1334,8 @@ const drawLabel = _ref => {
         className: lineChartClassNames.lineChartLabel
       }, formatLabel ? formatLabel(d, index, elements) : format(d))));
       return html;
-    }) // @ts-ignore
+    })
+    // @ts-ignore
     .each(eachLabel ? eachLabel : none);
   });
 };
@@ -1464,14 +1391,11 @@ const drawTooltip$1 = _ref => {
     return stroke || 'none';
   }).style('opacity', '0');
   let labelContainer = d3.select("." + lineChartClassNames.lineChartMouseLabelContainer);
-
   if (labelContainer.size() === 0) {
     labelContainer = d3.select(container).append('div').attr('class', lineChartClassNames.lineChartMouseLabelContainer);
   }
-
   let labels = null;
   let isVisible = false;
-
   const setVisible = visible => {
     isVisible = Boolean(visible);
     const opacity = isVisible ? '1' : '0';
@@ -1479,7 +1403,6 @@ const drawTooltip$1 = _ref => {
     circles.style('opacity', opacity);
     labels && labels.style('opacity', opacity);
   };
-
   const mouseMove = event => {
     const [docX, docY] = d3.pointer(event, document);
     const [rectrX] = d3.pointer(event, mouseRect);
@@ -1488,41 +1411,33 @@ const drawTooltip$1 = _ref => {
     const left = nodeX + (docX - nodeX);
     const currIndex = Math.abs(xScale.invert(x));
     const positions = {};
-
     const getValue = values => {
       // The returning result is fixed for the task: https://jr.everpoint.ru/browse/PUB-5648
       // Before the task it was like this (and I don't know why):
-
       /* return !isVoid(values[Math.floor(currIndex + 1)])
         ? values[Math.floor(currIndex)]
         : null;*/
       return values[Math.floor(currIndex)];
     };
-
     lines.forEach((line, index) => {
       let pos = {
         x: 0,
         y: 0
       };
-
       if (!line.hasAttribute('d') || argData[index].tooltipOff) {
         positions[index] = pos;
         return;
       }
-
       if (!dotSnapping) {
         let beginning = 0;
         let end = line.getTotalLength();
         let target = null;
-
         while (true) {
           target = Math.floor((beginning + end) / 2);
           pos = line.getPointAtLength(target);
-
           if ((target === end || target === beginning) && pos.x !== x) {
             break;
           }
-
           if (pos.x > x) {
             end = target;
           } else if (pos.x < x) {
@@ -1531,7 +1446,6 @@ const drawTooltip$1 = _ref => {
             break;
           }
         }
-
         positions[index] = pos;
       } else {
         const [x1, x2] = xScale.range();
@@ -1554,10 +1468,9 @@ const drawTooltip$1 = _ref => {
     });
     const datas = chartData.map((_ref7, i) => {
       let {
-        values
-      } = _ref7,
-          rest = _objectWithoutPropertiesLoose(_ref7, _excluded$1);
-
+          values
+        } = _ref7,
+        rest = _objectWithoutPropertiesLoose(_ref7, _excluded$1);
       return _extends({}, rest, {
         value: getValue(values),
         invertValue: positions[i] ? yScale.invert(positions[i].y) : 0
@@ -1569,16 +1482,13 @@ const drawTooltip$1 = _ref => {
       } = _ref8;
       return isVoid(value);
     });
-
     if (noHasData && isVisible) {
       setVisible();
     } else if (!isVisible && !noHasData) {
       setVisible(true);
     }
-
     const topIndex = Object.keys(positions).reduce((acc, key, index) => {
       var _datas$Number, _datas$Number2;
-
       const prevValue = (_datas$Number = datas[Number(acc)]) == null ? void 0 : _datas$Number.value;
       const value = (_datas$Number2 = datas[Number(key)]) == null ? void 0 : _datas$Number2.value;
       const dynamicDotOff = argData == null ? void 0 : argData[index].dynamicDotOff;
@@ -1586,15 +1496,12 @@ const drawTooltip$1 = _ref => {
     }, '0');
     const labelTexts = labels && labels.style('left', (_, i) => {
       var _positions$i$x, _positions$i;
-
       return !dotSnapping ? left + "px" : ((_positions$i$x = (_positions$i = positions[i]) == null ? void 0 : _positions$i.x) != null ? _positions$i$x : 0) + "px";
     }).style('top', (_, i) => {
       var _positions$index$y, _positions$index;
-
       const index = typeof stackedTooltipIndex === 'number' ? stackedTooltipIndex : stackedTooltip ? topIndex : i;
       return ((_positions$index$y = (_positions$index = positions[index]) == null ? void 0 : _positions$index.y) != null ? _positions$index$y : 0) + (docY - nodeY) + "px";
     }).select("." + lineChartClassNames.lineChartLabel);
-
     if (renderTooltip && labels) {
       labels.html((_, index) => {
         return ReactDOMServer.renderToString(React__default.createElement(LabelContainer$1, {
@@ -1613,16 +1520,13 @@ const drawTooltip$1 = _ref => {
         return formatDynamicTooltip ? formatDynamicTooltip(invertValue, value) : format(invertValue);
       });
     }
-
     mouseLine.attr('d', () => {
       var _positions$topIndex;
-
       let d = 'M' + x + ',' + y1;
       d += ' ' + x + ',' + (tooltipLineTop ? y2 : ((_positions$topIndex = positions[topIndex]) == null ? void 0 : _positions$topIndex.y) || 0);
       return d;
     });
   };
-
   mouseRect.on('mouseover.tooltip', event => {
     labels = labelContainer.selectAll('div').data(data).join('div').attr('class', lineChartClassNames.lineChartMouseLabel + " " + (tooltipClassName || '')).style('opacity', '0').style('position', 'absolute').html(() => {
       const html = ReactDOMServer.renderToString(React__default.createElement(LabelContainer$1, {
@@ -1675,7 +1579,6 @@ const draw$3 = (node, props) => {
     dotSnapping,
     rightAxis
   } = props;
-
   if (node !== null && chartData.length) {
     const data = stacked ? stackedData(chartData) : chartData;
     const marginTop = margin ? margin.top : 0;
@@ -1713,7 +1616,6 @@ const draw$3 = (node, props) => {
     } = computeDimensions(yAxis);
     yAxis.attr('transform', "translate(" + (marginLeft + yAxisWidth) + ", 0)");
     let yAxisRightWidth = 0;
-
     if (rightAxis) {
       const rightAxisMin = d3.min(rightAxis);
       const rightAxisMax = d3.max(rightAxis);
@@ -1726,8 +1628,6 @@ const draw$3 = (node, props) => {
       yAxisRight.attr('transform', "translate(" + (width - yAxisRightWidth) + ", 0)");
     }
     /** xScale **/
-
-
     const lastIndex = labels && labels.length ? labels.length - 1 : data.reduce((acc, _ref3) => {
       let {
         values
@@ -1735,15 +1635,14 @@ const draw$3 = (node, props) => {
       return Math.max(acc, values.length);
     }, 0) - 1;
     const xScale = d3.scaleLinear().domain([0, lastIndex]).range([marginLeft + yAxisWidth + (yAxisPadding || 0), width - yAxisRightWidth - marginRight]);
-    const xAxisBottom = d3.axisBottom(xScale).tickFormat(value => // @ts-ignore
+    const xAxisBottom = d3.axisBottom(xScale).tickFormat(value =>
+    // @ts-ignore
     labels && labels.length > 0 ? labels[value] : 0).ticks(lastIndex);
-
     if (typeof xScaleItemWidth === 'number') {
       const [x1, x2] = xScale.range();
       const chartWidth = x2 - x1;
       xAxisBottom.ticks(Math.round(chartWidth / xScaleItemWidth)).tickSizeOuter(0);
     }
-
     customXAxis && customXAxis(xAxisBottom);
     drawGrid({
       svg,
@@ -1754,7 +1653,6 @@ const draw$3 = (node, props) => {
       drawGridY,
       drawGridX
     });
-
     if (Array.isArray(labels) && labels.length > 0) {
       const xAxis = svg.append('g').call(customXAxisSelection ? customXAxisSelection : none).attr('class', lineChartClassNames.lineChartXScaleGlobal).call(xAxisBottom);
       const {
@@ -1762,7 +1660,6 @@ const draw$3 = (node, props) => {
       } = computeDimensions(xAxis);
       xAxis.attr('transform', "translate(0, " + (height - Math.ceil(xAxisHeight) - marginBottom) + ")");
     }
-
     const line = d3.line().defined(d => d !== null).x((_, index) => xScale(index)).y(d => yScale(d)).curve(curve || d3.curveLinear);
     customLine && customLine(line);
     const withAreas = data.some(_ref4 => {
@@ -1771,10 +1668,8 @@ const draw$3 = (node, props) => {
       } = _ref4;
       return fill;
     });
-
     if (withAreas) {
       let dataIndex = -2;
-
       const getArea = d => {
         const {
           minAreaValues
@@ -1784,20 +1679,16 @@ const draw$3 = (node, props) => {
           if (index === 0) {
             dataIndex = dataIndex + 1;
           }
-
           let minValue = minTick;
-
           if (minAreaValues && typeof minAreaValues[index] === 'number') {
             minValue = minAreaValues[index] || minValue;
           } else if (minAreaValues) {
             minValue = yScale(minValue - value);
           }
-
           const currData = data[dataIndex];
           return stacked ? dataIndex > -1 ? yScale(typeof currData.values[index] !== 'number' ? 0 : currData.values[index]) : yScale(minValue) : yScale(minValue);
         }).y1(d => yScale(d)).curve(areaCurve || curve || d3.curveLinear);
       };
-
       svg.append('g').attr('class', lineChartClassNames.lineChartAreasGlobal).selectAll('path').data(data.filter(_ref5 => {
         let {
           fill
@@ -1818,7 +1709,6 @@ const draw$3 = (node, props) => {
         return areaStyle || '';
       });
     }
-
     svg.append('g').attr('class', lineChartClassNames.lineChartLinesGlobal).selectAll('path').data(data).join('path').attr('class', lineChartClassNames.lineChartLine).attr('d', d => line(d.values)).attr('stroke', _ref8 => {
       let {
         stroke
@@ -1830,13 +1720,12 @@ const draw$3 = (node, props) => {
       } = _ref9;
       return style || '';
     });
-    const dots = data.filter(_ref10 => {
+    const dots = data.filter(_ref0 => {
       let {
         dot
-      } = _ref10;
+      } = _ref0;
       return dot;
     });
-
     if (dots.length > 0) {
       const dotsGlobal = svg.append('g').attr('class', lineChartClassNames.lineChartDotsGlobalContainer);
       dots.forEach(item => {
@@ -1851,13 +1740,11 @@ const draw$3 = (node, props) => {
         } = dot;
         const dotsGroup = dotsGlobal.append('g').attr('class', lineChartClassNames.lineChartDotsGlobal);
         dotsGroup.selectAll('circle').data(values).join('circle').attr('cx', (_, index) => xScale(index)).attr('class', lineChartClassNames.lineChartDot).attr('cy', d => yScale(d)).attr('r', radius || 0).attr('style', style || '');
-
         if (filter) {
           dotsGroup.selectAll('circle').select((_, i, g) => filter(item, i, g) ? g[i] : null).remove();
         }
       });
     }
-
     d3.select(node).select("." + labelClassName$1).remove();
     withLabels && drawLabel({
       node,
@@ -1867,7 +1754,6 @@ const draw$3 = (node, props) => {
       xScale,
       formatLabel
     });
-
     if (dynamicTooltipEnable) {
       drawTooltip$1({
         tooltipLineTop,
@@ -1886,7 +1772,6 @@ const draw$3 = (node, props) => {
         lastIndex
       });
     }
-
     customize && customize({
       svg,
       yScale,
@@ -1905,9 +1790,7 @@ const LineChart = props => {
   React.useEffect(() => {
     node && draw$3(node, props);
   }, [node, props]);
-
   const onDraw = () => draw$3(node, props);
-
   useResize(props.width, onDraw);
   return React__default.createElement("div", {
     className: className,
@@ -1951,7 +1834,8 @@ const drawLines = _ref => {
   let linesSelection = null;
   let areasSelection = null;
   let area = null;
-  const line = d3.line().defined(d => d !== null).x((_, index) => xScale(index) + bandwidth / 2) // @ts-ignore
+  const line = d3.line().defined(d => d !== null).x((_, index) => xScale(index) + bandwidth / 2)
+  // @ts-ignore
   .y(d => yScale(d)).curve(curve || d3.curveLinear);
   const bandwidth = xScale.bandwidth();
   const linesData = lineData.filter(_ref2 => {
@@ -1966,7 +1850,6 @@ const drawLines = _ref => {
     } = _ref3;
     return lineType === 'area';
   });
-
   if (linesData.length > 0) {
     linesSelection = svg.append('g').attr('class', barChartLinesClassNames.barChartLinesGlobal).selectAll('path').data(linesData).join('path').attr('class', barChartLinesClassNames.barChartLine).attr('d', d => line(d.values)).attr('stroke', _ref4 => {
       let {
@@ -1980,16 +1863,15 @@ const drawLines = _ref => {
       return fill || 'none';
     });
   }
-
   if (areasData.length > 0) {
     let dataIndex = -2;
     area = d3.area().x((_, index) => xScale(index) + bandwidth / 2).y0((_, index) => {
       if (index === 0) {
         dataIndex = dataIndex + 1;
       }
-
       return stackedLine ? dataIndex > -1 ? yScale(typeof lineData[dataIndex].values[index] !== 'number' ? 0 : lineData[dataIndex].values[index]) : yScale(min) : yScale(min);
-    }) // @ts-ignore
+    })
+    // @ts-ignore
     .y1(d => yScale(d)).curve(curve || d3.curveLinear);
     areasSelection = svg.append('g').attr('class', barChartLinesClassNames.barChartAreasGlobal).selectAll('path').data(areasData).join('path').attr('class', barChartLinesClassNames.barChartArea).attr('d', d => area && area(d.values)).attr('fill', _ref6 => {
       let {
@@ -1998,7 +1880,6 @@ const drawLines = _ref => {
       return fill || 'none';
     });
   }
-
   return {
     areasSelection,
     linesSelection,
@@ -2071,10 +1952,8 @@ const useSelection = (node, props) => {
   const onStartDrawing = React.useCallback(e => {
     const isTouch = Boolean(e.touches);
     e.stopPropagation();
-
     if (node && e.which !== 3) {
       var _props$margin$bottom, _props$margin, _e$touches$;
-
       clearSelection();
       selection.current = document.createElement("div");
       selection.current.setAttribute("class", barChartClassNames.barChartSelection);
@@ -2090,14 +1969,11 @@ const useSelection = (node, props) => {
   const onDraw = React.useCallback(e => {
     const isTouch = Boolean(e.touches);
     e.stopPropagation();
-
     if (node && drawing.current && selection.current) {
       var _e$touches$2;
-
       const nodeWidth = node.firstChild.getBoundingClientRect().width;
       const offsetX = isTouch ? ((_e$touches$2 = e.touches[0]) == null ? void 0 : _e$touches$2.pageX) - node.firstChild.getBoundingClientRect().left : e.offsetX;
       const newWidth = offsetX - startX.current;
-
       if (offsetX >= 0) {
         if (newWidth > 0) {
           selection.current.style.marginLeft = "0px";
@@ -2108,7 +1984,6 @@ const useSelection = (node, props) => {
           selection.current.style.marginLeft = newWidth + "px";
         }
       }
-
       if (isTouch) {
         if (node.offsetLeft > e.touches[0].pageX) {
           selection.current.style.right = nodeWidth - startX.current + "px";
@@ -2126,7 +2001,6 @@ const useSelection = (node, props) => {
         selection.current.style.width = startX.current + "px";
         selection.current.style.marginLeft = "-" + startX.current + "px";
       }
-
       if (node.offsetLeft + node.offsetWidth < e.pageX) {
         const nodeWidth = node.firstChild.getBoundingClientRect().width;
         selection.current.style.left = startX.current + "px";
@@ -2143,12 +2017,10 @@ const useSelection = (node, props) => {
       const selectionMaxX = selection.current.offsetLeft + selectionWidth <= nodeWidth ? selection.current.offsetLeft + selectionWidth >= 0 ? selection.current.offsetLeft + selectionWidth : 0 : nodeWidth;
       const min = Math.round(selectionMinX);
       const max = Math.round(selectionMaxX);
-
       if (max - min > 0 && props.onSelect) {
         props.onSelect([min, max]);
       }
     }
-
     clearSelection();
   }, [node, clearSelection]);
   React.useEffect(() => {
@@ -2165,15 +2037,14 @@ const useSelection = (node, props) => {
       node.addEventListener("touchend", onStopDrawing);
       document.addEventListener("mouseup", onStopDrawing);
     }
-
     return () => {
-      node == null ? void 0 : node.removeEventListener("mousedown", onStartDrawing);
-      node == null ? void 0 : node.removeEventListener("touchstart", onStartDrawing);
-      node == null ? void 0 : node.removeEventListener("mousemove", onDraw);
-      node == null ? void 0 : node.removeEventListener("touchmove", onDraw);
-      node == null ? void 0 : node.removeEventListener("mouseleave", onMouseLeave);
-      node == null ? void 0 : node.removeEventListener("mouseup", onStopDrawing);
-      node == null ? void 0 : node.removeEventListener("touchend", onStopDrawing);
+      node == null || node.removeEventListener("mousedown", onStartDrawing);
+      node == null || node.removeEventListener("touchstart", onStartDrawing);
+      node == null || node.removeEventListener("mousemove", onDraw);
+      node == null || node.removeEventListener("touchmove", onDraw);
+      node == null || node.removeEventListener("mouseleave", onMouseLeave);
+      node == null || node.removeEventListener("mouseup", onStopDrawing);
+      node == null || node.removeEventListener("touchend", onStopDrawing);
       document.removeEventListener("mouseup", onStopDrawing);
     };
   }, [node]);
@@ -2193,14 +2064,11 @@ const drawGrid$1 = _ref => {
   const yTicks = yScale.ticks(yTicksCount);
   const range = xScale.range();
   const domain = xScale.domain();
-
   if (drawGridX) {
     global.append('g').selectAll('line').data(yTicks).join('line').attr('class', d => d === 0 ? barChartClassNames.barChartGridLineX + " " + barChartClassNames.barChartGridLineXZero : barChartClassNames.barChartGridLineX).attr('x1', () => range[0]).attr('x2', () => range[1]).attr('y1', d => Math.round(yScale(d))).attr('y2', d => Math.round(yScale(d)));
   }
-
   if (drawGridY) {
     const getX = index => domain[index] !== void 0 ? index === 0 ? range[0] : Math.round(xScale.step() * index + range[0] - xScale.step() / 2 * xScale.padding()) : range[1];
-
     global.append('g').selectAll('line').data(Array.from({
       length: domain.length + 1
     }, (_, index) => index)).join('line').attr('class', d => d === 0 ? barChartClassNames.barChartGridLineY + " " + barChartClassNames.barChartGridLineYZero : barChartClassNames.barChartGridLineY).attr('x1', getX).attr('x2', getX).attr('y1', () => Math.round(yScale(yTicks[0]))).attr('y2', () => Math.round(yScale(yTicks[yTicks.length - 1])));
@@ -2218,7 +2086,6 @@ const getDomain = _ref => {
   let MAX = Number.NEGATIVE_INFINITY;
   data.forEach(_ref2 => {
     let groups = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
-
     let groupMax = 0;
     let groupMin = 0;
     Object.keys(groups).forEach(key => {
@@ -2227,7 +2094,6 @@ const getDomain = _ref => {
       let stackMin = 0;
       Object.keys(group).forEach(groupKey => {
         const value = group[groupKey];
-
         if (value > 0) {
           stackMax += value;
         } else {
@@ -2240,14 +2106,12 @@ const getDomain = _ref => {
     MIN = Math.min(MIN, groupMax);
     MAX = Math.max(MAX, groupMin);
   });
-
   if (MIN === 0 && MAX === 0) {
     return {
       min: typeof minDomainValue === 'number' ? minDomainValue : 0,
       max: typeof maxDomainValue === 'number' ? maxDomainValue : 1
     };
   }
-
   return {
     min: typeof minDomainValue === 'number' ? minDomainValue : MIN,
     max: typeof maxDomainValue === 'number' ? maxDomainValue : MAX
@@ -2267,10 +2131,9 @@ const marshaling = _ref => {
   } = _ref;
   return data.map((_ref2, groupIndex) => {
     let {
-      groupName
-    } = _ref2,
-        groups = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
-
+        groupName
+      } = _ref2,
+      groups = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
     const marshalledGroup = [];
     const hundred = 100;
     const bandwidth = xScale.bandwidth();
@@ -2287,11 +2150,9 @@ const marshaling = _ref => {
         const x = (barWidth + barPadding) * stackIndex + bandwidth / 2 - barGroupWidth / 2;
         const isPositiveValue = value > 0;
         const height = isPositiveValue ? Math.abs((yScale(stackMax - value) - yScale(stackMax) + Number.EPSILON) * hundred / hundred) : Math.abs((yScale(stackMin - value) - yScale(stackMin) + Number.EPSILON) * hundred / hundred);
-
         if (isPositiveValue) {
           stackMax += value;
         }
-
         const y = isPositiveValue ? (yScale(stackMax) + Number.EPSILON) * hundred / hundred : yScale(stackMin) - yScale(0) + yScale(0);
         marshalledGroup.push({
           x,
@@ -2304,7 +2165,6 @@ const marshaling = _ref => {
           stackIndex,
           groupIndex
         });
-
         if (!isPositiveValue) {
           stackMin += value;
         }
@@ -2318,10 +2178,8 @@ const getLabelY = (labelPosition, y2, item) => {
   switch (labelPosition) {
     case 'center':
       return item.y + item.height / 2 - y2;
-
     case 'bottom':
       return item.y + item.height - y2;
-
     default:
       return item.y;
   }
@@ -2331,10 +2189,8 @@ const getLabel = labelPosition => {
   switch (labelPosition) {
     case 'top':
       return LabelTop;
-
     case 'bottom':
       return LabelBottom;
-
     default:
       return Label$1;
   }
@@ -2378,9 +2234,7 @@ const drawTooltip$2 = _ref => {
   const [y1, y2] = yScale.range();
   const bandwidth = xScale.bandwidth();
   const format = d3.format(',');
-
   const getX = index => xScaleBandDomain[index] !== void 0 ? index === 0 ? x1 : Math.round(xScale.step() * index + x1 - xScale.step() / 2 * xScale.padding()) : x2;
-
   const groups = xScaleBandDomain.map(value => getX(Number(value) + 1));
   const topYDomain = tooltipYDomain ? tooltipYDomain({
     data: marshalledData,
@@ -2403,11 +2257,9 @@ const drawTooltip$2 = _ref => {
   }, []);
   const mouseGlobal = svg.append('g').attr('class', 'lineChartMouseGlobal');
   const mouseRect = mouseGlobal.append('rect').attr('width', x2 - x1).attr('height', Math.abs(y1 - y2)).attr('class', barChartClassNames.barChartMouseRect).attr('transform', "translate(" + x1 + ", " + y2 + ")");
-
   if (dynamicTooltipEnable) {
     const tooltipContainer = tooltipRoot || document.querySelector('body');
     let tooltip = d3.select("." + barChartClassNames.barChartMouseTooltip);
-
     if (tooltip.size() === 0) {
       tooltip = d3.select(tooltipContainer).append('div').attr('class', barChartClassNames.barChartMouseTooltip).style('opacity', '0').style('position', 'absolute').html(() => {
         const html = ReactDOMServer.renderToString(React__default.createElement(TooltipFlex, {
@@ -2416,16 +2268,13 @@ const drawTooltip$2 = _ref => {
         return html;
       });
     }
-
     const barChartTootipFlex = tooltip.select("." + barChartClassNames.barChartTooltipFlex);
     let isVisible = false;
     let flagCurrIndex = null;
-
     const setVisible = visible => {
       isVisible = Boolean(visible);
       const opacity = isVisible ? '1' : '0';
       tooltip.style('opacity', opacity);
-
       if (!isVisible) {
         tooltip.attr('class', barChartClassNames.barChartMouseTooltip);
         flagCurrIndex = null;
@@ -2437,7 +2286,6 @@ const drawTooltip$2 = _ref => {
         tooltip.style('transition', null);
       }
     };
-
     mouseRect.on('mouseout.tooltip', () => setVisible());
     mouseRect.on('touchmove.tooltip mousemove.tooltip', event => {
       const [docX, docY] = d3.pointer(event, document);
@@ -2447,57 +2295,45 @@ const drawTooltip$2 = _ref => {
       const offsetX = docX - nodeX;
       const offsetY = docY - nodeY;
       const currIndex = groups.findIndex(value => x <= value);
-
       if (isBarTooltip) {
         const containts = document.elementsFromPoint(event.clientX, event.clientY);
         const currBars = d3.select(bars.nodes()[currIndex]).selectAll('rect').nodes();
         const isContains = containts.some(item => currBars.includes(item));
-
         if (!isContains) {
           if (isVisible) {
             setVisible(false);
           }
-
           mouseRect.style('cursor', 'default');
           return;
         } else {
           mouseRect.style('cursor', 'pointer');
         }
       }
-
       const top = (typeof tooltipY === 'number' ? tooltipY : topYDomain[currIndex] - y2) + offsetY;
       const left = (tooltipBind ? (xScale(currIndex) || 0) + bandwidth / 2 : x) + offsetX;
-
       if (tooltipBind && flagCurrIndex === currIndex) {
         return;
       }
-
       let currData = marshalledData[currIndex];
-
       if (Array.isArray(currData) && currData.length === 0) {
         return;
       }
-
       if (lineData) {
         const currLineData = lineData.map(_ref4 => {
           let {
-            values
-          } = _ref4,
-              rest = _objectWithoutPropertiesLoose(_ref4, _excluded$4);
-
+              values
+            } = _ref4,
+            rest = _objectWithoutPropertiesLoose(_ref4, _excluded$4);
           return _extends({}, rest, {
             value: values[currIndex],
             groupName: data[currIndex] && data[currIndex].groupName
           });
         });
-
         if (Array.isArray(currLineData) && Array.isArray(currData)) {
           currData = currData.concat(currLineData);
         }
       }
-
       const svgWidth = svg.node().getBoundingClientRect().width;
-
       if (typeof setTooltipPosition === 'function') {
         setTooltipPosition({
           left,
@@ -2508,7 +2344,6 @@ const drawTooltip$2 = _ref => {
       } else if (!setTooltipPosition) {
         tooltip.style('left', left + "px").style('top', top + "px");
       }
-
       if (renderTooltip) {
         barChartTootipFlex.html(() => {
           const html = ReactDOMServer.renderToString(React__default.createElement(React__default.Fragment, null, renderTooltip(currData, setTooltipPosition ? {
@@ -2523,7 +2358,6 @@ const drawTooltip$2 = _ref => {
         if (!isVisible) {
           setVisible(true);
         }
-
         barChartTootipFlex.html(() => {
           const html = ReactDOMServer.renderToString(React__default.createElement(TooltipContainer, {
             className: barChartClassNames.barChartTooltip
@@ -2562,18 +2396,14 @@ const drawTooltip$2 = _ref => {
           return html;
         });
       }
-
       flagCurrIndex = currIndex;
-
       if (!isVisible) {
         setVisible(true);
       }
     });
   }
-
   const container = d3.select(node).append('div').attr('class', barChartClassNames.barChartMouseContainer);
   const labelContainer = container.append('div').attr('class', barChartClassNames.barChartLabelContainer).style('position', 'absolute').style('top', y2 + "px");
-
   const isMouseWithin = (e, callback) => {
     const [rectrX, rectrY] = d3.pointer(e, mouseRect);
     const [nodeX, nodeY] = d3.pointer(e, node);
@@ -2581,14 +2411,11 @@ const drawTooltip$2 = _ref => {
     const y = rectrY - nodeY;
     const currIndex = groups.findIndex(value => x <= value);
     const dataItem = marshalledData[currIndex][0];
-
     if (dataItem.height >= y1 - y) {
       callback(dataItem);
     }
   };
-
   mouseGlobal.on("click", e => isMouseWithin(e, dataItem => onBarClick && onBarClick(dataItem))).on("mousemove", e => isMouseWithin(e, dataItem => onBarHover && onBarHover(dataItem))).on("mouseleave", () => onBarHover && onBarHover(undefined));
-
   if (labelPosition) {
     const concatedData = lineData ? marshalledData.map((stack, index) => stack.concat(lineData.map(_ref6 => {
       let {
@@ -2606,14 +2433,12 @@ const drawTooltip$2 = _ref => {
           indexFlag,
           stacksCount
         } = acc;
-
         if (stackIndex !== indexFlag) {
           return {
             indexFlag: stackIndex,
             stacksCount: stacksCount + 1
           };
         }
-
         return acc;
       }, {
         indexFlag: -1,
@@ -2658,14 +2483,11 @@ const resizeBarWidth = _ref => {
   const chartWidth = range[1] - range[0];
   const barsWidth = data.reduce((acc, _ref2) => {
     let curr = _objectWithoutPropertiesLoose(_ref2, _excluded$5);
-
     return acc + Object.keys(curr).reduce((acc, _key, index) => index > 0 ? acc + (barWidth || 0) + (barPadding || 0) : acc + barWidth, 0) + groupPadding;
   }, groupPadding);
-
   if (chartWidth < barsWidth) {
     return Math.floor(barWidth * (chartWidth / barsWidth));
   }
-
   return barWidth;
 };
 
@@ -2729,7 +2551,6 @@ const draw$4 = (node, props) => {
     onBarClick,
     onBarHover
   } = props;
-
   if (node !== null && data.length) {
     const marginTop = margin ? margin.top : 0;
     const marginRight = margin ? margin.right : 0;
@@ -2788,7 +2609,6 @@ const draw$4 = (node, props) => {
     customXScale && customXScale(xScale);
     const [x1, x2] = xScale.range();
     const xAxisBottom = d3.axisBottom(xScale).tickFormat(value => labels[Number(value)]);
-
     if (typeof xScaleItemWidth === 'number') {
       xAxisBottom.tickValues(xScale.domain().filter((_, i, array) => {
         const chartWidth = x2 - x1;
@@ -2798,7 +2618,6 @@ const draw$4 = (node, props) => {
         return !(i % divider);
       })).tickSizeOuter(0);
     }
-
     customXAxisBottom && customXAxisBottom(xAxisBottom, {
       node,
       labels
@@ -2842,24 +2661,19 @@ const draw$4 = (node, props) => {
       if (!marker) {
         return;
       }
-
       if (marker.horizontal) {
         if (marker.line) {
           svg.append('line').style("stroke", marker.lineColor || marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", marginLeft + yAxisWidth).attr("y1", yScale(marker.value) + 1).attr("x2", width).attr("y2", yScale(marker.value) + 1);
         }
-
         svg.append("text").attr("y", yScale(marker.value) + 1).attr("x", marginLeft + yAxisWidth).attr('text-anchor', 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
         return;
       }
-
       if (marker.line) {
         svg.append('line').style("stroke", marker.lineColor || marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", width / data.length * marker.value + 1).attr("y1", 0).attr("x2", width / data.length * marker.value + 1).attr("y2", height - marginTop - marginBottom + 8);
       }
-
       svg.append("text").attr("y", height - 2).attr("x", width / data.length * marker.value + 1).attr('text-anchor', marker.align === 'right' ? 'end' : marker.align === 'left' ? 'start' : 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
     });
     let lines = null;
-
     if (Array.isArray(lineData) && lineData.length > 0) {
       lines = drawLines({
         svg,
@@ -2871,7 +2685,6 @@ const draw$4 = (node, props) => {
         curve
       });
     }
-
     customBars && customBars({
       bars,
       yScale,
@@ -2879,7 +2692,6 @@ const draw$4 = (node, props) => {
       marshalledData,
       lineData
     });
-
     if (dynamicTooltipEnable || labelPosition) {
       drawTooltip$2({
         svg,
@@ -2912,7 +2724,6 @@ const draw$4 = (node, props) => {
         onBarHover
       });
     }
-
     customize && customize({
       svg,
       marshalledData,
@@ -2934,9 +2745,7 @@ const BarChart = props => {
   React.useEffect(() => {
     node && draw$4(node, props);
   }, [node, props]);
-
   const onDraw = () => draw$4(node, props);
-
   useResize(props.width, onDraw);
   useSelection(selectable ? node : null, props);
   return React__default.createElement("div", {
@@ -2993,13 +2802,11 @@ const useMarshaling = _ref => {
             return value;
           })]);
         }
-
         return item.map(_ref4 => {
           let {
-            value
-          } = _ref4,
-              rest = _objectWithoutPropertiesLoose(_ref4, _excluded$6);
-
+              value
+            } = _ref4,
+            rest = _objectWithoutPropertiesLoose(_ref4, _excluded$6);
           return _extends({}, rest, {
             value,
             width: scaleLinear(value),
@@ -3013,26 +2820,26 @@ const useMarshaling = _ref => {
 
 var _templateObject$b, _templateObject2$5, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1;
 const horizontalBarChartClassNames = {
-  horizontalBarChartButtonTd: 'horizontalBarChartButtonTd',
-  horizontalBarChartLabelTd: 'horizontalBarChartLabelTd',
-  horizontalBarChartLabelCell: 'horizontalBarChartLabelCell',
-  horizontalBarChartBarTd: 'horizontalBarChartBarTd',
-  horizontalBarChartBarFlex: 'horizontalBarChartBarFlex',
-  horizontalBarChartBar: 'horizontalBarChartBar',
-  horizontalBarChartBarFirst: 'horizontalBarChartBarFirst',
-  horizontalBarChartBarLast: 'horizontalBarChartBarLast',
-  horizontalBarChartBarOnly: 'horizontalBarChartBarOnly',
-  horizontalBarChartTooltipFlex: 'horizontalBarChartTooltipFlex',
-  horizontalBarChartStackWrapper: 'horizontalBarChartStackWrapper',
-  horizontalBarChartTooltipContainer: 'horizontalBarChartTooltipContainer',
-  horizontalBarChartStackSumContainer: 'horizontalBarChartStackSumContainer',
-  horizontalBarChartStackSum: 'horizontalBarChartStackSum',
-  horizontalBarChartXScaleTd: 'horizontalBarChartXScaleTd',
-  horizontalBarChartXScaleTicks: 'horizontalBarChartXScaleTicks',
-  horizontalBarChartXScaleTick: 'horizontalBarChartXScaleTick',
-  horizontalBarChartTooltipItem: 'horizontalBarChartTooltipItem',
-  horizontalBarChartTooltipName: 'horizontalBarChartTooltipName',
-  horizontalBarChartTooltipValue: 'horizontalBarChartTooltipValue'
+  horizontalBarChartButtonTd: "horizontalBarChartButtonTd",
+  horizontalBarChartLabelTd: "horizontalBarChartLabelTd",
+  horizontalBarChartLabelCell: "horizontalBarChartLabelCell",
+  horizontalBarChartBarTd: "horizontalBarChartBarTd",
+  horizontalBarChartBarFlex: "horizontalBarChartBarFlex",
+  horizontalBarChartBar: "horizontalBarChartBar",
+  horizontalBarChartBarFirst: "horizontalBarChartBarFirst",
+  horizontalBarChartBarLast: "horizontalBarChartBarLast",
+  horizontalBarChartBarOnly: "horizontalBarChartBarOnly",
+  horizontalBarChartTooltipFlex: "horizontalBarChartTooltipFlex",
+  horizontalBarChartStackWrapper: "horizontalBarChartStackWrapper",
+  horizontalBarChartTooltipContainer: "horizontalBarChartTooltipContainer",
+  horizontalBarChartStackSumContainer: "horizontalBarChartStackSumContainer",
+  horizontalBarChartStackSum: "horizontalBarChartStackSum",
+  horizontalBarChartXScaleTd: "horizontalBarChartXScaleTd",
+  horizontalBarChartXScaleTicks: "horizontalBarChartXScaleTicks",
+  horizontalBarChartXScaleTick: "horizontalBarChartXScaleTick",
+  horizontalBarChartTooltipItem: "horizontalBarChartTooltipItem",
+  horizontalBarChartTooltipName: "horizontalBarChartTooltipName",
+  horizontalBarChartTooltipValue: "horizontalBarChartTooltipValue"
 };
 const Table = /*#__PURE__*/styled__default.table(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 const LabelCell = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: right;\n"])));
@@ -3097,7 +2904,6 @@ const useTooltip = _ref => {
   }, [tooltipRoot]);
   const onMouseMove = React.useCallback((event, bars) => {
     let [x, y] = d3.pointer(event, document);
-
     if (!tooltipBind && 'getBoundingClientRect' in event.target) {
       const {
         width,
@@ -3107,11 +2913,9 @@ const useTooltip = _ref => {
       x = x - barX + width / 2;
       y = y - barY + height / 2;
     }
-
     if (rootElement) {
       rootElement.style.visibility = 'visible';
     }
-
     reactDom.render(React__default.createElement(Tooltip, {
       style: _extends({
         left: x,
@@ -3135,13 +2939,12 @@ const _excluded$7 = ["item", "mouseMove", "mouseLeave", "tooltipBind"];
 const useStackWrapper = stackedTooltip => {
   return React.useMemo(() => stackedTooltip ? _ref => {
     let {
-      item,
-      mouseMove,
-      mouseLeave,
-      tooltipBind
-    } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
+        item,
+        mouseMove,
+        mouseLeave,
+        tooltipBind
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
     return React__default.createElement(StackWrapper, Object.assign({
       className: horizontalBarChartClassNames.horizontalBarChartStackWrapper,
       onMouseOver: event => mouseMove(event, item),
@@ -3313,7 +3116,7 @@ const HorizontalBarChart = _ref => {
     });
     return React__default.createElement("tr", {
       key: "row-" + rowIndex
-    }, typeof renderButton === 'function' && React__default.createElement("td", {
+    }, typeof renderButton === "function" && React__default.createElement("td", {
       className: horizontalBarChartClassNames.horizontalBarChartButtonTd
     }, renderButton(item, rowIndex)), React__default.createElement("td", {
       className: horizontalBarChartClassNames.horizontalBarChartLabelTd
@@ -3322,12 +3125,12 @@ const HorizontalBarChart = _ref => {
     }, labels[rowIndex])), React__default.createElement(BarsTd, {
       className: horizontalBarChartClassNames.horizontalBarChartBarTd,
       style: {
-        pointerEvents: fullChartTooltip ? 'none' : 'auto'
+        pointerEvents: fullChartTooltip ? "none" : "auto"
       }
     }, React__default.createElement(BarFlex, {
       className: horizontalBarChartClassNames.horizontalBarChartBarFlex,
       style: {
-        pointerEvents: fullChartTooltip ? 'none' : 'auto'
+        pointerEvents: fullChartTooltip ? "none" : "auto"
       }
     }, React__default.createElement(Stack, {
       style: stackedTooltip ? {
@@ -3338,7 +3141,7 @@ const HorizontalBarChart = _ref => {
       mouseMove: mouseMove,
       mouseLeave: mouseLeave
     }), item.map((bar, barIndex, array) => bar.value !== 0 && React__default.createElement(Bar, {
-      key: "bar-" + (bar.name || '') + "-" + barIndex,
+      key: "bar-" + (bar.name || "") + "-" + barIndex,
       formatNativeTitle: formatNativeTitle,
       bar: bar,
       tooltipBind: tooltipBind,
@@ -3355,7 +3158,7 @@ const HorizontalBarChart = _ref => {
       className: horizontalBarChartClassNames.horizontalBarChartStackSum
     }, stackSum)))), renderDataTable && renderDataTable(item, stackSum, rowIndex));
   }), !withoutXScale && React__default.createElement(XScale, {
-    maxValue: typeof maxValue === 'number' ? maxValue : fullMax,
+    maxValue: typeof maxValue === "number" ? maxValue : fullMax,
     scaleTicks: scaleTicks,
     renderTicks: renderTicks,
     scaleDomain: scaleDomain
@@ -3387,20 +3190,20 @@ const bubbleChartDefaultProps = {
 
 var _templateObject$e, _templateObject2$7;
 const bubbleChartClassNames = {
-  bubbleChartYAxis: 'bubbleChartYAxis',
-  bubbleChartYAxisZeroTick: 'bubbleChartYAxisZeroTick',
-  bubbleChartXAxis: 'bubbleChartXAxis',
-  bubbleChartGridGlobal: 'bubbleChartGridGlobal',
-  bubbleChartGridLineX: 'bubbleChartGridLineX',
-  bubbleChartGridLineY: 'bubbleChartGridLineY',
-  bubbleChartCircle: 'bubbleChartCircle',
-  bubbleChartYScaleLabel: 'bubbleChartYScaleLabel',
-  bubbleChartTooltip: 'bubbleChartTooltip',
-  bubbleChartTooltipContainer: 'bubbleChartTooltipContainer',
-  bubbleChartTooltipFlex: 'bubbleChartTooltipFlex',
-  bubbleChartTip: 'bubbleChartTip'
-};
-const SvgWrapper$5 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", ",\n    .", ",\n    .", " {\n    shape-rendering: crispEdges;\n  }\n\n  .", ",\n    .", " {\n    stroke: rgba(149, 149, 149, 0.24);\n  }\n\n  .", " {\n    font-size: 10px;\n  }\n"])), bubbleChartClassNames.bubbleChartYAxis, bubbleChartClassNames.bubbleChartXAxis, bubbleChartClassNames.bubbleChartGridGlobal, bubbleChartClassNames.bubbleChartGridLineX, bubbleChartClassNames.bubbleChartGridLineY, bubbleChartClassNames.bubbleChartYScaleLabel);
+  bubbleChartYAxis: "bubbleChartYAxis",
+  bubbleChartYAxisZeroTick: "bubbleChartYAxisZeroTick",
+  bubbleChartXAxis: "bubbleChartXAxis",
+  bubbleChartGridGlobal: "bubbleChartGridGlobal",
+  bubbleChartGridLineX: "bubbleChartGridLineX",
+  bubbleChartGridLineY: "bubbleChartGridLineY",
+  bubbleChartCircle: "bubbleChartCircle",
+  bubbleChartYScaleLabel: "bubbleChartYScaleLabel",
+  bubbleChartTooltip: "bubbleChartTooltip",
+  bubbleChartTooltipContainer: "bubbleChartTooltipContainer",
+  bubbleChartTooltipFlex: "bubbleChartTooltipFlex",
+  bubbleChartTip: "bubbleChartTip"
+};
+const SvgWrapper$5 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", ",\n  .", ",\n  .", " {\n    shape-rendering: crispEdges;\n  }\n\n  .", ",\n  .", " {\n    stroke: rgba(149, 149, 149, 0.24);\n  }\n\n  .", " {\n    font-size: 10px;\n  }\n"])), bubbleChartClassNames.bubbleChartYAxis, bubbleChartClassNames.bubbleChartXAxis, bubbleChartClassNames.bubbleChartGridGlobal, bubbleChartClassNames.bubbleChartGridLineX, bubbleChartClassNames.bubbleChartGridLineY, bubbleChartClassNames.bubbleChartYScaleLabel);
 const TooltipStyles$2 = /*#__PURE__*/styled.createGlobalStyle(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    position: absolute;\n    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);\n    pointer-events: none;\n    z-index: 1;\n  }\n"])), bubbleChartClassNames.bubbleChartTooltipContainer);
 
 const drawGrid$2 = _ref => {
@@ -3416,11 +3219,9 @@ const drawGrid$2 = _ref => {
   const [min, max] = xScale.domain();
   const global = svg.append('g').attr('class', bubbleChartClassNames.bubbleChartGridGlobal);
   const yTicks = yScale.ticks(yTicksCount);
-
   if (drawGridX) {
     global.append('g').selectAll('line').data(yTicks).join('line').attr('class', bubbleChartClassNames.bubbleChartGridLineX).attr('x1', () => xScale(min)).attr('x2', () => xScale(max)).attr('y1', d => Math.round(yScale(d))).attr('y2', d => Math.round(yScale(d)));
   }
-
   if (drawGridY) {
     global.append('g').selectAll('line').data(xScale.ticks(yTicksCount)).join('line').attr('class', bubbleChartClassNames.bubbleChartGridLineY).attr('x1', d => Math.round(xScale(d))).attr('x2', d => Math.round(xScale(d))).attr('y1', () => Math.round(yScale(yTicks[0]))).attr('y2', () => Math.round(yScale(yTicks[yTicks.length - 1])));
   }
@@ -3439,11 +3240,9 @@ const drawTooltip$3 = _ref => {
   const root = tooltipRoot || document.querySelector('body');
   const format = d3.format(',');
   let container = d3.select(root).select("." + bubbleChartClassNames.bubbleChartTooltip);
-
   if (container.node() === null) {
     container = d3.select(root).append('div').attr('class', bubbleChartClassNames.bubbleChartTooltip);
   }
-
   let tooltip = container.append('div').attr('class', bubbleChartClassNames.bubbleChartTooltipContainer + " " + (tooltipClassName || '')).style('opacity', '0');
   bubbles.on('mouseover.tooltip', (event, data) => {
     const {
@@ -3504,7 +3303,6 @@ const draw$5 = (node, props) => {
     tooltipClassName,
     renderTooltip
   } = props;
-
   if (node !== null && data.length) {
     const marginTop = margin ? margin.top : 0;
     const marginRight = margin ? margin.right : 0;
@@ -3558,7 +3356,6 @@ const draw$5 = (node, props) => {
     const yTicksCount = yAxisLeft.tickArguments()[0];
     const yAxis = svg.append('g').attr('class', bubbleChartClassNames.bubbleChartYAxis).call(yAxisLeft);
     let yScaleLabelHeight = yScaleLabelPadding || 0;
-
     if (yScaleLabel) {
       const label = svg.append('text').text(yScaleLabel).attr('class', bubbleChartClassNames.bubbleChartYScaleLabel);
       const {
@@ -3568,7 +3365,6 @@ const draw$5 = (node, props) => {
       yScaleLabelHeight = yScaleLabelHeight + height;
       label.attr('transform', "rotate(-90) translate(-" + (yRange1 + marginBottom + width) / 2 + ", " + height + ")");
     }
-
     yAxis.selectAll('.tick').attr('class', value => {
       return value === 0 ? "tick " + bubbleChartClassNames.bubbleChartYAxisZeroTick : 'tick';
     });
@@ -3591,21 +3387,19 @@ const draw$5 = (node, props) => {
         xValue
       } = _ref9;
       return xValue;
-    }), d3.max(data, _ref10 => {
+    }), d3.max(data, _ref0 => {
       let {
         xValue
-      } = _ref10;
+      } = _ref0;
       return xValue;
     })]).range([marginLeft + yAxisWidth + (yAxisPadding || 0) + yScaleLabelHeight, width - marginRight]);
     customXScale && customXScale(xScale);
     const xAxisBottom = d3.axisBottom(xScale);
-
     if (typeof xScaleItemWidth === 'number') {
       const [x1, x2] = xScale.range();
       const chartWidth = x2 - x1;
       xAxisBottom.ticks(Math.round(chartWidth / xScaleItemWidth)).tickSizeOuter(0);
     }
-
     const xAxis = svg.append('g').call(xAxisBottom).attr('class', bubbleChartClassNames.bubbleChartXAxis);
     customXAxis && customXAxis(xAxis);
     yAxis.attr('transform', "translate(" + (marginLeft + yAxisWidth + yScaleLabelHeight) + ", 0)");
@@ -3618,38 +3412,37 @@ const draw$5 = (node, props) => {
       drawGridX
     });
     xAxis.attr('transform', "translate(0, " + (yScale(yTicks[0]) + (xAxisPadding || 0)) + ")");
-    const bubbles = svg.append('g').selectAll('dot').data(data).enter().append('circle').attr('class', bubbleChartClassNames.bubbleChartCircle).attr('cx', _ref11 => {
+    const bubbles = svg.append('g').selectAll('dot').data(data).enter().append('circle').attr('class', bubbleChartClassNames.bubbleChartCircle).attr('cx', _ref1 => {
       let {
         xValue
-      } = _ref11;
+      } = _ref1;
       return xScale(xValue);
-    }).attr('cy', _ref12 => {
+    }).attr('cy', _ref10 => {
       let {
         yValue
-      } = _ref12;
+      } = _ref10;
       return yScale(yValue);
-    }).attr('r', _ref13 => {
+    }).attr('r', _ref11 => {
       let {
         sizeValue
-      } = _ref13;
+      } = _ref11;
       return sizeScale(sizeValue) / 2;
-    }).attr('fill', _ref14 => {
+    }).attr('fill', _ref12 => {
       let {
         color
-      } = _ref14;
+      } = _ref12;
       return color || 'rgba(0, 176, 113, 0.6)';
-    }).attr('stroke', _ref15 => {
+    }).attr('stroke', _ref13 => {
       let {
         stroke
-      } = _ref15;
+      } = _ref13;
       return stroke || 'transparent';
-    }).attr('style', _ref16 => {
+    }).attr('style', _ref14 => {
       let {
         style
-      } = _ref16;
+      } = _ref14;
       return style || bubbleStyle || '';
     });
-
     if (enableTooltip) {
       drawTooltip$3({
         bubbles,
@@ -3658,7 +3451,6 @@ const draw$5 = (node, props) => {
         renderTooltip
       });
     }
-
     customize && customize({
       svg,
       bubbles,
@@ -3688,9 +3480,7 @@ const BubbleChart = props => {
   React.useEffect(() => {
     return () => unmount(tooltipRoot);
   }, [tooltipRoot]);
-
   const onDraw = () => draw$5(node, props);
-
   useResize(props.width, onDraw);
   return React__default.createElement("div", {
     className: className,