Tutorial Power BI: Visuales animadas con SVG
En el último tutorial os mostramos como hacer visuales con formas personalizadas en Power BI gracias a las imágenes en formato SVG. Esta opción nos permite usar imágenes vectoriales como base de una visual, pudiendo rellenarla en el % que indique una medida o cambiar el color de la imagen en base al valor mostrado.
En este segundo tutorial vamos a ir un paso más allá y os enseñaremos a crear visuales animadas con SVG, lo que aportará a vuestros informes algo más de dinamismo y puede ayudaros a centrar la vista del usuario en un gráfico o métrica concreta.
El ejercicio que haremos hoy fue parte de mi sesión en el Power BI Days Bilbao 2022 organizado por Power Platform Euskadi y el grupo de Telegram de Power Bi en español.
Si os habéis perdido este tour de eventos de Power BI, no tardéis en apuntaros a la parada final del viaje que será un evento online del 17 al 19 de Enero de 2023 con muchas de las sesiones realizadas en abierto para todos. Os podéis registrar en el siguiente link.
¿Qué es un SVG?
Ya lo explicamos más en detalle en nuestro pasado tutorial sobre Power BI y SVG, pero básicamente consiste en un formato de imagen vectorial que por debajo tiene un código XML bastante simple:
Esto nos permite crear una medida con ese código en formato texto y poder cambiar el código en base al valor de una medida de nuestro modelo de datos. Por ejemplo, podemos hacer que la altura del relleno rojo del cuadrado sea proporcional al % del margen de nuestras ventas, o que el color del relleno cambie en base a si ese % de margen está por encima o por debajo de nuestro margen objetivo.
¿Podemos animar un SVG?
Pues la respuesta rápida es “Sí”, aunque necesitaremos ayuda de alguna herramienta externa. En nuestro caso hemos usado la webapp SVGator que tiene una cuota mensual, pero hay un periodo de prueba gratuito.
Una vez logueados y dados de alta veremos en nuestro navegador la app de svgator y algunos tutoriales que podemos revisar para entender como utilizar la solución:
Aquí podemos empezar a dibujar un gráfico SVG o cargar uno que ya hayamos buscado previamente por internet.
En nuestro caso, crearemos un SVG desde cero. Para ello usaremos el menú superior para crear dos objetos:
- Un Texto: con el porcentaje que queremos mostrar en el centro
- Una Elipse: que en nuestro caso es una circunferencia sin relleno
Hemos puesto el nombre de “Texto” y “Donut” a cada objeto o capa de la imagen con el objetivo de tener todo más ordenado e identificado:
A nivel de animaciones, en la parte inferior del área de trabajo de svgator podréis ver una linea de tiempo para animaciones donde podremos crear varios tipos de animación:
- Animación de cambio de forma
- Animación de cambio de color
- Animación de cambio de opacidad
- Animación de cambio del trazo(stroke)
- …
En este tutorial vamos a incluir 2 animaciones:
- Una de trazo para que vaya animando el dibujo del donut.
- Una de color para que vaya cambiando el color a medida que avanza el dibujo del trazo.
Como veis he creado 3 puntos de variación en la animación (o fotogramas clave) de color y dos (inicial y final) en la animación de trazo.
Aquí podréis ver el SVG inicial, intermedio y final:
- En el fotograma inicial el color es rojo y el avance de trazo de la circunferencia es del 0%
- En el fotograma intermedio el color es naranja y el avance de trazo de la circunferencia es del 50%
- En el fotograma final el color es verde y el avance de trazo de la circunferencia es del 100%
Una vez que tenemos nuestro proyecto animado simplemente lo tenemos que exportar como SVG a través del botón exportar:
Si abrimos la animación svg en un editor de texto debería parecerse al siguiente código:
Aunque asusta un poco al principio, pensad que la parte naranja final del código la podemos borrar porque no es útil para nuestro proyecto.
Añadiendo la animación en Power BI Desktop
Ahora el proceso es igual que el de un SVG estático. Usaremos la Custom Visual de HTML Content para poder mostrar este código como una imagen animada:
Este objeto visual solo nos pide una medida con el código HTML o XML que queremos que interprete. Por lo tanto, crearemos una medida con este código entrecomillado y sustituiremos las partes de código que queremos que sean variables por medidas de nuestro conjunto de datos:
SVG3 =
"
<svg id=""donut_animado-2"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" viewBox=""0 0 200 200"" shape-rendering=""geometricPrecision"" text-rendering=""geometricPrecision"">
<style><![CDATA[
#donut_animado-2-u-donut {animation-name: donut_animado-2-u-donut_s_p, donut_animado-2-u-donut_s_do;animation-duration: 3000ms;animation-fill-mode: forwards;animation-timing-function: linear;animation-direction: normal;animation-iteration-count: 1;}@keyframes donut_animado-2-u-donut_s_p { 0% {stroke: rgba(248,0,39,0.94)} 100% {stroke: "&[Color]&"}}@keyframes donut_animado-2-u-donut_s_do { 0% {stroke-dashoffset: 487.427712} 100% {stroke-dashoffset: "& [Valor Final] &"}}
]]></style>
<path id=""donut_animado-2-u-donut"" d=""M-77.013511,0c0-41.794372,25.886555-76.069902,74.417868-76.995842.85814-.016372,4.730991.009191,5.782602.045646C51.337199,-75.281049,77.013511,-41.624305,77.013511,0C77.013511,42.533388,42.533388,77.013511,0,77.013511s-77.013511-34.480123-77.013511-77.013511Z"" transform=""matrix(1.156901 0 0 1.152654 101.052816 99.641565)"" fill=""#fff"" stroke=""rgba(248,0,39,0.94)"" stroke-width=""10"" stroke-dashoffset=""487.427712"" stroke-dasharray=""487.427712""/><text id=""donut_animado-2-s-text1"" dx=""0"" dy=""0"" font-family="""donut_animado-2:::Montserrat""" font-size=""40"" font-weight=""700"" transform=""translate(27.571096 114.339623)"" stroke-width=""0""><tspan id=""donut_animado-2-s-tspan1"" y=""0"" font-weight=""700"" stroke-width=""0""><![CDATA[
"&Porcentaje[Valor Porcentaje]&"%
]]></tspan></text>
</svg>
"Como veis en el código DAX anterior, hemos doblado las comillas en el código original para poder entrecomillarlo sin problemas.
Ya sólo tenemos que arrastrar esta nueva medida a nuestra visual HTML Content y ya tenemos nuestro KPI animado.
En nuestro caso le hemos puesto un parámetro para que podáis jugar a cambiar el % y ver como reacciona la animación:
Recordad que si os suscribís a nuestra newsletter (es gratuito) os podréis descargar el fichero pbix original de este tutorial y del resto de artículos de nuestro blog.
Conclusiones
Creo que las posibilidades que nos aporta incluir SVGs (animados o no) en nuestros informes de Power BI son infinitas. Eso sí, no debemos pasarnos de frenada y llenar nuestro informe de formas y animaciones o perderemos el foco de nuestro usuario en la información.
¿Y vosotros que pensais? ¿Habéis imaginado ya como usarlo en vuestro cuadros de mando? Se admiten dudas, sugerencias e ideas en los comentarios de este tutorial. ¡Os escuchamos!
