Ta strona została przetłumaczona przez Cloud Translation API.

Dokumentacja konfiguracji wizualizacji utworzonej przez społeczność

Konfiguracja wizualizacji określa atrybuty danych i stylu wymagane przez wizualizację.

Konfiguracja jest oczekiwana 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 właściwości.
`data[].id`	`string`	Identyfikator sekcji danych. To nie może być pusty ciąg znaków bez spacji.
`data[].label`	`string`	Etykieta sekcji danych.
`data[].elements[]`	`string`	Elementy danych do wyrenderowania.
`data[].elements[].type`	Wyliczenie `string`(DataElement)	Typ elementu danych do wyrenderowania.
`data[].elements[].id`	`string`	Identyfikator elementu danych. To nie może 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 wyrenderowania. Kolejność elementów określa kolejność ich renderowania.
`style[].id`	`string`	Identyfikator sekcji stylu. To nie może być pusty ciąg znaków bez spacji.
`style[].label`	`string`	Etykieta sekcji stylu.
`style[].elements`	`Array(object)`	Elementy stylu do wyrenderowania.
`style[].elements[].id`	`string`	Identyfikator elementu stylu. To nie może być pusty ciąg znaków bez spacji.
`style[].elements[].type`	Wyliczenie `string`(StyleElement)	Typ elementu stylu. Na przykład selektor czcionki.
`style[].elements[].label`	`string`	Etykietka lub etykieta elementu stylu. To tekst etykiety dla elementu pola wyboru i tekst etykietki dla innych typów elementów.
`style[].elements[].options`	`Array(object)`	Wartość `options` elementu. Dotyczy to tylko elementów stylu `SELECT_SINGLE` i `SELECT_RADIO`.
`style[].elements[].defaultValue`	`string OR object`	Wartość domyślna elementu stylu. Nieprawidłowe wartości będą ignorowane.*
`interactions[]`	`Array(object)`	Konfiguracja interakcji na wizualizacji. Ta konfiguracja określa, czy może ona działać jako filtr.
`interactions[].id`	`string`	Identyfikator elementu interakcji. To nie może 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 porównywalne zakresy dat. Jeśli nie określono inaczej, domyślnie jest to `false`.

*defaultValue to ciąg znaków do wszystkiego oprócz selektorów kolorów. W przypadku kolorów defaultValue powinna być obiektem formatu:

{
    color: `string`
}

DataElement

Możliwe wartości elementów danych:

Wartość wyliczeniowa	Opis
DANE	Renderuje element pola danych.
WYMIAR	Renderuje element pola wymiaru.
MAX_RESULTS	Określa maksymalną liczbę wierszy danych, których może zażądać ta wersja

Opcje elementu DataElement

Możliwe wartości elementów danych:

Wartość wyliczeniowa	Typ opcji	Dostępne opcje
DANE	Obiekt	max: liczba – maksymalna liczba wskaźników 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 supportedTypes: lista obsługiwanych typów. `supportedTypes` może obejmować `TIME`, `GEO` lub `DEFAULT`
MAX_RESULTS	Obiekt	max: liczba – maksymalna liczba wierszy, o które może poprosić wizualizacja. Domyślnie: 2500

StyleElement

Możliwe wartości elementów stylu:

Wartość wyliczeniowa	Opis	`defaultValue` typ danych (konfiguracja)	`value` typ danych (wiadomość)	Wartość domyślna
FONT_COLOR	Renderuje selektor koloru czcionki. Prawidłowe wartości to szesnastkowe kody kolorów.	`STRING` \| `OBJECT<Color>`	`STRING` \| `OBJECT<Color>`	Określane na podstawie motywu.
FONT_SIZE	Wyświetla selektor rozmiaru czcionki. Prawidłowe wartości to: 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. Prawidłowe wartości to te czcionki: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Coming wkrótce, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Indie Flower, Lato, Lora, Montserrat, Oleo Script, Lora, Montserrat, Oleo Script.	`STRING`	`STRING`	Określane na podstawie motywu.
POZIOM KONTROLNY	Renderuje pole wyboru.	`BOOLEAN`	`BOOLEAN`	`false`
WPROWADZENIE TEKSTOWE	Renderuje pole tekstowe.	`STRING`	`STRING`	`""`
OBSZAR TEKSTOWY	Renderuje duży obszar wprowadzania tekstu.	`STRING`	`STRING`	`""`
SELECT_SINGLE	Renderuje menu ze wstępnie zdefiniowanymi wartościami.	`STRING` (wartości domyślne oraz opcje.label i options.value)	`STRING`	nie zdefiniowano
SELECT_RADIO	Renderuje selektor opcji ze zdefiniowanymi wstępnie wartościami.	`STRING` (wartości domyślne oraz opcje.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>`	Określane na podstawie motywu.
BORDER_COLOR	Renderuje selektor koloru obramowania. Prawidłowe wartości to szesnastkowe kody kolorów.	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	Określane na podstawie motywu.
AXIS_COLOR	Renderuje selektor koloru osi. Prawidłowe wartości to szesnastkowe kody kolorów.	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	Określane na podstawie motywu.
GRID_COLOR	Renderuje selektor koloru siatki. Prawidłowe wartości to szesnastkowe kody kolorów.	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	Określane na podstawie motywu.
OPACITY	Renderuje selektor przezroczystości, jednostka: %. Prawidłowe wartości mieszczą się w zakresie od 0 do 1 w przyrostach co 0,1	`NUMBER`	`NUMBER`	`1`
LINE_WEIGHT	Renderuje selektor szerokości linii. Prawidłowe wartości to od 0 do 5. Wartość 0 wyświetla się w menu jako Brak.	`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`	Określane na podstawie motywu.
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 w panelu właściwości.

Opcje elementu stylu

Opcje obsługi niektórych elementów stylu

options: array(options)

Wartość wyliczeniowa	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<Kolor>

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

Przykład

"color": "#0000ff"

NUMBER<Opacity>

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

Przykład

"opacity": 0.2

InteractionType

Moduł InteractionTypes konfiguruje opcje interakcji dostępne w stylu Data panelu właściwości. Obecnie obsługiwana jest tylko opcja "FILTER".

Wartość wyliczeniowa	Opis
`"FILTER"`	Pozwala użytkownikom używać 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
  }
}