Palavras-chave React ECharts ResizeObserver

Resumo

Na atualidade do desenvolvimento web, layouts responsivos e visualizações de dados são requisitos comuns. Este artigo explica como criar um componente de gráfico adaptável utilizando React, ResizeObserver e a biblioteca ECharts.

O que é ResizeObserver

O ResizeObserver é uma API JavaScript que monitora alterações no tamanho de elementos. Ele dispara uma função de callback quando o tamanho de um elemento muda, permitindo ajustes imediatos.

Vantagens do uso de ResizeObserver

Em layouts responsivos, frequentemente precisamos redimensionar gráficos conforme o tamanho do contêiner. Métodos tradicionais como timers ou listeners de eventos são ineficinetes e imprecisos.

O ResizeObserver oferece uma maneira mais eficaz e precisa de monitorar mudanças de tamanho. Ele detecta alterações em tempo real e executa callbacks imediatamente.

Criando um componente de gráfico com React

Primeiro, vamos criar um componente básico de gráfico usando React. Utilizaremos o ECharts como biblioteca para renderização visual de dados.

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const ChartComponent = ({ dataset }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const chartInstance = echarts.init(containerRef.current);

    const config = {
      // Definições das opções do gráfico
      // ...
    };

    chartInstance.setOption(config);

    return () => {
      chartInstance.dispose();
    };
  }, [dataset]);

  return <div ref={containerRef} style={{ width: '100%', height: '400px' }} />;
};

export default ChartComponent;

No código acima, criamos um componente funcional chamado ChartComponent. Ele recebe uma propriedade dataset para atualizar os dados do gráfico.

Dentro do hook useEffect, inicializamos a instância do ECharts e configuramos as opções via setOption. Também liberamos os recursos ao desmontar o componente com dispose.

O retorno do componente consiste em um <div> associado ao containerRef. Este elemento servirá como contêiner para o gráfico, com largura de 100% e altura fixa de 400 pixels — ajustável conforme necessário.

Monitorando mudanças de tamanho com ResizeObserver

Agora, usaremos o ResizeObserver para detectar alterações no tamanho do contêiner do gráfico e redesenhá-lo conforme necessário.

Criaremos um Hook customizado chamado useResizeObserver que utiliza a API ResizeObserver:

import { useEffect, useState } from 'react';

const useResizeObserver = (elementRef) => {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect;
      setSize({ width, height });
    });

    resizeObserver.observe(elementRef.current);

    return () => {
      resizeObserver.unobserve(elementRef.current);
    };
  }, [elementRef]);

  return size;
};

export default useResizeObserver;

Este Hook recebe uma referência (ref) ao elemento a ser observado. Quando seu tamanho muda, atualiza o estado size com as novas dimensões.

Podemos agora integrar esse Hook ao nosso componente ChartComponent:

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import useResizeObserver from './useResizeObserver';

const ChartComponent = ({ dataset }) => {
  const containerRef = useRef(null);
  const { width, height } = useResizeObserver(containerRef);

  useEffect(() => {
    const chartInstance = echarts.init(containerRef.current);

    const config = {
      // Configurações do gráfico
      // ...
    };

    chartInstance.setOption(config);

    return () => {
      chartInstance.dispose();
    };
  }, [dataset, width, height]);

  return <div ref={containerRef} style={{ width: '100%', height: '400px' }} />;
};

export default ChartComponent;

Neste exemplo, capturamos as dimensões atualizadas via useResizeObserver e incluímos-as como dependência no useEffect. Assim, sempre que o contêiner mudar de tamanho, o gráfico será redesenhado automaticamente.

Conclusão

Combinando React, ResizeObserver e ECharts, podemos construir componentes de gráfico flexíveis. O ResizeObserver permite monitorar mudanças de tamanho de forma eficiente, sem recorrer a métodos obsoletos.

Esperamos que este artigo tenha ajudado a entender como utilizar essas tecnologias juntas para criar gráficos adaptáveis. Sinta-se à vontade para experimentar e personalizar conforme suas necessidades.