مرجع مكتبة مكوِّن منتدى Looker Studio (dscc)

نظرة عامة على واجهة برمجة التطبيقات

‫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`	السلسلة التي تتطابق مع actionId في ملف الإعداد
تفاعل	`enum(InteractionType)`	تُعلم هذه السمة Looker Studio Studio بالتفاعل
البيانات	`object(InteractionData)`	توفّر هذه السمة البيانات المطلوبة للتفاعل

`InteractionType`

في الوقت الحالي، FILTER هي InteractionType الصالحة الوحيدة.

الاسم	النوع	الوصف
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`
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.

المَعلمات:

الاسم	النوع	الوصف
callback(data)	`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)`	عنصر يحتوي على حقول مفهرسة حسب configId
النمط	`object(styleById)`	كائن يحتوي على عناصر نمط مفهرسة حسب configId
التفاعلات	`object(interactionsById)`	عنصر يحتوي على عناصر تفاعلية
مظهر	`themeStyle`	كائن themeStyle يحتوي على معلومات حول تصميم المظهر للتقرير
جداول	`object(tablesById)`	عنصر يحتوي على tableObjects
dateRanges	`object(dateRangesById)`	عنصر يحتوي على dateRanges

fieldsByConfigId

{
   configId: array(field)
}

يحتوي الكائن fieldsByConfigId على مصفوفات من كائنات field مفهرسة حسب المعرّف "id" المحدّد في إعدادات العرض. يتضمّن هذا العنصر إدخالاً واحدًا لكل dataField محدّد في ملف الإعداد.

الحقل	النوع	الوصف
configId	`Array<field>`	مصفوفة من الحقول المرتبطة بـ dataField

الحقل

{
  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 على مصفوفة supportedActions المحدّدة في الإعدادات، بالإضافة إلى القيم التي يختارها المستخدم للتفاعل.

الحقل	النوع	الوصف
القيمة	`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 معلومات العنوان والبيانات لكل صف. سيؤدي الخيار "DEFAULT" إلى عرض البيانات دائمًا، ولن يتم ملء الخيار "COMPARISON" إلا إذا أعدّ المستخدم البيانات باستخدام صفوف المقارنة.

تنسيق tableObject هو الفرق الوحيد بين dscc.tableFormat وdscc.objectFormat.

الحقل	النوع	الوصف
DEFAULT	`object(tableObject) OR Array<objectRow>`	`tableObject` المرتبط بالبيانات التي يضيفها المستخدم إلى تمثيل مرئي
"COMPARISON"	`object(tableObject) OR Array<objectRow>`	`tableObject` المرتبط ببيانات مقارنة التواريخ، إذا كان ذلك منطبقًا

dateRangesById

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

يوفّر العنصر dateRangesById معلومات حول النطاقات الزمنية التلقائية ونطاقات المقارنة. إذا لم تكن هناك نطاقات تواريخ، سيكون العنصر فارغًا. لن تتم تعبئة DEFAULT وCOMPARISON إلا إذا أعدّ المستخدم نطاقات التواريخ المعنية. تكون البيانات في النطاقات الزمنية مرتبطة بالبيانات التلقائية وبيانات المقارنة المحدّدة في tablesById.

الحقل	النوع	الوصف
DEFAULT	`object(dateRange)`	تمثّل هذه السمة `dateRange` المرتبط بالنطاق الزمني التلقائي، إذا كان ذلك منطبقًا.
"COMPARISON"	`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"
      ]
    }
  }
}

مرجع مكتبة مكوِّن منتدى Looker Studio (dscc) تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

نظرة عامة على واجهة برمجة التطبيقات

getWidth()

جارٍ استخدام getWidth()

getHeight()

جارٍ استخدام getHeight()

sendInteraction()

InteractionType

جارٍ استخدام sendInteraction

interactionData

clearInteraction()

جارٍ استخدام clearInteraction()

subscribeToData(callback, options)

جارٍ استخدام subscribeToData()

data

fieldsByConfigId

الحقل

styleById

styleValue

interactionsById

interactionField

interactionValue

مظهر

tablesById

dateRangesById

dateRange

tableFormat مرجع

tableObject

عيّنات بيانات tableFormat

مرجع objectFormat

objectRow

مثال على بيانات objectFormat

مرجع مكتبة مكوِّن منتدى Looker Studio (dscc)

`getWidth()`

جارٍ استخدام `getWidth()`

`getHeight()`

جارٍ استخدام `getHeight()`

`InteractionType`

جارٍ استخدام `sendInteraction`

`interactionData`

جارٍ استخدام `clearInteraction()`

`subscribeToData(callback, options)`

جارٍ استخدام `subscribeToData()`

`data`

`tableFormat` مرجع

عيّنات بيانات `tableFormat`