Tooltips y filtro cruzado en Deneb con __selected__
Haz que tu gráfica responda cuando alguien filtra el reporte: apaga las barras que no están seleccionadas y agrega un tooltip.
2 partes · 8 y 3 min
Curso gratis. Tu Maestro, una IA, .
En un reporte de Power BI haces clic en una barra y los demás visuales de la página responden al instante: se filtran o resaltan la parte seleccionada. Un visual de Deneb también puede participar en ese filtro cruzado, tanto para responder cuando filtras en otro visual como para filtrar el resto del reporte cuando haces clic en una de sus marcas.
Para que eso pase hay una regla que conviene tener clara desde el principio: Deneb te dice en los datos qué filas están seleccionadas y tú decides en la especificación cómo se ven. Deneb nunca cambia el color ni la opacidad de tus marcas por su cuenta.
En Power BI, esta conexión viene apagada por omisión. Para encenderla dentro del editor de Deneb, abre la configuración del proyecto (Project setup), busca la sección de filtro cruzado (Cross-filtering) y activa la casilla "Expose cross-filtering values for dataset rows". Al activarla, cada fila de dataset recibe una columna adicional llamada __selected__, que en todo momento tiene uno de estos tres valores:
Valor de __selected__ | Qué significa en el reporte | Cómo debe verse la marca |
|---|---|---|
neutral | Nadie ha seleccionado nada en el reporte | Normal (opacidad completa) |
on | Hay una selección activa y esta fila es parte de ella | Normal (opacidad completa) |
off | Hay una selección activa y esta fila quedó fuera | Apagada (opacidad baja) |
Fíjate con cuidado en los tres estados antes de escribir la condición. Es muy común pensar: "si __selected__ es on, pongo la opacidad en 1; en cualquier otro caso, la bajo a 0.3". El problema aparece en cuanto abres el reporte sin haber hecho clic en ningún lado: en ese momento todas las filas tienen neutral. Como neutral es distinto de on, todas las barras caen en el "otro caso" y la gráfica entera se dibuja apagada desde el inicio.
La condición que funciona en los tres estados pregunta por off: solo baja a 0.3 la opacidad de las filas que quedaron fuera de una selección activa, y deja en 1 tanto las filas en on como todas las filas cuando están en neutral.
"opacity": { "condition": { "test": "datum.__selected__ == 'off'", "value": 0.3 }, "value": 1}Dentro de condition, la expresión datum.__selected__ == 'off' revisa el valor de la columna __selected__ en cada fila (datum). Fíjate en que 'off' lleva comillas simples porque va dentro de un texto entre comillas dobles. Si la prueba se cumple, la marca toma la opacidad de 0.3; si la fila tiene on o neutral, toma el valor general de 1.
Antes de llevar esto a tu reporte, ten presentes tres detalles de cómo funciona el filtro cruzado en Deneb:
- Límite de filas seleccionadas: por omisión, una selección de filtro cruzado abarca hasta 50 puntos de datos. Si tu gráfica tiene más filas, puedes cambiar ese límite entre 1 y 250 en la misma sección de filtro cruzado de la configuración.
- Cómo limpiar la selección: al hacer clic en una marca, esa fila pasa a
ony las demás aoff. Al hacer clic en el fondo vacío de la gráfica, fuera de cualquier marca, la selección se limpia y todas las filas vuelven aneutral. - Pide la tabla al nivel de tus marcas: Deneb pega
__selected__en cada fila original que envía Power BI. Si dentro de tu especificación usas una transformación que crea filas nuevas, comoaggregateofold, las filas resultantes pierden el vínculo con las filas originales y dejan de saber si están seleccionadas. Cuando quieras filtro cruzado en una gráfica, deja que Power BI haga la suma: pon en el pozo de valores únicamente las columnas y medidas al nivel al que vas a dibujar (por ejemplo,SucursalyVentas), para que llegue una fila por barra con su columna__selected__intacta.
Si tu gráfica necesita sumar datos y el filtro cruzado deja de responder, pregúntale a tu Maestro cómo acomodar los campos.
Además del filtro cruzado, una gráfica interactiva necesita mostrar el valor exacto cuando alguien pasa el cursor encima de una barra. La forma más rápida de encender ese cuadro emergente en Vega-Lite es agregar "tooltip": true dentro de mark.
Inténtalo
El editor de abajo funciona como Deneb con el filtro cruzado activado. En el pozo de valores están Sucursal y Ventas, así que dataset recibe una fila por sucursal. Haz clic en la barra de Puebla Angelópolis y abre la vista de filas del dataset: verás que su columna __selected__ cambia a on y la de las demás sucursales cambia a off. Si haces clic en el espacio en blanco fuera de las barras, todas regresan a neutral.
Buen lugar para parar. Después: Tooltips con los campos que importan · 3 min
Tooltips con los campos que importan
Poner "tooltip": true en la marca te saca del apuro para explorar rápido, pero en un reporte real puede mostrar columnas internas que Deneb agrega a cada fila, como __row__ y __selected__, además de números crudos sin separador de miles. En una junta nadie necesita leer qué número de fila interna tiene cada sucursal.
Para elegir qué campos aparecen, en qué orden, con qué nombre y con qué formato de número, quita "tooltip": true de la marca y agrega el canal tooltip dentro de encoding con una lista entre corchetes:
"tooltip": [ { "field": "Sucursal", "type": "nominal" }, { "field": "Ventas", "type": "quantitative", "format": ",.0f", "title": "Ventas (pesos)" }]Cada elemento de la lista es un campo del cuadro emergente y usa las mismas piezas que ya conoces de x y y:
field: el nombre exacto de la columna endataset. Lo que dejes fuera de la lista, como__row__y__selected__, queda oculto.type: el tipo de dato (nominal,quantitativeotemporal). Es indispensable ponerlo bien porque el formato depende del tipo: si olvidas"type": "quantitative"enVentaso lo dejas comonominal, Vega-Lite trata el número como texto y el formato",.0f"deja de aplicarse.format: cómo se escribe el número o la fecha. El código",.0f"agrega comas para los miles y muestra el entero sin decimales.title: la etiqueta que acompaña al valor, por si quieres mostrar"Ventas (pesos)"aunque la medida se llame soloVentas.
En Power BI, Deneb se conecta con los tooltips nativos del reporte. Así el tooltip se ve igual que el de los demás visuales del reporte. Si quieres probarlo aquí mismo, regresa al editor de arriba, cambia "tooltip": true por la lista en encoding y pasa el cursor por las barras.
Si quieres mostrar un signo de pesos o un porcentaje en el tooltip, pregúntale a tu Maestro qué código poner en format.