مرجع کتابخانه 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"
      ]
    }
  }
}