Gráfico de barras

Objetivo

Este componente permite crear gráficos de barras (también apilados). 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 barras mostradas como un objeto en el campo series. Por defecto, el campo name dentro del objeto data 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. Para organizar las columnas en la pila, debe establecer el mismo valor del campo stack para varias series. Puede encontrar todas las configuraciones disponibles en el tipo TBarConfig.

Uso

import { useState, useEffect } from 'react';
import { useBar } from 'effcharts/bar';

// 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 } = useBar();

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: 'Default',
                field: 'uv',
                color: 'oklch(0.49 0.13 268.85)'
            },
            sec: {
                title: 'Secondary',
                field: 'pv',
                color: 'oklch(0.61 0.1 213.72)'
            }
        }
    }));
    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-bar>
            {config}
        </effcharts-bar>
    </div>;
}

Tipos

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

import { HTMLAttributes } from 'react';
import { IBarChartAttrs, TBarConfig } from 'effcharts/bar';

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

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

// 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: 'Default',
            field: 'uv',
            color: 'oklch(0.49 0.13 268.85)'
        },
        sec: {
            title: 'Secondary',
            field: 'pv',
            color: 'oklch(0.61 0.1 213.72)'
        }
    }
} satisfies TBarConfig;