@evergis/charts 3.1.6 → 3.1.8

package/dist/index.js

@@ -1,8 +1,3556 @@
+'use strict';
 
-'use strict'
+var styled = require('styled-components');
+var react = require('react');
+var d3 = require('d3');
+var jsxRuntime = require('react/jsx-runtime');
+var ReactDOMServer = require('react-dom/server');
+var lodash = require('lodash');
+var reactDom = require('react-dom');
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./charts.cjs.production.min.js')
-} else {
-  module.exports = require('./charts.cjs.development.js')
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
+
+var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
+
+const Wrapper = styled.div `
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+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 (...args) {
+        if (!isCalled) {
+            fn(...args);
+            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__namespace.select(node)
+        .select('svg')
+        .remove();
+    const svg = d3__namespace
+        .select(node)
+        .append('svg')
+        .attr('width', width)
+        .attr('height', height);
+    return svg;
+};
+
+const SwipeScrollContainer = styled.div `
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
+`;
+
+function animate({ duration, timing, draw, }) {
+    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, { width, duration, animationFunc, onSwipe }) => {
+    const container = d3__namespace.select(node);
+    const body = d3__namespace.select('body');
+    const documentSelect = d3__namespace.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__namespace.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__namespace.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 SwipeScroll = ({ children, width, onSwipe, ...props }) => {
+    const [ref, draggingNode] = useNode();
+    useSwipe(draggingNode, { width, onSwipe, ...props });
+    return (jsxRuntime.jsx(SwipeScrollContainer, { ...props, children: jsxRuntime.jsx("div", { ref: ref, children: children }) }));
+};
+SwipeScroll.defaultProps = {
+    duration: 1400,
+};
+
+const getTranslate$1 = ({ anchor, index, translateX, translateY, }) => {
+    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$2 = styled.div `
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+`;
+const Name$1 = styled.div `
+  text-align: center;
+  max-width: 120px;
+`;
+const middleBadgeStyles = styled.css `
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(calc(100% + 6px), -50%);
+`;
+const DefaultBadge = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: rgb(255, 255, 255);
+  background-color: rgb(144, 197, 61);
+  margin-left: 8px;
+`;
+const MiddleBadge = styled(DefaultBadge) `
+  ${middleBadgeStyles}
+`;
+const BadgePrefix = styled.div `
+  margin-left: 4px;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.54);
+`;
+
+const radarChartclassNames = {
+    radar: 'radar',
+    radarAxis: 'radarAxis',
+    radarAxisTextGlobal: 'radarAxisTextGlobal',
+    radarAxisText: 'radarAxisText',
+    radarPolygon: 'radarPolygon',
+    radarLabel: 'radarLabel',
+    radarLabelName: 'radarLabelName',
+    radarLabelBadge: 'radarLabelBadge',
+    radarLabelBadgePrefix: 'radarLabelBadgePrefix',
+    radarCircle: 'radarCircle',
+};
+const SvgWrapper$5 = styled(Wrapper) `
+  .${radarChartclassNames.radarAxis} {
+    path,
+    line,
+    circle {
+      fill: none;
+      stroke-width: 1px;
+      stroke: rgba(149, 149, 149, 0.18);
+    }
+  }
+  .${radarChartclassNames.radarAxisText} {
+    font-size: 12px;
+    fill-opacity: 0.56;
+  }
+  .${radarChartclassNames.radarPolygon} {
+    fill-opacity: 0.06;
+    stroke-width: 2px;
+    fill: rgb(144, 197, 61);
+    stroke: rgb(144, 197, 61);
+  }
+  .${radarChartclassNames.radarCircle} {
+    fill: rgb(144, 197, 61);
+  }
+`;
+
+const getTranslate = ({ anchor, index, translateX, translateY, }) => {
+    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$1 = styled.div.attrs(props => ({
+    style: {
+        transform: getTranslate(props),
+    },
+})) `
+  position: absolute;
+`;
+
+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';
+};
+
+const labelClassName$1 = "d3-chart-label";
+const drawRadialLabels$1 = ({ node, dataLength, radiusScale, maxValue, angleSlice, radius, xOffset, yOffset, translateX, translateY, renderLabel, selectLabel, }) => {
+    const d3container = d3__namespace.select(node);
+    d3container.selectAll(`.${labelClassName$1}`).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(({ x, y }, index) => {
+        const anchor = getTextAnchor(index, dataLength);
+        const html = ReactDOMServer.renderToString(jsxRuntime.jsx(LabelContainer$1, { anchor: anchor, translateX: translateX || 0, translateY: translateY || 0, index: index, style: {
+                left: x,
+                top: y,
+            }, children: typeof renderLabel === "function"
+                ? renderLabel(anchor, index)
+                : renderLabel }));
+        const label = d3container
+            .append("div")
+            .attr("class", labelClassName$1)
+            .html(html);
+        selectLabel(label, anchor, index);
+    });
+};
+
+const draw$5 = (node, props) => {
+    const { data, curve, polar, formatValue, badgePrefix, labelOffset, circleRadius, svgElements, renderLabel, customize, formatAxisValue, radarStyles, labelIndex, 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__namespace.min(data, i => d3__namespace.min(i.map(({ value }) => value))));
+        const maxValue = (props.maxValue ||
+            Math.max(0, d3__namespace.max(data, i => d3__namespace.max(i.map(({ value }) => 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__namespace
+            .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__namespace
+            .scaleLinear()
+            .range([0, radius])
+            .domain([0, newMaxValue]);
+        const radarLine = d3__namespace
+            .lineRadial()
+            .curve(d3__namespace.curveLinearClosed)
+            // @ts-ignore
+            .radius(({ value }) => radiusScale(value))
+            .angle((_, i) => i * angleSlice);
+        const radarValue = d3__namespace
+            .lineRadial()
+            .curve(curve || d3__namespace.curveLinearClosed)
+            // @ts-ignore
+            .radius(({ value }) => radiusScale(value))
+            .angle((_, i) => i * angleSlice);
+        const svg = appendSvg(node, width, height);
+        const globalCenter = svg.append("g");
+        const levelsGrid = d3__namespace.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(({ name }) => 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?.[index] || "")
+            .attr("d", d => radarValue(
+        // @ts-ignore
+        d.map(dataItem => ({
+            ...dataItem,
+            value: dataItem.value - minValue,
+        }))));
+        const format = d3__namespace.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(({ value }, i) => {
+                    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$1({
+            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 })) : (jsxRuntime.jsxs(Label$2, { className: radarChartclassNames.radarLabel, children: [jsxRuntime.jsx(Name$1, { className: radarChartclassNames.radarLabelName, children: name }), jsxRuntime.jsxs(Badge, { className: radarChartclassNames.radarLabelBadge, children: [formatValue ? formatValue(value, index) : format(value), badgePrefix && (jsxRuntime.jsx(BadgePrefix, { className: radarChartclassNames.radarLabelBadgePrefix, children: 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$5(node, props);
+    }, [node, props]);
+    const onDraw = () => draw$5(node, props);
+    useResize(props.width, onDraw);
+    return (jsxRuntime.jsx("div", { className: className, style: style, children: jsxRuntime.jsx(SvgWrapper$5, { ref: ref }) }));
+};
+RadarChart.defaultProps = {
+    height: 400,
+    data: [],
+    curve: d3__namespace.curveLinearClosed,
+};
+
+function radiansToDegrees(radians) {
+    const flatAngle = 180;
+    return (radians * flatAngle) / Math.PI;
+}
+function degreesToRadians(degrees) {
+    const flatAngle = 180;
+    return degrees * (Math.PI / flatAngle);
+}
+
+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$4 = styled(Wrapper) `
+  .${pieChartclassNames.pieSliceLabel} {
+    fill: #4a4a4a;
+  }
+  .${pieChartclassNames.pieRadialLabel} {
+    position: absolute;
+    max-width: 128px;
+  }
+  .${pieChartclassNames.pieRadialLink} {
+    stroke: #000;
+  }
+  .${pieChartclassNames.pieFullChartTooltipCircle} {
+    fill: transparent;
+    cursor: pointer;
+  }
+`;
+
+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 = ({ arc, enableRadialLabels, global, node, radius, dataReady, radialLabelsLinkHorizontalLength, formatRadialLabel, radialLabelsTextXOffset, translateX, translateY, radialLabelYOffset, radialAngleXOffset, }) => {
+    const d3container = d3__namespace.select(node);
+    d3container.selectAll(`.${pieChartclassNames.pieRadialLabel}`).remove();
+    if (enableRadialLabels) {
+        const defaultRadialLabelsLinkHorizontalLength = 4;
+        const outerArc = d3__namespace
+            .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);
+    }
+};
+
+const TooltipFlex$1 = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  pointer-events: none;
+  white-space: nowrap;
+`;
+const LabelFlex = styled(TooltipFlex$1) ``;
+const LabelFlexCenter = styled(LabelFlex) `
+  align-items: center;
+`;
+const TooltipContainer = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  margin-bottom: 8px;
+  padding: 4px 6px;
+  background-color: rgba(48, 69, 79, 1);
+  border-radius: 4px;
+  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
+
+  :before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 100%);
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 3px 0 3px;
+    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
+  }
+`;
+const TooltipGroupName = styled.div `
+  font-size: 14px;
+  margin-bottom: 6px;
+`;
+const TooltipItem = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+const ColFlex = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+`;
+const ColorBox = styled.div `
+  margin-right: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+`;
+const ColorLine = styled(ColorBox) `
+  height: 2px;
+  border-radius: 0;
+`;
+const Name = styled.div `
+  margin-right: 4px;
+`;
+const Value = styled.div `
+  text-align: right;
+  flex-shrink: 0;
+  flex-grow: 1;
+`;
+const Label$1 = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 0.52px;
+`;
+const LabelTop = styled(Label$1) `
+  top: 6px;
+`;
+const LabelBottom = styled(Label$1) `
+  bottom: 6px;
+`;
+
+const drawTooltip$3 = ({ fullChartTooltip, global, tooltipRoot, data, tooltipClassName, tooltipBind, renderTooltip, arc, allSlices, tooltipStyle, width, height, radius, }) => {
+    const container = tooltipRoot || document.querySelector("body");
+    const format = d3__namespace.format(",");
+    const pieTooltipContainer = d3__namespace.select(container).select(`.${pieChartclassNames.pieTooltipContainer}`);
+    const isEmpty = pieTooltipContainer.empty();
+    const tooltipContainer = isEmpty
+        ? d3__namespace
+            .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(([prop, val]) => 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__namespace.pointer(event, document);
+        if (!tooltipBind && fullChartTooltip) {
+            const [itemX, itemY] = d3__namespace.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(jsxRuntime.jsx(TooltipFlex$1, { className: pieChartclassNames.pieTooltipFlex, children: jsxRuntime.jsx(TooltipContainer, { className: pieChartclassNames.pieTooltip, children: renderTooltip ? (renderTooltip(pieChartData)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: pieChartData.map(({ color, name, value }, index) => (jsxRuntime.jsxs(TooltipItem, { className: pieChartclassNames.pieTooltipItem, children: [color && (jsxRuntime.jsx(ColorBox, { className: pieChartclassNames.pieTooltipColorBox, style: { backgroundColor: color } })), name && (jsxRuntime.jsx(Name, { className: pieChartclassNames.pieTooltipName, children: name })), jsxRuntime.jsx(Value, { className: pieChartclassNames.pieTooltipValue, children: format(value) })] }, `${name}-${index}`))) })) }) }));
+            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$4 = (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__namespace
+            .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(({ value }) => value);
+        // @ts-ignore
+        const dataReady = pie(data);
+        const maxOuterRadius = 0.95;
+        const arc = d3__namespace
+            .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__namespace.format(",");
+        const allSlices = global
+            .selectAll("allSlices")
+            .data(dataReady)
+            .enter()
+            .append("path")
+            // @ts-ignore
+            .attr("d", arc);
+        allSlices
+            .attr("class", pieChartclassNames.pieSlice)
+            .attr("fill", ({ index }) => 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({
+            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$3({
+                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$4(node, props);
+    }, [node, props]);
+    const onDraw = () => draw$4(node, props);
+    useResize(props.width, onDraw);
+    return (jsxRuntime.jsx("div", { className: className, style: style, children: jsxRuntime.jsx(SvgWrapper$4, { ref: ref, children: 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 = 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 = ({ 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, }) => {
+    const svg = d3__namespace
+        .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__namespace.quantize(d3__namespace.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__namespace.quantize(d3__namespace.interpolate(0, 1), n))).toDataURL());
+    }
+    // Sequential
+    else if (color.interpolator) {
+        x = Object.assign(color
+            .copy()
+            .interpolator(d3__namespace.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__namespace
+                    .range(n)
+                    .map(i => d3__namespace.quantile(color.domain(), i / (n - 1)));
+            }
+            if (typeof tickFormat !== 'function') {
+                tickFormat = d3__namespace.format(tickFormat === undefined ? ',f' : tickFormat);
+            }
+        }
+    }
+    svg
+        .append('g')
+        .attr('transform', `translate(0,${height - marginBottom})`)
+        // @ts-ignore
+        .call(d3__namespace
+        .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;
+};
+
+const calendarChartClassNames = {
+    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$3 = styled(Wrapper) `
+  .${calendarChartClassNames.calendarYear} {
+    display: flex;
+    margin-bottom: 16px;
+  }
+
+  .${calendarChartClassNames.calendarYearTitle} {
+    display: inline-flex;
+    align-items: flex-end;
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
+
+  .${calendarChartClassNames.calendarHeader} {
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    position: relative;
+    display: flex;
+  }
+
+  .${calendarChartClassNames.calendarMonth} {
+    font-size: 14px;
+    bottom: 0;
+    position: absolute;
+  }
+
+  .${calendarChartClassNames.calendarAxis} {
+    display: flex;
+    flex-direction: column;
+    margin-right: 10px;
+  }
+
+  .${calendarChartClassNames.calendarWeekDay} {
+    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .${calendarChartClassNames.calendarDays} {
+    position: relative;
+  }
+
+  .${calendarChartClassNames.calendarDay} {
+    position: absolute;
+  }
+`;
+
+const draw$3 = (node, props) => {
+    const { data, startSunday, weekdays, interpolator, monthSpacing, onEachDay, colorRange, legendProps, } = props;
+    if (node !== null && data.length) {
+        const years = d3__namespace.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__namespace.utcFormat('%x');
+        const timeWeek = startSunday ? d3__namespace.utcSunday : d3__namespace.utcMonday;
+        const getTimeWeekCount = (from, to) => timeWeek.count(d3__namespace.utcYear(from), to);
+        const getMonthSpacing = (date) => date.getUTCMonth() * (monthSpacing || 0);
+        const formatMonth = d3__namespace.utcFormat('%b');
+        const max = d3__namespace.max(data.map(({ value }) => value));
+        const min = d3__namespace.min(data.map(({ value }) => value));
+        const color = colorRange
+            ? d3__namespace
+                .scaleLinear()
+                .domain([min, max])
+                // @ts-ignore
+                .range(colorRange)
+            : d3__namespace
+                .scaleSequential(interpolator || d3__namespace.interpolateGreens)
+                .domain([min, +max]);
+        let chartWidth = 0;
+        years.forEach((values, year) => {
+            const min = new Date(year, 1);
+            const max = d3__namespace.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__namespace.select(node)
+            .select(`.${calendarChartClassNames.calendarChart}`)
+            .remove();
+        const container = d3__namespace
+            .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(([key]) => key);
+        calendarWeekdays
+            .selectAll('span')
+            .data(d3__namespace.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(([_, values]) => {
+            const fullYearlastMonth = 12;
+            const fullYearlastDate = 31;
+            return d3__namespace.utcMonths(d3__namespace.utcMonth(new Date(values[0].date.getUTCFullYear(), 1, 1)), d3__namespace.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(([, values]) => 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({
+                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$3(node, props);
+        // eslint-disable-next-line
+    }, [
+        node,
+        data,
+        startSunday,
+        weekdays,
+        cellOffset,
+        cellSize,
+        interpolator,
+        monthSpacing,
+        colorRange,
+        legendProps,
+    ]);
+    return (jsxRuntime.jsx(SvgWrapper$3, { ref: ref, className: className, style: style, children: 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 {
+                ...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;
+    });
+};
+
+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$2 = styled(Wrapper) `
+  .${lineChartClassNames.lineChartYScaleGlobal},
+  .${lineChartClassNames.lineChartXScaleGlobal},
+  .${lineChartClassNames.lineChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartLinesGlobal} {
+    fill: none;
+    stroke: steelblue;
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${lineChartClassNames.lineChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${lineChartClassNames.lineChartGridLineX},
+  .${lineChartClassNames.lineChartGridLineY},
+  .${lineChartClassNames.lineChartMouseLine} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${lineChartClassNames.lineChartMouseLine},
+  .${lineChartClassNames.lineChartMouseCircle} {
+    transition: opacity linear 200ms;
+    pointer-events: none;
+    stroke-width: 1px;
+  }
+
+  .${lineChartClassNames.lineChartDot} {
+    stroke: #fff;
+    stroke-width: 2px;
+  }
+
+  .${lineChartClassNames.lineChartMouseLine} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
+`;
+const TooltipStyles$2 = styled.createGlobalStyle `
+  .${lineChartClassNames.lineChartMouseLabel} {
+    transition: opacity linear 200ms;
+    z-index: 100;
+
+    .${lineChartClassNames.lineChartLabelFlex} {
+      justify-content: flex-start;
+      align-items: center;
+      pointer-events: none;
+    }
+
+    .${lineChartClassNames.lineChartLabel} {
+      margin: 0 0 0 10px;
+    }
+  }
+`;
+
+const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, drawGridY, }) => {
+    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])));
+    }
+};
+
+const LabelContainer = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
+`;
+const Label = styled.div `
+  margin-bottom: 4px;
+`;
+
+const labelClassName = "d3-chart-label";
+const drawLabel = ({ node, data, yScale, xScale, formatLabel, eachLabel, }) => {
+    const labelsDiv = d3__namespace
+        .select(node)
+        .append("div")
+        .attr("class", labelClassName);
+    const format = d3__namespace.format(",");
+    // @ts-ignore
+    data.forEach(({ values }) => {
+        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(jsxRuntime.jsx(LabelContainer, { className: lineChartClassNames.lineChartLabelFlex, children: jsxRuntime.jsx(Label, { className: lineChartClassNames.lineChartLabel, children: formatLabel ? formatLabel(d, index, elements) : format(d) }) }));
+            return html;
+        })
+            // @ts-ignore
+            .each(eachLabel ? eachLabel : none);
+    });
+};
+
+const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltipIndex, stackedTooltip, tooltipLineTop, tooltipRoot, tooltipClassName, dotSnapping, lastIndex, }) => {
+    const container = tooltipRoot || document.querySelector("body");
+    const format = d3__namespace.format(",");
+    const chartData = argData.filter(({ tooltipOff }) => !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(({ dynamicDotOff }) => !dynamicDotOff))
+        .join("circle")
+        .attr("class", lineChartClassNames.lineChartMouseCircle)
+        .attr("r", dynamicCircleRadius)
+        .attr("fill", ({ stroke }) => stroke || "none")
+        .attr("stroke", ({ stroke }) => stroke || "none")
+        .style("opacity", "0");
+    let labelContainer = d3__namespace.select(`.${lineChartClassNames.lineChartMouseLabelContainer}`);
+    if (labelContainer.size() === 0) {
+        labelContainer = d3__namespace
+            .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__namespace.pointer(event, document);
+        const [rectrX] = d3__namespace.pointer(event, mouseRect);
+        const [nodeX, nodeY] = d3__namespace.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", ({ dynamicDotStyle }) => dynamicDotStyle || "");
+        const datas = chartData.map(({ values, ...rest }, i) => ({
+            ...rest,
+            value: getValue(values),
+            invertValue: positions[i] ? yScale.invert(positions[i].y) : 0,
+        }));
+        const noHasData = datas.every(({ value }) => isVoid(value));
+        if (noHasData && isVisible) {
+            setVisible();
+        }
+        else if (!isVisible && !noHasData) {
+            setVisible(true);
+        }
+        const topIndex = Object.keys(positions).reduce((acc, key, index) => {
+            const prevValue = datas[Number(acc)]?.value;
+            const value = datas[Number(key)]?.value;
+            const dynamicDotOff = 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) => {
+                return !dotSnapping ? `${left}px` : `${positions[i]?.x ?? 0}px`;
+            })
+                .style("top", (_, i) => {
+                const index = typeof stackedTooltipIndex === "number"
+                    ? stackedTooltipIndex
+                    : stackedTooltip
+                        ? topIndex
+                        : i;
+                return `${(positions[index]?.y ?? 0) + (docY - nodeY)}px`;
+            })
+                .select(`.${lineChartClassNames.lineChartLabel}`);
+        if (renderTooltip && labels) {
+            labels.html((_, index) => {
+                return ReactDOMServer.renderToString(jsxRuntime.jsx(LabelContainer, { className: lineChartClassNames.lineChartLabelFlex, children: 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", () => {
+            let d = "M" + x + "," + y1;
+            d += " " + x + "," + (tooltipLineTop ? y2 : 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(jsxRuntime.jsx(LabelContainer, { className: lineChartClassNames.lineChartLabelFlex, children: jsxRuntime.jsx(Label, { className: lineChartClassNames.lineChartLabel }) }));
+            return html;
+        });
+        mouseMove(event);
+    });
+    mouseRect.on("mouseout.tooltip", () => {
+        d3__namespace.select(`.${lineChartClassNames.lineChartMouseLabelContainer}`)
+            .selectAll("*")
+            .remove();
+        setVisible();
+    });
+    mouseRect.on("touchmove.tooltip mousemove.tooltip", mouseMove);
+};
+
+const draw$2 = (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__namespace.min(data, ({ values }) => d3__namespace.min(values));
+        const max = typeof props.max === 'number'
+            ? props.max
+            : d3__namespace.max(data, ({ values }) => d3__namespace.max(values));
+        const svg = appendSvg(node, width, height || 0);
+        const yRange = [
+            height - marginTop - marginBottom - (xAxisPadding || 0),
+            marginTop,
+        ];
+        const yScale = d3__namespace
+            .scaleLinear()
+            .domain([min || 0, max || 0])
+            .range(yRange)
+            .nice();
+        customYScale && customYScale(yScale);
+        const yTicksCountDefault = 8;
+        const yAxisLeft = d3__namespace.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__namespace.min(rightAxis);
+            const rightAxisMax = d3__namespace.max(rightAxis);
+            const yRightScale = d3__namespace
+                .scaleLinear()
+                .domain([rightAxisMin || 0, rightAxisMax || 0])
+                .range(yRange)
+                .nice();
+            const yAxisRightTicks = d3__namespace.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, { values }) => Math.max(acc, values.length), 0) - 1;
+        const xScale = d3__namespace
+            .scaleLinear()
+            .domain([0, lastIndex])
+            .range([
+            marginLeft + yAxisWidth + (yAxisPadding || 0),
+            width - yAxisRightWidth - marginRight,
+        ]);
+        const xAxisBottom = d3__namespace
+            .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$2({
+            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__namespace
+            .line()
+            .defined(d => d !== null)
+            .x((_, index) => xScale(index))
+            .y((d) => yScale(d))
+            .curve(curve || d3__namespace.curveLinear);
+        customLine && customLine(line);
+        const withAreas = data.some(({ fill }) => fill);
+        if (withAreas) {
+            let dataIndex = -2;
+            const getArea = (d) => {
+                const { minAreaValues } = d;
+                const minTick = yScale.ticks()[0];
+                return d3__namespace
+                    .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__namespace.curveLinear);
+            };
+            svg
+                .append('g')
+                .attr('class', lineChartClassNames.lineChartAreasGlobal)
+                .selectAll('path')
+                .data(data.filter(({ fill }) => Boolean(fill)))
+                .join('path')
+                .attr('class', lineChartClassNames.lineChartArea)
+                .attr('d', (d) => {
+                const area = getArea(d);
+                return area(d.values);
+            })
+                .attr('fill', ({ fill }) => fill || 'none')
+                .attr('style', ({ areaStyle }) => 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', ({ stroke }) => stroke || 'steelblue')
+            .attr('style', ({ style }) => style || '');
+        const dots = data.filter(({ dot }) => 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__namespace.select(node)
+            .select(`.${labelClassName}`)
+            .remove();
+        withLabels &&
+            drawLabel({ node, eachLabel, data, yScale, xScale, formatLabel });
+        if (dynamicTooltipEnable) {
+            drawTooltip$2({
+                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$2(node, props);
+    }, [node, props]);
+    const onDraw = () => draw$2(node, props);
+    useResize(props.width, onDraw);
+    return (jsxRuntime.jsxs("div", { className: className, style: style, children: [jsxRuntime.jsx(TooltipStyles$2, {}), jsxRuntime.jsx(SvgWrapper$2, { ref: ref, children: 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 = ({ svg, lineData, min, yScale, xScale, curve, stackedLine, }) => {
+    let linesSelection = null;
+    let areasSelection = null;
+    let area = null;
+    const line = d3__namespace
+        .line()
+        .defined(d => d !== null)
+        .x((_, index) => xScale(index) + bandwidth / 2)
+        // @ts-ignore
+        .y((d) => yScale(d))
+        .curve(curve || d3__namespace.curveLinear);
+    const bandwidth = xScale.bandwidth();
+    const linesData = lineData.filter(({ lineType }) => lineType === 'line');
+    const areasData = lineData.filter(({ lineType }) => 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', ({ stroke }) => stroke || '')
+            .attr('fill', ({ fill }) => fill || 'none');
+    }
+    if (areasData.length > 0) {
+        let dataIndex = -2;
+        area = d3__namespace
+            .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__namespace.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', ({ fill }) => fill || 'none');
+    }
+    return {
+        areasSelection,
+        linesSelection,
+        area,
+    };
+};
+
+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 = {
+    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$1 = styled(Wrapper) `
+  display: ${({ selectable }) => selectable && "inline-block"};
+  user-select: ${({ selectable }) => selectable && "none"};
+  width: ${({ selectable }) => selectable && "auto"};
+
+  line {
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+  }
+
+  .${barChartClassNames.barChartGridLineX},
+  .${barChartClassNames.barChartGridLineY} {
+    stroke: rgba(48, 69, 79, 0.06);
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
+
+  .${barChartClassNames.barChartLinesGlobal} {
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${barChartClassNames.barChartLine} {
+    shape-rendering: auto;
+  }
+
+  .${barChartClassNames.barChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${barChartClassNames.barChartSelection} {
+    position: absolute;
+    top: 0;
+    width: 0;
+    background: rgba(0, 170, 255, 0.06);
+    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
+    pointer-events: none;
+  }
+`;
+const TooltipStyles$1 = styled.createGlobalStyle `
+  .${barChartClassNames.barChartMouseTooltip} {
+    z-index: 100;
+    transition: all linear 144ms;
+
+    .${barChartClassNames.barChartTooltipItem} {
+      margin-bottom: 4px;
+      :last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+`;
+
+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) {
+            clearSelection();
+            selection.current = document.createElement("div");
+            selection.current.setAttribute("class", barChartClassNames.barChartSelection);
+            selection.current.setAttribute("style", `height: calc(100% - ${props.margin?.bottom ?? 0}px)`);
+            node.appendChild(selection.current);
+            drawing.current = true;
+            startX.current = isTouch
+                ? (e.touches[0]?.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) {
+            const nodeWidth = node.firstChild.getBoundingClientRect().width;
+            const offsetX = isTouch
+                ? (e.touches[0]?.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?.removeEventListener("mousedown", onStartDrawing);
+            node?.removeEventListener("touchstart", onStartDrawing);
+            node?.removeEventListener("mousemove", onDraw);
+            node?.removeEventListener("touchmove", onDraw);
+            node?.removeEventListener("mouseleave", onMouseLeave);
+            node?.removeEventListener("mouseup", onStopDrawing);
+            node?.removeEventListener("touchend", onStopDrawing);
+            document.removeEventListener("mouseup", onStopDrawing);
+        };
+    }, [node]);
+};
+
+const drawGrid$1 = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) => {
+    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 getDomain = ({ data, minDomainValue, maxDomainValue, }) => {
+    let MIN = Number.POSITIVE_INFINITY;
+    let MAX = Number.NEGATIVE_INFINITY;
+    data.forEach(({ groupName, ...groups }) => {
+        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 marshaling = ({ data, yScale, xScale, barWidth, barPadding, colors, marginTop, }) => data.map(({ groupName, ...groups }, groupIndex) => {
+    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 drawTooltip$1 = ({ 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, }) => {
+    d3__namespace.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__namespace.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__namespace.min(lineData, ({ values }) => typeof values[index] === "number"
+                ? yScale((values[index] || 0) - y2)
+                : Number.POSITIVE_INFINITY) || Number.POSITIVE_INFINITY;
+            acc.push(curr.reduce((acc, { y }) => 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__namespace.select(`.${barChartClassNames.barChartMouseTooltip}`);
+        if (tooltip.size() === 0) {
+            tooltip = d3__namespace
+                .select(tooltipContainer)
+                .append("div")
+                .attr("class", barChartClassNames.barChartMouseTooltip)
+                .style("opacity", "0")
+                .style("position", "absolute")
+                .html(() => {
+                const html = ReactDOMServer.renderToString(jsxRuntime.jsx(TooltipFlex$1, { 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__namespace.pointer(event, document);
+            const [rectrX] = d3__namespace.pointer(event, mouseRect);
+            const [nodeX, nodeY] = d3__namespace.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__namespace
+                    .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(({ values, ...rest }) => ({
+                    ...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(jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderTooltip(currData, setTooltipPosition
+                            ? {
+                                left,
+                                top,
+                                tooltip,
+                                svgWidth,
+                            }
+                            : undefined, barWidth) }));
+                    return html;
+                });
+            }
+            else {
+                if (!isVisible) {
+                    setVisible(true);
+                }
+                barChartTootipFlex.html(() => {
+                    const html = ReactDOMServer.renderToString(jsxRuntime.jsxs(TooltipContainer, { className: barChartClassNames.barChartTooltip, children: [currData && currData[0] && !hideTooltipGroupName && (jsxRuntime.jsx(TooltipGroupName, { className: barChartClassNames.barChartTooltipGroupName, children: currData[0].groupName })), currData &&
+                                currData.map(({ name, value, stroke, fill, color, lineType }) => (jsxRuntime.jsxs(TooltipItem, { className: barChartClassNames.barChartTooltipItem, children: [jsxRuntime.jsxs(ColFlex, { className: barChartClassNames.barChartTooltipColFlex, children: [lineType ? (jsxRuntime.jsx(ColorLine, { className: barChartClassNames.barChartColorLine, style: { backgroundColor: stroke || fill } })) : (jsxRuntime.jsx(ColorBox, { className: barChartClassNames.barChartColorBox, style: { backgroundColor: color } })), jsxRuntime.jsx(Name, { className: barChartClassNames.barChartTooltipName, children: formatTooltipName ? formatTooltipName(name) : name })] }), jsxRuntime.jsx(Value, { className: barChartClassNames.barChartTooltipValue, children: formatTooltipValue
+                                                ? formatTooltipValue(value, name)
+                                                : format(value) })] }, name)))] }));
+                    return html;
+                });
+            }
+            flagCurrIndex = currIndex;
+            if (!isVisible) {
+                setVisible(true);
+            }
+        });
+    }
+    const container = d3__namespace
+        .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__namespace.pointer(e, mouseRect);
+        const [nodeX, nodeY] = d3__namespace.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(({ values, name, stroke }) => {
+                const { stacksCount } = stack.reduce((acc, { stackIndex }) => {
+                    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(jsxRuntime.jsx(LabelFlexStyled, { className: barChartClassNames.barChartLabelFlex, children: renderLabel ? (renderLabel({ ...item, barWidth })) : (jsxRuntime.jsx(LabelStyle, { className: barChartClassNames.barChartLabel, children: format(item.value) })) })));
+    }
+};
+
+const resizeBarWidth = ({ data, range, barWidth, barPadding, sectionPadding, }) => {
+    const groupPadding = typeof sectionPadding === 'number' ? sectionPadding : 0;
+    const chartWidth = range[1] - range[0];
+    const barsWidth = data.reduce((acc, { groupName, ...curr }) => {
+        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$1 = 2;
+const getBars = ({ groups, barWidth }) => {
+    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$1))
+        .style('fill', (item) => item.color);
+};
+
+const MIN_BAR_HEIGHT = 2;
+const draw$1 = (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__namespace.min(lineData, ({ values }) => d3__namespace.min(values)) ||
+                Number.POSITIVE_INFINITY, barDomain.min || 0);
+        const max = typeof maxValue === 'number'
+            ? maxValue
+            : Math.max(d3__namespace.max(lineData, ({ values }) => d3__namespace.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__namespace
+            .scaleLinear()
+            .domain([min, max])
+            .range([
+            height - marginTop - marginBottom - (xAxisPadding || 0),
+            marginTop,
+        ])
+            .nice();
+        customYScale && customYScale(yScale);
+        const yTicks = yScale.ticks();
+        const yAxisLeft = d3__namespace.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__namespace
+            .scaleBand()
+            .domain(d3__namespace.range(data.length))
+            .range(range);
+        barWidth = resizeBarWidth({
+            data,
+            sectionPadding,
+            range,
+            barWidth,
+            barPadding,
+        });
+        customXScale && customXScale(xScale);
+        const [x1, x2] = xScale.range();
+        const xAxisBottom = d3__namespace
+            .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)
+            .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?.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?.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$1({
+                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$1(node, props);
+    }, [node, props]);
+    const onDraw = () => draw$1(node, props);
+    useResize(props.width, onDraw);
+    useSelection(selectable ? node : null, props);
+    return (jsxRuntime.jsxs("div", { className: className, style: style, children: [jsxRuntime.jsx(TooltipStyles$1, {}), jsxRuntime.jsx(SvgWrapper$1, { ref: ref, selectable: selectable, children: 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 hundred$1 = 100;
+const useMarshaling = ({ data, fullExtent, maxValue, labels, }) => {
+    return react.useMemo(() => {
+        const fullMax = d3__namespace.max(data, item => d3__namespace.sum(item, ({ value }) => value));
+        const scaleLinear = d3__namespace
+            .scaleLinear()
+            .domain([
+            0,
+            typeof maxValue === 'number' ? maxValue : fullMax,
+        ])
+            .range([0, hundred$1]);
+        return {
+            fullMax,
+            data: data.map((item, index) => {
+                if (!fullExtent) {
+                    scaleLinear.domain([
+                        0,
+                        typeof maxValue === 'number'
+                            ? maxValue
+                            : d3__namespace.sum(item, ({ value }) => value),
+                    ]);
+                }
+                return item.map(({ value, ...rest }) => ({
+                    ...rest,
+                    value,
+                    width: scaleLinear(value),
+                    groupName: labels ? labels[index] : '',
+                }));
+            }),
+        };
+    }, [data, fullExtent, maxValue, labels]);
+};
+
+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 = styled.table `
+  width: 100%;
+`;
+const LabelCell = styled.div `
+  text-align: right;
+`;
+const BarFlex = styled.div `
+  width: 100%;
+  display: flex;
+  height: 1rem;
+`;
+const BarsTd = styled.td `
+  width: 100%;
+  position: relative;
+  vertical-align: middle;
+`;
+const TooltipFlex = styled(TooltipFlex$1) `
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  will-change: left, top;
+`;
+const StackSumContainer = styled.div `
+  position: relative;
+`;
+const StackSum = styled.div `
+  white-space: nowrap;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(0, -50%);
+`;
+const StackWrapper = styled.div `
+  position: absolute;
+  top: 0;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+`;
+
+const Tooltip$1 = ({ renderTooltip, bars, style, className, }) => {
+    const format = d3__namespace.format(",");
+    return (jsxRuntime.jsx(TooltipFlex, { className: `${horizontalBarChartClassNames.horizontalBarChartTooltipFlex} ${className ||
+            ""}`, style: style, children: jsxRuntime.jsx(TooltipContainer, { className: horizontalBarChartClassNames.horizontalBarChartTooltipContainer, children: renderTooltip
+                ? renderTooltip(bars)
+                : bars.map(({ color, name, value, groupName }, index) => (jsxRuntime.jsxs(TooltipItem, { className: horizontalBarChartClassNames.horizontalBarChartTooltipItem, children: [color && jsxRuntime.jsx(ColorBox, { style: { backgroundColor: color } }), name && (jsxRuntime.jsx(Name, { className: horizontalBarChartClassNames.horizontalBarChartTooltipName, children: name })), jsxRuntime.jsx(Value, { className: horizontalBarChartClassNames.horizontalBarChartTooltipValue, children: format(value) })] }, `${name || ""}-${index}-${groupName}`))) }) }));
+};
+
+const rootElement = document.createElement('div');
+const useTooltip = ({ renderTooltip, tooltipBind, tooltipStyle, tooltipRoot, tooltipClassName, hideTooltip, }) => {
+    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__namespace.pointer(event, document);
+        if (!tooltipBind && 'getBoundingClientRect' in event.target) {
+            const { width, height, } = event.target.getBoundingClientRect();
+            const [barX, barY] = d3__namespace.pointer(event, event.target);
+            x = x - barX + width / 2;
+            y = y - barY + height / 2;
+        }
+        if (rootElement) {
+            rootElement.style.visibility = 'visible';
+        }
+        reactDom.render(jsxRuntime.jsx(Tooltip$1, { style: {
+                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 useStackWrapper = (stackedTooltip) => {
+    return react.useMemo(() => stackedTooltip
+        ? ({ item, mouseMove, mouseLeave, tooltipBind, ...props }) => (jsxRuntime.jsx(StackWrapper, { className: horizontalBarChartClassNames.horizontalBarChartStackWrapper, onMouseOver: event => mouseMove(event, item), onMouseMove: tooltipBind ? event => mouseMove(event, item) : void 0, onMouseOut: mouseLeave, ...props }))
+        : ({ children }) => (jsxRuntime.jsx(react.Fragment, { children: children })), [stackedTooltip]);
+};
+
+const BarStyled = styled.div `
+  position: relative;
+  display: inline-flex;
+  height: 100%;
+`;
+
+const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mouseLeave, pointerEventsNone, isFirstChild, isLastChild, isOnlyChild, }) => {
+    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 (jsxRuntime.jsx(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 TickTd = styled.td `
+  position: relative;
+`;
+const Ticks = styled.div `
+  position: relative;
+  height: 1rem;
+`;
+const Tick = styled.div `
+  white-space: nowrap;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const hundred = 100;
+const useScale = ({ maxValue, scaleTicks, scaleDomain, }) => {
+    return react.useMemo(() => {
+        const scaleLinear = d3__namespace
+            .scaleLinear()
+            .domain([0, maxValue])
+            .range([0, hundred]);
+        const ticks = scaleLinear.ticks(scaleTicks);
+        return (scaleDomain || ticks).map((value) => ({
+            value,
+            x: scaleLinear(value),
+        }));
+    }, [maxValue, scaleTicks, scaleDomain]);
+};
+
+const XScale = ({ maxValue, scaleTicks, renderTicks, scaleDomain, }) => {
+    const range = useScale({ maxValue, scaleTicks, scaleDomain });
+    const format = d3__namespace.format(",");
+    return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", {}), jsxRuntime.jsx(TickTd, { className: horizontalBarChartClassNames.horizontalBarChartXScaleTd, children: jsxRuntime.jsx(Ticks, { className: horizontalBarChartClassNames.horizontalBarChartXScaleTicks, children: range.map((tick, index, ticks) => {
+                        const { value, x } = tick;
+                        return (jsxRuntime.jsx(Tick, { className: horizontalBarChartClassNames.horizontalBarChartXScaleTick, style: {
+                                left: `${x}%`,
+                                justifyContent: index === 0
+                                    ? "flex-start"
+                                    : index === ticks.length - 1
+                                        ? "flex-end"
+                                        : "",
+                            }, children: renderTicks ? renderTicks(tick) : format(value) }, value));
+                    }) }) })] }));
+};
+
+const HorizontalBarChart = ({ data, className, style, children, labels, fullExtent, maxValue, formatNativeTitle, renderTooltip, withTooltip, withStackSum, tooltipBind, scaleTicks, renderTicks, renderButton, tooltipStyle, tooltipClassName, scaleDomain, renderDataTable, thead, withoutXScale, stackedTooltip, fullChartTooltip, hideTooltip, }) => {
+    const { fullMax, data: marshalingData } = useMarshaling({
+        data,
+        fullExtent,
+        maxValue,
+        labels,
+    });
+    const [mouseMove, mouseLeave] = useTooltip({
+        renderTooltip,
+        tooltipBind,
+        tooltipStyle,
+        tooltipClassName,
+        hideTooltip,
+    });
+    const Stack = useStackWrapper(stackedTooltip);
+    return (jsxRuntime.jsxs(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, children: [thead, jsxRuntime.jsxs("tbody", { children: [marshalingData.map((item, rowIndex) => {
+                        const stackSum = (withStackSum || renderDataTable) &&
+                            d3__namespace.sum(item, ({ value }) => value);
+                        const sumWidth = d3__namespace.sum(item, ({ width }) => width);
+                        return (jsxRuntime.jsxs("tr", { children: [typeof renderButton === "function" && (jsxRuntime.jsx("td", { className: horizontalBarChartClassNames.horizontalBarChartButtonTd, children: renderButton(item, rowIndex) })), jsxRuntime.jsx("td", { className: horizontalBarChartClassNames.horizontalBarChartLabelTd, children: labels && labels[rowIndex] && (jsxRuntime.jsx(LabelCell, { className: horizontalBarChartClassNames.horizontalBarChartLabelCell, children: labels[rowIndex] })) }), jsxRuntime.jsx(BarsTd, { className: horizontalBarChartClassNames.horizontalBarChartBarTd, style: { pointerEvents: fullChartTooltip ? "none" : "auto" }, children: jsxRuntime.jsxs(BarFlex, { className: horizontalBarChartClassNames.horizontalBarChartBarFlex, style: { pointerEvents: fullChartTooltip ? "none" : "auto" }, children: [jsxRuntime.jsx(Stack, { style: stackedTooltip ? { width: `${sumWidth}%` } : void 0, item: item, tooltipBind: tooltipBind, mouseMove: mouseMove, mouseLeave: mouseLeave }), item.map((bar, barIndex, array) => bar.value !== 0 && (jsxRuntime.jsx(Bar, { 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 }, `bar-${bar.name || ""}-${barIndex}`))), withStackSum && (jsxRuntime.jsx(StackSumContainer, { className: horizontalBarChartClassNames.horizontalBarChartStackSumContainer, children: jsxRuntime.jsx(StackSum, { className: horizontalBarChartClassNames.horizontalBarChartStackSum, children: stackSum }) }))] }) }), renderDataTable &&
+                                    renderDataTable(item, stackSum, rowIndex)] }, `row-${rowIndex}`));
+                    }), !withoutXScale && (jsxRuntime.jsx(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,
+};
+
+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 = styled(Wrapper) `
+  .${bubbleChartClassNames.bubbleChartYAxis},
+  .${bubbleChartClassNames.bubbleChartXAxis},
+  .${bubbleChartClassNames.bubbleChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${bubbleChartClassNames.bubbleChartGridLineX},
+  .${bubbleChartClassNames.bubbleChartGridLineY} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${bubbleChartClassNames.bubbleChartYScaleLabel} {
+    font-size: 10px;
+  }
+`;
+const TooltipStyles = styled.createGlobalStyle `
+  .${bubbleChartClassNames.bubbleChartTooltipContainer} {
+    position: absolute;
+    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
+    pointer-events: none;
+    z-index: 1;
+  }
+`;
+
+const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) => {
+    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])));
+    }
+};
+
+const Tooltip = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
+`;
+
+const drawTooltip = ({ bubbles, tooltipRoot, tooltipClassName, renderTooltip, }) => {
+    const root = tooltipRoot || document.querySelector("body");
+    const format = d3__namespace.format(",");
+    let container = d3__namespace
+        .select(root)
+        .select(`.${bubbleChartClassNames.bubbleChartTooltip}`);
+    if (container.node() === null) {
+        container = d3__namespace
+            .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(jsxRuntime.jsx(Tooltip, { className: bubbleChartClassNames.bubbleChartTooltipFlex, children: jsxRuntime.jsx(TooltipContainer, { className: bubbleChartClassNames.bubbleChartTip, children: format(sizeValue) }) }));
+            return html;
+        });
+        renderTooltip && renderTooltip({ tooltip, data, circle });
+        tooltip.style("opacity", "1");
+    });
+    bubbles.on("mouseout.tooltip", () => {
+        tooltip.style("opacity", "0");
+    });
+};
+
+const draw = (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__namespace.min(data, ({ yValue }) => yValue);
+        const maxY = typeof maxYValue === 'number'
+            ? maxYValue
+            : d3__namespace.max(data, ({ yValue }) => yValue);
+        const svg = appendSvg(node, width, height || 0);
+        const sizeScale = scaleLog
+            ? d3__namespace
+                .scaleLog()
+                .domain([
+                d3__namespace.min(data, ({ sizeValue }) => sizeValue) || 0.1,
+                d3__namespace.max(data, ({ sizeValue }) => sizeValue) || 0.1,
+            ])
+                .range([
+                minSize || bubbleChartDefaultProps.minSize || 0.1,
+                maxSize || bubbleChartDefaultProps.maxSize || 0.1,
+            ])
+            : d3__namespace
+                .scaleLinear()
+                .domain([
+                d3__namespace.min(data, ({ sizeValue }) => sizeValue),
+                d3__namespace.max(data, ({ sizeValue }) => sizeValue),
+            ])
+                .range([
+                minSize || bubbleChartDefaultProps.minSize,
+                maxSize || bubbleChartDefaultProps.maxSize,
+            ]);
+        const yRange1 = height - marginTop - marginBottom - (xAxisPadding || 0);
+        const yScale = scaleLog
+            ? d3__namespace
+                .scaleLog()
+                .domain([minY || 0.1, maxY || 0.1])
+                .range([yRange1 || 0.1, marginTop || 0.1])
+                .nice()
+            : d3__namespace
+                .scaleLinear()
+                .domain([minY, maxY])
+                .range([yRange1, marginTop])
+                .nice();
+        customYScale && customYScale(yScale);
+        const yTicks = yScale.ticks();
+        const yAxisLeft = d3__namespace.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__namespace
+                .scaleLog()
+                .domain([
+                d3__namespace.min(data, ({ xValue }) => xValue) || 0.1,
+                d3__namespace.max(data, ({ xValue }) => xValue) || 0.1,
+            ])
+                .range([
+                (marginLeft + yAxisWidth + (yAxisPadding || 0) + yScaleLabelHeight) || 0.1,
+                (width - marginRight) || 0.1,
+            ])
+            : d3__namespace
+                .scaleLinear()
+                .domain([
+                d3__namespace.min(data, ({ xValue }) => xValue),
+                d3__namespace.max(data, ({ xValue }) => xValue),
+            ])
+                .range([
+                marginLeft + yAxisWidth + (yAxisPadding || 0) + yScaleLabelHeight,
+                width - marginRight,
+            ]);
+        customXScale && customXScale(xScale);
+        const xAxisBottom = d3__namespace.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({
+            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', ({ xValue }) => xScale(xValue))
+            .attr('cy', ({ yValue }) => yScale(yValue))
+            .attr('r', ({ sizeValue }) => sizeScale(sizeValue) / 2)
+            .attr('fill', ({ color }) => color || 'rgba(0, 176, 113, 0.6)')
+            .attr('stroke', ({ stroke }) => stroke || 'transparent')
+            .attr('style', ({ style }) => style || bubbleStyle || '');
+        if (enableTooltip) {
+            drawTooltip({ bubbles, tooltipRoot, tooltipClassName, renderTooltip });
+        }
+        customize && customize({ svg, bubbles, yScale, xScale, sizeScale });
+    }
+};
+
+const unmount = (tooltipRoot) => {
+    const root = tooltipRoot || document.querySelector('body');
+    d3__namespace.select(root)
+        .select(`.${bubbleChartClassNames.bubbleChartTooltip}`)
+        .remove();
+};
+
+const BubbleChart = (props) => {
+    const { className, style, children, tooltipRoot } = props;
+    const [ref, node] = useNode();
+    react.useEffect(() => {
+        node && draw(node, props);
+    }, [node, props]);
+    react.useEffect(() => {
+        return () => unmount(tooltipRoot);
+    }, [tooltipRoot]);
+    const onDraw = () => draw(node, props);
+    useResize(props.width, onDraw);
+    return (jsxRuntime.jsxs("div", { className: className, style: style, children: [jsxRuntime.jsx(TooltipStyles, {}), jsxRuntime.jsx(SvgWrapper, { ref: ref, children: 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=index.js.map