Quick BI:Projetar um tema

Pré-requisitos

Você está conectado ao console do Quick BI e está na página de edição de painel. Crie um painel.

Procedimento

1. Na página de edição do painel, clique em Page Settings na barra de menu superior.

   

   Clique no ícone para expandir ou recolher o painel Page Settings.

   

2. Em Page Settings, clique na aba Theme e configure o Template de Dashboard Theme, os Global Styles e o Page Layout.

   

   Para localizar uma configuração rapidamente, insira palavras-chave na search box na parte superior.

   

   Para recolher todas as categorias, clique no ícone ao lado da caixa de pesquisa e selecione Collapse all categories.

   

3. Configure os parâmetros a seguir.

• Na seção Dashboard theme, selecione um tema oficial ou personalizado.

  • Temas oficiais: Default, Deep Blue, Starry Sky, Technology, Event, Minimal e Indigo.

  • Temas personalizados: Selecione um tema personalizado existente.

    

    Administradores da organização podem clicar em Custom para abrir a página Report Theme Management e gerenciar temas personalizados.

    

    Nota

    Os temas personalizados estão disponíveis apenas no Quick BI Professional Edition:

    • Administradores da organização podem escolher entre temas oficiais ou criar temas personalizados.

    • Usuários não administradores podem escolher entre temas oficiais ou personalizados existentes, mas não podem criar novos.

• Na seção Global styles, configure os seguintes parâmetros.

  Parâmetro	Descrição
  Theme Mode	Selecione light mode ou dark mode. light mode: Fundo branco para o painel. Esta é a configuração padrão (light mode). dark mode: Fundo preto para o painel.
  Chart color scheme	Use template color schemes fornecidos pelo sistema ou custom color schemes. Ao definir Chart color scheme como Template color scheme, selecione um esquema na lista suspensa. Por exemplo, ao selecionar o esquema de cores Advanced Gray, o gráfico é atualizado conforme mostrado abaixo. Se você definir o chart color scheme como Custom, poderá modificar cada amostra de cor. Nota O Gradient color style aplica-se a gráficos de indicator, trend e comparison.
  Page font	Defina o font type da página do painel.
  Card corner radius	Defina o corner radius dos cartões de gráfico: sem raio, raio pequeno ou raio grande.
  Spacing	Escolha entre Compact, Normal ou Custom.
  Spacing between cards	Disponível apenas quando Spacing estiver definido como Custom. Ajuste o espaçamento de linhas e colunas entre os cartões.
  Card padding	Disponível apenas quando Spacing estiver definido como Custom. Ajuste o preenchimento superior, inferior, esquerdo e direito de um cartão.
  Semantic colors	Na conditional formatting e em exibições de indicadores secundários, as cores transmitem alterações nos dados, como aumentos, estabilidade ou reduções. O sistema associa automaticamente as cores semânticas padrão com base no chart color scheme selecionado. Também é possível personalizar o esquema de cores global para indicadores de aumento/redução, positivo/negativo e status. Isso se aplica a todo o painel.

• Na seção Page layout, configure os seguintes parâmetros.

  Parâmetro	Descrição
  Page layout	Selecione o layout do painel: Fit to Content ou Fit to Window. Fit to Content: Dimensiona a página com base no tamanho real e na posição de todos os componentes, como gráficos e controles de consulta. Fit to Window: Escala a página para caber na janela do navegador. Também permite configurar o layout de colunas.
  Page information	Configure a Title area, o story outline e o Footer exibidos no painel. Title area: Mostra ou oculta a área de título do painel. Quando visível, clique no ícone para configurar os itens a seguir. Show main title: Mostra ou oculta o título principal do painel. Quando visível, ajuste seu estilo de texto, logotipo e alinhamento. Note: Mostra ou oculta notas na área de título. Quando visíveis, clique no ícone para personalizar o conteúdo da nota. Content area bottom margin: Ajusta a margem inferior da área do título principal. Cover background: Define a cor de fundo, a imagem de sobreposição e a altura da área do título principal. Story outline: Adiciona um esboço de história abaixo da área de título. O sistema gera automaticamente um esboço com base na ordem de layout dos gráficos. Clique no ícone ao lado de um story node para personalizá-lo na caixa de diálogo Edit Story Node. Footer: Mostra ou oculta a área de rodapé. Quando visível, clique no ícone para definir as configurações a seguir. Footer text content: Define o conteúdo de texto da área de rodapé. Footer background: Define a cor de fundo, a imagem de sobreposição e a altura da área de rodapé.
  Page background	Defina a cor de fundo como Solid color ou Gradient e, opcionalmente, sobreponha uma imagem de fundo.
  Page width	Escolha Adaptive ou Fixed. Nota Se você selecionar Fixed, defina as margens esquerda e direita da página em pixels. Essas margens tornam-se fixas e não podem ser ajustadas nas configurações de margem da página.
  Page margin	Escolha entre Normal, Ultra-wide page ou Custom.

• Na seção Dashboard background, configure os seguintes parâmetros:

  Parâmetro	Descrição
  Top image e Bottom image	Selecione uma Existing image ou uma Custom image. Nota É possível carregar imagens personalizadas de um arquivo local ou de uma URL.

• Na seção Dashboard components, configure os seguintes parâmetros.

  

  Parâmetro		Descrição
  Title	Text	Defina o font size e o alignment do título do gráfico.
  	Separator	Defina a cor e a largura da linha separadora do título.
  	Custom title background	Personalize o plano de fundo do título para corresponder ao tema do relatório. Background color: Escolha a cor de preenchimento do plano de fundo do título. É possível definir como Solid color ou Gradient. Overlay background image: Sobreponha uma imagem ao plano de fundo do título. Use imagens padrão ou carregue uma imagem personalizada. Nota É possível carregar imagens personalizadas de um arquivo local ou de uma URL. Title area position: Defina a posição da área de título. Escolha entre Inside chart ou Above chart. Apply title background to charts in Tab: Aplique o plano de fundo do título aos gráficos dentro de um componente Tab. Todos os gráficos no componente Tab herdam a cor de fundo, a imagem de sobreposição e as configurações de posição da área de título. Com abas aninhadas, apenas o título da aba principal sincroniza o estilo quando Apply title background to charts in Tab está ativado. Os títulos das sub-abas mantêm suas configurações originais.
  	Status icon	Defina o status icon para exibir ao passar o mouse ou sempre e configure sua cor.
  	Hide More actions entry point in preview mode	Oculta o menu More actions no preview mode.
  Background style	Fill	Mostre ou oculte uma cor de preenchimento para o plano de fundo.
  	Overlay background image	Sobreponha uma imagem de fundo ou personalizada ao plano de fundo do gráfico.
  	Border	Mostre ou oculte a borda e defina sua cor.
  	Show shadow	Mostre ou oculte uma sombra para o plano de fundo.
  Empty data style	Text content	Personalize o aviso de dados vazios. A mensagem padrão é "No data returned."
  	Icon style	Personalize o estilo do ícone para dados vazios. Nota Se você selecionar Custom image, carregue uma imagem local ou forneça uma URL.
  	Jump link	Ao clicar no ícone ou no texto, você navega para o endereço especificado.

• Na seção General content styles, configure os seguintes parâmetros.

  Parâmetro		Descrição
  Chart styles	Axis title	Defina o tamanho da fonte, a cor e o estilo do título do eixo.
  	Axis label	Defina o tamanho da fonte, a cor e o estilo do rótulo do eixo.
  	Data label	Defina o tamanho da fonte, a cor e o estilo do rótulo de dados.
  	Tooltip	Defina o tamanho da fonte, a cor e o estilo da dica de ferramenta.
  	Legend	Defina o tamanho da fonte, a cor e o estilo da legenda, além de determinar se o símbolo da legenda escala com o texto. Quando ativado: Para gráficos de linhas, a espessura da linha do símbolo da legenda escala proporcionalmente à espessura da linha do gráfico. Para outros gráficos, o tamanho do símbolo da legenda escala proporcionalmente ao tamanho da fonte da legenda.
  Table styles	Style settings	Defina o estilo da tabela: Zebra, Bordered, Simple ou Minimal.
  	Primary color scheme	Defina o esquema de cores primário: Theme color, Gray ou Custom.
  	Header	Defina o tamanho da fonte, a cor e outras propriedades do cabeçalho da tabela.
  	Content	Defina o tamanho da fonte, a cor e outras propriedades do conteúdo da tabela.

• Na seção Tab component, configure os seguintes parâmetros.

  Parâmetro	Descrição
  Selected tab style	Defina o estilo da aba selecionada: Underline, Separator ou Selected block.
  Tab label style	Defina o tamanho da fonte do rótulo da aba e os estilos para seus estados padrão e selecionado.
  Show border of visualization cards in Tab	Mostre ou oculte bordas para cartões de visualização dentro de um componente Tab e defina sua cor.
  Customize spacing between components in Tab	Insira valores de espaçamento personalizados entre componentes dentro de uma aba. Se não estiver selecionado, aplica-se o espaçamento global de linhas e colunas do painel. Nota Faixa editável: -32 px a 32 px para PCs, 0 px a 20 px para dispositivos móveis.

• Na seção Query control, configure os seguintes parâmetros.

  

  Parâmetro	Descrição
  Border	Mostre ou oculte a query control border e defina sua cor.
  Interaction buttons	Defina a cor dos interaction buttons.
  Button corner radius	Defina o button corner radius para os botões de interação.
  Condition spacing	Defina o spacing between conditions.
  Condition name	Defina o estilo de texto do condition name.
  Selection box style	Defina o style of the selection box.
  Background color	Defina a background color da caixa de seleção.
  Border	Defina a espessura e a cor da borda da caixa de seleção.
  Corner radius	Defina o corner radius da caixa de seleção.
  Text	Defina a cor e o tamanho da fonte do text da caixa de seleção.

  Nota

  Essas configurações aplicam-se globalmente a todos os controles de consulta. Controles de consulta individuais com style settings personalizadas substituem essas configurações globais. Por exemplo, se o estilo global da caixa de seleção estiver definido como Fill, mas o controle de consulta A tiver seu estilo definido como Border, o controle de consulta A usará Border.

• Clique em Save.