1.0.84 • Published 2 years ago

looker-vizbuilder v1.0.84

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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 webpack@4.46.0 -g
yarn add webpack-cli@3.3.11 -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.

1.0.84

2 years ago

1.0.83

2 years ago

1.0.82

2 years ago

1.0.66

2 years ago

1.0.65

2 years ago

1.0.69

2 years ago

1.0.68

2 years ago

1.0.67

2 years ago

1.0.73

2 years ago

1.0.72

2 years ago

1.0.71

2 years ago

1.0.70

2 years ago

1.0.77

2 years ago

1.0.76

2 years ago

1.0.75

2 years ago

1.0.74

2 years ago

1.0.79

2 years ago

1.0.78

2 years ago

1.0.80

2 years ago

1.0.81

2 years ago

1.0.62

2 years ago

1.0.64

2 years ago

1.0.63

2 years ago

1.0.61

2 years ago

1.0.60

2 years ago

1.0.55

2 years ago

1.0.59

2 years ago

1.0.58

2 years ago

1.0.56

2 years ago

1.0.54

2 years ago

1.0.53

2 years ago

1.0.52

2 years ago

1.0.51

2 years ago

1.0.50

2 years ago

1.0.49

2 years ago

1.0.48

2 years ago

1.0.47

2 years ago

1.0.46

2 years ago

1.0.45

2 years ago

1.0.44

2 years ago

1.0.43

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.0.40

2 years ago

1.0.39

2 years ago

1.0.38

2 years ago

1.0.37

2 years ago

1.0.36

2 years ago

1.0.35

2 years ago

1.0.34

2 years ago

1.0.33

2 years ago

1.0.32

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago