Canvas: Datentabellen und Debug-Elemente

Von
Ethan Groves

Canvas enthält momentan eine Auswahl von etwa 20 integrierten Elementen, die zu Workpads hinzugefügt werden können (im Blogeintrag Erste Schritte finden Sie eine vollständige Liste). In diesem Blogeintrag konzentrieren wir uns auf zwei dieser Elemente: Datentabellen und Debug.

image16.png

Datentabelle

Diese extrem flexible und dynamische Tabelle ist sofort einsetzbar und unterstützt Bildlauf, Paginierung und benutzerdefiniertes CSS.

image2.png

Debug

Mit diesem Element können Sie auf die JSON-Daten hinter den Kulissen zugreifen und aufgetretene Probleme noch genauer analysieren.

In diesem Fall werden wir Canvas verwenden, um eine wohlbekannte Datentabelle zu erstellen eine Flugtabelle für einen Flughafen.
So sieht das fertige Produkt aus, das wir in Canvas erstellen werden:

Anforderungen und Wiederholung

Wir verwenden einige der Konzepte, die wir in unserem Blogeintrag „Erste Schritte“ vorgestellt haben, und setzen Folgendes voraus:

  1. Elasticsearch und Kibana (Version 6.4+) sind installiert und einsatzbereit
  2. Canvas ist installiert (Canvas ist ab Version 6.5 in Kibana enthalten)

Installieren der Beispieldaten

Für dieses Tutorial verwenden wir einen von Elastic bereitgestellten Beispieldatensatz, genauer gesagt die Beispielflugdaten.

Hinweis: Dieser Datensatz ist nur in den Kibana-Versions 6.4 oder höher verfügbar.

Navigieren Sie zu Ihrer Kibana-Instanz:

  1. Klicken Sie auf die Kibana-Startseite in der Seitenleiste.
  2. Klicken Sie im Abschnitt Add Data to Kibana (Daten zu Kibana hinzufügen) unten auf den Link Load a data set and a Kibana dashboard (Datensatz und Kibana-Dashboard laden).
  3. Klicken Sie in der Kachel Sample flight data (Beispielflugdaten) auf Add (Hinzufügen).

Kurzreferenz

Die folgende Tabelle enthält Informationen zu dem Beispieldatensatz, den Sie soeben installiert haben. Die relevanten Felder für diese Aktivität sind fett und unterstrichen formatiert, aber Sie können sich die restlichen Felder nach Belieben ansehen.

kibana_sample_data_flights
AvgTicketPrice
Cancelled
Carrier
DestCityName
DestCountry
FlightDelayType
FlightTimeMin
OriginCityName
OriginCountry
Dest
DestAirportID
DestLocation
DestRegion
DestWeather
DistanceKilometers
DistanceMiles
FlightDelay
FlightDelayMin
FlightNum
FlightTimeHour
Origin
OriginAirportID
OriginLocation
OriginRegion
OriginWeather
_id
_index
_score
_type
dayOfWeek
hour_of_day
timestamp

Entwickeln einer Flughafen-Anzeigetafel

Erstellen

Im ersten Schritt werden wir ein Workpad erstellen und eine Datentabelle mit unseren Daten hinzufügen.

Erstellen eines Canvas-Workpads

  1. Navigieren Sie zu Ihrer Kibana-Instanz.
  2. Klicken Sie auf die Registerkarte Canvas in der Seitenleiste.
  3. Klicken Sie auf Create workpad (Workpad erstellen).
  4. Geben Sie dem neuen Workpad einen eindeutigen Namen.

Erstellen Sie ein „Data Table“-Element.

  1. Klicken Sie auf die Schaltfläche Add element (Element hinzufügen).
  2. Wählen Sie das Element Data Table (Datentabelle) aus.
    1. TIPP: Die Elemente werden bei der Erstellung mit Beispieldaten ausgefüllt, damit Sie sofort damit experimentieren können!
  3. Wählen Sie im Bereich rechts die Registerkarte Data (Daten) aus.
  4. Klicken Sie auf Change your data source (Datenquelle ändern).
  5. Wählen Sie Elasticsearch SQL aus.
  6. Geben Sie in den SQL-Abfrageeditor Folgendes ein:
SELECT
  DestCityName AS Destination,
  timestamp AS Time,
  Carrier AS Airline,
  FlightNum AS Flight,
  FlightDelayType AS Status,
  Cancelled
FROM
  kibana_sample_data_flights

Hinweis: Möglicherweise ist Ihnen aufgefallen, dass unser Beispieldatensatz kein Feld für die Gatenummer am Flughafen enthält. Wir werden später in diesem Blog einen Zufallsgenerator verwenden, um diese Spalte zu erstellen.

  1. Klicken Sie auf Save (Speichern).
  2. Ihre Datentabelle sollte jetzt in etwa wie folgt aussehen:

image12.png

CODE

Wir haben jetzt eine Datentabelle mit unseren Daten, allerdings fehlt uns die passende Formatierung. Wir werden uns als Nächstes den Code hinter den Kulissen ansehen und einige Änderungen vornehmen.

Anpassen des Formats in der Uhrzeitspalte

  1. Wählen Sie Ihre Datentabelle aus.
  2. Klicken Sie in der unteren rechten Bildschirmecke auf den Schalter „Expression editor“ (Ausdrucks-Editor).
  3. Im Ausdrucks-Editor sollte der folgende Code angezeigt werden:
filters

| essql
  query="SELECT
  DestCityName AS Destination,
  timestamp AS Time,
  Carrier AS Airline,
  FlightNum AS Flight,
  FlightDelayType AS Status,
  Cancelled
FROM
  kibana_sample_data_flights"

| table

| render

Erklärung - Dieser Code enthält vier wichtige Abschnitte:

    1. Filter: Wenn wir ein Time Filter-Element zu diesem Workpad hinzugefügt hätten, würden die eingehenden Daten für dieses Datentabellenelement zunächst den Zeitfilter durchlaufen, und nur die verbleibenden Daten würden angezeigt. Wenn wir diese Zeile löschen, ist unser Datentabellenelement nicht mehr von den zum Workpad hinzugefügten Filterelementen abhängig, was für bestimmte Situationen hilfreich sein kann.
    2. Datasource (Datenquelle): In diesem Fall verwenden wir die Datenquelle Elastic SQL, und wir können unsere SQL-Abfrage hier anzeigen und bearbeiten.
    3. Element: Diese Zeile legt fest, welche Art von Element im Workpad angezeigt wird. Falls Sie sich abenteuerlustig fühlen, ändern Sie table zu shape und klicken Sie in der unteren rechten Ecke auf Run (Ausführen), um zu sehen, was geschieht. Machen Sie die Änderung anschließend unbedingt wieder rückgängig!
    4. Render (Rendern): Hier können Sie das Erscheinungsbild Ihrer Elemente anpassen. Im weiteren Verlauf dieses Blogeintrags werden wir eigenen CSS-Code zur Render-Funktion hinzufügen, um unsere Daten stylischer darzustellen.
  1. Wir müssen die Daten bearbeiten, bevor wir wie in der Elementfunktion Tabelle anzeigen können. Daher fügen wir zwischen der Datenquellenfunktion essql und der Elementfunktion table eine neue Funktion mit dem Namen mapColumn hinzu. Mit der Funktion mapColumn können wir die Werte in einer bestimmten Spalte bearbeiten. In diesem Fall interessieren wir uns für die Spalte Time (Uhrzeit). Wir fügen also den folgenden Code in Zeile 12 hinzu:
...
FROM kibana_sample_data_flights"
| mapColumn Time fn={}
| table
...
  1. Canvas enthält zahlreiche integrierte Funktionen, die wir nutzen können, inklusive der Funktion formatdate. Wir möchten die Uhrzeit gerne im folgenden Format anzeigen: hh:mm A. Wir fügen also den folgenden Code in Zeile 12 hinzu:
...
FROM kibana_sample_data_flights"
| mapColumn Time fn={ formatdate "hh:mm A" }
| table
...
  1. Klicken Sie unten rechts im Ausdrucks-Editor auf Run (Ausführen).
  2. Ups! Ein Fehler ist aufgetreten! Zeit zum Debuggen ...

Eine kurze Unterbrechung zum Thema Debuggen (Überspringen Sie diesen Schritt nicht!)

Wir kehren gleich wieder zu unserem Code zurück, aber zunächst möchte ich Ihnen zeigen, wie Sie in Canvas debuggen können.

Identifizieren des Fehlers

  1. Klicken Sie auf das Warnungssymbol im Tabellenelement.
  2. Daraufhin sollte eine Fehlerursache ähnlich der folgenden Abbildung angezeigt werden:

image17.png

  1. Anscheinend versucht unsere Funktion mapColumn, unsere Zeitstempeldaten zu einer Zahl umzuwandeln. Dies liegt daran, dass unsere formatdate-Funktion die Zeitstempel in einem numerischen Format erwartet (UTC-Millisekunden).
  2. In welchem Format liegen unsere Zeitstempel vor? Lassen Sie uns ein debug-Element hinzufügen, um es herauszufinden.

Hinzufügen eines Debug-Elements

  1. Klicken Sie auf Add element (Element hinzufügen).
  2. Wählen Sie das Debug-Element aus.
  3. Wählen Sie im Bereich rechts die Registerkarte Data (Daten) aus.
  4. Klicken Sie auf Change your data source (Datenquelle ändern).
  5. Wählen Sie Elasticsearch SQL aus.
  6. Geben Sie in den SQL-Abfrageeditor Folgendes ein:
SELECT
  DestCityName AS Destination,
  timestamp AS Time,
  Carrier AS Airline,
  FlightNum AS Flight,
  FlightDelayType AS Status,
  Cancelled
FROM
  kibana_sample_data_flights
  1. Klicken Sie auf „Save“ (Speichern).
  2. Im Debug-Element sehen wir, dass das Feld Time den Typ date (Datum) hat, und der erste Eintrag hat das folgende Format: 2018-11-05T00:00:00.000Z
    image9.png
  3. Glücklicherweise enthält Canvas eine integrierte Funktion, der wir Daten vom Typ date übergeben können, um sie in numerische UTC-Millisekunden zu konvertieren.
  4. Wählen Sie die Datentabelle erneut aus und fügen Sie die Funktion date wie folgt zum Code im Ausdrucks-Editor hinzu:
| mapColumn Time fn={ date | formatdate "hh:mm A" }
  1. Klicken Sie auf Run (Ausführen).
  2. Die Zeitstempel in Ihrer Datentabelle sollten jetzt im korrekten Format angezeigt werden.

image6.png

TIPP: Sie müssen das Debug-Element nicht jedes Mal neu hinzufügen. Im Ausdrucks-Editor können Sie den Code | render as="debug" zu beliebigen Elementen hinzufügen, um den JSON-Code für das jeweilige Element anzuzeigen. Manchmal ist es jedoch hilfreich, bei der Arbeit ein separates Debug-Element als Referenz zu haben.

Zurück zu unserem planmäßigen Programm!

Fortsetzung zu unserem Code ...

Als Nächstes werden wir die Spalte Gate hinzufügen. Da unsere Daten keine Informationen zum Gate enthalten, werden wir eine der leistungsstarken integrierten Canvas-Funktionen verwenden, um einen Zufallswert zu generieren.

Hinzufügen von Gate-Daten

  1. Der einfachste Weg, eine weitere Spalte hinzuzufügen, ist ein zusätzlicher Eintrag in unserer SQL-Abfrage. Wir duplizieren also die Daten FlightNum (Flugnummer) und geben der neuen Spalte den Namen Gate.
  2. Klicken Sie im Editor-Bereich auf der rechten Seite auf die Registerkarte Data und fügen Sie im SQL-Editor die folgende Zeile hinzu:
SELECT
  DestCityName AS Destination,
  timestamp AS Time,
  Carrier AS Airline,
  FlightNum AS Flight,
  FlightNum AS Gate,
  FlightDelayType AS Status,
  Cancelled
FROM
  kibana_sample_data_flights
  1. Klicken Sie auf Save (Speichern).
  2. Im Ausdrucks-Editor fügen wir eine weitere mapColumn-Funktion unter der ersten Funktion hinzu. In diesem Fall werden wir die Spalte Gate bearbeiten:
...
| mapColumn Time fn={date | formatedate "hh:mm A"}
| mapColumn Gate fn={}
| table
...
  1. Um die Gatenummern zu erhalten, generieren wir Zufallszahlen zwischen 1 und 100. Glücklicherweise enthält Canvas nützliche integrierte Mathematikfunktionen, die wir nutzen können. Wir werden die Zufallszahlenfunktion random verwenden. Allerdings generiert diese Funktion Zufallszahlen mit vielen Dezimalstellen, was für unseren Anwendungsfall uninteressant ist. Daher fügen wir eine zweite Funktion hinzu, um die generierten Zufallszahlen mit der Funktion round zu runden. Unser Code sieht also wie folgt aus:
| mapColumn Gate fn={ math "round(random(0,100),0)" }
  1. Klicken Sie auf Run (Ausführen).
  2. Daraufhin sollte die neue Spalte Gate mit generierten Zufallszahlen angezeigt werden:

image5.png

Kombinieren von Zahlen

Die Spalten Cancelled (Storniert) und Status sollten bereits kombiniert sein, sodass wir immer dann den Status Cancelled anzeigen, wenn der Wert gleich true (wahr) ist.

  1. Vergewissern Sie sich, dass das Datentabellenelement ausgewählt und der Ausdrucks-Editor geöffnet ist.
  2. Wir benötigen eine weitere mapColumn-Funktion, dieses Mal jedoch für die Spalte Status.
...
| mapColumn Gate fn={math "round(random(1,100),0)"}
| mapColumn Status fn={}
| table
...
  1. Als Nächste überprüfen wir, ab das Feld (bzw. cell) in der Spalte Cancelled den Wert true hat.
| mapColumn Status fn={if {getCell "Cancelled" | eq true}}
  1. Anschließend legen wir den Wert der Spalte Status auf die Zeichenfolge Cancelled fest, wenn die Bedingung erfüllt ist.
| mapColumn Status fn={if {getCell "Cancelled" | eq true} then="Cancelled"}
  1. Wenn wir jetzt auf Run klicken, sehen wir, dass wir den Wert Cancelled erfolgreich zur Spalte Status zugeordnet haben. Wir erhalten jedoch den Wert null in der Spalte Status für alle anderen Werte. image4.png
  1. Zuletzt werden wir Canvas anweisen, den ursprünglichen Wert in der Spalte Status beizubehalten, falls der Wert nicht gleich Cancelled ist.
| mapColumn Status fn={if {getCell "Cancelled" | eq true} then="Cancelled" else={getCell "Status"}}
  1. Klicken Sie auf Run (Ausführen).
  2. Die Spalten Status und Cancelled sollten jetzt korrekt miteinander kombiniert werden.

image8.png

Entfernen einer Spalte

Die Spalte Status enthält jetzt alle Informationen, die wir brauchen, und wir möchten die Spalte Cancelled nicht mehr anzeigen (wir benötigen sie jedoch weiterhin hinter den Kulissen). Lassen Sie uns also die Spalte Cancelled entfernen.

  1. Vergewissern Sie sich, dass das Datentabellenelement ausgewählt und der Ausdrucks-Editor geöffnet ist.
  2. Canvas enthält die Funktion columns (Spalten), mit der wir Spalten einbinden oder ausschließen können. In diesem Fall möchten wir die Spalte Cancelled ausschließen. Fügen Sie also die folgende Codezeile hinzu:
...
| mapColumn Status fn={if {getCell "Cancelled" | eq true} then="Cancelled" else={getCell "Status"}}
| column exclude="Cancelled"
| table
...
  1. Klicken Sie auf Run (Ausführen).
  2. Daraufhin sollte die Spalte Cancelled nicht mehr in Ihrem Datentabellenelement angezeigt werden, obwohl wir die Daten aus dieser Spalte weiterhin im Hintergrund verwenden.

image10.png

Anpassen

Nachdem wir alle gewünschten Daten haben, können wir das Erscheinungsbild unseres Workpads anpassen.

Festlegen der Hintergrundfarbe

  1. Vergewissern Sie sich, dass Sie keine Elemente im Workpad ausgewählt haben.
  2. Klicken Sie im Bearbeitungsbereich am rechten Seitenrand auf die Farbauswahl Page Background (Seitenhintergrund) und geben Sie den Wert #0276fd ein.

image15.png

Entfernen der Paginierung

  1. Wählen Sie das Datentabellenelement aus.
  2. Wählen Sie im Bearbeitungsbereich am rechten Seitenrand die Registerkarte Display (Anzeige) aus.
  3. Klicken Sie auf die Schaltfläche + im Bereich Table Style (Tabellenstil).
  4. Wählen Sie im Dropdown-Menü die Option Pagination (Paginierung) aus.
  5. Klicken Sie auf den Schalter, um die Option zu deaktivieren.

image18.png

Festlegen der Anzahl der Tabellenzeilen

  1. Klicken Sie erneut auf die Schaltfläche + im Bereich „Table Style“.
  2. Wählen Sie im Dropdown-Menü die Option Rows per page (Zeilen pro Seite) aus.
  3. Erhöhen Sie die Anzahl der Zeilen pro Seite auf 25.
  4. Wir möchten 18 Zeilen anzeigen. Öffnen Sie also den Ausdrucks-Editor für das Datentabellenelement und ändern Sie den Wert perPage zu 18.
| table paginate=false perPage=18
  1. Klicken Sie auf Run (Ausführen).
  2. Erweitern Sie das Datentabellenelement, sodass alle 18 Zeilen angezeigt werden.

Formatieren des Tabellentexts

  1. Klicken Sie erneut auf die Schaltfläche + im Bereich Table Style.
  2. Wählen Sie die Option Text Settings (Texteinstellungen) aus.
  3. Formatieren Sie den Text fett und legen Sie Weiß als Textfarbe fest.

Formatieren der Tabellenüberschrift

  1. Wir möchten die Tabellenüberschrift formatieren, um sie von den restlichen Zeilen abzuheben. Allerdings haben wir die Möglichkeiten im Bereich Table Style bereits ausgeschöpft und müssen unser eigenes CSS hinzufügen.
  2. Klicken Sie dazu auf die Schaltfläche + im Bereich Element Style (Elementstil).
  3. Wählen Sie die Option CSS im Dropdown-Menü aus.
  4. Löschen Sie den Inhalt des CSS-Editors und fügen Sie den folgenden Code ein:
canvasDataTable__th { text-decoration: underline; background-color: #d0e9ff; color: black;}
  1. Klicken Sie auf Apply stylesheet (Stylesheet anwenden).
  2. Ihre Tabellenüberschrift sollte jetzt mit hellblauer Hintergrundfarbe und schwarz unterstrichenem Text dargestellt werden.

Formatieren der Tabellenzeilen

  1. Wir möchten wechselnde Farben für unsere Tabellenzeilen festlegen, und müssen dafür erneut unser eigenes CSS eingeben.
  2. Fügen Sie den folgenden Code im CSS-Editor ein:
.canvasDataTable__tbody>:nth-child(even) {
background-color: #2a2a50;
}
.canvasDataTable__tbody>:nth-child(odd) {
background-color: #5f67af;
}
  1. Klicken Sie auf Apply stylesheet (Stylesheet anwenden).
  2. Passen Sie die Breite des Datentabellenelements an die Breite des Workpads an.
  3. Ihre Zeilen sollten jetzt wie in der folgenden Abbildung mit abwechselnden Farben angezeigt werden.

Hinzufügen eines Titels

  1. Klicken Sie auf Add element (Element hinzufügen).
  2. Wählen Sie das Element Markdown aus.
  3. Löschen Sie sämtlichen Text aus dem Editor Markdown content (Markdown-Inhalt) am rechten Bildschirmrand.
  4. Geben Sie Departures (Abflüge) in den Editor Markdown content ein.
  5. Klicken Sie auf Apply (Übernehmen).
  6. Ändern Sie die Größe des Markdown-Elements und platzieren Sie es in der Bildschirmmitte.
  7. Klicken Sie auf die Schaltfläche + im Abschnitt Markdown im Editor-Bereich auf der rechten Seite.
  8. Wählen Sie die Option Text Settings (Texteinstellungen) im Dropdown-Menü aus.
  9. Legen Sie die Texteinstellungen wie folgt fest:
    1. Size (Größe): 48
    2. Font (Schriftart): Bold (Fett)
    3. Alignment (Ausrichtung): Centered (Zentriert)
    4. Color (Farbe): White (Weiß)
  10. Ihr Workpad sollte den tatsächlichen Anzeigetafeln in Flughäfen jetzt schon sehr ähnlich sehen!

Vollständiger Code

Hier sehen Sie den vollständigen Code für die Datentabelle aus dem Ausdrucks-Editor: 

filters
| essql
  query="SELECT
  DestCityName AS Destination,
  timestamp AS Time,
  Carrier AS Airline,
  FlightNum AS Flight,
  FlightNum AS Gate,
  FlightDelayType AS Status,
  Cancelled
FROM
  kibana_sample_data_flights
"
| mapColumn "Time" fn={date | formatdate "hh:mm A"}
| mapColumn "Gate" fn={math "round(random(1,100),0)"}
| mapColumn "Status" fn={if {getCell "Cancelled" | eq true} then="Cancelled" else={getCell "Status"}}
| columns exclude="Cancelled"
| table paginate=false perPage=18
 font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#FFFFFF" weight="bold" underline=false italic=false}
| render
 css=".canvasDataTable__th { text-decoration: underline; background-color: #d0e9ff; color: black;}
.canvasDataTable__tbody>:nth-child(even) {
background-color: #2a2a50;
}
.canvasDataTable__tbody>:nth-child(odd) {
background-color: #5f67af;
}"

Links zu anderen nützlichen Ressourcen

Das war’s auch schon! Sie haben soeben mehrere Beispiele für Datentabellen- und Debug-Elemente in Canvas abgeschlossen. Versuchen Sie, weitere Elemente zu Ihrem Workpad hinzuzufügen, und experimentieren Sie mit den vielfältigen Funktionen von Canvas!

Lesen Sie außerdem die restlichen Canvas-Blogeinträge:

Banner-Bild: Miami-Flughafentafel von MPD01605 ist lizenziert unter CC BY 2.0