Gráficos

PivotTable.js: Tabelas e relatórios dinâmicos na sua aplicação

Em Programação por Jonathan Maia

Já pensou se os usuários dos seus sistemas pudessem montar análises e relatórios dinâmicos sem a intervenção constante da TI? Mas Jonathan, vou ter que montar uma solução de BI (Business Intelligence), fazer a modelagem, ETL e visualização ? Não necessariamente, pequeno gafanhoto. Quero te apresentar uma biblioteca em JavaScript extremamente poderosa e estável (além de open source): PivotTable.js.

Dá uma olhada no que é possível fazer com poucas linhas de código e consumindo JSON ou CSV da tua aplicação (continua depois da animação) :

PivotTable em ação

Fonte: https://pivottable.js.org/images/animation.gif

Se você já utilizou alguma solução de BI (Qlikview, BO, Pentaho), ou mesmo as funcionalidades de tabela dinâmica do Excel ou OpenOffice Calc, já deve ter se deparado com uma tabela dinâmica (ou tabela pivotante).

Tabela pivotante ou tabela dinâmica

Nunca viu uma tabela pivotante? Apenas como exemplo, no OpenOffice, com os dados já prontos na sua planilha, basta ir no Menu Dados -> Tabela Dinâmica -> Criar -> Seleção atual.

Planilha com dados simples

Planilha base para tabela dinâmica

Você vai se deparar com uma tela para selecionar quais campos deseja colocar na linha e quais campos colocar na coluna do seu relatório.

Udemy - Learn to Code by Making Games - Complete C# Unity Developer
Tabela dinâmica

Visão inicial da tabela dinâmica

Supondo que desejamos fazer uma análise de Sexo por Cidade somando os valores. É só clicar e arrastar os campos paras as áreas da tabela (campos de linha, campos de coluna ou campos de dados) e pronto.

Campos na linha, coluna e área de dados

Campos na linha, coluna e área de dados

Clique em OK e sua análise está pronta. Fácil, né ?

Tabela dinâmica pronta

Tabela dinâmica pronta

PivotTable.js

Então, já pensou disponibilizar algo similar nos seus sistemas? A biblioteca PivotTable.js é opensource (licença MIT) e disponibiliza uma tabela pivotante em JavaScript para a sua aplicação.

Como é em JavaScript, você conseguirá acoplá-la em praticamente qualquer solução web (Java, JS, Rails, Python, …), sendo necessário apenas disponibilizar os dados para a API.

Dá uma olhada nesse código:

 

    $(function(){
        $("#output").pivotUI(
            [
                {color: "blue", shape: "circle"},
                {color: "red", shape: "triangle"}
            ],
            {
                rows: ["color"],
                cols: ["shape"]
            }
        );
     });

Olha aqui o resultado:
Resultado PivotTable

Em essência, você apenas passa para a PivotTable.js um array de objetos e quais campos você deseja que sejam exibidos nas linhas e colunas da tabela pivotante.

Você, desenvolvedor experiente, já deve estar com uma ideia borbulhando aí. Eu sei o que é. Vou ler seus pensamentos:

Se a PivotTable.js precisa apenas dos objetos em JavaScript e o Backend do teu sistema já retorna JSON (JavaScript Object Notation), então a tabela dinâmica será bem fácil de disponibilizar. É isso aí!

Sim, jovem. Com o crescente uso do JSON como formato de transferência de dados, o uso da PivotTable.js fica ainda mais simples. Você também pode disponibilizar no Backend um serviço já consolidando todos os dados (possíveis linhas e colunas) que você gostaria de ter disponíveis em uma tabela dinâmica no teu Frontend.

Quer brincar um pouco com a PivotTable.js ? Na página de exemplos dela você tem muitos e muitos códigos, além da possibilidade de brincar com as tabelas resultantes.

Como primeiro exemplo, dê uma olhada nessa análise do parlamento canadense.

Principais áreas da PivotTable

Principais áreas da PivotTable

Como você pode observar, os campos disponíveis para uso na PivotTable ficam na parte superior. Para utilizá-los, basta clicar e arrastar para a linha ou para a coluna da tabela. Simples assim! Como exemplo, eu poderia adicionar Gender para a coluna da tabela dinâmica e ficaria com:

Dois campos na coluna

Na área do tipo de gráfico, você tem várias possibilidades (dê uma olhada nesse exemplo):

  • Table (tabela): visualização mais simples da tabela;
  • Table Barchart (tabela com barras): mostra barras ao lado dos números;
  • Heatmap (mapa de calor): deixa mais vermelhas as células com maiores concentrações de dados. Também existem mapas de calor por linhas e por colunas;
  • Gráficos diversos: de barra, de linha, de área, de pizza, …

Também existe uma infinidade de tipos de agregações disponíveis:

Tipos de agregação dos valores

Tipos de agregação dos valores

Você pode simplesmente contar os resultados em cada célula da tabela dinâmica, pode fazer média, variância,  valor mínimo, máximo, soma sobre soma, lista valores na própria planilha e por aí vai.

Seguem algumas possibilidades adicionais de personalização (na página de exemplos você encontrará os códigos):

  • Ao clicar em uma célula da tabela mostrar os registros relacionados (adoro essa funcionalidade, além de fazer as análises, os usuários conseguem ver exatamente os registros envolvidos);
  • Atributos derivados (a partir de um valor você pode criar novos campos e disponibilizar na tabela);
  • Filtros (aquela setinha ao lado do campo serve para filtrar), agregações específicas e ordenações (clique no cabeçalho de uma coluna ou linha da tabela);
  • Carregar dados a partir de um CSV;
  • Personalizar os labels dos cabeçalhos das linhas e colunas;
  • Diversas engines para renderização dos gráficos: D3, C3 e Google Chart;
  • Salvar configurações da tabela dinâmica (o usuário monta uma tabela super complexa, daí ele pode salvá-la e reutilizá-la com novos conjuntos de dados);
  • Configurações para dispositivos touch screen (nos quais não seria possível clicar e arrastar um campo);
  • Exportar os resultados na tabela para Excel;
  • Disponível no Npm (Javascript Package Manager) e no Cdnjs (Javascript Content Delivery Network).

Minha experiência com a PivotTable.js tem sido ótima:

  • Utilizo há alguns anos e nunca tive dores de cabeça;
  • Suporta milhares de registros tranquilamente;
  • É executada no cliente;
Restrições

Só é necessário tomar alguns cuidados. Lembre que os dados necessários para trabalhar com a tabela dinâmica precisam ser recuperados a partir do banco de dados, enviados pela rede para o navegador e carregados na memória do cliente.

Se você tem uma grande quantidade de registros envolvidos nesse processo (dezenas de milhares) com alta demanda, você pode estar sobrecarregando seu banco de dados, sua rede ou seus clientes. Nesse caso, é recomendado avaliar uma solução de BI.

Mais exemplos

Para terminar, dá uma olhada nesses dois exemplos:

700 datasets que acompanham o R na PivotTable

Carregue seu próprio CSV para brincar na PivotTable

Esse último exemplo é muito rico: carregue seu CSV e a biblioteca faz o restante. Dá para sentir as inúmeras possibilidades e o poder que podemos dar aos usuários dos nossos sistemas com a PivotTable? Além da simplicidade de codificação …

Já tive a oportunidade de trabalhar com tabelas pivotantes em diversas tecnologias e a PivotTable.js consegue ser até mais simples que algumas das soluções mais disseminadas no mercado (claro, com as limitações que já citei).

E aí, pronto para começar a brincar?

Espero que tenha gostado do conteúdo.

Agradeço se você puder compartilhar esse artigo em suas redes sociais.

Em breve, mais conteúdos de qualidade para você aqui no Blog Eu na TI, o seu Blog sobre Tecnologia da Informação.

Assine nosso Blog por e-mail e curta nossas páginas nas redes sociais para acompanhar novas postagens.

Sabia que você também pode escrever para o Blog Eu na TI?

Um forte abraço e até mais.

Olá, sou Jonathan Maia, marido, pai, apaixonado por tecnologia, gestão e produtividade. Atuo na gestão e desenvolvimento de sistemas de informação como analista de TI do TRT Ceará (servidor público federal).

Possuo as certificações em gerenciamento de projetos Project Management Professional (PMP) e Professional Scrum Master I (PSM I), além de especialização em gerenciamento de projetos de TI (2011) e bacharelado em ciências da computação pela UFC (2008). Também sou desenvolvedor Full Stack e possuo experiência em diversas arquiteturas / plataformas.

Fui aprovado e nomeado nos concursos públicos do TJ-CE, Dataprev, Serpro e TRT Ceará, assumindo nos três últimos. Já tive experiências profissionais em redes metropolitanas de alta velocidade (GigaFOR/RNP), business intelligence, desenvolvimento de sistemas e gestão de projetos (tradicionais e ágeis).

Como adepto da gestão ágil, desenvolvi o Organizador Ágil, um método ágil, simples e leve que auxilia no aumento da produtividade e organização pessoal, familiar ou profissional. Também mantenho o Blog Eu na TI.

Deixe uma resposta