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