Construir un quadre de comandament a Superset¶

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

La majoria de jocs tenen a les opcions una pantalla amagada que es diu alguna cosa com "personalitza el HUD". Arrossegues la barra de vida a una altra cantonada, fas més gran el minimapa, prems desa i tornes a jugar. Ningú no juga dins d'aquesta pantalla. Només existeix per ordenar coses.

Superset té la mateixa pantalla. A la lliçó anterior vas dissenyar sobre paper el quadre de comandament (dashboard) Steam market: una audiència, un propòsit, tres franges. Avui el construeixes. Un avís primer: Superset no el dissenyarà per tu. Et dona una quadrícula i unes quantes caixes. L'esbós és el pla, i sense ell construeixes a cegues.

Què aprendràs

Construir un gràfic Big Number per a cada KPI, amb una mètrica SQL personalitzada i un format de número
Crear un quadre de comandament i canviar entre el mode de visualització i el mode d'edició
Col·locar i redimensionar gràfics a la quadrícula de 12 columnes
Organitzar la pantalla amb els sis elements de disseny: capçalera, fila, columna, pestanyes, text / Markdown, divisor
Explicar per què un quadre de comandament guarda una referència a un gràfic i no una còpia
Evitar la trampa: tancar la pestanya del navegador no desa el quadre de comandament

Primer, els KPI: el gràfic Big Number¶

La franja superior de l'esbós necessita quatre KPI. Un gràfic de barres amb una sola barra seria ridícul. Superset té un gràfic fet exactament per a això.

Un Big Number és un gràfic que mostra un únic valor, molt gran, sense res al voltant. La seva feina és que es llegeixi des de la porta.

És el comptador de munició del HUD: sense eix, sense llegenda, un sol número.

Construeix el primer, la proporció de jocs gratuïts:

Pas	Fes això	Hauries de veure
1	Charts → + Chart. Dataset: `games_clean`. Tipus de gràfic: Big Number (a la categoria KPI)	El constructor de gràfics, buit
2	A Metric, obre la pestanya Custom SQL, escriu `AVG(is_free::int)` i prem Save	La mètrica apareix al quadre
3	Prem Create chart	`0.1159`
4	Obre la pestanya Customize. A Number format escriu `.1%` i prem Enter	`11.6%`
5	Desa el gràfic (Save) com a `UT4 · KPI Free share`	El gràfic és a la llista de Charts

Al pas 3 el número és correcte però il·legible. 0.1159 i 11.6% són el mateix valor. Només el segon és un KPI que una persona pot llegir d'un cop d'ull.

Un format de número és un codi curt que diu a Superset com escriure un número a la pantalla: quants decimals, separadors de milers, un signe de percentatge. Canvia com es veu el número, mai el seu valor.

Ara construeix els altres tres de la mateixa manera. Només canvien la mètrica i el format:

Nom del gràfic	Mètrica (Custom SQL)	Format 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 filtre `owners_tier` Equal to (=)* `Hit`	`,d`	623

Codi de format	Significat	Exemple
`,d`	Nombre enter amb separadors de milers	`26.7k` passa a `26,685`
`.1%`	Percentatge amb un decimal	`0.1159` passa a `11.6%`
`.2f`	Sempre dos decimals	`4.99`

Fes servir exactament aquests noms de gràfic. Més endavant buscaràs aquests gràfics escrivint UT4 en un quadre de cerca, i en una llista de quaranta gràfics anomenats "Untitled", ningú no troba res.

Tres maneres com un Big Number va malament

Mostra 0.1159 en lloc d'11.6%. El format de número encara és Adaptive formatting. Escriu .1% i prem Enter: el número canvia a l'acte.
function avg(boolean) does not exist. PostgreSQL no pot fer la mitjana de cert i fals. Falta la conversió: escriu AVG(is_free::int).
El gràfic Hits mostra 26,685, o 0. Amb 26,685 el filtre mai no es va afegir. Amb 0 has escrit hit: els valors distingeixen majúscules i minúscules, i el nivell es diu Hit.

Per què Custom SQL per a la mediana?

La pestanya Simple d'una mètrica ofereix una llista curta d'agregats, i la mediana no hi és per a totes les bases de dades. La pestanya Custom SQL et deixa escriure qualsevol expressió que entengui la teva base de dades, com ara PERCENTILE_CONT(0.5) WITHIN GROUP (ORDER BY price).

Mode d'edició: la pantalla "personalitza el HUD"¶

El mode d'edició és l'estat d'un quadre de comandament en què pots afegir, moure, redimensionar i esborrar les seves peces. El mode de visualització és el que veu el lector: la pantalla acabada, sense eines de construcció.

	Mode de visualització	Mode d'edició
Al joc	Jugant	La pantalla "personalitza el HUD"
Qui l'usa	El lector	L'autor
Què pots fer	Llegir, clicar pestanyes	Arrossegar, redimensionar, afegir, esborrar
Com hi arribes	Obres el quadre de comandament	Edit dashboard, o crear un quadre de comandament nou
Com en surts		Save (conservar els canvis) o Discard (llençar-los)

Crea el quadre de comandament: Dashboards → + Dashboard. S'obre un quadre de comandament nou i buit, ja en mode d'edició. Fes clic al títol i escriu Steam market.

A la dreta hi ha un panell amb dues pestanyes:

Pestanya	Què hi ha dins
Charts	Tots els gràfics desats. Escriu `UT4` al quadre de cerca per trobar els teus KPI
Layout elements	Les caixes que organitzen la pantalla: capçalera, fila, columna, pestanyes, text, divisor

Arrossega un gràfic del panell a l'àrea buida, el llenç (canvas), i ja és al quadre de comandament.

Compte: el mode d'edició no desa per si sol

"He tancat la pestanya, així que s'ha desat." No. El mode d'edició guarda els canvis al navegador fins que prems Save. Tanca la pestanya, o refresca la pàgina, i tot el que has fet des del darrer desat s'ha perdut. Desa després de cada tros de feina, com un punt de control abans d'un cap final.

La quadrícula de 12 columnes¶

Arrossega UT4 · KPI Games al llenç. Arrossega un segon KPI i deixa'l al costat del primer: una àrea blava mostra on caurà. Dos gràfics un al costat de l'altre són a la mateixa fila.

Ara arrossega la cantonada inferior dreta d'un gràfic. No es mou amb suavitat. Fa salts.

La quadrícula és la regla invisible del llenç. Una fila fa 12 columnes d'ample, i cada gràfic fa un nombre enter de columnes d'ample.

Les amplades d'una fila poden sumar 12 com a màxim. Aquesta és tota l'aritmètica que necessites:

Gràfics a la fila	Amplades	Suma	Resultat
4 KPI	3 + 3 + 3 + 3	12	Una fila plena de caixes iguals
Un gràfic ample i un d'estret	8 + 4	12	Una fila plena, domina el gràfic ample
3 gràfics tal com arriben	4 + 4 + 4	12	Plena: un quart gràfic es rebutja
3 gràfics, un massa ample	6 + 4 + 4	14	No hi cap: el tercer gràfic no pot entrar a la fila

Un gràfic arriba amb 4 columnes d'ample. Així que tres KPI omplen la fila i el quart no hi té lloc. La solució és encongir primer, afegir després: redimensiona cada KPI a 3 columnes, i el quart hi cap.

flowchart TB
    subgraph R1 ["<b>Fila 1</b>: 3 + 3 + 3 + 3 = 12 columnes"]
        direction LR
        A["<b>Games</b><br>3 columnes"] ~~~ B["<b>Free share</b><br>3 columnes"] ~~~ C["<b>Median price</b><br>3 columnes"] ~~~ D["<b>Hits</b><br>3 columnes"]
    end
    subgraph R2 ["<b>Fila 2</b>: 8 + 4 = 12 columnes"]
        direction LR
        E["<b>Gràfic de línies</b>: jocs per any<br>8 columnes"] ~~~ F["<b>Gràfic de barres o de sectors</b>: franja de preu<br>4 columnes"]
    end
    R1 --> R2

Compte: un gràfic per fila és un desplaçament, no un quadre de comandament

El disseny mandrós és cada gràfic a ample complet, un sota l'altre. Aleshores el lector es desplaça per cinc pantalles, que és exactament el que un quadre de comandament existeix per evitar. Deixa els gràfics un al costat de l'altre, sobre l'àrea blava al costat d'un veí.

Els sis elements de disseny¶

Els gràfics no són l'única cosa d'un HUD. Hi ha etiquetes, grups, separadors.

Un element de disseny (layout element) és una caixa que no conté dades. Organitza o explica els gràfics que té al voltant.

Element	Què fa	Al HUD
Header (capçalera)	Un títol de secció, en tres mides	L'etiqueta sobre un grup de mesuradors
Row (fila)	Una franja horitzontal, de 12 columnes d'ample, que té gràfics un al costat de l'altre	Una línia del HUD
Column (columna)	Apila coses verticalment dins d'una fila	Dos mesuradors petits apilats
Tabs (pestanyes)	Diverses pàgines al mateix espai, una de visible cada vegada	Les pestanyes de l'inventari
Text / Markdown	Text lliure: una nota, la font, un enllaç	El consell emergent que explica
Divider (divisor)	Una línia horitzontal fina entre seccions	Un separador

Dos d'aquests mereixen una mirada més de prop.

Tabs. Recorda la franja inferior de l'esbós: "detall per als curiosos". Les pestanyes són la manera de mantenir el detall disponible sense gastar espai de pantalla. L'histograma va en una pestanya, la dispersió en una altra, i comparteixen el mateix rectangle.

Text / Markdown. Markdown és una manera senzilla de donar format al text amb caràcters normals: **negreta** es converteix en negreta. En un element Text / Markdown hi escrius la nota que diu al lector d'on surten les dades i què no poden dir. Fes doble clic a l'element per escriure-hi.

Compte: les pestanyes no són dolentes, i el Markdown no és decoració

Les pestanyes amaguen el detall a propòsit. La regla és simple: el que s'ha de veure d'un cop d'ull no va mai a la segona pestanya. I la nota de baix no és un ornament. Sense la font i els límits de les dades, ningú no es pot refiar dels números de dalt.

Un quadre de comandament guarda referències, no còpies¶

Has arrossegat UT4 · KPI Games al quadre de comandament. Quants gràfics anomenats UT4 · KPI Games existeixen ara?

Encara un.

Una referència és un punter a una cosa que viu en un altre lloc, com un accés directe a l'escriptori. El quadre de comandament no conté el gràfic. L'assenyala.

flowchart LR
    C["<b>Gràfic</b><br>UT4 · KPI Games<br>(existeix una vegada)"]
    D1["<b>Quadre de comandament</b><br>Steam market"] -- "referència" --> C
    D2["<b>Quadre de comandament</b><br>un altre quadre de comandament"] -- "referència" --> C

Tu fas això	Què passa
Edites el gràfic (el títol, la mètrica, el format)	Tots els quadres de comandament que l'usen canvien també
Treus el gràfic del quadre de comandament	El gràfic continua existint a la llista de Charts
Esborres el gràfic mateix	El quadre de comandament es queda amb un forat

Això és una bona notícia i una responsabilitat. Bona notícia: arregla una errada una vegada i queda arreglada a tot arreu. Responsabilitat: el teu canvi arriba a quadres de comandament que potser havies oblidat.

Per canviar un gràfic des de dins d'un quadre de comandament, fes servir els tres punts del gràfic → Edit chart. Allà és on acurces un títol massa llarg per a una caixa estreta.

Prova-ho: Steam market, del paper a la pantalla¶

Quatre tasques curtes. Prem Save al final de cadascuna.

Tasca 1: la fila de KPI.

Pas	Fes això	Hauries de veure
1	Dashboards → + Dashboard. Títol: `Steam market`	Un quadre de comandament buit en mode d'edició
2	De Layout elements, arrossega un Header i escriu `Steam market 2004–2018 · for an indie studio choosing a launch price`	L'audiència i el propòsit, a dalt de tot
3	De Charts, arrossega tres gràfics `UT4 · KPI` a una fila sota la capçalera: Games, Free share, Median price	Tres números un al costat de l'altre, la fila és plena
4	Redimensiona cadascun a 3 columnes, i tan baix com deixi. Després arrossega Hits al final de la fila. Save	26,685 · 11.6% · 4.99 · 623 en una fila, mateixa amplada

Tasca 2: la franja central.

Pas	Fes això	Hauries de veure
1	Edit dashboard. Sota la fila de KPI, afegeix un Header: `How the market grew`	Un títol de secció
2	En una fila, afegeix el teu gràfic de línies de la Unitat 3 (jocs publicats per any) i el teu gràfic de barres o de sectors (franja de preu). Dona 8 columnes al de línies i 4 a l'altre	Una fila plena: 8 + 4 = 12
3	Comprova que els títols i les etiquetes dels eixos encara es llegeixen. Si no, acurça el títol amb els tres punts → Edit chart. Save	Capçalera, 4 KPI i 2 gràfics a la primera pantalla, sense desplaçar-se

Tasca 3: pestanyes per al detall.

Pas	Fes això	Hauries de veure
1	Edit dashboard. Arrossega un element Tabs sota la franja central. Canvia el nom de la primera pestanya a `Prices`. Afegeix-ne una segona amb el + i anomena-la `Quality`	Dues pestanyes
2	A `Prices`, col·loca l'histograma (distribució del preu). A `Quality`, el diagrama de dispersió (preu contra Metascore)	Cada pestanya mostra un gràfic diferent
3	Sota les pestanyes, arrossega un Divider i un Text / Markdown. Fes doble clic al text i substitueix l'exemple per la nota de sota. Save	La nota de la font a baix

**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 copiïs números en una nota sense comprovar-los. Executa això a 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

Tasca 4, si en vols més. Posa el mapa de calor en una tercera pestanya, Calendar. Després fes servir una Column dins d'una fila per apilar dos KPI un damunt de l'altre al costat d'un gràfic. Es llegeix millor que la fila plana? Decideix-ho, i prepara't per dir per què.

El disseny acabat:

Franja	Contingut	Columnes
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
Central	Línies: jocs per any · barres o sectors: franja de preu	8 + 4
Tabs	`Prices`: histograma · `Quality`: dispersió	12 cadascuna
Nota	Font, mida, com es tracten els jocs gratuïts i els Metascore absents	12

Si es trenca

Símptoma	Causa i solució
El gràfic no és a la pestanya Charts	Desmarca Show only my charts, o cerca'l pel nom
Un gràfic deixat anar acaba en una fila nova, o no es deixa anar	La fila és plena. Encongeix primer els gràfics i torna a arrossegar a l'àrea blava al costat del veí
Un gràfic es nega a encongir-se, o es veu trencat quan és estret	Un títol llarg es parteix en línies. Acurça el títol al gràfic
"There are no charts added to this dashboard"	S'ha desat buit. Edit dashboard i continua
Tot ha desaparegut després de refrescar	Mai no es va desar. Reconstrueix primer la fila de KPI i desa després de cada tasca

Compte: més gran no vol dir més important

La posició guanya a la mida. Allò de dalt a l'esquerra es llegeix primer, sigui el que sigui. Un diagrama de dispersió enorme a dalt empeny els KPI fora de la primera pantalla, i el lector que té cinc segons se'n va sense res. Obre el teu quadre de comandament en mode de visualització i pregunta't: què llegeixo primer? És la cosa més important?

Idees clau¶

Un gràfic Big Number mostra un valor, enorme. La seva mètrica va a Custom SQL i el seu format de número (,d, .1%, .2f) el fa llegible.
El mode d'edició és la pantalla "personalitza el HUD". No es desa res fins que prems Save.
El llenç és una quadrícula de 12 columnes. Les amplades d'una fila sumen 12 com a màxim: quatre KPI són 3 + 3 + 3 + 3.
Sis elements de disseny organitzen la pantalla: header, row, column, tabs, text / Markdown, divider.
Un quadre de comandament guarda una referència a cada gràfic. Edita el gràfic una vegada i tots els quadres de comandament canvien.
El disseny és una decisió sobre què veu el lector primer: KPI a dalt, detall en pestanyes, la font en una nota.

Comprovació ràpida¶

1. El teu Big Number mostra 0.1159 i tu vols 11.6%. Què fas?

Canviar la mètrica a AVG(is_free::int) * 100
A la pestanya Customize, escriure .1% a Number format i prémer Enter
Redimensionar el gràfic fins que el número s'arrodoneixi sol
Canviar el nom del gràfic a "Free share (%)"

Un format de número canvia com s'escriu un valor, no el valor. .1% vol dir "percentatge amb un decimal", així que 0.1159 es mostra com 11.6%.

2. Has treballat vint minuts al teu quadre de comandament en mode d'edició i has tancat la pestanya del navegador. Què ha passat amb els canvis?

Es van desar automàticament cada minut
Es guarden en un esborrany que s'obre la propera vegada
Es perden: el mode d'edició només conserva els canvis quan prems Save
Els gràfics que has afegit s'han esborrat de la llista de Charts

El mode d'edició no desa per si sol. Els canvis viuen al navegador fins que prems Save. Els gràfics en si estan a salvo, perquè el quadre de comandament només en tenia referències.

3. Quina amplada té una fila de la quadrícula del quadre de comandament?

4 columnes
8 columnes
10 columnes
12 columnes

La quadrícula fa 12 columnes d'ample. Els gràfics arriben amb 4 columnes d'ample, així que tres omplen una fila.

4. Una fila té tres gràfics de 6, 4 i 4 columnes. Què passa, i quina és una solució correcta?

Res: Superset els encongeix automàticament perquè hi càpiguen
6 + 4 + 4 = 14, més de 12, així que el tercer gràfic no hi cap; encongeix-los a 4 + 4 + 4 o mou-ne un a una altra fila o a una pestanya
El quadre de comandament no es pot desar fins que esborris un gràfic
La fila creix fins a 14 columnes i el lector es desplaça cap als costats

Les amplades d'una fila sumen 12 com a màxim. No cal esborrar res: redimensiona els gràfics, o mou-ne un a una fila nova o a una pestanya.

5. Quin element de disseny deixa que dos gràfics comparteixin el mateix espai, un de visible cada vegada?

Divider
Header
Tabs
Column

Les Tabs són diverses pàgines al mateix rectangle. Són ideals per al detall. Una column apila coses verticalment, però les mostra totes alhora.

6. Un company corregeix una errada al títol d'un gràfic, i el títol també canvia al quadre de comandament d'un altre company. Per què?

Superset copia cada canvi a tots els quadres de comandament amb un nom semblant
Els dos quadres de comandament es van fusionar per accident
Tots dos quadres de comandament guarden una referència al mateix gràfic, així que només hi ha un gràfic per editar
El segon quadre de comandament estava obert en mode d'edició al mateix temps

Un quadre de comandament no conté una còpia del gràfic. Guarda una referència, com un accés directe. Hi ha un gràfic, i tots els quadres de comandament que l'assenyalen mostren el canvi.

7. Estàs dissenyant un quadre de comandament per a un botiguer que el mira uns pocs segons cada matí. Tria les dues bones decisions.

Posar els tres KPI a la primera fila, 4 columnes cadascun
Posar el gràfic més gran i més colorit a dalt, i els KPI a la segona pestanya
Posar la taula de detall en una pestanya, i una nota amb la font a baix
Donar a cada gràfic les 12 columnes senceres perquè es vegi bé cadascun

La posició guanya a la mida: allò de dalt a l'esquerra es llegeix primer, així que els KPI hi van (4 + 4 + 4 = 12). Les pestanyes són per al detall, mai per al que s'ha de veure d'un cop d'ull. Un gràfic a ample complet per fila és un desplaçament, no un quadre de comandament.

El teu quadre de comandament respon una pregunta sobre tot el mercat. Però quina és la mediana del preu només dels èxits? Necessites un segon quadre de comandament? No: a continuació, Filtres i filtres creuats.