@alfalab/core-components 20.3.2 → 20.4.0

package/chart/components/Legends/index.js

@@ -0,0 +1,46 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTypography = require('../../../typography');
+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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"legendContent":"chart__legendContent_hkiwp","legendWrap":"chart__legendWrap_hkiwp","legendItem":"chart__legendItem_hkiwp","legendUnactive":"chart__legendUnactive_hkiwp","legendIcon":"chart__legendIcon_hkiwp","legendValue":"chart__legendValue_hkiwp"};
+require('./index.css');
+
+var icons = {
+    circleLine: icons_CircleLine.CircleLineIcon,
+    filledCircle: icons_FilledCircle.FilledCircleIcon,
+    strokeCircle: icons_StrokeCircle.StrokeCircleIcon,
+    circle: icons_Circle.CircleIcon,
+};
+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 === null || legend === void 0 ? void 0 : legend.marginTop) ? legend.marginTop : 0) *
+            (legend.verticalAlign === 'top' ? -1 : 1) + "px)",
+    };
+    return (React__default['default'].createElement("ul", { ref: ref, className: cn__default['default'](styles.legendWrap), style: style }, series.map(function (item) {
+        var _a, _b;
+        if (item.hideLegend || item.hide)
+            return null;
+        var Icon = icons[item.icon] || icons_Circle.CircleIcon;
+        return (React__default['default'].createElement("li", { role: 'presentation', key: id + "-" + item.properties.dataKey, className: cn__default['default'](styles.legendItem, charts["" + item.properties.dataKey] ? '' : styles.legendUnactive), onClick: function () { return toggleChart(item); } },
+            React__default['default'].createElement("div", { className: cn__default['default'](styles.legendContent) },
+                Icon ? (React__default['default'].createElement("i", { className: cn__default['default'](styles.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__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', tag: 'span', className: cn__default['default'](styles.legendValue) }, item.properties.name))));
+    })));
+});
+
+exports.Legends = Legends;

package/chart/components/LinearGradient.d.ts

@@ -0,0 +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, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export { LinearGradient };

package/chart/components/LinearGradient.js

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var LinearGradient = function (_a) {
+    var id = _a.id, gid = _a.gid, points = _a.points;
+    return (React__default['default'].createElement("linearGradient", { key: id + "-" + gid, id: id + "-" + gid, x1: '0', y1: '0', x2: '0', y2: '1' }, points.map(function (point, index) { return (React__default['default'].createElement("stop", { key: "" + id + gid + "-" + index.toString(), offset: point.offset + "%", stopColor: point.stopColor, stopOpacity: point.stopOpacity })); })));
+};
+
+exports.LinearGradient = LinearGradient;

package/chart/components/Tick/index.css

@@ -0,0 +1,27 @@
+/* hash: 11yg1 */
+:root {
+    --color-dark-bg-primary: #0b1f35;
+    --color-light-text-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.chart__tickText_11yg1 {
+    fill: var(--color-light-text-primary);
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+}
+.chart__circle_11yg1 {
+    opacity: 0.3;
+    fill: var(--color-dark-bg-primary);
+}
+.chart__circle_11yg1 {
+    opacity: 0.3;
+    fill: var(--color-dark-bg-primary);
+}

package/chart/components/Tick/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TickProps } from "../../types/utils/tick.types";
+declare const Tick: ({ y, payload, tickFormatter, xAxis }: TickProps) => JSX.Element;
+export { Tick };

package/chart/components/Tick/index.js

@@ -0,0 +1,28 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"tickText":"chart__tickText_11yg1","circle":"chart__circle_11yg1"};
+require('./index.css');
+
+var Tick = function (_a) {
+    var y = _a.y, payload = _a.payload, tickFormatter = _a.tickFormatter, xAxis = _a.xAxis;
+    var radius = 4;
+    var marginTick = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickMargin) &&
+        (xAxis.tickMargin > 0 ? xAxis.tickMargin - radius / 2 : xAxis.tickMargin === 0)
+        ? (radius / 2) * -1
+        : null;
+    return (React__default['default'].createElement("g", { className: cn__default['default'](styles.tick), opacity: '1', textAnchor: 'middle', transform: "translate(" + payload.coordinate + ", " + (y -
+            (typeof marginTick === 'number' ? marginTick : 0) -
+            radius * 2) + ")" },
+        React__default['default'].createElement("text", { className: cn__default['default'](styles.tickText), y: '30' }, tickFormatter ? tickFormatter(payload.value) : payload.value),
+        React__default['default'].createElement("circle", { r: radius, className: cn__default['default'](styles.circle) })));
+};
+
+exports.Tick = Tick;

package/chart/components/TooltipContent/index.css

@@ -0,0 +1,65 @@
+/* hash: jgpwn */
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dbdee1;
+}
+:root {
+    --shadow-l: 0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24);
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-s: 12px;
+    --gap-m: 16px;
+}
+:root {
+    --border-radius-m: 8px;
+}
+.chart__tooltip_jgpwn {
+    background-color: var(--color-light-bg-primary);
+    border: 1px solid var(--color-light-border-primary);
+    box-shadow: var(--shadow-l);
+    border-radius: var(--border-radius-m);
+    padding: var(--gap-s) var(--gap-m);
+    pointer-events: none;
+    position: relative;
+}
+.chart__tooltipList_jgpwn {
+    position: relative;
+    z-index: 5;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+.chart__tooltipItem_jgpwn {
+    margin-bottom: 10px;
+}
+.chart__tooltipArrow_jgpwn {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(1, 1) rotate(45deg);
+    width: 10px;
+    height: 10px;
+    border: 1px solid var(--color-light-border-primary);
+    background-color: var(--color-light-bg-primary);
+}
+.chart__tooltipArrow_jgpwn:before {
+    content: '';
+    position: absolute;
+    left: -2px;
+    top: -2px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 24px 24px 0;
+    border-color: transparent var(--color-light-bg-primary) transparent transparent;
+}
+.chart__tooltipArrowRight_jgpwn {
+    left: 100%;
+    transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
+}

package/chart/components/TooltipContent/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PayloadProps } from "../../types/payload.types";
+import { SeriaProps } from "../../types/seria.types";
+import { TooltipProps } from "../../types/tooltip.types";
+interface TooltipContentProps extends TooltipProps {
+    payload: PayloadProps[];
+    series: SeriaProps[];
+}
+declare const TooltipContent: ({ payload, separator, label, tooltipArrowSide, arrow, series, labelFormatter, labelStyle, }: TooltipContentProps) => JSX.Element | null;
+export { TooltipContentProps, TooltipContent };

package/chart/components/TooltipContent/index.js

@@ -0,0 +1,36 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTypography = require('../../../typography');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"tooltip":"chart__tooltip_jgpwn","tooltipList":"chart__tooltipList_jgpwn","tooltipItem":"chart__tooltipItem_jgpwn","tooltipArrow":"chart__tooltipArrow_jgpwn","tooltipArrowRight":"chart__tooltipArrowRight_jgpwn"};
+require('./index.css');
+
+var TooltipContent = function (_a) {
+    var payload = _a.payload, separator = _a.separator, label = _a.label, tooltipArrowSide = _a.tooltipArrowSide, arrow = _a.arrow, series = _a.series, labelFormatter = _a.labelFormatter, labelStyle = _a.labelStyle;
+    if (!label || payload.length === 0)
+        return null;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.tooltip) },
+        arrow && (React__default['default'].createElement("span", { className: cn__default['default'](styles.tooltipArrow, tooltipArrowSide ? '' : styles.tooltipArrowRight) })),
+        React__default['default'].createElement("ul", { className: cn__default['default'](styles.tooltipList) },
+            React__default['default'].createElement("li", { className: cn__default['default'](styles.tooltipItem), style: labelStyle },
+                React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', tag: 'span', weight: 'medium', className: cn__default['default'](styles.tooltipLabel) }, labelFormatter ? labelFormatter(label) : label)),
+            payload.map(function (entry) {
+                var data = series.find(function (d) { return d.properties.dataKey === entry.dataKey; });
+                if ((data === null || data === void 0 ? void 0 : data.hideTooltip) || (data === null || data === void 0 ? void 0 : data.hide))
+                    return null;
+                return (React__default['default'].createElement("li", { className: cn__default['default'](styles.tooltipItem), key: entry.dataKey, style: { color: entry.color } },
+                    React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', tag: 'span', weight: 'medium', className: cn__default['default'](styles.tooltipValue) },
+                        (entry === null || entry === void 0 ? void 0 : entry.formatter) ? entry.formatter(entry.value) : entry.value,
+                        separator || ' '),
+                    React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'secondary-large', tag: 'span', className: cn__default['default'](styles.tooltipName) }, "" + entry.name)));
+            }))));
+};
+
+exports.TooltipContent = TooltipContent;

package/chart/cssm/Component.d.ts

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

package/chart/cssm/Component.js

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

package/chart/cssm/components/Dot/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { DotProps } from "../../types/utils/dot.types";
+declare const Dot: React.ForwardRefExoticComponent<DotProps & React.RefAttributes<SVGSVGElement>>;
+export { Dot };

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

@@ -0,0 +1,52 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var icons_Point = require('../../icons/Point.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var 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];
+        }
+        setWindowWidth(window.innerWidth);
+        setOption(dotSetting);
+    }, [dotSettings, windowWidth]);
+    React.useEffect(function () {
+        if (!option)
+            return;
+        if (typeof activeDot === 'number' && activeDot === index) {
+            setHeight(option.height * option.scale);
+            setWidth(option.width * option.scale);
+        }
+        else {
+            setHeight(option.height * option.initScale);
+            setWidth(option.width * option.initScale);
+        }
+    }, [activeDot, index, option]);
+    if (!value)
+        return null;
+    return (React__default['default'].createElement("g", { ref: ref, className: cn__default['default'](styles__default['default'].dot), transform: "translate(" + (cx - width / 2) + ", " + (cy - height / 2) + ")" },
+        React__default['default'].createElement("g", { className: cn__default['default'](styles__default['default'].dotWrap), transform: "scale(" + (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 })))));
+});
+
+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.d.ts

@@ -0,0 +1,14 @@
+/// <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";
+interface Props {
+    legend: LegendProps;
+    series: SeriaProps[];
+    id: string;
+    charts: DataDynamicBooleanProps;
+    toggleChart(item: SeriaProps): void;
+}
+declare const Legends: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>>;
+export { Legends };