Como construir um gráfico animado da linha do tempo com MongoDB Charts Embedding SDK
Avalie esse Tutorial
O SDK de incorporação de gráficos permite incorporar visualizações de dados em seu aplicativo sem esforço, dando aos usuários e desenvolvedores controle sobre os gráficos incorporados. Pode ser uma ferramenta poderosa, especialmente quando vinculada às ações do usuário. Meu objetivo hoje é mostrar o Embedding SDK em ação.
Isso é apenas uma amostra do que você pode criar com o SDK, e espero que isso Spark a sobre seu uso em seus aplicativos. Se você quiser ler mais sobre o SDK, certifique-se de verificar a npmdo.
A leitura desta publicação do blog fornecerá um exemplo prático de como criar um gráfico de linha do tempo em seu aplicativo usando o SDK de incorporação.
Um gráfico de linha do tempo é uma maneira eficaz de visualizar um processo ou eventos em ordem cronológica. Um bom exemplo pode ser mostrar o crescimento populacional ao longo do tempo ou leituras de temperatura por segundo de um dispositivo IOT.
No momento em que escrevo isto, oferecemos suporte a 23 tipos de gráfico em MongoDB Chartse um gráfico de linha do tempo não é um deles. Graças ao SDK de incorporação de gráficos e um pouco de código, podemos construir um comportamento semelhante por conta própria, e acho que esse é um ótimo exemplo de como o SDK é flexível. Ele nos permite alterar programaticamente um gráfico incorporado usando filtros e definindo diferentes configurações.
Criaremos um gráfico de cronograma em três etapas:
- Crie o gráfico estático no MongoDB Charts
- Incorpore o gráfico em seu aplicativo
- Gerencie programaticamente o comportamento do gráfico com o SDK de incorporação para mostrar as alterações de dados ao longo do tempo
Eu executei essas três etapas para um pequeno aplicativo de exemplo que apresenta uma linha do tempo dos Jogos Olímpicos e mostra as medalhas olímpicas por país durante toda a história das Olimpíadas (dados provenientes de Kaggle). Estou usando dois gráficos – um geoespacial e um gráfico de barras. Eles oferecem diferentes perspectivas de como os dados mudam ao longo do tempo, para ver onde as medalhas são distribuídas e a magnitude das vitórias. O controle deslizante permite que o usuário se mova no tempo.
Ao observar o lapso de tempo, você pode ver alguns insights sobre os dados que não teria notado se fosse um gráfico estático. Aqui estão algumas observações:
- A Grécia conquistou a maioria das medalhas nas primeiras Olimpíadas (Atenas, 1896) e a França fez o mesmo nas segundas Olimpíadas (Paris, 1900), então parece que ser anfitrião aumenta seu desempenho.
- 1924 foi um ano muito bom para a maioria dos países nórdicas - temos a Suécia em 3terceiro lugar, Noruega(6a), Dinamarquesa (7a) e Finlândia(8a). Se você observar a Suécia de perto, verá que ela estava no top 5 na maioria das vezes.
- A Rússia (que inclui a ex-URSS neste conjunto de dados) ficou no top 8 pela primeira vez em 1960 mas alcançou rapidamente e está em 3lugar nas estatísticas gerais.
- A Austrália alcançou o top 8 em 2008 e mantém essa posição desde então.
- Os EUA foram um líder quase o tempo todo da linha do tempo.
Veja como construí isso em mais detalhes:
Você precisa criar o gráfico que pretende que faça parte da linha do tempo que está construindo. A maneira mais fácil de fazer isso é usar o MongoDB Atlas com um cluster de camada gratuita. Depois que os dados forem carregados no cluster, você poderá ativar os gráficos no projeto e iniciar os gráficos. Se você nunca usou gráficos antes, pode verificar as etapas para criar um gráfico nesta postagem do blog aquiou também pode seguir os tutoriais em nossa documentação abrangente.
Aqui estão os dois gráficos que criei no meu painel, que incorporarei no meu aplicativo de exemplo:
Temos um gráfico de barras que mostra os primeiros 8 países ordenados pela soma acumulada de medalhas que conquistaram na história das Olimpíadas.
E também há um gráfico geoespacial que mostra os mesmos dados, mas no mapa.
Portanto, temos esses dois gráficos e eles fornecem uma boa visão dos dados gerais sem nenhum filtro. Será mais impressionante ver como esses números progrediram no cronograma das Olimpíadas. Para isso, incorporei esses dois gráficos em meu aplicativo, onde, graças ao Embedding SDK, controlarei programaticamente seu comportamento usando um filtro nos dados.
Você também precisa permitir a incorporação dos dados e dos gráficos. Para fazer isso de uma vez, abra o menu (...) no gráfico e selecione "Embed Chart":
Como esses dados não são confidenciais, habilitei a incorporação não autenticada para cada um dos meus dois gráficos com essa alternância mostrada na imagem abaixo. Para dados mais confidenciais, você deve escolher a opção Autenticado para restringir quem pode visualizar os gráficos incorporados.
Em seguida, você precisa permitir explicitamente os campos que serão usados nos filtros. Você faz isso na mesma caixa de diálogo de incorporação mostrada acima. A filtragem de um gráfico incorporado só é permitida nos campos especificados e eles devem ser configurados com antecedência. Mesmo se você usar a incorporação não autenticada, ainda controlará a segurança sobre seus dados, para que possa decidir o que pode ser filtrado. No meu caso, esse é apenas um campo - o campo " do ano ", porque estou definindo filtros para os diferentes anos olímpicos e é tudo o que preciso para minha demonstração.
Essa é a etapa que inclui as poucas linhas de código que mencionei acima.
O aplicativo de exemplo é um pequeno aplicativo React que tem os dois Atlas Charts incorporados que você viu anteriormente posicionados lado a lado.
Há um controle deslizante na parte superior dos gráficos. Esse controle deslizante percorre a linha do tempo e mostra a soma das medalhas que os países ganharam no ano relevante. No aplicativo, você mesmo pode navegar pelos anos usando o controle deslizante; no entanto, há também um botão de reprodução no canto superior direito, que apresenta tudo em um lapso de tempo. O modo como o controle deslizante funciona é que, toda vez que ele muda de posição, eu defino um filtro para os gráficos incorporados usando o método
setFilterdo SDK. Por exemplo, se o controle deslizante estiver no ano 2016, isso significa que há um filtro que obtém todos os dados dos anos desde o início até 2016.1 // This function is creating the filter that will be executed on the data. 2 const getDataFromAllPreviousYears = (endYear) => { 3 let filter = { 4 $and: [ 5 { Year: { $gte: firstOlympicsYear } }, 6 { Year: { $lte: endYear } }, 7 ], 8 }; 9 10 return Promise.all([ 11 geoChart.setFilter(filter), 12 barChart.setFilter(filter), 13 ]); 14 };
Para a funcionalidade de reprodução, estou fazendo a mesma coisa: alterando o filtro a cada 2 segundos usando a função Javascript setInterval para agendar uma chamada de função que altera o filtro a cada 2 segundos.
1 // this function schedules a filter call with the specified time interval 2 const setTimelineInterval = () => { 3 if (playing) { 4 play(); 5 timerIdRef.current = setInterval(play, timelineInterval); 6 } else { 7 clearInterval(timerIdRef.current); 8 } 9 };
No mapa geoespacial, você pode ampliar uma área de interesse. A Europa seria um excelente exemplo, pois tem muitos países e isso faz com que o gráfico geoespacial pareça mais dinâmico. Você também pode pausar o encaminhamento automático a qualquer momento e retomá-lo ou até mesmo clicar para frente ou para trás em um ponto de interesse específico.
A ideia de criar este aplicativo foi mostrar como o SDK de incorporação de gráficos pode permitir que você adicione interatividade aos seus gráficos. Fazer gráficos de cronograma não é um recurso do SDK de incorporação, mas demonstra perfeitamente que, com um pouco de código, você pode fazer coisas diferentes com seus gráficos. Esperemos que tenhas parecido com o exemplo e tenhas uma ideia de como o SDK é poderoso.
O exemplo de código completo pode ser visto neste repositório. Tudo o que você precisa fazer para executá-lo é clonar o repositório, executar
npm install e npm start. Isso abrirá o navegador com a linha do tempo usando meus gráficos incorporados para que você veja um exemplo funcional imediatamente. Se você quiser tentar fazer isso usando seus dados e gráficos, coloquei alguns destaques no código de exemplo do que precisa ser alterado.Você pode iniciar suas ideias se inscrevendo no MongoDB Cloud, implantando um cluster Atlas gratuito e ativando o MongoDB Charts. Sinta-se à vontade para verificar nossa documentação e explorar mais aplicativos de exemplo de incorporação, incluindo exemplos autenticados se desejar controlar quem pode ver seus gráficos incorporados.
Também gostariamos de saber como você está usando o SDK de incorporação. Se você tiver sugestões sobre como melhorar algo no Charts, use o MongoDB Feedback Engine. Usamos esse feedback para ajudar a melhorar o Charts e descobrir quais recursos criar a seguir.
Feliz gráfico!