مرجع کتابخانه Looker Studio Community Component (dscc).

نمای کلی API

dscc (کامپوننت جامعه استودیو Looker) کتابخانه ای است برای کمک به ساخت مؤلفه های انجمن برای 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 ارسال می کند.

پارامترها:

نام تایپ کنید توضیحات
شناسه اقدام string رشته ای که با actionId در پیکربندی مطابقت دارد
تعامل 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
ارزش ها 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 ارسال می کند تا فیلتری را که قبلاً توسط این تجسم تنظیم شده است پاک کند.

پارامترها:

نام تایپ کنید توضیحات
شناسه اقدام string رشته ای که با actionId در پیکربندی مطابقت دارد
تعامل enum(InteractionType) به استودیوی Looker در مورد تعامل می گوید

استفاده از 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)
}
میدان تایپ کنید توضیحات
زمینه ها object(fieldsByConfigId) یک شی که حاوی فیلدهایی است که توسط configId آنها نمایه شده است
سبک object(styleById) یک شی که شامل اشیاء سبک است که توسط configId آنها نمایه شده است
تعاملات object(interactionsById) یک شی که شامل اشیاء تعاملی است
موضوع themeStyle یک شیء themeStyle که حاوی اطلاعات استایل تم برای گزارش است
جداول object(tablesById) یک شی که حاوی tableObjects است
محدوده تاریخ object(dateRangesById) یک شی که حاوی dateRanges است

fieldsByConfigId

{
   configId: array(field)
}

شی fieldsByConfigId حاوی آرایه هایی از اشیاء فیلد است که توسط "id" تعریف شده در پیکربندی تجسم نمایه شده است. یک ورودی در این شی برای هر dataField تعریف شده در پیکربندی وجود دارد.

میدان تایپ کنید توضیحات
configId Array<field> آرایه ای از فیلد(های) مرتبط با dataField

زمینه

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

شی field اطلاعات مربوط به فیلدی را که کاربر در پنل ویژگی انتخاب می کند، ارائه می دهد.

میدان تایپ کنید توضیحات
شناسه string استودیوی Looker ID برای این فیلد ایجاد کرد
نام string نام فیلد قابل خواندن برای انسان
توضیحات string شرح رشته
نوع enum(fieldType) نوع معنایی فیلد
مفهوم enum(conceptType) مفهوم نوع زمینه

styleById

{
   configId: styleValue
}

شی styleById اطلاعات سبک نمایه شده توسط "id" تعریف شده در پیکربندی تجسم را فراهم می کند.

میدان تایپ کنید توضیحات
configId styleValue یک شی که حاوی مقدار سبک و مقدار سبک پیش فرض تعریف شده توسط پیکربندی است

styleValue

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

شی styleValue هم مقدار سبک انتخاب شده توسط کاربر و هم مقدار پیش فرض تعریف شده در پیکربندی را ارائه می دهد. نوع value و defaultValue به عنصر style بستگی دارد.

میدان تایپ کنید توضیحات
ارزش string OR object OR bool OR number مقدار عنصر سبک از انتخاب کاربر در پانل ویژگی بازگردانده شده است
مقدار پیش فرض string OR object OR bool OR number مقدار پیش فرض عنصر style که در پیکربندی تجسم تعریف شده است

تعاملاتById

{

}

شی interactionsById داده های تعاملی را که توسط پیکربندی تجسم interactionId نمایه شده است، ارائه می دهد.

شاخص تایپ کنید توضیحات
configId interaction یک شی که حاوی داده های مرتبط با یک تعامل است

میدان تعامل

{
  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}
رنگ قلم object یک شی با فرمت {color: string, opacity: number}
accentFillColor object یک شی با فرمت {color: string, opacity: number}
accentFontColor object یک شی با فرمت {color: string, opacity: number}
fontFamily string رشته ای که خانواده فونت ها را توصیف می کند
accentFontFamily string رشته ای که خانواده فونت تاکیدی را توصیف می کند
افزایش رنگ object یک شی با فرمت {color: string, opacity: number}
کاهش رنگ object یک شی با فرمت {color: string, opacity: number}
gridColor object یک شی با فرمت {color: string, opacity: number}
رنگ سری 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 تنها در صورتی پر می شوند که محدوده تاریخ مربوطه توسط کاربر پیکربندی شده باشد. داده‌های محدوده تاریخ به داده‌های پیش‌فرض و مقایسه‌ای که در جدول‌هایById تعریف شده‌اند، مرتبط هستند.

میدان تایپ کنید توضیحات
"پیش فرض" object(dateRange) dateRange مرتبط با محدوده تاریخ پیش‌فرض، در صورت وجود.
"مقایسه" object(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"
      ]
    }
  }
}