हेल्पर लाइब्रेरी का इस्तेमाल करना

Looker Studio, postMessage इंटरफ़ेस का इस्तेमाल करके, उस iframe में डेटा और स्टाइलिंग की जानकारी देता है जिसमें कम्यूनिटी विज़ुअलाइज़ेशन होता है. इस गाइड में हेल्पर लाइब्रेरी के इस्तेमाल के बारे में ज़्यादा जानकारी दी गई है.

कम्यूनिटी विज़ुअलाइज़ेशन के लिए, ds-component दो फ़ंक्शन देता है.

  1. iframe के डाइमेंशन हासिल करना
  2. Looker Studio की मदद से कम्यूनिकेशन मैनेज करना

इवेंट की सदस्यता लेना

जब कोई उपयोगकर्ता आपके विज़ुअलाइज़ेशन के साथ इंटरैक्ट करता है, जैसे कि चुने गए फ़ील्ड, स्टाइल या कॉम्पोनेंट का साइज़ बदलना, तो Looker Studio आपके विज़ुअलाइज़ेशन को इवेंट भेजता है.

dscc.subscribeToData एक कॉलबैक रजिस्टर करता है, जिसे Looker Studio के हर postMessage इवेंट के लिए शुरू किया जाएगा. कॉलबैक को data ऑब्जेक्ट पास किया गया है.

function drawViz(data){
  // obtain the height and width to scale your visualization appropriately
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  // write your visualization code here
  console.log("I'm the callback and I was passed this data: " + JSON.stringify(data, null, '  '));
}

// call drawViz every time Looker Studio sends a new postMessage
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

लौटाया गया डेटा

दोनों डेटा ट्रांसफ़ॉर्म, पांच कुंजियों के साथ एक ऑब्जेक्ट दिखाते हैं.

सुरक्षा कुंजी मकसद
style उपयोगकर्ता की चुनी गई और डिफ़ॉल्ट स्टाइल की जानकारी
fields उपयोगकर्ता के चुने गए फ़ील्ड की जानकारी
interactions उपयोगकर्ता के चुने गए इंटरैक्शन
theme रिपोर्ट थीम की जानकारी
tables डेटा की लाइनें
dateRanges डिफ़ॉल्ट और तुलना के लिए तारीख की सीमाएं

डेटा का फ़ॉर्मैट:

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

अलग-अलग विज़ुअलाइज़ेशन के लिए, अलग-अलग डेटा फ़ॉर्मैट की ज़रूरत होती है. दो सामान्य फ़ॉर्मैट हैं, सरणियों का ऐरे या ऑब्जेक्ट का कलेक्शन. ds-कॉम्पोनेंट लाइब्रेरी से दो ट्रांसफ़ॉर्म मिलते हैं, जिन्हें इस तरह से डिज़ाइन किया गया है कि आप सीधे इन डेटा फ़ॉर्मैट पर पहुंच सकें.

इन दोनों ट्रांसफ़ॉर्म को लाइब्रेरी-रेफ़रंस में बताया गया है. ये मैप को आसानी से ऐसे डेटा फ़ॉर्मैट में बदल देते हैं जिनकी आम तौर पर JavaScript विज़ुअलाइज़ेशन लाइब्रेरी में उम्मीद होती है. इस्तेमाल किए जा सकने वाले दो ट्रांसफ़ॉर्म हैं: objectTransform, जो ऑब्जेक्ट का अरे दिखाता है, और tableTransform, जो अरे का अरे दिखाता है.

dscc.objectTransform

कुछ विज़ुअलाइज़ेशन में, डेटा को ऑब्जेक्ट के कलेक्शन के तौर पर होना चाहिए.

उदाहरण के लिए:

var data = [
  {'colA': 'hello', 'colB', 'world'},
  {'colA': 'hello', 'colB', 'world'}
];

इस कोड में, dscc.objectTransform फ़ॉर्मैट से ऑब्जेक्ट के कलेक्शन को ऐक्सेस करने का तरीका बताया गया है.


function drawViz(data){
  // what the object transform could look like
  // [
  //  {'configId1': ['hello'], 'configId2': [1] },
  //  {'configId1': ['world'], 'configId2': [2] }
  // ]
  var dsccObjectTransformData = data.tables.DEFAULT;

  // creating an array of objects
  var arrayOfObjects = dscc.ObjectTransformData.rows.map(function(d){
    return {
      'configId1': d.configId1[0],
      'configId2': d.configId2[0]
    };
  };

}

अगर डेटा सेक्शन इस तरह से तय किए गए हैं कि उपयोगकर्ता एक से ज़्यादा फ़ील्ड डाल सकता है (उदाहरण के लिए, अगर सैंकी डायग्राम के लिए दो डाइमेंशन तय किए गए हैं), तो ट्रांसफ़ॉर्मेशन आपके इस्तेमाल के उदाहरण पर निर्भर करेगा. ऐसा इसलिए, क्योंकि Looker Studio से मिलने वाला डेटा फ़ॉर्मैट कुछ ऐसा दिखेगा:


var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]

dscc.tableTransform

कुछ विज़ुअलाइज़ेशन लाइब्रेरी, कलेक्शन में मौजूद होती हैं.

उदाहरण के लिए:

var data = [
  ['hello', 1],
  ['world', 2]
];

इस कोड में, dscc.tableTransform फ़ॉर्मैट से लाइन की किसी लाइन को ऐक्सेस करने का तरीका बताया गया है.


function drawViz(data);
  // what the below object looks like
  // {
  //    headers: [{
  //      "id": "qt_ky8sltutsb",
  //      "name": "dimension",
  //      "type": "TEXT",
  //      "concept": "DIMENSION",
  //      "configId": "configId1"
  //    }, {
  //      "id": "qt_m9dtntutsb",
  //      "name": "metric",
  //      "type": "NUMBER",
  //      "concept": "METRIC",
  //      "configId": "configId2"
  //    }],
  //  rows: [
  //    ['hello', 1],
  //    ['world', 2]
  //  ];
  // }
  var dsccTableTransformObject = data.tables.DEFAULT;

  // accessing the row of rows
  var rowOfRows = dsccTableTransformObject.rows;

  // accessing the header row
  var headers = dsccTableTransformObject.headers;
}

dscc.subscribeToData(drawViz, {transform: tableTransform});