نظرة عامة على واجهة برمجة التطبيقات
dscc
(مكوِّن منتدى Looker Studio) هو مكتبة للمساعدة في إنشاء
مكونات المنتدى في Looker Studio. يمكن العثور على رمز المصدر على
GitHub.
تعرض الدالة dscc
ثلاث دوال: getWidth()
وgetHeight()
و
subscribeToData()
getWidth()
الاسم | المعلمات | نوع القيمة التي يتم عرضها | الوصف |
---|---|---|---|
getWidth() | لا ينطبق | number
|
تعرض عرض iframe، في بكسل |
جارٍ استخدام getWidth()
// to get the width of the iframe
var width = dscc.getWidth();
getHeight()
الاسم | المعلمات | نوع القيمة التي يتم عرضها | الوصف |
---|---|---|---|
getHeight() | لا ينطبق | int
|
لعرض ارتفاع iframe بالبكسل |
جارٍ استخدام getHeight()
// to get the height of the iframe
var height = dscc.getHeight();
sendInteraction()
ترسل الدالة sendInteraction()
رسالة إلى أداة Looker Studio تحتوي على البيانات.
لأحد الفلاتر.
المَعلمات:
الاسم | النوع | الوصف |
---|---|---|
actionID | string
|
السلسلة التي يتجاوب مع رقم تعريف الإجراء في الإعدادات |
تفاعل | enum(InteractionType)
|
إبلاغ Looker استوديو حول التفاعل |
البيانات | object(InteractionData)
|
لتوفير البيانات المطلوبة لمدة تفاعل |
InteractionType
السمة InteractionType
الوحيدة الصالحة حاليًا هي FILTER
.
الاسم | النوع | الوصف |
---|---|---|
dscc.InteractionType.FILTER | Enum | وصف التفاعل "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 |
values | Array<Array>
|
مصفوفة متداخلة لقيم البيانات. كل مصفوفة فرعية
يجب أن يكون طول المصفوفة concepts .
تتجاوب كل قيمة في المصفوفة الفرعية مع
قيمة البُعد. |
نموذج interactionData
:
var interactionData = {
"concepts": ["dim1Id", "dim2Id"],
"values": [
["dim1Val1", "dim2Val1"],
["dim1Val2", "dim2Val2"]
]
}
إنّ استخدام dscc.sendInteraction
مع interactionData
أعلاه يعادل
عبارة SQL التالية:
SELECT data WHERE
(dim1 == dim1Val1 AND dim2 == dim2Val1)
OR
(dim1 == dim1Val2 AND dim2 == dim2Val2);
clearInteraction()
ترسل الدالة clearInteraction()
رسالة إلى Looker Studio لمحو
التي تم تعيينها سابقًا بواسطة هذا التصور.
المَعلمات:
الاسم | النوع | الوصف |
---|---|---|
actionID | string
|
تتجاوب السلسلة مع ActionId في الإعدادات |
تفاعل | enum(InteractionType)
|
تخبر Looker Studio تفاعل |
جارٍ استخدام 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 " في خدمة تلقّي رسائل أخرى من Looker Studio |
جارٍ استخدام 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
هذا هو العنصر الذي تم تمريره إلى callback
المسجَّل في
dscc.subscribeToData
في ما يلي الحقول التي تمت مشاركتها بين
"dscc.objectFormat
" وdscc.tableFormat
"
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById)
}
الحقل | النوع | الوصف |
---|---|---|
fields | object(fieldsByConfigId)
|
كائن يحتوي على الحقول المفهرَسة بواسطة رقم تعريف الضبط |
النمط | object(styleById)
|
كائن يحتوي على عناصر نمطية تمت الفهرسة من خلال configId |
التفاعلات | object(interactionsById)
|
كائن يحتوي على التفاعل الكائنات |
مظهر | themeStyle
|
كائن themeStyle الذي يحتوي على نمط التصميم معلومات التقرير |
جداول | object(tablesById)
|
كائن يحتوي على tableObjects |
dateRanges | object(dateRangesById)
|
كائن يحتوي على dateRanges |
fieldsByConfigId
{
configId: array(field)
}
يحتوي العنصر fieldsByConfigId
على مصفوفات من عناصر الحقول المفهرَسة.
باستخدام "id" المحدد في
تكوين التصور. تتوفر
إدخال واحد في هذا الكائن لكل dataField
تم تحديدها في الإعدادات.
الحقل | النوع | الوصف |
---|---|---|
configId | Array<field> |
مصفوفة من الحقول المرتبطة بحقل البيانات |
الحقل
{
id: fieldId,
name: string,
description: string,
type: fieldType,
concept: enum(conceptType)
}
يقدّم عنصر field
معلومات عن الحقل الذي يختاره المستخدم في
لوحة الملكية.
الحقل | النوع | الوصف |
---|---|---|
id | string |
رقم التعريف الذي تم إنشاؤه للحقل في Looker Studio |
الاسم | string |
اسم الحقل الذي يمكن لشخص عادي قراءته |
الوصف | string |
وصف الحقل |
كتابة | enum(fieldType) |
semanticType للحقل |
مفهوم | enum(conceptType) |
conceptType الحقل |
styleById
{
configId: styleValue
}
يوفّر الكائن styleById
معلومات النمط المفهرَسة بواسطة "id" محددة في
تهيئة التصور.
الحقل | النوع | الوصف |
---|---|---|
configId | styleValue
|
كائن يحتوي على قيمة النمط قيمة النمط التلقائي المحددة بالتهيئة |
styleValue
{
value: string | object | bool | number,
defaultValue: string | object | bool | number
}
يوفر الكائن styleValue
قيمة النمط التي يختارها المستخدم
المحددة في الإعداد. نوع value
وdefaultValue
تعتمد على عنصر النمط.
الحقل | النوع | الوصف |
---|---|---|
القيمة | string OR object OR bool OR
number
|
قيمة عنصر النمط التي تم عرضها من خلال اختيار المستخدم في لوحة المواقع |
defaultValue | string OR object OR bool OR
number
|
القيمة التلقائية للنمط المحدد في إعدادات العرض المرئي |
interactionsById
{
}
يوفّر العنصر interactionsById
بيانات التفاعل المفهرَسة بواسطة
interactionId
تهيئة التصور.
الفهرس | النوع | الوصف |
---|---|---|
configId | interaction
|
يشير هذا المصطلح إلى كائن يحتوي على بيانات مرتبطة تفاعل |
interactionField
{
value: object(interactionValue),
supportedActions: array(InteractionType)
}
يحتوي العنصر interactionField
على مصفوفة متوافقة من الإجراءات المحدّدة في
والتكوين، بالإضافة إلى القيم التي اختارها المستخدم للتفاعل.
الحقل | النوع | الوصف |
---|---|---|
القيمة | string OR object OR
bool OR number
|
قيمة عنصر النمط التي تم عرضها من خلال اختيار المستخدم في لوحة المواقع |
supportedActions | Array<InteractionType>
|
الإجراءات المدعومة من هذه التفاعل، كما هو محدد في الإعدادات |
interactionValue
يوفّر الكائن interactionValue
قيمًا من اختيار المستخدم للتفاعل.
الكتابة. في حال توفُّر مفتاح data
، سيعكس الكائن InteractionData
الحالة الحالية للفلتر. في حال عدم توفّر مفتاح data
، سيكون العرض المرئي
لم يتمّ إعداده حاليًا كفلتر.
{
type: enum(InteractionType)
data: object(interactionData) | None
}
الحقل | النوع | الوصف |
---|---|---|
كتابة | enum(InteractionType)
|
المحتوى الذي اختاره المستخدم 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} |
fontColor | object
|
كائن بالتنسيق {color:
string, opacity: number} |
accentFillColor | object
|
كائن بالتنسيق {color:
string, opacity: number} |
accentFontColor | object
|
كائن بالتنسيق {color:
string, opacity: number} |
fontFamily | string |
سلسلة تصف مجموعة الخطوط |
accentFontFamily | string
|
سلسلة تصف خط التمييز عائلة |
increaseColor | object
|
كائن بالتنسيق {color:
string, opacity: number} |
decreaseColor | object
|
كائن بالتنسيق {color:
string, opacity: number} |
gridColor | object
|
كائن بالتنسيق {color:
string, opacity: number} |
seriesColor | Array<object>
|
تتيح صفيفة كائنات
التنسيق{color: string, opacity:
number} |
tablesById
{
"DEFAULT": object(tableObject),
"COMPARISON": object(tableObject) | undefined
}
توفّر tableObject
معلومات العنوان والبيانات لكل صف. "تلقائي"
ستعرض دائمًا البيانات، وستقوم "COMPARISON" ستتم تعبئته فقط إذا كان المستخدم
لإعداد البيانات باستخدام صفوف المقارنة.
إنّ تنسيق tableObject هو الاختلاف الوحيد بين dscc.tableFormat
.
وdscc.objectFormat
.
الحقل | النوع | الوصف |
---|---|---|
"تلقائي" | object(tableObject) OR
Array<objectRow>
|
tableObject المرتبطة بـ
البيانات التي يضيفها المستخدم إلى
التصور |
"مقارنة" | object(tableObject) OR
Array<objectRow>
|
tableObject المرتبطة بـ
بيانات مقارنة التواريخ، إذا
سارٍ |
dateRangesById
{
"DEFAULT": object(dateRange),
"COMPARISON": object(dateRange)
}
يقدّم الكائن dateRangesById
معلومات عن الإعدادات التلقائية والمقارنة.
النطاقات الزمنية. وإذا لم تكن هناك نطاقات زمنية، فسيكون العنصر
فارغ. لن تتم تعبئة DEFAULT
وCOMPARISON
إلا في حال التاريخ ذي الصلة.
النطاقات التي يتم تكوينها من قبل المستخدم. ترتبط البيانات في النطاقات الزمنية
البيانات التلقائية وبيانات المقارنة كما هو محدّد في tablesById.
الحقل | النوع | الوصف |
---|---|---|
"تلقائي" | object(dateRange)
|
dateRange المرتبطة
النطاق الزمني التلقائي، إذا كان ذلك منطبقًا. |
"مقارنة" | object(dateRange)
|
dateRange المرتبطة
النطاق الزمني للمقارنة، إذا كان ذلك منطبقًا |
dateRange
{
start: string,
end: string
}
يقدّم عنصر dateRange
معلومات عن تاريخَي البدء والانتهاء
النطاق الزمني التلقائي أو للمقارنة.
الحقل | النوع | الوصف |
---|---|---|
بدء | string |
تاريخ بدء النطاق الزمني بالتنسيق YYYYMMDD. |
إنهاء | string |
تاريخ انتهاء النطاق الزمني بالتنسيق YYYYMMDD. |
مرجع واحد (tableFormat
)
tableObject
{
headers: array(object),
rows: array(array)
}
الحقل | النوع | الوصف |
---|---|---|
الرؤوس | Array
|
مصفوفة من كائنات الحقول. تحتوي هذه الحقول
الكائنات تشمل أيضًا السمة configId
يتجاوب مع المعرّفات من الإعدادات. |
صفوف | Array<Array> |
صفيف من الصفائف: كل صفيف هو صف من البيانات |
نموذج بيانات tableFormat
هذا هو النموذج "data
" الذي تم إرجاعه باستخدام الحقل "dscc.subscribeToData()
" مع الخيار.
dscc.tableFormat
{
"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"
]
}
}
}
مرجع objectFormat
objectRow
{
configId1: array(string | bool | number),
configId2: array(string | bool | number)
}
الحقل | النوع | الوصف |
---|---|---|
configId | صفيف | مصفوفة من القيم المرتبطة برقم تعريف إعداد معيّن |
نموذج بيانات objectFormat
هذا هو النموذج "data
" الذي تم إرجاعه باستخدام الحقل "dscc.subscribeToData()
" مع الخيار.
dscc.objectFormat
{
"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"
]
}
}
}