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	वह स्ट्रिंग जो इससे मेल खाता है कार्रवाई का आईडी कॉन्फ़िगरेशन
इंटरैक्शन	enum(InteractionType)	Looker को जानकारी देता है स्टूडियो की जानकारी बातचीत
डेटा	object(InteractionData)	यह जानकारी मिलती है ज़रूरी डेटा एक इंटरैक्शन

InteractionType

फ़िलहाल, InteractionType सिर्फ़ FILTER है.

नाम	टाइप	ब्यौरा
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 से मैसेज की सदस्यता लेता है.

पैरामीटर:

नाम	टाइप	ब्यौरा
कॉलबैक(डेटा)	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)	एक ऑब्जेक्ट जिसमें यह शामिल हो fields को इंडेक्स करता है उनका configId
शैली	object(styleById)	एक ऑब्जेक्ट जिसमें यह शामिल हो स्टाइल ऑब्जेक्ट अपने configId से इंडेक्स किया गया है
इंटरैक्शन	object(interactionsById)	एक ऑब्जेक्ट जिसमें यह शामिल हो इंटरैक्शन चीज़ें
थीम	themeStyle	themeStyle ऑब्जेक्ट जिसमें थीम स्टाइलिंग शामिल है रिपोर्ट के लिए जानकारी
टेबल	object(tablesById)	एक ऑब्जेक्ट जिसमें यह शामिल हो tableObjects
dateRanges	object(dateRangesById)	एक ऑब्जेक्ट जिसमें यह शामिल हो dateRanges

fieldsByConfigId

{
   configId: array(field)
}

fieldsByConfigId ऑब्जेक्ट में इंडेक्स किए गए फ़ील्ड ऑब्जेक्ट के अरे हैं "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 का टाइप जो स्टाइल एलिमेंट पर निर्भर करता है.

फ़ील्ड	टाइप	ब्यौरा
value	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 ऑब्जेक्ट में, समर्थित Actions का अरे शामिल है कॉन्फ़िगरेशन और उपयोगकर्ता की चुनी गई वैल्यू को शामिल कर सकता है.

फ़ील्ड	टाइप	ब्यौरा
value	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 से हर लाइन के लिए हेडिंग और डेटा की जानकारी मिलती है. "डिफ़ॉल्ट" हमेशा डेटा दिखाएगा और "COMPARISON" अपने-आप जानकारी भर जाएगी, जब उपयोगकर्ता तुलना करने वाली लाइनों के साथ डेटा को कॉन्फ़िगर करता है.

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

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

dateRangesById

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

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

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

dateRange

{
  start: string,
  end: string
}

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

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

tableFormat रेफ़रंस

tableObject

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

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

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

यह विकल्प के साथ dscc.subscribeToData() का इस्तेमाल करके, data का सैंपल दिया गया है 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"
      ]
    }
  }
}

ऑब्जेक्ट फ़ॉर्मैट का रेफ़रंस

objectRow

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

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

ऑब्जेक्ट फ़ॉर्मैट डेटा का सैंपल

यह विकल्प के साथ dscc.subscribeToData() का इस्तेमाल करके, data का सैंपल दिया गया है 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"
      ]
    }
  }
}