@evergis/charts 3.1.6 → 3.1.7

package/dist/charts.cjs.development.js

@@ -1,3513 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var styled = require('styled-components');
-var styled__default = _interopDefault(styled);
-var React = require('react');
-var React__default = _interopDefault(React);
-var d3 = require('d3');
-var ReactDOMServer = _interopDefault(require('react-dom/server'));
-var lodash = require('lodash');
-var reactDom = require('react-dom');
-
-function _extends() {
-  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 n;
-  }, _extends.apply(null, arguments);
-}
-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 t;
-}
-function _taggedTemplateLiteralLoose(e, t) {
-  return t || (t = e.slice(0)), e.raw = t, e;
-}
-
-var _templateObject;
-const Wrapper = /*#__PURE__*/styled__default.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n"])));
-
-function useNode() {
-  const [node, onSetNode] = React.useState(null);
-  const ref = React.useCallback(onSetNode, [onSetNode]);
-  return [ref, node];
-}
-
-function throttle(fn, wait) {
-  let isCalled = false;
-  return function () {
-    if (!isCalled) {
-      fn(...arguments);
-      isCalled = true;
-      setTimeout(function () {
-        isCalled = false;
-      }, wait);
-    }
-  };
-}
-
-const THROTTLE_DELAY = 44;
-const useResize = (width, callback, delay) => {
-  const throttledCallback = React.useMemo(() => {
-    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);
-  }, [width, throttledCallback]);
-};
-
-const appendSvg = (node, width, height) => {
-  d3.select(node).select('svg').remove();
-  const svg = d3.select(node).append('svg').attr('width', width).attr('height', height);
-  return svg;
-};
-
-var _templateObject$1;
-const SwipeScrollContainer = /*#__PURE__*/styled__default.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n  user-select: none;\n"])));
-
-function animate(_ref) {
-  let {
-    duration,
-    timing,
-    draw
-  } = _ref;
-  const start = performance.now();
-  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);
-  });
-}
-const easeOutQuad = time => time * (2 - time);
-
-const range = (num, min, max) => Math.min(Math.max(num, min), max);
-const defaultRefs = {
-  animation: 0,
-  speed: 0,
-  timestamp: 0,
-  startX: 0,
-  currentX: 0
-};
-const useSwipe = (node, _ref) => {
-  let {
-    width,
-    duration,
-    animationFunc,
-    onSwipe
-  } = _ref;
-  const container = d3.select(node);
-  const body = d3.select('body');
-  const documentSelect = d3.select(document);
-  const refs = React.useRef(defaultRefs);
-  React.useEffect(() => {
-    if (width && refs.current.animation) {
-      cancelAnimationFrame(refs.current.animation);
-      refs.current = defaultRefs;
-    }
-  }, [width]);
-  const onMove = React.useCallback(event => {
-    const {
-      width: nodeWidth
-    } = node ? node.getBoundingClientRect() : {
-      width: 0
-    };
-    const [x] = d3.pointer(event.type.includes('touch') ? event.touches[0] : event);
-    const newX = x - refs.current.startX;
-    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();
-      const dt = now - refs.current.timestamp;
-      const dx = translateX - refs.current.currentX;
-      const speedX = Math.round(dx / dt * hundred);
-      refs.current.speed = speedX;
-      refs.current.timestamp = now;
-    }
-    refs.current.currentX = translateX;
-    onSwipe && onSwipe(translateX, container);
-  }, [onSwipe, width, node, container]);
-  const onEnd = React.useCallback(() => {
-    const {
-      width: nodeWidth
-    } = node ? node.getBoundingClientRect() : {
-      width: 0
-    };
-    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,
-        timing: animationFunc || easeOutQuad,
-        draw: (progress, requestId) => {
-          refs.current.animation = requestId;
-          const px = Math.round(refs.current.speed * 2 * progress);
-          const currX = refs.current.currentX + px;
-          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);
-          }
-        }
-      });
-    }
-  }, [body, animationFunc, onSwipe, container, duration, node, width, documentSelect]);
-  const onStart = React.useCallback(event => {
-    const isTouch = event.type.includes('touch');
-    const [x] = d3.pointer(isTouch ? event.touches[0] : event, node);
-    const {
-      left
-    } = node && node.parentElement ? node.parentElement.getBoundingClientRect() : {
-      left: 0
-    };
-    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);
-  }, [container, body, node, onEnd, onMove, documentSelect]);
-  React.useEffect(() => {
-    if (node) {
-      const {
-        width: nodeWidth
-      } = node.getBoundingClientRect();
-      if (width > nodeWidth) {
-        container.style('cursor', 'grab');
-        container.on('mousedown.swipe touchstart.swipe', onStart);
-      }
-    }
-  }, [container, onStart, node, width]);
-};
-
-const _excluded = ["children", "width", "onSwipe"];
-const SwipeScroll = _ref => {
-  let {
-      children,
-      width,
-      onSwipe
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const [ref, draggingNode] = useNode();
-  useSwipe(draggingNode, _extends({
-    width,
-    onSwipe
-  }, props));
-  return React__default.createElement(SwipeScrollContainer, Object.assign({}, props), React__default.createElement("div", {
-    ref: ref
-  }, children));
-};
-SwipeScroll.defaultProps = {
-  duration: 1400
-};
-
-const degByIndex = (index, count) => {
-  const degs = 360;
-  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,
-    index,
-    translateX,
-    translateY
-  } = _ref;
-  if (index === 0 && anchor === 'middle') {
-    return "translate(calc(-50% + " + translateX + "px), calc(-100% + " + translateY + "px))";
-  } else if (anchor === 'middle') {
-    return "translate(calc(-50% + " + translateX + "px), calc(" + translateY + "px))";
-  } else if (anchor === 'start') {
-    return "translate(calc(" + translateX + "px), calc(-50% + " + translateY + "px))";
-  } 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)
-  }
-}))(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n"])));
-
-const labelClassName = 'd3-chart-label';
-const drawRadialLabels = _ref => {
-  let {
-    node,
-    dataLength,
-    radiusScale,
-    maxValue,
-    angleSlice,
-    radius,
-    xOffset,
-    yOffset,
-    translateX,
-    translateY,
-    renderLabel,
-    selectLabel
-  } = _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) => ({
-    x: Math.ceil(axisX(index)),
-    y: Math.ceil(axisY(index))
-  }));
-  labels.forEach((_ref2, index) => {
-    let {
-      x,
-      y
-    } = _ref2;
-    const anchor = getTextAnchor(index, dataLength);
-    const html = ReactDOMServer.renderToString(React__default.createElement(LabelContainer, {
-      anchor: anchor,
-      translateX: translateX || 0,
-      translateY: translateY || 0,
-      index: index,
-      style: {
-        left: x,
-        top: y
-      }
-    }, typeof renderLabel === 'function' ? renderLabel(anchor, index) : renderLabel));
-    const label = d3container.append('div').attr('class', labelClassName).html(html);
-    selectLabel(label, anchor, index);
-  });
-};
-
-var _templateObject$3, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const getTranslate$1 = _ref => {
-  let {
-    anchor,
-    index,
-    translateX,
-    translateY
-  } = _ref;
-  if (index === 0 && anchor === "middle") {
-    return "translate(calc(-50% + " + translateX + "px), calc(-100% + " + translateY + "px))";
-  } else if (anchor === "middle") {
-    return "translate(calc(-50% + " + translateX + "px), calc(" + translateY + "px))";
-  } else if (anchor === "start") {
-    return "translate(calc(" + translateX + "px), calc(-50% + " + translateY + "px))";
-  } 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"])));
-const Name = /*#__PURE__*/styled__default.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  max-width: 120px;\n"])));
-const middleBadgeStyles = /*#__PURE__*/styled.css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translate(calc(100% + 6px), -50%);\n"])));
-const DefaultBadge = /*#__PURE__*/styled__default.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 2px 4px;\n  border-radius: 4px;\n  color: rgb(255, 255, 255);\n  background-color: rgb(144, 197, 61);\n  margin-left: 8px;\n"])));
-const MiddleBadge = /*#__PURE__*/styled__default(DefaultBadge)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), middleBadgeStyles);
-const BadgePrefix = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 4px;\n  font-size: 10px;\n  color: rgba(255, 255, 255, 0.54);\n"])));
-
-var _templateObject$4;
-const radarChartclassNames = {
-  radar: 'radar',
-  radarAxis: 'radarAxis',
-  radarAxisTextGlobal: 'radarAxisTextGlobal',
-  radarAxisText: 'radarAxisText',
-  radarPolygon: 'radarPolygon',
-  radarLabel: 'radarLabel',
-  radarLabelName: 'radarLabelName',
-  radarLabelBadge: 'radarLabelBadge',
-  radarLabelBadgePrefix: 'radarLabelBadgePrefix',
-  radarCircle: 'radarCircle'
-};
-const SvgWrapper = /*#__PURE__*/styled__default(Wrapper)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    path,\n    line,\n    circle {\n      fill: none;\n      stroke-width: 1px;\n      stroke: rgba(149, 149, 149, 0.18);\n    }\n  }\n  .", " {\n    font-size: 12px;\n    fill-opacity: 0.56;\n  }\n  .", " {\n    fill-opacity: 0.06;\n    stroke-width: 2px;\n    fill: rgb(144, 197, 61);\n    stroke: rgb(144, 197, 61);\n  }\n  .", " {\n    fill: rgb(144, 197, 61);\n  }\n"])), radarChartclassNames.radarAxis, radarChartclassNames.radarAxisText, radarChartclassNames.radarPolygon, radarChartclassNames.radarCircle);
-
-const draw = (node, props) => {
-  const {
-    data,
-    curve,
-    polar,
-    formatValue,
-    badgePrefix,
-    labelOffset,
-    circleRadius,
-    svgElements,
-    renderLabel: _renderLabel,
-    customize,
-    formatAxisValue,
-    radarStyles,
-    labelIndex,
-    selectLabel: _selectLabel
-  } = props;
-  if (node !== null && data.length) {
-    const defaultBleedLength = 10;
-    const bleedLength = typeof props.bleedLength === 'number' ? props.bleedLength : defaultBleedLength;
-    const {
-      width: nodeWidth
-    } = node.getBoundingClientRect();
-    const width = props.width || nodeWidth;
-    const defaultHeight = 400;
-    const height = props.height || defaultHeight;
-    const minValue = props.minValue || Math.min(0, d3.min(data, i => d3.min(i.map(_ref => {
-      let {
-        value
-      } = _ref;
-      return value;
-    }))));
-    const maxValue = (props.maxValue || Math.max(0, d3.max(data, i => d3.max(i.map(_ref2 => {
-      let {
-        value
-      } = _ref2;
-      return value;
-    }))))) - minValue;
-    const paddingX = props.paddingX || 0;
-    const paddingY = props.paddingY || 0;
-    const radius = Math.min((width - paddingX * 2 - bleedLength * 2) / 2, (height - paddingY * 2 - bleedLength * 2) / 2);
-    const defaultLevels = 4;
-    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
-    .radius(_ref3 => {
-      let {
-        value
-      } = _ref3;
-      return radiusScale(value);
-    }).angle((_, i) => i * angleSlice);
-    const radarValue = d3.lineRadial().curve(curve || d3.curveLinearClosed)
-    // @ts-ignore
-    .radius(_ref4 => {
-      let {
-        value
-      } = _ref4;
-      return radiusScale(value);
-    }).angle((_, i) => i * angleSlice);
-    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 => {
-      let {
-        name
-      } = _ref5;
-      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);
-        const circleNode = path.node();
-        const circleHeight = circleNode.getBoundingClientRect().height;
-        maxGridHeight = Math.max(maxGridHeight, circleHeight);
-      });
-    } else {
-      levelsGrid.map(getAxisValue).forEach(value => {
-        const path = gridGlobal.append('path').attr('d', () =>
-        // @ts-ignore
-        radarLine(Array.from({
-          length: data[0].length
-        }, () => ({
-          value
-        }))));
-        const pathNode = path.node();
-        const pathHeight = pathNode.getBoundingClientRect().height;
-        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
-    d.map(dataItem => _extends({}, dataItem, {
-      value: dataItem.value - minValue
-    }))));
-    const format = d3.format(',');
-    const axisTextGlobal = globalCenter.append('g').attr('class', radarChartclassNames.radarAxisTextGlobal);
-    axisTextGlobal.selectAll('text').data(levelsGrid).enter().append('text').attr('class', radarChartclassNames.radarAxisText).attr('x', '4').attr('y', axisGridY).attr('dy', 0).attr('dominant-baseline', 'central').text((value, index) => {
-      const axisValue = getAxisValue(value) + minValue;
-      return formatAxisValue ? formatAxisValue(axisValue, index) : format(axisValue);
-    });
-    circleRadius && data.forEach(item => {
-      const circleGlobal = globalCenter.append('g').attr('class', radarChartclassNames.radarCircle);
-      item.forEach((_ref6, i) => {
-        let {
-          value
-        } = _ref6;
-        circleGlobal.append('circle').attr('cx', Math.round(radiusScale(value) * Math.cos(angleSlice * i - Math.PI / 2))).attr('cy', Math.round(radiusScale(value * Math.sin(angleSlice * i - Math.PI / 2)))).attr('r', circleRadius);
-      });
-    });
-    const defaultLabelOffset = 8;
-    const heightInner = height - bleedLength - paddingY;
-    const translateX = width / 2;
-    const translateY = heightInner / 2 + (heightInner - maxGridHeight) / 2;
-    const offset = bleedLength + (labelOffset || defaultLabelOffset);
-    globalCenter.attr('transform', "translate(" + translateX + "," + translateY + ")");
-    drawRadialLabels({
-      node,
-      maxValue: newMaxValue,
-      translateX,
-      translateY,
-      dataLength: data[labelIndex || 0].length,
-      angleSlice,
-      radius,
-      radiusScale,
-      xOffset: offset,
-      yOffset: offset,
-      renderLabel: (anchor, index) => {
-        const items = data.map(item => item[index]);
-        const Badge = anchor === 'middle' ? MiddleBadge : DefaultBadge;
-        const item = data[labelIndex || 0][index];
-        const {
-          name,
-          value
-        } = item;
-        return _renderLabel ? _renderLabel({
-          item,
-          items,
-          anchor,
-          index
-        }) : React__default.createElement(Label, {
-          className: radarChartclassNames.radarLabel
-        }, React__default.createElement(Name, {
-          className: radarChartclassNames.radarLabelName
-        }, name), React__default.createElement(Badge, {
-          className: radarChartclassNames.radarLabelBadge
-        }, formatValue ? formatValue(value, index) : format(value), badgePrefix && React__default.createElement(BadgePrefix, {
-          className: radarChartclassNames.radarLabelBadgePrefix
-        }, badgePrefix)));
-      },
-      selectLabel: (label, anchor, index) => {
-        if (_selectLabel) {
-          const items = data.map(item => item[index]);
-          const item = data[labelIndex || 0][index];
-          _selectLabel(label, {
-            index,
-            item,
-            items,
-            anchor
-          });
-        }
-      }
-    });
-    if (svgElements) {
-      const html = ReactDOMServer.renderToString(svgElements);
-      svg.append('g').html(html);
-    }
-    customize && customize(svg);
-  }
-};
-
-const RadarChart = props => {
-  const {
-    className,
-    style
-  } = props;
-  const [ref, node] = useNode();
-  React.useEffect(() => {
-    node && draw(node, props);
-  }, [node, props]);
-  const onDraw = () => draw(node, props);
-  useResize(props.width, onDraw);
-  return React__default.createElement("div", {
-    className: className,
-    style: style
-  }, React__default.createElement(SvgWrapper, {
-    ref: ref
-  }));
-};
-RadarChart.defaultProps = {
-  height: 400,
-  data: [],
-  curve: d3.curveLinearClosed
-};
-
-function radiansToDegrees(radians) {
-  const flatAngle = 180;
-  return radians * flatAngle / Math.PI;
-}
-function degreesToRadians(degrees) {
-  const flatAngle = 180;
-  return degrees * (Math.PI / flatAngle);
-}
-
-var _templateObject$5;
-const pieChartclassNames = {
-  pieGlobal: 'pieGlobal',
-  pieSlice: 'pieSlice',
-  pieSliceLabel: 'pieSliceLabel',
-  pieSliceLabelValue: 'pieSliceLabelValue',
-  pieSliceLabelName: 'pieSliceLabelName',
-  pieRadialLabel: 'pieRadialLabel',
-  pieRadialLink: 'pieRadialLink',
-  pieTooltipContainer: 'pieTooltipContainer',
-  pieTooltipFlex: 'pieTooltipFlex',
-  pieTooltip: 'pieTooltip',
-  pieTooltipItem: 'pieTooltipItem',
-  pieTooltipName: 'pieTooltipName',
-  pieTooltipValue: 'pieTooltipValue',
-  pieTooltipColorBox: 'pieTooltipColorBox',
-  pieFullChartTooltipCircle: 'pieFullChartTooltipCircle'
-};
-const SvgWrapper$1 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    fill: #4a4a4a;\n  }\n  .", " {\n    position: absolute;\n    max-width: 128px;\n  }\n  .", " {\n    stroke: #000;\n  }\n  .", " {\n    fill: transparent;\n    cursor: pointer;\n  }\n"])), pieChartclassNames.pieSliceLabel, pieChartclassNames.pieRadialLabel, pieChartclassNames.pieRadialLink, pieChartclassNames.pieFullChartTooltipCircle);
-
-const getMidFactor = d => d.startAngle + (d.endAngle - d.startAngle) / 2 < Math.PI ? 1 : -1;
-const getAlign = d => {
-  const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
-  return midangle < Math.PI ? 'start' : 'end';
-};
-
-const drawRadialLabels$1 = _ref => {
-  let {
-    arc,
-    enableRadialLabels,
-    global,
-    node,
-    radius,
-    dataReady,
-    radialLabelsLinkHorizontalLength,
-    formatRadialLabel,
-    radialLabelsTextXOffset,
-    translateX,
-    translateY,
-    radialLabelYOffset,
-    radialAngleXOffset
-  } = _ref;
-  const d3container = d3.select(node);
-  d3container.selectAll("." + pieChartclassNames.pieRadialLabel).remove();
-  if (enableRadialLabels) {
-    const defaultRadialLabelsLinkHorizontalLength = 4;
-    const outerArc = d3.arc().innerRadius(radius).outerRadius(radius);
-    global.selectAll('allPolylines').data(dataReady).enter().append('polyline').attr('class', pieChartclassNames.pieRadialLink).style('fill', 'none').attr('points', d => {
-      const midFactor = getMidFactor(d);
-      const posA = arc.centroid(d);
-      const posB = outerArc.centroid(d);
-      const posC = outerArc.centroid(d);
-      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
-    .html(d => {
-      const html = ReactDOMServer.renderToString(
-      // @ts-ignore
-      formatRadialLabel ? formatRadialLabel(d) : d.data.name);
-      return html;
-    }).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
-    .style('text-align', getAlign);
-  }
-};
-
-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\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\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(_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 {
-    fullChartTooltip,
-    global,
-    tooltipRoot,
-    data,
-    tooltipClassName,
-    tooltipBind,
-    renderTooltip,
-    arc,
-    allSlices,
-    tooltipStyle,
-    width,
-    height,
-    radius
-  } = _ref;
-  const container = tooltipRoot || document.querySelector('body');
-  const format = d3.format(',');
-  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;
-      y = y - itemY;
-    } else if (!tooltipBind) {
-      const globalNode = global.node();
-      const {
-        x: itemX,
-        y: itemY,
-        width: itemWidth,
-        height: itemHeight
-      } = globalNode ? globalNode.getBoundingClientRect() : {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      };
-      const [arcX, arcY] = arc.centroid(pieChartDatum);
-      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);
-    const pieChartData = pieChartDatum ? [pieChartDatum.data] : data;
-    tooltipContainer.html(() => {
-      const html = ReactDOMServer.renderToString(React__default.createElement(TooltipFlex, {
-        className: pieChartclassNames.pieTooltipFlex
-      }, React__default.createElement(TooltipContainer, {
-        className: pieChartclassNames.pieTooltip
-      }, renderTooltip ? renderTooltip(pieChartData) : React__default.createElement(React__default.Fragment, null, pieChartData.map((_ref3, index) => {
-        let {
-          color,
-          name,
-          value
-        } = _ref3;
-        return React__default.createElement(TooltipItem, {
-          key: name + "-" + index,
-          className: pieChartclassNames.pieTooltipItem
-        }, color && React__default.createElement(ColorBox, {
-          className: pieChartclassNames.pieTooltipColorBox,
-          style: {
-            backgroundColor: color
-          }
-        }), name && React__default.createElement(Name$1, {
-          className: pieChartclassNames.pieTooltipName
-        }, name), React__default.createElement(Value, {
-          className: pieChartclassNames.pieTooltipValue
-        }, format(value)));
-      })))));
-      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();
-    });
-  }
-};
-
-const draw$1 = (node, props) => {
-  const {
-    data,
-    padAngle,
-    onClick,
-    outerRadius,
-    startAngle,
-    endAngle,
-    cornerRadius,
-    margin,
-    enableSlicesLabels,
-    formatSliceLabel,
-    slicesLabelsSkipAngle,
-    enableSlicesLabelsName,
-    formatSliceLabelName,
-    borderWidth,
-    borderColor,
-    enableRadialLabels,
-    backgroundColor,
-    radialLabelsLinkHorizontalLength,
-    radialLabelsTextXOffset,
-    formatRadialLabel,
-    radialLabelYOffset,
-    svgElements,
-    formatSliceTitle,
-    radialAngleXOffset,
-    withTooltip,
-    fullChartTooltip,
-    tooltipClassName,
-    tooltipBind,
-    renderTooltip,
-    tooltipStyle
-  } = props;
-  if (node !== null && data.length) {
-    const marginTop = margin ? margin.top : 0;
-    const marginRight = margin ? margin.right : 0;
-    const marginBottom = margin ? margin.bottom : 0;
-    const marginLeft = margin ? margin.left : 0;
-    const {
-      width: nodeWidth
-    } = node.getBoundingClientRect();
-    const width = props.width || nodeWidth;
-    const defaultHeight = 240;
-    const height = props.height || defaultHeight;
-    const radius = (Math.min(width, height) - (borderWidth || 0) * 2 - (width > height ? marginTop + marginBottom : marginRight + marginLeft)) / 2;
-    const svg = appendSvg(node, width, height);
-    const global = svg.append('g').attr('class', pieChartclassNames.pieGlobal).attr('transform', "translate(" + ((width - (marginLeft + marginRight)) / 2 + marginLeft) + "," + ((height - (marginBottom + marginTop)) / 2 + marginTop) + ")");
-    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
-    .value(_ref => {
-      let {
-        value
-      } = _ref;
-      return value;
-    });
-    // @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
-      arc({
-        startAngle: degreesToRadians(0),
-        endAngle: degreesToRadians(fullAngle)
-      }));
-    }
-    const format = d3.format(',');
-    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
-    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
-      d => 'translate(' + arc.centroid(d) + ')');
-      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(d => formatSliceLabelName ? formatSliceLabelName(d) : d.data.name).attr('x', '0').attr('dy', '1.2em');
-      }
-    }
-    drawRadialLabels$1({
-      arc,
-      enableRadialLabels,
-      global,
-      radius,
-      node,
-      dataReady,
-      translateX: (width - (marginLeft - marginRight)) / 2,
-      translateY: (height + (marginTop - marginBottom)) / 2,
-      radialLabelsLinkHorizontalLength,
-      radialLabelsTextXOffset,
-      formatRadialLabel,
-      radialLabelYOffset,
-      radialAngleXOffset
-    });
-    if (withTooltip || fullChartTooltip) {
-      drawTooltip({
-        fullChartTooltip,
-        global,
-        data,
-        tooltipClassName,
-        tooltipBind,
-        renderTooltip,
-        allSlices,
-        arc,
-        tooltipStyle,
-        width,
-        height,
-        radius
-      });
-    }
-    if (svgElements) {
-      const html = ReactDOMServer.renderToString(svgElements);
-      svg.append('g').html(html);
-    }
-  }
-};
-
-const PieChart = props => {
-  const {
-    className,
-    style,
-    children
-  } = props;
-  const [ref, node] = useNode();
-  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,
-    style: style
-  }, React__default.createElement(SvgWrapper$1, {
-    ref: ref
-  }, children));
-};
-PieChart.defaultProps = {
-  data: [],
-  startAngle: 0,
-  endAngle: 360,
-  slicesLabelsSkipAngle: 0,
-  radialLabelYOffset: 16,
-  radialAngleXOffset: 8
-};
-
-const defaultN = 256;
-const legendClassNames = {
-  legendContainer: 'd3-legend-container',
-  legendTitle: 'd3-legend-title',
-  legendTick: 'd3-legend-tick',
-  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,
-  width: 320,
-  marginTop: 18,
-  marginBottom: 16,
-  ticksDivier: 64,
-  titleMarginBottom: 6
-};
-const getLegend = _ref => {
-  let {
-    color,
-    title,
-    tickSize = legendDefaultParams.tickSize,
-    width = legendDefaultParams.width,
-    height = legendDefaultParams.height + tickSize,
-    marginTop = legendDefaultParams.marginTop,
-    marginRight = 0,
-    marginBottom = legendDefaultParams.marginBottom + tickSize,
-    marginLeft = 0,
-    ticks = legendDefaultParams.width / legendDefaultParams.ticksDivier,
-    tickFormat,
-    tickValues,
-    titleMarginBottom
-  } = _ref;
-  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);
-    tick.selectAll('.tick text').attr('class', legendClassNames.legendTickText);
-    tick.attr('class', legendClassNames.legendTick);
-    return tick;
-  };
-  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
-  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.
-    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) + ")")
-  // @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"
-}, 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  .", " {\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 {
-    data,
-    startSunday,
-    weekdays,
-    interpolator,
-    monthSpacing,
-    onEachDay,
-    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 {
-        value
-      } = _ref;
-      return value;
-    }));
-    const min = d3.min(data.map(_ref2 => {
-      let {
-        value
-      } = _ref2;
-      return value;
-    }));
-    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) => {
-      const min = new Date(year, 1);
-      const max = d3.max(values.map(d => d.date));
-      const months = max.getUTCMonth() - min.getUTCMonth();
-      const weekCount = getTimeWeekCount(min, max) + 1;
-      const width = weekCount * (cellSize + cellOffset) + (monthSpacing || 0) * months;
-      chartWidth = Math.max(chartWidth, width);
-    });
-    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
-    .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
-    .text(_ref3 => {
-      let [key] = _ref3;
-      return key;
-    });
-    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
-    .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
-    .data(_ref5 => {
-      let [, values] = _ref5;
-      return values;
-    }).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('title', d => formatDate(d.date) + " - " + d.value);
-    if (typeof legendProps === 'object') {
-      const legend = getLegend(_extends({
-        color: color
-      }, legendProps));
-      const containerNode = container.node();
-      const legendSvg = legend.node();
-      containerNode.appendChild(legendSvg);
-    }
-  }
-};
-
-const CalendarChart = props => {
-  const {
-    className,
-    style,
-    children,
-    data,
-    startSunday,
-    weekdays,
-    cellOffset,
-    cellSize,
-    interpolator,
-    monthSpacing,
-    colorRange,
-    legendProps
-  } = props;
-  const [ref, node] = useNode();
-  React.useEffect(() => {
-    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,
-    className: className,
-    style: style
-  }, children);
-};
-CalendarChart.defaultProps = {
-  data: []
-};
-
-function computeDimensions(selection) {
-  let dimensions;
-  const node = selection.node();
-  if (node instanceof SVGGraphicsElement) {
-    // check if node is svg element
-    dimensions = node.getBBox();
-  } else {
-    // else is html element
-    dimensions = node.getBoundingClientRect();
-  }
-  return dimensions;
-}
-
-function none() {
-  return;
-}
-function isVoid(value) {
-  return value === undefined || value === null || Number.isNaN(value);
-}
-
-const stackedData = data => {
-  const stacks = {};
-  return data.map((item, index) => {
-    stacks[index] = {};
-    if (index > 0) {
-      return _extends({}, item, {
-        values: item.values.map((value, valuesIndex) => {
-          const prevValue = stacks[index - 1][valuesIndex];
-          stacks[index][valuesIndex] = Number((typeof prevValue !== 'number' ? 0 : Math.abs(prevValue)) + (typeof value !== 'number' ? 0 : Math.abs(value)));
-          return stacks[index][valuesIndex];
-        })
-      });
-    } else {
-      item.values.forEach((value, valuesIndex) => {
-        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  .", " {\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 {
-    svg,
-    yScale,
-    xScale,
-    yTicksCount,
-    lastIndex,
-    drawGridX,
-    drawGridY
-  } = _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
-    }, (_, index) => index)).join('line').attr('class', lineChartClassNames.lineChartGridLineY).attr('x1', (_, index) => Math.round(xScale(index))).attr('x2', (_, index) => Math.round(xScale(index))).attr('y1', () => Math.round(yScale(yTicks[0]))).attr('y2', () => Math.round(yScale(yTicks[yTicks.length - 1])));
-  }
-};
-
-var _templateObject$9, _templateObject2$3;
-const LabelContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 0;\n  height: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  font-size: 12px;\n  white-space: nowrap;\n"])));
-const Label$2 = /*#__PURE__*/styled__default.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 4px;\n"])));
-
-const labelClassName$1 = 'd3-chart-label';
-const drawLabel = _ref => {
-  let {
-    node,
-    data,
-    yScale,
-    xScale,
-    formatLabel,
-    eachLabel
-  } = _ref;
-  const labelsDiv = d3.select(node).append('div').attr('class', labelClassName$1);
-  const format = d3.format(',');
-  // @ts-ignore
-  data.forEach(_ref2 => {
-    let {
-      values
-    } = _ref2;
-    labelsDiv.append('div').selectAll('div').data(values).join('div').attr('class', lineChartClassNames.lineChartLabelContainer).style('position', 'absolute').style('left', (_, index) => xScale(index) + 'px').style('top', d => yScale(d) + 'px').html((d, index, elements) => {
-      const html = ReactDOMServer.renderToString(React__default.createElement(LabelContainer$1, {
-        className: lineChartClassNames.lineChartLabelFlex
-      }, React__default.createElement(Label$2, {
-        className: lineChartClassNames.lineChartLabel
-      }, formatLabel ? formatLabel(d, index, elements) : format(d))));
-      return html;
-    })
-    // @ts-ignore
-    .each(eachLabel ? eachLabel : none);
-  });
-};
-
-const _excluded$1 = ["values"];
-const drawTooltip$1 = _ref => {
-  let {
-    svg,
-    node,
-    data: argData,
-    xScale,
-    yScale,
-    dynamicCircleRadius,
-    formatDynamicTooltip,
-    renderTooltip,
-    stackedTooltipIndex,
-    stackedTooltip,
-    tooltipLineTop,
-    tooltipRoot,
-    tooltipClassName,
-    dotSnapping,
-    lastIndex
-  } = _ref;
-  const container = tooltipRoot || document.querySelector('body');
-  const format = d3.format(',');
-  const chartData = argData.filter(_ref2 => {
-    let {
-      tooltipOff
-    } = _ref2;
-    return !tooltipOff;
-  });
-  const data = typeof stackedTooltipIndex === 'number' ? [chartData[stackedTooltipIndex]] : stackedTooltip ? [chartData[0]] : chartData;
-  const [x1, x2] = xScale.range();
-  const [y1, y2] = yScale.range();
-  const mouseGlobal = svg.append('g').attr('class', lineChartClassNames.lineChartMouseGlobal);
-  const mouseRect = mouseGlobal.append('rect').attr('width', x2 - x1).attr('height', Math.abs(y1 - y2)).attr('class', lineChartClassNames.lineChartMouseRect).attr('transform', "translate(" + x1 + ", " + y2 + ")");
-  const mouseLine = mouseGlobal.append('path').attr('class', lineChartClassNames.lineChartMouseLine).style('opacity', '0');
-  const lines = svg.selectAll("." + lineChartClassNames.lineChartLine).nodes();
-  const circles = mouseGlobal.selectAll('circle').data(chartData.filter(_ref3 => {
-    let {
-      dynamicDotOff
-    } = _ref3;
-    return !dynamicDotOff;
-  })).join('circle').attr('class', lineChartClassNames.lineChartMouseCircle).attr('r', dynamicCircleRadius).attr('fill', _ref4 => {
-    let {
-      stroke
-    } = _ref4;
-    return stroke || 'none';
-  }).attr('stroke', _ref5 => {
-    let {
-      stroke
-    } = _ref5;
-    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';
-    mouseLine.style('opacity', opacity);
-    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);
-    const [nodeX, nodeY] = d3.pointer(event, node);
-    const x = rectrX - (rectrX - nodeX);
-    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) {
-            beginning = target;
-          } else {
-            break;
-          }
-        }
-        positions[index] = pos;
-      } else {
-        const [x1, x2] = xScale.range();
-        const chartWidth = x2 - x1;
-        const step = chartWidth / lastIndex;
-        positions[index] = {
-          x: x1 + Math.round(currIndex) * step,
-          y: typeof argData[index].values[Math.round(currIndex)] === "number" ? yScale(argData[index].values[Math.round(currIndex)]) : 0
-        };
-      }
-    });
-    circles.attr('transform', (lineChartData, index) => {
-      const value = getValue(lineChartData.values);
-      return positions[index] && value ? 'translate(' + (!dotSnapping ? x : positions[index].x) + ',' + positions[index].y + ')' : 'translate(-9999, -9999)';
-    }).attr('style', _ref6 => {
-      let {
-        dynamicDotStyle
-      } = _ref6;
-      return dynamicDotStyle || '';
-    });
-    const datas = chartData.map((_ref7, i) => {
-      let {
-          values
-        } = _ref7,
-        rest = _objectWithoutPropertiesLoose(_ref7, _excluded$1);
-      return _extends({}, rest, {
-        value: getValue(values),
-        invertValue: positions[i] ? yScale.invert(positions[i].y) : 0
-      });
-    });
-    const noHasData = datas.every(_ref8 => {
-      let {
-        value
-      } = _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;
-      return index === 0 || isVoid(value) || dynamicDotOff ? acc : isVoid(prevValue) || positions[acc].y > positions[key].y ? key : acc;
-    }, '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, {
-          className: lineChartClassNames.lineChartLabelFlex
-        }, renderTooltip(datas, {
-          indexX: Math.round(currIndex),
-          indexY: index,
-          svg,
-          event
-        })));
-      });
-    } else {
-      labelTexts && labelTexts.text((_, i) => {
-        const value = datas[i].value;
-        const invertValue = datas[i].invertValue;
-        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, {
-        className: lineChartClassNames.lineChartLabelFlex
-      }, React__default.createElement(Label$2, {
-        className: lineChartClassNames.lineChartLabel
-      })));
-      return html;
-    });
-    mouseMove(event);
-  });
-  mouseRect.on('mouseout.tooltip', () => {
-    d3.select("." + lineChartClassNames.lineChartMouseLabelContainer).selectAll('*').remove();
-    setVisible();
-  });
-  mouseRect.on('touchmove.tooltip mousemove.tooltip', mouseMove);
-};
-
-const draw$3 = (node, props) => {
-  const {
-    data: chartData,
-    labels,
-    margin,
-    customYAxisSelection,
-    customXAxisSelection,
-    customYAxis,
-    customXAxis,
-    curve,
-    yAxisPadding,
-    xAxisPadding,
-    drawGridY,
-    drawGridX,
-    withLabels,
-    formatLabel,
-    eachLabel,
-    stacked,
-    dynamicTooltipEnable,
-    dynamicCircleRadius,
-    formatDynamicTooltip,
-    renderTooltip,
-    stackedTooltip,
-    stackedTooltipIndex,
-    tooltipLineTop,
-    customize,
-    customYScale,
-    customLine,
-    tooltipClassName,
-    xScaleItemWidth,
-    areaCurve,
-    dotSnapping,
-    rightAxis
-  } = props;
-  if (node !== null && chartData.length) {
-    const data = stacked ? stackedData(chartData) : chartData;
-    const marginTop = margin ? margin.top : 0;
-    const marginRight = margin ? margin.right : 0;
-    const marginBottom = margin ? margin.bottom : 0;
-    const marginLeft = margin ? margin.left : 0;
-    const {
-      width: nodeWidth
-    } = node.getBoundingClientRect();
-    const width = props.width || nodeWidth;
-    const height = props.height || 0;
-    const min = typeof props.min === 'number' ? props.min : d3.min(data, _ref => {
-      let {
-        values
-      } = _ref;
-      return d3.min(values);
-    });
-    const max = typeof props.max === 'number' ? props.max : d3.max(data, _ref2 => {
-      let {
-        values
-      } = _ref2;
-      return d3.max(values);
-    });
-    const svg = appendSvg(node, width, height || 0);
-    const yRange = [height - marginTop - marginBottom - (xAxisPadding || 0), marginTop];
-    const yScale = d3.scaleLinear().domain([min || 0, max || 0]).range(yRange).nice();
-    customYScale && customYScale(yScale);
-    const yTicksCountDefault = 8;
-    const yAxisLeft = d3.axisLeft(yScale).ticks(yTicksCountDefault);
-    customYAxis && customYAxis(yAxisLeft);
-    const yTicksCount = yAxisLeft.tickArguments()[0];
-    const yAxis = svg.append('g').attr('class', lineChartClassNames.lineChartYScaleGlobal).call(yAxisLeft).call(customYAxisSelection ? customYAxisSelection : none);
-    const {
-      width: yAxisWidth
-    } = computeDimensions(yAxis);
-    yAxis.attr('transform', "translate(" + (marginLeft + yAxisWidth) + ", 0)");
-    let yAxisRightWidth = 0;
-    if (rightAxis) {
-      const rightAxisMin = d3.min(rightAxis);
-      const rightAxisMax = d3.max(rightAxis);
-      const yRightScale = d3.scaleLinear().domain([rightAxisMin || 0, rightAxisMax || 0]).range(yRange).nice();
-      const yAxisRightTicks = d3.axisRight(yRightScale).ticks(yTicksCountDefault);
-      const yAxisRight = svg.append('g').attr('class', lineChartClassNames.lineChartYScaleGlobal + " " + lineChartClassNames.lineChartYScaleRight).call(yAxisRightTicks).call(customYAxisSelection ? customYAxisSelection : none);
-      ({
-        width: yAxisRightWidth
-      } = computeDimensions(yAxisRight));
-      yAxisRight.attr('transform', "translate(" + (width - yAxisRightWidth) + ", 0)");
-    }
-    /** xScale **/
-    const lastIndex = labels && labels.length ? labels.length - 1 : data.reduce((acc, _ref3) => {
-      let {
-        values
-      } = _ref3;
-      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
-    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,
-      yScale,
-      xScale,
-      yTicksCount,
-      lastIndex,
-      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 {
-        height: xAxisHeight
-      } = 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 => {
-      let {
-        fill
-      } = _ref4;
-      return fill;
-    });
-    if (withAreas) {
-      let dataIndex = -2;
-      const getArea = d => {
-        const {
-          minAreaValues
-        } = d;
-        const minTick = yScale.ticks()[0];
-        return d3.area().defined(d => d !== null).x((_, index) => xScale(index)).y0((value, index) => {
-          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
-        } = _ref5;
-        return Boolean(fill);
-      })).join('path').attr('class', lineChartClassNames.lineChartArea).attr('d', d => {
-        const area = getArea(d);
-        return area(d.values);
-      }).attr('fill', _ref6 => {
-        let {
-          fill
-        } = _ref6;
-        return fill || 'none';
-      }).attr('style', _ref7 => {
-        let {
-          areaStyle
-        } = _ref7;
-        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
-      } = _ref8;
-      return stroke || 'steelblue';
-    }).attr('style', _ref9 => {
-      let {
-        style
-      } = _ref9;
-      return style || '';
-    });
-    const dots = data.filter(_ref0 => {
-      let {
-        dot
-      } = _ref0;
-      return dot;
-    });
-    if (dots.length > 0) {
-      const dotsGlobal = svg.append('g').attr('class', lineChartClassNames.lineChartDotsGlobalContainer);
-      dots.forEach(item => {
-        const {
-          values,
-          dot
-        } = item;
-        const {
-          radius,
-          style,
-          filter
-        } = 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,
-      eachLabel,
-      data,
-      yScale,
-      xScale,
-      formatLabel
-    });
-    if (dynamicTooltipEnable) {
-      drawTooltip$1({
-        tooltipLineTop,
-        stackedTooltip,
-        renderTooltip,
-        stackedTooltipIndex,
-        formatDynamicTooltip,
-        node,
-        svg,
-        data,
-        xScale,
-        yScale,
-        dynamicCircleRadius,
-        tooltipClassName,
-        dotSnapping,
-        lastIndex
-      });
-    }
-    customize && customize({
-      svg,
-      yScale,
-      xScale
-    });
-  }
-};
-
-const LineChart = props => {
-  const {
-    className,
-    style,
-    children
-  } = props;
-  const [ref, node] = useNode();
-  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,
-    style: style
-  }, React__default.createElement(TooltipStyles, null), React__default.createElement(SvgWrapper$3, {
-    ref: ref
-  }, children));
-};
-LineChart.defaultProps = {
-  data: [],
-  labels: [],
-  height: 240,
-  yAxisPadding: 10,
-  xAxisPadding: 20,
-  margin: {
-    top: 10,
-    right: 10,
-    bottom: 10,
-    left: 0
-  },
-  dynamicCircleRadius: 4,
-  stackedTooltip: false
-};
-
-const barChartLinesClassNames = {
-  barChartLinesGlobal: 'barChartLinesGlobal',
-  barChartLine: 'barChartLine',
-  barChartAreasGlobal: 'barChartAreasGlobal',
-  barChartArea: 'barChartArea'
-};
-const drawLines = _ref => {
-  let {
-    svg,
-    lineData,
-    min,
-    yScale,
-    xScale,
-    curve,
-    stackedLine
-  } = _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
-  .y(d => yScale(d)).curve(curve || d3.curveLinear);
-  const bandwidth = xScale.bandwidth();
-  const linesData = lineData.filter(_ref2 => {
-    let {
-      lineType
-    } = _ref2;
-    return lineType === 'line';
-  });
-  const areasData = lineData.filter(_ref3 => {
-    let {
-      lineType
-    } = _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 {
-        stroke
-      } = _ref4;
-      return stroke || '';
-    }).attr('fill', _ref5 => {
-      let {
-        fill
-      } = _ref5;
-      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
-    .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 {
-        fill
-      } = _ref6;
-      return fill || 'none';
-    });
-  }
-  return {
-    areasSelection,
-    linesSelection,
-    area
-  };
-};
-
-var _templateObject$a, _templateObject2$4;
-const tooltipClassnames = {
-  barChartMouseRect: 'barChartMouseRect',
-  barChartMouseContainer: 'barChartMouseContainer',
-  barChartTooltipFlex: 'barChartTooltipFlex',
-  barChartMouseTooltip: 'barChartMouseTooltip',
-  barChartTooltip: 'barChartTooltip',
-  barChartTooltipItem: 'barChartTooltipItem',
-  barChartTooltipColFlex: 'barChartTooltipColFlex',
-  barChartTooltipGroupName: 'barChartTooltipGroupName',
-  barChartColorBox: 'barChartColorBox',
-  barChartColorLine: 'barChartColorLine',
-  barChartTooltipName: 'barChartTooltipName',
-  barChartTooltipValue: 'barChartTooltipValue'
-};
-const labelClassnames = {
-  barChartLabelContainer: 'barChartLabelContainer',
-  barChartLabelFlex: 'barChartLabelFlex',
-  barChartLabel: 'barChartLabel'
-};
-const barChartClassNames = /*#__PURE__*/_extends({
-  barChartBarGlobal: 'barChartBarGlobal',
-  barChartYScaleGlobal: 'barChartYScaleGlobal',
-  barChartYAxis: 'barChartYAxis',
-  barChartXAxis: 'barChartXAxis',
-  barChartYAxisZeroTick: 'barChartYAxisZeroTick',
-  barChartGridGlobal: 'barChartGridGlobal',
-  barChartGridLineX: 'barChartGridLineX',
-  barChartGridLineXZero: 'barChartGridLineXZero',
-  barChartGridLineYZero: 'barChartGridLineYZero',
-  barChartGridLineY: 'barChartGridLineY',
-  barChartSelection: 'barChartSelection'
-}, tooltipClassnames, labelClassnames, barChartLinesClassNames);
-const SvgWrapper$4 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  user-select: ", ";\n  width: ", ";\n\n  line {\n    stroke-width: 1px;\n    shape-rendering: crispEdges;\n  }\n\n  .", ",\n  .", " {\n    stroke: rgba(48, 69, 79, 0.06);\n  }\n\n  .", " {\n  }\n\n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n\n  .", " {\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n\n  .", " {\n    shape-rendering: auto;\n  }\n\n  .", " {\n    fill-opacity: 0.24;\n  }\n\n  .", " {\n    position: absolute;\n    top: 0;\n    width: 0;\n    background: rgba(0, 170, 255, 0.06);\n    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;\n    pointer-events: none;\n  }\n"])), _ref => {
-  let {
-    selectable
-  } = _ref;
-  return selectable && "inline-block";
-}, _ref2 => {
-  let {
-    selectable
-  } = _ref2;
-  return selectable && "none";
-}, _ref3 => {
-  let {
-    selectable
-  } = _ref3;
-  return selectable && "auto";
-}, barChartClassNames.barChartGridLineX, barChartClassNames.barChartGridLineY, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseRect, barChartClassNames.barChartLinesGlobal, barChartClassNames.barChartLine, barChartClassNames.barChartArea, barChartClassNames.barChartSelection);
-const TooltipStyles$1 = /*#__PURE__*/styled.createGlobalStyle(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    z-index: 100;\n    transition: all linear 144ms;\n\n    .", " {\n      margin-bottom: 4px;\n      :last-of-type {\n        margin-bottom: 0;\n      }\n    }\n  }\n"])), barChartClassNames.barChartMouseTooltip, barChartClassNames.barChartTooltipItem);
-
-const useSelection = (node, props) => {
-  const drawing = React.useRef(false);
-  const startX = React.useRef(0);
-  const selection = React.useRef();
-  const clearSelection = React.useCallback(() => {
-    if (node && selection.current) {
-      drawing.current = false;
-      node.removeChild(selection.current);
-      selection.current = undefined;
-    }
-  }, [node]);
-  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);
-      selection.current.setAttribute("style", "height: calc(100% - " + ((_props$margin$bottom = (_props$margin = props.margin) == null ? void 0 : _props$margin.bottom) != null ? _props$margin$bottom : 0) + "px)");
-      node.appendChild(selection.current);
-      drawing.current = true;
-      startX.current = isTouch ? ((_e$touches$ = e.touches[0]) == null ? void 0 : _e$touches$.pageX) - node.firstChild.getBoundingClientRect().left : e.offsetX;
-      selection.current.style.display = "block";
-      selection.current.style.width = "0px";
-      selection.current.style.left = startX.current + "px";
-    }
-  }, [node]);
-  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";
-          selection.current.style.width = offsetX <= nodeWidth ? newWidth + "px" : nodeWidth - startX.current + "px";
-        } else {
-          selection.current.style.right = nodeWidth - startX.current + "px";
-          selection.current.style.width = Math.abs(newWidth) + "px";
-          selection.current.style.marginLeft = newWidth + "px";
-        }
-      }
-      if (isTouch) {
-        if (node.offsetLeft > e.touches[0].pageX) {
-          selection.current.style.right = nodeWidth - startX.current + "px";
-          selection.current.style.width = startX.current + "px";
-          selection.current.style.marginLeft = "-" + startX.current + "px";
-        }
-      }
-    }
-  }, [node]);
-  const onMouseLeave = React.useCallback(e => {
-    if (drawing.current && node && selection.current) {
-      if (node.offsetLeft > e.pageX) {
-        const nodeWidth = node.firstChild.getBoundingClientRect().width;
-        selection.current.style.right = nodeWidth - startX.current + "px";
-        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";
-        selection.current.style.width = nodeWidth - startX.current + "px";
-        selection.current.style.marginLeft = "0px";
-      }
-    }
-  }, [node]);
-  const onStopDrawing = React.useCallback(() => {
-    if (node && selection.current) {
-      const nodeWidth = node.firstChild.getBoundingClientRect().width;
-      const selectionMinX = selection.current.offsetLeft >= 0 ? selection.current.offsetLeft <= nodeWidth ? selection.current.offsetLeft : nodeWidth : 0;
-      const selectionWidth = selection.current.getBoundingClientRect().right - selection.current.getBoundingClientRect().left;
-      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(() => {
-    if (node) {
-      node.childNodes.forEach(child => {
-        child.style.userSelect = "none";
-      });
-      node.addEventListener("mousedown", onStartDrawing);
-      node.addEventListener("touchstart", onStartDrawing);
-      node.addEventListener("mousemove", onDraw);
-      node.addEventListener("touchmove", onDraw);
-      node.addEventListener("mouseleave", onMouseLeave);
-      node.addEventListener("mouseup", onStopDrawing);
-      node.addEventListener("touchend", onStopDrawing);
-      document.addEventListener("mouseup", onStopDrawing);
-    }
-    return () => {
-      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]);
-};
-
-const drawGrid$1 = _ref => {
-  let {
-    svg,
-    yScale,
-    xScale,
-    yTicksCount,
-    drawGridX,
-    drawGridY
-  } = _ref;
-  if (!drawGridY && !drawGridX) return;
-  const global = svg.append('g').attr('class', barChartClassNames.barChartGridGlobal);
-  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])));
-  }
-};
-
-const _excluded$2 = ["groupName"];
-const getDomain = _ref => {
-  let {
-    data,
-    minDomainValue,
-    maxDomainValue
-  } = _ref;
-  let MIN = Number.POSITIVE_INFINITY;
-  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 => {
-      const group = groups[key];
-      let stackMax = 0;
-      let stackMin = 0;
-      Object.keys(group).forEach(groupKey => {
-        const value = group[groupKey];
-        if (value > 0) {
-          stackMax += value;
-        } else {
-          stackMin += value;
-        }
-      });
-      groupMax = Math.min(groupMax, stackMin);
-      groupMin = Math.max(groupMin, stackMax);
-    });
-    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
-  };
-};
-
-const _excluded$3 = ["groupName"];
-const marshaling = _ref => {
-  let {
-    data,
-    yScale,
-    xScale,
-    barWidth,
-    barPadding,
-    colors,
-    marginTop
-  } = _ref;
-  return data.map((_ref2, groupIndex) => {
-    let {
-        groupName
-      } = _ref2,
-      groups = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
-    const marshalledGroup = [];
-    const hundred = 100;
-    const bandwidth = xScale.bandwidth();
-    const groupsKeys = Object.keys(groups);
-    groupsKeys.forEach((key, stackIndex) => {
-      const group = groups[key];
-      const groupKeys = Object.keys(group);
-      const barGroupWidth = (barWidth + barPadding) * groupsKeys.length - (groupKeys.length > 1 ? barPadding : 0);
-      let stackMax = 0;
-      let stackMin = 0;
-      groupKeys.forEach(groupKey => {
-        const value = group[groupKey];
-        const color = colors[groupKey];
-        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,
-          y: y + (marginTop || 0),
-          height,
-          color,
-          value,
-          groupName: groupName,
-          name: groupKey,
-          stackIndex,
-          groupIndex
-        });
-        if (!isPositiveValue) {
-          stackMin += value;
-        }
-      });
-    });
-    return marshalledGroup;
-  });
-};
-
-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;
-  }
-};
-
-const getLabel = labelPosition => {
-  switch (labelPosition) {
-    case 'top':
-      return LabelTop;
-    case 'bottom':
-      return LabelBottom;
-    default:
-      return Label$1;
-  }
-};
-
-const _excluded$4 = ["values"];
-const drawTooltip$2 = _ref => {
-  let {
-    svg,
-    node,
-    data,
-    marshalledData,
-    xScale,
-    yScale,
-    renderTooltip,
-    labelPosition,
-    marginTop,
-    renderLabel,
-    barWidth,
-    barPadding,
-    dynamicTooltipEnable,
-    hideTooltipGroupName,
-    tooltipY,
-    tooltipBind,
-    lineData,
-    formatTooltipValue,
-    formatTooltipName,
-    tooltipYDomain,
-    setTooltipPosition,
-    onLabelItem,
-    isBarTooltip,
-    bars,
-    tooltipRoot,
-    tooltipClassName,
-    onBarClick,
-    onBarHover
-  } = _ref;
-  d3.select(node).select("." + barChartClassNames.barChartMouseContainer).remove();
-  const xScaleBandDomain = xScale.domain();
-  const [x1, x2] = xScale.range();
-  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,
-    lineData,
-    yScale
-  }) : marshalledData.reduce((acc, curr, index) => {
-    const lineMin = d3.min(lineData, _ref2 => {
-      let {
-        values
-      } = _ref2;
-      return typeof values[index] === 'number' ? yScale((values[index] || 0) - y2) : Number.POSITIVE_INFINITY;
-    }) || Number.POSITIVE_INFINITY;
-    acc.push(curr.reduce((acc, _ref3) => {
-      let {
-        y
-      } = _ref3;
-      return Math.min(acc, y, lineMin);
-    }, Number.POSITIVE_INFINITY));
-    return acc;
-  }, []);
-  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, {
-          className: barChartClassNames.barChartTooltipFlex
-        }));
-        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;
-        tooltip.style('transition', 'none');
-        tooltip.style('top', null);
-        tooltip.style('left', null);
-      } else {
-        tooltip.attr('class', barChartClassNames.barChartMouseTooltip + " " + (tooltipClassName || ''));
-        tooltip.style('transition', null);
-      }
-    };
-    mouseRect.on('mouseout.tooltip', () => setVisible());
-    mouseRect.on('touchmove.tooltip mousemove.tooltip', event => {
-      const [docX, docY] = d3.pointer(event, document);
-      const [rectrX] = d3.pointer(event, mouseRect);
-      const [nodeX, nodeY] = d3.pointer(event, node);
-      const x = rectrX - (rectrX - nodeX);
-      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);
-          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,
-          top,
-          tooltip,
-          svgWidth
-        });
-      } 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 ? {
-            left,
-            top,
-            tooltip,
-            svgWidth
-          } : undefined, barWidth)));
-          return html;
-        });
-      } else {
-        if (!isVisible) {
-          setVisible(true);
-        }
-        barChartTootipFlex.html(() => {
-          const html = ReactDOMServer.renderToString(React__default.createElement(TooltipContainer, {
-            className: barChartClassNames.barChartTooltip
-          }, currData && currData[0] && !hideTooltipGroupName && React__default.createElement(TooltipGroupName, {
-            className: barChartClassNames.barChartTooltipGroupName
-          }, currData[0].groupName), currData && currData.map(_ref5 => {
-            let {
-              name,
-              value,
-              stroke,
-              fill,
-              color,
-              lineType
-            } = _ref5;
-            return React__default.createElement(TooltipItem, {
-              key: name,
-              className: barChartClassNames.barChartTooltipItem
-            }, React__default.createElement(ColFlex, {
-              className: barChartClassNames.barChartTooltipColFlex
-            }, lineType ? React__default.createElement(ColorLine, {
-              className: barChartClassNames.barChartColorLine,
-              style: {
-                backgroundColor: stroke || fill
-              }
-            }) : React__default.createElement(ColorBox, {
-              className: barChartClassNames.barChartColorBox,
-              style: {
-                backgroundColor: color
-              }
-            }), React__default.createElement(Name$1, {
-              className: barChartClassNames.barChartTooltipName
-            }, formatTooltipName ? formatTooltipName(name) : name)), React__default.createElement(Value, {
-              className: barChartClassNames.barChartTooltipValue
-            }, formatTooltipValue ? formatTooltipValue(value, name) : format(value)));
-          })));
-          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);
-    const x = rectrX - (rectrX - nodeX);
-    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 {
-        values,
-        name,
-        stroke
-      } = _ref6;
-      const {
-        stacksCount
-      } = stack.reduce((acc, _ref7) => {
-        let {
-          stackIndex
-        } = _ref7;
-        const {
-          indexFlag,
-          stacksCount
-        } = acc;
-        if (stackIndex !== indexFlag) {
-          return {
-            indexFlag: stackIndex,
-            stacksCount: stacksCount + 1
-          };
-        }
-        return acc;
-      }, {
-        indexFlag: -1,
-        stacksCount: 0
-      });
-      const barsWidth = (barWidth * stacksCount + (barPadding || 0) * (stacksCount - 1)) / 2;
-      return {
-        x: stack[0].x - barWidth / 2 + barsWidth,
-        y: yScale(values[index]) + marginTop,
-        height: 0,
-        color: stroke,
-        value: values[index],
-        groupName: stack[0].groupName,
-        name,
-        stackIndex: 0,
-        groupIndex: index
-      };
-    }))) : marshalledData;
-    const groups = labelContainer.selectAll('div').data(concatedData).enter().append('div').style('position', 'absolute').style('transform', (_, index) => "translate(" + Math.round(xScale(index)) + "px," + -(marginTop || 0) + "px)");
-    const LabelFlexStyled = labelPosition === 'center' ? LabelFlexCenter : LabelFlex;
-    const LabelStyle = getLabel(labelPosition);
-    groups.selectAll('span').data(item => onLabelItem ? onLabelItem(item) : item).join('div').style('left', item => Math.round(item.x + barWidth / 2) + "px").style('top', item => getLabelY(labelPosition, y2, item) + "px").style('position', 'absolute').html(item => ReactDOMServer.renderToString(React__default.createElement(LabelFlexStyled, {
-      className: barChartClassNames.barChartLabelFlex
-    }, renderLabel ? renderLabel(_extends({}, item, {
-      barWidth
-    })) : React__default.createElement(LabelStyle, {
-      className: barChartClassNames.barChartLabel
-    }, format(item.value)))));
-  }
-};
-
-const _excluded$5 = ["groupName"];
-const resizeBarWidth = _ref => {
-  let {
-    data,
-    range,
-    barWidth,
-    barPadding,
-    sectionPadding
-  } = _ref;
-  const groupPadding = typeof sectionPadding === 'number' ? sectionPadding : 0;
-  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;
-};
-
-const MIN_BAR_HEIGHT = 2;
-const getBars = _ref => {
-  let {
-    groups,
-    barWidth
-  } = _ref;
-  return groups.selectAll('rect').data(item => item).join('rect').attr('x', item => item.x).attr('y', item => item.y).attr('width', barWidth).attr('height', item => item.value === null ? 0 : Math.max(item.height, MIN_BAR_HEIGHT)).style('fill', item => item.color);
-};
-
-const MIN_BAR_HEIGHT$1 = 2;
-const draw$4 = (node, props) => {
-  const {
-    data,
-    lineData = [],
-    markers = [],
-    barWidth: barWidthProp,
-    barPadding,
-    colors,
-    margin,
-    xAxisPadding,
-    yAxisPadding,
-    drawGridY,
-    drawGridX,
-    customYScale,
-    customXScale,
-    customYAxisLeft,
-    customXAxisBottom,
-    customYAxis,
-    customXAxis,
-    customBars,
-    customize,
-    dynamicTooltipEnable,
-    hideTooltipGroupName,
-    renderTooltip,
-    labelPosition,
-    renderLabel,
-    tooltipY,
-    tooltipBind,
-    stackedLine,
-    curve,
-    formatTooltipValue,
-    formatTooltipName,
-    sectionPadding,
-    minValuesLine,
-    tooltipYDomain,
-    marshalledMap,
-    minValue,
-    maxValue,
-    minDomainValue,
-    maxDomainValue,
-    drawBars,
-    setTooltipPosition,
-    onLabelItem,
-    isBarTooltip,
-    xScaleItemWidth,
-    tooltipRoot,
-    tooltipClassName,
-    onBarClick,
-    onBarHover
-  } = props;
-  if (node !== null && data.length) {
-    const marginTop = margin ? margin.top : 0;
-    const marginRight = margin ? margin.right : 0;
-    const marginBottom = margin ? margin.bottom : 0;
-    const marginLeft = margin ? margin.left : 0;
-    const defaultBarWidth = 12;
-    const {
-      width: nodeWidth
-    } = node.getBoundingClientRect();
-    const width = props.width || nodeWidth;
-    const height = props.height || 0;
-    const barDomain = getDomain({
-      data,
-      minDomainValue,
-      maxDomainValue
-    });
-    const min = typeof minValue === 'number' ? minValue : Math.min(d3.min(lineData, _ref => {
-      let {
-        values
-      } = _ref;
-      return d3.min(values);
-    }) || Number.POSITIVE_INFINITY, barDomain.min || 0);
-    const max = typeof maxValue === 'number' ? maxValue : Math.max(d3.max(lineData, _ref2 => {
-      let {
-        values
-      } = _ref2;
-      return d3.max(values);
-    }) || Number.NEGATIVE_INFINITY, barDomain.max);
-    const svg = appendSvg(node, width, height || 0);
-    const yTicksCountDefault = 6;
-    const labels = data.map(item => item.groupName);
-    let barWidth = barWidthProp || defaultBarWidth;
-    const yScale = d3.scaleLinear().domain([min, max]).range([height - marginTop - marginBottom - (xAxisPadding || 0), marginTop]).nice();
-    customYScale && customYScale(yScale);
-    const yTicks = yScale.ticks();
-    const yAxisLeft = d3.axisLeft(yScale).ticks(yTicksCountDefault);
-    customYAxisLeft && customYAxisLeft(yAxisLeft);
-    const yTicksCount = yAxisLeft.tickArguments()[0];
-    const yAxis = svg.append('g').attr('class', barChartClassNames.barChartYAxis).call(yAxisLeft);
-    yAxis.selectAll('.tick').attr('class', value => {
-      return value === 0 ? "tick " + barChartClassNames.barChartYAxisZeroTick : 'tick';
-    });
-    customYAxis && customYAxis(yAxis);
-    const {
-      width: yAxisWidth
-    } = computeDimensions(yAxis);
-    const range = [marginLeft + yAxisWidth + (yAxisPadding || 0), width - marginRight];
-    const xScale = d3.scaleBand().domain(d3.range(data.length)).range(range);
-    barWidth = resizeBarWidth({
-      data,
-      sectionPadding,
-      range,
-      barWidth,
-      barPadding
-    });
-    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;
-        const ticks = Math.round(chartWidth / xScaleItemWidth);
-        const length = array.length;
-        const divider = Math.round(length / ticks);
-        return !(i % divider);
-      })).tickSizeOuter(0);
-    }
-    customXAxisBottom && customXAxisBottom(xAxisBottom, {
-      node,
-      labels
-    });
-    const xAxis = svg.append('g').call(xAxisBottom).attr('class', barChartClassNames.barChartXAxis);
-    customXAxis && customXAxis(xAxis);
-    const marshalled = marshaling({
-      data,
-      yScale,
-      xScale,
-      barWidth,
-      barPadding: typeof barPadding === 'number' ? barPadding : 0,
-      colors,
-      marginTop
-    });
-    const marshalledData = marshalledMap ? marshalledMap(marshalled) : marshalled;
-    yAxis.attr('transform', "translate( " + (marginLeft + yAxisWidth) + ", 0)");
-    drawGrid$1({
-      svg,
-      yScale,
-      xScale,
-      yTicksCount,
-      drawGridY,
-      drawGridX
-    });
-    xAxis.attr('transform', "translate(0, " + (yScale(yTicks[0]) + (xAxisPadding || 0)) + ")");
-    const maskId = "height-limit-mask-" + lodash.uniqueId();
-    svg.append('defs').append('mask').attr('id', maskId).append('rect').attr('width', '100%').attr('height', height - marginBottom + MIN_BAR_HEIGHT$1).attr('fill', 'white');
-    const gSvg = svg.append('g').attr('class', barChartClassNames.barChartBarGlobal).attr('mask', "url(#" + maskId + ")");
-    const groups = gSvg.selectAll('g').data(marshalledData).enter().append('g').attr('transform', (_, i) => "translate(" + Math.round(xScale(i)) + "," + -(marginTop || 0) + ")");
-    const bars = drawBars ? drawBars({
-      groups,
-      yScale,
-      marshalledData,
-      barWidth
-    }) : getBars({
-      groups,
-      barWidth
-    });
-    markers.forEach(marker => {
-      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,
-        lineData,
-        xScale,
-        yScale,
-        min: typeof minValuesLine === 'number' ? minValuesLine : min,
-        stackedLine,
-        curve
-      });
-    }
-    customBars && customBars({
-      bars,
-      yScale,
-      lines,
-      marshalledData,
-      lineData
-    });
-    if (dynamicTooltipEnable || labelPosition) {
-      drawTooltip$2({
-        svg,
-        node,
-        xScale,
-        yScale,
-        marshalledData,
-        data,
-        lineData,
-        renderTooltip,
-        labelPosition,
-        marginTop,
-        renderLabel,
-        barWidth,
-        barPadding,
-        dynamicTooltipEnable,
-        hideTooltipGroupName,
-        tooltipY,
-        tooltipBind,
-        formatTooltipValue,
-        formatTooltipName,
-        tooltipYDomain,
-        setTooltipPosition,
-        onLabelItem,
-        isBarTooltip,
-        bars: groups,
-        tooltipRoot,
-        tooltipClassName,
-        onBarClick,
-        onBarHover
-      });
-    }
-    customize && customize({
-      svg,
-      marshalledData,
-      yScale,
-      xScale,
-      lineData
-    });
-  }
-};
-
-const BarChart = props => {
-  const {
-    className,
-    style,
-    children,
-    selectable
-  } = props;
-  const [ref, node] = useNode();
-  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", {
-    className: className,
-    style: style
-  }, React__default.createElement(TooltipStyles$1, null), React__default.createElement(SvgWrapper$4, {
-    ref: ref,
-    selectable: selectable
-  }, children));
-};
-BarChart.defaultProps = {
-  data: [],
-  colors: {},
-  margin: {
-    top: 10,
-    right: 10,
-    bottom: 10,
-    left: 0
-  },
-  barWidth: 12,
-  barPadding: 0,
-  height: 320,
-  yAxisPadding: 0,
-  xAxisPadding: 0,
-  tooltipBind: true,
-  sectionPadding: 1
-};
-
-const _excluded$6 = ["value"];
-const hundred = 100;
-const useMarshaling = _ref => {
-  let {
-    data,
-    fullExtent,
-    maxValue,
-    labels
-  } = _ref;
-  return React.useMemo(() => {
-    const fullMax = d3.max(data, item => d3.sum(item, _ref2 => {
-      let {
-        value
-      } = _ref2;
-      return value;
-    }));
-    const scaleLinear = d3.scaleLinear().domain([0, typeof maxValue === 'number' ? maxValue : fullMax]).range([0, hundred]);
-    return {
-      fullMax,
-      data: data.map((item, index) => {
-        if (!fullExtent) {
-          scaleLinear.domain([0, typeof maxValue === 'number' ? maxValue : d3.sum(item, _ref3 => {
-            let {
-              value
-            } = _ref3;
-            return value;
-          })]);
-        }
-        return item.map(_ref4 => {
-          let {
-              value
-            } = _ref4,
-            rest = _objectWithoutPropertiesLoose(_ref4, _excluded$6);
-          return _extends({}, rest, {
-            value,
-            width: scaleLinear(value),
-            groupName: labels ? labels[index] : ''
-          });
-        });
-      })
-    };
-  }, [data, fullExtent, maxValue, labels]);
-};
-
-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"
-};
-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"])));
-const BarFlex = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  height: 1rem;\n"])));
-const BarsTd = /*#__PURE__*/styled__default.td(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  position: relative;\n  vertical-align: middle;\n"])));
-const TooltipFlex$1 = /*#__PURE__*/styled__default(TooltipFlex)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  will-change: left, top;\n"])));
-const StackSumContainer = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-const StackSum = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(0, -50%);\n"])));
-const StackWrapper = /*#__PURE__*/styled__default.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  display: flex;\n  justify-content: flex-start;\n  height: 100%;\n"])));
-
-const Tooltip = _ref => {
-  let {
-    renderTooltip,
-    bars,
-    style,
-    className
-  } = _ref;
-  const format = d3.format(',');
-  return React__default.createElement(TooltipFlex$1, {
-    className: horizontalBarChartClassNames.horizontalBarChartTooltipFlex + " " + (className || ''),
-    style: style
-  }, React__default.createElement(TooltipContainer, {
-    className: horizontalBarChartClassNames.horizontalBarChartTooltipContainer
-  }, renderTooltip ? renderTooltip(bars) : bars.map((_ref2, index) => {
-    let {
-      color,
-      name,
-      value,
-      groupName
-    } = _ref2;
-    return React__default.createElement(TooltipItem, {
-      key: (name || '') + "-" + index + "-" + groupName,
-      className: horizontalBarChartClassNames.horizontalBarChartTooltipItem
-    }, color && React__default.createElement(ColorBox, {
-      style: {
-        backgroundColor: color
-      }
-    }), name && React__default.createElement(Name$1, {
-      className: horizontalBarChartClassNames.horizontalBarChartTooltipName
-    }, name), React__default.createElement(Value, {
-      className: horizontalBarChartClassNames.horizontalBarChartTooltipValue
-    }, format(value)));
-  })));
-};
-
-const rootElement = /*#__PURE__*/document.createElement('div');
-const useTooltip = _ref => {
-  let {
-    renderTooltip,
-    tooltipBind,
-    tooltipStyle,
-    tooltipRoot,
-    tooltipClassName,
-    hideTooltip
-  } = _ref;
-  React.useEffect(() => {
-    const container = tooltipRoot || document.querySelector('body');
-    container && container.appendChild(rootElement);
-    return () => {
-      reactDom.unmountComponentAtNode(rootElement);
-    };
-  }, [tooltipRoot]);
-  const onMouseMove = React.useCallback((event, bars) => {
-    let [x, y] = d3.pointer(event, document);
-    if (!tooltipBind && 'getBoundingClientRect' in event.target) {
-      const {
-        width,
-        height
-      } = event.target.getBoundingClientRect();
-      const [barX, barY] = d3.pointer(event, event.target);
-      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,
-        top: y
-      }, tooltipStyle),
-      bars: bars,
-      renderTooltip: renderTooltip,
-      className: tooltipClassName
-    }), rootElement);
-  }, [tooltipClassName, tooltipStyle, renderTooltip, tooltipBind]);
-  const onMouseLeave = React.useCallback(() => {
-    if (rootElement) {
-      rootElement.style.visibility = 'hidden';
-      hideTooltip && hideTooltip();
-    }
-  }, [hideTooltip]);
-  return [onMouseMove, onMouseLeave];
-};
-
-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);
-    return React__default.createElement(StackWrapper, Object.assign({
-      className: horizontalBarChartClassNames.horizontalBarChartStackWrapper,
-      onMouseOver: event => mouseMove(event, item),
-      onMouseMove: tooltipBind ? event => mouseMove(event, item) : void 0,
-      onMouseOut: mouseLeave
-    }, props));
-  } : _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return React__default.createElement(React.Fragment, null, children);
-  }, [stackedTooltip]);
-};
-
-var _templateObject$c;
-const BarStyled = /*#__PURE__*/styled__default.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  height: 100%;\n"])));
-
-const Bar = _ref => {
-  let {
-    withTooltip,
-    bar,
-    formatNativeTitle,
-    tooltipBind,
-    mouseMove,
-    mouseLeave,
-    pointerEventsNone,
-    isFirstChild,
-    isLastChild,
-    isOnlyChild
-  } = _ref;
-  const {
-    color,
-    width
-  } = bar;
-  const ceiledWidth = Math.abs(width);
-  const onMouseMove = withTooltip ? event => mouseMove(event, [bar]) : void 0;
-  const onMouseLeave = withTooltip ? () => mouseLeave() : void 0;
-  return React__default.createElement(BarStyled, {
-    className: horizontalBarChartClassNames.horizontalBarChartBar + " " + (isFirstChild ? horizontalBarChartClassNames.horizontalBarChartBarFirst : '') + " " + (isLastChild ? horizontalBarChartClassNames.horizontalBarChartBarLast : '') + " " + (isOnlyChild ? horizontalBarChartClassNames.horizontalBarChartBarOnly : ''),
-    style: {
-      width: ceiledWidth + "%",
-      backgroundColor: color,
-      pointerEvents: pointerEventsNone ? 'none' : 'auto'
-    },
-    title: formatNativeTitle ? formatNativeTitle(bar) : '',
-    onMouseOver: onMouseMove,
-    onMouseMove: tooltipBind ? onMouseMove : void 0,
-    onMouseOut: onMouseLeave
-  });
-};
-
-const hundred$1 = 100;
-const useScale = _ref => {
-  let {
-    maxValue,
-    scaleTicks,
-    scaleDomain
-  } = _ref;
-  return React.useMemo(() => {
-    const scaleLinear = d3.scaleLinear().domain([0, maxValue]).range([0, hundred$1]);
-    const ticks = scaleLinear.ticks(scaleTicks);
-    return (scaleDomain || ticks).map(value => ({
-      value,
-      x: scaleLinear(value)
-    }));
-  }, [maxValue, scaleTicks, scaleDomain]);
-};
-
-var _templateObject$d, _templateObject2$6, _templateObject3$3;
-const TickTd = /*#__PURE__*/styled__default.td(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-const Ticks = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 1rem;\n"])));
-const Tick = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  width: 0;\n  height: 0;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-
-const XScale = _ref => {
-  let {
-    maxValue,
-    scaleTicks,
-    renderTicks,
-    scaleDomain
-  } = _ref;
-  const range = useScale({
-    maxValue,
-    scaleTicks,
-    scaleDomain
-  });
-  const format = d3.format(',');
-  return React__default.createElement("tr", null, React__default.createElement("td", null), React__default.createElement(TickTd, {
-    className: horizontalBarChartClassNames.horizontalBarChartXScaleTd
-  }, React__default.createElement(Ticks, {
-    className: horizontalBarChartClassNames.horizontalBarChartXScaleTicks
-  }, range.map((tick, index, ticks) => {
-    const {
-      value,
-      x
-    } = tick;
-    return React__default.createElement(Tick, {
-      key: value,
-      className: horizontalBarChartClassNames.horizontalBarChartXScaleTick,
-      style: {
-        left: x + "%",
-        justifyContent: index === 0 ? 'flex-start' : index === ticks.length - 1 ? 'flex-end' : ''
-      }
-    }, renderTicks ? renderTicks(tick) : format(value));
-  }))));
-};
-
-const HorizontalBarChart = _ref => {
-  let {
-    data,
-    className,
-    style,
-    children,
-    labels,
-    fullExtent,
-    maxValue,
-    formatNativeTitle,
-    renderTooltip,
-    withTooltip,
-    withStackSum,
-    tooltipBind,
-    scaleTicks,
-    renderTicks,
-    renderButton,
-    tooltipStyle,
-    tooltipClassName,
-    scaleDomain,
-    renderDataTable,
-    thead,
-    withoutXScale,
-    stackedTooltip,
-    fullChartTooltip,
-    hideTooltip
-  } = _ref;
-  const {
-    fullMax,
-    data: marshalingData
-  } = useMarshaling({
-    data,
-    fullExtent,
-    maxValue,
-    labels
-  });
-  const [mouseMove, mouseLeave] = useTooltip({
-    renderTooltip,
-    tooltipBind,
-    tooltipStyle,
-    tooltipClassName,
-    hideTooltip
-  });
-  const Stack = useStackWrapper(stackedTooltip);
-  return React__default.createElement(Table, {
-    className: className,
-    style: style,
-    onMouseOver: fullChartTooltip ? event => mouseMove(event, marshalingData.flat()) : void 0,
-    onMouseMove: fullChartTooltip ? event => mouseMove(event, marshalingData.flat()) : void 0,
-    onMouseOut: fullChartTooltip ? mouseLeave : void 0
-  }, thead, React__default.createElement("tbody", null, marshalingData.map((item, rowIndex) => {
-    const stackSum = (withStackSum || renderDataTable) && d3.sum(item, _ref2 => {
-      let {
-        value
-      } = _ref2;
-      return value;
-    });
-    const sumWidth = d3.sum(item, _ref3 => {
-      let {
-        width
-      } = _ref3;
-      return width;
-    });
-    return React__default.createElement("tr", {
-      key: "row-" + rowIndex
-    }, typeof renderButton === "function" && React__default.createElement("td", {
-      className: horizontalBarChartClassNames.horizontalBarChartButtonTd
-    }, renderButton(item, rowIndex)), React__default.createElement("td", {
-      className: horizontalBarChartClassNames.horizontalBarChartLabelTd
-    }, labels && labels[rowIndex] && React__default.createElement(LabelCell, {
-      className: horizontalBarChartClassNames.horizontalBarChartLabelCell
-    }, labels[rowIndex])), React__default.createElement(BarsTd, {
-      className: horizontalBarChartClassNames.horizontalBarChartBarTd,
-      style: {
-        pointerEvents: fullChartTooltip ? "none" : "auto"
-      }
-    }, React__default.createElement(BarFlex, {
-      className: horizontalBarChartClassNames.horizontalBarChartBarFlex,
-      style: {
-        pointerEvents: fullChartTooltip ? "none" : "auto"
-      }
-    }, React__default.createElement(Stack, {
-      style: stackedTooltip ? {
-        width: sumWidth + "%"
-      } : void 0,
-      item: item,
-      tooltipBind: tooltipBind,
-      mouseMove: mouseMove,
-      mouseLeave: mouseLeave
-    }), item.map((bar, barIndex, array) => bar.value !== 0 && React__default.createElement(Bar, {
-      key: "bar-" + (bar.name || "") + "-" + barIndex,
-      formatNativeTitle: formatNativeTitle,
-      bar: bar,
-      tooltipBind: tooltipBind,
-      pointerEventsNone: stackedTooltip || fullChartTooltip,
-      withTooltip: withTooltip && !stackedTooltip,
-      mouseMove: mouseMove,
-      mouseLeave: mouseLeave,
-      isOnlyChild: array.length === 1,
-      isFirstChild: barIndex === 0 && array.length > 1,
-      isLastChild: array.length - 1 === barIndex && array.length > 1
-    })), withStackSum && React__default.createElement(StackSumContainer, {
-      className: horizontalBarChartClassNames.horizontalBarChartStackSumContainer
-    }, React__default.createElement(StackSum, {
-      className: horizontalBarChartClassNames.horizontalBarChartStackSum
-    }, stackSum)))), renderDataTable && renderDataTable(item, stackSum, rowIndex));
-  }), !withoutXScale && React__default.createElement(XScale, {
-    maxValue: typeof maxValue === "number" ? maxValue : fullMax,
-    scaleTicks: scaleTicks,
-    renderTicks: renderTicks,
-    scaleDomain: scaleDomain
-  }), children));
-};
-HorizontalBarChart.defaultProps = {
-  fullExtent: true,
-  withTooltip: false,
-  withStackSum: false,
-  tooltipBind: false,
-  scaleTicks: 4,
-  withoutXScale: false
-};
-
-const bubbleChartDefaultProps = {
-  height: 280,
-  minSize: 6,
-  maxSize: 30,
-  margin: {
-    top: 10,
-    right: 15,
-    bottom: 10,
-    left: 0
-  },
-  yAxisPadding: 10,
-  xAxisPadding: 10,
-  yScaleLabelPadding: 10
-};
-
-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);
-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 => {
-  let {
-    svg,
-    yScale,
-    xScale,
-    yTicksCount,
-    drawGridX,
-    drawGridY
-  } = _ref;
-  if (!drawGridY && !drawGridX) return;
-  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])));
-  }
-};
-
-var _templateObject$f;
-const Tooltip$1 = /*#__PURE__*/styled__default.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 0;\n  height: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  font-size: 12px;\n  white-space: nowrap;\n"])));
-
-const drawTooltip$3 = _ref => {
-  let {
-    bubbles,
-    tooltipRoot,
-    tooltipClassName,
-    renderTooltip
-  } = _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 {
-      sizeValue
-    } = data;
-    const circle = event.currentTarget;
-    const {
-      x,
-      y,
-      width
-    } = circle.getBoundingClientRect();
-    const left = window.pageXOffset + x + width / 2;
-    const top = window.pageYOffset + y;
-    tooltip.style('left', left + "px").style('top', top + "px").html(() => {
-      const html = ReactDOMServer.renderToString(React__default.createElement(Tooltip$1, {
-        className: bubbleChartClassNames.bubbleChartTooltipFlex
-      }, React__default.createElement(TooltipContainer, {
-        className: bubbleChartClassNames.bubbleChartTip
-      }, format(sizeValue))));
-      return html;
-    });
-    renderTooltip && renderTooltip({
-      tooltip,
-      data,
-      circle
-    });
-    tooltip.style('opacity', '1');
-  });
-  bubbles.on('mouseout.tooltip', () => {
-    tooltip.style('opacity', '0');
-  });
-};
-
-const draw$5 = (node, props) => {
-  const {
-    data,
-    margin,
-    xAxisPadding,
-    yAxisPadding,
-    customYScale,
-    customYAxis,
-    customXScale,
-    customXAxis,
-    minSize,
-    maxSize,
-    minYValue,
-    maxYValue,
-    drawGridY,
-    drawGridX,
-    scaleLog,
-    xScaleItemWidth,
-    bubbleStyle,
-    customize,
-    yScaleLabel,
-    yScaleLabelPadding,
-    enableTooltip,
-    tooltipRoot,
-    tooltipClassName,
-    renderTooltip
-  } = props;
-  if (node !== null && data.length) {
-    const marginTop = margin ? margin.top : 0;
-    const marginRight = margin ? margin.right : 0;
-    const marginBottom = margin ? margin.bottom : 0;
-    const marginLeft = margin ? margin.left : 0;
-    const {
-      width: nodeWidth
-    } = node.getBoundingClientRect();
-    const width = props.width || nodeWidth;
-    const height = props.height || 0;
-    const yTicksCountDefault = 6;
-    const minY = typeof minYValue === 'number' ? minYValue : d3.min(data, _ref => {
-      let {
-        yValue
-      } = _ref;
-      return yValue;
-    });
-    const maxY = typeof maxYValue === 'number' ? maxYValue : d3.max(data, _ref2 => {
-      let {
-        yValue
-      } = _ref2;
-      return yValue;
-    });
-    const svg = appendSvg(node, width, height || 0);
-    const sizeScale = scaleLog ? d3.scaleLog().domain([d3.min(data, _ref3 => {
-      let {
-        sizeValue
-      } = _ref3;
-      return sizeValue;
-    }) || 0.1, d3.max(data, _ref4 => {
-      let {
-        sizeValue
-      } = _ref4;
-      return sizeValue;
-    }) || 0.1]).range([minSize || bubbleChartDefaultProps.minSize || 0.1, maxSize || bubbleChartDefaultProps.maxSize || 0.1]) : d3.scaleLinear().domain([d3.min(data, _ref5 => {
-      let {
-        sizeValue
-      } = _ref5;
-      return sizeValue;
-    }), d3.max(data, _ref6 => {
-      let {
-        sizeValue
-      } = _ref6;
-      return sizeValue;
-    })]).range([minSize || bubbleChartDefaultProps.minSize, maxSize || bubbleChartDefaultProps.maxSize]);
-    const yRange1 = height - marginTop - marginBottom - (xAxisPadding || 0);
-    const yScale = scaleLog ? d3.scaleLog().domain([minY || 0.1, maxY || 0.1]).range([yRange1 || 0.1, marginTop || 0.1]).nice() : d3.scaleLinear().domain([minY, maxY]).range([yRange1, marginTop]).nice();
-    customYScale && customYScale(yScale);
-    const yTicks = yScale.ticks();
-    const yAxisLeft = d3.axisLeft(yScale).ticks(yTicksCountDefault);
-    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 {
-        width,
-        height
-      } = computeDimensions(label);
-      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';
-    });
-    customYAxis && customYAxis(yAxis);
-    const {
-      width: yAxisWidth
-    } = computeDimensions(yAxis);
-    const xScale = scaleLog ? d3.scaleLog().domain([d3.min(data, _ref7 => {
-      let {
-        xValue
-      } = _ref7;
-      return xValue;
-    }) || 0.1, d3.max(data, _ref8 => {
-      let {
-        xValue
-      } = _ref8;
-      return xValue;
-    }) || 0.1]).range([marginLeft + yAxisWidth + (yAxisPadding || 0) + yScaleLabelHeight || 0.1, width - marginRight || 0.1]) : d3.scaleLinear().domain([d3.min(data, _ref9 => {
-      let {
-        xValue
-      } = _ref9;
-      return xValue;
-    }), d3.max(data, _ref0 => {
-      let {
-        xValue
-      } = _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)");
-    drawGrid$2({
-      svg,
-      yScale,
-      xScale,
-      yTicksCount,
-      drawGridY,
-      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', _ref1 => {
-      let {
-        xValue
-      } = _ref1;
-      return xScale(xValue);
-    }).attr('cy', _ref10 => {
-      let {
-        yValue
-      } = _ref10;
-      return yScale(yValue);
-    }).attr('r', _ref11 => {
-      let {
-        sizeValue
-      } = _ref11;
-      return sizeScale(sizeValue) / 2;
-    }).attr('fill', _ref12 => {
-      let {
-        color
-      } = _ref12;
-      return color || 'rgba(0, 176, 113, 0.6)';
-    }).attr('stroke', _ref13 => {
-      let {
-        stroke
-      } = _ref13;
-      return stroke || 'transparent';
-    }).attr('style', _ref14 => {
-      let {
-        style
-      } = _ref14;
-      return style || bubbleStyle || '';
-    });
-    if (enableTooltip) {
-      drawTooltip$3({
-        bubbles,
-        tooltipRoot,
-        tooltipClassName,
-        renderTooltip
-      });
-    }
-    customize && customize({
-      svg,
-      bubbles,
-      yScale,
-      xScale,
-      sizeScale
-    });
-  }
-};
-
-const unmount = tooltipRoot => {
-  const root = tooltipRoot || document.querySelector('body');
-  d3.select(root).select("." + bubbleChartClassNames.bubbleChartTooltip).remove();
-};
-
-const BubbleChart = props => {
-  const {
-    className,
-    style,
-    children,
-    tooltipRoot
-  } = props;
-  const [ref, node] = useNode();
-  React.useEffect(() => {
-    node && draw$5(node, props);
-  }, [node, props]);
-  React.useEffect(() => {
-    return () => unmount(tooltipRoot);
-  }, [tooltipRoot]);
-  const onDraw = () => draw$5(node, props);
-  useResize(props.width, onDraw);
-  return React__default.createElement("div", {
-    className: className,
-    style: style
-  }, React__default.createElement(TooltipStyles$2, null), React__default.createElement(SvgWrapper$5, {
-    ref: ref
-  }, children));
-};
-BubbleChart.defaultProps = bubbleChartDefaultProps;
-
-exports.BarChart = BarChart;
-exports.BubbleChart = BubbleChart;
-exports.CalendarChart = CalendarChart;
-exports.ChartWrapper = Wrapper;
-exports.HorizontalBarChart = HorizontalBarChart;
-exports.LineChart = LineChart;
-exports.PieChart = PieChart;
-exports.RadarChart = RadarChart;
-exports.SwipeScroll = SwipeScroll;
-exports.appendSvg = appendSvg;
-exports.barChartClassNames = barChartClassNames;
-exports.bubbleChartClassNames = bubbleChartClassNames;
-exports.calendarChartClassNames = calendarChartClassNames;
-exports.horizontalBarChartClassNames = horizontalBarChartClassNames;
-exports.lineChartClassNames = lineChartClassNames;
-exports.pieChartclassNames = pieChartclassNames;
-exports.radarChartclassNames = radarChartclassNames;
-exports.useNode = useNode;
-exports.useResize = useResize;
-//# sourceMappingURL=charts.cjs.development.js.map