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

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

API এর ওভারভিউ

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

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

getWidth()

নাম	পরামিতি	রিটার্ন টাইপ	বর্ণনা
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() ফাংশন ফিল্টারের জন্য ডেটা সহ লুকার স্টুডিওতে একটি বার্তা পাঠায়।

পরামিতি:

নাম	টাইপ	বর্ণনা
অ্যাকশন আইডি	string	কনফিগারেশনের অ্যাকশনআইডির সাথে সঙ্গতিপূর্ণ স্ট্রিং
মিথস্ক্রিয়া	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	কনফিগারেশনের অ্যাকশনআইডির সাথে সঙ্গতিপূর্ণ স্ট্রিং
মিথস্ক্রিয়া	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() ফাংশন লুকার স্টুডিও থেকে বার্তা সাবস্ক্রাইব করে।

পরামিতি:

নাম	টাইপ	বর্ণনা
কলব্যাক(ডেটা)	function	একটি ফাংশন যা subscribeToData দ্বারা ফেরত ডেটা নেয়।
বিকল্প	object	পছন্দসই ডেটা রিটার্ন বিন্যাস সংজ্ঞায়িত করে

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

{
  transform: dscc.tableTransform | dscc.objectTransform
}

রিটার্ন মান:

টাইপ	বর্ণনা
function	Looker Studio থেকে আরও বার্তা থেকে 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)	একটি অবজেক্ট যা তাদের কনফিগার আইডি দ্বারা সূচীকৃত স্টাইল অবজেক্ট ধারণ করে
মিথস্ক্রিয়া	object(interactionsById)	একটি বস্তু যা মিথস্ক্রিয়া বস্তু ধারণ করে
থিম	themeStyle	একটি থিমস্টাইল অবজেক্ট যাতে রিপোর্টের জন্য থিম স্টাইলিং তথ্য থাকে
টেবিল	object(tablesById)	টেবিল অবজেক্ট ধারণ করে এমন একটি বস্তু
তারিখ রেঞ্জ	object(dateRangesById)	তারিখরেঞ্জ ধারণ করে এমন একটি বস্তু

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)	ক্ষেত্রের ধারণার ধরন

styleById

{
   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 অবজেক্টে কনফিগারেশনে সংজ্ঞায়িত সমর্থিত অ্যাকশনের অ্যারে রয়েছে, সেইসাথে ইন্টারঅ্যাকশনের জন্য ব্যবহারকারী-নির্বাচিত মান রয়েছে।

মাঠ	টাইপ	বর্ণনা
মান	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 অবজেক্ট ভিজ্যুয়ালাইজেশনে রিপোর্ট থিম তথ্য পাস করে।

মাঠ	টাইপ	বর্ণনা
fillColor	object	বিন্যাসের একটি বস্তু {color: string, opacity: number}
ফন্ট কালার	object	বিন্যাসের একটি বস্তু {color: string, opacity: number}
accentFillColor	object	বিন্যাসের একটি বস্তু {color: string, opacity: number}
অ্যাকসেন্ট ফন্ট কালার	object	বিন্যাসের একটি বস্তু {color: string, opacity: number}
ফন্ট ফ্যামিলি	string	ফন্ট পরিবার বর্ণনা করে একটি স্ট্রিং
accentFontFamily	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 প্রতিটি সারির জন্য শিরোনাম এবং ডেটা তথ্য সরবরাহ করে। "ডিফল্ট" সর্বদা ডেটা প্রদান করবে, এবং "তুলনা" শুধুমাত্র তখনই পপুলেট করা হবে যদি ব্যবহারকারী তুলনা সারিগুলির সাথে ডেটা কনফিগার করে।

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

মাঠ	টাইপ	বর্ণনা
"ডিফল্ট"	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.tableFormat বিকল্পের সাথে dscc.subscribeToData() ব্যবহার করে ফেরত দেওয়া নমুনা 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.objectFormat বিকল্পের সাথে dscc.subscribeToData() ব্যবহার করে ফেরত দেওয়া নমুনা 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"
      ]
    }
  }
}