La analítica se ha vuelto tan masiva y popular que hoy en día es muy difícil mirar las redes sin cruzarse con un dashboard expuesto por una persona o empresa. Esto nos nutre de ideas para interfaces y experiencia de usuario. Algo que suele ser muy llamativo cuando cruzamos estos tableros son los movimientos y animaciones.
Hace tiempo que existe la integración entre PowerBi y la posibilidad de explotar contenido html pero nunca había estado tan popular como ahora. Por esta razón escribo este artículo para mostrar que puede ser muy simple utilizar estas interacciones para animar nuestras visualizaciones.
Hoy no vamos a conocer que significa HTML y CSS y como se usan. Solamente vamos a ver como incorporarlo a nuestro informe de Power Bi para animar tarjetas.
Como todo lenguaje de programación, las posibilidades son infinitas y podríamos hacer muchísimas cosas de las que vemos dentro de sitios web. Sin embargo, vamos a mantenernos en un truco sencillo que no requiera un amplio e intenso conocimiento en los lenguajes. Simplemente nos resta saber que html es un lenguaje que podemos apreciar en los sitios web y está basado en etiquetas. Por otro lado, tenemos css generando la estética y estilo de esas etiquetas.
Suena a mucho trabajo ¿verdad? ¿Vamos a escribir mucho código? no, claro que no. Gracias a internet y sus interacciones hoy podemos re utilizar mucho código css ya expuesto en repositorios de internet para solamente llamar un método e importarlo.
Lo primero será cargar una custom visual que nos permita escribir código html. En este caso yo elegí una de las más antiguas y gratuita.
El modo de funcionamiento de este tipo de visualizaciones funciona escribiendo el código en un texto de una medida. Entonces vamos a agregar la visualización e introducirle una medida con el siguiente texto:
Con esto podemos apreciar que la visualización interpreta las etiquetas "h2″ de html. Esta misma lógica vamos a llevarla a las tarjetas. Debemos prestar atención a un detalle al momento de usar datos de nuestro modelo. La visualización renderiza texto. Esto significa que un "SUM ()" va a producir un error. Para introducirlo dentro del texto necesitamos convertirlo con FORMAT. Dicha funcion convierte a texto su contenido. El código debería quedarnos algo así:
"<h2>" & FORMAT ( SUM ('InternetSales'[Unit Cost]), "#0.0") & "</h2>"
Podemos aprovechar de que FORMAT nos permite elegir un formateo para mostrar el número como nos gustaría representarlo. De ese modo podríamos elaborar una tarjeta tradicional.
La magia animada
Para lograr una animación de la tarjeta vamos a importar una librería css que ya existe. Esto quiere decir que vamos a escribir más código. Seguiremos el ejemplo de la librería https://animate.style/
El enlace mismo nos explica que para usarla debemos primero agregar algo al código y luego podemos incluirlo en la "class" de nuestra etiqueta.
La clase de la etiqueta es un conjunto de código css ya escrito que leera de la dirección que pusimos al inicio. En este caso llama una ejecución de animación al cargar la visualización. En PowerBi esta carga se repetirá con cada interacción de página, lo que daría movimiento luego de seleccionar un filtro. Veamos como luce esto.
Sum Price =
"
<head>
<link
rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css""/>
</head>
<br>
<h1 class=""animate__animated animate__bounce"" style=""text-align:center;"">" & FORMAT ( SUM ('InternetSales'[Unit Price]), "#0,0") & "</h1>
"
Esta medida contiene un texto que define un código. Primero el código carga la librería como nos indicó la página dentro de la etiqueta <head>. Segundo ponemos <br> que hace un "enter" o breakline para centrar un poco más el número. Finalmente usamos la etiqueta de titulo <h1> con nuestra medida.
La diferencia de la etiqueta h1 en esta oportunidad con la anterior es que definimos un atributo class también copiado tal cual del sitio web. El sitio muestra distintos efectos que podemos utilizar con tan solo reemplazar la palabra "bounce" por otro que nos guste. Antes de terminar el h1 tenemos un segundo atributo style que se usa para definir código css. En esta caso lo escribí para centrar el texto de la tarjeta.
De ese modo ajustamos la tarjeta y llegamos al siguiente resultado:
Ese es el resultado final al que llegaríamos. El código que ejecutamos animaría por cada recarga que tengamos en la visual. En este caso lo veremos la primera vez y luego de clickear un filtro o interación de gráficos. Si quisieramos otro tipo de resultado no esta demás repetir que las posibilidades con código son enormes. Solamente hay que conocer más sobre el lenguaje.
Espero que el truco les sea útil para generar animaciones interesantes y sencillas como ésta. Si les gusta el lenguaje puede ir hasta el infinito aprendiendo más. Como siempre les dejo este desarrollo en mi github.
Y vos, ¿escribiste algo en html dentro de PowerBi alguna vez?