@alfalab/core-components 45.6.0-beta.2 → 45.6.1

package/chart/cssm/Component.js

@@ -1,110 +1,106 @@
-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 './hooks/usePathBar/index.js';
-import './hooks/usePathBar/utils/getRadius.js';
-import './icons/Point.js';
-import '../../typography/cssm';
-import './icons/Circle.js';
-import './icons/CircleLine.js';
-import './icons/FilledCircle.js';
-import './icons/StrokeCircle.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';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const CustomizedHOC = (Component, options) => {
-    const NewComponent = (props) => React.createElement(Component, { ...props, ...options });
+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)); };
     return NewComponent;
 };
 
-const styles = {"coreChart":"coreChart","bar":"bar","unfocused":"unfocused"};
-require('./index.css');
-
-/* 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({
+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,
-    });
-    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(() => {
+    }), 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((item) => {
-            const { chart, gradient } = item;
+        return state.series.map(function (item) {
+            var chart = item.chart, gradient = item.gradient;
             if (chart !== 'gradient' || !gradient)
                 return null;
-            const { gid, points } = gradient;
-            return (React.createElement(LinearGradient, { key: `${state.id}-${gid}`, id: state.id, gid: gid, points: points }));
+            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 }));
         });
     }, [state]);
-    const toggleChart = useCallback((item) => {
-        const { chart, properties: { dataKey }, } = item;
-        const withGrad = chart === 'area';
-        let changed = false;
+    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((prev) => prev - 1);
+            setFilterCount(function (prev) { return prev - 1; });
         }
         if (!charts[dataKey + '']) {
             changed = true;
-            setFilterCount((prev) => prev + 1);
+            setFilterCount(function (prev) { return prev + 1; });
         }
         if (!changed)
             return;
-        setCharts((prev) => {
-            const newState = { ...prev };
+        setCharts(function (prev) {
+            var newState = tslib.__assign({}, prev);
             newState[dataKey + ''] = !newState[dataKey + ''];
             if (withGrad)
                 newState[dataKey + '-gradient'] = !newState[dataKey + '-gradient'];
             return newState;
         });
     }, [charts, filterCount, setCharts, setFilterCount]);
-    const legendRef = useCallback((node) => {
+    var legendRef = React.useCallback(function (node) {
         if (node !== null) {
-            setTimeout(() => {
-                const { height } = node.getBoundingClientRect();
+            setTimeout(function () {
+                var height = node.getBoundingClientRect().height;
                 setHeightLegend(height);
             }, 0);
         }
     }, []);
-    const renderLegend = useMemo(() => {
-        if (!state?.legend)
+    var renderLegend = React.useMemo(function () {
+        var _a, _b, _c;
+        if (!(state === null || state === void 0 ? void 0 : state.legend))
             return null;
-        const translate = state?.xAxis?.tickMargin && state?.legend?.verticalAlign !== 'top'
-            ? state.xAxis.tickMargin + (state?.brush?.brushMargin || 0)
+        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.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)`,
-            } }));
+        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)"),
+            } })));
     }, [state, charts, toggleChart, legendRef]);
-    const renderCartesianGrid = useMemo(() => {
-        if (!state?.cartesianGrid)
+    var renderCartesianGrid = React.useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.cartesianGrid))
             return null;
-        return React.createElement(CartesianGrid, { ...state.cartesianGrid });
+        return React__default.default.createElement(recharts.CartesianGrid, tslib.__assign({}, state.cartesianGrid));
     }, [state]);
-    const renderXAxis = useMemo(() => {
-        if (!state?.xAxis)
+    var renderXAxis = React.useMemo(function () {
+        var _a;
+        if (!(state === null || state === void 0 ? void 0 : state.xAxis))
             return null;
-        let tick;
-        if (state?.xAxis?.tickType === 'point') {
-            tick = CustomizedHOC(Tick, { xAxis: state.xAxis });
+        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;
@@ -112,14 +108,15 @@ const Chart = (props) => {
         else {
             tick = true;
         }
-        return React.createElement(XAxis, { ...state.xAxis, tick: tick });
+        return React__default.default.createElement(recharts.XAxis, tslib.__assign({}, state.xAxis, { tick: tick }));
     }, [state]);
-    const renderYAxis = useMemo(() => {
-        if (!state?.yAxis)
+    var renderYAxis = React.useMemo(function () {
+        var _a;
+        if (!(state === null || state === void 0 ? void 0 : state.yAxis))
             return null;
-        let tick;
-        if (state?.yAxis?.tick) {
-            tick = CustomizedHOC(state.yAxis.tick, { state });
+        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;
@@ -127,73 +124,74 @@ const Chart = (props) => {
         else {
             tick = true;
         }
-        return React.createElement(YAxis, { ...state.yAxis, tick: tick });
+        return React__default.default.createElement(recharts.YAxis, tslib.__assign({}, state.yAxis, { tick: tick }));
     }, [state]);
-    const renderBrush = useMemo(() => {
-        if (!state?.brush)
+    var renderBrush = React.useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.brush))
             return null;
-        return React.createElement(Brush, { y: typeof yBrush === 'number' ? yBrush : 0, ...state.brush });
+        return React__default.default.createElement(recharts.Brush, tslib.__assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
     }, [state, yBrush]);
-    const renderTooltip = useMemo(() => {
-        if (!state?.tooltip)
+    var renderTooltip = React.useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
             return null;
-        return (React.createElement(Tooltip, { ref: tooltipRef, ...state.tooltip, content: CustomizedHOC(TooltipContent, { series: state.series, tooltipArrowSide }) }));
+        return (React__default.default.createElement(recharts.Tooltip, tslib.__assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(components_TooltipContent_index.TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
     }, [state, tooltipArrowSide]);
-    const renderChartsItems = useMemo(() => {
+    var renderChartsItems = React.useMemo(function () {
         if (!state || !charts)
             return null;
-        return state.series.map((item) => {
-            const { chart, properties, radius, labelList } = item;
-            const show = charts[`${properties.dataKey}`];
+        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)];
             switch (chart) {
                 case 'bar':
-                    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' &&
+                    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' &&
                                     activeDotsState.active !== index
-                                    ? styles.unfocused
+                                    ? styles__default.default.unfocused
                                     : '') }));
                         }))) : null;
                 case 'area':
                 case 'line':
-                    return show && !item?.hide ? (React.createElement(Line, { key: `${state.id}-${properties.dataKey}`, ...properties, dot: properties.dot && properties.dotSettings
-                            ? CustomizedHOC(Dot, {
+                    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, {
                                 activeDot: activeDotsState.active,
                                 dotSettings: properties.dotSettings,
-                                inherit: properties?.inheritStroke
+                                inherit: (properties === null || properties === void 0 ? void 0 : properties.inheritStroke)
                                     ? properties.inheritStroke
                                     : false,
                             })
-                            : false, activeDot: false })) : null;
+                            : false, activeDot: false }))) : null;
                 case 'gradient':
-                    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;
+                    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;
                 default:
                     return null;
             }
         });
     }, [charts, state, activeDotsState, data]);
     // Позиционирование brush
-    useEffect(() => {
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!state || !state.brush)
             return;
         if (!heightLegend || heightLegend === 0)
             return;
-        const align = state?.legend?.verticalAlign;
-        const legendHeight = align === 'top' ? 0 : heightLegend;
-        const marginTick = state?.xAxis?.tickMargin ? state?.xAxis?.tickMargin : 0;
-        const brushY = (svgRef.current?.clientHeight ? svgRef.current.clientHeight : 0) -
+        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 -
-            (state?.composeChart?.margin?.bottom ? state.composeChart.margin.bottom : 0) +
+            (((_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 +
-            (state.brush?.brushMargin ? state.brush.brushMargin : 0);
+            (((_g = state.brush) === null || _g === void 0 ? void 0 : _g.brushMargin) ? state.brush.brushMargin : 0);
         setYBrush(brushY);
     }, [heightLegend, state]);
-    const leaveEvent = (isTooltipActive) => {
+    var leaveEvent = function (isTooltipActive) {
         if (isTooltipActive)
             return;
         if (typeof activeDotsState.prev !== 'number' || typeof activeDotsState.active !== 'number')
@@ -203,19 +201,20 @@ const Chart = (props) => {
             active: null,
         });
     };
-    const arrowTooltipEvent = (activeCoordinate) => {
-        if (!state?.tooltip?.arrow)
+    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 (state?.tooltip?.arrow && activeCoordinate?.x) {
-            const side = (svgRef?.current?.clientWidth || 0) -
-                (state?.composeChart?.margin?.right || 0) -
+        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 -
-                (tooltipRef.current?.state?.boxWidth || 0) >
+                (((_g = (_f = tooltipRef.current) === null || _f === void 0 ? void 0 : _f.state) === null || _g === void 0 ? void 0 : _g.boxWidth) || 0) >
                 20;
             setTooltipArrowSide(side);
         }
     };
-    const hoverEvent = (isTooltipActive, activeTooltipIndex) => {
+    var hoverEvent = function (isTooltipActive, activeTooltipIndex) {
         if (!isTooltipActive)
             return;
         if (typeof activeDotsState.active === 'number' &&
@@ -228,30 +227,30 @@ const Chart = (props) => {
             });
         }
         if (typeof activeTooltipIndex === 'number' && typeof activeDotsState.prev === 'number') {
-            setActiveDotsState((prev) => ({
+            setActiveDotsState(function (prev) { return ({
                 prev: prev.active,
                 active: activeTooltipIndex,
-            }));
+            }); });
         }
     };
-    const mouseMove = (e) => {
-        if (!state?.tooltip)
+    var mouseMove = function (e) {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
             return;
         arrowTooltipEvent(e.activeCoordinate);
         hoverEvent(e.isTooltipActive, e.activeTooltipIndex);
         leaveEvent(e.isTooltipActive);
     };
-    const mouseLeave = (e) => {
-        if (!state?.tooltip)
+    var mouseLeave = function (e) {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
             return;
         leaveEvent(e.isTooltipActive);
     };
     if (!data || !charts || !state)
         return null;
-    return (React.createElement("div", { className: styles.coreChart, ref: svgRef, id: state?.id || '', style: { width: '100%', height: '100%' } },
-        React.createElement(ResponsiveContainer, { debounce: state?.responsiveContainer?.debounce ? state.responsiveContainer.debounce : 0, width: '100%' },
-            React.createElement(ComposedChart, { ...state?.composeChart, onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data },
-                React.createElement("defs", null, renderGradient),
+    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),
                 state.cartesianGrid && renderCartesianGrid,
                 state.xAxis && renderXAxis,
                 state.yAxis && renderYAxis,
@@ -261,4 +260,4 @@ const Chart = (props) => {
                 state.legend && renderLegend))));
 };
 
-export { Chart };
+exports.Chart = Chart;

package/chart/cssm/components/CustomizedLabel.js

@@ -1,12 +1,18 @@
-import React from 'react';
-import { usePathBar } from '../hooks/usePathBar/index.js';
-import '../hooks/usePathBar/utils/getRadius.js';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hooks_usePathBar_index = require('../hooks/usePathBar/index.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const CustomizedLabel = ({ x, y, value, offset, radius, height, width, formatter, }) => {
-    const [initHeight] = usePathBar({ radius, height });
-    return (React.createElement("text", { x: x + width / 2, y: y + height - (initHeight + offset), width: width, height: initHeight, textAnchor: 'middle' },
-        React.createElement("tspan", { x: x + width / 2 }, formatter ? formatter(value) : value)));
+var CustomizedLabel = function (_a) {
+    var x = _a.x, y = _a.y, value = _a.value, offset = _a.offset, radius = _a.radius, height = _a.height, width = _a.width, formatter = _a.formatter;
+    var initHeight = hooks_usePathBar_index.usePathBar({ radius: radius, height: height })[0];
+    return (React__default.default.createElement("text", { x: x + width / 2, y: y + height - (initHeight + offset), width: width, height: initHeight, textAnchor: 'middle' },
+        React__default.default.createElement("tspan", { x: x + width / 2 }, formatter ? formatter(value) : value)));
 };
 
-export { CustomizedLabel };
+exports.CustomizedLabel = CustomizedLabel;

package/chart/cssm/components/Dot/index.js

@@ -1,18 +1,25 @@
-import React, { useState, useEffect } from 'react';
-import cn from 'classnames';
-import { PointIcon } from '../../icons/Point.js';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"dotUnfocused":"dotUnfocused","dot":"dot","dotItem":"dotItem","dotWrap":"dotWrap","showDot":"showDot"};
-require('./index.css');
+var React = require('react');
+var cn = require('classnames');
+var icons_Point = require('../../icons/Point.js');
+var styles = require('./index.module.css');
 
-const Dot = React.forwardRef(({ cx, cy, index, activeDot, dataKey, dotSettings, value, stroke }, ref) => {
-    const [windowWidth, setWindowWidth] = useState(0);
-    const [height, setHeight] = useState(0);
-    const [width, setWidth] = useState(0);
-    const [option, setOption] = useState(null);
-    useEffect(() => {
-        let dotSetting = Array.isArray(dotSettings) && dotSettings.length > 0
-            ? dotSettings.find((item) => item.media && windowWidth < item.media)
+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 Dot = React__default.default.forwardRef(function (_a, ref) {
+    var cx = _a.cx, cy = _a.cy, index = _a.index, activeDot = _a.activeDot, dataKey = _a.dataKey, dotSettings = _a.dotSettings, value = _a.value, stroke = _a.stroke;
+    var _b = React.useState(0), windowWidth = _b[0], setWindowWidth = _b[1];
+    var _c = React.useState(0), height = _c[0], setHeight = _c[1];
+    var _d = React.useState(0), width = _d[0], setWidth = _d[1];
+    var _e = React.useState(null), option = _e[0], setOption = _e[1];
+    React.useEffect(function () {
+        var dotSetting = Array.isArray(dotSettings) && dotSettings.length > 0
+            ? dotSettings.find(function (item) { return item.media && windowWidth < item.media; })
             : dotSettings;
         if (Array.isArray(dotSettings) && dotSettings.length > 0 && !dotSetting) {
             dotSetting = dotSettings[dotSettings.length - 1];
@@ -20,7 +27,7 @@ const Dot = React.forwardRef(({ cx, cy, index, activeDot, dataKey, dotSettings,
         setWindowWidth(window.innerWidth);
         setOption(dotSetting);
     }, [dotSettings, windowWidth]);
-    useEffect(() => {
+    React.useEffect(function () {
         if (!option)
             return;
         if (typeof activeDot === 'number' && activeDot === index) {
@@ -34,12 +41,12 @@ const Dot = React.forwardRef(({ cx, cy, index, activeDot, dataKey, dotSettings,
     }, [activeDot, index, option]);
     if (!value)
         return null;
-    return (React.createElement("g", { ref: ref, className: cn(styles.dot), transform: `translate(${cx - width / 2}, ${cy - height / 2})` },
-        React.createElement("g", { className: cn(styles.dotWrap), transform: `scale(${activeDot === index ? option?.scale || 0 : option?.initScale || 0})` },
-            React.createElement("svg", { className: cn(styles.dotItem, activeDot === index ? styles.dotActive : '', typeof activeDot === 'number' && activeDot !== index
-                    ? styles.dotUnfocused
-                    : ''), "data-id": index, "data-name": dataKey, width: option?.width || 0, height: option?.height || 0 },
-                React.createElement(PointIcon, { fill: stroke })))));
+    return (React__default.default.createElement("g", { ref: ref, className: cn__default.default(styles__default.default.dot), transform: "translate(".concat(cx - width / 2, ", ").concat(cy - height / 2, ")") },
+        React__default.default.createElement("g", { className: cn__default.default(styles__default.default.dotWrap), transform: "scale(".concat(activeDot === index ? (option === null || option === void 0 ? void 0 : option.scale) || 0 : (option === null || option === void 0 ? void 0 : option.initScale) || 0, ")") },
+            React__default.default.createElement("svg", { className: cn__default.default(styles__default.default.dotItem, activeDot === index ? styles__default.default.dotActive : '', typeof activeDot === 'number' && activeDot !== index
+                    ? styles__default.default.dotUnfocused
+                    : ''), "data-id": index, "data-name": dataKey, width: (option === null || option === void 0 ? void 0 : option.width) || 0, height: (option === null || option === void 0 ? void 0 : option.height) || 0 },
+                React__default.default.createElement(icons_Point.PointIcon, { fill: stroke })))));
 });
 
-export { Dot };
+exports.Dot = Dot;

package/chart/cssm/components/Dot/index.module.css

@@ -0,0 +1,22 @@
+.dotUnfocused {
+    opacity: 0.3;
+}
+
+.dot,
+.dotItem,
+.dotWrap {
+    transition: all 0.2s ease;
+}
+
+.dot {
+    animation: showDot 0.5s ease;
+}
+
+@keyframes showDot {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

package/chart/cssm/components/Legends/index.js

@@ -1,38 +1,46 @@
-import React from 'react';
-import cn from 'classnames';
-import { Typography } from '../../../../typography/cssm';
-import { CircleIcon } from '../../icons/Circle.js';
-import { CircleLineIcon } from '../../icons/CircleLine.js';
-import { FilledCircleIcon } from '../../icons/FilledCircle.js';
-import { StrokeCircleIcon } from '../../icons/StrokeCircle.js';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"legendContent":"legendContent","legendWrap":"legendWrap","legendItem":"legendItem","legendUnactive":"legendUnactive","legendIcon":"legendIcon","legendValue":"legendValue"};
-require('./index.css');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTypography = require('../../../../typography/cssm');
+var icons_Circle = require('../../icons/Circle.js');
+var icons_CircleLine = require('../../icons/CircleLine.js');
+var icons_FilledCircle = require('../../icons/FilledCircle.js');
+var icons_StrokeCircle = require('../../icons/StrokeCircle.js');
+var styles = require('./index.module.css');
 
-const icons = {
-    circleLine: CircleLineIcon,
-    filledCircle: FilledCircleIcon,
-    strokeCircle: StrokeCircleIcon,
-    circle: CircleIcon,
+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 icons = {
+    circleLine: icons_CircleLine.CircleLineIcon,
+    filledCircle: icons_FilledCircle.FilledCircleIcon,
+    strokeCircle: icons_StrokeCircle.StrokeCircleIcon,
+    circle: icons_Circle.CircleIcon,
 };
-const Legends = React.forwardRef(({ legend, series, id, charts, toggleChart }, ref) => {
-    const style = {
+var Legends = React__default.default.forwardRef(function (_a, ref) {
+    var legend = _a.legend, series = _a.series, id = _a.id, charts = _a.charts, toggleChart = _a.toggleChart;
+    var style = {
         textAlign: legend.align || 'center',
-        transform: `translateY(${(legend?.marginTop ? legend.marginTop : 0) *
-            (legend.verticalAlign === 'top' ? -1 : 1)}px)`,
+        transform: "translateY(".concat(((legend === null || legend === void 0 ? void 0 : legend.marginTop) ? legend.marginTop : 0) *
+            (legend.verticalAlign === 'top' ? -1 : 1), "px)"),
     };
-    return (React.createElement("ul", { ref: ref, className: cn(styles.legendWrap), style: style }, series.map((item) => {
+    return (React__default.default.createElement("ul", { ref: ref, className: cn__default.default(styles__default.default.legendWrap), style: style }, series.map(function (item) {
+        var _a, _b;
         if (item.hideLegend || item.hide)
             return null;
-        const Icon = icons[item.icon] || CircleIcon;
-        return (React.createElement("li", { role: 'presentation', key: `${id}-${item.properties.dataKey}`, className: cn(styles.legendItem, charts[`${item.properties.dataKey}`] ? '' : styles.legendUnactive), onClick: () => toggleChart(item) },
-            React.createElement("div", { className: cn(styles.legendContent) },
-                Icon ? (React.createElement("i", { className: cn(styles.legendIcon) },
-                    React.createElement(Icon, { fill: item.properties?.fill ||
-                            item.properties?.stroke ||
+        var Icon = icons[item.icon] || icons_Circle.CircleIcon;
+        return (React__default.default.createElement("li", { role: 'presentation', key: "".concat(id, "-").concat(item.properties.dataKey), className: cn__default.default(styles__default.default.legendItem, charts["".concat(item.properties.dataKey)] ? '' : styles__default.default.legendUnactive), onClick: function () { return toggleChart(item); } },
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.legendContent) },
+                Icon ? (React__default.default.createElement("i", { className: cn__default.default(styles__default.default.legendIcon) },
+                    React__default.default.createElement(Icon, { fill: ((_a = item.properties) === null || _a === void 0 ? void 0 : _a.fill) ||
+                            ((_b = item.properties) === null || _b === void 0 ? void 0 : _b.stroke) ||
                             '', height: legend.iconHeight || 16 }))) : null,
-                React.createElement(Typography.Text, { view: 'primary-medium', tag: 'span', className: cn(styles.legendValue) }, item.properties.name))));
+                React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', tag: 'span', className: cn__default.default(styles__default.default.legendValue) }, item.properties.name))));
     })));
 });
 
-export { Legends };
+exports.Legends = Legends;