@alfalab/core-components 20.2.0 → 20.4.0

package/calendar-with-skeleton/cssm/Component.js

@@ -0,0 +1,74 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var reactTransitionGroup = require('react-transition-group');
+var coreComponentsSkeleton = require('../../skeleton/cssm');
+var coreComponentsCalendar = require('../../calendar/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var CalendarWithSkeleton = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.calendarVisible, calendarVisible = _c === void 0 ? true : _c, _d = _a.animate, animate = _d === void 0 ? true : _d, restProps = __rest(_a, ["calendarVisible", "animate"]);
+    var skeletonProps = { visible: true, animate: animate };
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, (_b = {},
+            _b[styles__default['default'].calendarVisible] = calendarVisible,
+            _b)) },
+        calendarVisible && React__default['default'].createElement(coreComponentsCalendar.Calendar, __assign({ ref: ref }, restProps)),
+        React__default['default'].createElement(reactTransitionGroup.CSSTransition, { in: !calendarVisible, timeout: 200, unmountOnExit: true, classNames: styles__default['default'] },
+            React__default['default'].createElement("div", { className: styles__default['default'].skeleton, ref: calendarVisible ? undefined : ref },
+                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].header })),
+                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].weekDays })),
+                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row })),
+                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row })),
+                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row })),
+                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row })),
+                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row }))))));
+});
+
+exports.CalendarWithSkeleton = CalendarWithSkeleton;

package/calendar-with-skeleton/cssm/index.d.ts

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

package/calendar-with-skeleton/cssm/index.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('classnames');
+require('react-transition-group');
+require('../../skeleton/cssm');
+require('../../calendar/cssm');
+require('./index.module.css');
+
+
+
+exports.CalendarWithSkeleton = Component.CalendarWithSkeleton;

package/calendar-with-skeleton/cssm/index.module.css

@@ -0,0 +1,60 @@
+:root {
+    --color-light-bg-primary: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+    --gap-l: 20px;
+}
+.component {
+    width: var(--calendar-width);
+    height: var(--calendar-height);
+    position: relative;
+}
+.calendarVisible {
+    height: auto;
+}
+.skeleton {
+    display: flex;
+    flex-direction: column;
+    padding: var(--gap-m);
+    pointer-events: all;
+    box-sizing: border-box;
+    position: absolute;
+    transition: 0.2s ease;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-light-bg-primary);
+    background-clip: content-box;
+}
+.header {
+    height: 48px;
+    margin-bottom: var(--gap-l);
+}
+.weekDays {
+    height: 12px;
+    margin-bottom: var(--gap-m);
+}
+.row {
+    height: 32px
+}
+.row + .row {
+        margin-top: 10px;
+    }
+.enter,
+.enterActive,
+.exit {
+    opacity: 1;
+}
+.exitActive {
+    opacity: 0;
+}

package/card-image/cssm/Component.d.ts

@@ -0,0 +1,50 @@
+import { FC } from 'react';
+declare const ASPECT_RATIO = 0.63;
+declare const DEFAULT_WIDTH = 280;
+declare const DEFAULT_BASE_URL = "https://online.alfabank.ru/cards-images/cards/";
+type CardImageProps = {
+    /**
+     * Идентификатор карты
+     * (например: ER, GQ, SU)
+     */
+    cardId?: string;
+    /**
+     * Какие слои показывать, через запятую без пробелов
+     * (полный набор: BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE)
+     */
+    layers?: string;
+    /**
+     * Ширина изображения
+     */
+    width?: number;
+    /**
+     * Скругление углов
+     */
+    rounded?: boolean;
+    /**
+     * Базовый URL сервиса с изображениями
+     */
+    baseUrl?: string;
+    /**
+     * Колбек, вызываемый при загрузке изображения
+     */
+    onLoad?: () => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    alt?: string;
+    /**
+     * Уникальный идентификатор блока
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const CardImage: FC<CardImageProps>;
+export { ASPECT_RATIO, DEFAULT_WIDTH, DEFAULT_BASE_URL, CardImageProps, CardImage };

package/card-image/cssm/Component.js

@@ -0,0 +1,38 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var ASPECT_RATIO = 0.63;
+var DEFAULT_WIDTH = 280;
+var DEFAULT_BASE_URL = 'https://online.alfabank.ru/cards-images/cards/';
+var CardImage = function (_a) {
+    var cardId = _a.cardId, _b = _a.layers, layers = _b === void 0 ? 'BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE' : _b, _c = _a.width, width = _c === void 0 ? DEFAULT_WIDTH : _c, _d = _a.baseUrl, baseUrl = _d === void 0 ? DEFAULT_BASE_URL : _d, _e = _a.rounded, rounded = _e === void 0 ? true : _e, alt = _a.alt, id = _a.id, dataTestId = _a.dataTestId, onLoad = _a.onLoad, className = _a.className;
+    var _f = React.useState(false), loaded = _f[0], setLoaded = _f[1];
+    var image = React.useRef(null);
+    var height = width * ASPECT_RATIO;
+    var handleLoadedImage = React.useCallback(function () {
+        setLoaded(true);
+        if (onLoad) {
+            onLoad();
+        }
+    }, [onLoad]);
+    var cardImageUrl = "" + baseUrl + cardId + "/images?layers=" + layers + "&width=" + width;
+    var cardImageUrl2x = "" + baseUrl + cardId + "/images?layers=" + layers + "&width=" + width * 2;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].cardImage, rounded && styles__default['default'].rounded, loaded && styles__default['default'].loaded, className), style: {
+            width: width,
+            height: height,
+        }, id: id, "data-test-id": dataTestId }, cardId && (React__default['default'].createElement("img", { ref: image, className: styles__default['default'].image, width: width, height: height, src: cardImageUrl, srcSet: cardImageUrl2x + " 2x", alt: alt, role: 'presentation', onLoad: handleLoadedImage }))));
+};
+
+exports.ASPECT_RATIO = ASPECT_RATIO;
+exports.CardImage = CardImage;
+exports.DEFAULT_BASE_URL = DEFAULT_BASE_URL;
+exports.DEFAULT_WIDTH = DEFAULT_WIDTH;

package/card-image/cssm/index.d.ts

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

package/card-image/cssm/index.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('./index.module.css');
+var Component = require('./Component.js');
+
+
+
+exports.ASPECT_RATIO = Component.ASPECT_RATIO;
+exports.CardImage = Component.CardImage;
+exports.DEFAULT_BASE_URL = Component.DEFAULT_BASE_URL;
+exports.DEFAULT_WIDTH = Component.DEFAULT_WIDTH;

package/card-image/cssm/index.module.css

@@ -0,0 +1,35 @@
+:root {
+    --card-image-background: #e7e8ea;
+    --card-image-border-radius: var(--border-radius-m);
+}
+
+.cardImage {
+    position: relative;
+    display: inline-block;
+    background: var(--card-image-background);
+    transition: background 0.2s ease;
+}
+
+.rounded {
+    border-radius: var(--card-image-border-radius)
+}
+
+.rounded .image {
+        border-radius: var(--card-image-border-radius);
+    }
+
+.image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.loaded {
+    background: transparent
+}
+
+.loaded .image {
+        opacity: var(--opacity-active);
+    }

package/cdn-icon/cssm/Component.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+type CDNIconProps = {
+    /**
+     * Имя иконки
+     */
+    name: string;
+    /**
+     * Цвет иконки
+     */
+    color?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const CDNIcon: React.FC<CDNIconProps>;
+export { CDNIcon };

package/cdn-icon/cssm/Component.js

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var CDNIcon = function (_a) {
+    var name = _a.name, color = _a.color, dataTestId = _a.dataTestId;
+    var _b = React.useState(''), icon = _b[0], setIcon = _b[1];
+    React.useEffect(function () {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', "https://alfabank.st/icons/" + name + ".svg");
+        xhr.send();
+        xhr.onload = function onload() {
+            var svg = xhr.response;
+            if (svg.startsWith('<svg'))
+                setIcon(svg);
+        };
+        return function () { return xhr.abort(); };
+    }, [name]);
+    return (React__default['default'].createElement("span", { style: { color: color }, className: styles__default['default'].component, 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: icon }, "data-test-id": dataTestId }));
+};
+
+exports.CDNIcon = CDNIcon;

package/cdn-icon/cssm/index.d.ts

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

package/cdn-icon/cssm/index.js

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('./index.module.css');
+var Component = require('./Component.js');
+
+
+
+exports.CDNIcon = Component.CDNIcon;

package/cdn-icon/cssm/index.module.css

@@ -0,0 +1,14 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.component svg {
+    fill: currentColor;
+}
+.component path {
+    fill: inherit;
+}

package/chart/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/Component.js

@@ -0,0 +1,269 @@
+var tslib_es6 = require('./tslib.es6-62c2b032.js');
+var React = require('react');
+var cn = require('classnames');
+var recharts = require('recharts');
+var components_LinearGradient = require('./components/LinearGradient.js');
+require('../typography');
+require('./icons/Circle.js');
+require('./icons/CircleLine.js');
+require('./icons/FilledCircle.js');
+require('./icons/StrokeCircle.js');
+var components_Legends_index = require('./components/Legends/index.js');
+require('./icons/Point.js');
+var components_Dot_index = 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');
+var hooks_useSettings_index = require('./hooks/useSettings/index.js');
+var components_Tick_index = require('./components/Tick/index.js');
+var components_TooltipContent_index = require('./components/TooltipContent/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var CustomizedHOC = function (Component, options) {
+    var NewComponent = function (props) {
+        return React__default['default'].createElement(Component, tslib_es6.__assign({}, props, options));
+    };
+    return NewComponent;
+};
+
+var styles = {"coreChart":"chart__coreChart_y5qhn","bar":"chart__bar_y5qhn","unfocused":"chart__unfocused_y5qhn"};
+require('./index.css');
+
+var Chart = function (props) {
+    var _a;
+    var _b = hooks_useSettings_index.useSettings(props), _c = _b[0], state = _c.state, data = _c.data, charts = _c.charts, filterCount = _c.filterCount, _d = _b[1], setCharts = _d.setCharts, setFilterCount = _d.setFilterCount;
+    var _e = React.useState({
+        prev: null,
+        active: null,
+    }), activeDotsState = _e[0], setActiveDotsState = _e[1];
+    var _f = React.useState(null), yBrush = _f[0], setYBrush = _f[1];
+    var _g = React.useState(null), tooltipArrowSide = _g[0], setTooltipArrowSide = _g[1];
+    var _h = React.useState(0), heightLegend = _h[0], setHeightLegend = _h[1];
+    var svgRef = React.useRef(null);
+    var tooltipRef = React.useRef(null);
+    var renderGradient = React.useMemo(function () {
+        if (!state)
+            return null;
+        return state.series.map(function (item) {
+            var chart = item.chart, gradient = item.gradient;
+            if (chart !== 'gradient' || !gradient)
+                return null;
+            var gid = gradient.gid, points = gradient.points;
+            return (React__default['default'].createElement(components_LinearGradient.LinearGradient, { key: state.id + "-" + gid, id: state.id, gid: gid, points: points }));
+        });
+    }, [state]);
+    var toggleChart = React.useCallback(function (item) {
+        var chart = item.chart, dataKey = item.properties.dataKey;
+        var withGrad = chart === 'area';
+        var changed = false;
+        if (charts["" + dataKey] && filterCount > 1) {
+            changed = true;
+            setFilterCount(function (prev) { return prev - 1; });
+        }
+        if (!charts["" + dataKey]) {
+            changed = true;
+            setFilterCount(function (prev) { return prev + 1; });
+        }
+        if (!changed)
+            return;
+        setCharts(function (prev) {
+            var newState = tslib_es6.__assign({}, prev);
+            newState["" + dataKey] = !newState["" + dataKey];
+            if (withGrad)
+                newState[dataKey + "-gradient"] = !newState[dataKey + "-gradient"];
+            return newState;
+        });
+    }, [charts, filterCount, setCharts, setFilterCount]);
+    var legendRef = React.useCallback(function (node) {
+        if (node !== null) {
+            setTimeout(function () {
+                var height = node.getBoundingClientRect().height;
+                setHeightLegend(height);
+            }, 0);
+        }
+    }, []);
+    var renderLegend = React.useMemo(function () {
+        var _a, _b, _c;
+        if (!(state === null || state === void 0 ? void 0 : state.legend))
+            return null;
+        var translate = ((_a = state === null || state === void 0 ? void 0 : state.xAxis) === null || _a === void 0 ? void 0 : _a.tickMargin) && ((_b = state === null || state === void 0 ? void 0 : state.legend) === null || _b === void 0 ? void 0 : _b.verticalAlign) !== 'top'
+            ? state.xAxis.tickMargin + (((_c = state === null || state === void 0 ? void 0 : state.brush) === null || _c === void 0 ? void 0 : _c.brushMargin) || 0)
+            : 0;
+        return (React__default['default'].createElement(recharts.Legend, tslib_es6.__assign({}, (state.legend || null), { content: React__default['default'].createElement(components_Legends_index.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]);
+    var renderCartesianGrid = React.useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.cartesianGrid))
+            return null;
+        return React__default['default'].createElement(recharts.CartesianGrid, tslib_es6.__assign({}, state.cartesianGrid));
+    }, [state]);
+    var renderXAxis = React.useMemo(function () {
+        var _a;
+        if (!(state === null || state === void 0 ? void 0 : state.xAxis))
+            return null;
+        var tick;
+        if (((_a = state === null || state === void 0 ? void 0 : state.xAxis) === null || _a === void 0 ? void 0 : _a.tickType) === 'point') {
+            tick = CustomizedHOC(components_Tick_index.Tick, { xAxis: state.xAxis });
+        }
+        else if (typeof state.xAxis.tick === 'boolean') {
+            tick = state.xAxis.tick;
+        }
+        else {
+            tick = true;
+        }
+        return React__default['default'].createElement(recharts.XAxis, tslib_es6.__assign({}, state.xAxis, { tick: tick }));
+    }, [state]);
+    var renderYAxis = React.useMemo(function () {
+        var _a;
+        if (!(state === null || state === void 0 ? void 0 : state.yAxis))
+            return null;
+        var tick;
+        if ((_a = state === null || state === void 0 ? void 0 : state.yAxis) === null || _a === void 0 ? void 0 : _a.tick) {
+            tick = CustomizedHOC(state.yAxis.tick, { state: state });
+        }
+        else if (typeof state.yAxis.tick === 'boolean') {
+            tick = state.yAxis.tick;
+        }
+        else {
+            tick = true;
+        }
+        return React__default['default'].createElement(recharts.YAxis, tslib_es6.__assign({}, state.yAxis, { tick: tick }));
+    }, [state]);
+    var renderBrush = React.useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.brush))
+            return null;
+        return React__default['default'].createElement(recharts.Brush, tslib_es6.__assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
+    }, [state, yBrush]);
+    var renderTooltip = React.useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
+            return null;
+        return (React__default['default'].createElement(recharts.Tooltip, tslib_es6.__assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(components_TooltipContent_index.TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
+    }, [state, tooltipArrowSide]);
+    var renderChartsItems = React.useMemo(function () {
+        if (!state || !charts)
+            return null;
+        return state.series.map(function (item) {
+            var chart = item.chart, properties = item.properties;
+            var show = charts["" + properties.dataKey];
+            switch (chart) {
+                case 'bar':
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default['default'].createElement(recharts.Bar, tslib_es6.__assign({ key: state.id + "-" + properties.dataKey }, properties), data.map(function (_, index) {
+                        var key = state.id + "-" + properties.dataKey + "-" + index;
+                        return (React__default['default'].createElement(recharts.Cell, { key: key, className: cn__default['default'](styles.bar, typeof activeDotsState.active === 'number' &&
+                                activeDotsState.active !== index
+                                ? styles.unfocused
+                                : '') }));
+                    }))) : null;
+                case 'area':
+                case 'line':
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default['default'].createElement(recharts.Line, tslib_es6.__assign({ key: state.id + "-" + properties.dataKey }, properties, { dot: properties.dot && properties.dotSettings
+                            ? CustomizedHOC(components_Dot_index.Dot, {
+                                activeDot: activeDotsState.active,
+                                dotSettings: properties.dotSettings,
+                                inherit: (properties === null || properties === void 0 ? void 0 : properties.inheritStroke) ? properties.inheritStroke
+                                    : false,
+                            })
+                            : false, activeDot: false }))) : null;
+                case 'gradient':
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default['default'].createElement(recharts.Area, tslib_es6.__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
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!state || !state.brush)
+            return;
+        if (!heightLegend || heightLegend === 0)
+            return;
+        var align = (_a = state === null || state === void 0 ? void 0 : state.legend) === null || _a === void 0 ? void 0 : _a.verticalAlign;
+        var legendHeight = align === 'top' ? 0 : heightLegend;
+        var marginTick = ((_b = state === null || state === void 0 ? void 0 : state.xAxis) === null || _b === void 0 ? void 0 : _b.tickMargin) ? (_c = state === null || state === void 0 ? void 0 : state.xAxis) === null || _c === void 0 ? void 0 : _c.tickMargin : 0;
+        var brushY = (((_d = svgRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight) ? svgRef.current.clientHeight : 0) -
+            legendHeight -
+            state.brush.height -
+            (((_f = (_e = state === null || state === void 0 ? void 0 : state.composeChart) === null || _e === void 0 ? void 0 : _e.margin) === null || _f === void 0 ? void 0 : _f.bottom) ? state.composeChart.margin.bottom : 0) +
+            marginTick +
+            (((_g = state.brush) === null || _g === void 0 ? void 0 : _g.brushMargin) ? state.brush.brushMargin : 0);
+        setYBrush(brushY);
+    }, [heightLegend, state]);
+    var leaveEvent = function (isTooltipActive) {
+        if (isTooltipActive)
+            return;
+        if (typeof activeDotsState.prev !== 'number' || typeof activeDotsState.active !== 'number')
+            return;
+        setActiveDotsState({
+            prev: null,
+            active: null,
+        });
+    };
+    var arrowTooltipEvent = function (activeCoordinate) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!((_a = state === null || state === void 0 ? void 0 : state.tooltip) === null || _a === void 0 ? void 0 : _a.arrow))
+            return;
+        if (((_b = state === null || state === void 0 ? void 0 : state.tooltip) === null || _b === void 0 ? void 0 : _b.arrow) && (activeCoordinate === null || activeCoordinate === void 0 ? void 0 : activeCoordinate.x)) {
+            var side = (((_c = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) || 0) -
+                (((_e = (_d = state === null || state === void 0 ? void 0 : state.composeChart) === null || _d === void 0 ? void 0 : _d.margin) === null || _e === void 0 ? void 0 : _e.right) || 0) -
+                activeCoordinate.x -
+                (((_g = (_f = tooltipRef.current) === null || _f === void 0 ? void 0 : _f.state) === null || _g === void 0 ? void 0 : _g.boxWidth) || 0) >
+                20;
+            setTooltipArrowSide(side);
+        }
+    };
+    var hoverEvent = function (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(function (prev) {
+                return {
+                    prev: prev.active,
+                    active: activeTooltipIndex,
+                };
+            });
+        }
+    };
+    var mouseMove = function (e) {
+        arrowTooltipEvent(e.activeCoordinate);
+        hoverEvent(e.isTooltipActive, e.activeTooltipIndex);
+        leaveEvent(e.isTooltipActive);
+    };
+    var mouseLeave = function (e) {
+        leaveEvent(e.isTooltipActive);
+    };
+    if (!data || !charts || !state)
+        return null;
+    return (React__default['default'].createElement("div", { className: styles.coreChart, ref: svgRef, id: (state === null || state === void 0 ? void 0 : state.id) || '', style: { width: '100%', height: '100%' } },
+        React__default['default'].createElement(recharts.ResponsiveContainer, { debounce: ((_a = state === null || state === void 0 ? void 0 : state.responsiveContainer) === null || _a === void 0 ? void 0 : _a.debounce) ? state.responsiveContainer.debounce : 0, width: '100%' },
+            React__default['default'].createElement(recharts.ComposedChart, tslib_es6.__assign({}, state === null || state === void 0 ? void 0 : state.composeChart, { onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data }),
+                React__default['default'].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__default['default'].memo(Chart);
+
+module.exports = Component;