Como desenvolver uma visualização personalizada para o Looker Marketplace

Nesta página, descrevemos como criar um tipo de visualização personalizada que pode ser adicionado ao Looker Marketplace e acessado por outros usuários do Looker. Também é possível criar uma visualização personalizada diretamente no projeto sem disponibilizá-lo a outros clientes do Looker.

Você precisa ser membro da rede de parceiros do Looker ou ser cliente do Looker para enviar conteúdo ao Looker Marketplace.

O Looker Marketplace é um local central para encontrar, implantar e gerenciar vários tipos de conteúdo, como Looker BlocksTM, aplicativos, visualizações e outros plug-ins.

Com o recurso Marketplace do Looker ativado, os clientes do Looker podem instalar plug-ins do Looker Marketplace, que incluem tipos de visualização que podem ser adicionados à biblioteca de visualização nativa do Looker.

Para desenvolver uma visualização personalizada e disponibilizá-la para todos os clientes do Looker no Looker Marketplace, siga estas etapas:

  1. Desenvolva uma visualização.
  2. Crie um projeto do Looker para a visualização.
  3. Envie o projeto do Looker para um repositório Git.
  4. Teste a funcionalidade da visualização.
  5. Envie sua visualização para o Looker.

Como desenvolver um tipo de visualização

Identifique o tipo de visualização que você quer desenvolver. Confirme se essa visualização ainda não está listada no Marketplace ou como uma visualização nativa do Looker.

Desenvolva sua visualização personalizada em JavaScript usando a API Looker Visualization com o ambiente JavaScript.

Como criar um projeto do Looker para a visualização

Crie um projeto do Looker para representar sua visualização personalizada. O projeto deve conter os seguintes arquivos:

  • Arquivo LICENSE: lista as licenças com que a visualização é distribuída, usando o texto
    "Esta visualização do Looker é distribuída com a seguinte licença:...".

  • README.md: fornece uma descrição da visualização, como ela funciona e outras informações.

  • Arquivo JavaScript (.js): contém uma versão condensada do código JavaScript que você usou para produzir sua visualização. Com o Marketplace, os arquivos JS são incluídos no projeto, o que permite o controle de versões e o gerenciamento de pacotes adequados.

  • Arquivo de manifesto (manifest.lkml): especifica um id (um identificador exclusivo) e um label (exibido na IU do Looker para essa visualização). Exemplo:

    constant: vis_id {
        value: "default_id"
        export: override_optional
    }
    constant: vis_label {
        value: "default_label"
        export: override_optional
    }
    visualization: {
        id: "@{vis_id}"
        label: "@{vis_label}"
        file: "my_local.js"
        sri_hash: "my_sri_hash"
        dependencies: []
    }
  • Arquivo de listagem (marketplace.json): configura a página "Detalhes do app" para a visualização personalizada e inclui um rótulo para definir como ela será exibida no Marketplace, o local do image_uri, um slogan que descreve o caso de uso da visualização e também define as constantes de campo do Marketplace que os usuários inserem durante a instalação. Exemplo:
{
  "label": "Gauge Visualization",
  "category_label": "plug-ins",
  "branding": {
    "image_uri": "https://marketplace-api.looker.com/visualization-screenshots/gauge_icon.png",
    "tagline": "Use the Gauge visualization to display a measure and progress to a goal."
  },
   "constants": {
        "vis_label": {
            "label": "Visualization Label",
            "description": "This label will appear in the visualization selector in the Looker Explore UI."
        },
        "vis_id": {
            "label": "Visualization Id",
            "description": "This must be a unique ID across all visualizations.",
            "value_constraint": "visualization"
        }
    }
}

Enviar o projeto para o Git

Hospede sua visualização LookML em um repositório do GitHub acessível ao público. Se você criou a visualização em um projeto do Looker, siga estas etapas para enviá-la a um novo repositório:

  1. Crie um repositório do GitHub acessível ao público.
  2. Defina o URL do repositório do seu projeto do Looker como o URL do repositório do GitHub.
  3. Siga as instruções do Git no Looker para validar, confirmar e implantar o código na produção.

Como testar a funcionalidade da visualização

Teste a nova visualização aplicando-a a um recurso "Explorar" ou "Visualizar" adequado na sua instância do Looker:

  1. Navegue até a interface ou "Explorar".
  2. Se estiver em um visual, clique em Editar para editar a aparência.
  3. Clique no menu de três pontos no menu de tipo de visualização para abrir a lista suspensa de visualizações.
  4. Selecione sua visualização personalizada.
  5. Clique em Save para salvar a alteração na aparência. Observe os painéis que podem ser afetados por essa alteração.

O Looker exige estas funções nas visualizações disponíveis no Looker Marketplace:

Função Obrigatório
Suporte para detalhamento da visualização Sim
Capacidade de herdar paletas de cores do Looker Sim
Capacidade de resposta ao navegador e ao tamanho da tela Sim
Família de fontes consistente: font-family: Helvetica, Arial, sans-serif Sim
Dimensionamento de fonte Sim
Capacidade de alternar Rótulos de valor e Marcadores de eixo no painel de configuração da visualização. Sim
Visualização de dados dinamizados Sim (quando aplicável)
Atualizações de visualização com base na interatividade do usuário usando a função updateAsync ou is update function Sim
limpar mensagens de erro (por exemplo, Esta visualização requer uma dimensão e duas medidas); Sim
Todas as opções no painel de configuração da visualização fazem uma alteração aparente na visualização. Sim
Uso da formatação value do campo por padrão Sim (quando aplicável)
O erro é gerado quando uma consulta não retorna resultados Sim

Como enviar a visualização para revisão

Quando a visualização estiver pronta, siga as instruções em Enviar conteúdo para o Looker Marketplace e crie a documentação de apoio para sua visualização, envie a visualização à equipe do Looker para revisão e publique-a no Looker Marketplace.