Topluluk Görselleştirme Yapılandırma Referansı

Görselleştirme yapılandırması, bir görselleştirmeye çok yardımcı olur.

Yapılandırmanın aşağıdaki yapıya sahip bir JSON dosyası olarak olması beklenir:

{
  "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
  }
}
Alan adı Tür Açıklama
data[] Array(object) Görselleştirmenin veri yapılandırması. Bu yapılandırma, özellik panelinin Veri bölmesini etkiler.
data[].id string Veri bölümünün kimliği. Bu, boşluk içermeyen ve boş olmayan bir dize olmalıdır.
data[].label string Veri bölümünün etiketi.
data[].elements[] string Oluşturulacak veri öğeleri.
data[].elements[].type string sıralaması(DataElement) Oluşturulacak veri öğesi türü.
data[].elements[].id string Veri öğesinin kimliği. Bu, boşluk içermeyen ve boş olmayan bir dize olmalıdır.
data[].elements[].label string Veri öğesinin ipucu etiketi.
data[].elements[].options object(DataElementOptions) Öğeyle ilgili veri seçenekleridir. Bu durum Veri Öğesi Türüne bağlıdır.
style[] Array(object) Görselleştirme için gereken stil yapılandırması. Bu yapılandırma, özellikler panelinin Stil bölmesini etkiler. Dizideki her nesne, oluşturulacak bir stil öğesini temsil eder. Öğelerin sırası, oluşturuldukları sırayı belirler.
style[].id string Stil bölümünün kimliği. Bu, boşluk içermeyen ve boş olmayan bir dize olmalıdır.
style[].label string Stil bölümü etiketi.
style[].elements Array(object) Oluşturulacak stil öğeleri.
style[].elements[].id string Stil öğesinin kimliği. Bu, boşluk içermeyen ve boş olmayan bir dize olmalıdır.
style[].elements[].type string enum(StyleElement) Stil öğesinin türü. Ör. yazı tipi seçiciyi kullanın.
style[].elements[].label string Stil öğesinin ipucu veya etiketi. Bu, bir onay kutusu öğesi için etiket metni ve diğer öğe türleri için ipucu metnidir.
style[].elements[].options Array(object) Öğenin options değeridir. Bu yalnızca SELECT_SINGLE ve SELECT_RADIO Stil Öğesi türleri için geçerlidir.
style[].elements[].defaultValue string OR object Stil öğesi için varsayılan değerdir. Geçersiz değerler yoksayılır.*
interactions[] Array(object) Görselleştirmenin etkileşim yapılandırması. Bu yapılandırma, filtre işlevi görüp görmeyeceğini belirler.
interactions[].id string Etkileşim öğesinin kimliği. Bu, boşluk içermeyen ve boş olmayan bir dize olmalıdır.
interactions[].supportedActions Array (enum(InteractionType) Desteklenen olası etkileşimler
features object Görselleştirmenizde etkinleştirmek veya devre dışı bırakmak istediğiniz özellikler.
features.enableComparisonDateRange boolean Tarih aralıklarını karşılaştırma özelliğini etkinleştirin. Belirtilmezse varsayılan olarak false değerine ayarlanır.

*defaultValue, renk seçiciler hariç her şey için kullanılan bir dizedir. Örneğin, renklerini kullanıyorsanız defaultValue şu biçimde bir nesne olmalıdır:

{
    color: `string`
}

DataElement

Veri öğelerinin değerleri aşağıdakilerden biri olabilir:

Enum değeri Açıklama
METRİK Metrik alanı öğesi oluşturur.
DIMENSION Bir boyut alanı öğesi oluşturur.
MAX_RESULTS Bu görselleştirme tarafından istenebilecek maksimum veri satırlarını tanımlar

DataElement Seçenekleri

Veri öğelerinin değerleri aşağıdakilerden biri olabilir:

Enum değeri Seçenek Türü Seçenekler mevcut
METRİK Nesne max: sayı - maksimum metrik sayısı
min: sayı - gerekli minimum metrik sayısı
DIMENSION Nesne max: sayı - desteklenen maksimum boyut sayısı.
min: sayı - gerekli minimum boyut sayısı
supportedTypes: Desteklenen türlerin listesi. supportedTypes; TIME, GEO veya DEFAULT içerebilir
MAX_RESULTS Nesne maks: sayı - görselleştirmenin isteyebileceği maksimum satır sayısı. Varsayılan: 2500

StyleElement

Stil öğelerinin değerleri aşağıdakilerden biri olabilir:

Enum değeri Açıklama defaultValue Veri Türü (Yapılandırma) value Veri Türü (Mesaj) Varsayılan Değer
FONT_COLOR Yazı tipi rengi seçiciyi oluşturur. Geçerli değerler onaltılık renk kodlarıdır. STRING | OBJECT<Color> STRING | OBJECT<Color> Temaya göre belirlenir.
FONT_SIZE Yazı tipi boyutu seçiciyi oluşturur. Geçerli değerler şu piksellerdir: 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 Yazı tipi ailesi seçiciyi oluşturur. STRING STRING Temaya göre belirlenir.
CHECKBOX Onay kutusu oluşturur. BOOLEAN BOOLEAN false
TEXTINPUT Bir metin giriş kutusu oluşturur. STRING STRING ""
TEXTAREA Geniş metin giriş alanı oluşturur. STRING STRING ""
SELECT_SINGLE Önceden tanımlanmış değerleri içeren bir açılır liste oluşturur. STRING (defaultValue, options.label ve options.value için) STRING tanımsız
SELECT_RADIO Önceden tanımlanmış değerlerle bir radyo seçici oluşturur. STRING (defaultValue, options.label ve options.value için) STRING tanımsız
FILL_COLOR Dolgu rengi seçici oluşturur. Geçerli değerler Onaltılık renk kodlarıdır. STRING | OBJECT<Color> OBJECT<Color> Temaya göre belirlenir.
BORDER_COLOR Kenarlık rengi seçici oluşturur. Geçerli değerler Onaltılık renk kodlarıdır. STRING | OBJECT<Color> OBJECT<Color> Temaya göre belirlenir.
AXIS_COLOR Eksen renk seçicisi oluşturur. Geçerli değerler Onaltılık renk kodlarıdır. STRING | OBJECT<Color> OBJECT<Color> Temaya göre belirlenir.
GRID_COLOR Izgara rengi seçicisi oluşturur. Geçerli değerler Onaltılık renk kodlarıdır. STRING | OBJECT<Color> OBJECT<Color> Temaya göre belirlenir.
Şeffaflık Opaklık seçici oluşturur. Birim %. Geçerli değerler, 0,1'lik artışlarla 0 ile 1 arasındadır NUMBER NUMBER 1
LINE_WEIGHT Çizgi kalınlığı seçicisi oluşturur. Geçerli değerler 0 ile 5 arasındadır. 0 değeri, açılır menüde Yok olarak oluşturulur. NUMBER NUMBER
LINE_STYLE Çizgi stili seçici oluşturur. Kabul edilebilir varsayılan değerler: solid, dashed, dotted, double. STRING STRING "solid"
BORDER_RADIUS Bir kenarlık yarıçapı seçici oluşturur. Geçerli değerler: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 NUMBER NUMBER Temaya göre belirlenir.
ARALIK Aralık seçici oluşturur. Değerler tam sayıdır. NUMBER NUMBER 0

Stil öğeleri, Mülkün Style sekmesinde görüntülenen simgeleri yapılandırır Panel.

Stil Öğesi Seçenekleri

Bazı stil öğeleri seçenekleri destekler

options: array(options)
Enum değeri Seçenekler Nesnesi
SELECT_SINGLE 
        {
            label: `string`,
            value: `string`
        }
SELECT_RADIO 
        {
            label: `string`,
            value: `string`
        }
ARALIK 
        {
            max: `number`,
            min: `number`
        }

Veri Türleri

Nesne<Renk>

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

STRING&lt;Color&gt;

Onaltılık renk kodu içeren bir dize değeri.

Örnek

"color": "#0000ff"

NUMBER<Opaklık>

0,10'luk artışlarla 0 ile 1 arasında bir sayı değeri

Örnek

"opacity": 0.2

InteractionType

InteractiveTypes, Data stilinde kullanılabilen etkileşim seçeneklerini yapılandırır tıklayın. Şu anda yalnızca "FILTER" desteklenmektedir.

Enum değeri Açıklama
"FILTER" Kullanıcıların görselleştirmeyi filtre olarak kullanmasına izin verir.

Örnek yapılandırma

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