Dokumentacja konfiguracji wizualizacji utworzonej przez społeczność

Konfiguracja wizualizacji definiuje dane i atrybuty stylu wymagane przez i wizualizacji.

Oczekiwana jest konfiguracja w postaci pliku JSON o następującej strukturze:

{
  "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
  }
}
Nazwa pola Typ Opis
data[] Array(object) Konfiguracja danych wizualizacji. Ta konfiguracja wpływa na panel Dane w panelu usługi.
data[].id string Identyfikator sekcji danych. Nie może to być pusty ciąg znaków bez spacji.
data[].label string Etykieta sekcji danych.
data[].elements[] string Elementy danych do renderowania.
data[].elements[].type Wyliczenie string(DataElement) Typ elementu danych do renderowania.
data[].elements[].id string Identyfikator elementu danych. Nie może to być pusty ciąg znaków bez spacji.
data[].elements[].label string Etykieta etykietki elementu danych.
data[].elements[].options object(DataElementOptions) Opcje danych elementu. Zależy to od typu elementu danych.
style[] Array(object) Konfiguracja stylu wymagana przez wizualizację. Ta konfiguracja wpływa na panel Styl w panelu właściwości. Każdy obiekt w tablicy reprezentuje element stylu do renderowania. Kolejność elementów określa kolejność ich renderowania.
style[].id string Identyfikator sekcji stylu. Nie może to być pusty ciąg znaków bez spacji.
style[].label string Etykieta sekcji stylu.
style[].elements Array(object) Elementy stylu do renderowania.
style[].elements[].id string Identyfikator elementu stylu. Nie może to być pusty ciąg znaków bez spacji.
style[].elements[].type Wyliczenie string(StyleElement) Typ elementu stylu. Na przykład: selektora czcionki.
style[].elements[].label string Etykietka lub etykieta elementu stylu. To jest tekst etykiety elementu wyboru oraz tekst etykietki dla innych typów elementów.
style[].elements[].options Array(object) options elementu. Dotyczy to wyłącznie typów Element stylu SELECT_SINGLE i SELECT_RADIO.
style[].elements[].defaultValue string OR object Domyślna wartość elementu stylu. Nieprawidłowe wartości będą ignorowane*.
interactions[] Array(object) Konfiguracja interakcji w wizualizacji. Ta konfiguracja określa, czy może działać jako filtr.
interactions[].id string Identyfikator elementu interakcji. Nie może to być pusty ciąg znaków bez spacji.
interactions[].supportedActions Array (wyliczenie(InteractionType) Możliwe obsługiwane interakcje
features object Funkcje, które chcesz włączyć lub wyłączyć w wizualizacji.
features.enableComparisonDateRange boolean Włącz zakresy dat porównania. Jeśli nie określono inaczej, domyślna wartość to false.

*defaultValue to ciąg znaków odnoszący się do wszystkiego oprócz selektorów kolorów. Dla: kolorów, defaultValue powinien być obiektem w formacie:

{
    color: `string`
}

DataElement

Elementy danych mogą mieć jedną z tych wartości:

Wartość typu wyliczeniowego Opis
DANE Renderuje element pola danych.
WYMIAR Renderuje element pola wymiaru.
MAX_RESULTS Określa maksymalną liczbę wierszy danych, których żąda ta wizualizacja

Opcje DataElement

Elementy danych mogą mieć jedną z tych wartości:

Wartość typu wyliczeniowego Typ opcji Dostępne opcje
DANE Obiekt max: liczba – maksymalna liczba danych
min: liczba – minimalna liczba wymaganych wskaźników
WYMIAR Obiekt max: liczba – maksymalna liczba obsługiwanych wymiarów.
min: liczba – minimalna liczba wymaganych wymiarów
supportedType: lista obsługiwanych typów. supportedTypes może obejmować wartości TIME, GEO lub DEFAULT
MAX_RESULTS Obiekt max: liczba – maksymalna liczba wierszy, o jaką może poprosić wizualizacja. Domyślnie: 2500

StyleElement

Elementy stylu mogą mieć jedną z następujących wartości:

Wartość typu wyliczeniowego Opis Typ danych defaultValue (konfiguracja) value typ danych (komunikat) Wartość domyślna
FONT_COLOR Renderuje selektor koloru czcionki. Prawidłowe wartości to szesnastkowe kody kolorów. STRING | OBJECT<Color> STRING | OBJECT<Color> Reklama jest zależna od tematyki.
FONT_SIZE Renderuje selektor rozmiaru czcionki. Prawidłowe wartości to te piksele: 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 Renderuje selektor rodziny czcionek. . STRING STRING Reklama jest zależna od tematyki.
CHECKBOX Renderuje pole wyboru. BOOLEAN BOOLEAN false
TEXTINPUT Renderuje pole do wprowadzania tekstu. STRING STRING ""
TEXTAREA Renderuje duży obszar do wprowadzania tekstu. STRING STRING ""
SELECT_SINGLE Renderuje menu ze wstępnie zdefiniowanymi wartościami. STRING (wartości defaultValue oraz options.label i options.value) STRING nie zdefiniowano
SELECT_RADIO Renderuje selektor opcji ze wstępnie zdefiniowanymi wartościami. STRING (wartości defaultValue oraz options.label i options.value) STRING nie zdefiniowano
FILL_COLOR Renderuje selektor koloru wypełnienia. Prawidłowe wartości to szesnastkowe kody kolorów. STRING | OBJECT<Color> OBJECT<Color> Reklama jest zależna od tematyki.
BORDER_COLOR Renderuje selektor koloru obramowania. Prawidłowe wartości to szesnastkowe kody kolorów. STRING | OBJECT<Color> OBJECT<Color> Reklama jest zależna od tematyki.
AXIS_COLOR Renderuje selektor kolorów osi. Prawidłowe wartości to szesnastkowe kody kolorów. STRING | OBJECT<Color> OBJECT<Color> Reklama jest zależna od tematyki.
GRID_COLOR Renderuje selektor kolorów siatki. Prawidłowe wartości to szesnastkowe kody kolorów. STRING | OBJECT<Color> OBJECT<Color> Reklama jest zależna od tematyki.
PRZEGLĄDANIE Renderuje selektor przezroczystości, jednostka to %. Prawidłowe wartości mieszczą się w zakresie od 0 do 1 z przyrostem co 0,1 NUMBER NUMBER 1
LINE_WEIGHT Renderuje selektor szerokości linii. Prawidłowe wartości to od 0 do 5. Wartość 0 zostanie wyświetlona jako „Brak” w menu. NUMBER NUMBER
LINE_STYLE Renderuje selektor stylu linii. Akceptowane wartości domyślne: solid, dashed, dotted oraz double. STRING STRING "solid"
BORDER_RADIUS Renderuje selektor promienia obramowania. Prawidłowe wartości to: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 NUMBER NUMBER Reklama jest zależna od tematyki.
INTERWAŁ Renderuje selektor interwału. Wartości są liczbami całkowitymi. NUMBER NUMBER 0

Elementy stylu służą do konfigurowania ikon wyświetlanych na karcie Style usługi Panel.

Opcje elementu stylu

Niektóre elementy stylu obsługują opcje

options: array(options)
Wartość typu wyliczeniowego Obiekt opcji
SELECT_SINGLE 
        {
            label: `string`,
            value: `string`
        }
SELECT_RADIO 
        {
            label: `string`,
            value: `string`
        }
INTERWAŁ 
        {
            max: `number`,
            min: `number`
        }

Typy danych

Obiekt<Kolor>

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

STRING&lt;Color&gt;

Wartość ciągu znaków zawierająca szesnastkowy kod koloru.

Przykład

"color": "#0000ff"

LICZBA<przezroczystość>

Wartość liczbowa od 0 do 1 w przyrostach co 0,10.

Przykład

"opacity": 0.2

InteractionType

Obiekty interakcji konfigurują opcje interakcji dostępne w stylu Data. w panelu właściwości. Obecnie obsługiwana jest tylko "FILTER".

Wartość typu wyliczeniowego Opis
"FILTER" Umożliwia użytkownikom korzystanie z wizualizacji jako filtra.

Przykładowa konfiguracja

{
  "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
  }
}