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

দ্রষ্টব্য: কমিউনিটি ভিজ্যুয়ালাইজেশন ফিচারটি 'ডেভেলপার প্রিভিউ' পর্যায়ে রয়েছে। এই সময়কালে আসন্ন ফিচার ও উন্নয়নসমূহ সম্পর্কে আরও জানতে ডেভেলপার প্রিভিউ পেজটি দেখুন।

এপিআই-এর সংক্ষিপ্ত বিবরণ

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

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

getWidth()

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

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

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

getHeight()

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

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

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

sendInteraction()

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

পরামিতি:

নাম	প্রকার	বর্ণনা
অ্যাকশনআইডি	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()

` 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() ফাংশনটি ডেটা স্টুডিও থেকে মেসেজ সাবস্ক্রাইব করে।

পরামিতি:

নাম	প্রকার	বর্ণনা
কলব্যাক(ডেটা)	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)	একটি অবজেক্ট যাতে তারিখের পরিসর থাকে

ফিল্ডসবাইকনফিগআইডি

{
   configId: array(field)
}

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

মাঠ	প্রকার	বর্ণনা
কনফিগআইডি	Array<field>	dataField-এর সাথে সংশ্লিষ্ট ফিল্ড(গুলি)-র একটি অ্যারে

ক্ষেত্র

{
  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

{

}

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.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"
      ]
    }
  }
}