Bu sayfa, Cloud Translation API ile çevrilmiştir.

Looker Studio Topluluk Bileşeni (dscc) kitaplığı referansı

API'ye genel bakış

dscc (Looker Studio Topluluk Bileşeni), Looker Studio için topluluk bileşenleri oluşturmaya yardımcı olacak bir kitaplıktır. Kaynak kodu GitHub'da bulunabilir.

dscc üç işlev sunar: getWidth(), getHeight() ve subscribeToData().

`getWidth()`

Ad	Parametreler	Dönüş Türü	Açıklama
getWidth()	Yok	`number`	iframe'in genişliğini piksel cinsinden döndürür ve

`getWidth()` kullanılıyor

// to get the width of the iframe
var width = dscc.getWidth();

`getHeight()`

Ad	Parametreler	Dönüş Türü	Açıklama
getHeight()	Yok	`int`	iframe'in yüksekliğini piksel cinsinden döndürür

`getHeight()` kullanılıyor

// to get the height of the iframe
var height = dscc.getHeight();

sendInteraction()

sendInteraction() işlevi, Looker Studio'ya filtre verilerini içeren bir mesaj gönderir.

Parametreler:

Ad	Tür	Açıklama
actionID	`string`	Yapılandırmadaki actionId değerine karşılık gelen dize
etkileşim	`enum(InteractionType)`	Looker Studio'ya etkileşim hakkında bilgi verir
veri	`object(InteractionData)`	Bir etkileşim için gerekli verileri sağlar

`InteractionType`

Şu anda geçerli tek InteractionType FILTER.

Ad	Tür	Açıklama
dscc.InteractionType.FILTER	Enum	`FILTER` etkileşimini açıklar

`sendInteraction` kullanılıyor


// 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))
}

Alan	Tür	Açıklama
kavramlar	`Array`	`fieldIds` dizisi
values	`Array<Array>`	İç içe yerleştirilmiş veri değerleri dizisi. Her alt dizi, `concepts` dizisinin uzunluğu kadar olmalıdır. Alt dizideki her değer bir boyut değerine karşılık gelir.

Örnek interactionData:

var interactionData = {
  "concepts": ["dim1Id", "dim2Id"],
  "values": [
    ["dim1Val1", "dim2Val1"],
    ["dim1Val2", "dim2Val2"]
    ]
}

Yukarıdaki interactionData ile dscc.sendInteraction kullanımı, aşağıdaki SQL ifadesine eşdeğerdir:

SELECT data WHERE
  (dim1 == dim1Val1 AND dim2 == dim2Val1)
  OR
  (dim1 == dim1Val2 AND dim2 == dim2Val2);

clearInteraction()

clearInteraction() işlevi, bu görselleştirme tarafından daha önce ayarlanmış bir filtreyi temizlemek için Looker Studio'ya mesaj gönderir.

Parametreler:

Ad	Tür	Açıklama
actionID	`string`	Yapılandırmadaki "actionId" öğesine karşılık gelen dize.
etkileşim	`enum(InteractionType)`	Looker Studio'ya etkileşim hakkında

`clearInteraction()` kullanılıyor


// 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() işlevi, Looker Studio'dan gelen mesajlara abone olur.

Parametreler:

Ad	Tür	Açıklama
geri arama(veri)	`function`	`subscribeToData` tarafından döndürülen verileri alan bir işlev.
seçenekler	`object`	İstenen veri döndürme biçimini tanımlar

Seçenekler nesnesi şuna benzer:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Döndürülen değer:

Tür	Açıklama
`function`	`callback` adresini, Looker Studio'dan gelen diğer iletilerin e-posta listesinden çıkarır

`subscribeToData()` kullanılıyor

// 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`

Bu, dscc.subscribeToData ile kayıtlı callback öğesine iletilen nesnedir. Aşağıda, dscc.objectFormat ile dscc.tableFormat arasında paylaşılan alanlar verilmiştir.

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById)
}

Alan	Tür	Açıklama
fields	`object(fieldsByConfigId)`	configId'lerine göre dizine eklenen alanları içeren bir nesne
style	`object(styleById)`	configId'leri tarafından dizine eklenmiş stil nesneleri içeren bir nesne
etkileşimler	`object(interactionsById)`	Etkileşim nesneleri içeren bir nesne
tema	`themeStyle`	Rapor için tema stil bilgilerini içeren bir themeStyle nesnesi
tablolar	`object(tablesById)`	tableObjects değerini içeren bir nesne
dateRanges	`object(dateRangesById)`	dateRanges değerini içeren bir nesne

fieldsByConfigId

{
   configId: array(field)
}

fieldsByConfigId nesnesi, görselleştirme yapılandırmasında tanımlanan "id" tarafından dizine eklenen field nesne dizileri içerir. Yapılandırmada tanımlanan her dataField için bu nesnede bir giriş vardır.

Alan	Tür	Açıklama
configId	`Array<field>`	dataField ile ilişkili alan dizisi

alan

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

field nesnesi, kullanıcının özellik panelinde seçtiği alan hakkında bilgi sağlar.

Alan	Tür	Açıklama
id	`string`	Looker Studio, alan için oluşturulan kimlik
ad	`string`	Kullanıcılar tarafından okunabilir alan adı
açıklama	`string`	Alanın açıklaması
tür	`enum(fieldType)`	Alanın semanticType öğesi
kavram	`enum(conceptType)`	Alanın conceptType öğesi

styleById

{
   configId: styleValue
}

styleById nesnesi, görselleştirme yapılandırmasında tanımlanan "id" tarafından dizine eklenen stil bilgilerini sağlar.

Alan	Tür	Açıklama
configId	`styleValue`	Stil değerini ve yapılandırma tanımlı varsayılan stil değerini içeren bir nesne.

styleValue

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

styleValue nesnesi hem kullanıcı tarafından seçilen stil değerini hem de yapılandırmada tanımlanan varsayılan değeri sağlar. value ve defaultValue türleri, stil öğesine bağlıdır.

Alan	Tür	Açıklama
value	`string OR object OR bool OR number`	Özellik panelinde kullanıcı seçiminden döndürülen stil öğesinin
defaultValue	`string OR object OR bool OR number`	Görselleştirme yapılandırmasında tanımlanan stil öğesinin

interactionsById

{

}

interactionsById nesnesi, interactionId görselleştirme yapılandırması tarafından dizine eklenen etkileşim verilerini sağlar.

Dizin	Tür	Açıklama
configId	`interaction`	Bir etkileşimle ilişkili verileri içeren bir nesne,

interactionField

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

interactionField nesnesi, yapılandırmada tanımlanan supportedActions dizisinin yanı sıra etkileşim için kullanıcı tarafından seçilen değerleri içerir.

Alan	Tür	Açıklama
value	`string OR object OR bool OR number`	Özellik panelinde kullanıcı seçiminden döndürülen stil öğesinin
supportedActions	`Array<InteractionType>`	Yapılandırmada tanımlandığı gibi, bu etkileşimin desteklediği işlemler

interactionValue

interactionValue nesnesi, etkileşim türü için kullanıcı tarafından seçilen değerleri sağlar. data anahtarı varsa InteractionData nesnesi filtrenin geçerli durumunu yansıtır. data anahtarı yoksa görselleştirme şu anda filtre olarak yapılandırılmamış demektir.

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

Alan	Tür	Açıklama
tür	`enum(InteractionType)`	Kullanıcı tarafından seçilen InteractionType
veri	`object(InteractionData)`	Filtrenin mevcut durumuyla ilişkilendirilmiş veriler. Filtre temizlenmişse bu anahtar mevcut olmaz.

tema

{
  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 nesnesi, rapor teması bilgilerini görselleştirmeye iletir.

Alan	Tür	Açıklama
fillColor	`object`	`{color: string, opacity: number}` biçiminde bir nesne
fontColor	`object`	`{color: string, opacity: number}` biçiminde bir nesne
accentFillColor	`object`	`{color: string, opacity: number}` biçiminde bir nesne
accentFontColor	`object`	`{color: string, opacity: number}` biçiminde bir nesne
fontFamily	`string`	Yazı tipi ailesini açıklayan bir dize
accentFontFamily	`string`	Aksan yazı tipi ailesini açıklayan bir dize
increaseColor	`object`	`{color: string, opacity: number}` biçiminde bir nesne
decreaseColor	`object`	`{color: string, opacity: number}` biçiminde bir nesne
gridColor	`object`	`{color: string, opacity: number}` biçiminde bir nesne
seriesColor	`Array<object>`	Şu biçimdeki nesnelerden oluşan dizi:`{color: string, opacity: number}`

tablesById

{
  "DEFAULT": object(tableObject),
  "COMPARISON": object(tableObject) | undefined
}

tableObject, her bir satır için başlık ve veri bilgileri sağlar. "VARSAYILAN" her zaman veri döndürür. "KARŞILAŞTIRMA" türü ise yalnızca kullanıcı verileri karşılaştırma satırlarıyla yapılandırırsa doldurulur.

tableObject biçimi, dscc.tableFormat ve dscc.objectFormat arasındaki tek farktır.

Alan	Tür	Açıklama
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	Bir kullanıcının görselleştirmeye eklediği verilerle ilişkili `tableObject`
"KARŞILAŞTIRMA"	`object(tableObject) OR Array<objectRow>`	Geçerliyse tarih karşılaştırma verileriyle ilişkili `tableObject`

dateRangesById

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

dateRangesById nesnesi, varsayılan ve karşılaştırma tarih aralıkları hakkında bilgi sağlar. Tarih aralığı yoksa nesne boş bırakılır. DEFAULT ve COMPARISON yalnızca ilgili tarih aralıkları kullanıcı tarafından yapılandırılırsa doldurulur. Tarih aralıklarındaki veriler, tablesById'de tanımlanan varsayılan verilerle ve karşılaştırma verileriyle ilişkilidir.

Alan	Tür	Açıklama
"DEFAULT"	`object(dateRange)`	Varsa varsayılan tarih aralığıyla ilişkilendirilen `dateRange`.
"KARŞILAŞTIRMA"	`object(dateRange)`	Varsa, karşılaştırma tarih aralığıyla ilişkilendirilmiş `dateRange`.

dateRange

{
  start: string,
  end: string
}

dateRange nesnesi, varsayılan veya karşılaştırmalı bir tarih aralığının başlangıç ve bitiş tarihleri hakkında bilgi sağlar.

Alan	Tür	Açıklama
start	`string`	Tarih aralığının YYYYAAGG biçimindeki başlangıç tarihi.
end	`string`	Tarih aralığının YYYYAAGG biçimindeki bitiş tarihi.

`tableFormat` referansı

tableObject

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

Alan	Tür	Açıklama
headers	`Array`	fields nesneleri dizisi. Bu alan nesneleri ek olarak, yapılandırmadaki kimliklere karşılık gelen bir `configId` özelliğine sahiptir.
satırlar	`Array<Array>`	Diziler dizisi: Her dizi bir veri satırıdır

Örnek `tableFormat` verileri

Bu, dscc.tableFormat seçeneğiyle dscc.subscribeToData() kullanılarak döndürülen data örneğidir.

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

nesneFormat referansı

objectRow

{
  configId1: array(string | bool | number),
  configId2: array(string | bool | number)
}

Alan	Tür	Açıklama
configId	dizi	belirli bir yapılandırma kimliğiyle ilişkili değerler dizisi

Örnek nesneFormat verileri

Bu, dscc.objectFormat seçeneğiyle dscc.subscribeToData() kullanılarak döndürülen data örneğidir.

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

Looker Studio Topluluk Bileşeni (dscc) kitaplığı referansı

API'ye genel bakış

getWidth()

getWidth() kullanılıyor

getHeight()

getHeight() kullanılıyor

sendInteraction()

InteractionType

sendInteraction kullanılıyor

interactionData

clearInteraction()

clearInteraction() kullanılıyor

subscribeToData(callback, options)

subscribeToData() kullanılıyor

data

fieldsByConfigId

alan

styleById

styleValue

interactionsById

interactionField

interactionValue

tema

tablesById

dateRangesById

dateRange

tableFormat referansı

tableObject

Örnek tableFormat verileri

nesneFormat referansı

objectRow

Örnek nesneFormat verileri

`getWidth()`

`getWidth()` kullanılıyor

`getHeight()`

`getHeight()` kullanılıyor

`InteractionType`

`sendInteraction` kullanılıyor

`interactionData`

`clearInteraction()` kullanılıyor

`subscribeToData(callback, options)`

`subscribeToData()` kullanılıyor

`data`

`tableFormat` referansı

Örnek `tableFormat` verileri