Dynamisches Dashboard-Bild mit Liquid und HTML erstellen

Sie können Looker-Dashboards Bilder hinzufügen, indem Sie eine Bild-URL in eine Markdown-Textkachel hartcodieren. Bilder in Textkacheln sind jedoch statisch und werden nicht anhand der Ergebnisse aktualisiert. Was ist, wenn sich ein Dashboard-Bild dynamisch anhand eines vom Nutzer ausgewählten Filterwerts ändern soll?

Auf dieser Seite mit Best Practices wird gezeigt, wie Sie mit Liquid und dem Parameter html ein dynamisches Dashboard-Bild erstellen.

Die Lösung

Die folgende Lösung basiert auf einem E-Commerce-Dataset mit dem Feld users.state, das die Bundesländer in einem hypothetischen E-Commerce-Dataset darstellt: 

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

Angenommen, Sie möchten das Bild der Flagge eines Bundeslandes in einem Dashboard anzeigen lassen, das sich anhand des Bundeslandes aktualisiert, nach dem ein Nutzer die Dashboard-Ergebnisse filtert.

Um das dynamische Dashboard-Bild zu erstellen, sind drei Schritte erforderlich:

  1. Erstellen Sie eine Bilddimension in LookML.
  2. Dashboardkachel mit dynamischem Bild erstellen
  3. Fügen Sie Dashboard-Filter hinzu und nehmen Sie letzte Änderungen vor.

Schritt 1: Bilddimension in LookML erstellen

So erstellen Sie in LookML eine Bilddimension:

  1. Rufen Sie zuerst das Projekt und die Ansichtsdatei mit der Dimension auf, der Sie Bilder hinzufügen möchten. Erstellen Sie dann eine neue Dimension, die auf diesem Feld basiert und speziell für die Anzeige der Bilder verwendet werden soll.

  2. Fügen Sie für jeden Wert, für den ein Bild angezeigt werden soll, einen html-Parameter hinzu, um eine Liquid-{% if %}-Bedingungsanweisung mit der Variablen value zu definieren.

    Mit der folgenden state_flag_image-Dimension wird beispielsweise eine Bedingung für die Anzeige der angegebenen Bilder (mit html <img> -Tags) festgelegt, wenn der Wert von state "California", "New York", "Colorado" oder "Illinois" ist. Für alle anderen Status können Sie das Symbol „Kein Bild verfügbar“ verwenden: 

          dimension: state_flag_image {
          type: string
          sql: ${state} ;;
          html:
              {% 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">
              {% 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">
              {% endif %} ;;
      }
  3. Erstellen Sie für jeden Wert, für den ein Bild angezeigt werden soll, eine Wertebedingung. Alternativ können Sie ein dynamisches Bildfeld mit der Liquid-Variablen value erstellen, wie im Communitybeitrag Visualisierungen Bilder hinzufügen beschrieben.

Als Nächstes können Sie eine Dashboardkachel für die Bilddimension erstellen.

Schritt 2: Dashboardkachel mit dynamischem Bild erstellen

Nachdem die Bilddimension (state_flag_image) erstellt wurde, können Sie ein Explore erstellen, das als Dashboardkachel für dynamische Bilder verwendet wird.

Erstellen Sie die explorative Datenanalyse mit den folgenden Kriterien:

  • Fügen Sie einen Filter für die ursprüngliche Dimension hinzu (in diesem Fall state). Legen Sie den Filter auf einen beliebigen Wert fest. In diesem Fall wird das Bild „Kein Bild verfügbar“ angezeigt, da kein bestimmter Filterwert ausgewählt ist. Dieser Filterwert wird entsprechend der Auswahl des Nutzers für den Dashboard-Filter aktualisiert. 
  • Wählen Sie die Bilddimension (in diesem Fall state_flag_image) und alle anderen Dimensionen aus, die für die Abfrage erforderlich sind, mit der das Bild bestimmt wird. Wenn Sie beispielsweise ein Datum berücksichtigen möchten, können Sie „Datum“ hinzufügen.
  • Ändern Sie das Zeilenlimit in eine Zeile.
  • Ändern Sie den Visualisierungstyp in eine Visualisierung mit einem einzelnen Wert und blenden Sie alle anderen Spalten außer der Bilddimension (state_flag_image) aus. 

Im Explore wird das erste Bildergebnis in der Visualisierung mit Einzelwert angezeigt, die im Bereich Visualisierung gerendert wird. Das angezeigte Bild ändert sich je nach dem Filterwert, den der Nutzer im endgültigen Dashboard auswählt:

Speichern Sie das Explore als Kachel in einem Dashboard.

Schritt 3: Dashboard-Filter hinzufügen und letzte Änderungen vornehmen

Jetzt müssen Sie dem Dashboard Dashboard-Filter hinzufügen. Die Filter im Dashboard aktualisieren den Filter in der explorativen Datenanalyse, um das angezeigte Bild basierend auf der Auswahl des Nutzers zu ändern.

Erstellen Sie im Bearbeitungsmodus des Dashboards den Filter:

  • Öffnen Sie das Fenster Filter hinzufügen.
  • Wählen Sie das Feld aus, nach dem gefiltert werden soll. Das Filterfeld sollte die Dimension sein, auf der die Bilddimension basiert. In diesem Beispiel ist das Feld für den Filter status.
  • Wählen Sie auf dem Tab Zu aktualisierende Kacheln die Bildkachel aus Schritt 2 aus.
  • Wählen Sie im Drop-down-Menü Feld zum Filtern die ursprüngliche Dimension (in diesem Fall Status) aus.
    • Wählen Sie nach Bedarf weitere Kacheln aus, die Sie aktualisieren möchten.
  • Passen Sie den Filter nach Bedarf an. Wenn Sie die Option „Erweitert“ auswählen, deaktivieren Sie die Option Mehrere Filterwerte zulassen, die für die Option Erweitert automatisch aktiviert ist.

Die Bildkachel wird jetzt mit der Auswahl des Nutzerfilters aktualisiert.

Wenn ein Nutzer nach „Kalifornien“ filtert, werden im Dashboard die Flagge des Bundesstaats und die Daten für Kalifornien angezeigt:

Wenn ein Nutzer nach „Colorado“ filtert, werden im Dashboard die Flagge des Bundesstaats und die Daten für Colorado angezeigt: