Seus painéis — seu visual! Conheça o novo tema personalizado em Reveal

Para os usuários do nosso aplicativo, Reveal agora tem dois temas prontos para uso- Montanha e Oceano - que ficam lindos no tema claro e escuro. Procurando incorporar visualizações para corresponder ao tema do seu aplicativo? Não é um problema! Por meio do SDK do Reveal, agora você pode criar seus próprios temas personalizados e controlar todos os aspectos de seus painéis.

Novos temas de painel no Reveal

Para proporcionar a melhor experiência ao usuário com os novos temas de Montanha e Oceano, desenvolvemos paletas de cores que ficam lindas, funcionam no modo claro e no modo escuro e têm uma aparência moderna.
Tema do oceano do Reveal

Paletas de cores

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

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 damos a você controle total sobre os painéis 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 a série em suas visualizações. Você pode adicionar um número ilimitado de cores. Depois que todas as cores forem usadas em uma visualizaçã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 + Painel e em outras ações interativas. Você pode alterar a cor para corresponder à mesma cor de destaque usada 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: Reveal usa três tipos de texto no aplicativo: regular, médio e negrito. Você pode especificar os usos da fonte para cada um desses grupos de texto.
• Cores de plano de fundo da visualização e do painel: você pode configurar separadamente a cor do plano de fundo do painel e a cor do plano 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(). Essa classe contém todas as configurações personalizáveis listadas acima.

Ao criar um novo arquivo RevealTheme/$.ig. RevealTheme, você obterá os valores padrão para cada configuração. Agora, você pode modificar as configurações que precisam ser alteradas. Por fim, passe a instância do tema para o método UpdateRevealTheme(theme)/updateRevealTheme(theme). Se você tiver um painel ou outro componente Reveal já exibido na tela, será necessário 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 feitas nas outras.

Nesse caso, você pode chamar o método GetCurrentTheme()/getCurrentTheme(). Esse método permite que você obtenha os últimos valores definidos para as configurações de 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.

Os métodos GetCurrentTheme()/getCurrentTheme() e UpdateRevealTheme(theme)/updateRevealTheme(theme) podem ser acessados por meio do RevealView / $.ig. Classe RevealView.

Exemplo de código

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

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

Agora use este snippet 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); 

Nota: Primeiro, você precisa limpar os valores padrão da lista de cores do gráfico para que o novo conjunto de cores seja adicionado.

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: uso das opções de fonte

Ao definir as configurações de boldFont, regularFont ou mediumFont de um tema de revelação, 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. Talvez seja necessário usar @font-face (propriedade CSS) para garantir que o nome da face da fonte especificado em the$.ig. As configurações de fonte RevealTheme estão disponíveis.

Agora, depois de implementar nossas alterações de tema, aqui estão os novos resultados nos Editores de Painel e Visualização.

O Editor de Painel depois de aplicar as alterações dos trechos de código acima.

O Editor de Visualização depois de aplicar as alterações dos snippets de código acima.

Trechos de código para alterar as propriedades do tema

Os documentos para alterar o tema estão localizados aqui:

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

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

• chartColors
• fonte regular
• fonte média
• fonte em negrito
• cor da fonte
• painelBackgroundColor
• visualizationBackgroundColor
• accentColor
• useRoundedCorners
• conditionalFormatting.lowColor
• conditionalFormatting.midColor
• conditionalFormatting.hiColor
• conditionalFormatting.noneColor

Aqui está um snippet que modifica o tema no SDK da Web:

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

Configurando a cor/fonte padrão
revealTheme.accentColor = "rgb(15,96,69)";
revealTheme.regularFont = "Justo";
revealTheme.mediumFont = "Advertência";
revealTheme.boldFont = "Domine";
revealTheme.fontColor = "rgb(226,24,125)";
revealTheme.dashboardBackgroundColor = "rgb(24,224,37)";
revealTheme.visualizationBackgroundColor = "rgb(221,224,37)";

Configurando a 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 as 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;

Atualizar o painel
$.ig. RevealView.updateRevealTheme(revealTheme);

Depois de definir as propriedades do Theme, chame o método updateReveal no RevealView.

$.ig. RevealView.updateRevealTheme(revealTheme);

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

<link href="https://fonts.googleapis.com/css?family=Righteous" rel="folha de estilo">
<link href="https://fonts.googleapis.com/css?family=Domine" rel="folha de estilo">
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="folha de estilo">

Com essas configurações de propriedade, você poderá personalizar Reveal análises incorporadas para corresponder à experiência do cliente da marca que você precisa!

Se houver pontos de estilo adicionais que você precisa, por favor me avise!