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

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

कम्यूनिटी विज़ुअलाइज़ेशन के लिए, 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 से मिला डेटा फ़ॉर्मैट स्टूडियो कुछ ऐसा दिखेगा:


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});