লুকার স্টুডিও কমিউনিটি কম্পোনেন্ট (ডিএসসিসি) লাইব্রেরি রেফারেন্স

দ্রষ্টব্য: কমিউনিটি ভিজ্যুয়ালাইজেশন বৈশিষ্ট্যটি "ডেভেলপার প্রিভিউ"-এ রয়েছে। এই সময়ের মধ্যে আসন্ন বৈশিষ্ট্য এবং উন্নতি সম্পর্কে আরও জানতে ডেভেলপার প্রিভিউ পৃষ্ঠাটি দেখুন।

API এর সংক্ষিপ্তসার

dscc (লুকার স্টুডিও কমিউনিটি কম্পোনেন্ট) হল একটি লাইব্রেরি যা লুকার স্টুডিওর জন্য কমিউনিটি কম্পোনেন্ট তৈরিতে সাহায্য করে। সোর্স কোডটি GitHub- এ পাওয়া যাবে।

dscc তিনটি ফাংশন প্রদর্শন করে: getWidth() , getHeight() , এবং subscribeToData() ।

getWidth()

নাম	পরামিতি	রিটার্ন টাইপ	বিবরণ
প্রস্থ ()	কোনটিই নয়	number	আইফ্রেমের প্রস্থ পিক্সেলে রিটার্ন করে।

getWidth() ব্যবহার করে

// to get the width of the iframe
var width = dscc.getWidth();

getHeight()

নাম	পরামিতি	রিটার্ন টাইপ	বিবরণ
উচ্চতা () পান	কোনটিই নয়	int	আইফ্রেমের উচ্চতা পিক্সেলে রিটার্ন করে।

getHeight() ব্যবহার করে

// to get the height of the iframe
var height = dscc.getHeight();

সেন্ডইন্টার্যাকশন()

sendInteraction() ফাংশনটি একটি ফিল্টারের জন্য ডেটা সহ Looker Studio-তে একটি বার্তা পাঠায়।

পরামিতি:

নাম	আদর্শ	বিবরণ
অ্যাকশন আইডি	string	কনফিগারেশনের actionId-এর সাথে সম্পর্কিত স্ট্রিং
মিথস্ক্রিয়া	enum(InteractionType)	লুকার স্টুডিও স্টুডিওকে মিথস্ক্রিয়া সম্পর্কে জানায়
তথ্য	object(InteractionData)	একটি মিথস্ক্রিয়ার জন্য প্রয়োজনীয় তথ্য সরবরাহ করে

InteractionType

বর্তমানে, একমাত্র বৈধ InteractionType হল FILTER ।

নাম	আদর্শ	বিবরণ
dscc.InteractionType.FILTER সম্পর্কে	এনাম	FILTER ইন্টারঅ্যাকশন বর্ণনা করে

sendInteraction ব্যবহার করা হচ্ছে

// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";

// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;

var fieldID = "qt_m9dtntutsb";
var dataValue = "Asia";

// sendInteraction expects data that tells you the concepts and the values of
// those concepts to use in constructing a filter.
var interactionData = {
  "concepts": [fieldId],
  "values": [[dataValue]]
}

dscc.sendInteraction(actionId, FILTER, interactionData);

interactionData

var interactionData = {
  "concepts": array(fieldId),
  "values": array(array(dataValue))
}

মাঠ	আদর্শ	বিবরণ
ধারণা	Array	fieldIds অ্যারে
মান	Array<Array>	ডেটা মানের নেস্টেড অ্যারে। প্রতিটি সাবঅ্যারে concepts অ্যারের দৈর্ঘ্যের সমান হওয়া উচিত। সাবঅ্যারেতে প্রতিটি মান একটি মাত্রা মানের সাথে মিলে যায়।

নমুনা interactionData :

var interactionData = {
  "concepts": ["dim1Id", "dim2Id"],
  "values": [
    ["dim1Val1", "dim2Val1"],
    ["dim1Val2", "dim2Val2"]
    ]
}

উপরের interactionData সাথে dscc.sendInteraction ব্যবহার করলে নিম্নলিখিত SQL স্টেটমেন্টের সমতুল্য হবে:

SELECT data WHERE
  (dim1 == dim1Val1 AND dim2 == dim2Val1)
  OR
  (dim1 == dim1Val2 AND dim2 == dim2Val2);

ক্লিয়ার ইন্টারঅ্যাকশন()

clearInteraction() ফাংশনটি লুকার স্টুডিওতে একটি বার্তা পাঠায় যাতে এই ভিজ্যুয়ালাইজেশন দ্বারা পূর্বে সেট করা একটি ফিল্টার সাফ করা হয়।

পরামিতি:

নাম	আদর্শ	বিবরণ
অ্যাকশন আইডি	string	কনফিগারেশনের actionId-এর সাথে সম্পর্কিত স্ট্রিং
মিথস্ক্রিয়া	enum(InteractionType)	লুকার স্টুডিওকে মিথস্ক্রিয়া সম্পর্কে জানায়

clearInteraction() ব্যবহার করে

// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";

// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;

dscc.clearInteraction(actionId, FILTER);

subscribeToData(callback, options)

subscribeToData() ফাংশনটি Looker Studio থেকে আসা বার্তাগুলিতে সাবস্ক্রাইব করে।

পরামিতি:

নাম	আদর্শ	বিবরণ
কলব্যাক (ডেটা)	function	একটি ফাংশন যা subscribeToData দ্বারা ফেরত পাঠানো ডেটা গ্রহণ করে।
বিকল্পগুলি	object	পছন্দসই ডেটা রিটার্ন ফর্ম্যাট নির্ধারণ করে

অপশন অবজেক্টটি দেখতে এরকম:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

রিটার্ন মান:

আদর্শ	বিবরণ
function	লুকার স্টুডিও থেকে আরও বার্তাগুলির callback আনসাবস্ক্রাইব করে

subscribeToData() ব্যবহার করে

// define and use a callback
var unsubscribe = dscc.subscribeToData(function(data){
  // console.log the returned data
  console.log(data);
}, {transform: dscc.tableTransform});

// to unsubscribe

unsubscribe();

data

এটি হল dscc.subscribeToData এর সাথে নিবন্ধিত callback পাঠানো অবজেক্ট। dscc.objectFormat এবং dscc.tableFormat মধ্যে ভাগ করা ক্ষেত্রগুলি নীচে দেওয়া হল।

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById)
}

মাঠ	আদর্শ	বিবরণ
ক্ষেত্র	object(fieldsByConfigId)	একটি অবজেক্ট যাতে তাদের configId দ্বারা সূচীকৃত ক্ষেত্র থাকে
স্টাইল	object(styleById)	একটি অবজেক্ট যাতে স্টাইল অবজেক্ট থাকে যা তাদের configId দ্বারা সূচীবদ্ধ করা হয়
মিথস্ক্রিয়া	object(interactionsById)	একটি বস্তু যাতে ইন্টারঅ্যাকশন বস্তু থাকে
থিম	themeStyle	একটি themeStyle অবজেক্ট যাতে রিপোর্টের জন্য থিম স্টাইলিং সম্পর্কিত তথ্য থাকে
টেবিল	object(tablesById)	একটি অবজেক্ট যাতে টেবিলঅবজেক্ট থাকে
তারিখের সীমা	object(dateRangesById)	একটি অবজেক্ট যাতে dateRanges থাকে

fieldsByConfigId

{
   configId: array(field)
}

fieldsByConfigId অবজেক্টে ভিজ্যুয়ালাইজেশন কনফিগারেশনে সংজ্ঞায়িত "id" দ্বারা সূচীকৃত ফিল্ড অবজেক্টের অ্যারে রয়েছে। কনফিগারেশনে সংজ্ঞায়িত প্রতিটি dataField জন্য এই অবজেক্টে একটি করে এন্ট্রি রয়েছে।

মাঠ	আদর্শ	বিবরণ
কনফিগার আইডি	Array<field>	ডেটাফিল্ডের সাথে সম্পর্কিত ক্ষেত্রের একটি অ্যারে

ক্ষেত্র

{
  id: fieldId,
  name: string,
  description: string,
  type: fieldType,
  concept: enum(conceptType)
}

field অবজেক্টটি প্রোপার্টি প্যানেলে ব্যবহারকারীর নির্বাচন করা ক্ষেত্র সম্পর্কে তথ্য প্রদান করে।

মাঠ	আদর্শ	বিবরণ
আইডি	string	লুকার স্টুডিও ফিল্ডের জন্য আইডি তৈরি করেছে
নাম	string	মানুষের পাঠযোগ্য ক্ষেত্রের নাম
বর্ণনা	string	ক্ষেত্রের বর্ণনা
টাইপ করুন	enum(fieldType)	ক্ষেত্রের শব্দার্থিক ধরণ
ধারণা	enum(conceptType)	ধারণাক্ষেত্রের ধরণ

স্টাইলবাইআইডি

{
   configId: styleValue
}

styleById অবজেক্ট ভিজ্যুয়ালাইজেশন কনফিগারেশনে সংজ্ঞায়িত "id" দ্বারা সূচীকৃত স্টাইল তথ্য প্রদান করে।

মাঠ	আদর্শ	বিবরণ
কনফিগার আইডি	styleValue	একটি অবজেক্ট যাতে স্টাইল মান এবং কনফিগার-সংজ্ঞায়িত ডিফল্ট স্টাইল মান থাকে

স্টাইল ভ্যালু

{
  value: string | object | bool | number,
  defaultValue: string | object | bool | number
}

styleValue অবজেক্ট ব্যবহারকারী-নির্বাচিত স্টাইল মান এবং কনফিগারেশনে সংজ্ঞায়িত ডিফল্ট মান উভয়ই প্রদান করে। value এবং defaultValue ধরণ স্টাইল উপাদানের উপর নির্ভর করে।

মাঠ	আদর্শ	বিবরণ
মূল্য	string OR object OR bool OR number	প্রোপার্টি প্যানেলে ব্যবহারকারী নির্বাচন থেকে ফিরে আসা স্টাইল এলিমেন্টের মান।
ডিফল্ট মান	string OR object OR bool OR number	ভিজ্যুয়ালাইজেশন কনফিগারেশনে সংজ্ঞায়িত স্টাইল এলিমেন্টের ডিফল্ট মান

ইন্টারঅ্যাকশনবাইআইডি

{

}

interactionsById অবজেক্ট interactionId ভিজ্যুয়ালাইজেশন কনফিগারেশন দ্বারা সূচিত ইন্টারঅ্যাকশন ডেটা সরবরাহ করে।

সূচক	আদর্শ	বিবরণ
কনফিগার আইডি	interaction	একটি বস্তু যাতে একটি মিথস্ক্রিয়ার সাথে সম্পর্কিত ডেটা থাকে

ইন্টারঅ্যাকশনফিল্ড

{
  value: object(interactionValue),
  supportedActions: array(InteractionType)
}

interactionField অবজেক্টে কনফিগারেশনে সংজ্ঞায়িত supportedActions এর অ্যারে থাকে, সেইসাথে ইন্টারঅ্যাকশনের জন্য ব্যবহারকারী-নির্বাচিত মানগুলিও থাকে।

মাঠ	আদর্শ	বিবরণ
মূল্য	string OR object OR bool OR number	প্রোপার্টি প্যানেলে ব্যবহারকারী নির্বাচন থেকে ফিরে আসা স্টাইল এলিমেন্টের মান।
সমর্থিত কর্ম	Array<InteractionType>	এই মিথস্ক্রিয়া দ্বারা সমর্থিত ক্রিয়াগুলি, যেমন কনফিগারেশনে সংজ্ঞায়িত করা হয়েছে

মিথস্ক্রিয়া মূল্য

interactionValue অবজেক্ট ইন্টারঅ্যাকশন ধরণের জন্য ব্যবহারকারী-নির্বাচিত মান প্রদান করে। যদি data কী বিদ্যমান থাকে, তাহলে InteractionData অবজেক্ট ফিল্টারের বর্তমান অবস্থা প্রতিফলিত করে। যদি data কী বিদ্যমান না থাকে, তাহলে ভিজ্যুয়ালাইজেশনটি বর্তমানে ফিল্টার হিসাবে কনফিগার করা নেই।

{
  type: enum(InteractionType)
  data: object(interactionData) | None
}

মাঠ	আদর্শ	বিবরণ
টাইপ করুন	enum(InteractionType)	ব্যবহারকারী-নির্বাচিত ইন্টারঅ্যাকশন টাইপ
তথ্য	object(InteractionData)	ফিল্টারের বর্তমান অবস্থার সাথে সম্পর্কিত ডেটা । ফিল্টারটি বর্তমানে সাফ করা থাকলে এই কীটি বিদ্যমান থাকবে না।

থিম

{
  fillColor: {
    color: string,
    opacity: number
  },
  fontColor: {
    color: string,
    opacity: number
  },
  accentFillColor: {
    color: string,
    opacity: number
  },
  accentFontColor: {
    color: string,
    opacity: number
  },
  fontFamily: string,
  accentFontFamily: string,
  increaseColor: {
    color: string,
    opacity: number
  },
  decreaseColor: {
    color: string,
    opacity: number
  },
  gridColor: {
    color: string,
    opacity: number
  },
  seriesColor: [
    {
      color: string,
      opacity: number
    }
  ]
}

themeStyle অবজেক্টটি ভিজ্যুয়ালাইজেশনে রিপোর্ট থিমের তথ্য প্রেরণ করে।

মাঠ	আদর্শ	বিবরণ
রঙ পূরণ করুন	object	{color: string, opacity: number} বিন্যাসের একটি বস্তু
ফন্টের রঙ	object	{color: string, opacity: number} বিন্যাসের একটি বস্তু
অ্যাকসেন্টফিলকালার	object	{color: string, opacity: number} বিন্যাসের একটি বস্তু
অ্যাকসেন্টফন্টকালার	object	{color: string, opacity: number} বিন্যাসের একটি বস্তু
ফন্টফ্যামিলি	string	ফন্ট পরিবার বর্ণনা করে এমন একটি স্ট্রিং
অ্যাকসেন্টফন্টফ্যামিলি	string	অ্যাকসেন্ট ফন্ট পরিবার বর্ণনা করে এমন একটি স্ট্রিং
রঙ বৃদ্ধি করুন	object	{color: string, opacity: number} বিন্যাসের একটি বস্তু
হ্রাস রঙ	object	{color: string, opacity: number} বিন্যাসের একটি বস্তু
গ্রিডরঙ	object	{color: string, opacity: number} বিন্যাসের একটি বস্তু
সিরিজরঙ	Array<object>	{color: string, opacity: number} বিন্যাসের বস্তুর একটি অ্যারে

টেবিলবাইআইডি

{
  "DEFAULT": object(tableObject),
  "COMPARISON": object(tableObject) | undefined
}

tableObject প্রতিটি সারির জন্য শিরোনাম এবং ডেটা তথ্য প্রদান করে। "DEFAULT" সর্বদা ডেটা ফেরত দেবে, এবং "COMPARISON" শুধুমাত্র তখনই পূরণ করা হবে যদি ব্যবহারকারী তুলনামূলক সারি দিয়ে ডেটা কনফিগার করে।

dscc.tableFormat এবং dscc.objectFormat এর মধ্যে একমাত্র পার্থক্য হল tableObject এর বিন্যাস।

মাঠ	আদর্শ	বিবরণ
"ডিফল্ট"	object(tableObject) OR Array<objectRow>	ব্যবহারকারী ভিজ্যুয়ালাইজেশনে যে ডেটা যোগ করে তার সাথে সম্পর্কিত tableObject
"তুলনা"	object(tableObject) OR Array<objectRow>	প্রযোজ্য হলে, তারিখ তুলনা ডেটার সাথে সম্পর্কিত tableObject

তারিখের সীমা আইডি অনুসারে

{
  "DEFAULT": object(dateRange),
  "COMPARISON": object(dateRange)
}

dateRangesById অবজেক্টটি ডিফল্ট এবং তুলনামূলক তারিখের পরিসর সম্পর্কে তথ্য প্রদান করে। যদি কোনও তারিখের পরিসর না থাকে, তাহলে অবজেক্টটি খালি থাকবে। DEFAULT এবং COMPARISON শুধুমাত্র তখনই পূরণ করা হবে যদি ব্যবহারকারী সংশ্লিষ্ট তারিখের পরিসরগুলি কনফিগার করে। তারিখের পরিসরের ডেটা tablesById এ সংজ্ঞায়িত ডিফল্ট এবং তুলনামূলক ডেটার সাথে সম্পর্কিত।

মাঠ	আদর্শ	বিবরণ
"ডিফল্ট"	object(dateRange)	প্রযোজ্য হলে, ডিফল্ট তারিখ পরিসরের সাথে সম্পর্কিত dateRange ।
"তুলনা"	object(dateRange)	প্রযোজ্য হলে, তুলনামূলক তারিখের পরিসরের সাথে সম্পর্কিত dateRange ।

তারিখের পরিসর

{
  start: string,
  end: string
}

dateRange অবজেক্টটি একটি ডিফল্ট বা তুলনামূলক তারিখ পরিসরের শুরু এবং শেষ তারিখ সম্পর্কে তথ্য প্রদান করে।

মাঠ	আদর্শ	বিবরণ
শুরু	string	YYYYMMDD ফর্ম্যাটে তারিখ পরিসরের শুরুর তারিখ।
শেষ	string	YYYYMMDD ফর্ম্যাটে তারিখ পরিসরের শেষ তারিখ।

tableFormat রেফারেন্স

টেবিল অবজেক্ট

{
  headers: array(object),
  rows: array(array)
}

মাঠ	আদর্শ	বিবরণ
হেডার	Array	ফিল্ড অবজেক্টের একটি অ্যারে। এই ফিল্ড অবজেক্টগুলির অতিরিক্ত একটি configId প্রোপার্টি থাকে যা কনফিগারেশনের আইডিগুলির সাথে মিলে যায়।
সারি	Array<Array>	অ্যারের একটি অ্যারে: প্রতিটি অ্যারে হল ডেটার একটি সারি

নমুনা tableFormat ডেটা

এটি dscc.subscribeToData() ব্যবহার করে dscc.tableFormat বিকল্পটি ব্যবহার করে নমুনা data ফেরত পাঠানো হয়েছে।

{
  "tables": {
    "DEFAULT": {
      "headers": [{
        "id": "qt_ky8sltutsb",
        "name": "dimension",
        "type": "TEXT",
        "concept": "DIMENSION",
        "configId": "configId1"
      }, {
        "id": "qt_b5bvmtutsb",
        "name": "second dim",
        "type": "TEXT",
        "concept": "DIMENSION"
        "configId": "configId1"
      }, {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC",
        "configId": "configId2"
      }],
      "rows": [
        ["Week 4", "lm", 55]
      ]
    },
    "COMPARISON": {
      "headers": [{
        "id": "qt_ky8sltutsb",
        "name": "dimension",
        "type": "TEXT",
        "concept": "DIMENSION",
        "configId": "configId1"
      }, {
        "id": "qt_b5bvmtutsb",
        "name": "second dim",
        "type": "TEXT",
        "concept": "DIMENSION"
        "configId": "configId1"
      }, {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC",
        "configId": "configId2"
      }],
      "rows": [
        ["Week 5", "no", 123]
      ]
    }
  },
  "fields": {
    "configId1": [
      {
        "id": "qt_ky8sltutsb",
        "name": "week",
        "type": "TEXT",
        "concept": "DIMENSION"
      },
      {
        "id": "qt_b5bvmtutsb",
        "name": "textId",
        "type": "TEXT",
        "concept": "DIMENSION"
      }
    ],
    "configId2": [
      {
        "id": "qt_m9dtntutsb",
        "name": "orders",
        "type": "NUMBER",
        "concept": "METRIC"
      }
    ]
  },
  "style": {
    "nodeColor": {
      "value": {
        "color": "#000000"
      }
    }
  },
  "theme": {},
  "dateRanges": {
    "DEFAULT": {
      "start": "20210501",
      "end": "20210531"
    },
    "COMPARISON": {
      "start": "20200501",
      "end": "20200531"
    }
  },
  "interactions": {
    "onClick": {
      "value": {
        "type": "FILTER",
        "data": {
          "concepts": [
            "qt_h6oibrb6wb",
            "qt_i6oibrb6wb"
          ],
          "values": [
            [
              "Afternoon",
              "Sunday"
            ],
            [
              "Afternoon",
              "Thursday"
            ],
            [
              "Morning",
              "Tuesday"
            ]
          ]
        }
      },
      "supportedActions": [
        "FILTER"
      ]
    }
  }
}

অবজেক্টফরম্যাট রেফারেন্স

অবজেক্টরো

{
  configId1: array(string | bool | number),
  configId2: array(string | bool | number)
}

মাঠ	আদর্শ	বিবরণ
কনফিগার আইডি	অ্যারে	একটি নির্দিষ্ট কনফিগারেশন আইডির সাথে সম্পর্কিত মানগুলির অ্যারে

নমুনা বস্তুর ফর্ম্যাট ডেটা

এটি dscc.subscribeToData() ব্যবহার করে dscc.objectFormat বিকল্পটি ব্যবহার করে নমুনা data ফেরত পাঠানো হয়েছে।

{
  "tables": {
    "COMPARISON": [
      {
        "configId1": ["Week 5", "cd"],
        "configId2": [123]
      }
    ],
    "DEFAULT": [
      {
        "configId1": ["Week 1", "ab"],
        "configId2": [24]
      }
    ]
  },
  "fields": {
    "configId1": [
      {
        "id": "qt_h6oibrb6wb",
        "name": "time of day",
        "type": "TEXT",
        "concept": "DIMENSION"
      },
      {
        "id": "qt_i6oibrb6wb",
        "name": "day",
        "type": "TEXT",
        "concept": "DIMENSION"
      }
    ],
    "configId2": [
      {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC"
      }
    ]
  },
  "style": {
    "nodeColor": {
      "value": {
        "color": "#000000"
      }
    }
  },
  "theme": {},
  "dateRanges": {
    "DEFAULT": {
      "start": "20210501",
      "end": "20210531"
    },
    "COMPARISON": {
      "start": "20200501",
      "end": "20200531"
    }
  },
  "interactions": {
    "onClick": {
      "value": {
        "type": "FILTER",
        "data": {
          "concepts": [
            "qt_h6oibrb6wb",
            "qt_i6oibrb6wb"
          ],
          "values": [
            [
              "Afternoon",
              "Sunday"
            ],
            [
              "Afternoon",
              "Thursday"
            ],
            [
              "Morning",
              "Tuesday"
            ]
          ]
        }
      },
      "supportedActions": [
        "FILTER"
      ]
    }
  }
}