Parte 2 — Construindo um visual do zero

Este artigo é uma continuação do primeiro artigo em que criamos um visual do zero. A abordagem que usamos foi muito direta, usamos diretamente as interfaces de dados sem usar nenhuma digitação. Neste artigo, adicionaremos digitação. Em vez de ler você também pode assistir ao vídeo:

O commit do vídeo acima pode ser encontrado aqui e aqui .

O texto abaixo é uma versão ligeiramente estruturada/reduzida da transcrição do áudio do vídeo acima. O vídeo tem várias etapas de verificação do console.log, enquanto o texto abaixo mostra as alterações finais feitas no código.

Adicionar interfaces explícitas e adicionar digitação

Vamos adicionar alguns campos adicionais para que não tenhamos apenas o nome do KPI, mas também a descrição e a dica de ferramenta.

Vamos adicionar esses campos às funções de dados (em capacidades.json).

Também precisamos alterar a ligação (em capacidades.json):

O que podemos fazer agora é obter a posição do índice de cada um desses campos individuais, portanto, para isso, precisaremos do auxiliar de função de dados que nos ajudará a identificar a posição do índice de um campo específico. Vamos importar esta função.

import { dataRoleHelper } from "powerbi-visuals-utils-dataviewutils";

categorical = options.dataViews[0].categorical;

let kpiId = dataRoleHelper.getCategoryIndexOfRole(categorical.categories, "kpi")

Podemos verificar porque, basicamente, ele está procurando funções, então sempre que for verdade, ele retorna essa posição e a descrição é realmente como o segundo campo de dados que estamos recebendo, portanto, ainda é preciso o que estamos recebendo. Mais informações estão disponíveis aqui .

Agora que temos essas interfaces explícitas, vamos aplicar alguma digitação. Vamos definir uma interface de ponto de dados onde vamos especificar especificamente cada coluna neste array, vai ser um par chave-valor.

Agora podemos adicionar um 'For Loop' pelo qual iremos iterar sobre os nomes de KPI e, em seguida, preencher a matriz que foi digitada e enviaremos os valores que estamos recebendo, então, primeiro, pegue o KPI valores;

let kpiVals = categorical.categories[kpiId]['values'];

A partir daqui, nossa referência em D3 não é baseada em um índice de coluna, mas sim no nome da coluna, como aqui:

.style("fill", (d: kpiDataPoint) => d.colour)