ডেটা স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন ধারণকারী আইফ্রেমে ডেটা এবং স্টাইলিং তথ্য সরবরাহ করতে postMessage ইন্টারফেস ব্যবহার করে। এই নির্দেশিকাটি হেল্পার লাইব্রেরি ব্যবহারের বিষয়ে আরও বিস্তারিত তথ্য প্রদান করে।
কমিউনিটি ভিজ্যুয়ালাইজেশনের জন্য, ds-component দুটি কাজ করে।
- আইফ্রেমটির মাত্রাগুলো নির্ণয় করুন।
- ডেটা স্টুডিওর সাথে যোগাযোগ পরিচালনা করুন
ইভেন্টগুলিতে সাবস্ক্রাইব করা
যখন কোনো ব্যবহারকারী আপনার ভিজ্যুয়ালাইজেশনের সাথে ইন্টারঅ্যাক্ট করেন, যেমন নির্বাচিত ফিল্ড, স্টাইল পরিবর্তন করা বা কম্পোনেন্টের আকার পরিবর্তন করা, তখন ডেটা স্টুডিও আপনার ভিজ্যুয়ালাইজেশনে ইভেন্ট পাঠায়।
dscc.subscribeToData একটি কলব্যাক রেজিস্টার করে, যা ডেটা স্টুডিওর প্রতিটি 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 লাইব্রেরিটি দুটি ট্রান্সফর্ম প্রদান করে, যা আপনাকে সরাসরি এই ডেটা ফরম্যাটগুলোতে নিয়ে যাওয়ার জন্য ডিজাইন করা হয়েছে।
এই দুটি ট্রান্সফর্ম লাইব্রেরি-রেফারেন্সে নথিভুক্ত করা আছে। এই ট্রান্সফর্মগুলো জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন লাইব্রেরিগুলোর দ্বারা সাধারণত প্রত্যাশিত ডেটা ফরম্যাটের সাথে সহজেই খাপ খায়। দুটি সমর্থিত ট্রান্সফর্ম হলো: 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]
};
};
}
যদি ডেটা সেকশনগুলো এমনভাবে সংজ্ঞায়িত করা হয় যাতে একজন ব্যবহারকারী একাধিক ফিল্ড ইনপুট করতে পারেন (উদাহরণস্বরূপ, যদি একটি স্যাঙ্কি ডায়াগ্রামের জন্য দুটি ডাইমেনশন সংজ্ঞায়িত করা থাকে), তাহলে ট্রান্সফর্মটি আপনার ব্যবহারের ধরনের উপর নির্ভর করবে, কারণ লুকার স্টুডিও দ্বারা ফেরত আসা ডেটা ফরম্যাটটি দেখতে অনেকটা এইরকম হবে:
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});