การอ้างอิงไลบรารีคอมโพเนนต์ชุมชนของ 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 พร้อมข้อมูลสำหรับตัวกรอง

พารามิเตอร์ ได้แก่

ชื่อ	Type	คำอธิบาย
actionID	string	สตริงที่ตรงกับ actionId ในการกำหนดค่า
การโต้ตอบ	enum(InteractionType)	บอก Looker Studio เกี่ยวกับ การโต้ตอบ
ข้อมูล	object(InteractionData)	ให้ข้อมูลที่จำเป็น สำหรับการโต้ตอบ

InteractionType

ขณะนี้ InteractionType เพียงรายการเดียวที่ใช้ได้คือ FILTER

ชื่อ	Type	คำอธิบาย
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))
}

ฟิลด์	Type	คำอธิบาย
แนวคิด	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 เพื่อล้างตัวกรองที่การแสดงภาพนี้กำหนดไว้ก่อนหน้านี้

พารามิเตอร์ ได้แก่

ชื่อ	Type	คำอธิบาย
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

พารามิเตอร์ ได้แก่

ชื่อ	Type	คำอธิบาย
โค้ดเรียกกลับ(ข้อมูล)	function	ฟังก์ชันที่รับข้อมูลที่ subscribeToData แสดงผล
ตัวเลือก	object	กำหนดรูปแบบการแสดงผลข้อมูลที่ต้องการ

ออบเจ็กต์ตัวเลือกจะมีลักษณะดังนี้

{
  transform: dscc.tableTransform | dscc.objectTransform
}

ผลลัพธ์:

Type	คำอธิบาย
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)
}

ฟิลด์	Type	คำอธิบาย
Fields	object(fieldsByConfigId)	ออบเจ็กต์ที่มีช่องที่จัดทำดัชนีโดย configId
รูปแบบ	object(styleById)	ออบเจ็กต์ที่มีออบเจ็กต์รูปแบบที่จัดทำดัชนีโดย configId
การโต้ตอบ	object(interactionsById)	ออบเจ็กต์ที่มีออบเจ็กต์การโต้ตอบ
ธีม [theme]	themeStyle	ออบเจ็กต์ themeStyle ที่มีข้อมูลการจัดรูปแบบธีมสำหรับรายงาน
ตาราง	object(tablesById)	ออบเจ็กต์ที่มี tableObjects
dateRanges	object(dateRangesById)	ออบเจ็กต์ที่มี dateRanges

fieldsByConfigId

{
   configId: array(field)
}

ออบเจ็กต์ fieldsByConfigId มีอาร์เรย์ของออบเจ็กต์ field ที่จัดทำดัชนีตาม "id" ที่กำหนดไว้ในการกำหนดค่าการแสดงภาพ ออบเจ็กต์นี้มี 1 รายการในออบเจ็กต์นี้สำหรับ dataField แต่ละรายการที่กำหนดไว้ในการกำหนดค่า

ฟิลด์	Type	คำอธิบาย
configId	Array<field>	อาร์เรย์ของช่องที่เชื่อมโยงกับ dataField

พื้นที่

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

ออบเจ็กต์ field ให้ข้อมูลเกี่ยวกับช่องที่ผู้ใช้เลือกในแผงพร็อพเพอร์ตี้

ฟิลด์	Type	คำอธิบาย
id	string	Looker Studio สร้างรหัสสําหรับช่องนี้
ชื่อ	string	ชื่อช่องที่มนุษย์อ่านได้
คำอธิบาย	string	คำอธิบายของช่อง
ประเภท	enum(fieldType)	semanticType ของช่อง
แนวคิด	enum(conceptType)	conceptType ของช่อง

styleById

{
   configId: styleValue
}

ออบเจ็กต์ styleById มีข้อมูลรูปแบบที่จัดทำดัชนีโดย "id" ที่กำหนดไว้ในการกำหนดค่าการแสดงภาพ

ฟิลด์	Type	คำอธิบาย
configId	styleValue	ออบเจ็กต์ที่มีค่าสไตล์และสไตล์เริ่มต้นที่กำหนดค่า

styleValue

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

ออบเจ็กต์ styleValue ให้ทั้งค่าสไตล์ที่ผู้ใช้เลือกและค่าเริ่มต้นที่กําหนดไว้ในการกําหนดค่า ประเภทของ value และ defaultValue ขึ้นอยู่กับองค์ประกอบของรูปแบบ

ฟิลด์	Type	คำอธิบาย
value	string OR object OR bool OR number	ค่าขององค์ประกอบรูปแบบ ที่แสดงผลจากการเลือกของผู้ใช้ ในแผงคุณสมบัติ
defaultValue	string OR object OR bool OR number	ค่าเริ่มต้นขององค์ประกอบรูปแบบ ที่กำหนดในการกำหนดค่าภาพ

interactionsById

{

}

ออบเจ็กต์ interactionsById ให้ข้อมูลการโต้ตอบที่จัดทำดัชนีโดยการกำหนดค่าภาพ interactionId

ดัชนี	Type	คำอธิบาย
configId	interaction	ออบเจ็กต์ที่มีข้อมูลที่เชื่อมโยงกับการโต้ตอบ

interactionField

{
  value: object(interactionValue),
  supportedActions: array(InteractionType)
}

ออบเจ็กต์ interactionField มีอาร์เรย์ของ supportedActions ที่ระบุไว้ในการกำหนดค่า รวมถึงค่าที่ผู้ใช้เลือกสำหรับการโต้ตอบด้วย

ฟิลด์	Type	คำอธิบาย
value	string OR object OR bool OR number	ค่าขององค์ประกอบรูปแบบ ที่แสดงผลจากการเลือกของผู้ใช้ ในแผงคุณสมบัติ
supportedActions	Array<InteractionType>	การทำงานที่การโต้ตอบนี้รองรับ ตามที่ระบุไว้ในการกำหนดค่า

interactionValue

ออบเจ็กต์ interactionValue มีค่าที่ผู้ใช้เลือกสำหรับประเภทการโต้ตอบ หากมีคีย์ data อยู่ ออบเจ็กต์ InteractionData จะแสดงสถานะปัจจุบันของตัวกรอง หากไม่มีคีย์ data แสดงว่าไม่ได้กำหนดค่าการแสดงภาพเป็นตัวกรองในขณะนี้

{
  type: enum(InteractionType)
  data: object(interactionData) | None
}

ฟิลด์	Type	คำอธิบาย
ประเภท	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 ส่งผ่านข้อมูลธีมรายงานไปยังการแสดงภาพ

ฟิลด์	Type	คำอธิบาย
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 จะแสดงข้อมูลส่วนหัวและข้อมูลสำหรับแต่ละแถว "ค่าเริ่มต้น" จะแสดงผลข้อมูลเสมอ และ "เปรียบเทียบ" จะป้อนข้อมูลเฉพาะในกรณีที่ผู้ใช้กำหนดค่าข้อมูลด้วยแถวการเปรียบเทียบ

รูปแบบของ TableObject คือความแตกต่างเพียงอย่างเดียวระหว่าง dscc.tableFormat กับ dscc.objectFormat

ฟิลด์	Type	คำอธิบาย
"DEFAULT"	object(tableObject) OR Array<objectRow>	tableObject ที่เชื่อมโยงกับข้อมูลที่ผู้ใช้เพิ่มลงในการแสดงภาพ
"การเปรียบเทียบ"	object(tableObject) OR Array<objectRow>	tableObject ที่เชื่อมโยงกับข้อมูลการเปรียบเทียบวันที่ หากมี

dateRangesById

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

ออบเจ็กต์ dateRangesById ให้ข้อมูลเกี่ยวกับช่วงวันที่เริ่มต้นและการเปรียบเทียบ หากไม่มีช่วงวันที่ ออบเจ็กต์จะว่างเปล่า ระบบจะป้อนข้อมูล DEFAULT และ COMPARISON ก็ต่อเมื่อผู้ใช้กำหนดค่าช่วงวันที่ที่เกี่ยวข้องไว้เท่านั้น ข้อมูลในช่วงวันที่จะเกี่ยวข้องกับข้อมูลเริ่มต้นและข้อมูลการเปรียบเทียบตามที่ระบุไว้ใน tablesById

ฟิลด์	Type	คำอธิบาย
"DEFAULT"	object(dateRange)	dateRange ที่เชื่อมโยงกับช่วงวันที่เริ่มต้น หากมี
"การเปรียบเทียบ"	object(dateRange)	dateRange ที่เชื่อมโยงกับช่วงวันที่เปรียบเทียบ (หากมี)

dateRange

{
  start: string,
  end: string
}

ออบเจ็กต์ dateRange ให้ข้อมูลเกี่ยวกับวันที่เริ่มต้นและวันที่สิ้นสุดของช่วงวันที่เริ่มต้นหรือการเปรียบเทียบ

ฟิลด์	Type	คำอธิบาย
เริ่มต้น	string	วันที่เริ่มต้นของช่วงวันที่ในรูปแบบ ปปปปดดวว
สิ้นสุด	string	วันที่สิ้นสุดของช่วงวันที่ในรูปแบบ ปปปปดดวว

การอ้างอิง tableFormat รายการ

tableObject

{
  headers: array(object),
  rows: array(array)
}

ฟิลด์	Type	คำอธิบาย
headers	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)
}

ฟิลด์	Type	คำอธิบาย
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"
      ]
    }
  }
}