@alfalab/core-components-chart 3.1.12 → 3.2.0

package/src/components/RectBar.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useMemo } from 'react';
+
+import { usePathBar } from '../hooks/usePathBar';
+
+// eslint-disable-next-line complexity
+const getPath = (
+    x: number,
+    width: number,
+    height: number,
+    initHeight: number,
+    topRadius: number,
+    bottomRadius: number,
+    initY: number,
+): string =>
+    `
+        M${x + ((height !== 0 && bottomRadius) || 0)} ${initY + initHeight || 0}
+        Q${x} ${initY + initHeight} ${x} ${
+        initY + initHeight - ((height !== 0 && bottomRadius) || 0)
+    }
+        L${x} ${initY + ((height !== 0 && topRadius) || 0)}
+        Q${x} ${initY} ${x + ((height !== 0 && topRadius) || 0)} ${initY}
+        L${x + width - ((height !== 0 && topRadius) || 0)} ${initY}
+        Q${x + width} ${initY} ${x + width} ${initY + (topRadius || 0)}
+        L${x + width} ${initY + initHeight - ((height !== 0 && bottomRadius) || 0)}
+        Q${x + width} ${initY + initHeight} ${x + width - ((height !== 0 && bottomRadius) || 0)} ${
+        initY + initHeight
+    }
+        Z
+    `;
+
+export const RectBar = ({ fill, x, y, width, height, radius, background }: any): JSX.Element => {
+    const [initHeight, topRadius, bottomRadius, initY]: any = usePathBar({
+        radius,
+        height,
+        background,
+        y,
+    });
+
+    return useMemo(
+        () => (
+            <path
+                d={getPath(x, width, height, initHeight, topRadius, bottomRadius, initY)}
+                stroke='none'
+                fill={fill}
+            />
+        ),
+        [x, width, height, initHeight, topRadius, bottomRadius, initY, fill],
+    );
+};

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

@@ -0,0 +1,16 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.tickText {
+    fill: var(--color-light-text-primary);
+    @mixin paragraph_primary_medium;
+}
+
+.circle {
+    opacity: 0.3;
+    fill: var(--color-dark-bg-primary);
+}
+
+.circle {
+    opacity: 0.3;
+    fill: var(--color-dark-bg-primary);
+}

package/src/components/Tick/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { TickProps } from '../../types/utils/tick.types';
+
+import styles from './index.module.css';
+
+export const Tick = ({ y, payload, tickFormatter, xAxis }: TickProps) => {
+    const radius = 4;
+
+    const marginTick =
+        xAxis?.tickMargin &&
+        (xAxis.tickMargin > 0 ? xAxis.tickMargin - radius / 2 : xAxis.tickMargin === 0)
+            ? (radius / 2) * -1
+            : null;
+
+    return (
+        <g
+            className={cn(styles.tick)}
+            opacity='1'
+            textAnchor='middle'
+            transform={`translate(${payload.coordinate}, ${
+                y - (typeof marginTick === 'number' ? marginTick : 0) - radius * 2
+            })`}
+        >
+            <text className={cn(styles.tickText)} y='30'>
+                {tickFormatter ? tickFormatter(payload.value) : payload.value}
+            </text>
+            <circle r={radius} className={cn(styles.circle)} />
+        </g>
+    );
+};

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

@@ -0,0 +1,51 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.tooltip {
+    background-color: var(--color-light-bg-primary);
+    border: 1px solid var(--color-light-border-primary);
+    box-shadow: var(--shadow-l);
+    border-radius: var(--border-radius-m);
+    padding: var(--gap-s) var(--gap-m);
+    pointer-events: none;
+    position: relative;
+}
+
+.tooltipList {
+    position: relative;
+    z-index: 5;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.tooltipItem {
+    margin-bottom: 10px;
+}
+
+.tooltipArrow {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(1, 1) rotate(45deg);
+    width: 10px;
+    height: 10px;
+    border: 1px solid var(--color-light-border-primary);
+    background-color: var(--color-light-bg-primary);
+}
+
+.tooltipArrow:before {
+    content: '';
+    position: absolute;
+    left: -2px;
+    top: -2px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 24px 24px 0;
+    border-color: transparent var(--color-light-bg-primary) transparent transparent;
+}
+
+.tooltipArrowRight {
+    left: 100%;
+    transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
+}

package/src/components/TooltipContent/index.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import { PayloadProps } from '../../types/payload.types';
+import { SeriaProps } from '../../types/seria.types';
+import { TooltipProps } from '../../types/tooltip.types';
+
+import styles from './index.module.css';
+
+export interface TooltipContentProps extends TooltipProps {
+    payload: PayloadProps[];
+    series: SeriaProps[];
+}
+
+export const TooltipContent = ({
+    payload,
+    separator,
+    label,
+    tooltipArrowSide,
+    arrow,
+    series,
+    labelFormatter,
+    labelStyle,
+}: TooltipContentProps) => {
+    if (!label || payload.length === 0) return null;
+
+    return (
+        <div className={cn(styles.tooltip)}>
+            {arrow && (
+                <span
+                    className={cn(
+                        styles.tooltipArrow,
+                        tooltipArrowSide ? '' : styles.tooltipArrowRight,
+                    )}
+                />
+            )}
+            <ul className={cn(styles.tooltipList)}>
+                <li className={cn(styles.tooltipItem)} style={labelStyle}>
+                    <Typography.Text
+                        view='primary-medium'
+                        tag='span'
+                        weight='medium'
+                        className={cn(styles.tooltipLabel)}
+                    >
+                        {labelFormatter ? labelFormatter(label) : label}
+                    </Typography.Text>
+                </li>
+                {payload.map((entry: PayloadProps) => {
+                    const data: SeriaProps | undefined = series.find(
+                        (d: SeriaProps) => d.properties.dataKey === entry.dataKey,
+                    );
+
+                    if (data?.hideTooltip || data?.hide) return null;
+
+                    return (
+                        <li
+                            className={cn(styles.tooltipItem)}
+                            key={entry.dataKey}
+                            style={{ color: entry.color }}
+                        >
+                            <Typography.Text
+                                view='primary-medium'
+                                tag='span'
+                                weight='medium'
+                                className={cn(styles.tooltipValue)}
+                            >
+                                {entry?.formatter ? entry.formatter(entry.value) : entry.value}
+                                {separator || ' '}
+                            </Typography.Text>
+                            <Typography.Text
+                                view='secondary-large'
+                                tag='span'
+                                className={cn(styles.tooltipName)}
+                            >{`${entry.name}`}</Typography.Text>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+};

package/src/hoc/Customized.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const CustomizedHOC = (Component, options) => {
+    const NewComponent = (props) => <Component {...props} {...options} />;
+
+    return NewComponent;
+};

package/src/hooks/usePathBar/index.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+
+import { RadiusProp } from '../../types/seria.types';
+
+import { getRadius } from './utils/getRadius';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type usePathBarProps = {
+    radius?: RadiusProp;
+    height: number;
+    background?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    };
+    y?: number;
+};
+
+export const usePathBar = (props: usePathBarProps): number[] => {
+    const [topRadius, setTopRadius] = useState<number>(0);
+    const [bottomRadius, setBottomRadius] = useState<number>(0);
+    const [initHeight, setInitHeight] = useState<number>(0);
+    const [initY, setInitY] = useState<number>(0);
+
+    useEffect(() => {
+        const { radius, height, background, y } = props;
+        const radiusTop = radius?.top ? getRadius(height, radius.top) : 0;
+        const radiusBottom = radius?.bottom ? getRadius(height, radius.bottom) : 0;
+
+        const heightCheck =
+            (radius && height !== 0 && height / 2 < (radius?.top || 0)) ||
+            height / 2 < (radius?.bottom || 0);
+
+        // eslint-disable-next-line no-nested-ternary
+        const heightInit = heightCheck
+            ? (radiusTop || radiusBottom) && radiusTop + radiusBottom
+            : height > 0 && height < 2
+            ? 2
+            : height;
+
+        if (background && y) {
+            const yInit = heightCheck
+                ? background.height + background.y - (radiusTop + radiusBottom)
+                : y;
+
+            setInitY(yInit);
+        }
+
+        if (radiusTop !== 0) setTopRadius(radiusTop);
+        if (radiusBottom !== 0) setBottomRadius(radiusBottom);
+        if (heightInit !== 0) setInitHeight(heightInit);
+    }, [props]);
+
+    return [initHeight, topRadius, bottomRadius, initY];
+};

package/src/hooks/usePathBar/utils/getRadius.ts

@@ -0,0 +1,5 @@
+export const getRadius = (height: number, radius: number): number => {
+    const result = radius && height / 2 < radius ? Math.ceil(height / 2) : radius || 0;
+
+    return result;
+};

package/src/hooks/useSettings/index.tsx

@@ -0,0 +1,66 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+import { OptionsProps } from '../../types/options.types';
+import { DataDynamicBooleanProps, DataDynamicProps } from '../../types/utils/data.types';
+
+import { setComposedChartsMargin } from './utils/setComposedChartsMargin';
+import { setDatas } from './utils/setDatas';
+import { setGradientCharts } from './utils/setGradientCharts';
+import { setLegendMargin } from './utils/setLegendMargin';
+import { sortByIndex } from './utils/sortByIndex';
+
+type Settings = [
+    {
+        state: OptionsProps | null;
+        data: DataDynamicProps[];
+        charts: DataDynamicBooleanProps;
+        filterCount: number;
+    },
+    {
+        setState: Dispatch<SetStateAction<OptionsProps | null>>;
+        setData: Dispatch<SetStateAction<DataDynamicProps[]>>;
+        setCharts: Dispatch<SetStateAction<DataDynamicBooleanProps>>;
+        setFilterCount: Dispatch<SetStateAction<number>>;
+    },
+];
+
+export const useSettings = (options: OptionsProps): Settings => {
+    const [state, setState] = useState<OptionsProps | null>(null);
+    const [charts, setCharts] = useState<DataDynamicBooleanProps>({});
+    const [data, setData] = useState<DataDynamicProps[]>([]);
+    const [filterCount, setFilterCount] = useState<number>(0);
+
+    useEffect(() => {
+        const settings: OptionsProps = { ...options };
+        const { brush, legend, series, labels, composeChart, xAxis } = settings;
+
+        if (settings.legend?.margin && brush && legend)
+            settings.legend.margin.top = setLegendMargin(brush, legend);
+
+        settings.series = setGradientCharts(series);
+        const [initData, chartsNames, count] = setDatas(settings.series, labels);
+
+        settings.composeChart.margin = setComposedChartsMargin(composeChart, legend, brush, xAxis);
+        settings.series = sortByIndex(settings.series);
+
+        setState(settings);
+        setData(initData);
+        setCharts(chartsNames);
+        setFilterCount(count);
+    }, [options]);
+
+    return [
+        {
+            state,
+            data,
+            charts,
+            filterCount,
+        },
+        {
+            setState,
+            setData,
+            setCharts,
+            setFilterCount,
+        },
+    ];
+};

package/src/hooks/useSettings/utils/setComposedChartsMargin.ts

@@ -0,0 +1,29 @@
+import { BrushProps } from '../../../types/brush.types';
+import { ComposedChartProps } from '../../../types/composedChart.types';
+import { LegendProps } from '../../../types/legend.types';
+import { XAxisProps } from '../../../types/xAxis.types';
+
+type ComposedChartsMarginResultProps = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+
+export const setComposedChartsMargin = (
+    composeChart: ComposedChartProps,
+    legend: LegendProps | undefined,
+    brush: BrushProps | undefined,
+    xAxis: XAxisProps,
+): ComposedChartsMarginResultProps => ({
+    top:
+        (composeChart?.initMargin?.top || 0) +
+        (legend?.verticalAlign === 'top' && legend?.marginTop ? Math.abs(legend.marginTop) : 0),
+    bottom:
+        (composeChart?.initMargin?.bottom || 0) +
+        (xAxis?.tickMargin || 0) +
+        (brush?.brushMargin || 0) +
+        (legend?.verticalAlign !== 'top' && legend?.marginTop ? legend.marginTop : 0),
+    left: composeChart?.initMargin?.left || 0,
+    right: composeChart?.initMargin?.right || 0,
+});

package/src/hooks/useSettings/utils/setDatas.ts

@@ -0,0 +1,53 @@
+import { SeriaProps } from '../../../types/seria.types';
+import {
+    DataDynamicBooleanProps,
+    DataDynamicProps,
+    DataProps,
+} from '../../../types/utils/data.types';
+
+type DatasResultProps = [DataDynamicProps[], DataDynamicBooleanProps, number];
+
+export const setDatas = (
+    series: SeriaProps[],
+    labels: Array<string | number>,
+): DatasResultProps => {
+    const initData: DataDynamicProps[] = [];
+    const chartsNames: DataDynamicBooleanProps = {};
+    let count = 0;
+
+    for (let i = 0; i < series.length; i++) {
+        const {
+            properties: { dataKey = '' } = {},
+            data: seriaData = [],
+            hideLegend,
+            hide,
+        } = series[i];
+
+        if (!hideLegend && !hide) count += 1;
+
+        labels.map((label) => {
+            const item = seriaData.find((d: DataProps) => d.label === label);
+
+            if (item) {
+                const obj: DataDynamicProps = {
+                    label,
+                };
+
+                obj[`${dataKey}`] = item.value;
+
+                if (!chartsNames[`${dataKey}`]) chartsNames[`${dataKey}`] = true;
+
+                const index = initData
+                    .map((dataItem: DataDynamicProps) => dataItem.label)
+                    .indexOf(label);
+
+                if (index === -1) initData.push(obj);
+                else initData[index] = { ...initData[index], ...obj };
+            }
+
+            return null;
+        });
+    }
+
+    return [initData, chartsNames, count];
+};

package/src/hooks/useSettings/utils/setGradientCharts.ts

@@ -0,0 +1,43 @@
+import { SeriaProps } from '../../../types/seria.types';
+import { DataProps } from '../../../types/utils/data.types';
+
+export const setGradientCharts = (series: SeriaProps[]): SeriaProps[] => {
+    const filterSeries = series.filter((item) => item.chart !== 'gradient');
+
+    return filterSeries.reduce((accum: SeriaProps[], item: SeriaProps) => {
+        const { chart, data: dataSeria, offset, fill } = item;
+
+        if (chart === 'area') {
+            let newData = null;
+
+            if (offset) {
+                newData = dataSeria.map((d: DataProps) => {
+                    const { label, value } = d;
+
+                    return {
+                        label,
+                        value: Math.ceil(value - value * offset),
+                    };
+                });
+            }
+
+            accum.push({
+                ...item,
+                zIndex: -100,
+                chart: 'gradient',
+                hideLegend: true,
+                hideTooltip: true,
+                properties: {
+                    ...item.properties,
+                    dataKey: `${item.properties.dataKey}-gradient`,
+                    fill,
+                },
+                data: newData || item.data,
+            });
+        }
+
+        accum.push(item);
+
+        return accum;
+    }, []);
+};

package/src/hooks/useSettings/utils/setLegendMargin.ts

@@ -0,0 +1,16 @@
+import { BrushProps } from '../../../types/brush.types';
+import { LegendProps } from '../../../types/legend.types';
+
+export const setLegendMargin = (brush: BrushProps, legend: LegendProps): number => {
+    let top = 0;
+
+    if (typeof brush?.brushMargin !== 'number' || !legend?.verticalAlign) return top;
+
+    if (legend.verticalAlign === 'top') {
+        top = legend.marginTop ? Number(legend.marginTop * -1) : 0;
+    } else {
+        top = legend?.marginTop ? legend.marginTop + (brush?.brushMargin || 0) : brush?.brushMargin;
+    }
+
+    return top;
+};

package/src/hooks/useSettings/utils/sortByIndex.ts

@@ -0,0 +1,10 @@
+import { SeriaProps } from '../../../types/seria.types';
+
+export const sortByIndex = (series: SeriaProps[]): SeriaProps[] =>
+    series.sort((a: SeriaProps, b: SeriaProps) => {
+        if (a?.zIndex && b?.zIndex && a?.zIndex > b?.zIndex) {
+            return 1;
+        }
+
+        return -1;
+    });

package/src/icons/Circle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+type Props = {
+    fill?: string;
+    height?: number;
+};
+
+export const CircleIcon = ({ fill = '#FF5C5C', height = 16 }: Props) => (
+    <svg xmlns='http://www.w3.org/2000/svg' height={height} viewBox='0 0 16 16' fill='none'>
+        <circle cx='8' cy='8' r='8' fill={fill} />
+    </svg>
+);

package/src/icons/CircleLine.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+    fill?: string;
+    height?: number;
+};
+
+export const CircleLineIcon = ({ fill = '#FF5C5C', height = 16 }: Props): React.ReactElement => (
+    <svg xmlns='http://www.w3.org/2000/svg' height={height} viewBox='0 0 22 12' fill='none'>
+        <circle cx='11' cy='6' r='6' fill={fill} />
+        <rect y='5' width='22' height='2' fill={fill} />
+    </svg>
+);

package/src/icons/FilledCircle.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type Props = {
+    fill?: string;
+    height?: number;
+};
+
+export const FilledCircleIcon = ({ fill = '#5A8ECF', height = 16 }: Props) => (
+    <svg xmlns='http://www.w3.org/2000/svg' height={height} viewBox='0 0 22 22' fill='none'>
+        <circle cx='11' cy='11' r='10' fill='url(#paint0_linear)' stroke={fill} strokeWidth='2' />
+        <defs>
+            <linearGradient
+                id='paint0_linear'
+                x1='11'
+                y1='1'
+                x2='11'
+                y2='21'
+                gradientUnits='userSpaceOnUse'
+            >
+                <stop stopColor={fill} stopOpacity='0.2' />
+                <stop offset='1' stopColor={fill} stopOpacity='0' />
+            </linearGradient>
+        </defs>
+    </svg>
+);

package/src/icons/Point.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+    fill?: string;
+    height?: number;
+};
+
+export const PointIcon = ({ fill = '#5A8ECF', height = 16 }: Props) => (
+    <svg height={height} viewBox='0 0 18 18'>
+        <circle cx='9' cy='9' r='9' strokeWidth='1' fill={fill} fillOpacity='0.4' />
+        <circle cx='9' cy='9' r='3' strokeWidth='2' stroke='#fff' fill={fill} />
+    </svg>
+);

package/src/icons/StrokeCircle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+type Props = {
+    fill?: string;
+    height?: number;
+};
+
+export const StrokeCircleIcon = ({ fill = '#5A8ECF', height = 16 }: Props) => (
+    <svg xmlns='http://www.w3.org/2000/svg' height={height} viewBox='0 0 22 22' fill='none'>
+        <circle cx='11' cy='11' r='10' stroke={fill} strokeWidth='2' strokeDasharray='8 8' />
+    </svg>
+);

package/src/index.module.css

@@ -0,0 +1,21 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.coreChart {
+    & :global(.recharts-line path) {
+        transition: d 0.2s ease-out;
+    }
+
+    & :global(.recharts-text tspan) {
+        fill: var(--color-light-text-primary);
+        font-size: 16px;
+        line-height: 22px;
+    }
+}
+
+.bar {
+    transition: opacity 0.2s ease-out, d 0.2s ease-out;
+}
+
+.unfocused {
+    opacity: 0.3;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './Component';
+export * from './types';