¡Hola a todos! En el mundo del análisis de datos y la visualización, Power BI se ha consolidado como una herramienta poderosa y versátil. Una de sus funcionalidades menos conocidas, pero extremadamente útiles, es la posibilidad de integrar contenido HTML personalizado en nuestros informes mediante el objeto visual “HTML Content”.
DESCARGA EL ARCHIVO DE EJEMPLO:
En este tutorial, te mostraré cómo aprovechar esta característica para crear un card visual con un diseño animado, que no solo muestra una métrica clave, sino que también indica visualmente su tendencia respecto al periodo anterior. ¡Prepárate para llevar tus dashboards al siguiente nivel!
¿Qué es el Objeto Visual HTML Content?
El objeto visual “HTML Content” en Power BI te permite renderizar código HTML, CSS y JavaScript directamente en tu informe. Esto abre un abanico de posibilidades para personalizar tus visualizaciones más allá de las opciones estándar que ofrece Power BI. Podemos crear gráficos personalizados, integrar bibliotecas JavaScript y, como veremos hoy, diseñar elementos visuales únicos como cards animados.
Caso Práctico: Un Card de Ventas Animado
Vamos a crear un card que muestre el valor total de las ventas y su porcentaje de variación respecto al periodo anterior, con una flecha indicadora animada y colores dinámicos según si la variación es positiva o negativa.
Para esto, utilizaremos el siguiente código DAX como base:
```dax Card_Gemini = VAR ventas = FORMAT([Valor Ventas],"$##,00")
VAR porcentaje= FORMAT([%YOY Ventas], "00.00%") VAR flecha_verde=" <svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6 text-green-600' fill='none' viewBox='0 0 24 24' stroke='currentColor'> <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 7h8m0 0v8m0-8l-8 8-4-4-6 6' /> </svg>
" VAR flecha_roja=" <svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6 text-red-600' fill='none' viewBox='0 0 24 24' stroke='currentColor'> <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 17h8m0 0V9m0 8l-8-8-4 4-6-6' /> </svg> " VAR condicion_flecha= SWITCH(TRUE(), [%YOY Ventas]<0,flecha_roja, [%YOY Ventas]>0,flecha_verde, BLANK() )
VAR condicionar_class_potivi= SWITCH(TRUE(), [%YOY Ventas]<0,"negative", [%YOY Ventas]>0,"positive" ,BLANK())
VAR relleno_cuadroFlecha= SWITCH (TRUE(), [%YOY Ventas]>0,"bg-green-100", [%YOY Ventas]<0,"bg-red-100" ,BLANK())
RETURN
" <!DOCTYPE html>
<html lang='es'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Tarjeta de Ventas</title> <script src='https://cdn.tailwindcss.com'></script> <style> /* Definimos la animación de parpadeo */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* Aplicamos la animación al icono SVG dentro de la tarjeta */ .blinking-icon { animation: blink 1.5s infinite; }
/* Estilos para la variación positiva / .positive .variation-icon { color: #10B981; / Verde (Emerald 500 en Tailwind) */ } .positive .variation-text { color: #10B981; }
/* Estilos para la variación negativa / .negative .variation-icon { color: #EF4444; / Rojo (Red 500 en Tailwind) */ } .negative .variation-text { color: #EF4444; } </style>
</head> <body class='bg-gray-100 flex items-center justify-center min-h-screen font-sans'>
<div class='flex flex-col md:flex-row gap-8 p-4'>
<div class='" &condicionar_class_potivi & " bg-white p-6 rounded-2xl shadow-lg w-full max-w-sm'> <div class='flex items-center justify-between mb-4'> <p class='text-lg font-medium text-gray-500'>Ventas Totales</p> <div class='"&relleno_cuadroFlecha&" p-2 rounded-lg'> "&condicion_flecha &" </div> </div>
<div class='mb-4'> <h2 class='text-4xl font-bold text-gray-800'> "&ventas&" </h2> </div>
<div class='flex items-center space-x-2'> <svg class='h-5 w-5 variation-icon blinking-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'> <path fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z' clip-rule='evenodd' /> </svg> <span class='variation-text font-semibold text-sm'> "&porcentaje&" </span> <span class='text-gray-500 text-sm'>vs. periodo anterior</span> </div> </div>
<div class='negative bg-white p-6 rounded-2xl shadow-lg w-full max-w-sm'> <div class='flex items-center justify-between mb-4'> <p class='text-lg font-medium text-gray-500'>Ventas Totales</p> <div class='bg-red-100 p-2 rounded-lg'> "&flecha_roja&" </div> </div>
<div class='mb-4'> <h2 class='text-4xl font-bold text-gray-800'>$85,140.20</h2> </div>
<div class='flex items-center space-x-2'> <svg class='h-5 w-5 variation-icon blinking-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'> <path fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm-.707-4.293l3-3a1 1 0 00-1.414-1.414L10 10.586 8.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0z' clip-rule='evenodd' /> </svg> <span class='variation-text font-semibold text-sm'>-4.8%</span> <span class='text-gray-500 text-sm'>vs. periodo anterior</span> </div> </div>
</div>
</body> </html>
" ```Explicación del Código DAX:
- Variables para las métricas:
ventas: Formatea la medidaValor Ventascomo moneda.porcentaje: Formatea la medida[%YOY Ventas](porcentaje de variación interanual de ventas) con dos decimales.flecha_verdeyflecha_roja: Contienen código SVG para iconos de flechas hacia arriba y hacia abajo, respectivamente. Se les asignan clases de color de Tailwind CSS.condicion_flecha: Utiliza la funciónSWITCHpara determinar qué icono de flecha mostrar basado en el valor de[%YOY Ventas].condicionar_class_potivi: Asigna las clases CSS “positive” o “negative” dependiendo del signo de[%YOY Ventas]. Estas clases se usarán para aplicar estilos específicos.relleno_cuadroFlecha: Asigna clases de fondo de Tailwind CSS (verde o rojo claro) al contenedor de la flecha.
- Retorno del código HTML:
- Se construye una estructura HTML básica con metadatos y la inclusión de la CDN de Tailwind CSS para facilitar el diseño.
- Se define un estilo CSS interno para crear una animación de “parpadeo” (
blink) que se aplicará al icono de variación. También se definen estilos para las clases.positivey.negativepara colorear el icono y el texto de la variación. - El
<body>contiene una estructura flexible (flex) para centrar el contenido. - Se crea un
divque representa la tarjeta. Las clases CSS de Tailwind se aplican directamente, y se utilizan las variables DAX para inyectar dinámicamente:- La clase
condicionar_class_potivipara aplicar estilos de color según la variación. - El valor de
ventas. - El contenido SVG de la flecha (
condicion_flecha) dentro de undivcon el fondo condicional (relleno_cuadroFlecha). - El valor de
porcentaje.
- La clase
- Se incluye un icono SVG de una flecha (genérica) con la clase
blinking-iconpara aplicar la animación de parpadeo. La clasevariation-iconse utilizará para cambiar su color dinámicamente a través de las clases.positivey.negative.
Integrando el HTML en Power BI
Ahora, veamos cómo llevar este código a Power BI:
- Crea una medida: En tu modelo de datos de Power BI, crea una nueva medida y pega el código DAX completo (
Card_Gemini). Asegúrate de que las medidasValor Ventasy[%YOY Ventas]ya existan en tu modelo. - Añade el objeto visual HTML Content: En tu informe de Power BI, busca y añade el objeto visual “HTML Content” (puede que necesites habilitarlo en las características de vista previa si no lo encuentras).
- Arrastra la medida al objeto visual: Arrastra la medida que creaste (
Card_Gemini) al campo “HTML Content” del objeto visual.
¡Listo! Deberías ver aparecer en tu informe un card visual con el valor de las ventas, una flecha indicando la tendencia y el porcentaje de variación, con la flecha y el porcentaje coloreándose de verde si la variación es positiva y de rojo si es negativa. Además, el icono de la flecha tendrá una sutil animación de parpadeo.
Personalización y Mejoras
Este es solo un punto de partida. Puedes personalizar aún más este card visual:
- Cambiar los estilos: Modifica las clases de Tailwind CSS o añade tus propios estilos en la sección
<style>para cambiar la apariencia de la tarjeta. - Añadir más información: Incluye otros datos relevantes en la tarjeta.
- Integrar JavaScript: Para animaciones más complejas o interacciones, puedes añadir código JavaScript dentro de las etiquetas
<script>. - Hacerlo más dinámico: Utiliza más medidas DAX para controlar diferentes aspectos del diseño o la información mostrada.
Conclusión
El objeto visual HTML Content es una herramienta poderosa para extender las capacidades de visualización de Power BI. Con un poco de conocimiento de HTML, CSS y DAX, puedes crear elementos visuales únicos y atractivos que mejoren la forma en que presentas tus datos. ¡Anímate a experimentar y a crear tus propios cards animados!
Espero que este tutorial te haya sido útil. ¡No dudes en dejar tus comentarios y preguntas!
Deja un comentario