Construir un cuadro de mando en Superset¶

Ejercicio building-a-dashboard-annex.pdf · PDF

La mayoría de los juegos tienen en las opciones una pantalla escondida que se llama algo así como "personalizar HUD". Arrastras la barra de vida a otra esquina, haces más grande el minimapa, pulsas guardar y vuelves a jugar. Nadie juega dentro de esa pantalla. Existe solo para colocar cosas.

Superset tiene la misma pantalla. En la lección anterior diseñaste en papel el cuadro de mando (dashboard) Steam market: una audiencia, un propósito, tres franjas. Hoy lo construyes. Una advertencia antes: Superset no lo diseñará por ti. Te da una cuadrícula y unas cajas. El boceto es el plan, y sin él construyes a ciegas.

Qué aprenderás

Construir un gráfico Big Number para cada KPI, con una métrica en SQL personalizado y un formato de número
Crear un cuadro de mando y alternar entre el modo de visualización y el modo de edición
Colocar y redimensionar gráficos en la cuadrícula de 12 columnas
Organizar la pantalla con los seis elementos de diseño: encabezado, fila, columna, pestañas, texto / Markdown, separador
Explicar por qué un cuadro de mando guarda una referencia a un gráfico, no una copia
Evitar la trampa: cerrar la pestaña del navegador no guarda tu cuadro de mando

Primero, los KPI: el gráfico Big Number¶

La franja superior del boceto necesita cuatro KPI. Un gráfico de barras con una sola barra sería absurdo. Superset tiene un gráfico hecho justo para esto.

Un Big Number es un gráfico que muestra un único valor, muy grande, sin nada alrededor. Su trabajo es leerse desde la puerta.

Es el contador de munición del HUD: sin ejes, sin leyenda, un número.

Construye el primero, la proporción de juegos gratis:

Paso	Haz esto	Deberías ver
1	Charts → + Chart. Dataset: `games_clean`. Tipo de gráfico: Big Number (en la categoría KPI)	El constructor de gráficos, vacío
2	En Metric, abre la pestaña Custom SQL, escribe `AVG(is_free::int)` y pulsa Save	La métrica aparece en la caja
3	Pulsa Create chart	`0.1159`
4	Abre la pestaña Customize. En Number format escribe `.1%` y pulsa Intro	`11.6%`
5	Save del gráfico como `UT4 · KPI Free share`	El gráfico está en la lista Charts

En el paso 3 el número es correcto pero ilegible. 0.1159 y 11.6% son el mismo valor. Solo el segundo es un KPI que una persona puede leer de un vistazo.

Un formato de número es un código corto que le dice a Superset cómo escribir un número en pantalla: cuántos decimales, separadores de miles, un signo de porcentaje. Cambia el aspecto del número, nunca su valor.

Ahora construye los otros tres de la misma forma. Solo cambian la métrica y el formato:

Nombre del gráfico	Métrica (Custom SQL)	Formato de número	Valor
`UT4 · KPI Games`	`COUNT(*)`	`,d`	26,685
`UT4 · KPI Free share`	`AVG(is_free::int)`	`.1%`	11.6%
`UT4 · KPI Median price`	`PERCENTILE_CONT(0.5) WITHIN GROUP (ORDER BY price)`	`.2f`	4.99
`UT4 · KPI Hits`	`COUNT()`, más un filtro `owners_tier` Equal to (=)* `Hit`	`,d`	623

Código de formato	Significado	Ejemplo
`,d`	Número entero con separadores de miles	`26.7k` pasa a `26,685`
`.1%`	Porcentaje con un decimal	`0.1159` pasa a `11.6%`
`.2f`	Siempre dos decimales	`4.99`

Usa exactamente esos nombres de gráfico. Más adelante buscarás estos gráficos escribiendo UT4 en un cuadro de búsqueda, y en una lista de cuarenta gráficos llamados "Untitled" nadie encuentra nada.

Tres formas de que un Big Number salga mal

Muestra 0.1159 en vez de 11.6%. El formato de número sigue siendo Adaptive formatting. Escribe .1% y pulsa Intro: el número cambia al instante.
function avg(boolean) does not exist. PostgreSQL no puede hacer la media de verdadero y falso. Falta la conversión: escribe AVG(is_free::int).
El gráfico Hits muestra 26,685, o 0. Con 26,685 nunca se añadió el filtro. Con 0 escribiste hit: los valores distinguen mayúsculas y minúsculas, y el nivel se llama Hit.

¿Por qué Custom SQL para la mediana?

La pestaña Simple de una métrica ofrece una lista corta de agregaciones, y la mediana no está en todas las bases de datos. La pestaña Custom SQL te deja escribir cualquier expresión que entienda tu base de datos, como PERCENTILE_CONT(0.5) WITHIN GROUP (ORDER BY price).

Modo de edición: la pantalla de "personalizar HUD"¶

El modo de edición es el estado de un cuadro de mando en el que puedes añadir, mover, redimensionar y borrar sus piezas. El modo de visualización es lo que ve el lector: la pantalla terminada, sin herramientas de construcción.

	Modo de visualización	Modo de edición
En el juego	Jugando	La pantalla de "personalizar HUD"
Quién lo usa	El lector	El autor
Qué puedes hacer	Leer, hacer clic en pestañas	Arrastrar, redimensionar, añadir, borrar
Cómo llegas	Abres el cuadro de mando	Edit dashboard, o creas un cuadro de mando nuevo
Cómo sales		Save (conservar los cambios) o Discard (tirarlos)

Crea el cuadro de mando: Dashboards → + Dashboard. Se abre un cuadro de mando nuevo y vacío, ya en modo de edición. Haz clic en el título y escribe Steam market.

A la derecha hay un panel con dos pestañas:

Pestaña	Qué hay dentro
Charts	Todos los gráficos guardados. Escribe `UT4` en el cuadro de búsqueda para encontrar tus KPI
Layout elements	Las cajas que organizan la pantalla: encabezado, fila, columna, pestañas, texto, separador

Arrastra un gráfico desde el panel hasta la zona vacía, el lienzo (canvas), y ya está en el cuadro de mando.

Ojo: el modo de edición no guarda por sí solo

"He cerrado la pestaña, así que se ha guardado." No. El modo de edición mantiene tus cambios en el navegador hasta que pulsas Save. Cierra la pestaña, o refresca la página, y todo lo posterior al último guardado desaparece. Guarda después de cada tanda de trabajo, como un punto de control antes de un jefe.

La cuadrícula de 12 columnas¶

Arrastra UT4 · KPI Games al lienzo. Arrastra un segundo KPI y suéltalo al lado del primero: una zona azul muestra dónde aterrizará. Dos gráficos lado a lado están en la misma fila.

Ahora arrastra la esquina inferior derecha de un gráfico. No se mueve con suavidad. Salta.

La cuadrícula es la regla invisible del lienzo. Una fila mide 12 columnas de ancho, y cada gráfico ocupa un número entero de columnas.

Los anchos de una fila pueden sumar 12 como máximo. Esta es toda la aritmética que necesitas:

Gráficos en la fila	Anchos	Suma	Resultado
4 KPI	3 + 3 + 3 + 3	12	Una fila completa de cajas iguales
Un gráfico ancho y uno estrecho	8 + 4	12	Una fila completa, el gráfico ancho domina
3 gráficos tal como llegan	4 + 4 + 4	12	Llena: se rechaza un cuarto gráfico
3 gráficos, uno demasiado ancho	6 + 4 + 4	14	No cabe: el tercer gráfico no puede entrar en la fila

Un gráfico llega con 4 columnas de ancho. Así que tres KPI llenan la fila y el cuarto no tiene sitio. La solución es encoger primero y añadir después: redimensiona cada KPI a 3 columnas, y el cuarto cabe.

flowchart TB
    subgraph R1 ["<b>Fila 1</b>: 3 + 3 + 3 + 3 = 12 columnas"]
        direction LR
        A["<b>Games</b><br>3 columnas"] ~~~ B["<b>Free share</b><br>3 columnas"] ~~~ C["<b>Median price</b><br>3 columnas"] ~~~ D["<b>Hits</b><br>3 columnas"]
    end
    subgraph R2 ["<b>Fila 2</b>: 8 + 4 = 12 columnas"]
        direction LR
        E["<b>Gráfico de líneas</b>: juegos por año<br>8 columnas"] ~~~ F["<b>Gráfico de barras o de sectores</b>: tramo de precio<br>4 columnas"]
    end
    R1 --> R2

Ojo: un gráfico por fila es un scroll, no un cuadro de mando

La maquetación perezosa es cada gráfico a ancho completo, uno debajo de otro. El lector acaba haciendo scroll por cinco pantallas, justo lo que un cuadro de mando existe para evitar. Suelta los gráficos uno al lado de otro, en la zona azul al costado de un vecino.

Los seis elementos de diseño¶

Los gráficos no son lo único que hay en un HUD. Hay etiquetas, grupos, separadores.

Un elemento de diseño (layout element) es una caja que no contiene datos. Organiza o explica los gráficos que la rodean.

Elemento	Qué hace	En el HUD
Header	El título de una sección, en tres tamaños	La etiqueta sobre un grupo de indicadores
Row	Una franja horizontal, de 12 columnas de ancho, que contiene gráficos lado a lado	Una línea del HUD
Column	Apila cosas verticalmente dentro de una fila	Dos indicadores pequeños uno sobre otro
Tabs	Varias páginas en el mismo espacio, una visible cada vez	Las pestañas del inventario
Text / Markdown	Texto libre: una nota, la fuente, un enlace	El tooltip que explica
Divider	Una línea horizontal fina entre secciones	Un separador

Dos de ellos merecen una mirada más de cerca.

Tabs. Recuerda la franja inferior del boceto: "detalle para los curiosos". Las pestañas son la forma de mantener el detalle disponible sin gastar espacio de pantalla en él. El histograma va en una pestaña, el diagrama de dispersión en otra, y comparten el mismo rectángulo.

Text / Markdown. Markdown es una forma sencilla de dar formato al texto con caracteres normales: **negrita** se convierte en negrita. En un elemento Text / Markdown escribes la nota que dice al lector de dónde vienen los datos y qué no pueden decir. Haz doble clic en el elemento para escribir en él.

Ojo: las pestañas no son malas, y el Markdown no es decoración

Las pestañas esconden el detalle a propósito. La regla es simple: lo que debe verse de un vistazo nunca va en la segunda pestaña. Y la nota del final no es un adorno. Sin la fuente y los límites de los datos, nadie puede fiarse de los números que tiene encima.

Un cuadro de mando guarda referencias, no copias¶

Arrastraste UT4 · KPI Games al cuadro de mando. ¿Cuántos gráficos llamados UT4 · KPI Games existen ahora?

Todavía uno.

Una referencia es un puntero a algo que vive en otro sitio, como un acceso directo en tu escritorio. El cuadro de mando no contiene el gráfico. Apunta a él.

flowchart LR
    C["<b>Gráfico</b><br>UT4 · KPI Games<br>(existe una sola vez)"]
    D1["<b>Cuadro de mando</b><br>Steam market"] -- "referencia" --> C
    D2["<b>Cuadro de mando</b><br>otro cuadro de mando"] -- "referencia" --> C

Haces esto	Qué pasa
Editas el gráfico (su título, su métrica, su formato)	Todos los cuadros de mando que lo usan cambian también
Quitas el gráfico del cuadro de mando	El gráfico sigue existiendo en la lista Charts
Borras el propio gráfico	El cuadro de mando se queda con un hueco

Esto es una buena noticia y una responsabilidad. Buena noticia: corriges una errata una vez y queda corregida en todas partes. Responsabilidad: tu cambio llega a cuadros de mando que quizá habías olvidado.

Para cambiar un gráfico desde dentro de un cuadro de mando, usa los tres puntos del gráfico → Edit chart. Ahí es donde acortas un título que es demasiado largo para una caja estrecha.

Pruébalo: Steam market, del papel a la pantalla¶

Cuatro tareas cortas. Pulsa Save al final de cada una.

Tarea 1: la fila de KPI.

Paso	Haz esto	Deberías ver
1	Dashboards → + Dashboard. Título: `Steam market`	Un cuadro de mando vacío en modo de edición
2	Desde Layout elements, arrastra un Header y escribe `Steam market 2004–2018 · for an indie studio choosing a launch price`	Audiencia y propósito, arriba del todo
3	Desde Charts, arrastra tres gráficos `UT4 · KPI` a una fila bajo el encabezado: Games, Free share, Median price	Tres números lado a lado, la fila está llena
4	Redimensiona cada uno a 3 columnas, y tan bajo como permita. Luego arrastra Hits al final de la fila. Save	26,685 · 11.6% · 4.99 · 623 en una fila, del mismo ancho

Tarea 2: la franja media.

Paso	Haz esto	Deberías ver
1	Edit dashboard. Bajo la fila de KPI, añade un Header: `How the market grew`	Un título de sección
2	En una fila, añade tu gráfico de líneas de la Unidad 3 (juegos publicados por año) y tu gráfico de barras o de sectores (tramo de precio). Dale 8 columnas al de líneas y 4 al otro	Una fila completa: 8 + 4 = 12
3	Comprueba que los títulos y las etiquetas de los ejes siguen siendo legibles. Si no, acorta el título con los tres puntos → Edit chart. Save	Encabezado, 4 KPI y 2 gráficos en la primera pantalla, sin scroll

Tarea 3: pestañas para el detalle.

Paso	Haz esto	Deberías ver
1	Edit dashboard. Arrastra un elemento Tabs debajo de la franja media. Renombra la primera pestaña como `Prices`. Añade una segunda con el + y llámala `Quality`	Dos pestañas
2	En `Prices`, coloca el histograma (distribución del precio). En `Quality`, el diagrama de dispersión (precio frente a Metascore)	Cada pestaña muestra un gráfico distinto
3	Bajo las pestañas, arrastra un Divider y un Text / Markdown. Haz doble clic en el texto y sustituye el ejemplo por la nota de abajo. Save	La nota con la fuente, abajo del todo

**Source:** TidyTuesday 2019-07-30 (Steam Spy). 26,685 games released 2004–2018.
Free games count as price 0. Only 2,849 games (10.7 %) have a Metascore.

No copies números en una nota sin comprobarlos. Ejecuta esto en SQL Lab:

SELECT COUNT(*), MIN(release_year), MAX(release_year),
       COUNT(metascore), ROUND(100.0 * COUNT(metascore) / COUNT(*), 1)
FROM games_clean;

count	min	max	count	round
26685	2004	2018	2849	10.7

Tarea 4, si quieres más. Pon el mapa de calor en una tercera pestaña, Calendar. Luego usa una Column dentro de una fila para apilar dos KPI uno sobre otro junto a un gráfico. ¿Se lee mejor que la fila plana? Decídelo y prepárate para explicar por qué.

La maquetación terminada:

Franja	Contenido	Columnas
Header	`Steam market 2004–2018 · for an indie studio choosing a launch price`	12
Fila de KPI	Games 26,685 · Free share 11.6% · Median price 4.99 · Hits 623	3 + 3 + 3 + 3
Media	Líneas: juegos por año · barras o sectores: tramo de precio	8 + 4
Tabs	`Prices`: histograma · `Quality`: diagrama de dispersión	12 cada una
Nota	Fuente, tamaño, cómo se tratan los juegos gratis y las Metascore ausentes	12

Si algo falla

Síntoma	Causa y solución
El gráfico no está en la pestaña Charts	Desmarca Show only my charts, o busca por nombre
Un gráfico soltado cae en una fila nueva, o no se deja soltar	La fila está llena. Encoge primero los gráficos y luego arrastra otra vez a la zona azul al lado del vecino
Un gráfico se niega a encogerse, o se ve roto al estrecharlo	Un título largo se parte en líneas. Acorta el título en el gráfico
"There are no charts added to this dashboard"	Se guardó vacío. Edit dashboard y sigue
Todo ha desaparecido tras refrescar	Nunca se guardó. Reconstruye primero la fila de KPI y guarda después de cada tarea

Ojo: más grande no significa más importante

La posición gana al tamaño. Lo de arriba a la izquierda se lee primero, sea lo que sea. Un diagrama de dispersión enorme arriba expulsa los KPI de la primera pantalla, y el lector con cinco segundos se va sin nada. Abre tu cuadro de mando en modo de visualización y pregúntate: ¿qué leo primero? ¿Es lo más importante?

Ideas clave¶

Un gráfico Big Number muestra un valor, enorme. Su métrica va en Custom SQL y su formato de número (,d, .1%, .2f) lo hace legible.
El modo de edición es la pantalla de "personalizar HUD". Nada se guarda hasta que pulsas Save.
El lienzo es una cuadrícula de 12 columnas. Los anchos de una fila suman 12 como máximo: cuatro KPI son 3 + 3 + 3 + 3.
Seis elementos de diseño organizan la pantalla: header, row, column, tabs, text / Markdown, divider.
Un cuadro de mando guarda una referencia a cada gráfico. Edita el gráfico una vez y todos los cuadros de mando cambian.
La maquetación es una decisión sobre lo que el lector ve primero: KPI arriba, detalle en pestañas, la fuente en una nota.

Comprobación rápida¶

1. Tu Big Number muestra 0.1159 y quieres 11.6%. ¿Qué haces?

Cambiar la métrica a AVG(is_free::int) * 100
En la pestaña Customize, escribir .1% en Number format y pulsar Intro
Redimensionar el gráfico hasta que el número se redondee solo
Renombrar el gráfico como "Free share (%)"

Un formato de número cambia cómo se escribe un valor, no el valor. .1% significa "porcentaje con un decimal", así que 0.1159 se muestra como 11.6%.

2. Has trabajado en tu cuadro de mando veinte minutos en modo de edición y has cerrado la pestaña del navegador. ¿Qué ha pasado con tus cambios?

Se guardaron automáticamente cada minuto
Se conservan en un borrador que se abre la próxima vez
Se han perdido: el modo de edición solo conserva los cambios cuando pulsas Save
Los gráficos que añadiste se borraron de la lista Charts

El modo de edición no guarda por sí solo. Los cambios viven en el navegador hasta que pulsas Save. Los gráficos en sí están a salvo, porque el cuadro de mando solo guardaba referencias a ellos.

3. ¿Cuánto mide de ancho una fila de la cuadrícula del cuadro de mando?

4 columnas
8 columnas
10 columnas
12 columnas

La cuadrícula mide 12 columnas de ancho. Los gráficos llegan con 4 columnas de ancho, así que tres llenan una fila.

4. Una fila contiene tres gráficos de 6, 4 y 4 columnas. ¿Qué pasa y cuál es una solución correcta?

Nada: Superset los encoge automáticamente para que quepan
6 + 4 + 4 = 14, más de 12, así que el tercer gráfico no cabe; encógelos a 4 + 4 + 4 o mueve uno a otra fila o a una pestaña
El cuadro de mando no se puede guardar hasta que borres un gráfico
La fila crece a 14 columnas y el lector hace scroll hacia el lado

Los anchos de una fila suman 12 como máximo. No necesitas borrar nada: redimensiona los gráficos, o mueve uno a una fila nueva o a una pestaña.

5. ¿Qué elemento de diseño permite que dos gráficos compartan el mismo espacio, con uno visible cada vez?

Divider
Header
Tabs
Column

Las pestañas son varias páginas en el mismo rectángulo. Son ideales para el detalle. Una columna apila cosas verticalmente, pero las muestra todas a la vez.

6. Un compañero corrige una errata en el título de un gráfico, y el título también cambia en el cuadro de mando de otro compañero. ¿Por qué?

Superset copia cada cambio a todos los cuadros de mando con un nombre parecido
Los dos cuadros de mando se fusionaron por accidente
Ambos cuadros de mando guardan una referencia al mismo gráfico, así que solo hay un gráfico que editar
El segundo cuadro de mando estaba abierto en modo de edición al mismo tiempo

Un cuadro de mando no contiene una copia del gráfico. Guarda una referencia, como un acceso directo. Hay un gráfico, y todos los cuadros de mando que apuntan a él muestran el cambio.

7. Estás maquetando un cuadro de mando para el dueño de una tienda que lo mira unos segundos cada mañana. Elige las dos buenas decisiones.

Poner los tres KPI en la primera fila, 4 columnas cada uno
Poner el gráfico más grande y más colorido arriba, y los KPI en la segunda pestaña
Poner la tabla detallada en una pestaña, y una nota con la fuente abajo del todo
Dar a cada gráfico las 12 columnas completas para que cada uno se vea fácil

La posición gana al tamaño: lo de arriba a la izquierda se lee primero, así que los KPI van ahí (4 + 4 + 4 = 12). Las pestañas son para el detalle, nunca para lo que debe verse de un vistazo. Un gráfico a ancho completo por fila es un scroll, no un cuadro de mando.

Tu cuadro de mando responde a una pregunta sobre todo el mercado. Pero ¿cuál es el precio mediano solo de los éxitos? ¿Necesitas un segundo cuadro de mando? No: a continuación, Filtros y filtros cruzados.