Линейная диаграмма

Назначение

Этот компонент позволяет создавать линии и окрашивать части графика, ограничиваемые ими. По умолчанию в нем уже включены сетка, оси, подписи и всплывающая подсказка. Исходные данные передаются в виде массива в поле data, а отображаемые кривые - в виде объекта в поле series. По умолчанию поле name внутри объекта данных используется для создания соответствующей метки. Размер и цвет столбца определяются в полях field и color соответственно для каждой линии. Поле smooth влияет на сглаживание линий. По умолчанию область под линией окрашена. Вы можете отключить это, указав значение false в поле area, или задать другое направление заливки (доступны опции max, min, zero). Вы можете найти все доступные настройки в типе TLineConfig.

Использование

import { useState, useEffect } from 'react';
import { useLine } from 'effcharts/line';

// определите пользовательский веб-компонент перед использованием
// обратите внимание, что для SSR функцию необходимо вызывать до того, как браузер проанализирует текст документа
// поэтому вам может потребоваться добавить отдельный скрипт в заголовок документа
const { observe, getConfig } = useLine();

export const App = () => {
    const ref = useRef();
    const [config, setConfig] = useState(getConfig({
        data: [
            {
                name: 'Page A',
                uv: 4000,
                pv: 2400,
                amt: -2400,
            },
            {
                name: 'Page B',
                uv: 3000,
                pv: 1398,
                amt: -2210,
            },
            {
                name: 'Page C',
                uv: 2000,
                pv: 9800,
                amt: -2290,
            }
        ],
        series: {
            def: {
                title: 'Base vals',
                field: 'uv',
                color: 'green',
                smooth: true,
                area: {
                    towards: 'max'
                }
            },
            sec: {
                title: 'Next vals',
                field: 'pv',
                color: 'blue'
            },
        }
    }));
    useEffect(() => {
        // вы можете наблюдать за событиями веб-компонента
        const unobserve = observe((e) => {
            // обработчик события
        }, ref.current);
        // и вы можете отписаться от событий
        return () => unobserve();
    }, []);
    // просто используйте веб-компонент в jsx
    return <div ref={ref}>
        <effcharts-line config={config}>
        </effcharts-line>
    </div>;
}

Типизация

Вы можете объявить веб-компонент, используя интерфейс ILineChartAttrs. Вы также можете проверить конфигурацию диаграммы, используя тип TLineConfig:

import { HTMLAttributes } from 'react';
import { ILineChartAttrs, TLineConfig } from 'effcharts/line';

type CustomElement<T> = Partial<T & HTMLAttributes<T> & { children: any }>;

// declare effcharts components
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
        'effcharts-line': CustomElement<ILineChartAttrs>;
    }
  }
}

// prepare config
const config = {
    data: [
        {
            name: 'Page A',
            uv: 4000,
            pv: 2400,
            amt: -2400,
        },
        {
            name: 'Page B',
            uv: 3000,
            pv: 1398,
            amt: -2210,
        },
        {
            name: 'Page C',
            uv: 2000,
            pv: 9800,
            amt: -2290,
        }
    ],
    series: {
        def: {
            title: 'Base vals',
            field: 'uv',
            color: 'green',
            smooth: true,
            area: {
                towards: 'max'
            }
        },
        sec: {
            title: 'Next vals',
            field: 'pv',
            color: 'blue'
        },
    }
} satisfies TLineConfig;