Gráfico de líneas

Objetivo

Este componente permite crear gráficos de líneas y de áreas. Por defecto, ya habilita la cuadrícula, los ejes, las etiquetas y la información sobre herramientas. Los datos de origen se transmiten como una matriz en el campo data, y las curvas mostradas como un objeto en el campo series. Por defecto, el campo name dentro del objeto de datos se utiliza para generar la etiqueta asociada. El tamaño y el color de las columnas se definen en los campos field y color de la serie, respectivamente. El suavizado de las líneas se ve afectado por el campo smooth. Por defecto, el área bajo la línea está coloreada. Puede desactivar esto pasando el valor false en el campo area, o puede establecer una dirección de relleno diferente (las opciones max, min y zero están disponibles). Puede encontrar todas las configuraciones disponibles en el tipo TLineConfig.

Uso

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

// Define el componente web personalizado antes de usarlo.
// Ten en cuenta que, para SSR, debes llamarlo antes de que el navegador analice el cuerpo del documento
// Por lo tanto, es posible que debas agregar un script de definición aparte al encabezado del documento
const { observe } = useLine();

export const App = () => {
    const ref = useRef();
    const [config, setConfig] = useState(JSON.stringify({
        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: 'oklch(0.61 0.1 213.72)',
                smooth: true,
                area: {
                    towards: 'max'
                }
            },
            sec: {
                title: 'Next vals',
                field: 'pv',
                color: 'oklch(0.49 0.13 268.85)'
            },
        }
    }));
    useEffect(() => {
        // puedes observar los eventos de los componentes web
        const unobserve = observe((e) => {
            // controlador de eventos
        }, ref.current);
        // y puedes dejar de observar
        return () => unobserve();
    }, []);
    // simplemente usa el componente web en jsx
    return <div ref={ref}>
        <effcharts-line>
            {config}
        </effcharts-line>
    </div>;
}

Tipos

Puedes declarar un componente web usando la interfaz ILineChartAttrs. También puedes validar la configuración del gráfico usando el tipo TLineConfig.

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

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

// declarar componentes de gráficos de eficacia
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
        'effcharts-line': CustomElement<ILineChartAttrs>;
    }
  }
}

// preparar configuración
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: 'oklch(0.61 0.1 213.72)',
            smooth: true,
            area: {
                towards: 'max'
            }
        },
        sec: {
            title: 'Next vals',
            field: 'pv',
            color: 'oklch(0.49 0.13 268.85)'
        },
    }
} satisfies TLineConfig;