Parte 5: Gráficos
Materiais necessários:
- Node.js
- Expresso
- Chart.js
Módulos de nó usados:
Resumo:
Para manter uma rede social e melhorar a experiência de um usuário final, é importante acompanhar as informações sobre esses usuários e seus hábitos de uso. Muitas dessas informações podem não parecer imediatamente úteis para o usuário final, mas um cruzamento entre esse rastreamento e as informações úteis para o usuário final são os horários de login. Essas informações são usadas de muitas maneiras diferentes para otimizar o uso dessas redes para os consumidores (aumentar a escala dos nós para o tráfego de pico), bem como para rastrear possíveis problemas de segurança.
Como este aplicativo se preocupa principalmente com os ossos básicos de uma rede social, usamos alguns gráficos para analisar os dados que estamos coletando sobre o usuário.
Desde o início, discutimos o objeto "timeTracker" em cada documento de usuário. Esse objeto tinha um atributo "loginTimes" que atualizamos continuamente durante cada login com o atributo '/api/loginAuth' ponto final. Se isso for novo para você, consulte a parte 2, onde esse endpoint foi discutido detalhadamente. Em essência, esse endpoint acrescenta continuamente a última vez que o usuário faz login na matriz "loginTimes". Esses são os dados que analisaremos usando uma consulta N1QL, bem como uma adaptação do Chart.js para o Angular.js (tc-angular-chartjs), para exibir as informações recuperadas da consulta de data N1QL.
Abaixo, temos o ponto de extremidade de estatísticas que é usado para recuperar os dados do atributo "loginTimes" de cada usuário e retornar um objeto que a biblioteca de gráficos front-end pode usar para representar o uso do site ao longo do tempo.
API '/api/graphData
Esse ponto de extremidade recebe um argumento, que é o escopo de tempo que deve ser exibido. Nesse caso, a função aceita "day" (dia) ou "week" (semana). Isso retornará uma matriz de 24 valores inteiros ("dia") ou 7 valores inteiros ("semana"), dependendo do tipo de intervalo de datas especificado. A função que obtém todos esses dados é 'Statistics.newGraph'que criará uma consulta N1QL para obter os valores desejados. A função é mostrada abaixo.
Função 'Statistics.newGraph
Essa função incrivelmente longa está, na verdade, fazendo algo muito simples. Há três partes nessa função:
- Verifique o intervalo de datas de "semana" ou "dia
- Execute a consulta N1QL para agrupar os dados pelos últimos 7 dias ou pelas últimas 24 horas
- Use moment.js e matrizes para criar a ordem correta do eixo x
A primeira parte disso é realizada simplesmente usando instruções "if/else". A próxima parte é um pouco mais complicada, portanto, vamos analisar a consulta N1QL que está sendo executada e como entendemos quais dados ela recuperará para nós.
Exemplo de consulta de data N1QL para o dia anterior
Vamos usar o exemplo de um "dia" para entender o processo. A maneira de ver isso é que primeiro aninhamos todos os elementos da matriz em seus próprios objetos separados. Dessa forma, podemos observar cada um deles individualmente. Depois de INÚTIL Neles, descobrimos há quantas horas cada horário de login ocorreu, a partir do horário da solicitação da API, o que é feito usando DATE_DIFF_STR(STR_TO_UTC(NOW_STR()). Em seguida, pegamos cada um desses tempos e GRUPO POR há quanto tempo elas ocorreram. Com base nesses grupos, obtemos um CONTAGEM do número de vezes que estão nesse grupo (quantos desses logins ocorreram por hora). Isso nos dá uma matriz de objetos que contém o número de horas atrás em que esses horários ocorreram e uma contagem que descreve quantos logins ocorreram há tantas horas. Quando tivermos isso, criaremos um objeto TER que verifica se o número de horas anteriores a esses logins não excede 24, de modo que obtemos apenas um dia; nem mais, nem menos. Isso agora nos dá exatamente o que precisávamos, ou seja, uma matriz de objetos estratificada pelo número de horas que cada um desses logins ocorreu, bem como quantos logins ocorreram.
Depois disso, pegamos a matriz de objetos e colocamos as contagens de login em uma matriz, que é indexada com base na hora em que ocorreram. Essa matriz é inicializada com 0s, de modo que não haja erro ao representar graficamente valores indefinidos. Feito isso, o processo de manipulação de dados da consulta N1QL está concluído.
Isso resolve a maior parte do trabalho e, agora, tudo o que temos a fazer é simplesmente combiná-los com as horas e datas adequadas. Usamos uma matriz predefinida de 'horasX' ou 'daysX' e fazemos um loop por ele para criar o eixo x adequado. Usando o dia atual, que é encontrado pelo moment.js, criamos um padrão iterativo bem-sucedido para encontrar os dias e as semanas correspondentes. Quando usamos a função moment.js para 'moment().day();'etc., recuperamos um dia ou uma hora indexados a partir de 1. Isso é levado em conta no padrão iterativo.
Uso de front-end
Depois que essas duas matrizes são criadas/obtidas, não há mais trabalho a ser feito, a não ser no front-end. Simplesmente retornamos esses dois arrays para o endpoint da API na forma de 'graphObj' e, em seguida, enviá-los de volta ao cliente em nosso '/api/graphData' endpoint. Isso conclui o trabalho de back-end. Um conjunto de exemplos de código para usar isso com o tc-angular-chartjs pode ser visto no repositório do github em public/js/touchbase.js em 'statisticsController', e o HTML para ele pode ser visto em public/html/statistics-partial.html.
Isso conclui a parte de gráficos do tutorial do Touchbase. Comente abaixo com seus comentários ou críticas. Obrigado pela leitura e espero que você tenha mais facilidade para criar gráficos bonitos usando consultas de data N1QL e uma excelente biblioteca de gráficos de front-end!
