arrow Voltar para o blog Your Dashboards — Your Look! Meet the New Custom Theming in Reveal

Seus painéis — seu estilo! Conheça o novo tema personalizado no Reveal.

Veja como aplicar temas personalizados ao software de BI incorporado do Reveal e criar seu próprio estilo de painel e visualização para corresponder à aparência do seu aplicativo.

Resumir: ChatGPT ChatGPT Perplexity Perplexity

Resumo executivo:

O Reveal tem como objetivo fornecer visualizações de dados prontas para serem integradas com análises incorporadas. Uma parte importante é garantir que os elementos que você está incorporando em seus aplicativos correspondam à aparência. Para nossos usuários de aplicativos, o Reveal agora possui dois temas fornecidos — Mountain e Ocean — que ficam ótimos em modos claro e escuro.

Para nossos usuários de aplicativos, o Reveal agora possui dois temas fornecidos — Mountain e Ocean — que ficam ótimos em modos claro e escuro. Deseja incorporar visualizações que correspondam ao tema do seu aplicativo? Sem problemas! Por meio do Reveal SDK, você pode agora criar seus próprios temas personalizados e controlar todos os aspectos de seus painéis.

Novos temas de painel no Reveal.

Para fornecer a melhor experiência do usuário com os novos temas Mountain e Ocean, desenvolvemos paletas de cores que ficam ótimas, funcionam no modo claro e no modo escuro e têm uma aparência moderna. Reveal dashboard O tema Ocean do Reveal.

Paletas de cores.

Cada tema dentro do aplicativo Reveal tem 10 cores diferentes em sua paleta. Ao editar ou criar uma visualização, você pode alterar facilmente a cor inicial escolhendo na paleta:

Reveal app color palette example

Temas personalizados ao incorporar análises.

Quando se trata de incorporar análises em seus aplicativos existentes, é fundamental que esses painéis correspondam à aparência do seu aplicativo. É por isso que oferecemos controle total sobre os painéis do Reveal por meio de nosso SDK. Em comparação com o aplicativo, aqui estão as principais personalizações que você pode obter com temas personalizados:

  • Paletas de cores.: As cores usadas para mostrar as séries em suas visualizações. Você pode adicionar um número ilimitado de cores. Depois que todas as cores forem usadas em uma visualização, o Reveal gerará automaticamente novos tons dessas cores. Dessa forma, suas cores não se repetirão e cada valor terá sua própria cor.
  • Cor de destaque.: A cor de destaque padrão no Reveal é um tom de azul que você pode encontrar no botão + Dashboard e em outras ações interativas. Você pode alterar a cor para corresponder à mesma cor de destaque que você usa em seus aplicativos.
  • Cores de formatação condicional.: Altere as cores padrão dos limites que você pode definir ao usar a formatação condicional.
  • Fonte.: O Reveal usa três tipos de texto no aplicativo: regular, médio e negrito. Você pode especificar a fonte usada para cada um desses grupos de texto.
  • Cores de fundo da visualização e do painel.: Você pode configurar separadamente a cor de fundo do seu painel e a cor de fundo das visualizações.

Como você cria seu tema personalizado?

Criar seu próprio tema no Reveal é tão fácil quanto criar uma instância do novo RevealTheme()/$.ig.RevealTheme(). classe. Esta classe contém todas as configurações personalizáveis que listamos acima.

Ao criar uma nova RevealTheme/$.ig.RevealTheme. instância, você obterá os valores padrão para cada configuração. Agora, você pode modificar as configurações que precisa alterar. Finalmente, passe a instância do tema para o UpdateRevealTheme(theme)/ updateRevealTheme(theme). método. Se você tiver um painel ou outro componente Reveal já exibido em sua tela, precisará renderizá-lo novamente para ver as alterações aplicadas.

Você pode já ter aplicado seu próprio tema, mas deseja modificar algumas das configurações sem perder as alterações que você fez nas outras.

Nesse caso, você pode chamar o GetCurrentTheme()/getCurrentTheme(). método. Este método permite que você obtenha os últimos valores que você definiu para suas configurações do RevealTheme. Ao contrário do caso em que você cria uma nova instância do RevealTheme do zero, depois de aplicar suas alterações e atualizar seu tema novamente, você obterá os valores atuais para cada configuração que não modificou, em vez dos valores padrão.

Ambos os GetCurrentTheme()/getCurrentTheme(). e o UpdateRevealTheme(theme)/ updateRevealTheme(theme). métodos estão acessíveis através do RevealView / $.ig.RevealView classe.

Exemplo de código.

No seguinte trecho de código, ilustramos como obter o tema atual, aplicar as alterações desejadas e atualizar o tema no Reveal.

Primeiro, vamos começar com um exemplo de como uma captura de tela se parece antes de fazermos as alterações:

Reveal Marketing Dashboard

Agora, use este trecho de código para definir seus temas personalizados:

var regularFont = new FontFamily(new Uri("pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/"), "./#Verdana Italic"); 
var boldFont = new FontFamily(new Uri("pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/"), "./#Verdana Bold"); 
var mediumFont = new FontFamily(new Uri("pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/"), "./#Verdana Bold Italic"); 

var customTheme = RevealView.GetCurrentTheme(); 
customTheme.ChartColors.Clear(); 
customTheme.ChartColors.Add(Color.FromRgb(192, 80, 77)); 
customTheme.ChartColors.Add(Color.FromRgb(101, 197, 235)); 
customTheme.ChartColors.Add(Color.FromRgb(232, 77, 137)); 

customTheme.BoldFont = new FontFamily("Gabriola"); 
customTheme.MediumFont = new FontFamily("Comic Sans MS"); 
customTheme.FontColor = Color.FromRgb(31, 59, 84); 
customTheme.AccentColor = Color.FromRgb(192, 80, 77); 
customTheme.DashboardBackgroundColor = Color.FromRgb(232, 235, 252); 

RevealView.UpdateRevealTheme(customTheme);

Observação: Você primeiro precisa limpar sua lista de cores do gráficovalores padrão para que o novo conjunto de cores seja adicionado.

O seguinte trecho de código ilustra como criar uma nova instância da classe revealTheme, aplicar as alterações nas configurações desejadas e atualizar o tema no Reveal Web.   Exemplo de Código – Reveal Web

var revealTheme = new $.ig.RevealTheme(); 
revealTheme.chartColors = ["rgb(192, 80, 77)", "rgb(101, 197, 235)", "rgb(232, 77, 137)"]; 

revealTheme.mediumFont = "Gabriola"; 
revealTheme.boldFont = "Comic Sans MS"; 
revealTheme.fontColor = "rgb(31, 59, 84)"; 
revealTheme.accentColor = "rgb(192, 80, 77)"; 
revealTheme.dashboardBackgroundColor = "rgb(232, 235, 252)"; 

$.ig.RevealView.updateRevealTheme(revealTheme);

Observação: Usando as opções de fonte

Ao definir as configurações de boldFont, regularFont ou mediumFont de um tema Reveal, você precisa passar o nome exato da família de fontes. O peso é definido pela definição da própria fonte e não no nome. Você pode precisar usar @font-face (propriedade CSS) para garantir que o nome da fonte especificado no $.ig.RevealTheme configurações de fonte estejam disponíveis.

Agora, após implementar nossas alterações de tema, aqui estão os novos resultados tanto no Dashboard quanto nos Editores de Visualização.

Dashboard in Reveal BI O Editor de Dashboard após aplicar as alterações dos trechos de código acima.

Reveal dashboard O Editor de Visualização após aplicar as alterações dos trechos de código acima.

Trechos de código para alterar as propriedades do tema.

A documentação para alterar o tema está localizada aqui:

https://www.revealbi.io/help/developer/rvui.wpf~infragistics.sdk.revealtheme_properties

Estas são as propriedades que você pode definir em $.ig.RevealTheme:

  • chartColors
  • regularFont
  • mediumFont
  • boldFont
  • fontColor
  • dashboardBackgroundColor
  • visualizationBackgroundColor
  • accentColor
  • useRoundedCorners
  • conditionalFormatting.lowColor
  • conditionalFormatting.midColor
  • conditionalFormatting.hiColor
  • conditionalFormatting.noneColor

Aqui está um trecho modificando o tema no SDK da web:

var revealTheme = new $.ig.RevealTheme();

// Definindo Cor/Fonte Padrão revealTheme.accentColor = “rgb(15,96,69)”; revealTheme.regularFont = “Righteous”; revealTheme.mediumFont = “Caveat”; revealTheme.boldFont = “Domine”; revealTheme.fontColor = “rgb(226,24,125)”; revealTheme.dashboardBackgroundColor = “rgb(24,224,37)”; revealTheme.visualizationBackgroundColor = “rgb(221,224,37)”;

// Definindo Formatação Condicional revealTheme.conditionalFormatting.hiColor = “rgb(87,0,127)”; revealTheme.conditionalFormatting.lowColor = “rgb(158,0,232)”; revealTheme.conditionalFormatting.midColor = “rgb(198,137,229)”; revealTheme.conditionalFormatting.noneColor = “rgb(255,255,127)”;

// Definindo Cores do Gráfico revealTheme.chartColors = [“rgb(248,53,255)”, “rgb(248,53,75)”, “rgb(54,247,160)”, “rgb(130,53,244)”, “rgb(235,242,138),rgb(239,139,219),rgb(38,116,68),rgb(108,147,178)”];

// Definindo Aparência Quadrada ou Arredondada revealTheme.useRoundedCorners = false;

// Atualizando o Dashboard $.ig.RevealView.updateRevealTheme(revealTheme);

Depois de definir as propriedades do Tema, chame o método updateReveal na RevealView.

$.ig.RevealView.updateRevealTheme(revealTheme);

Para a personalização das fontes, você precisará adicionar estas linhas ao CSS da página:

Com essas configurações de propriedade, você deverá ser capaz de personalizar Reveal, a solução de análise incorporada. para corresponder à experiência do cliente da marca que você deseja!

Se houver pontos de estilo adicionais que você precise, por favor, me avise. Por que você precisa de tomada de decisão baseada em dados!

Aproveite o poder dos dados

Desenvolva sua empresa com dados contextuais e em tempo real.

Solicite uma demonstração

Atualizações do produto