Konfigurationsreferenz für Community-Visualisierungen

Die Visualisierungskonfiguration definiert die für eine Visualisierung erforderlichen Daten- und Stilattribute.

Die Konfiguration wird als JSON-Datei mit folgender Struktur erwartet:

{
  "data": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(DataElement),
      "id": string,
      "label": string,
      "options": object(DataElementOptions)
    }]
  }],
  "style": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(StyleElement),
      "id": string,
      "label": string,
      "defaultValue": string | object
    }]
  }],
  "interactions": [{
    "id": string,
    "supportedActions": array(enum(InteractionType))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}
Feldname Typ Beschreibung
data[] Array(object) Die Datenkonfiguration der Visualisierung. Diese Konfiguration wirkt sich auf den Bereich Daten des Eigenschaftenbereichs aus.
data[].id string Die ID des Datenabschnitts. Dies muss ein nicht leerer String ohne Leerzeichen sein.
data[].label string Das Label für den Datenabschnitt.
data[].elements[] string Die zu rendernden Datenelemente.
data[].elements[].type string-Enum(DataElement) Der zu rendernde Datenelementtyp.
data[].elements[].id string Die ID des Datenelements. Dies muss ein nicht leerer String ohne Leerzeichen sein.
data[].elements[].label string Das Label der Kurzinfo für das Datenelement.
data[].elements[].options object(DataElementOptions) Die Datenoptionen für das Element. Dies hängt vom Typ des Datenelements ab.
style[] Array(object) Die für die Visualisierung erforderliche Stilkonfiguration. Diese Konfiguration wirkt sich auf den Bereich Stil des Eigenschaftenbereichs aus. Jedes Objekt im Array stellt ein Stilelement dar, das gerendert werden soll. Die Reihenfolge der Elemente bestimmt die Reihenfolge, in der sie gerendert werden.
style[].id string Die ID des Stilabschnitts. Dies muss ein nicht leerer String ohne Leerzeichen sein.
style[].label string Das Label für den Stilbereich.
style[].elements Array(object) Die Stilelemente, die gerendert werden sollen.
style[].elements[].id string ID des Stilelements Dies muss ein nicht leerer String ohne Leerzeichen sein.
style[].elements[].type string-Enum(StyleElement) Der Stilelementtyp. z.B. Schriftartauswahl.
style[].elements[].label string Die Kurzinfo oder das Label für das Stilelement. Dies ist der Labeltext für ein Kästchenelement und der Kurzinfotext für andere Elementtypen.
style[].elements[].options Array(object) Der options für das Element. Gilt nur für die Stilelementtypen SELECT_SINGLE und SELECT_RADIO.
style[].elements[].defaultValue string OR object Der Standardwert für das Stilelement. Ungültige Werte werden ignoriert.*
interactions[] Array(object) Die Interaktionskonfiguration der Visualisierung. Anhand dieser Konfiguration wird festgelegt, ob sie als Filter verwendet werden kann.
interactions[].id string ID des Interaktionselements Dies muss ein nicht leerer String ohne Leerzeichen sein.
interactions[].supportedActions Array (enum(InteractionType) Unterstützte mögliche Interaktionen
features object Die Funktionen, die Sie in Ihrer Visualisierung aktivieren oder deaktivieren möchten.
features.enableComparisonDateRange boolean Aktivieren Sie Vergleichszeiträume. Wenn kein Wert angegeben ist, wird standardmäßig false verwendet.

*defaultValue ist ein String für alles außer der Farbauswahl. Bei Farben sollte defaultValue ein Objekt mit folgendem Format sein:

{
    color: `string`
}

DataElement

Folgende Werte sind möglich:

Enum-Wert Beschreibung
MESSWERT Rendert ein Messwertfeldelement.
DIMENSION Rendert ein Dimensionsfeldelement.
MAX_RESULTS Definiert die maximale Anzahl von Datenzeilen, die von dieser Visualisierung angefordert werden können

DataElement-Optionen

Folgende Werte sind möglich:

Enum-Wert Optionstyp Verfügbare Optionen
MESSWERT Objekt max: number: die maximale Anzahl von Messwerten
min: number: die Mindestanzahl der erforderlichen Messwerte
DIMENSION Objekt max: number – die maximale Anzahl unterstützter Dimensionen
min: number – die Mindestanzahl der erforderlichen Dimensionen
supportedTypes: die Liste der unterstützten Typen. supportedTypes kann TIME, GEO oder DEFAULT enthalten
MAX_RESULTS Objekt max: number – die maximale Anzahl von Zeilen, die für die Visualisierung angefordert werden können. Standardwert: 2.500

StyleElement

Folgende Werte für Stilelemente sind möglich:

Enum-Wert Beschreibung Datentyp „defaultValue“ (Konfiguration) Datentyp „value“ (Nachricht) Standardwert
FONT_COLOR Rendert die Auswahl für die Schriftfarbe. Gültige Werte sind Hex-Farbcodes. STRING | OBJECT<Color> STRING | OBJECT<Color> Thematisch festgelegt.
FONT_SIZE Rendert die Auswahl für die Schriftgröße. Gültige Werte sind die folgenden Pixel: 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 30, 32, 36, 40, 44, 48, 60, 72, 84, 96. NUMBER NUMBER 12
FONT_FAMILY Rendert die Schriftfamilienauswahl. Gültige Werte sind die folgenden Schriftarten: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Demnächst verfügbar, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Permanent Flower, Lato, Lora, Montserrat, Sans Ossi, Lora, Montserrat, Oleo Script, Open, Montserrat, Oleo Script, Open STRING STRING Thematisch festgelegt.
KÄSTCHEN Rendert ein Kästchen. BOOLEAN BOOLEAN false
TEXTINPUT Rendert ein Texteingabefeld. STRING STRING ""
TEXTAREA Rendert einen großen Texteingabebereich. STRING STRING ""
SELECT_SINGLE Rendert ein Drop-down-Menü mit vordefinierten Werten. STRING (für defaultValue, options.label und options.value) STRING nicht definiert
SELECT_RADIO Rendert eine Optionsfelder mit vordefinierten Werten. STRING (für defaultValue, options.label und options.value) STRING nicht definiert
FILL_COLOR Rendert eine Auswahl für die Füllfarbe. Gültige Werte sind Hex-Farbcodes. STRING | OBJECT<Color> OBJECT<Color> Thematisch festgelegt.
BORDER_COLOR Rendert eine Auswahl für Rahmenfarbe. Gültige Werte sind Hex-Farbcodes. STRING | OBJECT<Color> OBJECT<Color> Thematisch festgelegt.
AXIS_COLOR Rendert eine Farbauswahl für die Achse. Gültige Werte sind Hex-Farbcodes. STRING | OBJECT<Color> OBJECT<Color> Thematisch festgelegt.
GRID_COLOR Rendert eine Rasterfarbenauswahl. Gültige Werte sind Hex-Farbcodes. STRING | OBJECT<Color> OBJECT<Color> Thematisch festgelegt.
OPACITY Gibt einen Deckkraftselektor mit der Einheit % wieder. Gültige Werte sind 0 bis 1 in Schritten von 0, 1. NUMBER NUMBER 1
LINE_WEIGHT Rendert eine Auswahl für die Linienstärke. Gültige Werte sind 0 bis 5. „0“ wird im Drop-down-Menü als „Keine“ gerendert. NUMBER NUMBER
LINE_STYLE Rendert eine Auswahl für den Linienstil. Zulässige Standardwerte: solid, dashed, dotted und double. STRING STRING "solid"
BORDER_RADIUS Gibt eine Rahmenradiusauswahl wieder. Gültige Werte: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 NUMBER NUMBER Thematisch festgelegt.
INTERVAL Rendert einen Intervallselektor. Werte sind Ganzzahlen. NUMBER NUMBER 0

Mit Stilelementen werden die Symbole konfiguriert, die auf dem Tab Style des Eigenschaftenbereichs angezeigt werden.

Optionen für Stilelemente

Einige Stilelemente unterstützen Optionen

options: array(options)
Enum-Wert Optionsobjekt
SELECT_SINGLE 
        {
            label: `string`,
            value: `string`
        }
SELECT_RADIO 
        {
            label: `string`,
            value: `string`
        }
INTERVAL 
        {
            max: `number`,
            min: `number`
        }

Datentypen

Objekt<Farbe>

{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}

STRING<Farbe>

Ein String-Wert, der einen Hex-Farbcode enthält.

Beispiel

"color": "#0000ff"

NUMBER<Opacity>

Ein Zahlenwert von 0 bis 1 in Schritten von 0,10

Beispiel

"opacity": 0.2

InteractionType

InteractionTypes konfigurieren die Interaktionsoptionen, die im Data-Stil des Steuerfelds „Property“ verfügbar sind. Derzeit wird nur "FILTER" unterstützt.

Enum-Wert Beschreibung
"FILTER" Ermöglicht Benutzern, Visualisierung als Filter zu verwenden.

Beispielkonfiguration

{
  "data": [{
    "id": "concepts",
    "label": "concepts",
    "elements": [
      {
        "id": "dimension1",
        "label": "first dimension",
        "type": "DIMENSION",
        "options": {
          "min": 1,
          "max": 3,
          "supportedTypes": ["DEFAULT"]
        }
      },
      {
        "id": "metric",
        "label": "metric",
        "type": "METRIC",
        "options": {
          "min": 1,
          "max": 3
        }
      }
    ]
  }],
  "style": [
    {
      "id": "colors",
      "label": "Highlight Colors",
      "elements": [
        {
          "id": "accentColor",
          "label": "Accent Color",
          "type": "SELECT_SINGLE",
          "defaultValue": "rain",
          "options": [
            {
              "label": "Summer",
              "value": "summer"
            },
            {
              "label": "Fall",
              "value": "fall"
            }
          ]
        },
        {
          "id": "reverseColor",
          "label": "Show reverse color",
          "defaultValue": false,
          "type": "CHECKBOX"
        },
        {
          "id": "fillColor",
          "label": "Fill Color",
          "defaultValue": {
            "color": "#0000ff"
          },
          "type": "FILL_COLOR"
        },
        {
          "id": "textOpacity",
          "label": "Text Opacity",
          "defaultValue": 0.2,
          "type": "OPACITY"
        },
        {
          "id": "customText",
          "label": "Custom Text",
          "defaultValue": "0.2",
          "type": "TEXTINPUT"
        }
      ]
    },
    {
      "id": "text",
      "label": "Highlight Text",
      "elements": [
        {
          "id": "textFontSize",
          "label": "Font size",
          "defaultValue": 10,
          "type": "FONT_SIZE"
        },
        {
          "id": "font",
          "label": "Font family",
          "defaultValue": "Arial",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ],
  "features": {
    "enableComparisonDateRange": false
  }
}