Beat Data – Fernando Pullutasig

Aprende análisis de datos

SVG y Power BI: Lleva tus Formatos Condicionales al Siguiente Nivel con DAX

—

by

bluesfer2007
in
DESCARGA EL EJEMPLO

En el mundo del Business Intelligence, la visualización de datos es clave para transformar información compleja en insights accionables. Power BI se ha consolidado como una herramienta fundamental para esta tarea, pero ¿qué pasa cuando los formatos condicionales estándar no son suficientes para transmitir el mensaje que realmente necesitas? Aquí es donde entran en juego los Gráficos SVG (Scalable Vector Graphics), abriendo un universo de posibilidades para crear visualizaciones dinámicas y personalizadas directamente en tus informes de Power BI.

DESCARGA EL EJEMPLO

Este artículo explorará qué son los SVG, por qué son la herramienta perfecta para formatos condicionales avanzados en Power BI, y cómo puedes integrarlos con el potente lenguaje DAX para generar visualizaciones que realmente impacten a tu audiencia.

¿Qué son los Gráficos SVG y por qué son tan poderosos?

Un SVG es un formato de imagen basado en XML para gráficos vectoriales bidimensionales. A diferencia de las imágenes rasterizadas (como JPG o PNG), que se componen de píxeles, los SVG se construyen a partir de formas geométricas (líneas, curvas, círculos, rectángulos, etc.) definidas por coordenadas matemáticas.

Ventajas clave de los SVG:

  1. Escalabilidad sin pérdida de calidad: Al ser vectoriales, los SVG se pueden escalar a cualquier tamaño sin pixelarse ni perder nitidez. Esto es crucial para informes que se visualizan en diferentes dispositivos y resoluciones.
  2. Tamaño de archivo reducido: Para gráficos simples, los archivos SVG suelen ser mucho más pequeños que sus equivalentes rasterizados, lo que mejora el rendimiento de carga de tus informes.
  3. Editables y manipulables: Dado que son código XML, los SVG se pueden editar con un editor de texto o programáticamente. Esta es la característica que los hace tan valiosos para Power BI.
  4. Interactividad: Los SVG pueden incorporar interactividad mediante JavaScript, aunque en Power BI la manipulación se realiza principalmente a través de DAX.
  5. Accesibilidad: El texto dentro de un SVG es seleccionable y buscable, lo que mejora la accesibilidad del contenido.

La Sinergia Perfecta: SVG y Formatos Condicionales en Power BI

Power BI permite utilizar imágenes en formatos condicionales a través de URLs o codificación Base64. Aquí es donde los SVG brillan. Al ser esencialmente código de texto, podemos generar dinámicamente el código SVG completo utilizando una medida DAX. Esto significa que cada aspecto del gráfico SVG (color, tamaño, texto, formas e incluso animaciones básicas) puede depender directamente de los valores de tus datos.

Imagina poder mostrar no solo un número, sino un indicador visual que cambia de color, muestra una flecha de tendencia, o incluso una pequeña barra de progreso, todo dentro de una celda de tu tabla o matriz. Las posibilidades son casi ilimitadas.

¿Cómo funciona la integración?

  1. Medida DAX: Creas una medida DAX que construye una cadena de texto que representa el código XML de un SVG.
  2. Base64/URI de Datos: Esta cadena SVG se prefija con "data:image/svg+xml;utf8," para que Power BI la interprete como una imagen.
  3. Formato Condicional: Aplicas esta medida a un campo visual (generalmente un campo de texto o una medida auxiliar) en tu tabla o matriz, configurando el formato condicional para que muestre la “URL de la imagen”.

Ejemplo Práctico: Indicadores de Tendencia con SVG y DAX

Para ilustrar este concepto, utilizaremos el snippet de código que proporcionaste. Este ejemplo crea un indicador visual que muestra el porcentaje de variación anual (YOY Ventas) con un color y una flecha de tendencia que cambian dinámicamente.

El Código DAX Explicado: TagyPercent

TagyPercent = 

VAR config =
"data:image/svg+xml;utf8," // Prefijo necesario para que Power BI interprete el SVG

VAR percent_value = 
    FORMAT([%YOY Ventas], "0.0%") // Formatea el valor del porcentaje para mostrarlo en el SVG

VAR color_principal =
    SWITCH(TRUE(), // Define el color del fondo del SVG basado en el valor de %YOY Ventas
        [%YOY Ventas] < 0, "#9e2a2b", // Rojo para valores negativos
        [%YOY Ventas] > 0, "#6a994e", // Verde para valores positivos
        "#0077b6" // Azul por defecto (ej. para "Verif")
    )

VAR texto_tag =
    SWITCH(TRUE(), // Define el texto a mostrar, incluyendo flechas de tendencia
        [%YOY Ventas] < 0, percent_value & " ▼", // Valor y flecha hacia abajo para negativos
        [%YOY Ventas] > 0, percent_value & " ▲", // Valor y flecha hacia arriba para positivos
        "Verif" // Texto por defecto
    )

RETURN
    config & // Concatena el prefijo con el código SVG
    "
    <svg viewBox='0 0 170 60' xmlns='http://www.w3.org/2000/svg'>
        <rect x='5' y='5' width='140' height='50' rx='12' ry='12' fill='" & color_principal & "'>
            <animate
                attributeName='opacity'
                values='1;0.4;1'
                dur='1.5s'
                repeatCount='indefinite' />
        </rect>

        <text x='68' y='30'
            font-family='system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, 
            Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue'
            font-size='23'
            fill='#FFFFFF'
            text-anchor='middle'
            dominant-baseline='middle' > " & texto_tag & " </text>
    </svg>
    "

Desglose del Código SVG Incrustado:

El corazón de esta medida DAX es la cadena de texto que representa el código SVG. Vamos a analizar sus componentes principales:

  • <svg viewBox='0 0 170 60' xmlns='http://www.w3.org/2000/svg'>:
    • svg: Es la etiqueta raíz de todo documento SVG.
    • viewBox='0 0 170 60': Define las coordenadas del sistema de usuario para el SVG. En este caso, el origen está en (0,0) y el “lienzo” tiene un ancho de 170 unidades y un alto de 60 unidades. Esto es importante para el escalado.
    • xmlns='http://www.w3.org/2000/svg': Declara el espacio de nombres XML para SVG. Es un estándar y siempre debe incluirse.
  • <rect x='5' y='5' width='140' height='50' rx='12' ry='12' fill='" & color_principal & "'>:
    • rect: Dibuja un rectángulo.
    • x='5', y='5': Coordenadas de la esquina superior izquierda del rectángulo.
    • width='140', height='50': Dimensiones del rectángulo.
    • rx='12', ry='12': Radios de las esquinas para redondear el rectángulo, creando una forma de “píldora”.
    • fill='" & color_principal & "': Aquí es donde DAX interactúa con el SVG. El atributo fill (color de relleno) se establece dinámicamente con el valor de la variable DAX color_principal, que a su vez depende del %YOY Ventas.
  • <animate attributeName='opacity' values='1;0.4;1' dur='1.5s' repeatCount='indefinite' />:
    • animate: Esta etiqueta es parte de SMIL (Synchronized Multimedia Integration Language), un estándar que permite animaciones declarativas directamente en SVG.
    • attributeName='opacity': Indica que se animará la propiedad opacity (opacidad) del elemento padre (rect).
    • values='1;0.4;1': Los valores de opacidad por los que pasará la animación (opaco -> semi-transparente -> opaco).
    • dur='1.5s': La duración de la animación es de 1.5 segundos.
    • repeatCount='indefinite': La animación se repetirá indefinidamente, creando un efecto de “parpadeo” sutil.
  • <text x='68' y='30' ... > " & texto_tag & " </text>:
    • text: Dibuja texto dentro del SVG.
    • x='68', y='30': Coordenadas del punto central del texto.
    • font-family, font-size, fill: Atributos de estilo para el texto (fuente, tamaño, color).
    • text-anchor='middle', dominant-baseline='middle': Centran el texto horizontal y verticalmente dentro de su posición.
    • " & texto_tag & ": Otra integración clave con DAX. El contenido del texto se inserta dinámicamente desde la variable DAX texto_tag, que incluye el porcentaje formateado y la flecha de tendencia.

Pasos para Implementar en Power BI:

  1. Crea la Medida DAX: Copia y pega el código TagyPercent en una nueva medida en tu modelo de Power BI. Asegúrate de que [%YOY Ventas] sea una medida existente en tu modelo que calcule el porcentaje de variación anual.
  2. Agrega la Medida a un Visual: Arrastra la medida TagyPercent a una tabla o matriz en tu informe.
  3. Configura el Formato Condicional:
    • Selecciona la columna donde has colocado la medida TagyPercent.
    • Ve al panel de “Formato” del visual.
    • En la sección “Elementos de celda” (o similar, dependiendo de la versión de Power BI), busca la opción para “Formato condicional” y selecciona “URL de la imagen”.
    • Asegúrate de que la medida TagyPercent esté seleccionada como el “Campo basado en”.
    • ¡Listo! Deberías ver tus indicadores SVG personalizados aparecer en la tabla.

Consideraciones Importantes y Mejores Prácticas

  • Rendimiento: Aunque los SVG son ligeros, generar muchos SVG complejos en una tabla grande puede afectar el rendimiento. Úsalos con moderación y optimiza tu código SVG.
  • Complejidad del SVG: Para SVG muy complejos, considera usar un editor de SVG (como Inkscape o Adobe Illustrator) para diseñar el gráfico y luego copiar el código XML.
  • Seguridad: Power BI solo renderiza SVG con el prefijo data:image/svg+xml;utf8, o data:image/svg+xml;base64,. Esto ayuda a mitigar riesgos de seguridad asociados con la ejecución de scripts maliciosos.
  • Interacción: Los SVG generados de esta manera son estáticos en cuanto a interacción directa del usuario (clics, etc.) dentro de Power BI. La interactividad se gestiona a nivel del visual de Power BI.
  • Mantenimiento: A medida que tus requisitos de visualización evolucionan, es posible que necesites ajustar el código SVG en tu medida DAX. Documenta bien tus medidas.
  • Alternativas: Para visualizaciones más complejas o interactivas que no se pueden lograr con SVG dinámicos, considera usar visuales personalizados de Power BI o integraciones con R/Python.

Conclusión: Un Mundo de Posibilidades Visuales

Los gráficos SVG, combinados con la flexibilidad de DAX, ofrecen una solución potente y creativa para ir más allá de los formatos condicionales estándar en Power BI. Te permiten diseñar indicadores visuales altamente personalizados que no solo muestran datos, sino que cuentan una historia de manera más efectiva y atractiva.

Al dominar esta técnica, podrás transformar tus informes de Power BI en experiencias visuales más ricas y dinámicas, proporcionando a tus usuarios una comprensión más profunda y rápida de la información. ¡Anímate a experimentar y lleva tus habilidades de visualización de datos al siguiente nivel!

Palabras clave SEO: SVG Power BI, Formato Condicional Power BI, DAX SVG, Visualizaciones Power BI, Gráficos Vectoriales Power BI, Indicadores de Rendimiento Power BI, Personalizar Power BI, Análisis de Datos Power BI, Business Intelligence, Dashboard Power BI, Medidas DAX, XML SVG.

Comments

Deja un comentario