การอ้างอิงไลบรารีคอมโพเนนต์ชุมชนของ 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 Studio Studio เกี่ยวกับ การโต้ตอบ
เพิ่มเติม	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
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)	ออบเจ็กต์ที่มีออบเจ็กต์ การโต้ตอบ
ธีม [theme]	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 จะขึ้นอยู่กับองค์ประกอบรูปแบบ

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

ช่อง	ประเภท	คำอธิบาย
start	string	วันที่เริ่มต้นของช่วงวันที่ในรูปแบบ ปปปปดดวว
End	string	วันที่สิ้นสุดของช่วงวันที่ในรูปแบบ ปปปปดดวว

tableFormat reference

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"
      ]
    }
  }
}