Custom Tiles

Wenn die eingebauten Tile-Typen nicht zu der Visualisierung passen, die Sie wollen, liefert Saiku Custom Renderer mit, die weiter gehen und dabei sicher bleiben. Alle sind deklarativ — Sie beschreiben das Ergebnis mit Daten, nicht mit Code.

Jeder Renderer erscheint als eigener Eintrag im Menü + Tile hinzufügen (unter „Custom”). Wählen Sie einen aus, wird ein Tile abgelegt, das bereits an diesen Renderer gebunden ist; danach konfigurieren Sie es im ⚙-Editor des Tiles genau wie jedes andere Tile — Cube wählen, Abfrage bauen und die Konfiguration des Renderers liefern.

Hinweis

Custom Renderer werden pro Deployment aktiviert. Zeigt das Menü „+ Tile hinzufügen” „No custom renderers installed”, hat Ihr Saiku sie nicht registriert — fragen Sie Ihren Administrator.

Ranked-List-Tile

Der Ranked-List-Renderer zeichnet die „Movers”-Karte, die die meisten Ops-Dashboards wollen: eine nummerierte Folge von Zeilen, je ein Label und ein Wert, wobei der Wert danach eingefärbt wird, ob es rauf oder runter ging.

Binden Sie ihn an eine Abfrage, die eine Label-Spalte und eine Wert-Spalte liefert, und konfigurieren Sie dann:

Feld	Bedeutung
Untertitel	Eine gedämpfte Zeile unter dem Tile-Titel („Product department · MoM”)
Label-Spalte	Leer = abgeleitet (siehe unten)
Wert-Spalte	Leer = abgeleitet (siehe unten)
Wertformat	Optionales Anzeigemuster — $c1 → $27.4M. Leer behält die Formatierung des Cubes
Zeilen	Wie viele gezeigt werden (Standard 6)
Reihenfolge	Reihenfolge der Abfrage behalten, höchste zuerst oder niedrigste zuerst
Wertfarbe	Nach Vorzeichen (rauf grün / runter rot) oder schlicht
Rangnummern zeigen	Die führende 1, 2, 3 …

Bleiben die Spalten leer, werden sie strukturell abgeleitet: Der Wert ist die erste Measure-Spalte im Ergebnis, das Label ist der Rest. Das hält auch dann, wenn die Captions einer Dimension wie Zahlen aussehen — ein Verschreiber-Dezil (10.0), ein Jahr, eine Filialnummer — und genau dort würde Raten anhand des Textes es falsch herum verstehen.

Wertformat nimmt dasselbe Mustervokabular wie das KPI-Tile und die ECharts-Wertachse: $cN kompakte Währung, $N schlichte Währung, N% Prozent, N Nachkommastellen. Bei jeder Währungs-Measure lohnt es sich — eine Top-N-Karte aus rohen $27,432,535.99-Zeilen ist schwer zu überfliegen.

Sortiert wird vor dem Zeilenlimit, „höchste zuerst, 3 Zeilen” ist also wirklich die Top drei des ganzen Ergebnisses und nicht die ersten drei neu geordnet. Farben und Typografie folgen dem App-Theme — kein CSS nötig.

Tipp

Diese Karte wurde früher gebaut, indem man ein Table-Tile mit Custom CSS gestaltet hat. Tun Sie das nicht — ein Ranked-List-Tile nimmt das Theme der App an, kollidiert nicht mit anderen Tabellen auf der Seite und ist von dem editierbar, der Ihre App erbt.

ECharts-Option-Tile

Der ECharts-Option-Renderer lässt Sie ein Diagramm verfassen, indem Sie direkt ein ECharts-option-Objekt schreiben. Es ist die Notluke für Formen, die das eingebaute Chart-Tile nicht freigibt — eigenwillige Achsenanordnungen, Rose-Varianten, ungewöhnliche Visual Maps und so weiter.

Achtung

Prüfen Sie zuerst Das Chart-Tile. Radar, Scatter, Treemap, Sunburst, Heatmap und Wasserfall sind alles eingebaute Diagrammtypen, und Dual-Achsen, Combo-Serien, Trendlinien, Top N, Zahlenformatierung und Referenzlinien sind alles eingebaute Optionen. Zu einer handgeschriebenen Option zu greifen, um eines davon zu bekommen, kostet Sie die Theme-Vererbung, die bedingte Formatierung und — vor allem — die Möglichkeit, dass wer Ihre App erbt, sie ändern kann, ohne JSON zu editieren.

Weil Ihre Option an eine lebende Charting-Bibliothek gereicht wird, wird sie gegen eine sichere Teilmenge validiert, bevor sie überhaupt rendert. Die Regeln, in jeder Tiefe des Objekts durchgesetzt:

• Keine Funktionswerte. ECharts ruft Dinge wie formatter als Funktionen mit lebenden Daten und DOM auf, also wird jede Funktion an jeder Stelle der Option abgelehnt. (Reines JSON kann keine Funktion ausdrücken; die Prüfung schützt davor, dass ein lebendes Objekt eine einschmuggelt.)

• Keine entfernten URLs. Off-Origin http(s):, protokollrelative //host, url(...)-Ziele, die off-origin zeigen, und Nicht-Bild-data:-URIs werden alle abgelehnt — sie sind Exfil-/ SSRF-Vektoren. Übrig bleiben Same-Origin- und relative Referenzen plus data:-Bilder ausschließlich in PNG, JPEG, GIF oder WebP.

  Beachten Sie: SVG steht nicht auf dieser Liste, auch nicht als data:-Bild. Ein SVG kann Skript tragen, also ist es absichtlich ausgeschlossen — nutzen Sie einen Raster-Export, wenn Sie ein Inline- Icon brauchen.

• Nur Keys von der Allowlist. Akzeptiert werden nur kuratierte Top-Level-Keys (title, grid, xAxis, yAxis, series, legend, tooltip, color, backgroundColor, visualMap, radar, polar und eine Handvoll mehr) sowie ein kuratierter Satz von Feldern pro series. Alles außerhalb der Allowlist wird abgelehnt statt still verworfen — der Validator fail closed.

Verletzt Ihre Option irgendeine Regel, zeigt das Tile einen Validierungsfehler statt zu rendern, damit Sie es beheben können. Die Abfrage, die Sie binden, liefert die Daten (Kategorien + Serien), die die Option zeichnet.

Theme zuerst, Option danach

Ihre Option wird über die gethemte Grundlinie der App gelegt. Was sie ausspricht, gewinnt; was sie unausgesprochen lässt — Titelfarbe, Achsenbeschriftungsfarbe, Gitterlinien, die Serienpalette — wird vom Theme geerbt.

Schreiben Sie nur die Teile, die wirklich maßgeschneidert sind. Eine Option voller hartkodierter Hex-Werte sieht am ersten Tag identisch aus und passt beim ersten Preset-Wechsel nicht mehr zur App.

Hinweis

Komponenten werden dekoriert, nie eingeführt. In ECharts schaltet Erwähnen einer Komponente sie ein — die Grundlinie gestaltet eine Legende, einen Tooltip oder eine Achse also nur, wenn Ihre Option sie bereits deklariert. Ein Tortendiagramm bekommt keine Achsen, nur weil das Theme Meinungen darüber hat.

Die Wertachse formatieren

Weil Funktionen abgelehnt werden, können Sie eine Achse nicht auf dem üblichen ECharts-Weg formatieren — axisLabel.formatter müsste eine Funktion sein. Stattdessen hat der Editor ein Feld Wertachsen-Format, das dasselbe Muster nimmt wie das KPI-Tile:

Muster	Rendert
$c0	$149K — kompakte Währung
$c1	$48.2K
$2	$99.50
1%	15.6%
0	1,234

Es wird auf jede type: "value"-Achse angewendet und zur Renderzeit kompiliert, Sie liefern also nie Code und die Keine-Funktionen-Regel bleibt absolut. Kategorieachsen bleiben unangetastet — ein String-Template wie "W{value}" in Ihrer Option funktioniert dort weiterhin, denn das ist deklarativ.

Graph-Tile

Der Graph-Renderer verwandelt die Records einer Abfrage in einen Knoten-und-Kanten-Graph — einen Eigentümerbaum, eine Beziehungskarte, einen Fluss zwischen Entitäten. Statt eines Option-Objekts geben Sie ihm ein Spalten-Mapping: welche Spalten Ihres Ergebnisses die Endpunkte, Ids, Labels und Gewichte sind.

Feld	Pflicht	Bedeutung
sourceCol	ja	Spalte mit dem Source-Endpunkt jeder Zeile
targetCol	ja	Spalte mit dem Target-Endpunkt jeder Zeile
idCol	ja	Spalte mit der kanonischen Id eines Knotens (damit ein Label am richtigen Knoten hängt). Für eine reine Kantenliste setzen Sie sie gleich sourceCol
labelCol	nein	Spalte mit einem freundlichen Anzeigenamen für den idCol-Knoten
valueCol	nein	Numerische Spalte, die auf jede Kante getragen und ins Knotengewicht summiert wird
layout	nein	force (Standard) oder circular

Jede Zeile wird zu einer gerichteten Kante source → target; Knoten werden aus jedem Endpunkt gesammelt und per Id dedupliziert. Zeilen ohne Endpunkt werden übersprungen. Setzen Sie valueCol, gewichtet dessen Wert sowohl die Kante als auch ihre Endpunktknoten — die Knotengröße wird relativ zu den Gewichten in diesem Graph skaliert, der schwerste Knoten erreicht also immer das obere Ende des Größenbands, in welchen Einheiten die Measure auch rechnet. Ein Gewicht von null oder negativ ist der leichteste Knoten, nicht ein ungewichteter.

Ein Custom Tile konfigurieren

Der Ablauf ist bei allen derselbe:

1. + Tile hinzufügen → Ranked list (oder ECharts option oder Graph).
2. Den ⚙-Editor des Tiles öffnen.
3. Eine Abfrage binden — Cube wählen und die Abfrage bauen, deren Ergebnis das Tile speist.
4. Die Konfiguration liefern — die Ranked-List-Felder, das ECharts-option-Objekt oder das Graph-Spalten-Mapping.
5. Speichern. Ungültige Konfiguration erscheint als Inline-Fehler statt als kaputtes Rendering.

Verwandt

• Seiten & Tiles bauen — die eingebauten Tile-Typen und wie das Binden funktioniert.
• Das Chart-Tile — schauen Sie hier nach, bevor Sie eine ECharts-Option von Hand schreiben.
• Plugins — das fortgeschrittene, vom Admin installierte Tile mit sandboxed JS für vollständig eigene Widgets.