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": "#ffffff" }, "backgroundColor": "#F4F5FB" } } }, "meta": { "category": "theme", "deprecated": "0", "isProduction": 1, "summary": "", "tags": "", "title": "Demo theme" } } }

Allgemeine Regeln

Um Dashboards anzupassen, aktualisieren Sie die Eigenschaften im Bereich 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 Hauptfarben für Ihre Dashboards und Analytical Designer sind im Abschnitt Palette festgelegt.

EigenschaftBeschreibungBeispiel-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 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.

"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')"
EigenschaftBeschreibungBeispiel-Code
Reguläre SchriftartSpezifizieren 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 SchriftartenSerifen-Schriftarten

Visuelle Elemente

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

EigenschaftBeschreibungBeispiel-Code
Schaltfläche

Passen Sie das Aussehen von Buttons in Dashboards und im analytischen Designer an.

Standard: 

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

Benutzerdefiniert: 

Overlay-FensterPassen 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.

EigenschaftBeschreibungBeispiel-Code
Farbe von Betrachtungstiteln

Die Farbe des Titels von Betrachtungen.

Standard:

"analyticalDesigner" : { "title" : { "color" : "#d6044e" } }

Benutzerdefiniert:

Dashboards

Passen Sie diverse Elemente in Dashboards an, z. B. Titel, Filter, Navigationselemente und Widgets. Im Abschnitt Dashboards.

EigenschaftBeschreibungBeispiel-Code
Dashboard-Titel

Passen Sie den Titel Ihrer Dashboards an.

Standard: 

"title" : { "color" : "#0392bd", "backgroundColor" : "#eafafd",            "borderColor" : "#1b4096" }

Benutzerdefiniert: 

Navigation

Passen Sie die linke Navigation der 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 Dashboards an.

Standard: 

"filterBar" : { "filterButton" : { "backgroundColor" : "#F4F5FB" }, "backgroundColor" : "#F4F5FB",             "borderColor" : "#1b4096" }

Benutzerdefiniert: 

Dashboard-Bereiche

Passen Sie den Titel und die Beschreibung der Abschnitte in Ihren Dashboards an.

Standard:  

"section" : { "title" : { "color" : "#3b6ba1", "lineColor" : "#85abd6" }, "description" : { "color" : "#85abd6" } }

Benutzerdefiniert: 

Inhaltsbereich

EigenschaftBeschreibungBeispiel-Code
KPIs

Passen Sie das Erscheinungsbild von KPIs in 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 in Dashboards

Passen Sie die zu Dashboards hinzugefügten Betrachtungen an.

Wenn Ihr Dashboard Überschriftenbetrachtungen enthält, belassen Sie den Rahmenradius bei 4 Pixel oder weniger, um Darstellungsprobleme in exportierten PDF-Dateien zu vermeiden.

Standard: 

 "widget": { "title": { "color": "#101010", "textAlign": "center" }, "borderColor": "#F4F5FB", "borderRadius": "6", "borderWidth": "2", "dropShadow": true, "backgroundColor": "#F4F5FB" }

Benutzerdefiniert: 

Hintergrundfarbe

Farbe des Dashboard-Hintergrunds.

Standard: 

"backgroundColor" : "#F4F5FB"

Benutzerdefiniert: 

 

 

 

Designbeispiele