@alfalab/core-components-chart 3.1.0 → 3.1.2

package/esm/index.js

@@ -1,26 +1,26 @@
-import './tslib.es6-f1220da2.js';
+import './tslib.es6-efd85325.js';
 import 'react';
 import 'classnames';
 import 'recharts';
-export { Chart } from './Component.js';
-import './components/LinearGradient.js';
+import './hooks/usePathBar/utils/getRadius.js';
+import './hooks/usePathBar/index.js';
+import './components/CustomizedLabel.js';
+import './icons/Point.js';
+import './components/Dot/index.js';
 import '@alfalab/core-components-typography/esm';
 import './icons/Circle.js';
 import './icons/CircleLine.js';
 import './icons/FilledCircle.js';
 import './icons/StrokeCircle.js';
 import './components/Legends/index.js';
-import './icons/Point.js';
-import './components/Dot/index.js';
+import './components/LinearGradient.js';
+import './components/RectBar.js';
+import './components/Tick/index.js';
+import './components/TooltipContent/index.js';
+export { Chart } from './Component.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 './hooks/useSettings/index.js';
-import './hooks/usePathBar/utils/getRadius.js';
-import './hooks/usePathBar/index.js';
-import './components/CustomizedLabel.js';
-import './components/RectBar.js';
-import './components/Tick/index.js';
-import './components/TooltipContent/index.js';

package/{tslib.es6-e232afa5.d.ts → esm/tslib.es6-efd85325.d.ts}

@@ -12,9 +12,12 @@ declare function __generator(thisArg: any, body: any): {
 declare function __exportStar(m: any, o: any): void;
 declare function __values(o: any): any;
 declare function __read(o: any, n: any): any;
+/** @deprecated */
 declare function __spread(...args: any[]): any[];
+/** @deprecated */
 declare function __spreadArrays(...args: any[]): any[];
-declare function __await(v: any): any;
+declare function __spreadArray(to: any, from: any, pack: any, ...args: any[]): any;
+declare function __await(v: any): __await;
 declare class __await {
     constructor(v: any);
     v: any;
@@ -25,8 +28,9 @@ declare function __asyncValues(o: any): any;
 declare function __makeTemplateObject(cooked: any, raw: any): any;
 declare function __importStar(mod: any): any;
 declare function __importDefault(mod: any): any;
-declare function __classPrivateFieldGet(receiver: any, privateMap: any): any;
-declare function __classPrivateFieldSet(receiver: any, privateMap: any, value: any): any;
+declare function __classPrivateFieldGet(receiver: any, state: any, kind: any, f: any): any;
+declare function __classPrivateFieldSet(receiver: any, state: any, value: any, kind: any, f: any): any;
+declare function __classPrivateFieldIn(state: any, receiver: any): any;
 declare function __assign(...args: any[]): any;
 declare function __createBinding(o: any, m: any, k: any, k2: any): void;
-export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding };
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __spreadArray, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __classPrivateFieldIn, __assign, __createBinding };

package/esm/{tslib.es6-f1220da2.js → tslib.es6-efd85325.js}

@@ -1,4 +1,4 @@
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any

package/esm/types/chart.types.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import { RectangleProps } from 'recharts';
 import { DataKey } from 'recharts/types/util/types';
-import { DotSettingProps } from "./utils/dot.types";
 import { DataProps } from "./utils/data.types";
+import { DotSettingProps } from "./utils/dot.types";
 type CurveType = 'linear' | 'monotone' | 'step';
 type RectangleShapeType = ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>) | RectangleProps | boolean;
 interface ChartProps {

package/esm/types/options.types.d.ts

@@ -4,11 +4,11 @@ import { BrushProps } from "./brush.types";
 import { CartesianGridProps } from "./cartesianGrid.types";
 import { ComposedChartProps } from "./composedChart.types";
 import { LegendProps } from "./legend.types";
+import { ResponsiveContainerProps } from "./responsiveContainer.types";
+import { SeriaProps } from "./seria.types";
 import { TooltipProps } from "./tooltip.types";
 import { XAxisProps } from "./xAxis.types";
 import { YAxisProps } from "./yAxis.types";
-import { SeriaProps } from "./seria.types";
-import { ResponsiveContainerProps } from "./responsiveContainer.types";
 interface OptionsProps {
     /**
      * Индефикатор графика

package/esm/types/seria.types.d.ts

@@ -1,7 +1,7 @@
-import { ChartProps } from "./chart.types";
-import { LabelListProps } from "./labelList.types";
 import { DataProps } from "./utils/data.types";
 import { GradientProps } from "./utils/gradient.types";
+import { ChartProps } from "./chart.types";
+import { LabelListProps } from "./labelList.types";
 type RadiusProp = {
     top?: number;
     bottom?: number;

package/esm/types/tooltip.types.d.ts

@@ -57,7 +57,7 @@ interface TooltipProps {
     /**
      * Стиль метки всплывающей подсказки по умолчанию, которая является элементом p.
      */
-    labelStyle?: {};
+    labelStyle?: Record<string, unknown>;
     /**
      * Значение метки, которое сейчас активно, обычно рассчитывается внутри компании.
      */

package/hooks/useSettings/index.d.ts

@@ -1,16 +1,19 @@
 import { Dispatch, SetStateAction } from 'react';
 import { OptionsProps } from "../../types/options.types";
 import { DataDynamicBooleanProps, DataDynamicProps } from "../../types/utils/data.types";
-type Settings = [{
-    state: OptionsProps | null;
-    data: DataDynamicProps[];
-    charts: DataDynamicBooleanProps;
-    filterCount: number;
-}, {
-    setState: Dispatch<SetStateAction<OptionsProps | null>>;
-    setData: Dispatch<SetStateAction<DataDynamicProps[]>>;
-    setCharts: Dispatch<SetStateAction<DataDynamicBooleanProps>>;
-    setFilterCount: Dispatch<SetStateAction<number>>;
-}];
+type Settings = [
+    {
+        state: OptionsProps | null;
+        data: DataDynamicProps[];
+        charts: DataDynamicBooleanProps;
+        filterCount: number;
+    },
+    {
+        setState: Dispatch<SetStateAction<OptionsProps | null>>;
+        setData: Dispatch<SetStateAction<DataDynamicProps[]>>;
+        setCharts: Dispatch<SetStateAction<DataDynamicBooleanProps>>;
+        setFilterCount: Dispatch<SetStateAction<number>>;
+    }
+];
 declare const useSettings: (options: OptionsProps) => Settings;
 export { useSettings };

package/hooks/useSettings/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-e232afa5.js');
+var tslib_es6 = require('../../tslib.es6-806ac05c.js');
 var React = require('react');
 var hooks_useSettings_utils_setComposedChartsMargin = require('./utils/setComposedChartsMargin.js');
 var hooks_useSettings_utils_setDatas = require('./utils/setDatas.js');

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

@@ -1,7 +1,7 @@
-import { XAxisProps } from "../../../types/xAxis.types";
 import { BrushProps } from "../../../types/brush.types";
-import { LegendProps } from "../../../types/legend.types";
 import { ComposedChartProps } from "../../../types/composedChart.types";
+import { LegendProps } from "../../../types/legend.types";
+import { XAxisProps } from "../../../types/xAxis.types";
 type ComposedChartsMarginResultProps = {
     top: number;
     bottom: number;

package/hooks/useSettings/utils/setComposedChartsMargin.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var setComposedChartsMargin = function (composeChart, legend, brush, xAxis) {
     var _a, _b, _c, _d;
-    return {
+    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) +
@@ -13,7 +13,7 @@ var setComposedChartsMargin = function (composeChart, legend, brush, xAxis) {
             ((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/hooks/useSettings/utils/setDatas.d.ts

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

package/hooks/useSettings/utils/setDatas.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../../tslib.es6-e232afa5.js');
+var tslib_es6 = require('../../../tslib.es6-806ac05c.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;
+        var _a = series[i], _b = _a.properties, _c = _b === void 0 ? {} : _b, _d = _c.dataKey, dataKey = _d === void 0 ? '' : _d, _e = _a.data, seriaData = _e === void 0 ? [] : _e, hideLegend = _a.hideLegend, hide = _a.hide;
         if (!hideLegend && !hide)
             count += 1;
         labels.map(function (label) {

package/hooks/useSettings/utils/setGradientCharts.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../../tslib.es6-e232afa5.js');
+var tslib_es6 = require('../../../tslib.es6-806ac05c.js');
 
 var setGradientCharts = function (series) {
     var filterSeries = series.filter(function (item) { return item.chart !== 'gradient'; });

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

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

package/icons/CircleLine.d.ts

@@ -4,5 +4,5 @@ type Props = {
     fill?: string;
     height?: number;
 };
-declare const CircleLineIcon: ({ fill, height }: Props) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+declare const CircleLineIcon: ({ fill, height }: Props) => React.ReactElement;
 export { CircleLineIcon };

package/index.css

@@ -1,4 +1,4 @@
-/* hash: eq4rl */
+/* hash: 128of */
 :root {
     --color-light-text-primary: #0b1f35;
 }
@@ -10,17 +10,17 @@
 
     /* Hard up */
 }
-.chart__coreChart_1xrvo .recharts-line path {
+.chart__coreChart_tioz0 .recharts-line path {
         transition: d 0.2s ease-out;
     }
-.chart__coreChart_1xrvo .recharts-text tspan {
+.chart__coreChart_tioz0 .recharts-text tspan {
         fill: var(--color-light-text-primary);
         font-size: 16px;
         line-height: 22px;
     }
-.chart__bar_1xrvo {
+.chart__bar_tioz0 {
     transition: opacity 0.2s ease-out, d 0.2s ease-out;
 }
-.chart__unfocused_1xrvo {
+.chart__unfocused_tioz0 {
     opacity: 0.3;
 }

package/index.js

@@ -2,32 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-e232afa5.js');
+require('./tslib.es6-806ac05c.js');
 require('react');
 require('classnames');
 require('recharts');
-var Component = require('./Component.js');
-require('./components/LinearGradient.js');
+require('./hooks/usePathBar/utils/getRadius.js');
+require('./hooks/usePathBar/index.js');
+require('./components/CustomizedLabel.js');
+require('./icons/Point.js');
+require('./components/Dot/index.js');
 require('@alfalab/core-components-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('./components/LinearGradient.js');
+require('./components/RectBar.js');
+require('./components/Tick/index.js');
+require('./components/TooltipContent/index.js');
+var Component = require('./Component.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('./hooks/usePathBar/utils/getRadius.js');
-require('./hooks/usePathBar/index.js');
-require('./components/CustomizedLabel.js');
-require('./components/RectBar.js');
-require('./components/Tick/index.js');
-require('./components/TooltipContent/index.js');
 
 
 

package/modern/Component.js

@@ -1,36 +1,34 @@
 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 { LinearGradient } from './components/LinearGradient.js';
+import './hooks/usePathBar/utils/getRadius.js';
+import './hooks/usePathBar/index.js';
+import { CustomizedLabel } from './components/CustomizedLabel.js';
+import './icons/Point.js';
+import { Dot } from './components/Dot/index.js';
 import '@alfalab/core-components-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 { 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 './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 './hooks/usePathBar/utils/getRadius.js';
-import './hooks/usePathBar/index.js';
-import { CustomizedLabel } from './components/CustomizedLabel.js';
-import { RectBar } from './components/RectBar.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));
-    };
+    const NewComponent = (props) => React.createElement(Component, { ...props, ...options });
     return NewComponent;
 };
 
-var styles = {"coreChart":"chart__coreChart_1xrvo","bar":"chart__bar_1xrvo","unfocused":"chart__unfocused_1xrvo"};
+var styles = {"coreChart":"chart__coreChart_tioz0","bar":"chart__bar_tioz0","unfocused":"chart__unfocused_tioz0"};
 require('./index.css')
 
 const Chart = (props) => {
@@ -61,11 +59,11 @@ const Chart = (props) => {
         let changed = false;
         if (charts[`${dataKey}`] && filterCount > 1) {
             changed = true;
-            setFilterCount(prev => prev - 1);
+            setFilterCount((prev) => prev - 1);
         }
         if (!charts[`${dataKey}`]) {
             changed = true;
-            setFilterCount(prev => prev + 1);
+            setFilterCount((prev) => prev + 1);
         }
         if (!changed)
             return;
@@ -91,14 +89,14 @@ const Chart = (props) => {
         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: {
+        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]);
     const renderCartesianGrid = useMemo(() => {
         if (!state?.cartesianGrid)
             return null;
-        return React.createElement(CartesianGrid, Object.assign({}, state.cartesianGrid));
+        return React.createElement(CartesianGrid, { ...state.cartesianGrid });
     }, [state]);
     const renderXAxis = useMemo(() => {
         if (!state?.xAxis)
@@ -113,7 +111,7 @@ const Chart = (props) => {
         else {
             tick = true;
         }
-        return React.createElement(XAxis, Object.assign({}, state.xAxis, { tick: tick }));
+        return React.createElement(XAxis, { ...state.xAxis, tick: tick });
     }, [state]);
     const renderYAxis = useMemo(() => {
         if (!state?.yAxis)
@@ -128,17 +126,17 @@ const Chart = (props) => {
         else {
             tick = true;
         }
-        return React.createElement(YAxis, Object.assign({}, state.yAxis, { tick: tick }));
+        return React.createElement(YAxis, { ...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));
+        return React.createElement(Brush, { 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 }) })));
+        return (React.createElement(Tooltip, { ref: tooltipRef, ...state.tooltip, content: CustomizedHOC(TooltipContent, { series: state.series, tooltipArrowSide }) }));
     }, [state, tooltipArrowSide]);
     const renderChartsItems = useMemo(() => {
         if (!state || !charts)
@@ -148,8 +146,8 @@ const Chart = (props) => {
             const show = charts[`${properties.dataKey}`];
             switch (chart) {
                 case 'bar':
-                    return show && !item?.hide ? (React.createElement(Bar, Object.assign({ key: `${state.id}-${properties.dataKey}` }, properties, { shape: React.createElement(RectBar, { radius: radius }) }),
-                        labelList && (React.createElement(LabelList, Object.assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React.createElement(CustomizedLabel, { radius: radius }) }))),
+                    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' &&
@@ -159,7 +157,7 @@ const Chart = (props) => {
                         }))) : 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
+                    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,
@@ -167,11 +165,11 @@ const Chart = (props) => {
                                     ? properties.inheritStroke
                                     : false,
                             })
-                            : false, activeDot: false }))) : null;
+                            : 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
+                    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;
+                            : item.properties.fill, dot: false, activeDot: false })) : null;
                 default:
                     return null;
             }
@@ -229,12 +227,10 @@ const Chart = (props) => {
             });
         }
         if (typeof activeTooltipIndex === 'number' && typeof activeDotsState.prev === 'number') {
-            setActiveDotsState((prev) => {
-                return {
-                    prev: prev.active,
-                    active: activeTooltipIndex,
-                };
-            });
+            setActiveDotsState((prev) => ({
+                prev: prev.active,
+                active: activeTooltipIndex,
+            }));
         }
     };
     const mouseMove = (e) => {
@@ -253,7 +249,7 @@ const Chart = (props) => {
         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(ComposedChart, { ...state?.composeChart, onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data },
                 React.createElement("defs", null, renderGradient),
                 state.cartesianGrid && renderCartesianGrid,
                 state.xAxis && renderXAxis,

package/modern/components/Dot/index.css

@@ -1,19 +1,19 @@
-/* hash: jtc4y */
-.chart__dotUnfocused_11lde {
+/* hash: c2x5b */
+.chart__dotUnfocused_8wcu4 {
     opacity: 0.3;
 }
 
-.chart__dot_11lde,
-.chart__dotItem_11lde,
-.chart__dotWrap_11lde {
+.chart__dot_8wcu4,
+.chart__dotItem_8wcu4,
+.chart__dotWrap_8wcu4 {
     transition: all 0.2s ease;
 }
 
-.chart__dot_11lde {
-    animation: chart__showDot_11lde 0.5s ease;
+.chart__dot_8wcu4 {
+    animation: chart__showDot_8wcu4 0.5s ease;
 }
 
-@keyframes chart__showDot_11lde {
+@keyframes chart__showDot_8wcu4 {
     from {
         opacity: 0;
     }

package/modern/components/Dot/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import { PointIcon } from '../../icons/Point.js';
 
-var styles = {"dotUnfocused":"chart__dotUnfocused_11lde","dot":"chart__dot_11lde","dotItem":"chart__dotItem_11lde","dotWrap":"chart__dotWrap_11lde","showDot":"chart__showDot_11lde"};
+var styles = {"dotUnfocused":"chart__dotUnfocused_8wcu4","dot":"chart__dot_8wcu4","dotItem":"chart__dotItem_8wcu4","dotWrap":"chart__dotWrap_8wcu4","showDot":"chart__showDot_8wcu4"};
 require('./index.css')
 
 const Dot = React.forwardRef(({ cx, cy, index, activeDot, dataKey, dotSettings, value, stroke }, ref) => {
@@ -12,7 +12,7 @@ const Dot = React.forwardRef(({ cx, cy, index, activeDot, dataKey, dotSettings,
     const [option, setOption] = useState(null);
     useEffect(() => {
         let dotSetting = Array.isArray(dotSettings) && dotSettings.length > 0
-            ? dotSettings.find(item => item.media && windowWidth < item.media)
+            ? dotSettings.find((item) => item.media && windowWidth < item.media)
             : dotSettings;
         if (Array.isArray(dotSettings) && dotSettings.length > 0 && !dotSetting) {
             dotSetting = dotSettings[dotSettings.length - 1];

package/modern/components/Legends/index.css

@@ -1,4 +1,4 @@
-/* hash: temd8 */
+/* hash: fqqa1 */
 :root {
 
     /* Hard */
@@ -10,31 +10,31 @@
 :root {
     --gap-2xl: 32px;
 }
-.chart__legendContent_11jmi {
+.chart__legendContent_msguv {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
 }
-.chart__legendWrap_11jmi {
+.chart__legendWrap_msguv {
     width: 100%;
     margin: 0;
     padding: 0;
 }
-.chart__legendItem_11jmi {
+.chart__legendItem_msguv {
     margin-right: var(--gap-2xl);
     cursor: pointer;
     display: inline-block;
 }
-.chart__legendItem_11jmi:last-child {
+.chart__legendItem_msguv:last-child {
     margin-right: 0;
 }
-.chart__legendUnactive_11jmi {
+.chart__legendUnactive_msguv {
     opacity: 0.3;
 }
-.chart__legendIcon_11jmi {
+.chart__legendIcon_msguv {
     margin-right: 13px;
     display: flex;
 }
-.chart__legendValue_11jmi {
+.chart__legendValue_msguv {
     text-transform: capitalize;
 }

package/modern/components/Legends/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import React from 'react';
-import { DataDynamicBooleanProps } from "../../types/utils/data.types";
 import { LegendProps } from "../../types/legend.types";
 import { SeriaProps } from "../../types/seria.types";
+import { DataDynamicBooleanProps } from "../../types/utils/data.types";
 interface Props {
     legend: LegendProps;
     series: SeriaProps[];

package/modern/components/Legends/index.js

@@ -6,7 +6,7 @@ import { CircleLineIcon } from '../../icons/CircleLine.js';
 import { FilledCircleIcon } from '../../icons/FilledCircle.js';
 import { StrokeCircleIcon } from '../../icons/StrokeCircle.js';
 
-var styles = {"legendContent":"chart__legendContent_11jmi","legendWrap":"chart__legendWrap_11jmi","legendItem":"chart__legendItem_11jmi","legendUnactive":"chart__legendUnactive_11jmi","legendIcon":"chart__legendIcon_11jmi","legendValue":"chart__legendValue_11jmi"};
+var styles = {"legendContent":"chart__legendContent_msguv","legendWrap":"chart__legendWrap_msguv","legendItem":"chart__legendItem_msguv","legendUnactive":"chart__legendUnactive_msguv","legendIcon":"chart__legendIcon_msguv","legendValue":"chart__legendValue_msguv"};
 require('./index.css')
 
 const icons = {

package/modern/components/LinearGradient.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 import { LinearGradientProps } from "../types/utils/gradient.types";
-declare const LinearGradient: ({ id, gid, points }: LinearGradientProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+declare const LinearGradient: ({ id, gid, points }: LinearGradientProps) => React.ReactElement;
 export { LinearGradient };

package/modern/components/LinearGradient.js

@@ -1,7 +1,5 @@
 import React from 'react';
 
-const LinearGradient = ({ id, gid, points }) => {
-    return (React.createElement("linearGradient", { key: `${id}-${gid}`, id: `${id}-${gid}`, x1: '0', y1: '0', x2: '0', y2: '1' }, points.map((point, index) => (React.createElement("stop", { key: `${id}${gid}-${index.toString()}`, offset: `${point.offset}%`, stopColor: point.stopColor, stopOpacity: point.stopOpacity })))));
-};
+const LinearGradient = ({ id, gid, points }) => (React.createElement("linearGradient", { key: `${id}-${gid}`, id: `${id}-${gid}`, x1: '0', y1: '0', x2: '0', y2: '1' }, points.map((point, index) => (React.createElement("stop", { key: `${id}${gid}-${index.toString()}`, offset: `${point.offset}%`, stopColor: point.stopColor, stopOpacity: point.stopOpacity })))));
 
 export { LinearGradient };