Estrutura do projeto do visual do Power BIPower BI visual project structure

A melhor maneira de começar a criar um novo visual no Power BI é usando a ferramenta pbiviz para visuais do Power BI.The best way to start creating a new Power BI visual is to use the Power BI visuals pbiviz tool.

Para criar um novo visual, navegue até o diretório no qual você deseja que o visual do Power BI resida e execute o comando:To create a new visual, navigate to the directory you want the Power BI visual to reside in, and run the command:

pbiviz new <visual project name>

A execução desse comando cria a pasta do visual do Power BI, que contém os seguintes arquivos:Running this command creates a Power BI visual folder that contains the following files:

project
├───.vscode
│   ├───launch.json
│   └───settings.json
├───assets
│   └───icon.png
├───node_modules
├───src
│   ├───settings.ts
│   └───visual.ts
├───style
│   └───visual.less
├───capabilities.json
├───package-lock.json
├───package.json
├───pbiviz.json
├───tsconfig.json
└───tslint.json

Descrição da pasta e do arquivoFolder and file description

Esta seção fornece informações de cada pasta e arquivo do diretório criado pela ferramenta pbiviz dos visuais do Power BI.This section provides information for each folder and file in the directory that the Power BI visuals pbiviz tool creates.

.vscode.vscode

Esta pasta contém as configurações do projeto do VS Code.This folder contains the VS code project settings.

Para configurar seu novo workspace, edite o arquivo .vscode/settings.json.To configure your workspace, edit the .vscode/settings.json file.

Saiba mais em Configurações do Workspace e do UsuárioFor more information, see User and Workspace Settings

ativosassets

Esta pasta contém o arquivo icon.png.This folder contains the icon.png file.

A ferramenta de visuais do Power BI usa esse arquivo como o novo ícone do visual do Power BI no painel de visualização Power BI.The Power BI visuals tool uses this file as the new Power BI visual icon in the Power BI visualization pane.

srcsrc

Esta pasta contém o código-fonte do visual.This folder contains the visual's source code.

Nessa pasta, a ferramenta de visuais do Power BI cria os seguintes arquivos:In this folder, the Power BI visuals tool creates the following files:

  • visual.ts, o código-fonte principal do visual.visual.ts - The visual's main source code.
  • settings.ts, o código de configurações do visual.settings.ts - The code of the visual's settings. As classes no arquivo fornecem uma interface para definir as propriedades do visual.The classes in the file provide an interface for defining your visual's properties.

estilostyle

Essa pasta contém o arquivo visual.less, que contém os estilos do visual.This folder contains the visual.less file, which holds the visual's styles.

capabilities.jsoncapabilities.json

Esse arquivo contém as principais propriedades e configurações (ou funcionalidades) do visual.This file contains the main properties and settings (or capabilities) for the visual. Ele permite que o visual declare recursos, objetos, propriedades e mapeamentos de exibição de dados com suporte.It allows the visual to declare supported features, objects, properties, and data view mapping.

package-lock.jsonpackage-lock.json

Esse arquivo é gerado automaticamente para qualquer operação em que o npm modifique a árvore node_modules ou o arquivo package.json.This file is automatically generated for any operations where npm modifies either the node_modules tree, or the package.json file.

Saiba mais sobre esse arquivo na documentação oficial do npm-package-lock.json.For more information about this file, see the official npm-package-lock.json documentation.

package.jsonpackage.json

Este arquivo descreve o pacote do projeto.This file describes the project package. Normalmente contém informações sobre o projeto, como os autores, a descrição e as dependências do projeto.It contains information about the project such as authors, description, and project dependencies.

Saiba mais sobre esse arquivo na documentação oficial do npm-package.json.For more information about this file, see the official npm-package.json documentation.

pbiviz.jsonpbiviz.json

Este arquivo contém os metadados do visual.This file contains the visual metadata.

Para exibir o arquivo pbiviz.json de exemplo com comentários que descrevem as entradas de metadados, confira a seção entradas de metadados.To view an example pbiviz.json file with comments describing the metadata entries, see the metadata entries section.

tsconfig.jsontsconfig.json

Um arquivo de configuração para TypeScript.A configuration file for TypeScript.

O arquivo deve conter o caminho para o arquivo *.ts em que a classe principal do visual está localizada na propriedade visualClassName do arquivo pbiviz.json.This file must contain the path to *.ts file where the main class of the visual is located, as specified in the visualClassName property in the pbiviz.json file.

tslint.jsontslint.json

O arquivo contém a configuração de TSLint.This file contains the TSLint configuration.

Entradas de metadadosMetadata entries

Os comentários na seguinte legenda de código do arquivo pbiviz.json descrevem as entradas de metadados.The comments in the following code caption from the pbiviz.json file, describe the metadata entries.

Observação

{
  "visual": {
     // The visual's internal name.
    "name": "<visual project name>",

    // The visual's display name.
    "displayName": "<visual project name>",

    // The visual's unique ID.
    "guid": "<visual project name>23D8B823CF134D3AA7CC0A5D63B20B7F",

    // The name of the visual's main class. Power BI creates the instance of this class to start using the visual in a Power BI report.
    "visualClassName": "Visual",

    // The visual's version number.
    "version": "1.0.0",
    
    // The visual's description (optional)
    "description": "",

    // A URL linking to the visual's support page (optional).
    "supportUrl": "",

    // A link to the source code available from GitHub (optional).
    "gitHubUrl": ""
  },
  // The version of the Power BI API the visual is using.
  "apiVersion": "2.6.0",

  // The name of the visual's author and email.
  "author": { "name": "", "email": "" },

  // 'icon' holds the path to the icon file in the assets folder; the visual's display icon.
  "assets": { "icon": "assets/icon.png" },

  // Contains the paths for JS libraries used in the visual.
  // Note: externalJS' isn't used in the Power BI visuals tool version 3.x.x or higher.
  "externalJS": null,

  // The path to the 'visual.less' style file.
  "style": "style/visual.less",

  // The path to the `capabilities.json` file.
  "capabilities": "capabilities.json",

  // The path to the `dependencies.json` file which contains information about R packages used in R based visuals.
  "dependencies": null,

  // An array of paths to files with localizations.
  "stringResources": []
}

Próximas etapasNext steps