@alfalab/core-components 20.3.2 → 20.4.0

package/chart/cssm/types/utils/dot.types.d.ts

@@ -0,0 +1,73 @@
+import { CoordinatesProps } from "./coordinates.types";
+import { DataProps } from "./data.types";
+interface DotSettingProps {
+    /**
+     * Значение media query.
+     */
+    media?: number;
+    /**
+     * Значение маштаба при ховере.
+     */
+    scale: number;
+    /**
+     * Начальный значения маштаба.
+     */
+    initScale: number;
+    /**
+     * Ширина точки.
+     */
+    width: number;
+    /**
+     * Высота точки.
+     */
+    height: number;
+}
+interface ActiveDotProps {
+    /**
+     * Индекс предыдущей точки.
+     */
+    prev: number | null;
+    /**
+     * Индекс активной точки.
+     */
+    active: number | null;
+}
+interface PointProps extends CoordinatesProps {
+    value: string | number;
+    payload: DataProps;
+}
+interface DotProps {
+    /**
+     * Индекс активной точки на графике.
+     */
+    activeDot: null | number;
+    /**
+     * Координата Х.
+     */
+    cx: number;
+    /**
+     * Координата У.
+     */
+    cy: number;
+    /**
+     * Ключ данных.
+     */
+    dataKey: string;
+    /**
+     * Параметры точки.
+     */
+    dotSettings?: DotSettingProps;
+    /**
+     * Индекс.
+     */
+    index: number;
+    /**
+     * Цвет линии.
+     */
+    stroke: string;
+    /**
+     * Значения по этим координатам.
+     */
+    value: number;
+}
+export { DotSettingProps, ActiveDotProps, PointProps, DotProps };

package/chart/cssm/types/utils/dot.types.js

@@ -0,0 +1 @@
+

package/chart/cssm/types/utils/gradient.types.d.ts

@@ -0,0 +1,29 @@
+interface GradientProps {
+    /**
+     * Отступ.
+     */
+    offset: number;
+    /**
+     * Цвет.
+     */
+    stopColor: string;
+    /**
+     * Значение празрачности.
+     */
+    stopOpacity: number;
+}
+interface LinearGradientProps {
+    /**
+     * Индефикатор графика.
+     */
+    id: string;
+    /**
+     * Индефикатор градиента.
+     */
+    gid: string;
+    /**
+     * Массив настроек градинта.
+     */
+    points: GradientProps[];
+}
+export { GradientProps, LinearGradientProps };

package/chart/cssm/types/utils/gradient.types.js

@@ -0,0 +1 @@
+

package/chart/cssm/types/utils/tick.types.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { XAxisProps } from "../xAxis.types";
+interface TickProps {
+    payload: {
+        coordinate: number;
+        value: number;
+    };
+    /**
+     * Функция форматирования
+     */
+    tickFormatter: (value: number | string) => React.ReactText;
+    x: number;
+    y: number;
+    /**
+     * Настройки оси Х
+     */
+    xAxis: XAxisProps;
+}
+export { TickProps };

package/chart/cssm/types/utils/tick.types.js

@@ -0,0 +1 @@
+

package/chart/cssm/types/xAxis.types.d.ts

@@ -0,0 +1,16 @@
+import { AxisProps } from "./utils/axis.types";
+interface XAxisProps extends AxisProps {
+    /**
+     * Ключ данных, отображаемых на оси.
+     */
+    dataKey: string | number;
+    /**
+     * Ориентация оси
+     */
+    orientation?: 'top' | 'bottom';
+    /**
+     * Тип деления оси
+     */
+    tickType?: 'point';
+}
+export { XAxisProps };

package/chart/cssm/types/xAxis.types.js

@@ -0,0 +1 @@
+

package/chart/cssm/types/yAxis.types.d.ts

@@ -0,0 +1,8 @@
+import { AxisProps } from "./utils/axis.types";
+interface YAxisProps extends AxisProps {
+    /**
+     * Ориентация оси
+     */
+    orientation?: 'left' | 'right';
+}
+export { YAxisProps };

package/chart/cssm/types/yAxis.types.js

@@ -0,0 +1 @@
+

package/chart/esm/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/esm/Component.js

@@ -0,0 +1,264 @@
+import { _ as __assign } from './tslib.es6-defbba9d.js';
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { Legend, CartesianGrid, XAxis, YAxis, Brush, Tooltip, Area, Line, Bar, Cell, ResponsiveContainer, ComposedChart } from 'recharts';
+import { LinearGradient } from './components/LinearGradient.js';
+import '../../typography/esm';
+import './icons/Circle.js';
+import './icons/CircleLine.js';
+import './icons/FilledCircle.js';
+import './icons/StrokeCircle.js';
+import { Legends } from './components/Legends/index.js';
+import './icons/Point.js';
+import { Dot } from './components/Dot/index.js';
+import './hooks/useSettings/utils/setComposedChartsMargin.js';
+import './hooks/useSettings/utils/setDatas.js';
+import './hooks/useSettings/utils/setGradientCharts.js';
+import './hooks/useSettings/utils/setLegendMargin.js';
+import './hooks/useSettings/utils/sortByIndex.js';
+import { useSettings } from './hooks/useSettings/index.js';
+import { Tick } from './components/Tick/index.js';
+import { TooltipContent } from './components/TooltipContent/index.js';
+
+var CustomizedHOC = function (Component, options) {
+    var NewComponent = function (props) {
+        return React.createElement(Component, __assign({}, props, options));
+    };
+    return NewComponent;
+};
+
+var styles = {"coreChart":"chart__coreChart_y5qhn","bar":"chart__bar_y5qhn","unfocused":"chart__unfocused_y5qhn"};
+require('./index.css');
+
+var Chart = function (props) {
+    var _a;
+    var _b = 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 = useState({
+        prev: null,
+        active: null,
+    }), activeDotsState = _e[0], setActiveDotsState = _e[1];
+    var _f = useState(null), yBrush = _f[0], setYBrush = _f[1];
+    var _g = useState(null), tooltipArrowSide = _g[0], setTooltipArrowSide = _g[1];
+    var _h = useState(0), heightLegend = _h[0], setHeightLegend = _h[1];
+    var svgRef = useRef(null);
+    var tooltipRef = useRef(null);
+    var renderGradient = 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.createElement(LinearGradient, { key: state.id + "-" + gid, id: state.id, gid: gid, points: points }));
+        });
+    }, [state]);
+    var toggleChart = 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 = __assign({}, prev);
+            newState["" + dataKey] = !newState["" + dataKey];
+            if (withGrad)
+                newState[dataKey + "-gradient"] = !newState[dataKey + "-gradient"];
+            return newState;
+        });
+    }, [charts, filterCount, setCharts, setFilterCount]);
+    var legendRef = useCallback(function (node) {
+        if (node !== null) {
+            setTimeout(function () {
+                var height = node.getBoundingClientRect().height;
+                setHeightLegend(height);
+            }, 0);
+        }
+    }, []);
+    var renderLegend = 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.createElement(Legend, __assign({}, (state.legend || null), { content: React.createElement(Legends, { legend: state.legend, series: state.series, id: state.id, toggleChart: toggleChart, ref: legendRef, charts: charts }), wrapperStyle: {
+                transform: "translateY(" + translate + "px)",
+            } })));
+    }, [state, charts, toggleChart, legendRef]);
+    var renderCartesianGrid = useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.cartesianGrid))
+            return null;
+        return React.createElement(CartesianGrid, __assign({}, state.cartesianGrid));
+    }, [state]);
+    var renderXAxis = 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(Tick, { xAxis: state.xAxis });
+        }
+        else if (typeof state.xAxis.tick === 'boolean') {
+            tick = state.xAxis.tick;
+        }
+        else {
+            tick = true;
+        }
+        return React.createElement(XAxis, __assign({}, state.xAxis, { tick: tick }));
+    }, [state]);
+    var renderYAxis = 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.createElement(YAxis, __assign({}, state.yAxis, { tick: tick }));
+    }, [state]);
+    var renderBrush = useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.brush))
+            return null;
+        return React.createElement(Brush, __assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
+    }, [state, yBrush]);
+    var renderTooltip = useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
+            return null;
+        return (React.createElement(Tooltip, __assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
+    }, [state, tooltipArrowSide]);
+    var renderChartsItems = 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.createElement(Bar, __assign({ key: state.id + "-" + properties.dataKey }, properties), data.map(function (_, index) {
+                        var 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 === null || item === void 0 ? void 0 : item.hide) ? (React.createElement(Line, __assign({ key: state.id + "-" + properties.dataKey }, properties, { dot: properties.dot && properties.dotSettings
+                            ? CustomizedHOC(Dot, {
+                                activeDot: activeDotsState.active,
+                                dotSettings: properties.dotSettings,
+                                inherit: (properties === null || properties === void 0 ? void 0 : properties.inheritStroke) ? properties.inheritStroke
+                                    : false,
+                            })
+                            : false, activeDot: false }))) : null;
+                case 'gradient':
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React.createElement(Area, __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
+    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.createElement("div", { className: styles.coreChart, ref: svgRef, id: (state === null || state === void 0 ? void 0 : state.id) || '', style: { width: '100%', height: '100%' } },
+        React.createElement(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.createElement(ComposedChart, __assign({}, state === null || state === void 0 ? void 0 : 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))));
+};
+var Component = React.memo(Chart);
+
+export default Component;

package/chart/esm/components/Dot/index.css

@@ -0,0 +1,23 @@
+/* hash: 1pu5t */
+.chart__dotUnfocused_1pu5t {
+    opacity: 0.3;
+}
+
+.chart__dot_1pu5t,
+.chart__dotItem_1pu5t,
+.chart__dotWrap_1pu5t {
+    transition: all 0.2s ease;
+}
+
+.chart__dot_1pu5t {
+    animation: chart__showDot_1pu5t 0.5s ease;
+}
+
+@keyframes chart__showDot_1pu5t {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

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

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import cn from 'classnames';
+import { PointIcon } from '../../icons/Point.js';
+
+var styles = {"dotUnfocused":"chart__dotUnfocused_1pu5t","dot":"chart__dot_1pu5t","dotItem":"chart__dotItem_1pu5t","dotWrap":"chart__dotWrap_1pu5t","showDot":"chart__showDot_1pu5t"};
+require('./index.css');
+
+var Dot = React.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 = useState(0), windowWidth = _b[0], setWindowWidth = _b[1];
+    var _c = useState(0), height = _c[0], setHeight = _c[1];
+    var _d = useState(0), width = _d[0], setWidth = _d[1];
+    var _e = useState(null), option = _e[0], setOption = _e[1];
+    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]);
+    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.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 === null || option === void 0 ? void 0 : option.scale) || 0 : (option === null || option === void 0 ? void 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 === null || option === void 0 ? void 0 : option.width) || 0, height: (option === null || option === void 0 ? void 0 : option.height) || 0 },
+                React.createElement(PointIcon, { fill: stroke })))));
+});
+
+export { Dot };

package/chart/esm/components/Legends/index.css

@@ -0,0 +1,40 @@
+/* hash: hkiwp */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xl: 32px;
+}
+.chart__legendContent_hkiwp {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.chart__legendWrap_hkiwp {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+.chart__legendItem_hkiwp {
+    margin-right: var(--gap-2xl);
+    cursor: pointer;
+    display: inline-block;
+}
+.chart__legendItem_hkiwp:last-child {
+    margin-right: 0;
+}
+.chart__legendUnactive_hkiwp {
+    opacity: 0.3;
+}
+.chart__legendIcon_hkiwp {
+    margin-right: 13px;
+    display: flex;
+}
+.chart__legendValue_hkiwp {
+    text-transform: capitalize;
+}

package/chart/esm/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 };

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import cn from 'classnames';
+import { Typography } from '../../../../typography/esm';
+import { CircleIcon } from '../../icons/Circle.js';
+import { CircleLineIcon } from '../../icons/CircleLine.js';
+import { FilledCircleIcon } from '../../icons/FilledCircle.js';
+import { StrokeCircleIcon } from '../../icons/StrokeCircle.js';
+
+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: CircleLineIcon,
+    filledCircle: FilledCircleIcon,
+    strokeCircle: StrokeCircleIcon,
+    circle: CircleIcon,
+};
+var Legends = React.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.createElement("ul", { ref: ref, className: cn(styles.legendWrap), style: style }, series.map(function (item) {
+        var _a, _b;
+        if (item.hideLegend || item.hide)
+            return null;
+        var 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: function () { return toggleChart(item); } },
+            React.createElement("div", { className: cn(styles.legendContent) },
+                Icon ? (React.createElement("i", { className: cn(styles.legendIcon) },
+                    React.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))));
+    })));
+});
+
+export { Legends };

package/chart/esm/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/esm/components/LinearGradient.js

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

package/chart/esm/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/esm/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 };