Tutorial: Criar um visual do Power BI da plataforma R

Como desenvolvedor, você pode criar seus próprios visuais do Power BI. Esses visuais podem ser usados por você, sua organização ou por terceiros.

Este artigo é um guia passo a passo para criar um visual da plataforma R para o Power BI.

Neste tutorial, você aprenderá a:

  • Criar um visual da plataforma R
  • Editar o script R no Power BI Desktop
  • Adicionar bibliotecas ao arquivo de dependências do visual
  • Adicionar uma propriedade estática

Pré-requisitos

Introdução

  1. Preparar alguns dados de exemplo para o visual. Você pode salvar esses valores em um banco de dados ou arquivo .csv do Excel e importá-lo para o Power BI Desktop.

    MonthNo Total de unidades
    1 2303
    2 2319
    3 1732
    4 1615
    5 1427
    6 2253
    7 1147
    8 1515
    9 2516
    10 3131
    11 3170
    12 2762
  2. Para criar um visual, abra o PowerShell ou o Terminal e execute o seguinte comando:

    pbiviz new rVisualSample -t rvisual
    

    Esse comando cria uma pasta para o visual rVisualSample. A estrutura é baseada no modelo rvisual. Ele cria um arquivo chamado script.r na pasta raiz do visual. O arquivo contém o script R que é executado para gerar a imagem quando o visual é renderizado. Você pode criar o seu script R no Power BI Desktop.

  3. No diretório rVisualSample recém-criado, execute o seguinte comando:

    pbiviz start
    
  4. No Power BI Desktop, selecione o visual do script R:

    Screenshot of the R script visual control in the Power BI Desktop.

  5. Atribua dados ao visual do desenvolvedor arrastando MonthNo e Total units a Values ao visual.

    Screenshot showing where to add data to values.

  6. Defina o tipo de agregação de Total de unidades como Não resumir.

    Screenshot of menu with option for not summarizing data.

  7. No editor de script R do Power BI Desktop, digite o seguinte:

    plot(dataset)
    

    Esse comando cria um gráfico de dispersão usando os valores no modelo semântico como entrada.

  8. Selecione o ícone de Executar script para ver o resultado.

    Screenshot of R visual chart with data.

Editar o script R

O script R pode ser alterado para criar outros tipos de visuais. Vamos criar um gráfico de linhas em seguida.

  1. Cole o seguinte código R no editor de script R.

    x <- dataset[,1] # get the first column from semantic model
    y <- dataset[,2] # get the second column from semantic model
    
    columnNames = colnames(dataset) # get column names
    
    plot(x, y, type="n", xlab=columnNames[1], ylab=columnNames[2]) # draw empty plot with axis and labels only
    lines(x, y, col="green") # draw line plot
    
  2. Selecione o ícone de Executar script para ver o resultado.

    Screenshot of the result of running the script, which is a line plot.

  3. Quando o script R estiver pronto, copie-o para o arquivo script.r localizado no diretório raiz do projeto do visual.

  4. No arquivo capabilities.json, altere o dataRoles: name para conjunto de dados e defina a entrada dataViewMappings como conjunto de dados.

    {
      "dataRoles": [
        {
          "displayName": "Values",
          "kind": "GroupingOrMeasure",
          "name": "dataset"
        }
      ],
      "dataViewMappings": [
        {
          "scriptResult": {
            "dataInput": {
              "table": {
                "rows": {
                  "select": [
                    {
                      "for": {
                        "in": "dataset"
                      }
                    }
                  ],
                  "dataReductionAlgorithm": {
                    "top": {}
                  }
                }
              }
            },
            ...
          }
        }
      ],
    }
    
  5. Adicione o código a seguir para dar suporte ao redimensionamento da imagem no arquivo src/visual.ts.

      public onResizing(finalViewport: IViewport): void {
          this.imageDiv.style.height = finalViewport.height + "px";
          this.imageDiv.style.width = finalViewport.width + "px";
          this.imageElement.style.height = finalViewport.height + "px";
          this.imageElement.style.width = finalViewport.width + "px";
      }
    

Adicionar bibliotecas ao pacote visual

O pacote corrplot cria uma exibição gráfica de uma matriz de correlação. Para saber mais sobre corrplot, confira Uma introdução ao pacote corrplot.

  1. Adicione a dependência da biblioteca corrplot ao arquivo dependencies.json. Aqui está um exemplo do conteúdo do arquivo:

    {
      "cranPackages": [
        {
          "name": "corrplot",
          "displayName": "corrplot",
          "url": "https://cran.r-project.org/web/packages/corrplot/"
        }
      ]
    }
    
  2. Agora você pode começar a usar o pacote corrplot no arquivo script.r.

    library(corrplot)
    corr <- cor(dataset)
    corrplot(corr, method="circle", order = "hclust")
    

    O resultado do uso do pacote corrplot é semelhante a este exemplo:

    Screenshot of the visualization pane with four ovals created by corrplot.

Adicionar uma propriedade estática ao painel de propriedades

Agora que há um visual corrplot básico, vamos adicionar propriedades ao painel de propriedades que permitem que o usuário altere a aparência do visual.

Usamos o argumento method para configurar a forma dos pontos de dados. O script padrão usa um círculo. Modifique o visual para permitir que o usuário escolha entre várias opções.

  1. Defina um object chamado configurações no arquivo capabilities.json e insira as propriedades a seguir.

    "settings": {
      "properties": {
        "method": {
          "type": {
            "enumeration": [
              { "value": "circle" },
              { "value": "square" },
              { "value": "ellipse" },
              { "value": "number" },
              { "value": "shade" },
              { "value": "color" },
              { "value": "pie" }
            ]
          }
        }
      }
    }
    
  2. Abra o arquivo src/settings.ts. Crie uma classe VisualCardSettings com as propriedades públicas method, name, displayName e slices, conforme mostrado na caixa de código abaixo.

    import ItemDropdown = formattingSettings.ItemDropdown;
    
    const methodOptions = [
        {
            displayName: "Circle",
            value: "circle"
        },
        {
            displayName: "Square",
            value: "square"
        },
        {
            displayName: "Ellipse",
            value: "ellipse"
        },
        {
            displayName: "Number",
            value: "number"
        },
        {
            displayName: "Shade",
            value: "shade"
        },
        {
            displayName: "Color",
            value: "color"
        },
        {
            displayName: "Pie",
            value: "pie"
        }
    ]
    
    class VisualCardSettings extends FormattingSettingsCard {
        method: FormattingSettingsSlice = new ItemDropdown({
            name: "method",
            displayName: "Method",
            items: methodOptions,
            value: methodOptions[0]
        });
    
        name: string = "settings";
        displayName: string = "Settings";
        slices: Array<FormattingSettingsSlice> = [this.method];
    }
    

    Depois destas etapas, você poderá alterar a propriedade do visual.

    Screenshot of R visual settings.

    O script R deve ter uma propriedade padrão. Se o usuário não alterar o valor da propriedade (nesse caso, a configuração da forma), o visual vai usar esse valor.

    Para variáveis de tempo de execução do R para as propriedades, a convenção de nomenclatura é <objectname>_<propertyname>, neste caso, settings_method.

  3. Execute o seguinte script R:

    library(corrplot)
    corr <- cor(dataset)
    
    if (!exists("settings_method"))
    {
        settings_method = "circle";
    }
    
    corrplot(corr, method=settings_method, order = "hclust")
    

Empacotar e importar o visual

Você pode empacotar o visual e importá-lo em qualquer relatório do Power BI.

  1. Preencha displayName, supportUrl, description, name e email do autor, e todas as outras informações importantes no arquivo pbivis.json.

  2. Se você quiser alterar o ícone do visual no painel de visualização, substitua o arquivo icon.png na pasta assets.

  3. Do diretório raiz do seu visual, execute:

    pbiviz package
    

    Para obter mais informações sobre como empacotar o visual, confira Empacotar o visual personalizado

  4. Importe o arquivo pbiviz do visual em qualquer relatório do Power BI. Confira Importar um arquivo visual do computador local no Power BI para obter instruções sobre como fazer isso.

  5. Seu visual final é semelhante ao exemplo abaixo:

Screenshot of R visual settings with changed value.