Explorando Espaciados, Divisores y Subtítulos en visual de Tarjeta

Con las últimas actualizaciones de Power BI hemos podido asistir al principio del cambio de las visuales tal y como las conocemos. El equipo de visuales, con Miguel Myers a la cabeza, está iniciando una revolución que llevará las visuales estándares de Power BI a otro nivel.

En esta primera oleada de actualizaciones hemos conocido 3 conceptos nuevos, propios del diseño gráfico, que nos abren un sin fin de posibilidades:

• Espaciado (padding)
• Divisor
• Subtítulo

Sólo jugando con estos 3 parámetros de formato, y el ya conocido formato condicional, vamos a crear 10 tarjetas totalmente diferentes con el visual estándar.

Esto nos indica la potencia y flexibilidad que nos aportan estas nuevas opciones de formato y las que vendrán más adelante e iremos revisando en próximos tutoriales en vandalytic.

Empezamos por la tarjeta estándar

Lo primero que haremos es crear una tarjeta estándar con alguna de las medidas de nuestro modelo. En nuestro caso es un modelo muy sencillo (sólo para probar) y tenemos una medida de “Ventas”. Lo único que hemos cambiado de esta tarjeta es:

• Reducir el tamaño de letra del título
• Reducir el tamaño de letra del valor de globo (dato)
• Alinear el título a la izquierda
• Añadir borde redondeado

El resultado es el siguiente:

Una de las primeras cosas que notamos es que el margen superior es muy pequeño comparado con el inferior, y eso es algo que siempre me ponía algo nervioso de esta visual. También vemos que hay mucho espacio entre el título y el dato, pero vamos a solucionar estos dos problemas en el siguiente paso.

Jugando con el espaciado

Empezaremos tocando uno de los nuevo parámetros: el espaciado. Es una especie de margen (superior, inferior, derecho e izquierdo) que podemos definir entre 0 y 20 pixeles.

Encontraréis este parámetro de formato en Formato > Propiedades > Espaciado:

Como veis, por defecto Power BI ponía los siguientes espaciados:

• Superior: 0
• Inferior: 5
• Izquierdo: 5
• Derecho: 5

Lo cual confirma nuestra percepción inicial: el margen superior es menor que el inferior. Justamente jugando con estos espaciados podemos resolver ambos problemas que detectábamos en la versión inicial:

El resultado de estos nuevos espaciados en la tarjeta es el siguiente:

Como veis, al aumentar el espaciado superior a 10, ha bajado el título y al aumentar el espaciado inferior a 20 se ha acercado el valor del globo (dato) al título con respecto a la versión anterior. Los espaciados laterales nos han servido para dar algo de espacio en ambos lados.

Añadiendo un divisor

Ahora vamos a añadir un divisor, es decir, un espacio entre el titulo y el dato de nuestra tarjeta (o la gráfica si usamos otra visual).

Podéis encontrar este nuevo parámetro en Formato > Título > Divisor:

Sí, aparte de activar el Divisor, veis que más abajo hay opciones de espaciado para el título (para especificar el espacio entre el título y el divisor). De momento, activamos el divisor y haremos 3 versiones de la tarjeta con divisor:

Divisor Simple

Configuramos el divisor con el mismo color que el fondo de nuestro informe y simplemente:

Divisor Condicional

En este caso usamos el formato condicional para que si la diferencia con el presupuesto es negativa (estamos por debajo) el divisor sea rojo y si la diferencia es positiva (estamos por encima de presupuesto) sea verde:

Aquí os dejo la configuración del formato condicional en base a la medida de diferencia Presupuesto:

Divisor Superior

Un truco: si tienes la tarjeta anterior y simplemente dejas el título activado pero sin texto, el divisor queda en la parte de arriba:

Para que sepamos de que medida se trata, hemos activado la etiqueta de categoría (de este modo aparece el nombre de la medida “Ventas” en la parte inferior).

Añadiendo subtítulos

En este apartado, en vez de divisores, añadiremos subtítulos. Aunque podríamos añadir ambos a la vez, he preferido añadir subtítulo sin divisor para que nos centrásemos ahora en esta nueva opción.

Podéis encontrar este nuevo parámetro en Formato > Título > Subtítulo:

Esta opción nos permitirá añadir un titulo adicional debajo del principal. Lo utilizaremos en 4 versiones para ver sus posibilidades:

Subtítulo con % de desviación explicado

Crearemos la siguiente medida en nuestro modelo:

% Dif en subtitulo = 
FORMAT(ABS([% Dif Presupuesto]),"0.00 %") 
& IF ([Dif Presupuesto (€)]<0," por debajo de presupuesto", " sobre presupuesto")

Primero formateamos la medida del % de desv. como texto en formato % y le añadimos un “por debajo de presupuesto” o ” sobre presupuesto” dependiendo del valor de la desviación.

Añadiremos la medida en el texto del subtítulo para hacerlo dinámico:

Además, le pondremos el mismo formato condicional que al divisor en el apartado anterior.

El resultado es el siguiente:

Subtítulo con % de desviación y carácter especial

En este caso, hemos mantenido toda la configuración de la opción anterior, pero hemos cambiado la medida del subtítulo para que muestre un indicador hacia arriba o hacia abajo en función de la desviación:

La medida que hemos creado es la siguiente:

% Dif en subtitulo 2 = 
FORMAT([% Dif Presupuesto],"0.00 %") 
& IF ([Dif Presupuesto (€)]<0," ▼", " ▲")

Para poner los caracteres especiales ▼ y ▲ sólo tenemos que abrir el mapa de caracteres de windows y buscar estos caracteres especiales para copiarlos:

Subtítulo con Pais filtrado

También podemos usar el subtítulo para mostrar el País filtrado en un slicer (o vacío si no hay ningún filtro por país):

En este caso también tenemos un subtítulo dinámico en base a la siguiente medida:

Pais en subtitulo = IF(HASONEVALUE(Ventas[Pais]),MAX(Ventas[Pais]),"")

Si hay un sólo valor del campo “País” (está filtrado), muestra ese país en el subtítulo. En caso contrario no muestra nada.

Subtítulo con Pais filtrado, % desviación e emoji

¿Y si ponemos en el subtítulo el país filtrado y el dato de % desviación y un icono condicional? ¡Vamos a ello! El resultado te gustará:

Nuestra medida para el texto del subtítulo en este caso se compone del País filtrado + el dato de desviación formateado como % y un emoticono circular verde si hay desv. positiva o rojo si hay negativa:

Subtitulo con indicador = 
IF(HASONEVALUE(Ventas[Pais]),MAX(Ventas[Pais]),"") 
& FORMAT([% Dif Presupuesto]," 0.00 %")&" "
& IF([Dif Presupuesto (€)]<0,"?","?")

En este caso usaremos los emoticonos de Windows pulsando “Windows” + “.”:

¿Y si ponemos las cosas donde no tocan?

Ahora pondremos cada parte de la tarjeta en un lugar donde no toca a ver que pasa. Por ejemplo:

• Ponemos en el título el valor
• Ponemos el el subtítulo el título
• Ponemos en el valor una descripción de la desviación

El resultado podría ser parecido al siguiente:

Como veis, no tenemos que atenernos a las reglas, lo que nos da muchas más opciones. A continuación, os indico la medida que hemos utilizado para el título:

Ventas Texto = FORMAT([Ventas],"0,## €","es-es")

En el caso del subtítulo es un texto fijo “Ventas” y en el valor de globo hemos usado la siguiente medida:

Ventas Explicacion = 
"Las ventas han " 
& IF ([Dif Presupuesto (€)]<0,"bajado un ", "crecido un ") 
& FORMAT(ABS([% Dif Presupuesto]),"0.00 %") 
& IF ([Dif Presupuesto (€)]<0," por debajo de presupuesto", " sobre presupuesto")

El informe final

Os dejo el informe final con todas las tarjetas para que podáis verlos en detalle y jugar con el slicer de país.

Y recordad que si os suscribís a nuestra newsletter más abajo (es gratis) podéis descargar el pbix de este y de todos los tutoriales de nuestro blog.

Conclusiones

Como veis, con sólo 3 parámetros (espaciado, divisor y subtítulo), nuestras visuales han ganado mucha flexibilidad y opciones. En este post sólo hemos experimentado con la visual de Tarjeta, pero tenéis estas mismas opciones en cualquier visual estándar de Power BI.

¿Qué os han parecido estas nuevas opciones? ¿Ya las estáis usando? ¿Cuál os ha gustado más?

Si queréis profundizar en más trucos sobre visuales estándar, el maestro y mago de Power BI, Carlos Bérgamo, hizo una sesión online en el PUG Barcelona y podréis encontrar su sesión en su canal de youtube en breve.

¡Espero vuestros dudas y comentarios más abajo!