Das Design der Dashboards in Apache Superset basiert auf ant.design und ist sehr neutral gehalten. Daher kommt früher oder später der Wunsch auf, Superset an die Corporate Identity (CI) des eigenen Unternehmens anzupassen. Dazu gehören neben dem Firmenlogo und Farbschema natürlich auch Schrifttypen und weitere Festlegungen, um Nutzern einen Wiedererkennungswert bieten zu können.

Im Folgenden möchte ich Ihnen einen Einstieg geben, um das Aussehen von Superset auf ihre CI anzupassen. Das Thema ist sehr umfassend, weshalb wir uns in diesem Artikel auf einige ausgewählte Aspekte beschränken. Die hier beschriebenen Dinge sind in Superset Version 5.0.0 getestet und können in zukünftigen Versionen abweichen.

Richten Sie sich ein

Geben sie den Anwendern das Gefühl von „Zuhause“ durch wiedererkennbare CI auf den Dashboards. So erhöhen Sie nicht nur die Akzeptanz für das Produkt, sondern erleichtern den Anwendern die Verwendung.

So fühlt man sich bei der Verwendung von Superset nicht wie in einer fremden Welt. Gerade wenn Superset Dashboards auch in Firmenportalen eingebunden werden, möchte man, dass alles wie aus einem Guss aussieht.

Eigenes Firmenlogo, Favicon für Bookmarks und Schriftart

Zuerst betrachten wir das Aussehen eines relativ einfachen Dashboards im Grundzustand. Wir wollen hier mehrere Bereiche anpassen. Die Tabellen und Grafiken auf dem Dashboard lassen wir dabei vorerst außen vor. Möglichkeiten diese zu verändern wird Thema eines weiteren Artikels sein.

Der erste Teil der Anpassung ist das Logo in der linken oberen Ecke, Favicon sowie eine abweichende Schriftart. Dazu müssen diese Dateien im Superset Ordner hinterlegt werden, da dies nicht über die Oberfläche geändert werden kann. Danach passt man in der Konfigurationsdatei superset_config.py den jeweiligen Parameter an.

Benötigte Dateien hochladen

Das Logo und das Favicon muss zuerst in den Unterordner des Superset Basisverzeichnisses

./lib/python3.11/site-packages/superset/static/assets/images/

kopiert werden.

Die Schriftartendatei (falls keine Standardschriftart verwendet wird) am besten im OTF Format (OpenType format) in diesen Ordner kopieren:

./lib/python3.11/site-packages/superset/static/assets/fonts

Für das Logo und Favicon passt man nun in der Superset Konfigurationsatei superset_config.py zwei Parameter an:

FAVICONS = [{"href": "/static/assets/images/<YOUR_FAVICON>.png"}

Und für das Logo

APP_ICON = "/static/assets/images//<YOUR_LOGO>.png "

Zuletzt kann man noch den Applikationsname der im Browser angezeigt wird anpassen:

APP_NAME = "<COMPANY NAME>"

Nach einem Neustart von Superset sollten diese Änderungen bis auf die Schriftart schon sichtbar sein. Als Hinweis sei angemerkt das bei einem geöffneten Dashboard der Name des Dashboards im Browser Tab angezeigt wird und nicht mehr der unter „APP_NAME“ definierte Applikationsname. ist Auf allen anderen Seiten ist er aber sichtbar.

CSS Vorlage erstellen

Alle weiteren Anpassungen werden jetzt per CSS-Definitionen vorgenommen, die wir in einer CSS Vorlage anlegen. Diese Vorlage kann dann in jedem Dashboard verwendet werden und erspart damit die Arbeit für jedes Dashboard die Designvorgaben erneut anlegen zu müssen.

Die Vorlagen findet man in Superset als Admin im Menü rechts oben unter „Einstellungen / CSS Vorlagen“. Als nächsten Schritt erstellen wir eine neue Vorlage.

Nach der Vergabe eines Namens für die Vorlage legen wir in diesem Fenster alle CSS-Definitionen an, um unser Dashboard anzupassen.

Schriftart

Die Festlegung einer Schriftart ist das erste was wir definieren. In unserem Fall haben wir eine Schriftart im OTF Format hochgeladen. Daher geben wir diese jetzt an.

@font-face {
   font-family: 'Netto';
   src: url('/static/assets/fonts/Netto-Regular.otf') format('opentype'),
        url('/static/assets/fonts/Netto-Bold.otf') format('opentype');
}

Danach definieren wir diese Schriftart als unsere Hauptschriftart. Bei Verwendung einer Standardschriftart (wie Arial) ist nur dieser Block notwendig.

body {
   font-family: 'Netto', sans-serif;
}

Horizontales Menü

Als nächstes kümmern wir uns um die horizontale Menüleiste im oberen Dashboard-Bereich.

Mit folgenden Angaben geben wir dem eine andere Hintergrund- sowie Schriftfarbe und rücken es ein, um mit dem Inhalt darunter in einer Flucht dargestellt zu werden.

.header-with-actions {
   color: #023035;
   background: #CCE3E4;
   padding: 0 32px 0 32px;
}

Wie man sieht bleiben noch einige Menüelemente davon unberührt. Diese können wir nun noch mit den folgenden Angaben weiter auf unsere Bedürfnisse anpassen.

.ant-tabs {
  color: #023035;
}

.ant-btn {
  background-color: #E5F1F1;
}

.ant-tag {
  background-color: #E5F1F1;
}

.editable-title a, .editable-title--editable  {
  color: #023035;
}

._ant-menu-horizontal {
  background: #CCE3E4;
}

#_main-menu>.ant-row {
  background: #CCE3E4;
}

._dashboard-header-container {
  background: #CCE3E4;
}

Dashboard Hintergrund

Als letzten Schritt kümmern wir uns noch um die Dashboard-Fläche unter dem Menü und passen auch dort den Hintergrund und Schriftfarbe an.

.dashboard {
  color: #023035;
  background: #E5F1F1;
}

Nun sind wesentliche Elemente unseres Dashboards auf die CI angepasst.

Natürlich stellen die hier gezeigten Anpassungen nur einen kleinen Ausschnitt der Möglichkeiten dar, um die Gestaltung eines Dashboards zu beeinflussen. Für weitere Tipps und Tricks folgen Sie gerne dieser Blogreihe.

DataIntelligence - Ihr Berater und Dienstleister für Apache Superset

Am besten Sie probieren es gleich selbst mal aus oder sprechen uns für Fragen an. Gerne unterstützt DataIntelligence bei der Umsetzung Ihrer Designvorgaben.

Das Portfolio der DataIntelligence GmbH umfasst die komplette Spannweite von der Installation über die Dashboard-Entwicklung hin zum Betrieb von Apache Superset. Viele erfolgreiche Projekte bestätigen Apache Superset als ein verlässliches Analysewerkzeug mit einer stabilen Basis.

Kontaktieren Sie uns noch heute für ein unverbindliches Gespräch.