O que é webdatarocks? e como implementar no Angular2+

PIN

É uma solução gratuita para controle de tabelas Pivot onde em poucas linhas para a integração consegue-se analisar dados de forma ‘mágica’ e muito usual.

Recebi o desafio de integrar o webdatarocks em um sistema de farmácias para se acompanhar algumas informações importantes de analise de dados.

Para aqueles que ainda não viram mas tem interesse ou para aqueles que estão perdidos assim como eu fiquei para fazer ele funcionar no Angular6+, segue agora um pequeno
texto e prints que vão lhe ajudar a integrar em seu sistema.

Primeiro problema encontrado!
Mesmo utilizando o comando ‘npm i webdatarocks’ ele não era reconhecido pelo meu projeto.

Depois de muitas buscas, a solução desse problema foi clonar esse repositório e pegar apenas essa pastinha “webdatarocks” em que eu mostro no link e jogar dentro do meu projeto

https://github.com/WebDataRocks/pivot-angular/tree/master/src/app/webdatarocks

Importanto em seu app.module.ts
O webdatarocks precisa ser importado da pasta que acabou de colocar dentro da pasta /app e adicionado em “declarations”, assim poderá usar em qualquer parte do seu projeto.

// imports 
import { WebDataRocksPivot } from “./webdatarocks/webdatarocks.angular4”;

@NgModule({
 declarations: [
 WebDataRocksPivot
 ],
 imports: [
 ],
 providers: [],
 bootstrap: []
})

export class AppModule { }

Em seu componente, importe o webdatarocks 😉

‘meucomponent.component.js’

import { WebDataRocksPivot } from ‘../../../webdatarocks/webdatarocks.angular4’;

Dentro do seu export faça essa chamada

export class MeuComponent implements OnInit {
@ViewChild(‘pivot1’) child: WebDataRocksPivot;
}

‘pivot1’ é como o componente do webdatarocks é encontrado pelo .js e em seu html ficaria assim.

No caso iniciei um .post para consumir os dados e criei uma função para alimentar meu código webdatarocks

Aqui é onde a mágica do webdatarocks acontece, como podem ver não é lá um bixo de 7 cabeças mas perdi um tempinho tentando encontrar uma solução de como implementar no angular6+

Aqui é onde ele recebe os dados e monta a sua tabela com as informações desejadas.

dataSource: {
 data: saldo
}

também há a possibilidade de receber um link que é carregado com um formato json e outros, exemplo.

dataSource: {
 filename: “https://cdn.webdatarocks.com/data/data.json"
}

dataSource: {
 dataSourceType: “csv”,
 filename: “https://cdn.webdatarocks.com/data/data.csv"
}

Um problema que me pegou depois que consegui implementar foi como eu poderia desabilitar o doubleclick da tabela pois é uma pena é que não seja possível segundo o webdatarocks injetar uma segunda chamada de função e carregar dados no modal que eles disponibilizam por meio desse drillThrough e novamente buscas e mais buscas e nada de respostas.

Consegui uma solução no fórum depois de algumas perguntas que fiz por la e a resposta veio.

dataSource: {
 data: saldo
},
options: {
 drillThrough: true
}

Nesse trecho de código eu desabilito o modal no ‘options’ que abre quando eu clico duas vezes e agora me possibilitando fazer o que eu quiser com meu duplo click por fora do componente webdatarocks.

E assim termina minha saga e implementação!

Aqui segue um exemplo mais visual do que se trata em AngularJs, para implementar no angular2+, basta seguir o passo a passo descrito acima 😉

https://codepen.io/webdatarocks/embed/preview/vRLmyB?height=600&slug-hash=vRLmyB&default-tabs=html,result&host=https://codepen.io

Espero que esse texto ajude a sua implementação do webdatarocks em seu site ou sistema e se tiver algo a compartilhar sobre, vamos trocar figurinhas 🙂

Leave Your Comments