MongoDB Charts incorporando SDK com React

Maxime Beugnet5 min read • Published Oct 20, 2021 • Updated Sep 09, 2024

React Atlas Charts

Avalie esse Tutorial

Some features mentioned below will be deprecated on Sep. 30, 2025. Learn more.

Introdução

In the previous blog post of this series, we created a React website that was retrieving a list of countries using Axios and a REST API hosted in MongoDB Realm.

Nesta publicação do blog, continuaremos a desenvolver esta base e a criar um painel com gráficosCOVID-19 , criado com oMongoDB Charts e incorporado em um website React com o SDK de Incorporação do MongoDB Charts.

Para adicionar um pouco de tempero à mistura, usaremos nossa lista de países para criar um filtro dinâmico para que possamos filtrar todos os gráficos de COVID-19 por país.

Você pode ver o resultado final aqui que hospedei em um aplicativoMongoDB Realm usando o recurso de hospedagem estática disponível.

Pré-requisitos

O código deste projeto está disponível no Github neste repositório.

Trecho de código

Para executar este projeto, você precisará do node e npm em uma versão recente. Aqui está o que estou usando atualmente:

Trecho de código

Você pode executar o projeto localmente da seguinte forma:

Trecho de código

Nas próximas seções desta postagem do blog, explicarei o que precisamos fazer para que este projeto funcione.

Criar um dashboard de MongoDB Charts

Antes de podermos incorporar nossos gráficos em nosso site React personalizado, precisamos criá-los no MongoDB Charts.

Aqui está o link para o painel que criei para este site. Se parece com isso.

Se você quiser usar os mesmos dados que eu, confira esta publicação do blog sobre o Projeto Open Data CLI-19 e, especialmente , esta seção para duplicar os dados em seu próprio cluster no MongoDB Atlas.

Como você pode ver no painel, meus gráficos não são filtrados por país aqui. Você pode encontrar os dados de todos os países nos quatro gráficos que criei.

Ativar a filtragem e a incorporação

Para habilitar a filtragem quando estou incorporando meus gráficos em meu site, devo informar ao MongoDB Charts por qual(is) campo(s) poderei filtrar, com base nos campos disponíveis em minha coleção. Aqui, optei por filtrar por um único campo, country, e habilitei o acesso não autenticado para esta postagem pública no blog (veja abaixo).

No campo User Specified Filters, adicionei country e optou por usar a opção JavaScript SDK em vez da alternativa iFrame que é menos conveniente de usar em um site React com filtros dinâmicos.

Para cada um dos quatro gráficos, preciso recuperar o Charts Base URL (exclusivo para um painel) e o Charts IDs.

Agora que temos tudo o que precisamos, podemos ir para o código React.

Site do React

SDK de incorporação do MongoDB Charts

Comecemos pelo princípio: precisamos instalar o MongoDB Charts Embedding SDK em nosso projeto.

Trecho de código

Ele já está feito no projeto que forneci acima, mas não é feito se você estiver seguindo desde a primeira postagem do blog.

Projeto React

Meu projeto React é feito com apenas dois componentes de função: Dashboard e Chart.

A raiz index.jsdo projeto está apenas chamando o componente de funçãoDashboard.

Trecho de código

O Dashboard é a peça central do projeto:

Trecho de código

import './Dashboard.css';
import {useEffect, useState} from "react";
import axios from "axios";
import Chart from "./Chart";

const Dashboard = () => {
  const url = 'https://webhooks.mongodb-stitch.com/api/client/v2.0/app/covid-19-qppza/service/REST-API/incoming_webhook/metadata';
  const [countries, setCountries] = useState([]);
  const [selectedCountry, setSelectedCountry] = useState("");
  const [filterCountry, setFilterCountry] = useState({});

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
  }

useEffect(() => {
    axios.get(url).then(res => {
      setCountries(res.data.countries);
      const randomCountryNumber = getRandomInt(res.data.countries.length);
      let randomCountry = res.data.countries[randomCountryNumber];
      setSelectedCountry(randomCountry);
      setFilterCountry({"country": randomCountry});
    })
  }, [])

useEffect(() => {
    if (selectedCountry !== "") {
      setFilterCountry({"country": selectedCountry});
    }
  }, [selectedCountry])

return <div className="App">
    <h1 className="title">MongoDB Charts</h1>
    <h2 className="title">COVID-19 Dashboard with Filters</h2>
    <div className="form">
      {countries.map(c => <div className="elem" key={c}>
        <input type="radio" name="country" value={c} onChange={() => setSelectedCountry(c)} checked={c === selectedCountry}/>
        <label htmlFor={c} title={c}>{c}</label>
      </div>)}
    </div>
    <div className="charts">
      <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'6e3cc5ef-2be2-421a-b913-512c80f492b3'}/>
      <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'be3faa53-220c-438f-aed8-3708203b0a67'}/>
      <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'7ebbba33-a92a-46a5-9e80-ba7e8f3b13de'}/>
      <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'64f3435e-3b83-4478-8bbc-02a695c1a8e2'}/>
    </div>
  </div>
};

export default Dashboard;

Ele é responsável por algumas coisas:

Linha 17 - Recupere a lista de países da REST API usando Axios (consulte a postagem anterior do blog).
Linhas 18-22 - Selecione um país aleatório na lista para o valor inicial.
Linhas 22 e 26 - Atualizam o filtro quando um novo valor é selecionado (aleatório ou manual).
Linha 32 counties.map(...) - Use a lista de países para construir uma lista de botões de opção para atualizar o filtro.
Linha 32 <Charts .../> x4 - Chame o componenteChart uma vez para cada gráfico com os acessórios apropriados, incluindo o filtro e a ID do gráfico.

Como você deve ter notado aqui, estou usando o mesmo filtro fitlerCountry para todos os gráficos, mas nada me impede de usar um filtro personalizado para cada gráfico.

Você também deve ter notado um arquivo CSS bem minimalista Dashboard.css. Aqui está:

Trecho de código

O componenteChart tem esta aparência:

Trecho de código

O componenteChartnão está fazendo muita coisa. É responsável apenas por renderizar o gráfico uma vez quando a página é carregada e recarregar o gráfico se o filtro for atualizado para exibir os dados corretos (graças ao React).

Observe que o segundo useEffect (com a chamadachart.setFilter(filter)) não deve ser executado se o gráfico não tiver sido renderizado. Portanto, ele é protegido pelo estadorenderedque só é definido como true quando o gráfico é renderizado na tela.

E pronto! Se tudo correu como planejado, você deve acabar com um site (não muito) bonito como este.

Conclusão

Nesta publicação do blog, você aprenderá como incorporar MongoDB Charts em um siteReact usando o MongoDB Charts Embedding SDK.

Também aprenderam como criar filtros dinâmicos para os Atlas Charts usando useEffect().

Não aprenderam como proteger os Charts com um token de autenticação, mas você pode aprender como fazer isso nesta documentação.

Se tiver dúvidas, acesse o site da nossa comunidade de desenvolvedores, no qual os engenheiros e a comunidade do MongoDB ajudarão você a desenvolver sua próxima grande ideia com o MongoDB.

Avalie esse Tutorial

Relacionado

Tutorial

Criar um backend de gerenciamento de mídia escalável: integrando Node.js, Armazenamento de blobs Azure e MongoDB

Dec 13, 2023 | 10 min read

Tutorial

Criação de aplicativos de IA generativa usando o MongoDB: aproveitando o poder do Atlas Vector Search e dos modelos de código aberto

Sep 18, 2024 | 10 min read

Tutorial

Integre os registros do Atlas Application Services no Datadog na AWS

Sep 09, 2024 | 2 min read

Artigo

Audio Find - Atlas Vector Search para áudio

Sep 09, 2024 | 11 min read