Gráfico circular

Objetivo

Este componente permite crear gráficos circulares y de anillos. Por defecto, ya habilita la información sobre herramientas. Los datos de origen se transmiten como una matriz en el campo data, y los grupos mostrados como un objeto en el campo series. El tamaño del sector y los campos de color se definen en los campos field y color de la serie, respectivamente. Para crear sectores en un gráfico de anillos, es necesario especificar los campos inner y outer de la serie, que establecen el radio interior y exterior. Puede encontrar todas las configuraciones disponibles en el tipo TPieConfig.

Uso

import { useState, useEffect } from 'react';
import { usePie } from 'effcharts/pie';

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

export const App = () => {
    const ref = useRef();
    const [config, setConfig] = useState(JSON.stringify({
        data: [
            {
                name: 'Page A',
                uv: 4000,
                pv: 2400,
                color: 'oklch(0.61 0.1 213.72)'
            },
            {
                name: 'Page B',
                uv: 3000,
                pv: 1398,
                color: 'oklch(0.54 0.18 322.34)'
            },
            {
                name: 'Page C',
                uv: 2000,
                pv: 9800,
                color: 'oklch(0.49 0.13 268.85)'
            }
        ],
        series: {
            def: {
                field: 'uv',
                color: 'color',
                title: 'Default',
                inner: 0.55,
                outer: 1
            },
            sec: {
                field: 'pv',
                color: 'color',
                title: 'Secondary',
                outer: 0.5,
                angle: 180
            }
        }
    }));
    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-pie>
            {config}
        </effcharts-pie>
    </div>;
}

Tipos

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

import { HTMLAttributes } from 'react';
import { IPieChartAttrs, TPieConfig } from 'effcharts/pie';

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

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

// preparar configuración
const config = {
    data: [
        {
            name: 'Page A',
            uv: 4000,
            pv: 2400,
            color: 'oklch(0.61 0.1 213.72)'
        },
        {
            name: 'Page B',
            uv: 3000,
            pv: 1398,
            color: 'oklch(0.54 0.18 322.34)'
        },
        {
            name: 'Page C',
            uv: 2000,
            pv: 9800,
            color: 'oklch(0.49 0.13 268.85)'
        }
    ],
    series: {
        def: {
            field: 'uv',
            color: 'color',
            title: 'Default',
            inner: 0.55,
            outer: 1
        },
        sec: {
            field: 'pv',
            color: 'color',
            title: 'Secondary',
            outer: 0.5,
            angle: 180
        }
    }
} satisfies TPieConfig;