Designeigenschaften

Übersicht

Designs verwenden spezielle JSON-Strukturen mit CSS-Eigenschaften. Der Artikel beschreibt die Eigenschaften und zeigt Beispiele.

Komplette JSON-Design-Struktur

Dies ist ein Beispielsatz der Eigenschaften, die Sie anpassen können (zum Anzeigen ausklappen):

{ "theme" : { "content" : { "palette" : { "primary" : { "base" : "#3049D1" }, "error" : { "base" : "#e54d42" }, "success" : { "base" : "#00c18d" }, "warning" : { "base" : "#f4d521" } }, "typography" : { "font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)", "fontBold" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)" }, "button" : { "borderRadius" : "2", "dropShadow" : true }, "modal" : { "title" : { "color" : "#6D7680", "lineColor" : "#DAE2EA" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true, "outsideBackgroundColor" : "#DAE2EA" }, "tooltip" : { "color" : "#C8D0FF", "backgroundColor" : "#07124E" },        "analyticalDesigner" : { "title" : { "color" : "#6D7680" } }, "dashboards" : { "title" : { "color" : "#6D7680", "backgroundColor" : "#F4F5FB",           "borderColor" : "#1b4096" }, "navigation" : { "title" : { "color" : "#6d7680" }, "borderColor" : "#DAE2EA", "item" : { "color" : "#6d7680", "hoverColor" : "#000", "selectedColor" : "#000", "selectedBackgroundColor" : "#F4F5FB" }, "backgroundColor" : "#ffffff" }, "filterBar" : { "filterButton" : { "backgroundColor" : "#F4F5FB" }, "backgroundColor" : "#F4F5FB",           "borderColor" : "#1b4096" }, "section" : { "title" : { "color" : "#6D7680", "lineColor" : "#dde4eb" }, "description" : { "color" : "#999EA5" } }, "content" : { "kpiWidget" : { "title" : { "color" : "#8292E3", "textAlign" : "center" }, "kpi" : { "primaryMeasureColor" : "#E8EAF7", "secondaryInfoColor" : "#8292E3" }, "borderColor" : "#3049D1", "borderRadius" : "6", "borderWidth" : "1", "backgroundColor" : "#1b4096", "dropShadow" : true }, "widget" : { "title" : { "color" : "#101010", "textAlign" : "center" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true }, "backgroundColor" : "#F4F5FB" } } }, "meta" : { "category" : "theme", "deprecated" : "0", "isProduction" : 1, "summary" : "", "tags" : "", "title" : "Demo theme" } } }

Allgemeine Regeln

Um KPI-Dashboards anzupassen, aktualisieren Sie die Eigenschaften im Abschnitt Dashboards.

Um den Analytical Designer anzupassen, aktualisieren Sie die Eigenschaften im Abschnitt Analytical Designer.

Befolgen Sie bei der Erstellung Ihres Designs diese allgemeinen Regeln:

Farben	Verwenden Sie folgende Farbcodierungsformate: Hexadezimale Farbe ohne Transparenz: `#ff0` oder `#ff00ff` Hexadezimale Farbe mit Transparenz: `#ff06` oder `#ff00ff80` RGB-Farben: `rgb(120,120,120)` RGBA-Farben: `rgb(120,120,120,0.6)` Hintergrundfarben sollten ausreichend kontrastreich sein, damit Texte lesbar sind.
Rahmen	Grenzradius und Pixelgewichtung. Um eine andere Einheit zu verwenden, fügen Sie sie in den String ein. Beispiel: `"border-radius" : "2em"`
Widget-Rahmen	Das empfohlene Maximum für Widget-Rahmen beträgt 30px. Die empfohlene Maximalbreite der Ränder ist 4 Pixel. Um Widget-Rahmen auszublenden, verwenden Sie eine transparente Farbe anstelle von borderwidth=0. Beispiel: `"borderColor": "78787800"` oder `"borderColor": "rgb(120,120,120,0)"`
Meta-Bereich	Unabhängig von der Anzahl der geänderten Eigenschaften muss jedes benutzerdefinierte Design den Bereich `Meta` enthalten. `"meta" : { "category" : "theme", "deprecated" : "0", "isProduction" : 1, "summary" : "", "tags" : "", "title" : "{Your theme name}" }`

Eigenschaften

Der folgende Abschnitt enthält Informationen zu einzelnen Eigenschaften sowie Beispiele und Beispiel-Code.

Farben

Die Grundfarben für Ihre KPI-Dashboards und Analytical Designer werden in der Palette definiert.

Neben diesen Farben können Sie auch die Farbe individueller visueller Elementtypen anpassen. Siehe Abschnitte unten.

Eigenschaft	Beschreibung	Beispiel-Code
Farbe für Primärelemente	Farbe für primäre Schaltflächen, Links und hervorgehobene visuelle Elemente. Standard:	`"primary" : { "base" : "#3049D1" }` Benutzerdefiniert:
Farbe für Fehler	Farbe für Fehlermeldungen und Fehlerzustände. Standard:	`"error" : { "base" : "#7d07f2" }` Benutzerdefiniert:
Erfolgsfarbe	Farbe für Erfolgsmeldungen und Erfolgszustände. Standard:	`"success" : { "base" : "#00c18d" }` Benutzerdefiniert:
Farbe für Warnungen	Farbe für Warnmeldungen und Warnungszustände. Standard:	`"warning" : { "base" : "#e60000" }` Benutzerdefiniert:
Komplementär	Nur für KPI-Dashboards. Farbvarianten für visuelle Elemente wie Rahmen, Linien, Schatten, Schaltflächen und so weiter. Die Komplementärfarbpalette besteht aus 10 Farben Ihre Wahl (`c0` bis `c9`). Definieren können Sie: Alle 10 Farben. Die erste Farbe ( `c0` ) und die letzte Farbe ( `c9` ). Die beiden Farben sind zwingend erforderlich. Die übrigen Farben werden automatisch basierend auf diesen Farben berechnet. Die erste Farbe ( `c0` ), die letzte Farbe ( `c9` ) und eine beliebige Anzahl an Farben dazwischen. Die übrigen Farben werden automatisch basierend auf diesen Farben berechnet. Die individuellen Farben werden verwendet für: `c0` - Hintergrundfarbe für Dashboard, Widgets, Dialoge usw. `c1` - - Kontrastfarbe für den Hintergrund `c2` - Mehr Kontrastfarben für den Hintergrund `c3` - Farbe für Rahmenlinien `c4` - Mittelfarbe für Rahmen `c5` - Helle Textfarbe, dunkle Rahmenfarbe `c6` - Textfarbe `c7` - Textfarbe `c8` - Textfarbe `c9` - Dunkle Textfarbe, Vordergrundfarbe Für Beispiele zur Verwendung der Komplementärfarbpalette, siehe Designbeispiele. Ändern Sie nicht den Namen der Farben. Die Hintergrundfarbe wird mit der ersten Farbe (`c0`) definiert. Ist die Hintergrundfarbe `c0` dunkler als die letzte Farbe (`c9`), so können Sie einen Dunkelmodus erzeugen. Die Komplementärfarbpalette wird auf alle Elemente angewendet, die nicht speziell in Ihrem Design definiert wurden.	`"complementary" : { "c0" : "#282a36", "c1" : "#4d4466", "c2" : "#725e97", "c3" : "#9778c8", "c4" : "#bd93f9", "c5" : "#c8a7f7", "c6" : "#d4bbf6", "c7" : "#e0cff4", "c8" : "#ece3f3", "c9" : "#f8f8f2" }`

Schriftarten

Schriftarten werden im JSON unter Typografie definiert.

Geben Sie beide Varianten der Schriftart an (normal und fett). Beide Varianten müssen in derselben Schriftart sein.

Verwenden Sie folgende Formate für externe Schriftarten:

Absolute URL - "Schriftart": "url(https://somewebsite.com/path/to/font.woff)"
Explizites Format - "Schriftart": "url(https://somewebsite.com/path/to/font.woff) format('woff')"

Verwenden Sie folgende Formate für lokale Schriftarten:

"Schriftart": "local(Arial)"
"Schriftart": "local(Time New Roman)"
"Schriftart": "local('Times New Roman')"

Eigenschaft Beschreibung Beispiel-Code

Eigenschaft	Beschreibung	Beispiel-Code
Reguläre Schriftart	Spezifizieren Sie eine reguläre Schriftart.	`"font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)"` `"font": "local(font), url(path/to/font.svg) format('svg'), url(path/to/font.woff) format('woff'), url(path/to/font.otf) format('opentype')"`
Schriftart (fett)	Spezifizieren Sie, wie fett die Schriftart dargestellt werden soll.	`"fontBold" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)"`

Reguläre Schriftart

Spezifizieren Sie eine reguläre Schriftart.

"font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)"

"font": "local(font), url(path/to/font.svg) format('svg'), url(path/to/font.woff) format('woff'), url(path/to/font.otf) format('opentype')"

Schriftart (fett)

Spezifizieren Sie, wie fett die Schriftart dargestellt werden soll.

"fontBold" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)"

Empfohlene Schriftarten

Folgende kostenlose Schriftarten empfehlen wir für Ihre Designs:

Serifenlose Schriftarten	Serifen-Schriftarten
Lato Assistant Nono Sans Source Sans Pro Libre Franklin Open Sans Roboto Titilium Web Varela Round	Crimsonn Text Old Standard TT Kameron Copse

Visuelle Elemente

Passen Sie visuelle Elemente wie Schaltflächen, Overlay-Fenster und Tooltipps an.

Eigenschaft Beschreibung Beispiel-Code

Eigenschaft	Beschreibung	Beispiel-Code
Schaltfläche	Passen Sie das Aussehen von Schaltflächen in KPI-Dashboards und im Analytical Designer an. Standard:	`"button" : { "borderRadius" : "0", "dropShadow" : false }` Benutzerdefiniert:
Overlay-Fenster	Passen Sie das Aussehen von Overlay-Fenstern an.	`"modal" : { "title" : { "color" : "#6D7680", "lineColor" : "#DAE2EA" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true, "outsideBackgroundColor" : "#DAE2EA" }`
Tooltipps	Passen Sie Tooltips an. Standard:	`"tooltip" : { "color" : "#C8D0FF", "backgroundColor" : "#07124E" },` Benutzerdefiniert:

Schaltfläche

Passen Sie das Aussehen von Schaltflächen in KPI-Dashboards und im Analytical Designer an.

Standard:

"button" : { "borderRadius" : "0", "dropShadow" : false }

Benutzerdefiniert:

Overlay-Fenster

Passen Sie das Aussehen von Overlay-Fenstern an.

"modal" : { "title" : { "color" : "#6D7680", "lineColor" : "#DAE2EA" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true, "outsideBackgroundColor" : "#DAE2EA" }

Tooltipps

Passen Sie Tooltips an.

Standard:

"tooltip" : { "color" : "#C8D0FF", "backgroundColor" : "#07124E" },

Benutzerdefiniert:

Analytical Designer

Passen Sie die Namen von Betrachtungen an.

Eigenschaft	Beschreibung	Beispiel-Code
Farbe von Betrachtungstiteln	Die Farbe des Titels von Betrachtungen. Standard:	`"analyticalDesigner" : { "title" : { "color" : "#d6044e" } }` Benutzerdefiniert:

KPI-Dashboards

Passen Sie verschiedene Elemente wie Titel, Filter, Navigation und Widgets in KPI-Dashboards an.

Eigenschaft	Beschreibung	Beispiel-Code
KPI-Dashboard-Titel	Passen Sie den Titel Ihrer KPI-Dashboards an. Standard:	`"title" : { "color" : "#0392bd", "backgroundColor" : "#eafafd", "borderColor" : "#1b4096" }` Benutzerdefiniert:
Navigation	Passen Sie die linke Navigation der KPI-Dashboards an. Standard:	`"navigation" : { "title" : { "color" : "#3973ac" }, "borderColor" : "#DAE2EA", "item" : { "color" : "#3973ac", "hoverColor" : "#000", "selectedColor" : "#000", "selectedBackgroundColor" : "#F4F5FB" }, "backgroundColor" : "#ffffff" }` Benutzerdefiniert:
Filterleiste	Passen Sie das Aussehen der Filterleiste Ihrer KPI-Dashboards an. Standard:	`"filterBar" : { "filterButton" : { "backgroundColor" : "#F4F5FB" }, "backgroundColor" : "#F4F5FB", "borderColor" : "#1b4096" }` Benutzerdefiniert:
Dashboard-Bereiche	Passen Sie Titel und Beschreibungen der einzelnen KPI-Dashboardbereiche an. Standard:	`"section" : { "title" : { "color" : "#3b6ba1", "lineColor" : "#85abd6" }, "description" : { "color" : "#85abd6" } }` Benutzerdefiniert:

Inhaltsbereich

Eigenschaft	Beschreibung	Beispiel-Code
KPIs	Passen Sie das Aussehen der KPI auf Ihren KPI-Dashboards an. Der Rahmenradius sollte 4 Pixel nicht überschreiten, um Anzeigeprobleme beim Export in PDF-Dateien zu vermeiden. Standard:	`"kpiWidget" : { "title" : { "color" : "#8292E3", "textAlign" : "center" }, "kpi" : { "primaryMeasureColor" : "#E8EAF7", "secondaryInfoColor" : "#8292E3" }, "borderColor" : "#3049D1", "borderRadius" : "6", "borderWidth" : "1", "backgroundColor" : "#1b4096", "dropShadow" : true }` Benutzerdefiniert:
Betrachtungen auf KPI-Dashboards	Passen Sie Betrachtungen an, die auf KPI-Dashboards eingefügt werden. Wenn Sie Titelzeilenbetrachtungen in Ihrem KPI-Dashboard haben, halten Sie den Randradius bei max. 4px, um Anzeigeprobleme in exportierten PDF-Dateien zu vermeiden. Standard:	`"widget" : { "title" : { "color" : "#101010", "textAlign" : "center" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true }` Benutzerdefiniert:
Hintergrundfarbe	Farbe des Hintergrunds das KPI-Dashboards. Standard:	`"backgroundColor" : "#F4F5FB"` Benutzerdefiniert:

Designbeispiele