Opt

Descubra como desenvolver seu próprio Dashboard

Em Aquarela Toquinho canta que “com cinco ou seis retas é fácil fazer um castelo” neste artigo vou te mostrar que “com apenas algumas linhas de código é fácil fazer um Dashboard”.

Neste pequeno projeto que preparei para você vamos utilizar o Leaflet.js o Chart.js e o Ionic Icons para desenvolver um Dashboard que simula a identificação de melhores áreas para abrir um restaurante de comida Japonesa, ao final deste “Hello World Tunado” você vai aprender um pouco sobre:

  • Utilizar CSS Flex e Grid
  • Criar Mapas com Leaflet.js
  • Adicionar Dados, Eventos, Popups e Controles no Mapa
  • Criar Gráficos com Chart.js
  • Atualizar Indicadores e Gráficos conforme o usuário interagir com o Mapa

Todos os arquivos deste projeto podem ser encontrados no seguinte repositório: Repositório GitHub.

É interessante abrir o repositório tentar reproduzir e acompanhar os trechos que serão apresentados durante o artigo. Você também pode visualizar o resultado final deste projeto clicando aqui: Leaflet Dashboard.

Tornando o Dashboard Responsivo

Uma aplicação responsiva é uma aplicação que se adapta as dimensões do dispositivo que ela esta sendo visualizada, para aprender um pouco sobre este assunto é interessante estudar:

  • Viewport
  • Media Queries
  • Layout
  • Unidades Relativas
  • Padrões

Um bom exemplo pode ser encontrado no arquivo de estilos quando foram utilizadas as propriedades Flex e Grid. Estas propriedades auxiliam no espaçamento e como os diferentes elementos que compõem o seu Dashboard vão se comportar.

Criando o Mapa

Leaflet.js é uma biblioteca muito legal e com apenas 39 KB você pode ter mapas interativos, criar controles, popups entre muitas outras coisas.

Para criar um mapa é preciso informar o centro e o nível de zoom inicial e em seguida adicionar o mapa base.

Existem alguns mapas base disponíveis e você pode conferir alguns no seguinte link: Mapas Base

Adicionando Camadas e Tornando o Mapa Interativo

Neste projeto foram utilizados dados de um arquivo GeoJSON mas existem muitas outras formas de adicionar uma camada no mapa, durante a criação da camada é possível configurar estilos, popups e eventos.

É possível utilizar os ícones de marcadores padrão do Leaflet.js ou personalizar ícones específicos para seu Dashboard, os ícones do projeto foram criados utilizando o Figma.

É possível também adicionar controles de camadas, escala ou até mesmo criar controles personalizados com eventos que são de interesse para a apresentação de sua informação.

Adicionando Gráficos

Gráficos facilitam a análise de dados e podem auxiliar na representação de conjuntos .

Chart.js possibilita a criação de Gráficos responsivos de maneira simples e intuitiva.

Na criação do gráfico deve ser informado o identificador do canvas, o tipo do gráfico, um conjunto de dados e opções de apresentação do gráfico.

Atualizar Informações

Para aumentar o engajamento dos usuários é interessante dar vida aos dados, fazer com que eles se atualizem conforme interações ou em determinados intervalos.

Em nosso projeto a atualização dos indicadores e dos gráficos acontece após a interação do usuário com o mapa, onde é realizada a verificação de quantos marcadores estão contidos na extensão atual do mapa, em seguida são executadas funções de atualização para cada elemento.

Bônus – Escolhendo Cores e Fontes

Eu adoro criar aplicações e interfaces posso dizer que são os serviços que mais gosto de fazer como desenvolvedor, realmente me sinto feliz escolhendo cores, fontes, fazendo algo acessível e responsivo, meu Instagram é repleto de posts salvos sobre UX/UI. Existem muitos sites legais para criar protótipos como Figma e se inspirar como Dribbble é interessante aprender um pouco sobre estes assuntos para criar um Dashbord chamativo e conquistar o usuário.

Arquivos do Projeto

Este projeto ficou com apenas 6 arquivos destes apenas 3 são de desenvolvimento (HTML, CSS e JS), os demais são ativos como imagens e dados (PNG e GeoJSON), como resposta e estímulo pra quem desejar tentar reproduzir este projeto, posso dizer que foi fácil encontrar exemplos na documentação das bibliotecas utilizadas e em fóruns da internet, bem como no repositório deste projeto que estou disponibilizando (Repositório GitHub) você vai conseguir um exemplo de cada funcionalidade que foi apresentada.

Escrito por

Diego Rodrigues 

Função: Analista Desenvolvedor
https://www.linkedin.com/in/Diego Rodrigues/

Sugestões para você

Integrando o QGIS com o PostgreSQL + PostGIS Olá pessoal neste tutorial vamos aprender como integrar o QGIS com PostgreSQL + PostGIS, bem como vamos …
UC_NEWS_#3: ArcGIS Enterprise on Kubernets Afinal, como ter acesso aos seus conteúdos geoespaciais a qualquer momento com rapidez? Atualmente, o crescimento da quantidade de conteúdo …