@alfalab/core-components 45.8.0 → 45.9.0-beta.0

package/cdn-icon/esm/Component.js

@@ -2,7 +2,7 @@ import { __assign } from 'tslib';
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"cdn-icon__component_c0gsl","parentColor":"cdn-icon__parentColor_c0gsl"};
+var styles = {"component":"cdn-icon__component_1kz0y","parentColor":"cdn-icon__parentColor_1kz0y"};
 require('./index.css');
 
 var LoadingStatus;

package/cdn-icon/esm/index.css

@@ -14,10 +14,10 @@
 } :root {
 } :root {
 } :root {
-} .cdn-icon__component_c0gsl {
+} .cdn-icon__component_1kz0y {
     display: inline-flex;
-} .cdn-icon__component_c0gsl svg {
+} .cdn-icon__component_1kz0y svg {
     fill: currentColor;
-} .cdn-icon__parentColor_c0gsl path {
+} .cdn-icon__parentColor_1kz0y path {
     fill: inherit;
 }

package/cdn-icon/index.css

@@ -14,10 +14,10 @@
 } :root {
 } :root {
 } :root {
-} .cdn-icon__component_c0gsl {
+} .cdn-icon__component_1kz0y {
     display: inline-flex;
-} .cdn-icon__component_c0gsl svg {
+} .cdn-icon__component_1kz0y svg {
     fill: currentColor;
-} .cdn-icon__parentColor_c0gsl path {
+} .cdn-icon__parentColor_1kz0y path {
     fill: inherit;
 }

package/cdn-icon/modern/Component.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"cdn-icon__component_c0gsl","parentColor":"cdn-icon__parentColor_c0gsl"};
+const styles = {"component":"cdn-icon__component_1kz0y","parentColor":"cdn-icon__parentColor_1kz0y"};
 require('./index.css');
 
 var LoadingStatus;

package/cdn-icon/modern/index.css

@@ -14,10 +14,10 @@
 } :root {
 } :root {
 } :root {
-} .cdn-icon__component_c0gsl {
+} .cdn-icon__component_1kz0y {
     display: inline-flex;
-} .cdn-icon__component_c0gsl svg {
+} .cdn-icon__component_1kz0y svg {
     fill: currentColor;
-} .cdn-icon__parentColor_c0gsl path {
+} .cdn-icon__parentColor_1kz0y path {
     fill: inherit;
 }

package/chart/Component.js

@@ -23,7 +23,7 @@ var CustomizedHOC = function (Component, options) {
     return NewComponent;
 };
 
-var styles = {"coreChart":"chart__coreChart_1cyrs","bar":"chart__bar_1cyrs","unfocused":"chart__unfocused_1cyrs"};
+var styles = {"coreChart":"chart__coreChart_rrlcf","bar":"chart__bar_rrlcf","unfocused":"chart__unfocused_rrlcf"};
 require('./index.css');
 
 var Chart = function (props) {

package/chart/components/Dot/index.css

@@ -1,19 +1,19 @@
 /* hash: oysb0 */
-.chart__dotUnfocused_16t6i {
+.chart__dotUnfocused_t4t2n {
     opacity: 0.3;
 }
 
-.chart__dot_16t6i,
-.chart__dotItem_16t6i,
-.chart__dotWrap_16t6i {
+.chart__dot_t4t2n,
+.chart__dotItem_t4t2n,
+.chart__dotWrap_t4t2n {
     transition: all 0.2s ease;
 }
 
-.chart__dot_16t6i {
-    animation: chart__showDot_16t6i 0.5s ease;
+.chart__dot_t4t2n {
+    animation: chart__showDot_t4t2n 0.5s ease;
 }
 
-@keyframes chart__showDot_16t6i {
+@keyframes chart__showDot_t4t2n {
     from {
         opacity: 0;
     }

package/chart/components/Dot/index.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"dotUnfocused":"chart__dotUnfocused_16t6i","dot":"chart__dot_16t6i","dotItem":"chart__dotItem_16t6i","dotWrap":"chart__dotWrap_16t6i","showDot":"chart__showDot_16t6i"};
+var styles = {"dotUnfocused":"chart__dotUnfocused_t4t2n","dot":"chart__dot_t4t2n","dotItem":"chart__dotItem_t4t2n","dotWrap":"chart__dotWrap_t4t2n","showDot":"chart__showDot_t4t2n"};
 require('./index.css');
 
 var Dot = React__default.default.forwardRef(function (_a, ref) {

package/chart/components/Legends/index.css

@@ -15,25 +15,25 @@
     --gap-2xl: 32px;
 } :root {
 } :root {
-} .chart__legendContent_1i9eo {
+} .chart__legendContent_4fh22 {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-} .chart__legendWrap_1i9eo {
+} .chart__legendWrap_4fh22 {
     width: 100%;
     margin: 0;
     padding: 0;
-} .chart__legendItem_1i9eo {
+} .chart__legendItem_4fh22 {
     margin-right: var(--gap-2xl);
     cursor: pointer;
     display: inline-block;
-} .chart__legendItem_1i9eo:last-child {
+} .chart__legendItem_4fh22:last-child {
     margin-right: 0;
-} .chart__legendUnactive_1i9eo {
+} .chart__legendUnactive_4fh22 {
     opacity: 0.3;
-} .chart__legendIcon_1i9eo {
+} .chart__legendIcon_4fh22 {
     margin-right: 13px;
     display: flex;
-} .chart__legendValue_1i9eo {
+} .chart__legendValue_4fh22 {
     text-transform: capitalize;
 }

package/chart/components/Legends/index.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"legendContent":"chart__legendContent_1i9eo","legendWrap":"chart__legendWrap_1i9eo","legendItem":"chart__legendItem_1i9eo","legendUnactive":"chart__legendUnactive_1i9eo","legendIcon":"chart__legendIcon_1i9eo","legendValue":"chart__legendValue_1i9eo"};
+var styles = {"legendContent":"chart__legendContent_4fh22","legendWrap":"chart__legendWrap_4fh22","legendItem":"chart__legendItem_4fh22","legendUnactive":"chart__legendUnactive_4fh22","legendIcon":"chart__legendIcon_4fh22","legendValue":"chart__legendValue_4fh22"};
 require('./index.css');
 
 var icons = {

package/chart/components/Tick/index.css

@@ -16,15 +16,15 @@
 } :root {
 } :root {
 } :root {
-} .chart__tickText_g2zxz {
+} .chart__tickText_cq01u {
     fill: var(--color-light-text-primary);
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-} .chart__circle_g2zxz {
+} .chart__circle_cq01u {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
-} .chart__circle_g2zxz {
+} .chart__circle_cq01u {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
 }

package/chart/components/Tick/index.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"tickText":"chart__tickText_g2zxz","circle":"chart__circle_g2zxz"};
+var styles = {"tickText":"chart__tickText_cq01u","circle":"chart__circle_cq01u"};
 require('./index.css');
 
 var Tick = function (_a) {

package/chart/components/TooltipContent/index.css

@@ -21,7 +21,7 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .chart__tooltip_n57gu {
+} .chart__tooltip_asmzd {
     background-color: var(--color-light-bg-primary);
     border: 1px solid var(--color-light-border-primary);
     box-shadow: var(--shadow-l);
@@ -29,15 +29,15 @@
     padding: var(--gap-s) var(--gap-m);
     pointer-events: none;
     position: relative;
-} .chart__tooltipList_n57gu {
+} .chart__tooltipList_asmzd {
     position: relative;
     z-index: 5;
     list-style-type: none;
     padding: 0;
     margin: 0;
-} .chart__tooltipItem_n57gu {
+} .chart__tooltipItem_asmzd {
     margin-bottom: 10px;
-} .chart__tooltipArrow_n57gu {
+} .chart__tooltipArrow_asmzd {
     position: absolute;
     left: 0;
     top: 50%;
@@ -46,7 +46,7 @@
     height: 10px;
     border: 1px solid var(--color-light-border-primary);
     background-color: var(--color-light-bg-primary);
-} .chart__tooltipArrow_n57gu:before {
+} .chart__tooltipArrow_asmzd:before {
     content: '';
     position: absolute;
     left: -2px;
@@ -56,7 +56,7 @@
     border-style: solid;
     border-width: 0 24px 24px 0;
     border-color: transparent var(--color-light-bg-primary) transparent transparent;
-} .chart__tooltipArrowRight_n57gu {
+} .chart__tooltipArrowRight_asmzd {
     left: 100%;
     transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
 }

package/chart/components/TooltipContent/index.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"tooltip":"chart__tooltip_n57gu","tooltipList":"chart__tooltipList_n57gu","tooltipItem":"chart__tooltipItem_n57gu","tooltipArrow":"chart__tooltipArrow_n57gu","tooltipArrowRight":"chart__tooltipArrowRight_n57gu"};
+var styles = {"tooltip":"chart__tooltip_asmzd","tooltipList":"chart__tooltipList_asmzd","tooltipItem":"chart__tooltipItem_asmzd","tooltipArrow":"chart__tooltipArrow_asmzd","tooltipArrowRight":"chart__tooltipArrowRight_asmzd"};
 require('./index.css');
 
 var TooltipContent = function (_a) {

package/chart/cssm/Component.js

@@ -1,106 +1,112 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { Legend, CartesianGrid, XAxis, YAxis, Brush, Tooltip, Area, Line, Bar, LabelList, Cell, ResponsiveContainer, ComposedChart } from 'recharts';
+import { CustomizedLabel } from './components/CustomizedLabel.js';
+import { Dot } from './components/Dot/index.js';
+import { Legends } from './components/Legends/index.js';
+import { LinearGradient } from './components/LinearGradient.js';
+import { RectBar } from './components/RectBar.js';
+import { Tick } from './components/Tick/index.js';
+import { TooltipContent } from './components/TooltipContent/index.js';
+import { useSettings } from './hooks/useSettings/index.js';
+import styles from './index.module.css';
+import './hooks/usePathBar/index.js';
+import './hooks/usePathBar/utils/getRadius.js';
+import './icons/Point.js';
+import './components/Dot/index.module.css';
+import '../../typography/cssm';
+import './icons/Circle.js';
+import './icons/CircleLine.js';
+import './icons/FilledCircle.js';
+import './icons/StrokeCircle.js';
+import './components/Legends/index.module.css';
+import './components/Tick/index.module.css';
+import './components/TooltipContent/index.module.css';
+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';
 
-var tslib = require('tslib');
-var React = require('react');
-var cn = require('classnames');
-var recharts = require('recharts');
-var components_CustomizedLabel = require('./components/CustomizedLabel.js');
-var components_Dot_index = require('./components/Dot/index.js');
-var components_Legends_index = require('./components/Legends/index.js');
-var components_LinearGradient = require('./components/LinearGradient.js');
-var components_RectBar = require('./components/RectBar.js');
-var components_Tick_index = require('./components/Tick/index.js');
-var components_TooltipContent_index = require('./components/TooltipContent/index.js');
-var hooks_useSettings_index = require('./hooks/useSettings/index.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var CustomizedHOC = function (Component, options) {
-    var NewComponent = function (props) { return React__default.default.createElement(Component, tslib.__assign({}, props, options)); };
+const CustomizedHOC = (Component, options) => {
+    const NewComponent = (props) => React.createElement(Component, { ...props, ...options });
     return NewComponent;
 };
 
-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({
+/* eslint-disable @typescript-eslint/no-explicit-any,prefer-template */
+const Chart = (props) => {
+    const [{ state, data, charts, filterCount }, { setCharts, setFilterCount }] = useSettings(props);
+    const [activeDotsState, setActiveDotsState] = 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 () {
+    });
+    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(function (item) {
-            var chart = item.chart, gradient = item.gradient;
+        return state.series.map((item) => {
+            const { chart, gradient } = item;
             if (chart !== 'gradient' || !gradient)
                 return null;
-            var gid = gradient.gid, points = gradient.points;
-            return (React__default.default.createElement(components_LinearGradient.LinearGradient, { key: "".concat(state.id, "-").concat(gid), id: state.id, gid: gid, points: points }));
+            const { gid, points } = gradient;
+            return (React.createElement(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;
+    const toggleChart = useCallback((item) => {
+        const { chart, properties: { dataKey }, } = item;
+        const withGrad = chart === 'area';
+        let changed = false;
         if (charts[dataKey + ''] && filterCount > 1) {
             changed = true;
-            setFilterCount(function (prev) { return prev - 1; });
+            setFilterCount((prev) => prev - 1);
         }
         if (!charts[dataKey + '']) {
             changed = true;
-            setFilterCount(function (prev) { return prev + 1; });
+            setFilterCount((prev) => prev + 1);
         }
         if (!changed)
             return;
-        setCharts(function (prev) {
-            var newState = tslib.__assign({}, prev);
+        setCharts((prev) => {
+            const newState = { ...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) {
+    const legendRef = useCallback((node) => {
         if (node !== null) {
-            setTimeout(function () {
-                var height = node.getBoundingClientRect().height;
+            setTimeout(() => {
+                const { height } = node.getBoundingClientRect();
                 setHeightLegend(height);
             }, 0);
         }
     }, []);
-    var renderLegend = React.useMemo(function () {
-        var _a, _b, _c;
-        if (!(state === null || state === void 0 ? void 0 : state.legend))
+    const renderLegend = useMemo(() => {
+        if (!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)
+        const translate = state?.xAxis?.tickMargin && state?.legend?.verticalAlign !== 'top'
+            ? state.xAxis.tickMargin + (state?.brush?.brushMargin || 0)
             : 0;
-        return (React__default.default.createElement(recharts.Legend, tslib.__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(".concat(translate, "px)"),
-            } })));
+        return (React.createElement(Legend, { ...(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]);
-    var renderCartesianGrid = React.useMemo(function () {
-        if (!(state === null || state === void 0 ? void 0 : state.cartesianGrid))
+    const renderCartesianGrid = useMemo(() => {
+        if (!state?.cartesianGrid)
             return null;
-        return React__default.default.createElement(recharts.CartesianGrid, tslib.__assign({}, state.cartesianGrid));
+        return React.createElement(CartesianGrid, { ...state.cartesianGrid });
     }, [state]);
-    var renderXAxis = React.useMemo(function () {
-        var _a;
-        if (!(state === null || state === void 0 ? void 0 : state.xAxis))
+    const renderXAxis = useMemo(() => {
+        if (!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 });
+        let tick;
+        if (state?.xAxis?.tickType === 'point') {
+            tick = CustomizedHOC(Tick, { xAxis: state.xAxis });
         }
         else if (typeof state.xAxis.tick === 'boolean') {
             tick = state.xAxis.tick;
@@ -108,15 +114,14 @@ var Chart = function (props) {
         else {
             tick = true;
         }
-        return React__default.default.createElement(recharts.XAxis, tslib.__assign({}, state.xAxis, { tick: tick }));
+        return React.createElement(XAxis, { ...state.xAxis, tick: tick });
     }, [state]);
-    var renderYAxis = React.useMemo(function () {
-        var _a;
-        if (!(state === null || state === void 0 ? void 0 : state.yAxis))
+    const renderYAxis = useMemo(() => {
+        if (!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 });
+        let tick;
+        if (state?.yAxis?.tick) {
+            tick = CustomizedHOC(state.yAxis.tick, { state });
         }
         else if (typeof state.yAxis.tick === 'boolean') {
             tick = state.yAxis.tick;
@@ -124,74 +129,73 @@ var Chart = function (props) {
         else {
             tick = true;
         }
-        return React__default.default.createElement(recharts.YAxis, tslib.__assign({}, state.yAxis, { tick: tick }));
+        return React.createElement(YAxis, { ...state.yAxis, tick: tick });
     }, [state]);
-    var renderBrush = React.useMemo(function () {
-        if (!(state === null || state === void 0 ? void 0 : state.brush))
+    const renderBrush = useMemo(() => {
+        if (!state?.brush)
             return null;
-        return React__default.default.createElement(recharts.Brush, tslib.__assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
+        return React.createElement(Brush, { 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))
+    const renderTooltip = useMemo(() => {
+        if (!state?.tooltip)
             return null;
-        return (React__default.default.createElement(recharts.Tooltip, tslib.__assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(components_TooltipContent_index.TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
+        return (React.createElement(Tooltip, { ref: tooltipRef, ...state.tooltip, content: CustomizedHOC(TooltipContent, { series: state.series, tooltipArrowSide }) }));
     }, [state, tooltipArrowSide]);
-    var renderChartsItems = React.useMemo(function () {
+    const renderChartsItems = useMemo(() => {
         if (!state || !charts)
             return null;
-        return state.series.map(function (item) {
-            var chart = item.chart, properties = item.properties, radius = item.radius, labelList = item.labelList;
-            var show = charts["".concat(properties.dataKey)];
+        return state.series.map((item) => {
+            const { chart, properties, radius, labelList } = item;
+            const 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.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { shape: React__default.default.createElement(components_RectBar.RectBar, { radius: radius }) }),
-                        labelList && (React__default.default.createElement(recharts.LabelList, tslib.__assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React__default.default.createElement(components_CustomizedLabel.CustomizedLabel, { radius: radius }) }))),
-                        data.map(function (_, index) {
-                            var key = "".concat(state.id, "-").concat(properties.dataKey, "-").concat(index);
-                            return (React__default.default.createElement(recharts.Cell, { key: key, className: cn__default.default(styles__default.default.bar, typeof activeDotsState.active === 'number' &&
+                    return show && !item?.hide ? (React.createElement(Bar, { key: `${state.id}-${properties.dataKey}`, ...properties, shape: React.createElement(RectBar, { radius: radius }) },
+                        labelList && (React.createElement(LabelList, { dataKey: properties.dataKey.toString(), ...labelList, content: React.createElement(CustomizedLabel, { radius: radius }) })),
+                        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__default.default.unfocused
+                                    ? 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.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { dot: properties.dot && properties.dotSettings
-                            ? CustomizedHOC(components_Dot_index.Dot, {
+                    return show && !item?.hide ? (React.createElement(Line, { key: `${state.id}-${properties.dataKey}`, ...properties, dot: properties.dot && properties.dotSettings
+                            ? CustomizedHOC(Dot, {
                                 activeDot: activeDotsState.active,
                                 dotSettings: properties.dotSettings,
-                                inherit: (properties === null || properties === void 0 ? void 0 : properties.inheritStroke)
+                                inherit: properties?.inheritStroke
                                     ? properties.inheritStroke
                                     : false,
                             })
-                            : false, activeDot: false }))) : null;
+                            : false, activeDot: false })) : null;
                 case 'gradient':
-                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Area, tslib.__assign({}, item.properties, { key: "".concat(state.id, "-").concat(item.properties.dataKey), dataKey: "".concat(item.properties.dataKey), stroke: 'transparent', fill: item.gradient.gid
-                            ? "url(#".concat(state.id, "-").concat(item.gradient.gid, ")")
-                            : item.properties.fill, dot: false, activeDot: false }))) : null;
+                    return show && !item?.hide ? (React.createElement(Area, { ...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;
+    useEffect(() => {
         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) -
+        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 -
-            (((_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) +
+            (state?.composeChart?.margin?.bottom ? state.composeChart.margin.bottom : 0) +
             marginTick +
-            (((_g = state.brush) === null || _g === void 0 ? void 0 : _g.brushMargin) ? state.brush.brushMargin : 0);
+            (state.brush?.brushMargin ? state.brush.brushMargin : 0);
         setYBrush(brushY);
     }, [heightLegend, state]);
-    var leaveEvent = function (isTooltipActive) {
+    const leaveEvent = (isTooltipActive) => {
         if (isTooltipActive)
             return;
         if (typeof activeDotsState.prev !== 'number' || typeof activeDotsState.active !== 'number')
@@ -201,20 +205,19 @@ var Chart = function (props) {
             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))
+    const arrowTooltipEvent = (activeCoordinate) => {
+        if (!state?.tooltip?.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) -
+        if (state?.tooltip?.arrow && activeCoordinate?.x) {
+            const side = (svgRef?.current?.clientWidth || 0) -
+                (state?.composeChart?.margin?.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) >
+                (tooltipRef.current?.state?.boxWidth || 0) >
                 20;
             setTooltipArrowSide(side);
         }
     };
-    var hoverEvent = function (isTooltipActive, activeTooltipIndex) {
+    const hoverEvent = (isTooltipActive, activeTooltipIndex) => {
         if (!isTooltipActive)
             return;
         if (typeof activeDotsState.active === 'number' &&
@@ -227,30 +230,30 @@ var Chart = function (props) {
             });
         }
         if (typeof activeTooltipIndex === 'number' && typeof activeDotsState.prev === 'number') {
-            setActiveDotsState(function (prev) { return ({
+            setActiveDotsState((prev) => ({
                 prev: prev.active,
                 active: activeTooltipIndex,
-            }); });
+            }));
         }
     };
-    var mouseMove = function (e) {
-        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
+    const mouseMove = (e) => {
+        if (!state?.tooltip)
             return;
         arrowTooltipEvent(e.activeCoordinate);
         hoverEvent(e.isTooltipActive, e.activeTooltipIndex);
         leaveEvent(e.isTooltipActive);
     };
-    var mouseLeave = function (e) {
-        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
+    const mouseLeave = (e) => {
+        if (!state?.tooltip)
             return;
         leaveEvent(e.isTooltipActive);
     };
     if (!data || !charts || !state)
         return null;
-    return (React__default.default.createElement("div", { className: styles__default.default.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.__assign({}, state === null || state === void 0 ? void 0 : state.composeChart, { onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data }),
-                React__default.default.createElement("defs", null, renderGradient),
+    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, { ...state?.composeChart, onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data },
+                React.createElement("defs", null, renderGradient),
                 state.cartesianGrid && renderCartesianGrid,
                 state.xAxis && renderXAxis,
                 state.yAxis && renderYAxis,
@@ -260,4 +263,4 @@ var Chart = function (props) {
                 state.legend && renderLegend))));
 };
 
-exports.Chart = Chart;
+export { Chart };