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

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

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

1. आईफ़्रेम के डाइमेंशन पाना
2. Data Studio से होने वाले कम्यूनिकेशन को मैनेज करना

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

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

dscc.subscribeToData एक कॉलबैक रजिस्टर करता है, जिसे Data 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-component लाइब्रेरी, दो ट्रांसफ़ॉर्म उपलब्ध कराती है. इन्हें इन डेटा फ़ॉर्मैट तक सीधे पहुंचने के लिए डिज़ाइन किया गया है.

इन दोनों ट्रांसफ़ॉर्म के बारे में, library-reference में बताया गया है. ये ट्रांसफ़ॉर्म, 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});