Looker Studio के कम्यूनिटी कॉम्पोनेंट (dscc) की लाइब्रेरी का रेफ़रंस

एपीआई के बारे में खास जानकारी

dscc (Looker Studio कम्यूनिटी कॉम्पोनेंट) एक लाइब्रेरी है. यह Looker Studio के लिए कम्यूनिटी कॉम्पोनेंट बनाने में मदद करती है. सोर्स कोड को GitHub पर देखा जा सकता है.

dscc तीन फ़ंक्शन दिखाता है: getWidth(), getHeight(), और subscribeToData().

`getWidth()`

नाम	पैरामीटर	रिटर्न टाइप	ब्यौरा
getWidth()	कोई नहीं	`number`	इससे iframe की चौड़ाई पिक्सल में मिलती है

`getWidth()` का इस्तेमाल करना

// to get the width of the iframe
var width = dscc.getWidth();

`getHeight()`

नाम	पैरामीटर	रिटर्न टाइप	ब्यौरा
getHeight()	कोई नहीं	`int`	यह iframe की ऊंचाई को पिक्सल में दिखाता है

`getHeight()` का इस्तेमाल करना

// to get the height of the iframe
var height = dscc.getHeight();

sendInteraction()

sendInteraction() फ़ंक्शन, Looker Studio को फ़िल्टर के डेटा के साथ एक मैसेज भेजता है.

पैरामीटर:

नाम	टाइप	ब्यौरा
actionID	`string`	यह स्ट्रिंग, कॉन्फ़िगरेशन में मौजूद actionId से मेल खाती है
इंटरैक्शन	`enum(InteractionType)`	यह कुकी, Looker Studio को इंटरैक्शन के बारे में बताती है
डेटा	`object(InteractionData)`	यह कुकी, इंटरैक्शन के लिए ज़रूरी डेटा उपलब्ध कराती है

`InteractionType`

फ़िलहाल, सिर्फ़ FILTER को InteractionType के तौर पर इस्तेमाल किया जा सकता है.

नाम	टाइप	ब्यौरा
dscc.InteractionType.FILTER	Enum	`FILTER` इंटरैक्शन के बारे में बताता है

`sendInteraction` का इस्तेमाल करना


// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";

// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;

var fieldID = "qt_m9dtntutsb";
var dataValue = "Asia";

// sendInteraction expects data that tells you the concepts and the values of
// those concepts to use in constructing a filter.
var interactionData = {
  "concepts": [fieldId],
  "values": [[dataValue]]
}

dscc.sendInteraction(actionId, FILTER, interactionData);

`interactionData`

var interactionData = {
  "concepts": array(fieldId),
  "values": array(array(dataValue))
}

फ़ील्ड	टाइप	ब्यौरा
कॉन्सेप्ट	`Array`	`fieldIds` की कैटगरी
वैल्यू	`Array<Array>`	डेटा वैल्यू का नेस्ट किया गया ऐरे. हर सब-ऐरे की लंबाई, `concepts` ऐरे की लंबाई के बराबर होनी चाहिए. सबऐरे में मौजूद हर वैल्यू, डाइमेंशन की वैल्यू से मेल खाती है.

नमूना interactionData:

var interactionData = {
  "concepts": ["dim1Id", "dim2Id"],
  "values": [
    ["dim1Val1", "dim2Val1"],
    ["dim1Val2", "dim2Val2"]
    ]
}

ऊपर दिए गए interactionData के साथ dscc.sendInteraction का इस्तेमाल करने का मतलब, यहां दिए गए एसक्यूएल स्टेटमेंट के बराबर है:

SELECT data WHERE
  (dim1 == dim1Val1 AND dim2 == dim2Val1)
  OR
  (dim1 == dim1Val2 AND dim2 == dim2Val2);

clearInteraction()

clearInteraction() फ़ंक्शन, Looker Studio को एक मैसेज भेजता है. इससे, यह विज़ुअलाइज़ेशन पहले से सेट किए गए फ़िल्टर को हटा देता है.

पैरामीटर:

नाम	टाइप	ब्यौरा
actionID	`string`	यह स्ट्रिंग, कॉन्फ़िगरेशन में मौजूद actionId से मेल खाती है
इंटरैक्शन	`enum(InteractionType)`	इस कुकी से Looker Studio को इंटरैक्शन के बारे में पता चलता है

`clearInteraction()` का इस्तेमाल करना


// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";

// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;

dscc.clearInteraction(actionId, FILTER);

`subscribeToData(callback, options)`

subscribeToData() फ़ंक्शन, Looker Studio से मिलने वाले मैसेज की सदस्यता लेता है.

पैरामीटर:

नाम	टाइप	ब्यौरा
callback(data)	`function`	ऐसा फ़ंक्शन जो `subscribeToData` से मिले डेटा का इस्तेमाल करता है.
विकल्प	`object`	यह तय करता है कि डेटा किस फ़ॉर्मैट में दिखेगा

विकल्प ऑब्जेक्ट ऐसा दिखता है:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

रिटर्न वैल्यू:

टाइप	ब्यौरा
`function`	यह कुकी, Looker Studio से मिलने वाले मैसेज की सदस्यता `callback` छोड़ देती है

`subscribeToData()` का इस्तेमाल करना

// define and use a callback
var unsubscribe = dscc.subscribeToData(function(data){
  // console.log the returned data
  console.log(data);
}, {transform: dscc.tableTransform});

// to unsubscribe

unsubscribe();

`data`

यह callback ऑब्जेक्ट है, जिसे dscc.subscribeToData के साथ रजिस्टर किया गया है. यहां दिए गए फ़ील्ड, dscc.objectFormat और dscc.tableFormat के बीच शेयर किए जाते हैं.

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById)
}

फ़ील्ड	टाइप	ब्यौरा
फ़ील्ड्स	`object(fieldsByConfigId)`	एक ऑब्जेक्ट, जिसमें कॉन्फ़िग आईडी के हिसाब से इंडेक्स किए गए फ़ील्ड शामिल होते हैं
शैली	`object(styleById)`	यह एक ऐसा ऑब्जेक्ट होता है जिसमें configId के हिसाब से इंडेक्स किए गए स्टाइल ऑब्जेक्ट होते हैं
इंटरैक्शन	`object(interactionsById)`	ऐसा ऑब्जेक्ट जिसमें इंटरैक्शन ऑब्जेक्ट शामिल हों
थीम	`themeStyle`	themeStyle ऑब्जेक्ट, जिसमें रिपोर्ट के लिए थीम स्टाइलिंग की जानकारी होती है
टेबल	`object(tablesById)`	ऐसा ऑब्जेक्ट जिसमें tableObjects शामिल हैं
dateRanges	`object(dateRangesById)`	ऐसा ऑब्जेक्ट जिसमें dateRanges शामिल हो

fieldsByConfigId

{
   configId: array(field)
}

fieldsByConfigId ऑब्जेक्ट में field ऑब्जेक्ट की ऐसी कलेक्शन होती हैं जिन्हें विज़ुअलाइज़ेशन कॉन्फ़िगरेशन में तय किए गए "id" के हिसाब से इंडेक्स किया जाता है. इस ऑब्जेक्ट में, कॉन्फ़िगरेशन में तय किए गए हर dataField के लिए एक एंट्री होती है.

फ़ील्ड	टाइप	ब्यौरा
configId	`Array<field>`	dataField से जुड़े फ़ील्ड की एक सरणी

फ़ील्ड

{
  id: fieldId,
  name: string,
  description: string,
  type: fieldType,
  concept: enum(conceptType)
}

field ऑब्जेक्ट, प्रॉपर्टी पैनल में उपयोगकर्ता के चुने गए फ़ील्ड के बारे में जानकारी देता है.

फ़ील्ड	टाइप	ब्यौरा
आईडी	`string`	फ़ील्ड के लिए, Looker Studio का जनरेट किया गया आईडी
नाम	`string`	फ़ील्ड का ऐसा नाम जिसे कोई भी व्यक्ति आसानी से पढ़ सके
ब्यौरा	`string`	फ़ील्ड की जानकारी
टाइप	`enum(fieldType)`	फ़ील्ड का semanticType
सिद्धान्त	`enum(conceptType)`	फ़ील्ड का conceptType

styleById

{
   configId: styleValue
}

styleById ऑब्जेक्ट, स्टाइल की जानकारी देता है. इसे विज़ुअलाइज़ेशन कॉन्फ़िगरेशन में तय किए गए "id" के हिसाब से इंडेक्स किया जाता है.

फ़ील्ड	टाइप	ब्यौरा
configId	`styleValue`	यह एक ऐसा ऑब्जेक्ट है जिसमें स्टाइल की वैल्यू और कॉन्फ़िगरेशन में तय की गई स्टाइल की डिफ़ॉल्ट वैल्यू शामिल होती है

styleValue

{
  value: string | object | bool | number,
  defaultValue: string | object | bool | number
}

styleValue ऑब्जेक्ट, उपयोगकर्ता की चुनी गई स्टाइल वैल्यू और कॉन्फ़िगरेशन में तय की गई डिफ़ॉल्ट वैल्यू, दोनों उपलब्ध कराता है. value और defaultValue का टाइप, स्टाइल एलिमेंट पर निर्भर करता है.

फ़ील्ड	टाइप	ब्यौरा
मान	`string OR object OR bool OR number`	स्टाइल एलिमेंट की वैल्यू, जिसे प्रॉपर्टी पैनल में उपयोगकर्ता के चुने गए विकल्प से दिखाया जाता है
defaultValue	`string OR object OR bool OR number`	विज़ुअलाइज़ेशन कॉन्फ़िगरेशन में तय किए गए स्टाइल एलिमेंट की डिफ़ॉल्ट वैल्यू

interactionsById

{

}

interactionsById ऑब्जेक्ट, इंटरैक्शन का डेटा उपलब्ध कराता है. इसे interactionId विज़ुअलाइज़ेशन कॉन्फ़िगरेशन के हिसाब से इंडेक्स किया जाता है.

इंडेक्स	टाइप	ब्यौरा
configId	`interaction`	ऐसा ऑब्जेक्ट जिसमें किसी इंटरैक्शन से जुड़ा डेटा मौजूद होता है

interactionField

{
  value: object(interactionValue),
  supportedActions: array(InteractionType)
}

interactionField ऑब्जेक्ट में, कॉन्फ़िगरेशन में तय की गई supportedActions का कलेक्शन होता है. साथ ही, इसमें इंटरैक्शन के लिए उपयोगकर्ता की चुनी गई वैल्यू भी होती हैं.

फ़ील्ड	टाइप	ब्यौरा
मान	`string OR object OR bool OR number`	स्टाइल एलिमेंट की वैल्यू, जिसे प्रॉपर्टी पैनल में उपयोगकर्ता के चुने गए विकल्प से दिखाया जाता है
supportedActions	`Array<InteractionType>`	इस इंटरैक्शन के लिए उपलब्ध कार्रवाइयां, जैसा कि कॉन्फ़िगरेशन में तय किया गया है

interactionValue

interactionValue ऑब्जेक्ट, इंटरैक्शन टाइप के लिए उपयोगकर्ता की चुनी गई वैल्यू देता है. अगर data कुंजी मौजूद है, तो InteractionData ऑब्जेक्ट, फ़िल्टर की मौजूदा स्थिति को दिखाता है. अगर data बटन मौजूद नहीं है, तो इसका मतलब है कि विज़ुअलाइज़ेशन को फ़िलहाल फ़िल्टर के तौर पर कॉन्फ़िगर नहीं किया गया है.

{
  type: enum(InteractionType)
  data: object(interactionData) | None
}

फ़ील्ड	टाइप	ब्यौरा
टाइप	`enum(InteractionType)`	उपयोगकर्ता ने InteractionType चुना है
डेटा	`object(InteractionData)`	फ़िल्टर की मौजूदा स्थिति से जुड़ा डेटा. अगर फ़िल्टर को अभी हटाया गया है, तो यह कुंजी मौजूद नहीं होती.

थीम

{
  fillColor: {
    color: string,
    opacity: number
  },
  fontColor: {
    color: string,
    opacity: number
  },
  accentFillColor: {
    color: string,
    opacity: number
  },
  accentFontColor: {
    color: string,
    opacity: number
  },
  fontFamily: string,
  accentFontFamily: string,
  increaseColor: {
    color: string,
    opacity: number
  },
  decreaseColor: {
    color: string,
    opacity: number
  },
  gridColor: {
    color: string,
    opacity: number
  },
  seriesColor: [
    {
      color: string,
      opacity: number
    }
  ]
}

themeStyle ऑब्जेक्ट, विज़ुअलाइज़ेशन को रिपोर्ट थीम की जानकारी देता है.

फ़ील्ड	टाइप	ब्यौरा
fillColor	`object`	`{color: string, opacity: number}` फ़ॉर्मैट का ऑब्जेक्ट
fontColor	`object`	`{color: string, opacity: number}` फ़ॉर्मैट का ऑब्जेक्ट
accentFillColor	`object`	`{color: string, opacity: number}` फ़ॉर्मैट का ऑब्जेक्ट
accentFontColor	`object`	`{color: string, opacity: number}` फ़ॉर्मैट का ऑब्जेक्ट
fontFamily	`string`	फ़ॉन्ट फ़ैमिली के बारे में बताने वाली स्ट्रिंग
accentFontFamily	`string`	ऐक्सेंट फ़ॉन्ट फ़ैमिली के बारे में बताने वाली स्ट्रिंग
increaseColor	`object`	`{color: string, opacity: number}` फ़ॉर्मैट का ऑब्जेक्ट
decreaseColor	`object`	`{color: string, opacity: number}` फ़ॉर्मैट का ऑब्जेक्ट
gridColor	`object`	`{color: string, opacity: number}` फ़ॉर्मैट का ऑब्जेक्ट
seriesColor	`Array<object>`	`{color: string, opacity: number}` फ़ॉर्मैट वाले ऑब्जेक्ट का कलेक्शन

tablesById

{
  "DEFAULT": object(tableObject),
  "COMPARISON": object(tableObject) | undefined
}

tableObject, हर लाइन के लिए हेडिंग और डेटा की जानकारी देता है. "DEFAULT" हमेशा डेटा दिखाता है. वहीं, "COMPARISON" सिर्फ़ तब दिखता है, जब उपयोगकर्ता तुलना वाली लाइनों के साथ डेटा कॉन्फ़िगर करता है.

dscc.tableFormat और dscc.objectFormat के बीच सिर्फ़ tableObject का फ़ॉर्मैट अलग होता है.

फ़ील्ड	टाइप	ब्यौरा
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	`tableObject`, उस डेटा से जुड़ा होता है जिसे कोई उपयोगकर्ता विज़ुअलाइज़ेशन में जोड़ता है
"COMPARISON"	`object(tableObject) OR Array<objectRow>`	अगर लागू हो, तो तारीखों की तुलना करने वाले डेटा से जुड़ा `tableObject`

dateRangesById

{
  "DEFAULT": object(dateRange),
  "COMPARISON": object(dateRange)
}

dateRangesById ऑब्जेक्ट, डिफ़ॉल्ट और तुलना के लिए तारीख की सीमाओं के बारे में जानकारी देता है. अगर तारीख की कोई सीमा नहीं है, तो ऑब्जेक्ट खाली होगा. DEFAULT और COMPARISON सिर्फ़ तब भरे जाएंगे, जब उपयोगकर्ता ने तारीख की रेंज कॉन्फ़िगर की हों. तारीख की सीमाओं में मौजूद डेटा, tablesById में तय किए गए डिफ़ॉल्ट और तुलना वाले डेटा से जुड़ा होता है.

फ़ील्ड	टाइप	ब्यौरा
"DEFAULT"	`object(dateRange)`	अगर लागू हो, तो डिफ़ॉल्ट तारीख की सीमा से जुड़ा `dateRange`.
"COMPARISON"	`object(dateRange)`	अगर लागू हो, तो तुलना के लिए चुनी गई तारीख की सीमा से जुड़ा `dateRange`.

dateRange

{
  start: string,
  end: string
}

dateRange ऑब्जेक्ट, डिफ़ॉल्ट या तुलना के लिए चुनी गई तारीख की सीमा के शुरू और खत्म होने की तारीखों के बारे में जानकारी देता है.

फ़ील्ड	टाइप	ब्यौरा
start	`string`	YYYYMMDD फ़ॉर्मैट में तारीख की सीमा के शुरू होने की तारीख.
खत्म करें	`string`	YYYYMMDD फ़ॉर्मैट में तारीख की सीमा खत्म होने की तारीख.

`tableFormat` रेफ़रंस

tableObject

{
  headers: array(object),
  rows: array(array)
}

फ़ील्ड	टाइप	ब्यौरा
हेडर	`Array`	fields ऑब्जेक्ट का कलेक्शन. इन फ़ील्ड ऑब्जेक्ट में, `configId` प्रॉपर्टी भी होती है. यह कॉन्फ़िगरेशन से मिले आईडी के बराबर होती है.
पंक्तियां	`Array<Array>`	ऐरे की ऐरे: हर ऐरे, डेटा की एक लाइन होती है

`tableFormat` के डेटा का सैंपल

यह data का सैंपल है. इसे dscc.subscribeToData() का इस्तेमाल करके, dscc.tableFormat विकल्प के साथ दिखाया गया है.

{
  "tables": {
    "DEFAULT": {
      "headers": [{
        "id": "qt_ky8sltutsb",
        "name": "dimension",
        "type": "TEXT",
        "concept": "DIMENSION",
        "configId": "configId1"
      }, {
        "id": "qt_b5bvmtutsb",
        "name": "second dim",
        "type": "TEXT",
        "concept": "DIMENSION"
        "configId": "configId1"
      }, {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC",
        "configId": "configId2"
      }],
      "rows": [
        ["Week 4", "lm", 55]
      ]
    },
    "COMPARISON": {
      "headers": [{
        "id": "qt_ky8sltutsb",
        "name": "dimension",
        "type": "TEXT",
        "concept": "DIMENSION",
        "configId": "configId1"
      }, {
        "id": "qt_b5bvmtutsb",
        "name": "second dim",
        "type": "TEXT",
        "concept": "DIMENSION"
        "configId": "configId1"
      }, {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC",
        "configId": "configId2"
      }],
      "rows": [
        ["Week 5", "no", 123]
      ]
    }
  },
  "fields": {
    "configId1": [
      {
        "id": "qt_ky8sltutsb",
        "name": "week",
        "type": "TEXT",
        "concept": "DIMENSION"
      },
      {
        "id": "qt_b5bvmtutsb",
        "name": "textId",
        "type": "TEXT",
        "concept": "DIMENSION"
      }
    ],
    "configId2": [
      {
        "id": "qt_m9dtntutsb",
        "name": "orders",
        "type": "NUMBER",
        "concept": "METRIC"
      }
    ]
  },
  "style": {
    "nodeColor": {
      "value": {
        "color": "#000000"
      }
    }
  },
  "theme": {},
  "dateRanges": {
    "DEFAULT": {
      "start": "20210501",
      "end": "20210531"
    },
    "COMPARISON": {
      "start": "20200501",
      "end": "20200531"
    }
  },
  "interactions": {
    "onClick": {
      "value": {
        "type": "FILTER",
        "data": {
          "concepts": [
            "qt_h6oibrb6wb",
            "qt_i6oibrb6wb"
          ],
          "values": [
            [
              "Afternoon",
              "Sunday"
            ],
            [
              "Afternoon",
              "Thursday"
            ],
            [
              "Morning",
              "Tuesday"
            ]
          ]
        }
      },
      "supportedActions": [
        "FILTER"
      ]
    }
  }
}

objectFormat रेफ़रंस

objectRow

{
  configId1: array(string | bool | number),
  configId2: array(string | bool | number)
}

फ़ील्ड	टाइप	ब्यौरा
configId	श्रेणी	किसी कॉन्फ़िगरेशन आईडी से जुड़ी वैल्यू का कलेक्शन

objectFormat डेटा का सैंपल

यह data का सैंपल है. इसे dscc.subscribeToData() का इस्तेमाल करके, dscc.objectFormat विकल्प के साथ दिखाया गया है.

{
  "tables": {
    "COMPARISON": [
      {
        "configId1": ["Week 5", "cd"],
        "configId2": [123]
      }
    ],
    "DEFAULT": [
      {
        "configId1": ["Week 1", "ab"],
        "configId2": [24]
      }
    ]
  },
  "fields": {
    "configId1": [
      {
        "id": "qt_h6oibrb6wb",
        "name": "time of day",
        "type": "TEXT",
        "concept": "DIMENSION"
      },
      {
        "id": "qt_i6oibrb6wb",
        "name": "day",
        "type": "TEXT",
        "concept": "DIMENSION"
      }
    ],
    "configId2": [
      {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC"
      }
    ]
  },
  "style": {
    "nodeColor": {
      "value": {
        "color": "#000000"
      }
    }
  },
  "theme": {},
  "dateRanges": {
    "DEFAULT": {
      "start": "20210501",
      "end": "20210531"
    },
    "COMPARISON": {
      "start": "20200501",
      "end": "20200531"
    }
  },
  "interactions": {
    "onClick": {
      "value": {
        "type": "FILTER",
        "data": {
          "concepts": [
            "qt_h6oibrb6wb",
            "qt_i6oibrb6wb"
          ],
          "values": [
            [
              "Afternoon",
              "Sunday"
            ],
            [
              "Afternoon",
              "Thursday"
            ],
            [
              "Morning",
              "Tuesday"
            ]
          ]
        }
      },
      "supportedActions": [
        "FILTER"
      ]
    }
  }
}

एपीआई के बारे में खास जानकारी

getWidth()

getWidth() का इस्तेमाल करना

getHeight()

getHeight() का इस्तेमाल करना

sendInteraction()

InteractionType

sendInteraction का इस्तेमाल करना

interactionData

clearInteraction()

clearInteraction() का इस्तेमाल करना

subscribeToData(callback, options)

subscribeToData() का इस्तेमाल करना

data

fieldsByConfigId

फ़ील्ड

styleById

styleValue

interactionsById

interactionField

interactionValue

थीम

tablesById

dateRangesById

dateRange

tableFormat रेफ़रंस

tableObject

tableFormat के डेटा का सैंपल

objectFormat रेफ़रंस

objectRow

objectFormat डेटा का सैंपल

`getWidth()`

`getWidth()` का इस्तेमाल करना

`getHeight()`

`getHeight()` का इस्तेमाल करना

`InteractionType`

`sendInteraction` का इस्तेमाल करना

`interactionData`

`clearInteraction()` का इस्तेमाल करना

`subscribeToData(callback, options)`

`subscribeToData()` का इस्तेमाल करना

`data`

`tableFormat` रेफ़रंस

`tableFormat` के डेटा का सैंपल