হেল্পার লাইব্রেরি ব্যবহার করে

লুকার স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন সহ আইফ্রেমে ডেটা এবং স্টাইলিং তথ্য প্রদান করতে পোস্টমেসেজ ইন্টারফেস ব্যবহার করে। এই নির্দেশিকা সাহায্যকারী লাইব্রেরি ব্যবহার করার বিষয়ে আরো বিস্তারিত প্রদান করে।

কমিউনিটি ভিজ্যুয়ালাইজেশনের জন্য, ds-কম্পোনেন্ট দুটি ফাংশন পরিবেশন করে।

1. iframe এর মাত্রা প্রাপ্ত
2. লুকার স্টুডিওর সাথে যোগাযোগ পরিচালনা করুন

ইভেন্ট সদস্যতা

যখন কোনও ব্যবহারকারী আপনার ভিজ্যুয়ালাইজেশনের সাথে ইন্টারঅ্যাক্ট করে, যেমন নির্বাচিত ক্ষেত্রগুলি, শৈলী পরিবর্তন করা বা উপাদানটির আকার পরিবর্তন করা, লুকার স্টুডিও আপনার ভিজ্যুয়ালাইজেশনে ইভেন্ট পাঠায়।

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

বিভিন্ন ভিজ্যুয়ালাইজেশনের জন্য বিভিন্ন ডেটা ফরম্যাটের প্রয়োজন হয়। দুটি সাধারণ বিন্যাস হল অ্যারের অ্যারে বা অবজেক্টের অ্যারে। ডিএস-কম্পোনেন্ট লাইব্রেরি দুটি রূপান্তর প্রদান করে, যা আপনাকে সরাসরি এই ডেটা ফর্ম্যাটে নিয়ে যাওয়ার জন্য ডিজাইন করা হয়েছে।

দুটি রূপান্তর গ্রন্থাগার-রেফারেন্সে নথিভুক্ত করা হয়েছে। জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন লাইব্রেরিগুলি সাধারণত প্রত্যাশিত ডেটা ফর্ম্যাটে মানচিত্রকে সহজেই রূপান্তরিত করে। দুটি সমর্থিত রূপান্তর হল: 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});