Tieni presente che stai visualizzando la documentazione di Looker. Per la documentazione di Looker Studio, visita https://support.google.com/looker-studio.

Crea un'immagine della dashboard dinamica con creatività liquide e HTML

Puoi aggiungere immagini alle dashboard di Looker codificando in forma rigida l'URL di un'immagine in un riquadro di testo Markdown. Tuttavia, le immagini nei riquadri di testo sono statiche e non vengono aggiornate in base ai risultati. E se vuoi che l'immagine di una dashboard cambi in modo dinamico in base al valore di un filtro selezionato dall'utente?

Questa pagina di best practice mostra come ottenere un'immagine dinamica della dashboard utilizzando Liquid e il parametro html.

La soluzione

La seguente soluzione si basa su un set di dati di e-commerce che include un campo denominato users.state, che rappresenta gli stati di un ipotetico set di dati di e-commerce:

dimension: state {
  type: string
  sql: ${TABLE}.state ;;
}

Supponiamo che tu voglia visualizzare l'immagine di una bandiera di uno stato su una dashboard che verrà aggiornata in base allo stato per cui un utente sceglie di filtrare i risultati della dashboard.

Per creare l'immagine della dashboard dinamica, devi completare tre passaggi:

Crea una dimensione immagine in LookML.
Crea un riquadro con immagini dinamiche nella dashboard.
Aggiungi i filtri alla dashboard e gli ultimi ritocchi.

Passaggio 1: crea una dimensione immagine in LookML

Per creare una dimensione immagine in LookML:

Per prima cosa, vai al file del progetto e visualizza la dimensione a cui vuoi aggiungere le immagini. Crea quindi una nuova dimensione basata su quel campo, in particolare per la visualizzazione delle immagini.

Aggiungi un parametro html per definire un'istruzione condizionale {% dynamic if %} con la variabile value per ciascun valore per il quale vuoi visualizzare un'immagine.

Ad esempio, la dimensione state_flag_image riportata di seguito stabilisce una condizione per la visualizzazione delle immagini specificate (con tag html <img> ) quando il valore di state è "California", "New York", "Colorado" o "Illinois". Per tutti gli altri stati puoi visualizzare l'icona "nessuna immagine disponibile":

      dimension: state_flag_image {
          type: string
          sql: ${state} ;;
          html:
              {% dynamic if state._value == "California" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg" height="170" width="255">
              {% elsif state._value == "New York" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_New_York.svg/1200px-Flag_of_New_York.svg.png" height="170" width="255">
              {% elsif state._value == "Colorado" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Flag_of_Colorado.svg/255px-Flag_of_Colorado.svg.png" height="170" width="255">
              {% elsif state._value == "Illinois"%}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Illinois.svg/1200px-Flag_of_Illinois.svg.png" height="170" width="255">
              {% dynamic else %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png" height="170" width="170">
              {% dynamic endif %} ;;
      }

Crea una condizione di valore per ogni valore per cui vuoi visualizzare un'immagine. In alternativa, puoi creare un campo immagine dinamica utilizzando la variabile Liquido value, come descritto nel post della scheda Community Come aggiungere immagini alle visualizzazioni.

Successivamente, puoi creare un riquadro della dashboard per la dimensione dell'immagine.

Passaggio 2: crea un riquadro con immagini dinamiche nella dashboard

Ora che hai creato la dimensione immagine (state_flag_image), puoi creare un'esplorazione che diventerà il riquadro della dashboard con un'immagine dinamica.

Crea la tua esplorazione con i seguenti criteri:

Aggiungi un filtro per la dimensione originale (in questo caso, state). Imposta il filtro su qualsiasi valore (in questo caso, il flag di stato mostrerà l'immagine "Nessuna immagine disponibile", poiché non è selezionato alcun valore di filtro specifico). Questo valore del filtro verrà aggiornato in base a ciò che l'utente seleziona per il filtro della dashboard.
Seleziona la dimensione dell'immagine (in questo caso, state_flag_image) e qualsiasi altra dimensione necessaria alla query che determina l'immagine (ad esempio, se vuoi tenere conto di una data, puoi includere una data e così via).
Modifica il limite di righe impostandolo su una riga.
Modifica il tipo di visualizzazione impostandolo su una visualizzazione del valore singolo e nascondi tutte le altre colonne tranne la dimensione immagine (state_flag_image).

La tua esplorazione mostrerà il primo risultato nella visualizzazione a valore singolo nel riquadro Visualizzazione. L'immagine di copertina cambierà in base al valore del filtro selezionato dall'utente nella dashboard finale:

Salva l'esplorazione in una dashboard come riquadro.

Passaggio 3: aggiungi i filtri e gli ultimi ritocchi alla dashboard

A questo punto, devi aggiungere i filtri alla dashboard. I filtri nella dashboard aggiorneranno il filtro nella sezione Esplora per cambiare l'immagine visualizzata in base alla selezione dell'utente.

Nella modalità di modifica della dashboard, crea il filtro:

Apri la finestra Aggiungi filtro.
Seleziona il campo in base al quale applicare il filtro. Il campo del filtro deve essere la dimensione su cui si basa la dimensione dell'immagine. Nel caso di questo esempio, il campo del filtro sarà state.
Seleziona il riquadro immagine dal Passaggio 2 nella scheda Riquadri da aggiornare.
Seleziona la dimensione originale (state in questo caso) nel menu a discesa state incorporato.
Personalizza il filtro come preferisci. Se selezioni l'opzione di controllo avanzata, assicurati di deselezionare l'opzione Consenti più valori di filtro, che viene attivata automaticamente per l'opzione di controllo Avanzato.

Ora, il riquadro dell'immagine verrà aggiornato con il filtro utente selezionato.

Quando un utente sceglie di filtrare per "California", la dashboard mostra la bandiera dello stato e i dati relativi allo stato della California:

Quando un utente sceglie di filtrare per "Colorado", la dashboard mostrerà la bandiera dello stato e i dati relativi allo stato del Colorado: