Exemplos de painel de filtro

Este tópico de ajuda fornece vários exemplos que mostram como você pode personalizar o estilo e outras propriedades nos painéis de filtro para atingir vários objetivos funcionais.

Exemplo 1 — Design condensado

Você pode adicionar muitas caixas de listagem a um painel de filtro, permitindo o refinamento dos dados em muitas dimensões diferentes.

Para economizar espaço e priorizar outras visualizações em sua pasta, você pode dar ao painel de filtro um design condensado em que o conteúdo é expandido e recolhido conforme necessário.

Faça o seguinte:

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

2. Alterne para a exibição da pasta. Nas propriedades da pasta, defina o Espaçamento da grade como 42.

3. Arraste um Painel de filtro para a pasta.

4. Clique em Adicionar dimensão. Selecione Country.

5. No painel de propriedades, clique em Adicionar campo. Selecione Item Type.

6. Usando o botão Adicionar campo, adicione outras quatro dimensões como caixas de listagem:

   • Order Year

   • Order Priority

   • Region

   • Sales Channel

7. Um a um, expanda cada caixa de listagem que você acabou de adicionar e defina Apresentação > Recolher caixa de listagem como Sempre.

8. No painel de propriedades, expanda Aparência > Apresentação.

9. Clique em Estilo.

10. Na guia Painel de filtro, defina as seguintes propriedades:

    • Tamanho da fonte do Título: 18px

    • Cor da fonte do Título: código hexadecimal #ffffff

    • Cor de plano de fundo: código hexadecimal #87205d

    • Sombra: pequena, código hexadecimal #000000

11. Na guia Caixas de listagem, defina as seguintes propriedades:

    • Tamanho da fonte do Cabeçalho: 14px

12. Redimensione o painel de filtro para um espaço de dois por dez na grade da pasta.

Alterne para o modo de análise. Você pode expandir as caixas de listagem conforme necessário para fazer seleções.

Exemplo 2 — Design avançado

Embora um painel de filtro seja usado principalmente para filtrar dados, ele também pode ser usado para a visualização de dados. A incorporação de um design avançado permite que os analisadores obtenham ideias à medida que fazem diferentes seleções.

Faça o seguinte:

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

2. Alterne para a exibição de pasta e arraste um Painel de filtro para a pasta.

3. Clique em Adicionar dimensão. Selecione Item Type.

4. Clique na caixa de listagem Item Type para expandir suas propriedades.

5. Expanda Apresentação.

6. Ative a configuração do Histograma.

7. Use o menu suspenso Mostrar frequência para selecionar Frequência relativa (%).

8. Defina Recolher caixa de listagem como Nunca.

9. Expanda Classificação.

10. Defina a Classificação como Personalizada.

11. Limpe todas as opções e ative a opção Classificar por expressão.

12. Selecione Decrescente.

13. Em Expressão, insira a seguinte expressão:

    Count([Item Type])

14. No painel de propriedades, expanda Aparência > Geral.

15. Desative a opção Mostrar títulos.

16. Expandir Aparência > Apresentação.

17. Clique em Estilo.

18. Na guia Caixas de listagem, defina as seguintes propriedades:

    • Cabeçalho:

      • Fonte: Inter, sans-serif

      • Tamanho da fonte: 18px

    • Conteúdo:

      • Fonte: Inter, sans-serif

19. Redimensione o painel de filtro para uma forma retangular pequena, por exemplo, três por quatro quadrados.

Exemplo 3 — Design focado

O design do painel de filtro depende de como você deseja que os usuários façam as seleções. Por exemplo, talvez você queira restringir o acesso dos usuários a determinados recursos para incentivar uma interação mais restrita e focada com os dados.

Os cenários incluem:

• A filtragem em sua dimensão específica traz mais ideias quando os valores são selecionados um de cada vez, ou a seleção de vários valores não fornece nenhuma ideia significativa. Para orientar a análise dessa forma, você pode desativar a seleção de intervalo usando o modo de caixa de seleção.

• A busca de valores no campo não fornece nenhuma ideia ou não é desejável.

• Você deseja minimizar as distrações ao filtrar dados - por exemplo, a barra de ferramentas de seleções.

Faça o seguinte:

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

2. Alterne para a exibição de pasta e arraste um Painel de filtro para a pasta.

3. Clique em Adicionar dimensão. Selecione Item Type.

4. Clique na caixa de listagem Item Type para expandir suas propriedades.

5. Defina Pesquisa como Ocultar.

6. Desative Mostrar barra de ferramentas de Seleção.

7. Expanda Apresentação.

8. Ative o modo Caixa de seleção.

9. No painel de propriedades, expanda Aparência > Geral.

10. Desative a opção Mostrar títulos.

11. Redimensione o painel de filtro para uma forma retangular pequena, por exemplo, três por quatro quadrados.

Exemplo 4 — Design da grade

Você pode usar o modo grade para painéis de filtro que usam conjuntos pequenos e definidos de dados. Um bom exemplo é a organização de dimensões baseadas no tempo em grades.

Faça o seguinte:

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

2. Alterne para a exibição de pasta e arraste um Painel de filtro para a pasta.

3. Clique em Adicionar dimensão. Selecione Order Year.

4. Clique na caixa de listagem Order Year para expandir suas propriedades.

5. Desative a opção Mostrar título.

6. Expanda Apresentação.

7. Defina Recolher caixa de listagem como Nunca.

8. Para Mostrar dados em, selecione Grade.

9. Defina Máximo de colunas visíveis como Personalizado.

10. Defina Máximo de colunas como 3.

11. Adicione Order Quarter como uma caixa de listagem no painel de filtro.

12. Clique na caixa de listagem Order Quarter para expandir suas propriedades.

13. Desative a opção Mostrar títulos.

14. Expanda Apresentação.

15. Defina Recolher caixa de listagem como Nunca.

16. Para Mostrar dados em, selecione Grade.

17. Defina Ordenar por como Colunas.

18. Defina Máximo de linhas visíveis como Personalizado.

19. Defina Linha máxima como 1.

20. Adicione Order Month como uma caixa de listagem no painel de filtro.

21. Clique na caixa de listagem Order Month para expandir suas propriedades.

22. Desative a opção Mostrar título.

23. Expanda Apresentação.

24. Defina Recolher caixa de listagem como Nunca.

25. Para Mostrar dados em, selecione Grade.

26. Defina Máximo de colunas visíveis como Personalizado.

27. Defina Máximo de colunas como 4.

28. No painel de propriedades, expanda Aparência > Geral.

29. Desative a opção Mostrar título.

30. No painel de propriedades, expanda Aparência > Apresentação.

31. Clique em Estilo.

32. Na guia Painel de filtro, defina as seguintes propriedades:

    • Cor de plano de fundo: #83af9b

33. Na guia Caixas de listagem, defina as seguintes propriedades:

    • Conteúdo:

      • Fonte: Fredoka One, fantasy

      • Tamanho do texto: 15px

      • Tamanho do texto: Negrito

      • Cor do texto: #000000

    • Estado de seleção > Possível: #000000

    • Cor de plano de fundo: #83af9b

34. Redimensione o painel de filtro para um tamanho que funcione bem para a exibição, por exemplo, três por três.

Outros aprimoramentos: painel de filtro composto com o contêiner de layout

Para maior ágil e controle, você poderia criar o painel de filtro acima como uma série de três painéis de filtro incorporados a um contêiner de layout. A imagem abaixo mostra um exemplo de como isso pode parecer.

Exemplo 5 — Alinhando com a paleta de cores da organização

Os painéis de filtro podem ser estilizados de acordo com a paleta de cores de sua organização. Além de definir a cor do fundo e do texto, você pode definir esquemas de cores para os estados de seleção no painel de filtro. Você pode querer que as seleções apareçam nas cores da marca principal da sua empresa, em vez da cor verde padrão.

Com os temas personalizados, você pode aplicar ainda mais o esquema de cores da sua organização, definindo uma cor para as seleções em todas as visualizações e na barra de ferramentas de seleção. Para obter mais informações, consulte Temas personalizados.

Neste exemplo, criamos um painel de filtro que reflete as seguintes cores da marca:

• Cor principal: código hexadecimal #3100ff

• Cor secundária: código hexadecimal #9ba7ff

Faça o seguinte:

1. Crie um novo aplicativo e cole os dados de exemplo em uma nova seção no Editor da carga de dados. Em seguida, carregue os dados.

2. Alterne para a exibição de pasta e arraste um Painel de filtro para a pasta.

3. Clique em Adicionar dimensão. Selecione Item Type.

4. No painel de propriedades, clique em Adicionar campo. Selecione Order Year.

5. Usando o botão Adicionar campo, adicione três outras dimensões como caixas de listagem:

   • Order Priority

   • Region

   • Sales Channel

6. No painel de propriedades, expanda Aparência > Geral.

7. Desative a opção Mostrar títulos.

8. Expandir Aparência > Apresentação.

9. Clique em Estilo.

10. Na guia Painel de filtro, defina as seguintes propriedades:

    • Sombra: pequena, código hexadecimal #000000

11. Na guia Caixas de listagem, defina as seguintes propriedades:

    • Tamanho da fonte do Cabeçalho: 14px

    • Estado de seleção:

      • Selecionado: código hexadecimal #3100ff

      • Alternativa: código hexadecimal #9ba7ff

      • Excluído: #bebebe

      • Selecionado excluído: #7b7a78

      • Possível: #ffffff

12. Redimensione o painel de filtro para um formato retangular alongado em um dos lados da pasta — por exemplo, três quadrados por doze quadrados.

Alterne para o modo de análise. Faça seleções no painel de filtro para visualizar o esquema de cores.

Exemplo de script de carregamento

Sales:
LOAD 
Dual([Order Month Text], [Order Month Num]) as [Order Month],

* INLINE [
Order ID,Order Date,Order Year,Order Quarter,Order Month Text,Order Month Num,Region,Country,Item Type,Sales Channel,Order Priority,Ship Date,Units Sold,Unit Price,Unit Cost,Total Revenue,Total Cost,Total Profit
522840487,2/8/2021,2021,Q1,Feb,2,Central America and the Caribbean,Honduras,Household,Offline,H,2/13/2017,8974,668.27,502.54,5997054.98,4509793.96,1487261.02
832401311,2/19/2021,2021,Q1,Feb,2,Asia,Mongolia,Personal Care,Offline,C,2/23/2014,4901,81.73,56.67,400558.73,277739.67,122819.06
419123971,11/19/2021,2021,Q4,Nov,11,Asia,Sri Lanka,Cosmetics,Offline,M,12/18/2016,6952,437.2,263.33,3039414.4,1830670.16,1208744.24
441619336,12/30/2021,2021,Q4,Dec,12,Asia,Turkmenistan,Household,Offline,L,1/20/2011,3830,668.27,502.54,2559474.1,1924728.2,634745.9
795490682,6/30/2022,2022,Q2,Jun,6,Central America and the Caribbean,Honduras,Snacks,Online,L,7/26/2016,2225,152.58,97.44,339490.5,216804,122686.5
158535134,10/27/2022,2022,Q4,Oct,10,Australia and Oceania,Australia,Office Supplies,Online,C,11/25/2015,2924,651.21,524.96,1904138.04,1534983.04,369155
955357205,1/5/2022,2022,Q1,Jan,1,Europe,United Kingdom,Household,Online,L,2/14/2012,282,668.27,502.54,188452.14,141716.28,46735.86
259353148,4/7/2022,2022,Q2,Apr,4,Sub-Saharan Africa,Djibouti,Cosmetics,Offline,H,4/19/2014,7215,437.2,263.33,3154398,1899925.95,1254472.05
450563752,6/9/2022,2022,Q2,Jun,6,Australia and Oceania,Australia,Cereal,Offline,H,7/2/2013,682,205.7,117.11,140287.4,79869.02,60418.38
705784308,10/30/2022,2022,Q4,Oct,10,Middle East and North Africa,Libya,Clothes,Offline,H,11/17/2010,6116,109.28,35.84,668356.48,219197.44,449159.04
505716836,10/13/2022,2022,Q4,Oct,10,Central America and the Caribbean,Haiti,Cosmetics,Offline,H,11/16/2013,1705,437.2,263.33,745426,448977.65,296448.35
807025039,7/25/2023,2023,Q3,Jul,7,Central America and the Caribbean,Belize,Clothes,Offline,M,9/7/2016,5498,109.28,35.84,600821.44,197048.32,403773.12
166460740,10/24/2023,2023,Q4,Oct,10,Europe,Lithuania,Office Supplies,Offline,H,11/17/2010,8287,651.21,524.96,5396577.27,4350343.52,1046233.75
462405812,4/23/2023,2023,Q2,Apr,4,Asia,Turkmenistan,Office Supplies,Online,M,5/20/2013,5010,651.21,524.96,3262562.1,2630049.6,632512.5
816200339,8/14/2023,2023,Q3,Aug,8,Middle East and North Africa,Libya,Fruits,Online,L,9/30/2015,673,9.33,6.92,6279.09,4657.16,1621.93
555990016,5/20/2023,2023,Q2,May,5,Sub-Saharan Africa,Djibouti,Cereal,Online,H,6/17/2017,8656,205.7,117.11,1780539.2,1013704.16,766835.04
231145322,7/5/2023,2023,Q3,Jul,7,Middle East and North Africa,Pakistan,Cosmetics,Offline,L,8/16/2013,9892,437.2,263.33,4324782.4,2604860.36,1719922.04
986435210,11/6/2023,2023,Q4,Nov,11,North America,Mexico,Household,Offline,C,12/12/2014,6954,668.27,502.54,4647149.58,3494663.16,1152486.42
217221009,10/28/2023,2023,Q4,Oct,10,Australia and Oceania,Federated States of Micronesia,Beverages,Online,C,11/15/2014,9379,47.45,31.79,445033.55,298158.41,146875.14
670854651,7/20/2024,2024,Q3,Jul,7,Australia and Oceania,Samoa,Cosmetics,Online,H,8/7/2013,9654,437.2,263.33,4220728.8,2542187.82,1678540.98
213487374,10/21/2024,2024,Q4,Oct,10,Europe,Spain,Household,Offline,L,11/30/2012,4513,668.27,502.54,3015902.51,2267963.02,747939.49
663110148,9/18/2024,2024,Q3,Sep,9,Middle East and North Africa,Lebanon,Clothes,Online,L,10/8/2012,7884,109.28,35.84,861563.52,282562.56,579000.96
827844560,3/18/2024,2024,Q1,Mar,3,Sub-Saharan Africa,Kenya,Vegetables,Online,L,4/7/2012,6457,154.06,90.93,994765.42,587135.01,407630.41
430915820,2/17/2024,2024,Q1,Feb,2,North America,Mexico,Personal Care,Offline,L,3/20/2012,6422,81.73,56.67,524870.06,363934.74,160935.32
240470397,7/7/2024,2024,Q3,Jul,7,Australia and Oceania,Australia,Beverages,Offline,H,7/11/2014,9389,47.45,31.79,445508.05,298476.31,147031.74
559427106,7/30/2024,2024,Q3,Jul,7,North America,Mexico,Personal Care,Offline,M,8/8/2015,5767,81.73,56.67,471336.91,326815.89,144521.02
665095412,2/10/2025,2025,Q1,Feb,2,Sub-Saharan Africa,Mozambique,Household,Offline,L,2/15/2012,5367,668.27,502.54,3586605.09,2697132.18,889472.91
];

drop fields [Order Month Text], [Order Month Num];