@alfalab/core-components-chart 3.3.3 → 3.4.0

package/modern/components/Dot/index.css

@@ -1,19 +1,19 @@
-/* hash: 12gij */
-.chart__dotUnfocused_11akp {
+/* hash: 1c6qr */
+.chart__dotUnfocused_12174 {
     opacity: 0.3;
 }
 
-.chart__dot_11akp,
-.chart__dotItem_11akp,
-.chart__dotWrap_11akp {
+.chart__dot_12174,
+.chart__dotItem_12174,
+.chart__dotWrap_12174 {
     transition: all 0.2s ease;
 }
 
-.chart__dot_11akp {
-    animation: chart__showDot_11akp 0.5s ease;
+.chart__dot_12174 {
+    animation: chart__showDot_12174 0.5s ease;
 }
 
-@keyframes chart__showDot_11akp {
+@keyframes chart__showDot_12174 {
     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';
 
-const styles = {"dotUnfocused":"chart__dotUnfocused_11akp","dot":"chart__dot_11akp","dotItem":"chart__dotItem_11akp","dotWrap":"chart__dotWrap_11akp","showDot":"chart__showDot_11akp"};
+const styles = {"dotUnfocused":"chart__dotUnfocused_12174","dot":"chart__dot_12174","dotItem":"chart__dotItem_12174","dotWrap":"chart__dotWrap_12174","showDot":"chart__showDot_12174"};
 require('./index.css')
 
 const Dot = React.forwardRef(({ cx, cy, index, activeDot, dataKey, dotSettings, value, stroke }, ref) => {

package/modern/components/Legends/index.css

@@ -1,4 +1,4 @@
-/* hash: bxz59 */
+/* hash: 1fujw */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -20,25 +20,25 @@
     --gap-32: var(--gap-2xl);
 } :root {
 } :root {
-} .chart__legendContent_1j6e2 {
+} .chart__legendContent_xbr7n {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-} .chart__legendWrap_1j6e2 {
+} .chart__legendWrap_xbr7n {
     width: 100%;
     margin: 0;
     padding: 0;
-} .chart__legendItem_1j6e2 {
+} .chart__legendItem_xbr7n {
     margin-right: var(--gap-32);
     cursor: pointer;
     display: inline-block;
-} .chart__legendItem_1j6e2:last-child {
+} .chart__legendItem_xbr7n:last-child {
     margin-right: 0;
-} .chart__legendUnactive_1j6e2 {
+} .chart__legendUnactive_xbr7n {
     opacity: 0.3;
-} .chart__legendIcon_1j6e2 {
+} .chart__legendIcon_xbr7n {
     margin-right: 13px;
     display: flex;
-} .chart__legendValue_1j6e2 {
+} .chart__legendValue_xbr7n {
     text-transform: capitalize;
 }

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';
 
-const styles = {"legendContent":"chart__legendContent_1j6e2","legendWrap":"chart__legendWrap_1j6e2","legendItem":"chart__legendItem_1j6e2","legendUnactive":"chart__legendUnactive_1j6e2","legendIcon":"chart__legendIcon_1j6e2","legendValue":"chart__legendValue_1j6e2"};
+const styles = {"legendContent":"chart__legendContent_xbr7n","legendWrap":"chart__legendWrap_xbr7n","legendItem":"chart__legendItem_xbr7n","legendUnactive":"chart__legendUnactive_xbr7n","legendIcon":"chart__legendIcon_xbr7n","legendValue":"chart__legendValue_xbr7n"};
 require('./index.css')
 
 const icons = {

package/modern/components/Tick/index.css

@@ -1,4 +1,4 @@
-/* hash: 174f7 */
+/* hash: 1nd7k */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-dark-base-bg-primary: #121213;
@@ -20,15 +20,15 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .chart__tickText_pf9mz {
+} .chart__tickText_ngpn7 {
     fill: var(--color-light-text-primary);
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-} .chart__circle_pf9mz {
+} .chart__circle_ngpn7 {
     opacity: 0.3;
     fill: var(--color-dark-base-bg-primary);
-} .chart__circle_pf9mz {
+} .chart__circle_ngpn7 {
     opacity: 0.3;
     fill: var(--color-dark-base-bg-primary);
 }

package/modern/components/Tick/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"tickText":"chart__tickText_pf9mz","circle":"chart__circle_pf9mz"};
+const styles = {"tickText":"chart__tickText_ngpn7","circle":"chart__circle_ngpn7"};
 require('./index.css')
 
 const Tick = ({ y, payload, tickFormatter, xAxis }) => {

package/modern/components/TooltipContent/index.css

@@ -1,4 +1,4 @@
-/* hash: 4kx7t */
+/* hash: 1nd8w */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-base-bg-primary: #fff;
@@ -27,7 +27,7 @@
     --gap-16: var(--gap-m);
 } :root {
 } :root {
-} .chart__tooltip_1pwl1 {
+} .chart__tooltip_5yeac {
     background-color: var(--color-light-base-bg-primary);
     border: 1px solid var(--color-light-neutral-400);
     box-shadow: var(--shadow-l);
@@ -35,15 +35,15 @@
     padding: var(--gap-12) var(--gap-16);
     pointer-events: none;
     position: relative;
-} .chart__tooltipList_1pwl1 {
+} .chart__tooltipList_5yeac {
     position: relative;
     z-index: 5;
     list-style-type: none;
     padding: 0;
     margin: 0;
-} .chart__tooltipItem_1pwl1 {
+} .chart__tooltipItem_5yeac {
     margin-bottom: 10px;
-} .chart__tooltipArrow_1pwl1 {
+} .chart__tooltipArrow_5yeac {
     position: absolute;
     left: 0;
     top: 50%;
@@ -52,7 +52,7 @@
     height: 10px;
     border: 1px solid var(--color-light-neutral-400);
     background-color: var(--color-light-base-bg-primary);
-} .chart__tooltipArrow_1pwl1:before {
+} .chart__tooltipArrow_5yeac:before {
     content: '';
     position: absolute;
     left: -2px;
@@ -62,7 +62,7 @@
     border-style: solid;
     border-width: 0 24px 24px 0;
     border-color: transparent var(--color-light-base-bg-primary) transparent transparent;
-} .chart__tooltipArrowRight_1pwl1 {
+} .chart__tooltipArrowRight_5yeac {
     left: 100%;
     transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
 }

package/modern/components/TooltipContent/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '@alfalab/core-components-typography/modern';
 
-const styles = {"tooltip":"chart__tooltip_1pwl1","tooltipList":"chart__tooltipList_1pwl1","tooltipItem":"chart__tooltipItem_1pwl1","tooltipArrow":"chart__tooltipArrow_1pwl1","tooltipArrowRight":"chart__tooltipArrowRight_1pwl1"};
+const styles = {"tooltip":"chart__tooltip_5yeac","tooltipList":"chart__tooltipList_5yeac","tooltipItem":"chart__tooltipItem_5yeac","tooltipArrow":"chart__tooltipArrow_5yeac","tooltipArrowRight":"chart__tooltipArrowRight_5yeac"};
 require('./index.css')
 
 const TooltipContent = ({ payload, separator, label, tooltipArrowSide, arrow, series, labelFormatter, labelStyle, }) => {

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1v42f */
+/* hash: zzj4b */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -19,14 +19,14 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .chart__coreChart_qrhfb .recharts-line path {
+} .chart__coreChart_1ubx3 .recharts-line path {
         transition: d 0.2s ease-out;
-    } .chart__coreChart_qrhfb .recharts-text tspan {
+    } .chart__coreChart_1ubx3 .recharts-text tspan {
         fill: var(--color-light-text-primary);
         font-size: 16px;
         line-height: 22px;
-    } .chart__bar_qrhfb {
+    } .chart__bar_1ubx3 {
     transition: opacity 0.2s ease-out, d 0.2s ease-out;
-} .chart__unfocused_qrhfb {
+} .chart__unfocused_1ubx3 {
     opacity: 0.3;
 }

package/moderncssm/Component.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+import { OptionsProps } from "./types/index";
+declare const Chart: {
+    (props: OptionsProps): React.JSX.Element | null;
+    displayName: string;
+};
+export { Chart };

package/moderncssm/Component.js

@@ -0,0 +1,251 @@
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { ResponsiveContainer, Legend, CartesianGrid, XAxis, YAxis, Brush, Tooltip, Area, Line, Bar, LabelList, Cell, ComposedChart } from 'recharts';
+import { CustomizedLabel } from './components/CustomizedLabel.js';
+import { Dot } from './components/Dot/index.js';
+import { Legends } from './components/Legends/index.js';
+import { LinearGradient } from './components/LinearGradient.js';
+import { RectBar } from './components/RectBar.js';
+import { Tick } from './components/Tick/index.js';
+import { TooltipContent } from './components/TooltipContent/index.js';
+import { useSettings } from './hooks/useSettings/index.js';
+import styles from './index.module.css';
+
+const CustomizedHOC = (Component, options) => {
+    const NewComponent = (props) => React.createElement(Component, { ...props, ...options });
+    return NewComponent;
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any,prefer-template */
+const Chart = (props) => {
+    const [{ state, data, charts, filterCount }, { setCharts, setFilterCount }] = useSettings(props);
+    const [activeDotsState, setActiveDotsState] = useState({
+        prev: null,
+        active: null,
+    });
+    const [yBrush, setYBrush] = useState(null);
+    const [tooltipArrowSide, setTooltipArrowSide] = useState(null);
+    const [heightLegend, setHeightLegend] = useState(0);
+    const svgRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const renderGradient = useMemo(() => {
+        if (!state)
+            return null;
+        return state.series.map((item) => {
+            const { chart, gradient } = item;
+            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 }));
+        });
+    }, [state]);
+    const toggleChart = useCallback((item) => {
+        const { chart, properties: { dataKey }, } = item;
+        const withGrad = chart === 'area';
+        let changed = false;
+        if (charts[dataKey + ''] && filterCount > 1) {
+            changed = true;
+            setFilterCount((prev) => prev - 1);
+        }
+        if (!charts[dataKey + '']) {
+            changed = true;
+            setFilterCount((prev) => prev + 1);
+        }
+        if (!changed)
+            return;
+        setCharts((prev) => {
+            const newState = { ...prev };
+            newState[dataKey + ''] = !newState[dataKey + ''];
+            if (withGrad)
+                newState[dataKey + '-gradient'] = !newState[dataKey + '-gradient'];
+            return newState;
+        });
+    }, [charts, filterCount, setCharts, setFilterCount]);
+    const legendRef = useCallback((node) => {
+        if (node !== null) {
+            setTimeout(() => {
+                const { height } = node.getBoundingClientRect();
+                setHeightLegend(height);
+            }, 0);
+        }
+    }, []);
+    const renderLegend = useMemo(() => {
+        if (!state?.legend)
+            return null;
+        const translate = state?.xAxis?.tickMargin && state?.legend?.verticalAlign !== 'top'
+            ? state.xAxis.tickMargin + (state?.brush?.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)`,
+            } }));
+    }, [state, charts, toggleChart, legendRef]);
+    const renderCartesianGrid = useMemo(() => {
+        if (!state?.cartesianGrid)
+            return null;
+        return React.createElement(CartesianGrid, { ...state.cartesianGrid });
+    }, [state]);
+    const renderXAxis = useMemo(() => {
+        if (!state?.xAxis)
+            return null;
+        let tick;
+        if (state?.xAxis?.tickType === 'point') {
+            tick = CustomizedHOC(Tick, { xAxis: state.xAxis });
+        }
+        else if (typeof state.xAxis.tick === 'boolean') {
+            tick = state.xAxis.tick;
+        }
+        else {
+            tick = true;
+        }
+        return React.createElement(XAxis, { ...state.xAxis, tick: tick });
+    }, [state]);
+    const renderYAxis = useMemo(() => {
+        if (!state?.yAxis)
+            return null;
+        let tick;
+        if (state?.yAxis?.tick) {
+            tick = CustomizedHOC(state.yAxis.tick, { state });
+        }
+        else if (typeof state.yAxis.tick === 'boolean') {
+            tick = state.yAxis.tick;
+        }
+        else {
+            tick = true;
+        }
+        return React.createElement(YAxis, { ...state.yAxis, tick: tick });
+    }, [state]);
+    const renderBrush = useMemo(() => {
+        if (!state?.brush)
+            return null;
+        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, { ref: tooltipRef, ...state.tooltip, content: CustomizedHOC(TooltipContent, { series: state.series, tooltipArrowSide }) }));
+    }, [state, tooltipArrowSide]);
+    const renderChartsItems = useMemo(() => {
+        if (!state || !charts)
+            return null;
+        return state.series.map((item) => {
+            const { chart, properties, radius, labelList } = item;
+            const show = charts[`${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' &&
+                                    activeDotsState.active !== index
+                                    ? styles.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, {
+                                activeDot: activeDotsState.active,
+                                dotSettings: properties.dotSettings,
+                                inherit: properties?.inheritStroke
+                                    ? properties.inheritStroke
+                                    : false,
+                            })
+                            : 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;
+                default:
+                    return null;
+            }
+        });
+    }, [charts, state, activeDotsState, data]);
+    // Позиционирование brush
+    useEffect(() => {
+        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) -
+            legendHeight -
+            state.brush.height -
+            (state?.composeChart?.margin?.bottom ? state.composeChart.margin.bottom : 0) +
+            marginTick +
+            (state.brush?.brushMargin ? state.brush.brushMargin : 0);
+        setYBrush(brushY);
+    }, [heightLegend, state]);
+    const leaveEvent = (isTooltipActive) => {
+        if (isTooltipActive)
+            return;
+        if (typeof activeDotsState.prev !== 'number' || typeof activeDotsState.active !== 'number')
+            return;
+        setActiveDotsState({
+            prev: null,
+            active: null,
+        });
+    };
+    const arrowTooltipEvent = (activeCoordinate) => {
+        if (!state?.tooltip?.arrow)
+            return;
+        if (state?.tooltip?.arrow && activeCoordinate?.x) {
+            const side = (svgRef?.current?.clientWidth || 0) -
+                (state?.composeChart?.margin?.right || 0) -
+                activeCoordinate.x -
+                (tooltipRef.current?.state?.boxWidth || 0) >
+                20;
+            setTooltipArrowSide(side);
+        }
+    };
+    const hoverEvent = (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((prev) => ({
+                prev: prev.active,
+                active: activeTooltipIndex,
+            }));
+        }
+    };
+    const mouseMove = (e) => {
+        if (!state?.tooltip)
+            return;
+        arrowTooltipEvent(e.activeCoordinate);
+        hoverEvent(e.isTooltipActive, e.activeTooltipIndex);
+        leaveEvent(e.isTooltipActive);
+    };
+    const mouseLeave = (e) => {
+        if (!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),
+                state.cartesianGrid && renderCartesianGrid,
+                state.xAxis && renderXAxis,
+                state.yAxis && renderYAxis,
+                renderChartsItems,
+                state.tooltip && renderTooltip,
+                state.brush && renderBrush,
+                state.legend && renderLegend))));
+};
+Chart.displayName = 'Chart';
+ResponsiveContainer.displayName = 'ResponsiveContainer';
+
+export { Chart };

package/moderncssm/components/CustomizedLabel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const CustomizedLabel: React.FC<any>;
+export { CustomizedLabel };

package/moderncssm/components/CustomizedLabel.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { usePathBar } from '../hooks/usePathBar/index.js';
+
+/* 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)));
+};
+
+export { CustomizedLabel };

package/moderncssm/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/moderncssm/components/Dot/index.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import cn from 'classnames';
+import { PointIcon } from '../../icons/Point.js';
+import styles from './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)
+            : dotSettings;
+        if (Array.isArray(dotSettings) && dotSettings.length > 0 && !dotSetting) {
+            dotSetting = dotSettings[dotSettings.length - 1];
+        }
+        setWindowWidth(window.innerWidth);
+        setOption(dotSetting);
+    }, [dotSettings, windowWidth]);
+    useEffect(() => {
+        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.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 })))));
+});
+
+export { Dot };

package/moderncssm/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;
+    }
+}