@evergis/charts 3.1.9 → 3.1.11

package/dist/charts.cjs.development.js

@@ -0,0 +1,3723 @@
+'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() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  strings.raw = raw;
+  return strings;
+}
+
+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, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+const TooltipFlex = /*#__PURE__*/styled__default.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 0;\n  height: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  pointer-events: none;\n  white-space: nowrap;\n"])));
+const LabelFlex = /*#__PURE__*/styled__default(TooltipFlex)(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+const LabelFlexCenter = /*#__PURE__*/styled__default(LabelFlex)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-items: center;\n"])));
+const TooltipContainer = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  font-size: 11px;\n  color: #fff;\n  margin-bottom: 8px;\n  padding: 4px 6px;\n  background-color: rgba(48, 69, 79, 1);\n  border-radius: 4px;\n  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);\n  :before {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 100%);\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 4px 3px 0 3px;\n    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;\n  }\n"])));
+const TooltipGroupName = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  margin-bottom: 6px;\n"])));
+const TooltipItem = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.25rem;\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"])));
+const ColFlex = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: 4px;\n"])));
+const ColorBox = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  width: 10px;\n  height: 10px;\n  border-radius: 2px;\n"])));
+const ColorLine = /*#__PURE__*/styled__default(ColorBox)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  border-radius: 0;\n"])));
+const Name$1 = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n"])));
+const Value = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: right;\n  flex-shrink: 0;\n  flex-grow: 1;\n"])));
+const Label$1 = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  font-size: 11px;\n  color: #fff;\n  font-weight: bold;\n  letter-spacing: 0.52px;\n"])));
+const LabelTop = /*#__PURE__*/styled__default(Label$1)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 6px;\n"])));
+const LabelBottom = /*#__PURE__*/styled__default(Label$1)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  bottom: 6px;\n"])));
+
+const 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) + ")").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    display: inline-flex;\n    align-items: flex-end;\n    height: ", ";\n    margin-bottom: 4px;\n    font-weight: bold;\n  }\n  .", " {\n    height: ", ";\n    margin-bottom: 4px;\n    position: relative;\n    display: flex;\n  }\n  .", " {\n    font-size: 14px;\n    bottom: 0;\n    position: absolute;\n  }\n  .", " {\n    display: flex;\n    flex-direction: column;\n    margin-right: 10px;\n  }\n  .", " {\n    font-size: 12px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n  .", " {\n    position: relative;\n  }\n  .", " {\n    position: absolute;\n  }\n"])), calendarChartClassNames.calendarYear, calendarChartClassNames.calendarYearTitle, headerHeight, calendarChartClassNames.calendarHeader, headerHeight, calendarChartClassNames.calendarMonth, calendarChartClassNames.calendarAxis, calendarChartClassNames.calendarWeekDay, calendarChartClassNames.calendarDays, calendarChartClassNames.calendarDay);
+
+const 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    fill: none;\n    stroke: steelblue;\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  .", " {\n    fill-opacity: 0.24;\n  }\n  .", ",\n    .", ",\n    .", " {\n    stroke: rgba(149, 149, 149, 0.24);\n  }\n  .", ",\n    .", " {\n    transition: opacity linear 200ms;\n    pointer-events: none;\n    stroke-width: 1px;\n  }\n  .", " {\n    stroke: #fff;\n    stroke-width: 2px;\n  }\n  .", " {\n    shape-rendering: crispEdges;\n  }\n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n"])), lineChartClassNames.lineChartYScaleGlobal, lineChartClassNames.lineChartXScaleGlobal, lineChartClassNames.lineChartGridGlobal, lineChartClassNames.lineChartLinesGlobal, lineChartClassNames.lineChartArea, lineChartClassNames.lineChartGridLineX, lineChartClassNames.lineChartGridLineY, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseCircle, lineChartClassNames.lineChartDot, lineChartClassNames.lineChartMouseLine, lineChartClassNames.lineChartMouseRect);
+const TooltipStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    transition: opacity linear 200ms;\n    z-index: 100;\n    .", " {\n      justify-content: flex-start;\n      align-items: center;\n      pointer-events: none;\n    }\n    .", " {\n      margin: 0 0 0 10px;\n    }\n  }\n"])), lineChartClassNames.lineChartMouseLabel, lineChartClassNames.lineChartLabelFlex, lineChartClassNames.lineChartLabel);
+
+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(_ref10 => {
+      let {
+        dot
+      } = _ref10;
+      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 ? void 0 : node.removeEventListener("mousedown", onStartDrawing);
+      node == null ? void 0 : node.removeEventListener("touchstart", onStartDrawing);
+      node == null ? void 0 : node.removeEventListener("mousemove", onDraw);
+      node == null ? void 0 : node.removeEventListener("touchmove", onDraw);
+      node == null ? void 0 : node.removeEventListener("mouseleave", onMouseLeave);
+      node == null ? void 0 : node.removeEventListener("mouseup", onStopDrawing);
+      node == null ? void 0 : node.removeEventListener("touchend", onStopDrawing);
+      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, _ref10 => {
+      let {
+        xValue
+      } = _ref10;
+      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', _ref11 => {
+      let {
+        xValue
+      } = _ref11;
+      return xScale(xValue);
+    }).attr('cy', _ref12 => {
+      let {
+        yValue
+      } = _ref12;
+      return yScale(yValue);
+    }).attr('r', _ref13 => {
+      let {
+        sizeValue
+      } = _ref13;
+      return sizeScale(sizeValue) / 2;
+    }).attr('fill', _ref14 => {
+      let {
+        color
+      } = _ref14;
+      return color || 'rgba(0, 176, 113, 0.6)';
+    }).attr('stroke', _ref15 => {
+      let {
+        stroke
+      } = _ref15;
+      return stroke || 'transparent';
+    }).attr('style', _ref16 => {
+      let {
+        style
+      } = _ref16;
+      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