Como eu fiz isso: Análise dinâmica com o contêiner de layout

Este exemplo mostra como você pode criar conteúdo de pasta dinâmico e interativo com o contêiner de layout. O contêiner de layout suporta design sem grade e visualizações empilhadas, permitindo amplo controle sobre a disposição do seu conteúdo analítico. Além disso, como ocorre com outros objetos contêineres, você pode apresentar dinamicamente informações diferentes, dependendo de uma variedade de condições, como variáveis e estados de seleção.

Este exemplo mostra que você pode criar um contêiner de layout para apresentar informações de vários gráficos como um simples objeto. Algumas abordagens gerais de design incluem:

Organizar objetos semelhantes de forma simétrica, usando estilos para distinguir diferentes seções de dados.
Remover bordas de objetos individuais dentro do contêiner de layout e, em seguida, adicionar uma borda ao redor de todo o objeto quando terminar.
Exibir diferentes objetos ou dados condicionalmente, dependendo da interação do usuário - neste exemplo, um gráfico de barras no qual o usuário pode mostrar ou ocultar detalhes.
Construir elementos compostos que consistem em vários objetos diferentes colocados um ao lado do outro; neste exemplo, um botão interativo que imita um botão liga/desliga.
Permitir que os usuários selecionem e filtrem os dados de várias maneiras quando precisarem dar uma olhada mais de perto.

Contêiner de layout finalizado para o exemplo — Resultado final

Preparações

Crie um novo aplicativo e cole o Exemplo de script de carregamento em uma nova seção no Editor de carregamento de dados. Em seguida, carregue os dados.

Depois de carregar os dados, mude para a exibição de pasta.

Exemplo de script de carregamento

SET DateFormat='M/D/YYYY';

Sales:

Load 

date(Now()-Offset,'MM/DD/YYYY') as [Order Date],

* Inline [

Order ID,Offset,Product Type,Shipment Status,Fulfillment Center,Sales,Late Status,Days Late
1,30,Electronics,Delivered,10036,9950,Not Late,
2,30,Office Supplies,Delivered,10036,4412,Not Late,
3,30,Office Supplies,Delivered,10038,7480,Late,3
4,30,Home Improvement,Delivered,10035,665,Late,4
5,30,Home Improvement,Delivered,10038,594,Not Late,
6,30,Home Improvement,Stalled,10038,8267,Not Late,
7,30,Clothing,Delivered,10035,1014,Not Late,
8,30,Cleaning Products,Delivered,10036,6999,Late,1
9,30,Electronics,Delivered,10036,733,Not Late,
10,29,Office Supplies,Delivered,10036,3487,Not Late,
11,29,Office Supplies,Delivered,10035,7343,Not Late,
12,29,Office Supplies,Delivered,10036,9239,Late,14
13,27,Cleaning Products,Delivered,10037,1463,Not Late,
14,27,Cleaning Products,Stalled,10035,4688,Not Late,
15,27,Home Improvement,Delivered,10038,5539,Late,2
16,27,Clothing,Delivered,10035,8388,Not Late,
17,27,Office Supplies,Delivered,10035,7560,Not Late,
18,27,Office Supplies,Delivered,10035,5738,Not Late,
19,27,Office Supplies,Delivered,10035,5469,Not Late,
20,26,Home Improvement,Delivered,10037,1435,Not Late,
21,26,Office Supplies,Delivered,10036,5962,Late,1
22,26,Clothing,Delivered,10035,4020,Late,7
23,26,Electronics,Delivered,10036,3888,Late,5
24,25,Office Supplies,Delivered,10037,6496,Not Late,
25,25,Clothing,Delivered,10038,4215,Late,11
26,25,Home Improvement,Delivered,10036,1801,Not Late,
27,25,Grocery,Delivered,10036,6471,Not Late,
28,24,Home Improvement,In Transit,10036,4578,Not Late,
29,24,Office Supplies,Cancelled,10037,3493,Not Late,
30,24,Office Supplies,Cancelled,10035,6572,Not Late,
31,24,Electronics,In Transit,10037,6691,Not Late,
32,24,Office Supplies,In Transit,10038,2721,Late,9
33,24,Grocery,In Transit,10035,8300,Not Late,
34,23,Grocery,In Transit,10035,840,Not Late,
35,23,Office Supplies,In Transit,10036,8972,Not Late,
36,23,Cleaning Products,Stalled,10036,9474,Not Late,
37,23,Home Improvement,In Transit,10038,1935,Not Late,
38,23,Office Supplies,In Transit,10036,1748,Not Late,
39,23,Seasonal,In Transit,10037,1948,Not Late,
40,22,Office Supplies,In Transit,10035,3121,Not Late,
41,22,Electronics,In Transit,10036,7377,Not Late,
42,22,Cleaning Products,In Transit,10037,1492,Not Late,
43,22,Office Supplies,Stalled,10037,7801,Late,6
44,22,Office Supplies,In Transit,10035,4663,Not Late,
45,22,Grocery,In Transit,10035,4649,Not Late,
46,21,Seasonal,In Transit,10038,2612,Not Late,
47,20,Clothing,In Transit,10036,8880,Late,4
48,20,Office Supplies,In Transit,10036,1391,Late,8
49,20,Cleaning Products,Cancelled,10037,1307,Not Late,
50,20,Home Improvement,In Transit,10037,6424,Not Late,
51,20,Grocery,In Transit,10035,5051,Not Late,
52,20,Cleaning Products,In Transit,10035,1286,Not Late,
53,19,Cleaning Products,In Transit,10038,8719,Not Late,
54,19,Office Supplies,In Transit,10037,8576,Not Late,
55,19,Seasonal,In Transit,10038,2866,Not Late,
56,19,Electronics,Stalled,10035,5186,Late,3
57,19,Clothing,In Transit,10038,4079,Not Late,
58,19,Office Supplies,In Transit,10038,706,Not Late,
59,19,Seasonal,In Transit,10036,6111,Not Late,
60,19,Clothing,In Transit,10036,5677,Not Late,
61,19,Home Improvement,In Transit,10037,3993,Not Late,
62,19,Office Supplies,In Transit,10037,1625,Not Late,
63,19,Seasonal,In Transit,10035,5805,Not Late,
64,19,Home Improvement,In Transit,10035,4453,Not Late,
65,19,Office Supplies,In Transit,10038,2252,Not Late,
66,18,Electronics,In Transit,10038,8362,Not Late,
67,18,Clothing,In Transit,10037,4182,Not Late,
68,18,Cleaning Products,In Transit,10038,9044,Not Late,
69,18,Clothing,In Transit,10035,6531,Not Late,
70,18,Office Supplies,In Transit,10035,8408,Not Late,
71,17,Home Improvement,Stalled,10038,9629,Not Late,
72,17,Seasonal,Preparation,10035,2128,Not Late,
73,17,Home Improvement,Cancelled,10038,1024,Not Late,
74,17,Office Supplies,Preparation,10037,9684,Late,2
75,17,Electronics,Preparation,10036,6753,Late,2
76,16,Clothing,Preparation,10036,3192,Not Late,
77,16,Office Supplies,Preparation,10038,3954,Not Late,
78,16,Office Supplies,Preparation,10035,8377,Not Late,
79,16,Office Supplies,Preparation,10038,2334,Not Late,
80,15,Grocery,Preparation,10037,7178,Not Late,
81,15,Office Supplies,Preparation,10037,1188,Not Late,
82,15,Electronics,Preparation,10035,4908,Not Late,
83,15,Electronics,Preparation,10035,3552,Not Late,
84,15,Clothing,Preparation,10037,875,Not Late,
85,14,Office Supplies,Preparation,10038,7886,Late,4
86,14,Home Improvement,Cancelled,10036,2358,Late,1
87,14,Clothing,Preparation,10037,8368,Not Late,
88,14,Grocery,Preparation,10037,142,Not Late,
89,14,Office Supplies,Preparation,10037,5537,Not Late,
90,14,Home Improvement,Preparation,10035,3231,Not Late,
91,14,Clothing,Preparation,10036,2283,Not Late,
92,14,Office Supplies,Preparation,10038,5952,Not Late,
93,13,Office Supplies,Preparation,10038,5513,Not Late,
94,13,Home Improvement,Preparation,10036,5871,Not Late,
95,13,Grocery,Preparation,10038,4425,Not Late,
96,13,Clothing,Preparation,10037,500,Late,1
97,13,Electronics,Preparation,10037,9792,Not Late,
98,13,Seasonal,Preparation,10035,4576,Not Late,
99,13,Office Supplies,Preparation,10038,228,Not Late,
100,13,Cleaning Products,Preparation,10037,3086,Late,1
101,13,Office Supplies,Preparation,10038,2329,Not Late,
102,12,Home Improvement,Preparation,10036,8862,Not Late,
103,12,Office Supplies,Preparation,10037,3991,Not Late,
104,12,Office Supplies,Preparation,10037,5435,Not Late,
105,12,Grocery,Preparation,10038,2476,Not Late,
106,12,Clothing,Preparation,10037,8362,Not Late,
107,12,Seasonal,Preparation,10035,1496,Not Late,
108,12,Electronics,Preparation,10038,3210,Not Late,
109,11,Clothing,Preparation,10038,7692,Not Late,
110,11,Cleaning Products,Preparation,10037,1585,Not Late,
111,11,Home Improvement,Cancelled,10037,1874,Not Late,
112,11,Office Supplies,Preparation,10037,869,Not Late,
113,11,Office Supplies,Preparation,10036,8578,Not Late,
114,10,Office Supplies,Preparation,10036,684,Not Late,
115,10,Electronics,Preparation,10036,9889,Not Late,
116,10,Office Supplies,Preparation,10036,4256,Not Late,
117,8,Seasonal,Preparation,10038,9288,Late,7
118,8,Office Supplies,Cancelled,10038,1534,Not Late,
119,8,Seasonal,Preparation,10038,7496,Not Late,
120,8,Electronics,Preparation,10036,8454,Late,3
121,8,Office Supplies,Stalled,10038,1063,Late,
122,8,Office Supplies,Preparation,10037,5958,Not Late,
123,8,Seasonal,Preparation,10036,686,Not Late,
124,8,Grocery,Preparation,10036,1799,Not Late,
125,8,Clothing,Stalled,10036,8485,Not Late,
126,7,Office Supplies,Preparation,10036,6451,Not Late,
127,7,Office Supplies,Pending,10036,1212,Not Late,
128,7,Electronics,Pending,10037,9037,Not Late,
129,7,Electronics,Pending,10037,6522,Late,20
130,7,Electronics,Pending,10038,8865,Late,4
131,7,Clothing,Cancelled,10036,7929,Not Late,
132,6,Seasonal,Pending,10038,9082,Not Late,
133,6,Office Supplies,Pending,10037,6563,Not Late,
134,6,Seasonal,Pending,10038,3513,Not Late,
135,5,Office Supplies,Pending,10035,2340,Not Late,
136,5,Cleaning Products,Pending,10035,590,Not Late,
137,5,Office Supplies,Pending,10035,542,Not Late,
138,5,Cleaning Products,Pending,10035,4809,Not Late,
139,5,Grocery,Cancelled,10035,1743,Not Late,
140,5,Office Supplies,Pending,10035,8312,Not Late,
141,4,Clothing,Pending,10035,5895,Not Late,
142,4,Clothing,Pending,10037,4882,Not Late,
143,4,Clothing,Pending,10037,9106,Not Late,
144,3,Office Supplies,Pending,10036,7422,Late,1
145,3,Clothing,Pending,10038,2686,Not Late,
146,3,Office Supplies,Pending,10037,698,Late,3
147,3,Office Supplies,Pending,10035,9514,Not Late,
148,2,Home Improvement,Pending,10037,6206,Late,2
149,2,Office Supplies,Pending,10035,9158,Not Late,
150,1,Electronics,Cancelled,10036,3204,Not Late,

];

drop field Offset;

Parte 1: Criar a variável

Primeiro, crie a variável. Essa variável é o objeto das condições que serão adicionadas posteriormente. Os valores da variável serão alterados durante a análise por interações com objetos de botão.

Crie a seguinte variável. Defina a Definição como =false().

vViewChartValues

Criando uma variável

Parte 2: Criar o contêiner de layout

Faça o seguinte:

No painel de ativos, abra Objetos personalizados > Dashboard bundle e arraste um Layout container até a pasta.
Redimensione o contêiner para que ele tenha 17 por 10 quadrados na grade da pasta.

Parte 3: Adicionar visualizações ao contêiner de layout

Em seguida, adicione visualizações ao contêiner de layout.

Faça o seguinte:

Selecione o contêiner de layout.
No painel de propriedades, em Conteúdo > Gráficos, clique em Adicionar. Selecione Botão.
Expanda o item. Defina o Rótulo como Button_NotLateTitle.
Em Tamanho, defina o seguinte:
- Largura (%): 48
- Altura (%): 9
Em Posição, defina o seguinte:
- Eixo X (%): 1
- Eixo Y (%): 1
Clique em Editar propriedades.
Expanda Ações e navegação.
Clique em Adicionar ação.
Para a Ação, selecione Selecionar valores em um campo.
Para o Campo, selecione Late Status.
Para Valor, clique em .
Adicione o seguinte:
```
='Not Late'
```
Clique em Aplicar.
Expanda Aparência > Geral.
Defina Not Late como o Rótulo.
Expanda Aparência > Apresentação.
Clique em Estilo.
Em Borda, defina Contorno como 0 px.
Alterne para a guia Gráfico. Defina as seguintes propriedades:
- Comportamento de layout: responsivo
- Tamanho da fonte: Valor máximo
- Cor da fonte > Cor: #006580
- Opções de plano de fundo > Cor usada: #ffffff
Clique em para sair do painel de estilo.
Clique na barra superior do painel para retornar ao contêiner de layout.

Faça o seguinte:

Em Conteúdo > Gráficos, clique em Adicionar. Selecione Botão.
Expanda o item. Defina o Rótulo como Button_LateTitle.
Em Tamanho, defina o seguinte:
- Largura (%): 48
- Altura (%): 9
Em Posição, defina o seguinte:
- Eixo X (%): 51
- Eixo Y (%): 1
Clique em Editar propriedades.
Expanda Ações e navegação.
Clique em Adicionar ação.
Para a Ação, selecione Selecionar valores em um campo.
Para o Campo, selecione Late Status.
Para Valor, clique em .
Adicione o seguinte:
```
='Late'
```
Clique em Aplicar.
Expanda Aparência > Geral.
Defina Late como o Rótulo.
Expanda Aparência > Apresentação.
Clique em Estilo.
Em Borda, defina Contorno como 0 px.
Alterne para a guia Gráfico. Defina as seguintes propriedades:
- Comportamento de layout: responsivo
- Tamanho da fonte: Valor máximo
- Cor da fonte > Cor: #87205d
- Opções de plano de fundo > Cor usada: #ffffff
Clique em para sair do painel de estilo.
Clique na barra superior do painel para retornar ao contêiner de layout.

Faça o seguinte:

Em Conteúdo > Gráficos, clique em Adicionar. Selecione Medidor.
Expanda o item. Defina o Rótulo como Gauge_NotLate.
Em Tamanho, defina o seguinte:
- Largura (%): 48
- Altura (%): 15
Em Posição, defina o seguinte:
- Eixo X (%): 1
- Eixo Y (%): 11
Clique em Editar propriedades.
Adicione Sum(Sales) como uma medida.
No painel de propriedades, em Dados > Filtros, clique em Adicionar.
Selecione Late Status. Expanda o filtro.
Mantenha o tipo de filtro padrão Valores e marque a caixa de seleção Not Late. Isso filtra a visualização de dados para apenas os registros que contêm um valor Late Status de Not Late.
Expanda Aparência > Geral.
Defina Mostrar títulos como Desativado.
Expanda Aparência > Apresentação.
Em Limites de intervalo, defina Máx como o seguinte:
```
=Sum({1} Sales)
```
Altere a configuração do gráfico de Radial para Barra.
Altere a Orientação de Automático para Personalizado e certifique-se de que Horizontal esteja selecionado.
Desative a opção Usar biblioteca e defina a cor como #006580.
Clique em Estilo.
Em Borda, defina Contorno como 0 px.
Alterne para a guia Gráfico. Defina a cor do Rótulo de valor como #ffffff.
Clique em para sair do painel de estilo.
Expanda Aparência > Eixo de medida: Sum(Sales).
Defina Rótulos e título como Nenhum.
Clique na barra superior do painel para retornar ao contêiner de layout.

Faça o seguinte:

Em Conteúdo > Gráficos, clique em Adicionar. Selecione Medidor.
Expanda o item. Defina o Rótulo como Gauge_Late.
Em Tamanho, defina o seguinte:
- Largura (%): 48
- Altura (%): 15
Em Posição, defina o seguinte:
- Eixo X (%): 51
- Eixo Y (%): 11
Clique em Editar propriedades.
Adicione Sum(Sales) como uma medida.
No painel de propriedades, em Dados > Filtros, clique em Adicionar.
Selecione Late Status. Expanda o filtro.
Mantenha o tipo de filtro padrão Valores e marque a caixa de seleção Late. Isso filtra a visualização de dados para apenas os registros que contêm um valor Late Status de Late.
Expanda Aparência > Geral.
Defina Mostrar títulos como Desativado.
Expanda Aparência > Apresentação.
Em Limites de intervalo, defina Máx como o seguinte:
```
=Sum({1} Sales)
```
Altere a configuração do gráfico de Radial para Barra.
Altere a Orientação de Automático para Personalizado e certifique-se de que Horizontal esteja selecionado.
Desative Usar biblioteca e defina a Cor como #87205d.
Clique em Estilo.
Em Borda, defina Contorno como 0 px.
Alterne para a guia Gráfico. Defina a cor do Rótulo de valor como #ffffff.
Clique em para sair do painel de estilo.
Expanda Aparência > Eixo de medida: Sum(Sales).
Defina Rótulos e título como Nenhum.
Clique na barra superior do painel para retornar ao contêiner de layout.

Faça o seguinte:

Em Conteúdo > Gráficos, clique em Adicionar. Selecione KPI.
Expanda o item. Defina o Rótulo como KPI_NotLate.
Em Tamanho, defina o seguinte:
- Largura (%): 48
- Altura (%): 9
Em Posição, defina o seguinte:
- Eixo X (%): 1
- Eixo Y (%): 27
Clique em Editar propriedades.
Adicione Sum(Sales) como uma medida.
Nas propriedades da medida, defina Formato de número como Dinheiro.
Altere o Padrão de formato para:
```
$ #,##0.00;-$ #,##0.00
```
No painel de propriedades, em Dados > Filtros, clique em Adicionar.
Selecione Late Status. Expanda o filtro.
Mantenha o tipo de filtro padrão Valores e marque a caixa de seleção Not Late. Isso filtra a visualização de dados para apenas os registros que contêm um valor Late Status de Not Late.
Expanda Aparência > Geral.
Defina Mostrar títulos como Desativado.
Expanda Aparência > Apresentação.
Clique em Estilo.
Em Borda, defina Contorno como 0 px.
Alterne para a guia Gráfico. Defina as seguintes propriedades:
- Comportamento de layout: responsivo
- Tamanho da fonte: Valor máximo
- Desative Mostrar título do primeiro KPI
Clique em para sair do painel de estilo.
Expanda Aparência > Cor.
Desative Cores da biblioteca. Defina a cor como #006580.
Clique na barra superior do painel para retornar ao contêiner de layout.

Faça o seguinte:

Em Conteúdo > Gráficos, clique em Adicionar. Selecione KPI.
Expanda o item. Defina o Rótulo como KPI_Late.
Em Tamanho, defina o seguinte:
- Largura (%): 48
- Altura (%): 9
Em Posição, defina o seguinte:
- Eixo X (%): 51
- Eixo Y (%): 27
Clique em Editar propriedades.
Adicione Sum(Sales) como uma medida.
Nas propriedades da medida, defina Formato de número como Dinheiro.
Altere o Padrão de formato para:
```
$ #,##0.00;-$ #,##0.00
```
No painel de propriedades, em Dados > Filtros, clique em Adicionar.
Selecione Late Status. Expanda o filtro.
Mantenha o tipo de filtro padrão Valores e marque a caixa de seleção Late. Isso filtra a visualização de dados para apenas os registros que contêm um valor Late Status de Late.
Expanda Aparência > Geral.
Defina Mostrar títulos como Desativado.
Expanda Aparência > Apresentação.
Clique em Estilo.
Em Borda, defina Contorno como 0 px.
Alterne para a guia Gráfico. Defina as seguintes propriedades:
- Comportamento de layout: responsivo
- Tamanho da fonte: Valor máximo
- Desative Mostrar título do primeiro KPI
Clique em para sair do painel de estilo.
Expanda Aparência > Cor.
Desative Cores da biblioteca. Defina a cor como #87205d.
Clique na barra superior do painel para retornar ao contêiner de layout.

Faça o seguinte:

Em Conteúdo > Gráficos, clique em Adicionar. Selecione Gráfico de barras.
Expanda o item. Defina o Rótulo como BarChart_Simple.
Para Mostrar condição, clique em .
Adicione o seguinte:
```
=vViewChartValues=false()
```
Clique em Aplicar.
Em Tamanho, defina o seguinte:
- Largura (%): 81
- Altura (%): 62
Em Posição, defina o seguinte:
- Eixo X (%): 1
- Eixo Y (%): 37
Clique em Editar propriedades.
Adicione Product Type como uma dimensão.
Adicione outra dimensão: Late Status.

Product Type deve agora ser listado como Grupo e Late Status como Barras.
Adicione Sum(Sales) como uma medida.
Nas propriedades da medida, defina Formato de número como Dinheiro.
Altere o Padrão de formato para:
```
$ #,##0.00;-$ #,##0.00
```
Expanda Aparência > Geral.
Defina Mostrar títulos como Desativado.
Expanda Aparência > Apresentação.
Alterne da apresentação Agrupada para Empilhada.
Defina o Espaçamento de linhas de grade como Personalizado. No menu suspenso, selecione Sem linhas.
Clique em Estilo.
Em Borda, defina Contorno como 0 px.
Alterne para a guia Gráfico. Defina as seguintes propriedades:
- Tamanho da fonte do rótulo de eixo: 16 px
Clique em para sair do painel de estilo.
Expanda Aparência > Cores e legenda.

Defina Cores como Personalizado e > Por expressão. Use a seguinte expressão:

=if([Late Status]='Not Late','#006580', if([Late Status]='Late','#87205d'))

Defina Mostrar legenda como Desativado.
Expanda Aparência > Eixo X: Product Type, Late Status.
Defina Rótulos e título como Somente rótulos.
Expanda Aparência > Eixo Y: Sum(Sales).
Defina Rótulos e título como Somente rótulos.
Clique na barra superior do painel para retornar ao contêiner de layout.

Faça o seguinte:

Em Conteúdo > Gráficos, clique com o botão direito do mouse em BarChart_Simple e clique em Duplicar.
Expanda o item. Defina o Rótulo como BarChart_Detailed.
Para Mostrar condição, clique em .
Adicione o seguinte:
```
=vViewChartValues=true()
```
Clique em Aplicar.
Clique em Editar propriedades.
Expanda Aparência > Apresentação.
Ative Rótulos de valores.
Ative Rótulos de segmento e certifique-se de que Rótulos de total estejam ativados.
Clique em Estilo.
Alterne para a guia Gráfico. Defina as seguintes propriedades:
- Tamanho da fonte do rótulo de eixo: 16 px
- Tamanho da fonte de Rótulos de valores: 14 px
Clique em para sair do painel de estilo.
Expanda Aparência > Cores e legenda.
Expanda Aparência > Eixo X: Product Type, Late Status.
Defina Rótulos e título como Somente rótulos.
Expanda Aparência > Eixo Y: Sum(Sales).
Defina Rótulos e título como Somente rótulos.
Clique na barra superior do painel para retornar ao contêiner de layout.

Crie três visualizações mestre que serão usadas para criar um botão de alternância composto no contêiner de layout. Esse botão de alternância permitirá que os usuários ativem e desativem os rótulos de valores no gráfico de barras.

Item 1: Base da chave de alternância

Faça o seguinte:

Em Conteúdo > Gráficos, clique em Adicionar. Selecione Botão.
Expanda o item. Defina o Rótulo como ToggleSwitch_Base.
Em Tamanho, defina o seguinte:
- Largura (%): 16
- Altura (%): 7
Em Posição, defina o seguinte:
- Eixo X (%): 83
- Eixo Y (%): 90
Clique em Editar propriedades.
Expanda Ações e navegação.
Clique em Adicionar ação.
Para a Ação, selecione Definir valor de variável.
Para Variável, selecione vViewChartValues.
Para Valor, clique em .

Adicione a seguinte expressão:

=if(vViewChartValues=false(),true(),if(vViewChartValues=true(),false()))

Clique em Aplicar.
Expanda Aparência > Geral.
Defina Show Values como o Rótulo.
Expanda Aparência > Apresentação.
Clique em Estilo.
Em Borda, defina Contorno como 2 px.
Defina a cor da Borda como #000000.
Defina o Raio de canto para a Borda como 0 px.
Alterne para a guia Gráfico. Defina as seguintes propriedades:
- Comportamento de layout: responsivo
- Tamanho da fonte: 0,5
- Cor da fonte > Cor: #000000
- Opções de plano de fundo > Cor usada: #ffffff
Clique em para sair do painel de estilo.
Clique na barra superior do painel para retornar ao contêiner de layout.

Item 2: Parte do botão que representa o estado ON

Faça o seguinte:

Em Conteúdo > Gráficos, clique em Adicionar. Selecione Botão.
Expanda o item. Defina o Rótulo como ToggleSwitch_ON.
Para Mostrar condição, clique em .
Adicione o seguinte:
```
=vViewChartValues=true()
```
Clique em Aplicar.
Em Tamanho, defina o seguinte:
- Largura (%): 4
- Altura (%): 7
Em Posição, defina o seguinte:
- Eixo X (%): 95
- Eixo Y (%): 90
Clique em Editar propriedades.
Expanda Ações e navegação.
Clique em Adicionar ação.
Para a Ação, selecione Definir valor de variável.
Para Variável, selecione vViewChartValues.
Para Valor, clique em .
Adicione a seguinte expressão:
```
=false()
```
Clique em Aplicar.
Expanda Aparência > Geral.
Defina On como o Rótulo.
Expanda Aparência > Apresentação.
Clique em Estilo.
Em Borda, defina Contorno como 2 px.
Defina a cor da Borda como #000000.
Defina o Raio de canto para a Borda como 0 px.
Alterne para a guia Gráfico. Defina as seguintes propriedades:
- Comportamento de layout: responsivo
- Tamanho da fonte: 0,5
- Cor da fonte > Cor: #ffffff
- Opções de plano de fundo > Cor usada: #109600
Clique em para sair do painel de estilo.
Clique na barra superior do painel para retornar ao contêiner de layout.

Item 3: Parte do botão que representa o estado DESLIGADO

Faça o seguinte:

Em Conteúdo > Gráficos, clique em Adicionar. Selecione Botão.
Expanda o item. Defina o Rótulo como ToggleSwitch_ON.
Para Mostrar condição, clique em .
Adicione o seguinte:
```
=vViewChartValues=false()
```
Clique em Aplicar.
Em Tamanho, defina o seguinte:
- Largura (%): 4
- Altura (%): 7
Em Posição, defina o seguinte:
- Eixo X (%): 83
- Eixo Y (%): 90
Clique em Editar propriedades.
Expanda Ações e navegação.
Clique em Adicionar ação.
Para a Ação, selecione Definir valor de variável.
Para Variável, selecione vViewChartValues.
Para Valor, clique em .
Adicione a seguinte expressão:
```
=true()
```
Clique em Aplicar.
Expanda Aparência > Geral.
Defina Off como o Rótulo.
Expanda Aparência > Apresentação.
Clique em Estilo.
Em Borda, defina Contorno como 2 px.
Defina a cor da Borda como #000000.
Defina o Raio de canto para a Borda como 0 px.
Alterne para a guia Gráfico. Defina as seguintes propriedades:
- Comportamento de layout: responsivo
- Tamanho da fonte: 0,5
- Cor da fonte > Cor: #ffffff
- Opções de plano de fundo > Cor usada: #ff001e
Clique em para sair do painel de estilo.
Clique na barra superior do painel para retornar ao contêiner de layout.

Parte 4: Finalizar a apresentação

Finalize o contêiner de layout adicionando um título e uma borda.

Faça o seguinte:

No painel de propriedades, expanda Aparência > Geral.
Defina o Título como Pedidos atrasados vs. não atrasados - Impacto nas vendas.
Expanda Aparência > Apresentação.
Ative Manter gráficos dentro.
Clique em Estilo.
Defina as seguintes propriedades para Borda:
- Contorno: 2 px
- Cor: #7b7a78
Defina as seguintes propriedades para Sombra:
- Tamanho médio
- Cor: #7b7a78

Resultados

Saia do modo de edição de pasta. Clique no botão de alternância para alternar entre o gráfico de barras simples e o detalhado.

Contêiner de layout com "Mostrar valores" desativado, apresentando o gráfico de barras sem rótulos de valores — Contêiner de layout com Mostrar valores desativado

Contêiner de layout com a opção "Mostrar valores" ativada, apresentando o gráfico de barras com rótulos de valores — Contêiner de layout com a opção Mostrar valores ativada

Clique nos títulos Not Late e Late na parte superior do gráfico. Observe que, ao clicar nesses elementos, você seleciona os valores correspondentes no aplicativo.

Contêiner de layout com seleção feita no campo "Status de Atraso". — Contêiner de layout com seleção Not Late no campo Late Status.

Esta página ajudou?

Se você encontrar algum problema com esta página ou seu conteúdo – um erro de digitação, uma etapa ausente ou um erro técnico – avise-nos!

Deixe seu feedback aqui