Gestaltung von Dashboards mit Envision - Software zur Bestandsoptimierung

Gestaltung von Dashboards mit Envision












Startseite » Ressourcen » Hier

Envisions Dashboards bestehen aus kleineren Einheiten, den sogenannten tiles oder Elementen. Die Größe und Farbe dieser Elemente können beliebig für Ihre Dashboard-Seite gestaltet werden. Bei Envision liegt die hohe Produktivität der Dashboards im Mittelpunkt, so dass alle für Ihr Unternehmen relevante Zahlen auf einer einzigen Seite dargestellt werden. Sogar hochkomplexe Dashboards werden in weniger als einer halben Sekunde angezeigt. Auf dieser Seite erklären wir, wie Sie mit Envision von Null auf ein Dashboard erstellen können.

Ihr erstes Dashboard

Wir werden unser erstes Dashboard mit dem Beispiel-Dataset erstellen. Der untere Screenshot zeigt das Dashboard, das Sie in Ihrem Lokad-Konto erhalten sollten.

Image

Das obere Dashboard wir mit dem unten erklärten Skript erstellt. Wahrscheinlich erscheint Ihnen dieses Skript auf den ersten Blick etwas komplex. Doch wir werden es auf dieser Seite Zeile für Zeile aufschlüsseln.
read "/sample1/Lokad_Items.tsv"
read "/sample/Lokad_Orders.tsv" as Orders
read "/sample/Lokad_PurchaseOrders.tsv" as PO

show label "Hello World: my first dashboard" a1f1 tomato

show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price{$}" c2d2 with min(SellPrice)
show table "Max selling price{$}" e2f2 with max(SellPrice)

Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(PO.NetAmount)
show linechart "Weekly volumes{$}" a3f5 tomato with
  Week.oamount as "Sold"
Week.pamount as "Purchased"

show piechart "Sales by brand" a6c8 tomato with
  sum(Orders.NetAmount) group by Brand

show treemap "Stock value by supplier{$}" d6f8 tomato with 
Name
StockOnHand * BuyPrice
Supplier

show table "Top Sellers" a9f12 tomato with
  Id as "Product ID",
  Supplier,
  StockOnHand,
  sum(Orders.NetAmount) as "Sold{$}"
  order by sum(Orders.NetAmount) desc
Wir empfehlen Ihnen nun, sich mit Ihrem Lokad-Konto anzumelden, auf Create Envision Script zu klicken, das obere Skript zu kopieren und einzufügen und anschließend auf Start Run zu klicken. Wenn die Ausführung beendet ist, klicken Sie auf den grünen Link, der bei Recent runs, unterhalb des Buttons Start Run neu angezeigt wird. Sie sollten nun ein mit dem oberen identisches Dashboard vor Ihnen sehen.

Das Dashboard passt auf eine einzelne Seite, doch jedes Element kann auch vergrößert werden, wenn Sie darauf klicken. Klicken Sie auf das große Liniendiagramm, um zu sehen, wie sich dieses Diagramm im Vollbild vergrößert. Wenn Sie erneut auf den schwarzen Bereich um das Element klicken, verkleinert sich der Bereich und nimmt die ursprüngliche Größe ein.

Überschrift, Position und Farbe

Das Element label ist das einfachste Element, das in Envision verfügbar ist. Dieses Element bietet einen perfekten Ausgangspunkt, um die gemeinsamen Eigenschaften aller Elemente, d.h. Überschrift, Position und Grundfarbe, zu verstehen. Das Element label zeigt einfach nur einen bestimmten Text im Element und die Schriftgröße muss für das Element angepasst werden.
show label "Hello World: my first dashboard" a1f1 tomato
All diese Elemente werden über die Anweisung show angezeigt. Diesem Schlüsselwort folgen 4 Argumente. Das erste Argument bezieht sich auf den Typ des Elements. Envision unterstützt viele Typen für Elemente, von denen label lediglich eines darstellt. Im nächsten Abschnitt werden wir die verschiedene Typen für Elemente beschreiben, die auch in diesem Dashboard vorkommen.

Nach dem Typ des Elements kommt die Überschrift des Elements, die mit einem String definiert wird, weshalb die Texttrennzeichen (") auftauchen. Je nach Typ des Elements kann die Anzeige variieren, doch die Überschrift wird meist am obersten Rand des Elements angezeigt. Nach der Überschrift kommt dann die Position des Elements, die im oberen Beispiel als a1f1 geschrieben wurde. Envision nimmt die Form einer Excel-ähnlichen Tabelle an, mit Buchstaben für die Spalten und Zahlen für die Zeilen. Daher sollte a1f1 als Zelle von der oberen linken Ecke aus A1 zur tiefsten rechten Ecke F1 interpretiert werden. Envision unterscheidet nicht zwischen Groß- und Kleinschreibung, so entspricht A1F1 strikt a1f1.

Als letztes erscheint die Farbe, tomato im oberen Beispiel. Das color-Argument ist optional. Wird es nicht angegeben, wird standardmäßig black benutzt. Alle genannten Webfarben können in Envision genutzt werden. Außer den genannten Farben, lässt Envision auch 6-stellige Hexadezimale Farbcodes zu, wobei zu beachten ist, dass die Raute (#) weggelassen werden muss. So sollte beispielsweise 0099CC statt #0099CC genutzt werden. Doch in der Praxis, sind Farben zu mühsam, um direkt im Skript-Editor bearbeitet zu werden.

Der Tile-Editor

Obwohl die Bearbeitung der Position und Farben der Elemente aus dem Skript-Editor möglich ist, ist dies nicht so praktisch, weil der Skript-Editor nicht visuell ist. Daher verfügt Envision über einen zweiten Editor, den Tile-Editor (Elementen-Editor). Der Tile-Editor bietet die Möglichkeit, die Überschrift, Position und Farbe jedes Elements zu bearbeiten und ist mit zusätzlichen Features ausgestattet, die eine komplette Umgestaltung des Dashboard, falls nötig, beschleunigt.

Image

Gehen Sie in Ihrem Lokad-Konto zurück zum Dashboard, den Sie zuvor erstellt haben und klicken Sie auf Edit Tiles. Eine dunkle Schattierung taucht nun über jedes Element auf und zeigt somit die Koordinaten für die Positionierung jedes Elements an. Die Koordinaten werden entsprechend der Konventionen für Excel-Tabellen ausgedrückt, wie oben beschrieben. Wenn Sie nun auf ein beliebiges Element klicken, beispielsweise auf das oberste Element label, taucht ein Dialogfenster auf, über das Sie die Eigenschaften des Elements bearbeiten können.

Sie erkennen auch einen grünen Plus-Button (+) am linken Rand der Seite. Über diesen Button können Sie eine leere Tabellenzeile genau über den Button einfügen. Klicken Sie auf eines der (+) Buttons. Sie werden sehen, wie alle Elemente nach unten verschoben werden. Eine leere Zeile einzufügen ist besonders praktisch, wenn man einen ganzen Anschnitt des Dashboards nach oben (bzw. nach unten) verschieben möchte.

Image

Wenn Sie auf den (+) Button klicken, taucht am rechten Rand ein roter Minus-Button (-) auf. Diese roten Buttons stellen das Gegenstück zu den grünen Buttons dar und bieten die Möglichkeit, leere Zeilen zu löschen. Doch die Zeile muss leer sein, damit der rote Button auftaucht, somit wird verhindert, dass eine Zeile, die Elemente enthält, gelöscht wird. Im Allgemeinen empfehlen wir, bei der Programmierung des Skripts der Positionierung und den Farben der Elemente nicht allzu viel Aufmerksamkeit zu schenken. Sollten sich die Elemente überlappen, korrigiert dies Envision automatisch, so dass alle Elemente sichtbar bleiben. Daher besteht kein Risiko, die Elemente falsch zu positionieren. Dafür können Sie den Tile-Editor benutzen, um den letzten Feinschliff des Dashboards visuell zu gestalten.

Anzeige eines Indikators mit einem Einzelwert

Das Anzeigen von Millionen von Zahlen ist relativ einfach. Hingegen ist das Anzeigen von 10 Zahlen, die es auch Wert sind, täglich analysiert zu werden, äußerst kompliziert. Bei der Erstellung eines Dashboards besteht einer der häufigsten Fälle darin, ein Element zu entwerfen, das nur einen einzelnen Wert enthält. Dies kann mit dem Element table erlangt werden. Dieses Element kann eine besondere Anzeige nutzen, wenn die Tabelle nur aus einer einzelnen Zelle, d.h. aus einer 1x1 Tabelle, besteht. Mit folgendem Skript werden 4 verschiedene Indikatoren angezeigt, wie hierunter für die relevanten Zeilen beschrieben wird.
show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price{$}" c2d2 with min(SellingPrice)
show table "Max selling price{$}" e2f2 with max(SellingPrice)
Die Anweisung show table beginnt mit den Optionen für Typ, Überschrift, Position und Farbe. Das Muster ist identisch zu dem des Elements label. Nach diesen Optionen steht das Schlüsselwort with. Bei allen Elementen, die Daten enthalten, deutet das Schlüsselwort with daraufhin, dass die Variablen, die im Element eingefügt werden, aufgezählt werden müssen. In diesem Falle beinhaltet jedes unserer Elemente nur einen Wert, doch in den nachfolgenden Abschnitten werden komplexere Elemente mit mehreren Werten angezeigt.

Bisher haben wir noch nicht die Aggregationsmöglichkeiten von Envision abgedeckt. Ohne groß zu vertiefen, können wir uns merken, dass sum(), min() und max() Aggregatoren sind und diese ähnlich zu ihren Gegenstücken in Excel funktionieren.

Womöglich scheinen aber sum(1) und Orders.1 etwas rätselhaft. Wie wir bei unserer ersten Berechnung sehen konnten, funktioniert Envision vor allem mit Vektoren. Daher stellt sum(1) syntaktischen Zucker für die etwas ausführlicheren Skriptvarianten dar:
OnePerLine = 1
show table "Items" a2 with sum(OnePerLine)
Im oberen Code-Snippet wird der Vektor OnePerLine definiert. Der Konvention nach ist dieser Vektor Teil der Artikeltabelle, daher hat die Zuweisung einen Wert von 1, der jedem Artikel zugewiesen wird, d.h. jeder Zeile in der Artikeltabelle. Demzufolge liefert die Summe all dieser Werte die Gesamtanzahl von Artikeln, die in der Tabelle Items enthalten sind. Ähnlich entspricht sum(Orders.1) einem alternativen Snippet:
Orders.OnePerLine = 1
show table "Orders" b2 with sum(Orders.OnePerLine)
Auch hier ist die Zuweisung eine Vektorberechnung, in der jeder Zeile der Tabelle Orders einem Wert gleich 1 zugewiesen wird. Werden hier all diese Werte addiert, erhält man die Gesamtzahl der Zeilen in dieser Tabelle. Es ist zulässig, für jegliche Tabelle MyTable.42 als syntaktischen Zucker zu schreiben, um den Wert 42 einem anonymen Vektor zuzuweisen.

Auch das Anzeigen eines Mindestpreises weist ein ähnliches Aggregationsmuster auf, doch bei einer genaueren Beobachtung des Dashboards, erkennt man ein etwas anderes visuelles Verhalten hier. So werden die Verkaufspreise mit einem Dollarzeichen ($) als Maßeinheit für den Indikator angezeigt. Sieht man sich die relevanten Zeilen des Skripts an, versteht man, wie dieses Verhalten erzeugt wird.
show table "Min selling price{$}" c2d2 with min(SellingPrice)
Dieses Verhalten wird durch das Token {$} möglich, das am Ende des Elements steht. Der Konvention nach, behandelt Envision alles, was sich zwischen geschweiften Klammern in einer Überschrift befindet, als anwendbare „Einheit“. Die Einheit wird dann gewöhnlich an der rechten Seite des Werts angezeigt, z.B. 42 miles. Doch einige der Einheiten, genauer gesagt, die Währungen, wie $ oder € werden davor angezeigt, ein Muster, das Envision übernimmt.

Anzeigen eines Liniendiagramms

Das Liniendiagramm ist eines der meistbenutzten Typen von Elementen in Envision. In diesem Fall, da die Daten zeitlich aggregiert werden müssen - täglich, wöchentlich, monatlich - ist die Benutzung eines Liniendiagramms etwas komplexer als die der anderen Elemente, die wir bisher gesehen haben. Sehen wir uns das Skript, das zur Anzeige eines Liniendiagramms benutzt wird, genauer an.
Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(PO.NetAmount)
show linechart "Weekly volumes{$}" a3f5 tomato with
  Week.oamount as "Sold"
Week.pamount as "Purchased" 
Die Tabelle Week ist keine übliche Tabelle, im Sinne, dass die Tabelle nicht aus den Daten geladen wird. Da solche zeitliche Aggregationen im Handel öfters vorkommen, werden diese in Envision vorrangig behandelt. Folglich ist es viel einfacher, Berechnungen, die zeitliche Aggregationen beinhalten, zu implementieren. Doch dieser spezifische Aspekt der Programmiersprache Envision geht über das Ziel dieses Dokuments hinaus. Sagen wir, dass Week als ein Empfänger dient, in dem Daten in wöchentliche Pakete unterteilt werden.

Es gibt auch eine besondere Zuweisung :=, die sogenannte skalare Zuweisung. Diese skalare Zuweisung unterscheidet sich von der gewöhnlichen = Zuweisung, da sie, statt des Werts pro Artikel, nur einen, von allen Artikeln unabhängigen Wert berechnet. Daher berechnen wir in diesem Beispiel einen Wert pro Woche für Week.oamount und einen anderen Wert pro Woche für Week.pamount.

Die Anweisung für das Liniendiagramm beginnt mit show linechart und ist etwas länger als beispielsweise ein einfaches label Element. Zur besseren Lesbarkeit und um längere Anweisungen zu vermeiden, benutzen wir die Block-Syntax. Der Block sollte nach dem with beginnen und darunter können alle Element-Argumente, eines pro Zeile, aufgelistet werden.

Nach dem Zeilenumbruch sind zwei Vektoren gelistet, nämlich Week.oamount und Week.pamount. Wie schon zuvor gesagt, ist es möglich, die verschiedenen Variablen nach dem Schlüsselwort with durch Kommas getrennt aufzulisten. Diese Variablen werden dann im Element angezeigt. In diesem Fall werden zwei Variablen an das Element weitergegeben. Obwohl in einem Liniendiagramm mehr als zwei Variablen vorkommen können, empfehlen wir in der Praxis, nicht mehr als 3 Variablen zu wählen, da Diagramme mit mehr als 3 Zeilen im Skript oft unverständlich werden.

Die Variablen, die als Argument an das Element weitergegeben werden, können auch ausdrücklich umbenannt werden. Dies kann man über das as Schlüsselwort und dem String mit dem neuen Namen erreichen. Jeder Typ von Element geht zur besseren Gestaltung des Elements auf eine andere Art und Weise mit Variablennamen um. So werden diese Namen beispielsweise beim Liniendiagramm zur Legende unter dem Diagramm. Doch der Mechanismus zur Variablenbenennung mit dem Schlüsselwort as ist für alle Elemente gleich und beschränkt sich nicht nur auf das linechart. Der String, der mit as assoziiert wird, kann auch eine Maßeinheit enthalten, die sich wie bei der Überschrift verhält.

Standardmäßig wählt das Liniendiagramm auf Grundlage der für das Element angegebenen Farbe eine Reihe von Farben aus. Doch man kann auch eine Farbe für jeder Linie, die gezeichnet wird, angeben. Dies kann man über folgende Syntax erreichen:
show linechart "Weekly volumes{$}" a3f5 with
Week.oamount as "Sold" color: "blue"
Week.pamount as "Purchased" color: "red"

Anzeigen einer Tabelle

Wir überspringen jetzt das piechart und das treemap, um direkt zu einer fortgeschrittener Nutzung der Tabelle überzugehen. Obwohl Tabellen nicht sonderlich visuell sind, sind sie wahrscheinlich einer der vielseitigsten Bestandteile von handlungsorientierten Dashboards. Tabellen werden häufig zur Anzeige von priorisierten Aktionslisten, wie etwa die Produkte mit dem überhöhtesten oder tiefsten Bestand. Im oberen Skript wurde eine semikomplexe Tabelle am Ende des Skripts definiert (zur Klarheit wurde diese erneut hierunter kopiert).
show table "Top Sellers" a9f12 tomato with
  Id as "Product ID",
  Supplier,
  StockOnHand,
  sum(Orders.NetAmount) as "Sold{$}"
  order by sum(Orders.NetAmount) desc 
Diese Anweisung könnte auch in einer einzelnen Zeile geschrieben werden. Doch der Lesbarkeit halber, nutzen wir wieder die Block-Syntax für Elemente. Die Syntax entspricht den allgemeinen Normen Envisions, die wir bisher gesehen haben mit 4 Variablen, die nach dem Schlüsselwort with aufgelistet sind. Die Deklaration endet mit der besonderen Anweisungorder by, die wir weiter unten erklären werden.

Envision lässt nicht nur die Auflistung von Variablen, sondern auch von Ausdrücken zu. Dies nutzen wir in Zeile 4. Mit sum() wird eine Aggregation auf Artikelebene berechnet und diese Berechnung wird direkt im Element ausgedrückt. Man hätte aber auch davor den Vektor deklarieren können mit:
Sold = sum(Orders.NetAmount)
show table "Top Sellers" a9f12 tomato with
  Id as "Product ID",
  Supplier,
  StockOnHand,
  Sold as "Sold{$}"
  order by sum(Orders.NetAmount) desc 
Dank der Möglichkeit, Ausdrücke in der Anweisung eines Elements deklarieren zu können, wird das Skript kompakter und leichter zu lesen, und somit einfacher zu warten.

Die letzte Zeile beginnt mit order by und wie aus dem Namen hervorgeht, kontrollierte diese Zeile die Reihenfolge, in der die Zeilen der Tabelle angezeigt werden. Der Flag desc deutet daraufhin, dass eine absteigende Reihenfolge benutzt werden sollte. Alternativ wird, wenn der Flag desc ausgelassen wird, eine aufsteigende Reihenfolge benutzt.