การอ้างอิงไลบรารีคอมโพเนนต์ชุมชนของ Looker Studio (dscc)

หมายเหตุ: ฟีเจอร์การแสดงภาพข้อมูลจากชุมชนอยู่ใน "ตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์" เพื่อเรียนรู้ เพิ่มเติมเกี่ยวกับฟีเจอร์และการปรับปรุงที่กำลังจะเกิดขึ้นในช่วงเวลานี้ โปรดไปที่ หน้าตัวอย่างสำหรับนักพัฒนาแอป

ภาพรวมของ API

dscc (คอมโพเนนต์ของชุมชน Looker Studio) เป็นไลบรารีที่ช่วยในการสร้าง คอมโพเนนต์ชุมชนสำหรับ Looker Studio คุณสามารถดูซอร์สโค้ดได้ที่ GitHub

dscc แสดงฟังก์ชัน 3 รายการ ได้แก่ 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 เกี่ยวกับสตูดิโอ การโต้ตอบ
ข้อมูล	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"]
    ]
}

การใช้ 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(ข้อมูล)	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)	ออบเจ็กต์ที่มี การโต้ตอบ ออบเจ็กต์
ธีม [theme]	themeStyle	ออบเจ็กต์ themeStyle ที่มีการจัดรูปแบบธีม ข้อมูลสำหรับรายงาน
ตาราง	object(tablesById)	ออบเจ็กต์ที่มี tableObjects
dateRanges	object(dateRangesById)	ออบเจ็กต์ที่มี dateRanges

fieldsByConfigId

{
   configId: array(field)
}

ออบเจ็กต์ fieldsByConfigId มีอาร์เรย์ของออบเจ็กต์ช่องที่จัดทำดัชนี ตาม "id" ที่กำหนดไว้ใน การกำหนดค่าการแสดงภาพ มี 1 รายการในออบเจ็กต์นี้สำหรับแต่ละ 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 ขึ้นอยู่กับองค์ประกอบของรูปแบบ

ช่อง	ประเภท	คำอธิบาย
value	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 ที่กำหนดไว้ใน รวมถึงค่าที่ผู้ใช้เลือกสำหรับการโต้ตอบ

ช่อง	ประเภท	คำอธิบาย
value	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)	ข้อมูล ที่เชื่อมโยงกับสถานะปัจจุบันของ ตัวกรอง ไม่มีคีย์นี้ หากล้างตัวกรองแล้ว

ธีม [theme]

{
  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" จะแสดงก็ต่อเมื่อผู้ใช้ กำหนดค่าข้อมูลด้วยแถวการเปรียบเทียบ

รูปแบบของตารางออบเจ็กต์คือความแตกต่างเพียงอย่างเดียวระหว่าง 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	วันที่เริ่มต้นของช่วงวันที่ในรูปแบบ ปปปปดดวว
end	string	วันที่สิ้นสุดของช่วงวันที่ในรูปแบบ ปปปปดดวว

ข้อมูลอ้างอิง 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"
      ]
    }
  }
}