Trabalhando com MongoDB Charts e o novo SDK para JavaScript
Avalie esse Tutorial
Os dados têm sido considerados o petróleo do 21século XXI. Se isso for verdade, então a visualização de dados é a refinaria que transforma informações brutas em insights acionáveis. O MongoDB sempre tornou fácil e flexível o trabalho com dados e, recentemente, facilitou a visualização de seus dados com MongoDB Charts.
MongoDB Charts permite analisar, entender e agir em seus dados. Você simplesmente conecta MongoDB e, em segundos, é capaz de criar gráficos e gráficos poderosos para obter insights sobre seus dados. Isso permite que você crie facilmente painéis, como oCOVID-19 Rastreador criado pelo nosso próprio MaximeBeugnet.
Além disso, seus MongoDB Charts não estão limitados à sua instância doMongoDB Atlas . Você pode incorporar facilmente esses gráficos em seus aplicativos e é exatamente isso que vamos fazer hoje. A maneira tradicional de trabalhar com o MongoDB Charts fora do MongoDB Atlas tem sido incorporar um código recuperado do Atlas dashboard, mas nós, desenvolvedores, muitas vezes precisamos de mais controle, e é aqui que entra o MongoDB Charts JavaScript SDK. Esse SDK está atualmente em versão prévia, mas já oferece muito maior flexibilidade em relação à apenas incorporação. Neste tutorial, aprenderemos como incorporar usando a abordagem iframe e como usar o SDK JavaScript.
Para este tutorial, você precisará de:
- Um navegador da Web
- MongoDB Atlas
Vamos mantê-lo simples e escrever todo o nosso código em JavaScript simples. No entanto, tenha certeza de que tudo o que você aprender pode ser facilmente traduzido para sua estrutura JS favorita, como React, Angularou Vue. Se você ainda não tiver uma conta do MongoDB Atlas, inscreva-se gratuitamente aqui.
Como escreveremos todo o nosso código em JavaScript simples, vamos criar um arquivo HTML para hospedar nosso código. Crie um arquivo
index.html. Escreverá meu código no Visual Studio Code e usará a extensãoLive Server para iniciar um servidor simples que apenas servidor o arquivoindex.html. Nosso ponto de partida inicial será o seguinte:1 <html> 2 <head> 3 <script src="https://unpkg.com/@mongodb-js/charts-embed-dom@beta"></script> 4 </head> 5 <body> 6 <div id="chart"></div> 7 <script> 8 </script> 9 </body> 10 </html>
Antes de podermos criar gráficos, precisamos de dados. Para a nossa sorte, o MongoDB tem vários conjuntos de dados gratuitos que podemos usar. Em seu dashboard do MongoDB Atlas, selecione a abaClusters . Escolha o cluster que deseja usar ou crie um novo para este tutorial e clique no botão de reticências para exibir opções adicionais. Por fim, selecione o botãoCarregar conjunto de dados de amostra. Isso criará vários bancos de dados carregados com dados de amostra. O que usaremos chama-se sample_airbnb. Você deve se lembrar deste conjunto de dados de um artigo anterior que escrevi sobre a criação de um site de reserva de propriedades com a Starlette.
Quando você tiver o conjunto de dadossample_airbnb disponível, estamos prontos para conectá-lo como fonte de dados para nossos MongoDB Charts. Navegue até a abaGráficos no menu principal. Se você ainda não trabalhou com o MongoDB Charts, receberá uma chamada à ação para conectar uma fonte de dados antes de poder criar gráficos. Isso faz sentido, pois precisamos primeiro ter os dados antes de podermos visualizá-los.
Clique no botãoAdicionar Fonte de Dados para começar. A partir daqui, selecione o cluster no qual você carregou o conjunto de dados de amostra e, em seguida, selecione a coleção sample_airbnb. Por fim, você terá a opção de selecionar quem deve ter acesso a esse conjunto de dados e, por enquanto, basta deixar as configurações padrão. Agora que temos uma fonte de dados conectada, estamos prontos para criar nosso primeiro dashboard.
Selecione a opçãoDashboard (Painel) na navegação principal e, em seguida, clique no botãoNew Dashboard (Novo painel) e dê um nome ao seu painel. Finalmente, estamos prontos para criar nosso primeiro gráfico.
Para criar nosso primeiro gráfico, vamos clicar no botãoAdicionar gráfico. Será apresentada uma nova interface de usuário que nos permitirá criar nosso gráfico ou gráfico. O primeiro passo é escolher uma fonte de dados, e selecionaremos
sample_airbnb.listingsAndReviews como nossa fonte de dados. Depois de fazer isso, veremos a coluna de campos preenchida com todos os campos para essa collection.Com o MongoDB Charts, podemos criar muitos tipos diferentes de gráficos e gráficos. Podemos criar gráficos de barras ou colunas, gráficos de linhas, gráficos de pizza e até gráficos geográficos. Dependendo do tipo de gráfico que desejamos criar, os dados que precisamos fornecer serão alterados.
Agora é apenas uma maneira de arrastar e soltar os campos com os quais nos preocupamos para nossos gráficos individuais. Para o nosso primeiro gráfico, o que queremos fazer é comparar a classificação média que uma propriedade recebe com base em seu preço. Criaremos um gráfico de colunas e, para o eixo x, arrastaremos o campo de preço. Ativaremos o binning para que possamos agrupar propriedades com base no preço e faremos isso em incrementos de $50. Para o eixo y, arrastaremos o camporeview_scores_rating e, para a agregação, selecionaremos a média. Isso nos dará uma pontuação média que as propriedades nessa faixa de preço receberam.
Em seguida, não queremos necessariamente exibir todos os preços, então também vamos adicionar um filtro. Filtraremos no campo depreço, com um valor mínimo de 50 e um valor máximo de 500. Finalmente, também adicionaremos um pouco de personalização, onde para os valores no eixo x, queremos prefixar os valores com o sinal "$". Nosso gráfico final ficará assim:
Podemos inferir a partir desse gráfico que, independentemente do preço, é provável que você tenha uma boa experiência reservando uma propriedade em qualquer faixa de preço. Vamos salvar este gráfico por enquanto. Se visitarmos nosso painel, verá nosso gráfico recém-criado exibido. Podemos redimensioná-lo, movê-lo, obter o código de incorporação, editá-lo e até excluí-lo se não estivermos satisfeitos com ele. Por enquanto, não faremos nada disso. O que vamos fazer é criar mais alguns gráficos para obter insights sobre nosso conjunto de dados.
O próximo gráfico que criaremos exibirá o preço médio de uma propriedade em cada país. Para este, criaremos um gráfico de barras. Para o eixo x, usaremos o campode preço e agregaremos a média. Para o eixo y, usaremos o campo country, que é um subdocumento do campo address e classificaremos por valor.
O que podemos inferir deste gráfico é que Hong Kong oferece as opções de reserva mais caras, enquanto Portugal a mais barata.
Este gráfico irá comparar o preço médio com base no tipo de quarto fornecido. Usaremos um gráfico circular desta vez. Para o nosso Rótulo, usaremos o camporoom_type e classificaremos por valor. Para o arco, usaremos o campode preço e novamente agregaremos na média. Vou adicionar um filtro de preço aqui também, com um valor mínimo de 10 e valor máximo de 500. O resultado ficará assim:
Como era de se esperar, o custo do aluguel de um apartamento ou casa inteira é maior do que o de um quarto privativo ou compartilhado, mas o que achei interessante é que, em média, o preço de um quarto privativo era menor do que o preço de um quarto compartilhado.
Posso passar horas criando perguntas exclusivas e criando gráficos para responder a essas perguntas e fornecer insights, mas acha que você captou o ponto. Os gráficos que criamos acima estão apenas raspando a superfície do que é possível fazer. Confira a documentação do Charts para obter muito mais informações, tutoriais e detalhes sobre como criar e trabalhar com diferentes tipos de gráficos. Em seguida, vamos pegar os gráficos que criamos em nosso dashboard do MongoDB Charts e usá-los em nosso aplicativo.
Agora que temos alguns gráficos para trabalhar em nosso dashboard do MongoDB Atlas, vamos exportar esses gráficos para nosso aplicativo. Como mencionei na introdução, existem duas maneiras de exportar um gráfico. Na primeira, simplesmente usamos o código incorporado que incorpora um iframe em nosso aplicativo e exibe o gráfico. Para mostrar como isso funciona, vamos pegar nosso gráfico de preço médio por tipo de quarto e incorporá-lo ao nosso aplicativo.
Passe o mouse sobre o gráfico circular e clique no botão... botão para ver opções adicionais. No menu, selecione Incorporar gráfico. Você provavelmente verá um pop-up modal informando que a fonte de dados desse gráfico não tem o compartilhamento externo não autenticado ativado, o que significa que não configuramos esse gráfico para ser compartilhável fora do MongoDB Atlas. Clique no link Configurar compartilhamento externo para ver nossas opções.
Primeiro, habilitaremos o compartilhamento externo, mas, em seguida, serão apresentadas duas opções sobre como queremos que esses gráficos externos sejam visualizados. As opções são Verified Signature Only (Somente assinatura verificada ) ou Unauthenticated (Sem autenticação) ou Verified Signature (Assinatura verificada). Devemos selecionar a segunda opção. Se selecionarmos a primeira, só teremos a opção de exibir os gráficos no lado do servidor passando uma chave secreta. Essa é uma opção mais segura e é a que devemos usar se realmente quisermos bloquear o acesso a esses gráficos.
Depois de habilitar o acesso não autenticado, veremos nossas opções para incorporar um gráfico. Podemos fazer isso por meio de um iframe ou do SDK JavaScript. Primeiro, mostraremos como você pode fazer isso com o método iframe. Basta copiar o código incorporado e colá-lo no aplicativo em que deseja que o gráfico seja exibido. Há um número limitado de opções de configuração aqui, como definir um cronômetro de atualização automática e um tema claro ou escuro predefinido, mas podemos adicionar parâmetros adicionais manualmente.
Go entrar em nosso código e colar esse código de incorporação para ver se nosso gráfico é carregado corretamente.
1 <html> 2 <head> 3 <script src="https://unpkg.com/@mongodb-js/charts-embed-dom@beta"></script> 4 </head> 5 <body> 6 <div id="chart"></div> 7 <iframe style="background: #FFFFFF;border: none;border-radius: 2px;box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="https://charts.mongodb.com/ charts-mongodb-gtywi/embed/charts?id=7f535ee7-2074-4350-9f94-237277b94391&theme=light"></iframe> 8 <script> 9 </script> 10 </body> 11 </html>
Se abrirmos nossa página no navegador agora, veremos nosso gráfico do MongoDB exibido. Não foi necessário escrever nenhum código para que esse gráfico fosse exibido e o arquivo de script que importamos no cabeçalho do documento não é usado. Tudo o que é necessário para renderizar e exibir o gráfico está contido no iframe.
A abordagem iframe funciona muito bem se você simplesmente deseja incorporar um gráfico em seu aplicativo. Mas para desenvolvedores que precisam de um pouco mais de flexibilidade, o JavaScript SDK é para você. A abordagem iframe permite que você passe muitas das mesmas opções do SDK do JavaScript, mas para mim trabalhar com o SDK é muito mais conveniente.
No exemplo acima, usamos a abordagem de iframe incorporado para adicionar nosso MongoDB Chart ao nosso aplicativo. Embora isso seja fácil e perfeito, não nos dá muita flexibilidade. É aqui que entra o SDK JavaScript do MongoDB Charts. Vamos comentar o código incorporado que colamos anteriormente. Agora, entre nossas tags de script, vamos usar o SDK para criar programaticamente nosso gráfico. Nosso código será mais ou menos assim:
1 <html> 2 <head> 3 <script src="https://unpkg.com/@mongodb-js/charts-embed-dom@beta"></script> 4 </head> 5 <body> 6 <div id="chart"></div> 7 <!-- 8 <iframe style="background: #FFFFFF;border: none;border-radius: 2px;box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="https://charts.mongodb.com/ charts-mongodb-gtywi/embed/charts?id=7f535ee7-2074-4350-9f94-237277b94391&theme=light"></iframe> 9 --> 10 <script> 11 const sdk = new ChartsEmbedSDK({ 12 baseUrl: 'https://charts.mongodb.com/charts-mongodb-gtywi' 13 }); 14 15 const chart = sdk.createChart({ chartId: '7f535ee7-2074-4350-9f94-237277b94391' }); 16 chart.render(document.getElementById('chart')); 17 </script> 18 </body> 19 </html>
Os valores que você deseja atualizar são
baseUrl e chartId. Você pode encontrar os valores para essas propriedades no modal Embed Chart selecionando a opção JavaScript SDK em vez da opção Iframe. O resultado final parece um pouco diferente.
Agora o gráfico ocupa a tela inteira. O motivo disso é que ele está sendo renderizado dentro dos limites da nossa div do gráfico, que, no momento, não tem nenhum estilo especificado, portanto, o padrão é a largura total da janela do navegador. Podemos mudar isso adicionando um pouco de estilo ao nosso aplicativo.
1 <html> 2 <head> 3 <script src="https://unpkg.com/@mongodb-js/charts-embed-dom@beta"></script> 4 </head> 5 <style> 6 #chart { 7 width: 500px; 8 margin: 0 auto; 9 border: 1px solid #ccc 10 } 11 </style> 12 <body> 13 </body> 14 </html>
Muito melhor. O SDK JavaScript também nos permite chamar vários métodos e filtros em nosso gráfico. Embora alguns desses recursos também possam ser passados com a abordagem iframe, é muito mais limpo e fácil de trabalhar ao usar o SDK. Vamos ver alguns exemplos.
1 <html> 2 <head> 3 <script src="https://unpkg.com/@mongodb-js/charts-embed-dom@beta"></script> 4 </head> 5 <style> 6 #chart { 7 width: 500px; 8 height: 500px; 9 margin: 0 auto; 10 border: 1px solid #ccc; 11 } 12 </style> 13 <body> 14 <div id="chart"></div> 15 16 <button onclick="refresh()">Refresh</button> 17 <button onclick="filter()">Only in USA</button> 18 <!-- 19 <iframe style="background: #FFFFFF;border: none;border-radius: 2px;box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="https://charts.mongodb.com/charts-mongodb-gtywi/embed/charts?id=7f535ee7-2074-4350-9f94-237277b94391&theme=light"></iframe> 20 --> 21 <script> 22 const sdk = new ChartsEmbedSDK({ 23 baseUrl: 'https://charts.mongodb.com/charts-mongodb-gtywi', 24 showAttribution: false 25 }); 26 27 const chart = sdk.createChart({ chartId: '7f535ee7-2074-4350-9f94-237277b94391' }); 28 chart.render(document.getElementById('chart')); 29 30 function refresh(){ 31 chart.refresh(); 32 } 33 34 function filter(){ 35 chart.setFilter({"address.country": "United States"}) 36 } 37 </script> 38 </body> 39 </html>
Adicionamos muito mais código agora para controlar a aparência, bem como a funcionalidade de nosso gráfico. Na configuração do SDK, desativamos a atribuição para que o logotipo MongoDB não seja mais exibido no canto inferior direito de nosso gráfico. Também adicionamos dois métodos que afetam diretamente nosso gráfico. O primeiro método
refresh() atualiza o gráfico. Em nosso caso, isso realmente não importa, pois não estamos constantemente recebendo novos dados que afetariam a forma como o gráfico é exibido, mas digamos que você tinha um dispositivo IoT que estava enviando dados a cada poucos segundos e queria mapeá-los. Ser capaz de controlar programaticamente quando a atualização é concluída, em um temporizador ou manualmente, melhoraria muito a usabilidade e a utilidade do gráfico. O segundo método, filter(), nos permite controlar as variáveis que compõem o gráfico. Nesse caso, quando clicamos no botão Somente nos EUA, nosso gráfico será atualizado para mostrar o preço médio do quarto por tipo de quarto para propriedades localizadas nos Estados Unidos.
Vamos falar um pouco mais sobre a funcionalidade do filtro. Eu já mostrei como você pode filtrar seus dados no painel do MongoDB Charts arrastando e soltando os campos que você deseja filtrar e testando as opções. Isso funciona muito bem se você estiver no painel, mas e se você não quiser conceder a todos na sua empresa acesso ao banco de dados do Charts. É aqui que a possibilidade de filtragem a partir do seu aplicativo entra em cena e realmente se destaca.
Antes que a função de filtro funcione, precisaremos entrar em nosso painel de gráficos e habilitar quais campos queremos que nossos usuários possam filtrar.
Vá para o painel do MongoDB Charts, selecione o gráfico com o qual deseja trabalhar e, no menu...selecione Incorporar gráfico. Você verá uma caixa de texto para Filtros especificados pelo usuário e, aqui, você poderá selecionar um ou muitos campos que deseja disponibilizar para a filtragem dos usuários. Em nosso caso, adicionaremos ,
address.country pois o único filtro que estamos demonstrando está limitando nosso gráfico com base no país. Depois de selecionar os campos, os usuários ou desenvolvedores agora podem filtrar programaticamente esse campo.Neste tutorial, aprenderam sobre MongoDB Charts e como trabalhar com eles no painel doMongoDB Atlas, bem como em nosso próprio aplicativo. Avaliamos as diferentes maneiras de incorporar nossos gráficos usando os métodos iframe e JavaScript SDK, e os profissionais e contras de cada método. Se você quiser apenas exibir seus gráficos e criar um dashboard rápido, a abordagem iframe pode ser o caminho a seguir, mas se você quiser recursos e funcionalidades adicionais, o SDK JavaScript, atualmente em versão prévia, oferece muito maior flexibilidade e, ao mesmo tempo, é muito fácil de usar trabalhar com.
Experimente o MongoDB Charts inscrevendo-se em uma contagratuita do MongoDB Atlas. Não há Github para este tutorial, pois todo o código é fornecido na parte superior. Se você tiver dúvidas ou comentários, consulte os novos MongoDB Community.
Feliz gráfico!