@alfalab/core-components-chart 3.1.12 → 3.2.0

package/src/Component.tsx

@@ -0,0 +1,404 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import cn from 'classnames';
+import {
+    Area,
+    Bar,
+    Brush,
+    CartesianGrid,
+    Cell,
+    ComposedChart,
+    LabelList,
+    Legend,
+    Line,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis,
+} from 'recharts';
+
+import { CustomizedLabel } from './components/CustomizedLabel';
+import { Dot } from './components/Dot';
+import { Legends } from './components/Legends';
+import { LinearGradient } from './components/LinearGradient';
+import { RectBar } from './components/RectBar';
+import { Tick } from './components/Tick';
+import { TooltipContent } from './components/TooltipContent';
+import { CustomizedHOC } from './hoc/Customized';
+import { useSettings } from './hooks/useSettings';
+import {
+    ActiveDotProps,
+    CoordinatesProps,
+    DataDynamicBooleanProps,
+    DataDynamicProps,
+    OptionsProps,
+    SeriaProps,
+    ToggleChartProps,
+} from './types';
+
+import styles from './index.module.css';
+
+export const Chart = (props: OptionsProps) => {
+    const [{ state, data, charts, filterCount }, { setCharts, setFilterCount }] =
+        useSettings(props);
+    const [activeDotsState, setActiveDotsState] = useState<ActiveDotProps>({
+        prev: null,
+        active: null,
+    });
+
+    const [yBrush, setYBrush] = useState<number | null>(null);
+    const [tooltipArrowSide, setTooltipArrowSide] = useState<boolean | null>(null);
+    const [heightLegend, setHeightLegend] = useState<number>(0);
+
+    const svgRef = useRef<HTMLDivElement>(null);
+    const tooltipRef = useRef<any>(null);
+
+    const renderGradient = useMemo(() => {
+        if (!state) return null;
+
+        return state.series.map((item: SeriaProps) => {
+            const { chart, gradient } = item;
+
+            if (chart !== 'gradient' || !gradient) return null;
+            const { gid, points } = gradient;
+
+            return (
+                <LinearGradient
+                    key={`${state.id}-${gid}`}
+                    id={state.id}
+                    gid={gid}
+                    points={points}
+                />
+            );
+        });
+    }, [state]);
+
+    const toggleChart = useCallback(
+        (item: ToggleChartProps): void => {
+            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: DataDynamicBooleanProps) => {
+                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: HTMLUListElement): void => {
+        if (node !== null) {
+            setTimeout(() => {
+                const { height } = node.getBoundingClientRect();
+
+                setHeightLegend(height);
+            }, 0);
+        }
+    }, []);
+
+    const renderLegend = useMemo((): React.ReactElement | null => {
+        if (!state?.legend) return null;
+
+        const translate =
+            state?.xAxis?.tickMargin && state?.legend?.verticalAlign !== 'top'
+                ? state.xAxis.tickMargin + (state?.brush?.brushMargin || 0)
+                : 0;
+
+        return (
+            <Legend
+                {...(state.legend || null)}
+                content={
+                    <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((): React.ReactElement | null => {
+        if (!state?.cartesianGrid) return null;
+
+        return <CartesianGrid {...state.cartesianGrid} />;
+    }, [state]);
+
+    const renderXAxis = useMemo((): React.ReactElement | null => {
+        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 <XAxis {...state.xAxis} tick={tick} />;
+    }, [state]);
+
+    const renderYAxis = useMemo((): React.ReactElement | null => {
+        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 <YAxis {...state.yAxis} tick={tick} />;
+    }, [state]);
+
+    const renderBrush = useMemo((): React.ReactElement | null => {
+        if (!state?.brush) return null;
+
+        return <Brush y={typeof yBrush === 'number' ? yBrush : 0} {...state.brush} />;
+    }, [state, yBrush]);
+
+    const renderTooltip = useMemo((): React.ReactElement | null => {
+        if (!state?.tooltip) return null;
+
+        return (
+            <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: SeriaProps) => {
+            const { chart, properties, radius, labelList } = item;
+            const show = charts[`${properties.dataKey}`];
+
+            switch (chart) {
+                case 'bar':
+                    return show && !item?.hide ? (
+                        <Bar
+                            key={`${state.id}-${properties.dataKey}`}
+                            {...properties}
+                            shape={<RectBar radius={radius} />}
+                        >
+                            {labelList && (
+                                <LabelList
+                                    dataKey={properties.dataKey.toString()}
+                                    {...labelList}
+                                    content={<CustomizedLabel radius={radius} />}
+                                />
+                            )}
+                            {data.map((_: DataDynamicProps, index: number) => {
+                                const key = `${state.id}-${properties.dataKey}-${index}`;
+
+                                return (
+                                    <Cell
+                                        key={key}
+                                        className={cn(
+                                            styles.bar,
+                                            typeof activeDotsState.active === 'number' &&
+                                                activeDotsState.active !== index
+                                                ? styles.unfocused
+                                                : '',
+                                        )}
+                                    />
+                                );
+                            })}
+                        </Bar>
+                    ) : null;
+
+                case 'area':
+                case 'line':
+                    return show && !item?.hide ? (
+                        <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 ? (
+                        <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: boolean): void => {
+        if (isTooltipActive) return;
+
+        if (typeof activeDotsState.prev !== 'number' || typeof activeDotsState.active !== 'number')
+            return;
+
+        setActiveDotsState({
+            prev: null,
+            active: null,
+        });
+    };
+
+    const arrowTooltipEvent = (activeCoordinate: CoordinatesProps): void => {
+        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: boolean, activeTooltipIndex: number | undefined): void => {
+        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: ActiveDotProps) => ({
+                prev: prev.active,
+                active: activeTooltipIndex,
+            }));
+        }
+    };
+
+    const mouseMove = (e: any): void => {
+        if (!state?.tooltip) return;
+
+        arrowTooltipEvent(e.activeCoordinate);
+        hoverEvent(e.isTooltipActive, e.activeTooltipIndex);
+        leaveEvent(e.isTooltipActive);
+    };
+
+    const mouseLeave = (e: any): void => {
+        if (!state?.tooltip) return;
+
+        leaveEvent(e.isTooltipActive);
+    };
+
+    if (!data || !charts || !state) return null;
+
+    return (
+        <div
+            className={styles.coreChart}
+            ref={svgRef}
+            id={state?.id || ''}
+            style={{ width: '100%', height: '100%' }}
+        >
+            <ResponsiveContainer
+                debounce={
+                    state?.responsiveContainer?.debounce ? state.responsiveContainer.debounce : 0
+                }
+                width='100%'
+            >
+                <ComposedChart
+                    {...state?.composeChart}
+                    onMouseMove={mouseMove}
+                    onMouseLeave={mouseLeave}
+                    data={data}
+                >
+                    <defs>{renderGradient}</defs>
+                    {state.cartesianGrid && renderCartesianGrid}
+                    {state.xAxis && renderXAxis}
+                    {state.yAxis && renderYAxis}
+                    {renderChartsItems}
+                    {state.tooltip && renderTooltip}
+                    {state.brush && renderBrush}
+                    {state.legend && renderLegend}
+                </ComposedChart>
+            </ResponsiveContainer>
+        </div>
+    );
+};

package/src/components/CustomizedLabel.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+
+import { usePathBar } from '../hooks/usePathBar';
+
+export const CustomizedLabel: React.FC<any> = ({
+    x,
+    y,
+    value,
+    offset,
+    radius,
+    height,
+    width,
+    formatter,
+}) => {
+    const [initHeight] = usePathBar({ radius, height });
+
+    return (
+        <text
+            x={x + width / 2}
+            y={y + height - (initHeight + offset)}
+            width={width}
+            height={initHeight}
+            textAnchor='middle'
+        >
+            <tspan x={x + width / 2}>{formatter ? formatter(value) : value}</tspan>
+        </text>
+    );
+};

package/src/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/src/components/Dot/index.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import cn from 'classnames';
+
+import { PointIcon } from '../../icons/Point';
+import { DotProps, DotSettingProps } from '../../types/utils/dot.types';
+
+import styles from './index.module.css';
+
+export const Dot = React.forwardRef<SVGSVGElement, DotProps>(
+    (
+        { cx, cy, index, activeDot, dataKey, dotSettings, value, stroke },
+        ref,
+    ): React.ReactElement | null => {
+        const [windowWidth, setWindowWidth] = useState<number>(0);
+
+        const [height, setHeight] = useState<number>(0);
+        const [width, setWidth] = useState<number>(0);
+        const [option, setOption] = useState<DotSettingProps | null>(null);
+
+        useEffect(() => {
+            let dotSetting: DotSettingProps =
+                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 (
+            <g
+                ref={ref}
+                className={cn(styles.dot)}
+                transform={`translate(${cx - width / 2}, ${cy - height / 2})`}
+            >
+                <g
+                    className={cn(styles.dotWrap)}
+                    transform={`scale(${
+                        activeDot === index ? option?.scale || 0 : option?.initScale || 0
+                    })`}
+                >
+                    <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}
+                    >
+                        <PointIcon fill={stroke} />
+                    </svg>
+                </g>
+            </g>
+        );
+    },
+);

package/src/components/Legends/index.module.css

@@ -0,0 +1,36 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.legendContent {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.legendWrap {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.legendItem {
+    margin-right: var(--gap-2xl);
+    cursor: pointer;
+    display: inline-block;
+}
+
+.legendItem:last-child {
+    margin-right: 0;
+}
+
+.legendUnactive {
+    opacity: 0.3;
+}
+
+.legendIcon {
+    margin-right: 13px;
+    display: flex;
+}
+
+.legendValue {
+    text-transform: capitalize;
+}

package/src/components/Legends/index.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import { CircleIcon } from '../../icons/Circle';
+import { CircleLineIcon } from '../../icons/CircleLine';
+import { FilledCircleIcon } from '../../icons/FilledCircle';
+import { StrokeCircleIcon } from '../../icons/StrokeCircle';
+import { LegendProps } from '../../types/legend.types';
+import { SeriaProps } from '../../types/seria.types';
+import { DataDynamicBooleanProps } from '../../types/utils/data.types';
+
+import styles from './index.module.css';
+
+interface Props {
+    legend: LegendProps;
+    series: SeriaProps[];
+    id: string;
+    charts: DataDynamicBooleanProps;
+    toggleChart(item: SeriaProps): void;
+}
+
+const icons = {
+    circleLine: CircleLineIcon,
+    filledCircle: FilledCircleIcon,
+    strokeCircle: StrokeCircleIcon,
+    circle: CircleIcon,
+};
+
+export const Legends = React.forwardRef<HTMLUListElement, Props>(
+    ({ legend, series, id, charts, toggleChart }, ref): React.ReactElement => {
+        const style: React.CSSProperties = {
+            textAlign: legend.align || 'center',
+            transform: `translateY(${
+                (legend?.marginTop ? legend.marginTop : 0) *
+                (legend.verticalAlign === 'top' ? -1 : 1)
+            }px)`,
+        };
+
+        return (
+            <ul ref={ref} className={cn(styles.legendWrap)} style={style}>
+                {series.map((item: SeriaProps) => {
+                    if (item.hideLegend || item.hide) return null;
+
+                    const Icon = icons[item.icon] || CircleIcon;
+
+                    return (
+                        <li
+                            role='presentation'
+                            key={`${id}-${item.properties.dataKey}`}
+                            className={cn(
+                                styles.legendItem,
+                                charts[`${item.properties.dataKey}`] ? '' : styles.legendUnactive,
+                            )}
+                            onClick={() => toggleChart(item)}
+                        >
+                            <div className={cn(styles.legendContent)}>
+                                {Icon ? (
+                                    <i className={cn(styles.legendIcon)}>
+                                        <Icon
+                                            fill={
+                                                item.properties?.fill ||
+                                                item.properties?.stroke ||
+                                                ''
+                                            }
+                                            height={legend.iconHeight || 16}
+                                        />
+                                    </i>
+                                ) : null}
+                                <Typography.Text
+                                    view='primary-medium'
+                                    tag='span'
+                                    className={cn(styles.legendValue)}
+                                >
+                                    {item.properties.name}
+                                </Typography.Text>
+                            </div>
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    },
+);

package/src/components/LinearGradient.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { GradientProps, LinearGradientProps } from '../types/utils/gradient.types';
+
+export const LinearGradient = ({ id, gid, points }: LinearGradientProps): React.ReactElement => (
+    <linearGradient key={`${id}-${gid}`} id={`${id}-${gid}`} x1='0' y1='0' x2='0' y2='1'>
+        {points.map((point: GradientProps, index: number) => (
+            <stop
+                key={`${id}${gid}-${index.toString()}`}
+                offset={`${point.offset}%`}
+                stopColor={point.stopColor}
+                stopOpacity={point.stopOpacity}
+            />
+        ))}
+    </linearGradient>
+);