Marcel Moré stellte das Framework Evidence.dev vor, mit welchem sich auf einfache Art und Weise komplexe interaktive Dashboards erstellen lassen.

Neben einer Erläuterung von Aufbau und Funktionsweise des Frameworks zeigte Marcel den Prototyp eines eigenen Projekts, das auf Basis von Evidence und DuckDB innerhalb einer bestehenden FileMaker-Lösung umgesetzt wird.

Technische Grundlagen

Einige Besonderheiten unterscheiden Evidence von anderen verfügbaren Dashboard-Lösungen. Insbesondere die Tatsache, dass jegliche Ausgaben in Form von sehr einfach strukturiertem Code definiert werden, ist zunächst ungewöhnlich, bringt aber eine Reihe von Vorteilen mit sich. Zudem bringt Evidence eine integrierte Datenbank-Engine mit und zwar DuckDB als Web-Assembly-Instanz, wodurch die Berechnung der Daten für die Darstellung in den Dashboard-Objekten quasi in Echtzeit ausgeführt und sehr flexibel angepasst werden kann.

Ausgangspunkt für jegliche Darstellungen sind sehr einfach aufgebaute Templates, die mit Markdown und SQL definiert werden. Der Evidence-Stack kompiliert diese Vorgaben in HTML, JavaScript und SVG und macht diese als Webseiten darstellbar. Die Erzeugung der Webseiten basiert auf der Svelte-Engine wodurch die Ausgabe on-demand neu gerendert wird, sobald innerhalb des Templates Anpassungen vorgenommen werden. In Kombination mit dem Tailwind-Framework bringt die Lösung eine ganze Reihe von vorgefertigten UI-Komponenten mit, die sich flexibel für den eigenen Anwendungszweck konfigurieren lassen und im Layout bei der Ausgabe automatisch auf allen Geräten und Bildschirmgrößen dynamisch angepasst werden.

Datenanbindung

Die Datenanbindung erfolgt anhand von Quellen-Definitionen in der Evidence-Einstellungsseite. Es können z.B. CSV-Dateien oder auch SQLite-, MySQL-, MS-SQL- oder DuckDB-Datenbanken sowie weitere Formate als Quelle eingebunden werden. Intern werden die enthaltenen Daten automatisch ins Parquet-Format umgewandelt und so als statische Cache-Tabellen bereit gehalten. Ein CLI-gesteuerter Update-Prozess erlaubt die gezielte Aktualisierung des Cache aus den jeweiligen Quellen.

Dashboard Ausgabe

Die Dashboard-Seiten werden mit Ausgabe-Objekten aus der Apache EChart-Bibliothek bestückt, die ebenfalls sehr einfach innerhalb der Templates konfiguriert werden können. Neben den üblichen Chart-Typen wie Balken-, Säulen- oder Liniendiagrammen stehen auch interaktive Tabellenobjekte oder komplexe Typen wie Heatmaps, Sankey-Diagramme, Geo-Maps u.a. zur Verfügung. Die Auswahl an enthaltenen Typen ist enorm. Zudem sind die Chart-Objekte interaktiv und intelligent. Per MouseOver können Zusatzinformationen eingeblendet werden oder z.B. einzelne Datensegmente ein- oder ausgeblendet werden. Tabellen-Objekte können spaltenweise sortiert oder durchsucht werden und erhalten bei größerem Umfang eine automatische Paginierung. Zudem werden die enthaltenen Daten optional als CSV-Download oder die erzeugten Diagramm-Grafiken als PNG-Download angeboten, zugehörige Download-Symbole erscheinen automatisch.

Anwendung in der Praxis

Was sich hier kompliziert anhört, ist in der Praxis sehr einfach. Das Evidence-Framework bringt von Haus aus einige Beispiel-Dateien mit, welche das grundlegende Prinzip erläutern. Diese sind direkt lauffähig und für eigene Zwecke anpassbar. Eine umfangreiche Dokumentation ermöglicht einen schnellen Einstieg.

Durch die einfache Erstellung von Markdown-Dateien lässt sich ein Projekt schnell und unkompliziert für den jeweiligen Anwendungsfall anpassen. Neben der Verwendung von Eingabe-Komponenten und Chart-Typen lassen sich die Seiten wie HTML-Seiten oder ein Text-Wiki mit zusätzlichen Inhalten anreichern. Werden mehrere Seite erstellt, erhalten diese automatisch eine Navigation. So lässt sich quasi ein Workbook mit allen für die Präsentation und Erläuterung der darzustellenden Daten relevanten Inhalte erstellen. Aber auch ganz einfache Darstellungen eines Objekts auf einer Seite sind möglich, wenn diese z.B. in einer anderen Plattform wie FileMaker eingebunden werden sollen.

Jegliche Daten, die in den Seiten enthalten sein sollen, werden einfach als SQL-Abfrage in einen Kommentarblock im Quelltext geschrieben. Das jeweilige Ergebnis lässt sich dann als Objekt-Platzhalter in die Chart-Komponenten eintragen, die meist nur aus einem einzigen HTML-Tag mit optionalen Parametern bestehen.

Integration und Debugging

Standardmäßig erzeugt Evidence auf jeder Seite ein Konfigurations-Menu, welches einen Schema-Viewer enthält und die Option, alle Queries mit ihren jeweiligen Ergebnissen auf der Seite einzublenden. So ist ein einfaches Debugging der Queries möglich und man hat sehr schnell einen Überblick, was beim Rendern auf der Ausgabeseite ankommt. Für den Betrieb im Produktivsystem lässt sich dieses Menu deaktivieren.

Templates erlauben die Übergabe von Parametern per URL-Schema, die sich dann dynamisch in die enthaltenen Queries einbinden lassen. Das ist insbesondere im Zusammenspiel mit dem FileMaker Webviewer eine sehr nützliche Option. Man übergibt einfach die Datensatz-ID in der URL und Evidence stellt dann die passende Auswertung zum Datensatz innerhalb des FileMaker-Layouts dar. Einfacher geht es kaum!

Deployment

Ein grundlegendes Prinzip von Evidence ist der Ansatz, das fertige Projekt als statische Webseiten zu rendern inklusive der enthaltenen Parquet-Files. Die fertige Ausgabe lässt sich somit in einem Web-Verzeichnis bereitstellen. Es ist dann auf der Ausgabeseite kein Evidence-Stack zur Darstellung erforderlich. Durch die eingebundenen JavaScript-Objekte und die DuckDB-WASM Instanz behält die statische Website trotzdem ihre volle Interaktivität.

Für das Zusammenspiel mit einer FileMaker Lösung lässt sich das Evidence-Projekt auch lokal im Developer-Mode betreiben. Im Hintergrund sorgt dann ein integrierter Web-Server auf einem einstellbaren Port für die Bereitstellung der Seiten.

Entwicklungsumgebung

Für die Erstellung eines eigenen Projekts mit Evidence empfiehlt sich die Verwendung von VSCode. Evidence ist als VSCode Plugin verfügbar und lässt sich damit sehr einfach installieren und in Betrieb nehmen. Ein wichtiger Vorteil ist die nahtlose Integration mit git, so dass sich während der Weiterentwicklung des eigenen Projekts die Versionsstände komfortabel dokumentieren lassen. Hier spielt das “Business intelligence as code”, wie Evidence es selbst nennt, eine seiner Stärken aus, weil alle enthaltenen Bestandteile in Form von Textdateien vorliegen und sich somit hervorragend versionieren lassen.

Alle Optionen und Möglichkeiten hier aufzuzählen würde den Rahmen sprengen. Nicht nur für die Verwendung mit FileMaker-Lösungen ist Evidence eine spannende Möglichkeit. Das Framework ist Open-Source unter MIT-Lizenz und kann somit frei genutzt und für eigene Zwecke angepasst werden.

Weitere Infos finden sich auf der Anbieter-Seite und auf github:

Evidence
https://evidence.dev/

Installations-Anleitung
https://docs.evidence.dev/install-evidence/

HowTo Guide: Build Your First App
https://docs.evidence.dev/build-your-first-app/

Dokumentation
https://docs.evidence.dev/

github: evidence
https://github.com/evidence-dev/evidence