Looker Studio, postMessage इंटरफ़ेस का इस्तेमाल करके, उस iframe में डेटा और स्टाइलिंग की जानकारी देता है जिसमें कम्यूनिटी विज़ुअलाइज़ेशन होता है. इस गाइड में हेल्पर लाइब्रेरी के इस्तेमाल के बारे में ज़्यादा जानकारी दी गई है.
कम्यूनिटी विज़ुअलाइज़ेशन के लिए, ds-component दो फ़ंक्शन देता है.
- iframe के डाइमेंशन हासिल करना
- 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});