arrow Volver al blog Your Dashboards — Your Look! Meet the New Custom Theming in Reveal

Sus paneles: ¡su estilo! Presentamos el nuevo sistema de temas personalizados en Reveal.

Vea cómo aplicar temas personalizados al software de BI integrado de Reveal y crear su propio estilo de panel y visualización para que coincida con el aspecto de su aplicación.

Resumir: ChatGPT ChatGPT Perplexity Perplexity

Resumen ejecutivo:

Reveal se trata de brindarle visualizaciones de datos listas para integrarse con análisis integrados. Una parte importante es asegurarse de que los elementos que está integrando en sus aplicaciones coincidan con el aspecto. Para nuestros usuarios de aplicaciones, Reveal ahora tiene dos temas predefinidos: Montaña y Océano, que se ven hermosos tanto en modo claro como en modo oscuro.

Para nuestros usuarios de aplicaciones, Reveal ahora tiene dos temas predefinidos: Montaña y Océano, que se ven hermosos tanto en modo claro como en modo oscuro. ¿Quiere integrar visualizaciones que coincidan con el tema de su aplicación? ¡No hay problema! A través del SDK de Reveal, ahora puede crear sus propios temas personalizados y controlar todos los aspectos de sus paneles.

Nuevos temas de panel en Reveal.

Para brindar la mejor experiencia de usuario con los nuevos temas de Montaña y Océano, desarrollamos paletas de colores que se ven hermosas, funcionan en modo claro y modo oscuro, y tienen un aspecto moderno. Reveal dashboard El tema Océano de Reveal.

Paletas de colores.

Cada tema dentro de la aplicación Reveal tiene 10 colores diferentes en su paleta. Al editar o crear una visualización, puede cambiar fácilmente el color de inicio seleccionando de la paleta:

Reveal app color palette example

Temas personalizados al integrar análisis.

Cuando se trata de integrar análisis en sus aplicaciones existentes, es clave que esos paneles coincidan con el aspecto de su aplicación. Por eso, le brindamos un control total sobre los paneles de Reveal a través de nuestro SDK. En comparación con la aplicación, aquí están las personalizaciones clave que puede lograr con temas personalizados:

  • Paletas de colores.: Los colores utilizados para mostrar las series en sus visualizaciones. Puede agregar un número ilimitado de colores. Una vez que se utilizan todos los colores en una visualización, Reveal generará automáticamente nuevos tonos de estos colores. De esta manera, sus colores no se repetirán y cada valor tendrá su propio color.
  • Color de énfasis.: El color de énfasis predeterminado en Reveal es un tono de azul que puede encontrar en el botón + Panel y otras acciones interactivas. Puede cambiar el color para que coincida con el mismo color de énfasis que utiliza en sus aplicaciones.
  • Colores de formato condicional.: Cambie los colores predeterminados de los límites que puede establecer al usar el formato condicional.
  • Fuente.: Reveal utiliza tres tipos de texto en la aplicación: regular, medio y negrita. Puede especificar la fuente que se utiliza para cada uno de estos grupos de texto.
  • Colores de fondo de la visualización y el panel.: Puede configurar por separado el color de fondo de su panel y el color de fondo de las visualizaciones.

¿Cómo crea su tema personalizado?

Crear su propio tema en Reveal es tan fácil como crear una instancia de la nueva RevealTheme()/$.ig.RevealTheme(). clase. Esta clase contiene todos los ajustes personalizables que enumeramos anteriormente.

Al crear una nueva RevealTheme/$.ig.RevealTheme(). instancia, obtendrá los valores predeterminados para cada configuración. Ahora, puede modificar la configuración que necesita cambiar. Finalmente, pase la instancia del tema al UpdateRevealTheme(theme)/ updateRevealTheme(theme). método. Si tiene un panel u otro componente de Reveal ya mostrado en su pantalla, deberá volver a renderizarlo para ver los cambios aplicados.

Es posible que ya haya aplicado su propio tema, pero que desee modificar algunos de los ajustes sin perder los cambios que realizó en los demás.

En este caso, puede llamar al GetCurrentTheme()/getCurrentTheme(). método. Este método le permite obtener los últimos valores que ha establecido para la configuración de RevealTheme. A diferencia del caso en el que crea una nueva instancia de RevealTheme desde cero, después de aplicar sus cambios y actualizar su tema nuevamente, obtendrá los valores actuales para cada configuración que no modificó en lugar de los valores predeterminados.

Ambos los GetCurrentTheme()/getCurrentTheme(). y el UpdateRevealTheme(theme)/ updateRevealTheme(theme). métodos son accesibles a través de RevealView / $.ig.RevealView clase.

Ejemplo de código.

En el siguiente fragmento de código, ilustramos cómo obtener el tema actual, aplicar los cambios que desee y actualizar el tema en Reveal.

Primero, comencemos con un ejemplo de cómo se ve una captura de pantalla antes de realizar cambios:

Reveal Marketing Dashboard

Ahora, use este fragmento de código para definir sus 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: Primero, debe limpiar su lista de colores de gráficovalores predeterminados para agregar el nuevo conjunto de colores.

El siguiente fragmento de código ilustra cómo crear una nueva instancia de la clase revealTheme, aplicar los cambios a la configuración que desee y actualizar el tema en Reveal Web.   Ejemplo 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);

Nota: Usando las opciones de fuente

Al definir la configuración de boldFont, regularFont o mediumFont de un tema de Reveal, debe pasar el nombre exacto de la familia de fuentes. El grosor se define mediante la definición de la propia fuente y no en el nombre. Es posible que deba usar @font-face (propiedad CSS) para asegurarse de que el nombre de fuente especificado en el $.ig.RevealTheme configuración de fuente esté disponible.

Ahora, después de implementar nuestros cambios de tema, aquí están los nuevos resultados tanto en el Dashboard como en los editores de visualización.

Dashboard in Reveal BI El editor de Dashboard después de aplicar los cambios de los fragmentos de código anteriores.

Reveal dashboard El editor de visualización después de aplicar los cambios de los fragmentos de código anteriores.

Fragmentos de código para cambiar las propiedades del tema.

La documentación para cambiar el tema se encuentra aquí:

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

Estas son las propiedades que puede configurar en $.ig.RevealTheme:

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

Aquí hay un fragmento que modifica el tema en el SDK web:

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

// Estableciendo el color/fuente estándar 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)”;

// Estableciendo el formato 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)”;

// Estableciendo los colores del 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)”];

// Estableciendo un aspecto cuadrado o redondeado revealTheme.useRoundedCorners = false;

// Actualizando el Dashboard $.ig.RevealView.updateRevealTheme(revealTheme);

Una vez que configure las propiedades del tema, llame al método updateReveal en el RevealView.

$.ig.RevealView.updateRevealTheme(revealTheme);

Para la personalización de las fuentes, deberá agregar estas líneas al CSS de la página:

Con esta configuración de propiedades, debería poder personalizar Reveal para que coincida con la experiencia del cliente de la marca que necesita.

Si hay puntos de estilo adicionales que necesite, por favor, hágamelo saber. ¿Por qué necesita tomar decisiones basadas en datos?!

Aprovecha el poder de los datos

Haz crecer tu negocio con datos contextuales y en tiempo real.

Solicita una demostración

Actualizaciones del producto