@alfalab/core-components 20.3.2 → 20.4.0

package/chart/hooks/useSettings/index.js

@@ -0,0 +1,47 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-62c2b032.js');
+var React = require('react');
+var hooks_useSettings_utils_setComposedChartsMargin = require('./utils/setComposedChartsMargin.js');
+var hooks_useSettings_utils_setDatas = require('./utils/setDatas.js');
+var hooks_useSettings_utils_setGradientCharts = require('./utils/setGradientCharts.js');
+var hooks_useSettings_utils_setLegendMargin = require('./utils/setLegendMargin.js');
+var hooks_useSettings_utils_sortByIndex = require('./utils/sortByIndex.js');
+
+var useSettings = function (options) {
+    var _a = React.useState(null), state = _a[0], setState = _a[1];
+    var _b = React.useState({}), charts = _b[0], setCharts = _b[1];
+    var _c = React.useState([]), data = _c[0], setData = _c[1];
+    var _d = React.useState(0), filterCount = _d[0], setFilterCount = _d[1];
+    React.useEffect(function () {
+        var _a;
+        var settings = JSON.parse(JSON.stringify(options));
+        var brush = settings.brush, legend = settings.legend, series = settings.series, labels = settings.labels, composeChart = settings.composeChart, xAxis = settings.xAxis;
+        if (((_a = settings.legend) === null || _a === void 0 ? void 0 : _a.margin) && brush && legend)
+            settings.legend.margin.top = hooks_useSettings_utils_setLegendMargin.setLegendMargin(brush, legend);
+        settings.series = hooks_useSettings_utils_setGradientCharts.setGradientCharts(series);
+        var _b = hooks_useSettings_utils_setDatas.setDatas(settings.series, labels), initData = _b[0], chartsNames = _b[1], count = _b[2];
+        settings.composeChart.margin = hooks_useSettings_utils_setComposedChartsMargin.setComposedChartsMargin(composeChart, legend, brush, xAxis);
+        settings.series = hooks_useSettings_utils_sortByIndex.sortByIndex(settings.series);
+        setState(settings);
+        setData(initData);
+        setCharts(chartsNames);
+        setFilterCount(count);
+    }, [options]);
+    return [
+        {
+            state: state,
+            data: data,
+            charts: charts,
+            filterCount: filterCount,
+        },
+        {
+            setState: setState,
+            setData: setData,
+            setCharts: setCharts,
+            setFilterCount: setFilterCount,
+        },
+    ];
+};
+
+exports.useSettings = useSettings;

package/chart/hooks/useSettings/utils/setComposedChartsMargin.d.ts

@@ -0,0 +1,12 @@
+import { XAxisProps } from "../../../types/xAxis.types";
+import { BrushProps } from "../../../types/brush.types";
+import { LegendProps } from "../../../types/legend.types";
+import { ComposedChartProps } from "../../../types/composedChart.types";
+type ComposedChartsMarginResultProps = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+declare const setComposedChartsMargin: (composeChart: ComposedChartProps, legend: LegendProps | undefined, brush: BrushProps | undefined, xAxis: XAxisProps) => ComposedChartsMarginResultProps;
+export { setComposedChartsMargin };

package/chart/hooks/useSettings/utils/setComposedChartsMargin.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var setComposedChartsMargin = function (composeChart, legend, brush, xAxis) {
+    var _a, _b, _c, _d;
+    return {
+        top: (((_a = composeChart === null || composeChart === void 0 ? void 0 : composeChart.initMargin) === null || _a === void 0 ? void 0 : _a.top) || 0) +
+            ((legend === null || legend === void 0 ? void 0 : legend.verticalAlign) === 'top' && (legend === null || legend === void 0 ? void 0 : legend.marginTop) ? Math.abs(legend.marginTop) : 0),
+        bottom: (((_b = composeChart === null || composeChart === void 0 ? void 0 : composeChart.initMargin) === null || _b === void 0 ? void 0 : _b.bottom) || 0) +
+            ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickMargin) || 0) +
+            ((brush === null || brush === void 0 ? void 0 : brush.brushMargin) || 0) +
+            ((legend === null || legend === void 0 ? void 0 : legend.verticalAlign) !== 'top' && (legend === null || legend === void 0 ? void 0 : legend.marginTop) ? legend.marginTop : 0),
+        left: ((_c = composeChart === null || composeChart === void 0 ? void 0 : composeChart.initMargin) === null || _c === void 0 ? void 0 : _c.left) || 0,
+        right: ((_d = composeChart === null || composeChart === void 0 ? void 0 : composeChart.initMargin) === null || _d === void 0 ? void 0 : _d.right) || 0,
+    };
+};
+
+exports.setComposedChartsMargin = setComposedChartsMargin;

package/chart/hooks/useSettings/utils/setDatas.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DataDynamicBooleanProps, DataDynamicProps } from "../../../types/utils/data.types";
+import { SeriaProps } from "../../../types/seria.types";
+type DatasResultProps = [DataDynamicProps[], DataDynamicBooleanProps, number];
+declare const setDatas: (series: SeriaProps[], labels: import("react").Key[]) => DatasResultProps;
+export { setDatas };

package/chart/hooks/useSettings/utils/setDatas.js

@@ -0,0 +1,39 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../tslib.es6-62c2b032.js');
+
+var setDatas = function (series, labels) {
+    var initData = [];
+    var chartsNames = {};
+    var count = 0;
+    var _loop_1 = function (i) {
+        var _a = series[i], _b = _a.properties, _c = (_b === void 0 ? {} : _b).dataKey, dataKey = _c === void 0 ? '' : _c, _d = _a.data, seriaData = _d === void 0 ? [] : _d, hideLegend = _a.hideLegend, hide = _a.hide;
+        if (!hideLegend && !hide)
+            count += 1;
+        labels.map(function (label) {
+            var item = seriaData.find(function (d) { return d.label === label; });
+            if (item) {
+                var obj = {
+                    label: label,
+                };
+                obj["" + dataKey] = item.value;
+                if (!chartsNames["" + dataKey])
+                    chartsNames["" + dataKey] = true;
+                var index = initData
+                    .map(function (dataItem) { return dataItem.label; })
+                    .indexOf(label);
+                if (index === -1)
+                    initData.push(obj);
+                else
+                    initData[index] = tslib_es6.__assign(tslib_es6.__assign({}, initData[index]), obj);
+            }
+            return null;
+        });
+    };
+    for (var i = 0; i < series.length; i++) {
+        _loop_1(i);
+    }
+    return [initData, chartsNames, count];
+};
+
+exports.setDatas = setDatas;

package/chart/hooks/useSettings/utils/setGradientCharts.d.ts

@@ -0,0 +1,3 @@
+import { SeriaProps } from "../../../types/seria.types";
+declare const setGradientCharts: (series: SeriaProps[]) => SeriaProps[];
+export { setGradientCharts };

package/chart/hooks/useSettings/utils/setGradientCharts.js

@@ -0,0 +1,27 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../tslib.es6-62c2b032.js');
+
+var setGradientCharts = function (series) {
+    var filterSeries = series.filter(function (item) { return item.chart !== 'gradient'; });
+    return filterSeries.reduce(function (accum, item) {
+        var chart = item.chart, dataSeria = item.data, offset = item.offset, fill = item.fill;
+        if (chart === 'area') {
+            var newData = null;
+            if (offset) {
+                newData = dataSeria.map(function (d) {
+                    var label = d.label, value = d.value;
+                    return {
+                        label: label,
+                        value: Math.ceil(value - value * offset),
+                    };
+                });
+            }
+            accum.push(tslib_es6.__assign(tslib_es6.__assign({}, item), { zIndex: -100, chart: 'gradient', hideLegend: true, hideTooltip: true, properties: tslib_es6.__assign(tslib_es6.__assign({}, item.properties), { dataKey: item.properties.dataKey + "-gradient", fill: fill }), data: newData || item.data }));
+        }
+        accum.push(item);
+        return accum;
+    }, []);
+};
+
+exports.setGradientCharts = setGradientCharts;

package/chart/hooks/useSettings/utils/setLegendMargin.d.ts

@@ -0,0 +1,4 @@
+import { LegendProps } from "../../../types/legend.types";
+import { BrushProps } from "../../../types/brush.types";
+declare const setLegendMargin: (brush: BrushProps, legend: LegendProps) => number;
+export { setLegendMargin };

package/chart/hooks/useSettings/utils/setLegendMargin.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var setLegendMargin = function (brush, legend) {
+    var top = 0;
+    if (typeof (brush === null || brush === void 0 ? void 0 : brush.brushMargin) !== 'number' || !(legend === null || legend === void 0 ? void 0 : legend.verticalAlign))
+        return top;
+    if (legend.verticalAlign === 'top') {
+        top = legend.marginTop ? Number(legend.marginTop * -1) : 0;
+    }
+    else {
+        top = (legend === null || legend === void 0 ? void 0 : legend.marginTop) ? legend.marginTop + ((brush === null || brush === void 0 ? void 0 : brush.brushMargin) || 0) : brush === null || brush === void 0 ? void 0 : brush.brushMargin;
+    }
+    return top;
+};
+
+exports.setLegendMargin = setLegendMargin;

package/chart/hooks/useSettings/utils/sortByIndex.d.ts

@@ -0,0 +1,3 @@
+import { SeriaProps } from "../../../types/seria.types";
+declare const sortByIndex: (series: SeriaProps[]) => SeriaProps[];
+export { sortByIndex };

package/chart/hooks/useSettings/utils/sortByIndex.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sortByIndex = function (series) {
+    return series.sort(function (a, b) {
+        if ((a === null || a === void 0 ? void 0 : a.zIndex) && (b === null || b === void 0 ? void 0 : b.zIndex) && (a === null || a === void 0 ? void 0 : a.zIndex) > (b === null || b === void 0 ? void 0 : b.zIndex)) {
+            return 1;
+        }
+        return -1;
+    });
+};
+
+exports.sortByIndex = sortByIndex;

package/chart/icons/Circle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const CircleIcon: ({ fill, height }: Props) => JSX.Element;
+export { CircleIcon };

package/chart/icons/Circle.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CircleIcon = function (_a) {
+    var _b = _a.fill, fill = _b === void 0 ? '#FF5C5C' : _b, _c = _a.height, height = _c === void 0 ? 16 : _c;
+    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 'auto', height: height, viewBox: '0 0 16 16', fill: 'none' },
+        React__default['default'].createElement("circle", { cx: '8', cy: '8', r: '8', fill: fill })));
+};
+
+exports.CircleIcon = CircleIcon;

package/chart/icons/CircleLine.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const CircleLineIcon: ({ fill, height }: Props) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export { CircleLineIcon };

package/chart/icons/CircleLine.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CircleLineIcon = function (_a) {
+    var _b = _a.fill, fill = _b === void 0 ? '#FF5C5C' : _b, _c = _a.height, height = _c === void 0 ? 16 : _c;
+    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 'auto', height: height, viewBox: '0 0 22 12', fill: 'none' },
+        React__default['default'].createElement("circle", { cx: '11', cy: '6', r: '6', fill: fill }),
+        React__default['default'].createElement("rect", { y: '5', width: '22', height: '2', fill: fill })));
+};
+
+exports.CircleLineIcon = CircleLineIcon;

package/chart/icons/FilledCircle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const FilledCircleIcon: ({ fill, height }: Props) => JSX.Element;
+export { FilledCircleIcon };

package/chart/icons/FilledCircle.js

@@ -0,0 +1,19 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FilledCircleIcon = function (_a) {
+    var _b = _a.fill, fill = _b === void 0 ? '#5A8ECF' : _b, _c = _a.height, height = _c === void 0 ? 16 : _c;
+    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 22', fill: 'none' },
+        React__default['default'].createElement("circle", { cx: '11', cy: '11', r: '10', fill: 'url(#paint0_linear)', stroke: fill, strokeWidth: '2' }),
+        React__default['default'].createElement("defs", null,
+            React__default['default'].createElement("linearGradient", { id: 'paint0_linear', x1: '11', y1: '1', x2: '11', y2: '21', gradientUnits: 'userSpaceOnUse' },
+                React__default['default'].createElement("stop", { stopColor: fill, stopOpacity: '0.2' }),
+                React__default['default'].createElement("stop", { offset: '1', stopColor: fill, stopOpacity: '0' })))));
+};
+
+exports.FilledCircleIcon = FilledCircleIcon;

package/chart/icons/Point.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const PointIcon: ({ fill, height }: Props) => JSX.Element;
+export { PointIcon };

package/chart/icons/Point.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var PointIcon = function (_a) {
+    var _b = _a.fill, fill = _b === void 0 ? '#5A8ECF' : _b, _c = _a.height, height = _c === void 0 ? 16 : _c;
+    return (React__default['default'].createElement("svg", { height: height, viewBox: '0 0 18 18' },
+        React__default['default'].createElement("circle", { cx: '9', cy: '9', r: '9', strokeWidth: '1', fill: fill, fillOpacity: '0.4' }),
+        React__default['default'].createElement("circle", { cx: '9', cy: '9', r: '3', strokeWidth: '2', stroke: '#fff', fill: fill })));
+};
+
+exports.PointIcon = PointIcon;

package/chart/icons/StrokeCircle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const StrokeCircleIcon: ({ fill, height }: Props) => JSX.Element;
+export { StrokeCircleIcon };

package/chart/icons/StrokeCircle.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var StrokeCircleIcon = function (_a) {
+    var _b = _a.fill, fill = _b === void 0 ? '#5A8ECF' : _b, _c = _a.height, height = _c === void 0 ? 16 : _c;
+    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 'auto', height: height, viewBox: '0 0 22 22', fill: 'none' },
+        React__default['default'].createElement("circle", { cx: '11', cy: '11', r: '10', stroke: fill, strokeWidth: '2', strokeDasharray: '8 8' })));
+};
+
+exports.StrokeCircleIcon = StrokeCircleIcon;

package/chart/index.css

@@ -0,0 +1,15 @@
+/* hash: y5qhn */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.chart__bar_y5qhn {
+    transition: opacity 0.2s ease-out, d 0.2s ease-out;
+}
+.chart__unfocused_y5qhn {
+    opacity: 0.3;
+}

package/chart/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/chart/index.js

@@ -0,0 +1,22 @@
+require('./tslib.es6-62c2b032.js');
+require('react');
+require('classnames');
+require('recharts');
+require('./Component.js');
+require('./components/LinearGradient.js');
+require('../typography');
+require('./icons/Circle.js');
+require('./icons/CircleLine.js');
+require('./icons/FilledCircle.js');
+require('./icons/StrokeCircle.js');
+require('./components/Legends/index.js');
+require('./icons/Point.js');
+require('./components/Dot/index.js');
+require('./hooks/useSettings/utils/setComposedChartsMargin.js');
+require('./hooks/useSettings/utils/setDatas.js');
+require('./hooks/useSettings/utils/setGradientCharts.js');
+require('./hooks/useSettings/utils/setLegendMargin.js');
+require('./hooks/useSettings/utils/sortByIndex.js');
+require('./hooks/useSettings/index.js');
+require('./components/Tick/index.js');
+require('./components/TooltipContent/index.js');

package/chart/modern/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { OptionsProps } from "./types/options.types";
+declare const _default: React.MemoExoticComponent<(props: OptionsProps) => JSX.Element | null>;
+export { _default as default };

package/chart/modern/Component.js

@@ -0,0 +1,258 @@
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { Legend, CartesianGrid, XAxis, YAxis, Brush, Tooltip, Area, Line, Bar, Cell, ResponsiveContainer, ComposedChart } from 'recharts';
+import { LinearGradient } from './components/LinearGradient.js';
+import '../../typography/modern';
+import './icons/Circle.js';
+import './icons/CircleLine.js';
+import './icons/FilledCircle.js';
+import './icons/StrokeCircle.js';
+import { Legends } from './components/Legends/index.js';
+import './icons/Point.js';
+import { Dot } from './components/Dot/index.js';
+import './hooks/useSettings/utils/setComposedChartsMargin.js';
+import './hooks/useSettings/utils/setDatas.js';
+import './hooks/useSettings/utils/setGradientCharts.js';
+import './hooks/useSettings/utils/setLegendMargin.js';
+import './hooks/useSettings/utils/sortByIndex.js';
+import { useSettings } from './hooks/useSettings/index.js';
+import { Tick } from './components/Tick/index.js';
+import { TooltipContent } from './components/TooltipContent/index.js';
+
+const CustomizedHOC = (Component, options) => {
+    const NewComponent = props => {
+        return React.createElement(Component, Object.assign({}, props, options));
+    };
+    return NewComponent;
+};
+
+var styles = {"coreChart":"chart__coreChart_y5qhn","bar":"chart__bar_y5qhn","unfocused":"chart__unfocused_y5qhn"};
+require('./index.css');
+
+const Chart = (props) => {
+    const [{ state, data, charts, filterCount }, { setCharts, setFilterCount }] = useSettings(props);
+    const [activeDotsState, setActiveDotsState] = useState({
+        prev: null,
+        active: null,
+    });
+    const [yBrush, setYBrush] = useState(null);
+    const [tooltipArrowSide, setTooltipArrowSide] = useState(null);
+    const [heightLegend, setHeightLegend] = useState(0);
+    const svgRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const renderGradient = useMemo(() => {
+        if (!state)
+            return null;
+        return state.series.map((item) => {
+            const { chart, gradient } = item;
+            if (chart !== 'gradient' || !gradient)
+                return null;
+            const { gid, points } = gradient;
+            return (React.createElement(LinearGradient, { key: `${state.id}-${gid}`, id: state.id, gid: gid, points: points }));
+        });
+    }, [state]);
+    const toggleChart = useCallback((item) => {
+        const { chart, properties: { dataKey }, } = item;
+        const withGrad = chart === 'area';
+        let changed = false;
+        if (charts[`${dataKey}`] && filterCount > 1) {
+            changed = true;
+            setFilterCount(prev => prev - 1);
+        }
+        if (!charts[`${dataKey}`]) {
+            changed = true;
+            setFilterCount(prev => prev + 1);
+        }
+        if (!changed)
+            return;
+        setCharts((prev) => {
+            const newState = { ...prev };
+            newState[`${dataKey}`] = !newState[`${dataKey}`];
+            if (withGrad)
+                newState[`${dataKey}-gradient`] = !newState[`${dataKey}-gradient`];
+            return newState;
+        });
+    }, [charts, filterCount, setCharts, setFilterCount]);
+    const legendRef = useCallback((node) => {
+        if (node !== null) {
+            setTimeout(() => {
+                const { height } = node.getBoundingClientRect();
+                setHeightLegend(height);
+            }, 0);
+        }
+    }, []);
+    const renderLegend = useMemo(() => {
+        if (!state?.legend)
+            return null;
+        const translate = state?.xAxis?.tickMargin && state?.legend?.verticalAlign !== 'top'
+            ? state.xAxis.tickMargin + (state?.brush?.brushMargin || 0)
+            : 0;
+        return (React.createElement(Legend, Object.assign({}, (state.legend || null), { content: React.createElement(Legends, { legend: state.legend, series: state.series, id: state.id, toggleChart: toggleChart, ref: legendRef, charts: charts }), wrapperStyle: {
+                transform: `translateY(${translate}px)`,
+            } })));
+    }, [state, charts, toggleChart, legendRef]);
+    const renderCartesianGrid = useMemo(() => {
+        if (!state?.cartesianGrid)
+            return null;
+        return React.createElement(CartesianGrid, Object.assign({}, state.cartesianGrid));
+    }, [state]);
+    const renderXAxis = useMemo(() => {
+        if (!state?.xAxis)
+            return null;
+        let tick;
+        if (state?.xAxis?.tickType === 'point') {
+            tick = CustomizedHOC(Tick, { xAxis: state.xAxis });
+        }
+        else if (typeof state.xAxis.tick === 'boolean') {
+            tick = state.xAxis.tick;
+        }
+        else {
+            tick = true;
+        }
+        return React.createElement(XAxis, Object.assign({}, state.xAxis, { tick: tick }));
+    }, [state]);
+    const renderYAxis = useMemo(() => {
+        if (!state?.yAxis)
+            return null;
+        let tick;
+        if (state?.yAxis?.tick) {
+            tick = CustomizedHOC(state.yAxis.tick, { state });
+        }
+        else if (typeof state.yAxis.tick === 'boolean') {
+            tick = state.yAxis.tick;
+        }
+        else {
+            tick = true;
+        }
+        return React.createElement(YAxis, Object.assign({}, state.yAxis, { tick: tick }));
+    }, [state]);
+    const renderBrush = useMemo(() => {
+        if (!state?.brush)
+            return null;
+        return React.createElement(Brush, Object.assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
+    }, [state, yBrush]);
+    const renderTooltip = useMemo(() => {
+        if (!state?.tooltip)
+            return null;
+        return (React.createElement(Tooltip, Object.assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(TooltipContent, { series: state.series, tooltipArrowSide }) })));
+    }, [state, tooltipArrowSide]);
+    const renderChartsItems = useMemo(() => {
+        if (!state || !charts)
+            return null;
+        return state.series.map((item) => {
+            const { chart, properties } = item;
+            const show = charts[`${properties.dataKey}`];
+            switch (chart) {
+                case 'bar':
+                    return show && !item?.hide ? (React.createElement(Bar, Object.assign({ key: `${state.id}-${properties.dataKey}` }, properties), data.map((_, index) => {
+                        const key = `${state.id}-${properties.dataKey}-${index}`;
+                        return (React.createElement(Cell, { key: key, className: cn(styles.bar, typeof activeDotsState.active === 'number' &&
+                                activeDotsState.active !== index
+                                ? styles.unfocused
+                                : '') }));
+                    }))) : null;
+                case 'area':
+                case 'line':
+                    return show && !item?.hide ? (React.createElement(Line, Object.assign({ key: `${state.id}-${properties.dataKey}` }, properties, { dot: properties.dot && properties.dotSettings
+                            ? CustomizedHOC(Dot, {
+                                activeDot: activeDotsState.active,
+                                dotSettings: properties.dotSettings,
+                                inherit: properties?.inheritStroke
+                                    ? properties.inheritStroke
+                                    : false,
+                            })
+                            : false, activeDot: false }))) : null;
+                case 'gradient':
+                    return show && !item?.hide ? (React.createElement(Area, Object.assign({}, item.properties, { key: `${state.id}-${item.properties.dataKey}`, dataKey: `${item.properties.dataKey}`, stroke: 'transparent', fill: item.gradient.gid
+                            ? `url(#${state.id}-${item.gradient.gid})`
+                            : item.properties.fill, dot: false, activeDot: false }))) : null;
+                default:
+                    return null;
+            }
+        });
+    }, [charts, state, activeDotsState, data]);
+    // Позиционирование brush
+    useEffect(() => {
+        if (!state || !state.brush)
+            return;
+        if (!heightLegend || heightLegend === 0)
+            return;
+        const align = state?.legend?.verticalAlign;
+        const legendHeight = align === 'top' ? 0 : heightLegend;
+        const marginTick = state?.xAxis?.tickMargin ? state?.xAxis?.tickMargin : 0;
+        const brushY = (svgRef.current?.clientHeight ? svgRef.current.clientHeight : 0) -
+            legendHeight -
+            state.brush.height -
+            (state?.composeChart?.margin?.bottom ? state.composeChart.margin.bottom : 0) +
+            marginTick +
+            (state.brush?.brushMargin ? state.brush.brushMargin : 0);
+        setYBrush(brushY);
+    }, [heightLegend, state]);
+    const leaveEvent = (isTooltipActive) => {
+        if (isTooltipActive)
+            return;
+        if (typeof activeDotsState.prev !== 'number' || typeof activeDotsState.active !== 'number')
+            return;
+        setActiveDotsState({
+            prev: null,
+            active: null,
+        });
+    };
+    const arrowTooltipEvent = (activeCoordinate) => {
+        if (!state?.tooltip?.arrow)
+            return;
+        if (state?.tooltip?.arrow && activeCoordinate?.x) {
+            const side = (svgRef?.current?.clientWidth || 0) -
+                (state?.composeChart?.margin?.right || 0) -
+                activeCoordinate.x -
+                (tooltipRef.current?.state?.boxWidth || 0) >
+                20;
+            setTooltipArrowSide(side);
+        }
+    };
+    const hoverEvent = (isTooltipActive, activeTooltipIndex) => {
+        if (!isTooltipActive)
+            return;
+        if (typeof activeDotsState.active === 'number' &&
+            activeTooltipIndex === activeDotsState.active)
+            return;
+        if (typeof activeTooltipIndex === 'number' && typeof activeDotsState.active !== 'number') {
+            setActiveDotsState({
+                prev: activeTooltipIndex,
+                active: activeTooltipIndex,
+            });
+        }
+        if (typeof activeTooltipIndex === 'number' && typeof activeDotsState.prev === 'number') {
+            setActiveDotsState((prev) => {
+                return {
+                    prev: prev.active,
+                    active: activeTooltipIndex,
+                };
+            });
+        }
+    };
+    const mouseMove = (e) => {
+        arrowTooltipEvent(e.activeCoordinate);
+        hoverEvent(e.isTooltipActive, e.activeTooltipIndex);
+        leaveEvent(e.isTooltipActive);
+    };
+    const mouseLeave = (e) => {
+        leaveEvent(e.isTooltipActive);
+    };
+    if (!data || !charts || !state)
+        return null;
+    return (React.createElement("div", { className: styles.coreChart, ref: svgRef, id: state?.id || '', style: { width: '100%', height: '100%' } },
+        React.createElement(ResponsiveContainer, { debounce: state?.responsiveContainer?.debounce ? state.responsiveContainer.debounce : 0, width: '100%' },
+            React.createElement(ComposedChart, Object.assign({}, state?.composeChart, { onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data }),
+                React.createElement("defs", null, renderGradient),
+                state.cartesianGrid && renderCartesianGrid,
+                state.xAxis && renderXAxis,
+                state.yAxis && renderYAxis,
+                renderChartsItems,
+                state.tooltip && renderTooltip,
+                state.brush && renderBrush,
+                state.legend && renderLegend))));
+};
+var Component = React.memo(Chart);
+
+export default Component;