Looker - Visualizações Personalizadas

Atualmente, esta biblioteca é compatível com a versão 12 do NodeJS

Projeto de criação de gráficos personalizados para o Looker usando o Echarts da Apache

1 - Dentro do seu projeto, execute os seguintes comandos:

yarn add looker-vizbuilder

node ./node_modules/looker-vizbuilder/bin/init

yarn add [email protected] -g

yarn add [email protected] -g

yarn add nodemon

2 - Ambiente de desenvolvimento

Para iniciar o ambiente de desenvolvimento, execute o seguinte comando na raiz do projeto:

yarn dev

Agora, abra o browser de sua preferência e entre no endereço: http://localhost

Variáveis disponíveis para uso:
params.data => Conterá os dados vindos do looker.
params.config => Conterá dados de configuração do gráfico, que poderá ser editado no explore do looker.
Quando for adicionado no arquivo ./src/charts/[chart name]/common/index.js do seu projeto, o mesmo deverá ser adicionado dentro do export const options = {}

Exemplo de desenvolvimento:

 "font_weight": {
    "section": "Layout",
    "type": "string",
    "label": "Font Weight",
    "display": "select",
    "values": [{ "normal": "normal" }, { "bold": "bold" }],
    "default": "normal"
  }

O ambiente de desenvolvimento irá pegar o  valor que estiver definido na chave "default"

params.details => Conterá dados do crossFilters, ou seja, os dados filtrados no dashboard.
params.queryResponse => Conterá os nomes das dimensões e medidas.

Você poderá manupulá-los dentro da pasta /data que foi criada na raiz do projeto e chamá-las no ambiente de desenvolvimento.
Após a modificação destes arquivos, será necessário dar F5 no localhost.

*Note que no echarts, normalmente, temos o nó **option = {}** 
E para que funcione em nossa biblioteca, você deverá chamar de **chartData = {}**

3 - Criar a estrutura do gráfico dentro do projeto

Após o desenvolvimento, é hora de colocar seu código dentro do projeto, e para isso, vamos criar a estrutura no projeto.
Execute o seguinte comando na raiz do projeto:

yarn chart [chart name]

Substituir o [chart name] pelo nome do seu gráfico. Não use caracteres especiais e não use espaço.

Você deverá ver que dentro do diretório /src foi criado um arquivo com o nome do seu gráfico.
E dentro de /src/charts foi criada uma pasta com o nome do seu gráfico.
Dentro de  /src/charts/[chart name]/index.js será o local onde você colocará seu código feito no ambiente de desenvolvimento.
Coloque seu código entre o escopo //BEGIN e //END
Pegue os dados de configuração contidos no arquivo ./data/config.json e crie os nós referente a cada opção no arquivo ./src/charts/[chart name]/common/index.js conforme o formato exigido pelo looker. 
Exemplo:

font_weight: {
    section: "Layout",
    type: "string",
    label: "Font Weight",
    display: "select",
    values: [{ normal: "normal" }, { bold: "bold" }],
    default: "normal",
}

Você terá um arquivo css para customizar o gráfico dentro do projeto.
/src/charts/[chart name]/style/index.js
Este arquivo já contem algumas configurações sendo usadas, antes de gerar o arquivo de distribuição, cheque este arquivo e veja as variáveis que estão sendo usadas, excluir ou adicionar alguma configuração poderá ser necessário, caso contrário seu gráfico não será carregado no looker.

4 - Gerando o arquivo de distribuição

Após ter feito todos estes passos, você deverá gerar o arquivo que será colocado no looker dentro da pasta ./dist

E para isso, execute o seguinte comando na raiz do seu projeto:

yarn [chart name]

Substituir o [chart name] pelo nome do seu gráfico.
Você verá que foi criado um arquivo com o nome do seu gráfico dentro da pasta ./dist na raiz do seu projeto.
Pegue este arquivo e coloque dentro de uma pasta chamada dist no seu projeto do looker.
Caso preferir, arraste o arquivo do seu computador para o projeto looker.
Em seguida, copie os dados de seu gráfico que está no arquivo manifest.lkml do seu projeto local e coloque dentro do arquivo manifest.lkml do looker.
Faça o deploy do seu projeto looker e tente localizar seu gráfico dentro do explore.
Poderá ser necessário o debug e correção do seu gráfico, e para isso, habilite o modo desenvolvedor do seu browser.