Tutorial: Criar um gráfico de barras

Este tutorial mostra como desenvolver um visual do Power BI que exibe dados na forma de um gráfico de barras simples. Este visual suporta uma quantidade mínima de personalização. Outras páginas desta documentação explicam como adicionar mais personalização, como menus de contexto, dicas de ferramentas e muito mais.

Neste tutorial, irá aprender a:

Configurar o ambiente

Antes de começar a desenvolver seu visual do Power BI, verifique se você tem tudo listado nesta seção.

• Uma conta Power BI Pro ou Premium por usuário (PPU). Se não tiver uma, inscreva-se numa avaliação gratuita.

• Código do Visual Studio (VS Code). O VS Code é um ambiente de desenvolvimento integrado (IDE) ideal para o desenvolvimento de aplicações JavaScript e TypeScript.

• Windows PowerShell versão 4 ou posterior (para Windows). Ou Terminal (para Mac).

• Um ambiente pronto para desenvolver um visual do Power BI. Configure seu ambiente para desenvolver um visual do Power BI.

• Este tutorial usa o relatório Análise de vendas dos EUA. Você pode baixar esse relatório e carregá-lo no serviço do Power BI ou usar seu próprio relatório. Se precisar de mais informações sobre o serviço do Power BI e o carregamento de ficheiros, consulte o tutorial Introdução à criação no serviço do Power BI.

A criação de um gráfico de barras visual envolve as seguintes etapas:

1. Criar um novo projeto
2. Definir o arquivo de recursos -capabilities.json
3. Criar a API visual
4. Empacote seu visual -pbiviz.json

Criar um novo projeto

O objetivo deste tutorial é ajudá-lo a entender como um visual é estruturado e escrito. Você pode seguir estas instruções para criar um código de barras visual do zero, ou você pode clonar o repositório de código-fonte e usá-lo para acompanhar sem criar seu próprio visual.

git clone

Agora você deve ter uma nova pasta para o seu visual com os seguintes arquivos e pastas:

Para obter uma explicação detalhada da função de cada um desses arquivos, consulte Estrutura visual do projeto do Power BI.

Os dois arquivos em que nos concentramos neste tutorial são o arquivo capabilities.json , que descreve o visual para o host, e o arquivo src/barchart.ts , que contém a API do visual.

Definir capacidades

O arquivo capabilities.json é onde vinculamos dados ao host. Descrevemos o tipo de campos de dados que aceita e quais características o visual deve ter.

Definir funções de dados

As variáveis são definidas e vinculadas na dataRoles seção do arquivo de recursos. Queremos que o nosso gráfico de barras aceite dois tipos de variáveis:

• Dados categóricos representados pelas diferentes barras no gráfico
• Dados numéricos ou medidos, que são representados pela altura de cada barra

No Visual Studio Code, no arquivo capabilities.json , confirme se o seguinte fragmento JSON aparece no objeto rotulado "dataRoles".

    "dataRoles": [
        {
            "displayName": "Category Data",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        }
    ],

Mapear os dados

Em seguida, adicione o mapeamento de dados para dizer ao host o que fazer com essas variáveis:

Substitua o conteúdo do objeto "dataViewMappings" pelo seguinte código:

"dataViewMappings": [
        {
            "conditions": [
                {
                    "category": {
                        "max": 1
                    },
                    "measure": {
                        "max": 1
                    }
                }
            ],
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    }
                },
                "values": {
                    "select": [
                        {
                            "bind": {
                                "to": "measure"
                            }
                        }
                    ]
                }
            }
        }
    ],

O código acima cria as "condições" de que cada objeto de função de dados pode conter apenas um campo de cada vez. Observe que usamos o interno name da função de dados para nos referirmos a cada campo.

Ele também define o mapeamento de dados categóricos para que cada campo seja mapeado para a variável correta.

Definir objetos para o painel de propriedades

A seção "objetos" do arquivo de recursos é onde definimos os recursos personalizáveis que devem aparecer no painel de formato. Esses recursos não afetam o conteúdo do gráfico, mas podem alterar sua aparência.

Para obter mais informações sobre objetos e como eles funcionam, consulte Objetos.

Os objetos a seguir são opcionais. Adicione-os se quiser percorrer as seções opcionais deste tutorial para adicionar cores e renderizar o eixo X.

Substitua o conteúdo da seção "objetos" pelo seguinte código:

     "objects": {
        "enableAxis": {
            "properties": {
                "show": {
                    "type": {
                        "bool": true
                    }
                },
                "fill": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        },
        "colorSelector": {
            "properties": {
                "fill": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        }
     },

Salve o arquivo capabilities.json .

Seu arquivo de recursos final deve ser parecido com o deste exemplo.

Visual API

Todos os elementos visuais começam com uma classe que implementa a IVisual interface. O arquivo src/visual.ts é o arquivo padrão que contém essa classe.

Neste tutorial, chamamos nosso IVisual arquivo de barChart.ts. Transfira o ficheiro e guarde-o na pasta /src , caso ainda não o tenha feito. Nesta seção, passamos por este arquivo em detalhes e descrevemos as várias seções.

Importações

A primeira seção do arquivo importa os módulos necessários para esse visual. Observe que, além dos módulos visuais do Power BI, também importamos a biblioteca d3.

Os seguintes módulos são importados para o arquivo barChart.ts :

import {
    BaseType,
    select as d3Select,
    Selection as d3Selection
} from "d3-selection";
import {
    ScaleBand,
    ScaleLinear,
    scaleBand,
    scaleLinear
} from "d3-scale";
import "./../style/visual.less";

import { Axis, axisBottom } from "d3-axis";

import powerbi from "powerbi-visuals-api";

type Selection<T extends BaseType> = d3Selection<T, any, any, any>;

// powerbi.visuals
import DataViewCategoryColumn = powerbi.DataViewCategoryColumn;
import Fill = powerbi.Fill;
import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
import ISelectionId = powerbi.visuals.ISelectionId;
import IVisual = powerbi.extensibility.IVisual;
import IVisualHost = powerbi.extensibility.visual.IVisualHost;
import PrimitiveValue = powerbi.PrimitiveValue;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import DataViewObjectPropertyIdentifier = powerbi.DataViewObjectPropertyIdentifier;

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";

import { BarChartSettingsModel } from "./barChartSettingsModel";
import { dataViewObjects} from "powerbi-visuals-utils-dataviewutils";

Interfaces

Em seguida, definimos as interfaces visuais. A interface a seguir é usada para descrever nosso gráfico de barras visual:

• BarChartDataPoint

Esta interface é definida da seguinte forma:

/**
 * Interface for BarChart data points.
 *
 * @interface
 * @property {PrimitiveValue} value     - Data value for point.
 * @property {string} category          - Corresponding category of data value.
 * @property {string} color             - Color corresponding to data point.
 * @property {string} strokeColor       - Stroke color for data point column.
 * @property {number} strokeWidth       - Stroke width for data point column.
 * @property {ISelectionId} selectionId - Id assigned to data point for cross filtering
 *                                        and visual interaction.
 */
interface BarChartDataPoint {
    value: PrimitiveValue;
    category: string;
    color: string;
    strokeColor: string;
    strokeWidth: number;
    selectionId: ISelectionId;
}

Transformação visual

Agora que a estrutura de dados está definida, precisamos mapear os dados nela usando a createSelectorDataPoints função. Esta função recebe dados da visualização de dados e os transforma em um formato que o visual pode usar. Nesse caso, ele retorna a BarChartDataPoint[] interface descrita na seção anterior.

O DataView contém os dados a serem visualizados. Esses dados podem ser de diferentes formas, como categóricos ou tabulares. Para criar um visual categórico como um gráfico de barras, use a propriedade categórica no DataView.

Esta função é chamada sempre que o visual é atualizado.

/**
 * Function that converts queried data into a viewmodel that will be used by the visual.
 *
 * @function
 * @param {VisualUpdateOptions} options - Contains references to the size of the container
 *                                        and the dataView which contains all the data
 *                                        the visual had queried.
 * @param {IVisualHost} host            - Contains references to the host which contains services
 */
function createSelectorDataPoints(options: VisualUpdateOptions, host: IVisualHost): BarChartDataPoint[] {
    const barChartDataPoints: BarChartDataPoint[] = []
    const dataViews = options.dataViews;

    if (!dataViews
        || !dataViews[0]
        || !dataViews[0].categorical
        || !dataViews[0].categorical.categories
        || !dataViews[0].categorical.categories[0].source
        || !dataViews[0].categorical.values
    ) {
        return barChartDataPoints;
    }

    const categorical = dataViews[0].categorical;
    const category = categorical.categories[0];
    const dataValue = categorical.values[0];

    const colorPalette: ISandboxExtendedColorPalette = host.colorPalette;

    const strokeColor: string = getColumnStrokeColor(colorPalette);

    const strokeWidth: number = getColumnStrokeWidth(colorPalette.isHighContrast);

    for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
        const color: string = getColumnColorByIndex(category, i, colorPalette);

        const selectionId: ISelectionId = host.createSelectionIdBuilder()
            .withCategory(category, i)
            .createSelectionId();

        barChartDataPoints.push({
            color,
            strokeColor,
            strokeWidth,
            selectionId,
            value: dataValue.values[i],
            category: `${category.values[i]}`,
        });
    }

    return barChartDataPoints;
}

Renderizar o visual

Uma vez que os dados são definidos, renderizamos o visual usando a classe BarChart que implementa aIVisual interface. A IVisual interface é descrita na página Visual API . Ele contém um constructor método que cria o visual e um update método que é chamado cada vez que o visual é recarregado. Antes de renderizar o visual, temos que declarar os membros da classe:

export class BarChart implements IVisual {
    private svg: Selection<SVGSVGElement>;
    private host: IVisualHost;
    private barContainer: Selection<SVGElement>;
    private xAxis: Selection<SVGGElement>;
    private barDataPoints: BarChartDataPoint[];
    private formattingSettings: BarChartSettingsModel;
    private formattingSettingsService: FormattingSettingsService;

    private barSelection: Selection<BaseType>;

    static Config = {
        xScalePadding: 0.1,
        solidOpacity: 1,
        transparentOpacity: 1,
        margins: {
            top: 0,
            right: 0,
            bottom: 25,
            left: 30,
        },
        xAxisFontMultiplier: 0.04,
    };
}

Construa o visual

A função do construtor é chamada apenas uma vez, quando o visual é renderizado pela primeira vez. Ele cria contêineres SVG vazios para o gráfico de barras e o eixo X. Observe que ele usa a biblioteca d3 para renderizar o SVG.

/**
     * Creates instance of BarChart. This method is only called once.
     *
     * @constructor
     * @param {VisualConstructorOptions} options - Contains references to the element that will
     *                                             contain the visual and a reference to the host
     *                                             which contains services.
     */
    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        //Creating the formatting settings service.
        const localizationManager = this.host.createLocalizationManager();
        this.formattingSettingsService = new FormattingSettingsService(localizationManager);

        this.svg = d3Select(options.element)
            .append('svg')
            .classed('barChart', true);

        this.barContainer = this.svg
            .append('g')
            .classed('barContainer', true);

        this.xAxis = this.svg
            .append('g')
            .classed('xAxis', true);
    }

Atualizar o visual

O método de atualização é chamado sempre que o tamanho do visual ou um de seus valores muda.

Dimensionamento

Precisamos dimensionar o visual para que o número de barras e os valores atuais se encaixem nos limites de largura e altura definidos do visual. Isso é semelhante ao método de atualização no tutorial do cartão Circle.

Para calcular a escala, usamos os scaleLinear métodos e scaleBand que foram importados anteriormente da d3-scale biblioteca.

O options.dataViews[0].categorical.values[0].maxLocal valor contém o maior valor de todos os pontos de dados atuais. Este valor é usado para determinar a altura do eixo y. O dimensionamento para a largura do eixo x é determinado pelo número de categorias ligadas ao visual na barchartdatapoint interface.

Para casos em que o eixo X é renderizado, esse visual também lida com quebras de palavras caso não haja espaço suficiente para escrever o nome inteiro no eixo X.

Outros recursos de atualização

Além do dimensionamento, o método de atualização também lida com seleções e cores. Esses recursos são opcionais e são discutidos mais tarde:

   /**
     * Updates the state of the visual. Every sequential databinding and resize will call update.
     *
     * @function
     * @param {VisualUpdateOptions} options - Contains references to the size of the container
     *                                        and the dataView which contains all the data
     *                                        the visual had queried.
     */
    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(BarChartSettingsModel, options.dataViews?.[0]);
        this.barDataPoints = createSelectorDataPoints(options, this.host);
        this.formattingSettings.populateColorSelector(this.barDataPoints);

        const width = options.viewport.width;
        let height = options.viewport.height;

        this.svg
            .attr("width", width)
            .attr("height", height);

        if (this.formattingSettings.enableAxis.show.value) {
            const margins = BarChart.Config.margins;
            height -= margins.bottom;
        }

        this.xAxis
            .style("font-size", Math.min(height, width) * BarChart.Config.xAxisFontMultiplier)
            .style("fill", this.formattingSettings.enableAxis.fill.value.value);

        const yScale: ScaleLinear<number, number> = scaleLinear()
            .domain([0, <number>options.dataViews[0].categorical.values[0].maxLocal])
            .range([height, 0]);

        const xScale: ScaleBand<string> = scaleBand()
            .domain(this.barDataPoints.map(d => d.category))
            .rangeRound([0, width])
            .padding(0.2);

        const xAxis: Axis<string> = axisBottom(xScale);

        this.xAxis.attr('transform', 'translate(0, ' + height + ')')
            .call(xAxis)
            .attr("color", this.formattingSettings.enableAxis.fill.value.value);

        const textNodes: Selection<SVGElement> = this.xAxis.selectAll("text");
        BarChart.wordBreak(textNodes, xScale.bandwidth(), height);

        this.barSelection = this.barContainer
            .selectAll('.bar')
            .data(this.barDataPoints);

        const barSelectionMerged = this.barSelection
            .enter()
            .append('rect')
            .merge(<any>this.barSelection);

        barSelectionMerged.classed('bar', true);

        barSelectionMerged
            .attr("width", xScale.bandwidth())
            .attr("height", (dataPoint: BarChartDataPoint) => height - yScale(<number>dataPoint.value))
            .attr("y", (dataPoint: BarChartDataPoint) => yScale(<number>dataPoint.value))
            .attr("x", (dataPoint: BarChartDataPoint) => xScale(dataPoint.category))
            .style("fill", (dataPoint: BarChartDataPoint) => dataPoint.color)
            .style("stroke", (dataPoint: BarChartDataPoint) => dataPoint.strokeColor)
            .style("stroke-width", (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`);

        this.barSelection
            .exit()
            .remove();
    }

    private static wordBreak(
        textNodes: Selection<SVGElement>,
        allowedWidth: number,
        maxHeight: number
    ) {
        textNodes.each(function () {
            textMeasurementService.wordBreak(
                this,
                allowedWidth,
                maxHeight);
        });
    }

Preencher o painel de propriedades usando o modelo de formatação Utils

O método final na IVisual função é getFormattingModel. Esse método cria e retorna um objeto de modelo de formatação de painel de formato moderno contendo todos os componentes e propriedades do painel de formato. Em seguida, coloca o objeto dentro do painel Formatar . No nosso caso, criamos cartões de formato para enableAxis e colorSelector, incluindo propriedades de formatação para show e fill, de acordo com os "objetos" no arquivo capabilities.json . Para adicionar um seletor de cores para cada categoria no painel Propriedade , adicione um loop for e barDataPoints para cada uma adicione uma nova propriedade de formato do seletor de cores ao modelo de formatação.

Para criar um modelo de formatação, o desenvolvedor deve estar familiarizado com todos os seus componentes. Confira os componentes do painel de formato em Format Pane. getFormattingModel Confira a FormattingModel utils API do no repositório de utils do modelo de formatação.

Baixe o arquivo e salve-o na pasta /src . Declare as propriedades de formatação e seus valores em uma classe de configurações de formatação:

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
import { BarChartDataPoint } from "./barChart";

import Card = formattingSettings.SimpleCard;
import Model = formattingSettings.Model;
import Slice = formattingSettings.Slice;
import ColorPicker = formattingSettings.ColorPicker;
import ToggleSwitch = formattingSettings.ToggleSwitch;

/**
 * Enable Axis Formatting Card
 */
class EnableAxisCardSettings extends Card {
    show = new ToggleSwitch({
        name: "show",
        displayName: undefined,
        value: false,
    });

    fill = new ColorPicker({
        name: "fill",
        displayName: "Color",
        value: { value: "#000000" }
    });
    topLevelSlice: ToggleSwitch = this.show;
    name: string = "enableAxis";
    displayName: string = "Enable Axis";
    slices: Slice[] = [this.fill];
}

/**
 * Color Selector Formatting Card
 */
class ColorSelectorCardSettings extends Card {
    name: string = "colorSelector";
    displayName: string = "Data Colors";

    // slices will be populated in barChart settings model `populateColorSelector` method
    slices: Slice[] = [];
}

/**
* BarChart formatting settings model class
*/
export class BarChartSettingsModel extends Model {
    // Create formatting settings model formatting cards
    enableAxis = new EnableAxisCardSettings();
    colorSelector = new ColorSelectorCardSettings();
    cards: Card[] = [this.enableAxis, this.colorSelector];

    /**
     * populate colorSelector object categories formatting properties
     * @param dataPoints 
     */
    populateColorSelector(dataPoints: BarChartDataPoint[]) {
        const slices: Slice[] = this.colorSelector.slices;
        if (dataPoints) {
            dataPoints.forEach(dataPoint => {
                slices.push(new ColorPicker({
                    name: "fill",
                    displayName: dataPoint.category,
                    value: { value: dataPoint.color },
                    selector: dataPoint.selectionId.getSelector(),
                }));
            });
        }
    }
}

Crie e crie o modelo de serviço de configurações de formatação no método do construtor do visual. O serviço de configurações de formatação recebe as configurações de formato barChart e as converte em um objeto FormattingModel retornado na getFormattingModel API.

Para usar o recurso de localização, adicione o gerenciador de localização ao serviço de configurações de formatação.

    import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
    
    // ...
    // declare utils formatting settings service
    private formattingSettingsService: FormattingSettingsService;
    //...

    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        const localizationManager = this.host.createLocalizationManager();
        this.formattingSettingsService = new FormattingSettingsService(localizationManager);
        
        // Add here rest of your custom visual constructor code
    }

Atualize o modelo de configurações de formatação usando a API de atualização. Chame a API de atualização sempre que uma propriedade de formatação no painel de propriedades for alterada. Crie pontos de dados de seletores de gráfico de barras e preencha-os no modelo de configurações de formatação:

    // declare formatting settings model for bar chart 
    private formattingSettings: BarChartSettingsModel;

    // ...

    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(BarChartSettingsModel, options.dataViews[0]);
        this.barDataPoints = createSelectorDataPoints(options, this.host);
        this.formattingSettings.populateColorSelector(this.barDataPoints);

        // Add the rest of your custom visual update API code here

    }

Finalmente, a nova API getFormattingModel é uma linha de código simples usando o serviço de configurações de formatação e o modelo de configurações de formatação atual que foi criado na API de atualização acima.

    public getFormattingModel(): powerbi.visuals.FormattingModel {
        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
    }

(Opcional) Renderizar o eixo X (objetos estáticos)

Você pode adicionar objetos ao painel Propriedade para personalizar ainda mais o visual. Essas personalizações podem ser alterações na interface do usuário ou alterações relacionadas aos dados consultados.

Você pode ativar ou desativar esses objetos no painel Propriedade .

Este exemplo renderiza um eixo X no gráfico de barras como um objeto estático.

Já adicionamos a enableAxis propriedade ao arquivo de recursos e à interface barChartSettings.

(Opcional) Adicionar cor (objetos ligados a dados)

Os objetos ligados a dados são semelhantes aos objetos estáticos, mas normalmente lidam com a seleção de dados. Por exemplo, você pode usar objetos ligados a dados para selecionar interativamente a cor associada a cada ponto de dados.

Já definimos o colorSelector objeto no arquivo de recursos .

Cada ponto de dados é representado por uma cor diferente. Incluímos cores na interface BarChartDataPoint e atribuímos uma cor padrão a cada ponto de dados quando ele é definido em IVisualHost.

function getColumnColorByIndex(
    category: DataViewCategoryColumn,
    index: number,
    colorPalette: ISandboxExtendedColorPalette,
): string {
    if (colorPalette.isHighContrast) {
        return colorPalette.background.value;
    }

    const defaultColor: Fill = {
        solid: {
            color: colorPalette.getColor(`${category.values[index]}`).value,
        }
    };

    const prop: DataViewObjectPropertyIdentifier = {
        objectName: "colorSelector",
        propertyName: "fill"
    };

    let colorFromObjects: Fill;
    if(category.objects?.[index]){
        colorFromObjects = dataViewObjects.getValue(category?.objects[index], prop);
    }

    return colorFromObjects?.solid.color ?? defaultColor.solid.color;
}

function getColumnStrokeColor(colorPalette: ISandboxExtendedColorPalette): string {
    return colorPalette.isHighContrast
        ? colorPalette.foreground.value
        : null;
}

function getColumnStrokeWidth(isHighContrast: boolean): number {
    return isHighContrast
        ? 2
        : 0;
}

O colorPalette serviço, na createSelectorDataPoints função, gerencia essas cores. Uma vez que createSelectorDataPoints itera através de cada um dos pontos de dados, é um lugar ideal para atribuir objetos categóricos como cor.

Para obter instruções mais detalhadas sobre como adicionar cores ao seu gráfico de barras, vá para Adicionar cores ao seu visual do Power BI.

Teste o visual

Execute o visual no servidor do Power BI para ver sua aparência:

1. No PowerShell, navegue até a pasta do projeto e inicie o aplicativo de desenvolvimento.

   pbiviz start
   

   O seu visual está agora a ser executado enquanto está alojado no seu computador.

   Importante

   Não feche a janela do PowerShell até o final do tutorial. Para interromper a execução do visual, digite Ctrl+C e, se solicitado a encerrar o trabalho em lotes, digite Y e, em seguida, Enter.

2. Exiba o visual no serviço do Power BI selecionando o visual do desenvolvedor no painel Visualização.

   

3. Adicionar dados ao visual

   

4. Arraste as bordas do visual para alterar o tamanho e observe como a escala se ajusta.

5. Ative e desative o eixo X.

   

6. Altere as cores das diferentes categorias.

Adicionar outras funcionalidades

Você pode personalizar ainda mais seu visual adicionando mais recursos. Você pode adicionar recursos que aumentam a funcionalidade do visual, melhoram sua aparência ou dão ao usuário mais controle sobre sua aparência. Por exemplo, pode:

• Adicionar seleção e interações com outros elementos visuais
• Adicionar um controle deslizante do painel de propriedades que controla a opacidade
• Adicionar suporte para dicas de ferramentas
• Adicionar uma página de destino
• Adicionar suporte ao idioma local

Empacotar o visual

Antes de carregar seu visual no Power BI Desktop ou compartilhá-lo com a comunidade na Galeria Visual do Power BI, você precisa empacotá-lo.

Para preparar o visual para compartilhamento, siga as instruções em Empacotar um visual do Power BI.

Conteúdos relacionados

• Adicionar um menu de contexto a um visual
• Adicionar uma página de destino a um visual
• Adicionar suporte de localidade