समुदाय विज़ुअलाइज़ेशन कॉन्फ़िगरेशन संदर्भ

विज़ुअलाइज़ेशन कॉन्फ़िगरेशन उस डेटा और स्टाइल एट्रिब्यूट को तय करता है जो किसी विज्ञापन ग्रुप के लिए ज़रूरी है विज़ुअलाइज़ेशन.

कॉन्फ़िगरेशन को इस स्ट्रक्चर वाली JSON फ़ाइल के तौर पर होना चाहिए:

{
  "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
  }
}
फ़ील्ड का नाम टाइप ब्यौरा
data[] Array(object) विज़ुअलाइज़ेशन का डेटा कॉन्फ़िगरेशन. यह कॉन्फ़िगरेशन, प्रॉपर्टी पैनल के डेटा पैनल पर असर डालता है.
data[].id string डेटा सेक्शन का आईडी. यह ऐसी स्ट्रिंग होनी चाहिए जो खाली न हो. साथ ही, इसमें स्पेस भी न हो.
data[].label string डेटा सेक्शन के लिए लेबल.
data[].elements[] string रेंडर किए जाने वाले डेटा एलिमेंट.
data[].elements[].type string enum(DataElement) रेंडर करने के लिए डेटा एलिमेंट का टाइप.
data[].elements[].id string डेटा एलिमेंट का आईडी. यह ऐसी स्ट्रिंग होनी चाहिए जो खाली न हो. साथ ही, इसमें स्पेस भी न हो.
data[].elements[].label string डेटा एलिमेंट के लिए टूलटिप लेबल.
data[].elements[].options object(DataElementOptions) एलिमेंट के लिए डेटा के विकल्प. यह डेटा एलिमेंट टाइप पर निर्भर करता है.
style[] Array(object) विज़ुअलाइज़ेशन के लिए ज़रूरी स्टाइल कॉन्फ़िगरेशन. यह कॉन्फ़िगरेशन, प्रॉपर्टी पैनल के स्टाइल पैनल पर असर डालता है. कलेक्शन का हर ऑब्जेक्ट, रेंडर करने के लिए एक स्टाइल एलिमेंट दिखाता है. एलिमेंट के क्रम से यह तय होता है कि उन्हें किस क्रम में रेंडर किया जाएगा.
style[].id string स्टाइल सेक्शन का आईडी. यह ऐसी स्ट्रिंग होनी चाहिए जो खाली न हो. साथ ही, इसमें स्पेस भी न हो.
style[].label string स्टाइल सेक्शन के लिए लेबल.
style[].elements Array(object) रेंडर किए जाने वाले स्टाइल एलिमेंट.
style[].elements[].id string स्टाइल एलिमेंट का आईडी. यह ऐसी स्ट्रिंग होनी चाहिए जो खाली न हो. साथ ही, इसमें स्पेस भी न हो.
style[].elements[].type string enum(StyleElement) स्टाइल एलिमेंट का टाइप. उदाहरण के लिए, फ़ॉन्ट सिलेक्टर.
style[].elements[].label string स्टाइल एलिमेंट के लिए टूलटिप या लेबल. यह चेकबॉक्स एलिमेंट के लिए लेबल टेक्स्ट और अन्य तरह के एलिमेंट के लिए टूलटिप टेक्स्ट है.
style[].elements[].options Array(object) एलिमेंट के लिए options. यह सिर्फ़ SELECT_SINGLE और SELECT_RADIO स्टाइल एलिमेंट टाइप के लिए मान्य है.
style[].elements[].defaultValue string OR object स्टाइल एलिमेंट के लिए डिफ़ॉल्ट वैल्यू. अमान्य वैल्यू को अनदेखा कर दिया जाएगा.*
interactions[] Array(object) विज़ुअलाइज़ेशन का इंटरैक्शन कॉन्फ़िगरेशन. इस कॉन्फ़िगरेशन से तय होता है कि यह फ़िल्टर के तौर पर काम कर सकता है या नहीं.
interactions[].id string इंटरैक्शन एलिमेंट का आईडी. यह ऐसी स्ट्रिंग होनी चाहिए जो खाली न हो. साथ ही, इसमें स्पेस भी न हो.
interactions[].supportedActions Array (enum(InteractionType) किस तरह के इंटरैक्शन किए जा सकते हैं
features object वे सुविधाएं जिन्हें आपको अपने विज़ुअलाइज़ेशन में चालू या बंद करना है.
features.enableComparisonDateRange boolean तुलना के लिए तारीख की सीमाएं चालू करें. जानकारी नहीं होने पर, डिफ़ॉल्ट तौर पर false पर सेट होती है.

*defaultValue, रंग चुनने वाले टूल को छोड़कर बाकी सभी के लिए एक स्ट्रिंग है. इसके लिए रंग, defaultValue इस फ़ॉर्मैट का ऑब्जेक्ट होना चाहिए:

{
    color: `string`
}

DataElement

डेटा एलिमेंट की वैल्यू, इनमें से एक हो सकती है:

Enum वैल्यू ब्यौरा
मेट्रिक मेट्रिक फ़ील्ड एलिमेंट को रेंडर करता है.
डाइमेंशन डाइमेंशन फ़ील्ड एलिमेंट को रेंडर करता है.
MAX_RESULTS इससे तय होता है कि इस विज़ुअलाइज़ेशन की मदद से डेटा की ज़्यादा से ज़्यादा कितनी लाइनों का अनुरोध किया जा सकता है

डेटाएलिमेंट के विकल्प

डेटा एलिमेंट की वैल्यू, इनमें से एक हो सकती है:

Enum वैल्यू विकल्प का टाइप विकल्प उपलब्ध हैं
मेट्रिक ऑब्जेक्ट अधिकतम: संख्या - मीट्रिक की अधिकतम संख्या
मिनट: संख्या - ज़रूरी मेट्रिक की कम से कम संख्या
डाइमेंशन ऑब्जेक्ट ज़्यादा से ज़्यादा: संख्या - इस्तेमाल किए जा सकने वाले डाइमेंशन की ज़्यादा से ज़्यादा संख्या.
मिनट: संख्या - डाइमेंशन की कम से कम संख्या
पर इस्तेमाल किए जा सकने वाले टाइप: इस्तेमाल किए जा सकने वाले टाइप की सूची. supportedTypes में TIME, GEO या DEFAULT शामिल किए जा सकते हैं
MAX_RESULTS ऑब्जेक्ट अधिकतम: संख्या - विज़ुअलाइज़ेशन के लिए अनुरोध की जा सकने वाली पंक्तियों की ज़्यादा से ज़्यादा संख्या. डिफ़ॉल्ट: 2500

StyleElement

स्टाइल एलिमेंट की वैल्यू, इनमें से एक हो सकती है:

Enum वैल्यू ब्यौरा defaultValue डेटा टाइप (कॉन्फ़िगरेशन) value डेटा टाइप (मैसेज) डिफ़ॉल्ट मान
FONT_COLOR फ़ॉन्ट के रंग को चुनने वाले टूल को रेंडर करता है. मान्य वैल्यू, रंग के हेक्स कोड हैं. STRING | OBJECT<Color> STRING | OBJECT<Color> यह थीम के हिसाब से तय होता है.
FONT_SIZE फ़ॉन्ट के साइज़ को चुनने वाले टूल को रेंडर करता है. मान्य वैल्यू इस तरह के पिक्सल हैं: 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 इससे फ़ॉन्ट फ़ैमिली सिलेक्टर रेंडर होता है. बाद में मान्य मान निम्न हैं निम्न फ़ॉन्ट हैं: निम्न फ़ॉन्ट निम्न हैं: निम्न फ़ॉन्ट: निम्न फ़ॉन्ट निम्न हैं: निम्न फ़ॉन्ट: निम्न फ़ॉन्ट हैं: STRING STRING यह थीम के हिसाब से तय होता है.
CHECKBOX चेकबॉक्स रेंडर करता है. BOOLEAN BOOLEAN false
TEXTINPUT यह टेक्स्ट इनपुट बॉक्स को रेंडर करता है. STRING STRING ""
TEXTAREA टेक्स्ट इनपुट के बड़े हिस्से को रेंडर करता है. STRING STRING ""
SELECT_SINGLE यह पहले से तय वैल्यू वाले ड्रॉपडाउन को रेंडर करता है. STRING (defaultValue और options.label और options.value के लिए) STRING तय नहीं है
SELECT_RADIO पहले से तय वैल्यू वाला रेडियो सिलेक्टर रेंडर करता है. STRING (defaultValue और options.label और options.value के लिए) STRING तय नहीं है
FILL_COLOR भरने वाले रंग को चुनने का टूल रेंडर करता है. मान्य वैल्यू, रंग के हेक्स कोड हैं. STRING | OBJECT<Color> OBJECT<Color> यह थीम के हिसाब से तय होता है.
BORDER_COLOR बॉर्डर रंग चुनने वाले टूल को रेंडर करता है. मान्य वैल्यू, रंग के हेक्स कोड हैं. STRING | OBJECT<Color> OBJECT<Color> यह थीम के हिसाब से तय होता है.
AXIS_COLOR ऐक्सिस के रंग को चुनने वाले टूल को रेंडर करता है. मान्य वैल्यू, रंग के हेक्स कोड हैं. STRING | OBJECT<Color> OBJECT<Color> यह थीम के हिसाब से तय होता है.
GRID_COLOR इससे ग्रिड के रंग को चुनने वाले टूल को रेंडर करता है. मान्य वैल्यू, रंग के हेक्स कोड हैं. STRING | OBJECT<Color> OBJECT<Color> यह थीम के हिसाब से तय होता है.
ओपैसिटी ओपैसिटी सिलेक्टर रेंडर करता है, इकाई % है. मान्य वैल्यू 0 से 1 तक होती हैं. 0.1 की बढ़ोतरी के साथ NUMBER NUMBER 1
LINE_WEIGHT एक लाइन की मोटाई चुनने वाला टूल रेंडर करता है. मान्य वैल्यू 0 से 5 तक हैं. 0 को ड्रॉपडाउन में 'कोई नहीं' के तौर पर दिखाया जाएगा. NUMBER NUMBER
LINE_STYLE यह लाइन स्टाइल पिकर को रेंडर करता है. स्वीकार की जाने वाली डिफ़ॉल्ट वैल्यू: solid, dashed, dotted, double. STRING STRING "solid"
BORDER_RADIUS इससे बॉर्डर का दायरा चुनने वाला टूल रेंडर होता है. मान्य वैल्यू ये हैं: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 NUMBER NUMBER यह थीम के हिसाब से तय होता है.
इंटरवल इंटरवल सिलेक्टर रेंडर करता है. मान पूर्णांक होते हैं. NUMBER NUMBER 0

स्टाइल एलिमेंट, प्रॉपर्टी के Style टैब में दिखाए गए आइकॉन को कॉन्फ़िगर करते हैं पैनल.

स्टाइल एलिमेंट के विकल्प

कुछ स्टाइल एलिमेंट, अलग-अलग विकल्पों के साथ काम करते हैं

options: array(options)
Enum वैल्यू विकल्प ऑब्जेक्ट
SELECT_SINGLE 
        {
            label: `string`,
            value: `string`
        }
SELECT_RADIO 
        {
            label: `string`,
            value: `string`
        }
इंटरवल 
        {
            max: `number`,
            min: `number`
        }

डेटा प्रकार

ऑब्जेक्ट<रंग>

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

STRING&lt;Color&gt;

स्ट्रिंग की वह वैल्यू जिसमें रंग का हेक्स कोड होता है.

उदाहरण

"color": "#0000ff"

NUMBER<अपारदर्शिता>

0 से 1 तक की संख्या के लिए 0.10 की बढ़ोतरी

उदाहरण

"opacity": 0.2

InteractionType

इंटरैक्शन टाइप, Data स्टाइल में उपलब्ध इंटरैक्शन के विकल्पों को कॉन्फ़िगर करता है पर क्लिक करें. फ़िलहाल, सिर्फ़ "FILTER" का इस्तेमाल किया जा सकता है.

Enum वैल्यू ब्यौरा
"FILTER" उपयोगकर्ताओं को फ़िल्टर के तौर पर विज़ुअलाइज़ेशन का इस्तेमाल करने की अनुमति देता है.

कॉन्फ़िगरेशन का उदाहरण

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