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

API'ye genel bakış

dscc (Looker Studio Topluluk Bileşeni), geliştirme ve uygulama topluluk bileşenlerinden faydalanabilirsiniz. Kaynak kodu şu adreste bulunabilir: GitHub'a gidin.

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 döndürür, piksel

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 döndürür. piksel cinsinden

getHeight() kullanılıyor

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

sendInteraction()

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

Parametreler:

Ad Tür Açıklama
actionID string Oluşturulan dize şununla karşılık gelir: eylem kimliği yapılandırma
etkileşim enum(InteractionType) Looker'a bilgi verir Studio hakkında etkileşim
veri object(InteractionData) Şunu sağlar: gerekli veriler - etkileşim

InteractionType

Şu anda yalnızca FILTER InteractionType geçerli.

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 bir alt dizi concepts dizisinin uzunluğu olmalıdır. Alt dizideki her değer bir boyut değeri.

Örnek interactionData:

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

dscc.sendInteraction alanını yukarıdaki interactionData ile kullanmak şuna eşdeğerdir: aşağıdaki SQL deyimi:

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

clearInteraction()

clearInteraction() işlevi, bir öğeyi temizlemek için Looker Studio'ya mesaj gönderir. filtre uygulayabilirsiniz.

Parametreler:

Ad Tür Açıklama
actionID string Öğeye karşılık gelen dize yapılandırmadaki actionId
etkileşim enum(InteractionType) Looker Studio'ya etkileşim

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 çağırma(veri) function Döndürülen verileri alan subscribeToData
seçenekler object İstenen veri döndürme biçimini tanımlar

Seçenekler nesnesi şöyle görünür:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Döndürülen değer:

Tür Açıklama
function callback adlı kullanıcının, Looker Studio'daki diğer iletilerin e-posta listesinden çıkmasını sağlar

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, kayıtlı callback öğesine iletilen nesnedir dscc.subscribeToData. Bunlar, her bir işletme için dscc.objectFormat ve dscc.tableFormat.

{
  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) Şunları içeren bir nesne dizine eklenen alanlar: configId'leri
stil object(styleById) Şunları içeren bir nesne stil nesneleri configId tarafından dizine eklendi
etkileşimler object(interactionsById) Şunları içeren bir nesne etkileşim nesneler
tema themeStyle themeStyle nesnesi tema stili içeren raporla ilgili bilgiler
tablolar object(tablesById) Şunları içeren bir nesne tableObjects
dateRanges object(dateRangesById) Şunları içeren bir nesne dateRanges

fieldsByConfigId

{
   configId: array(field)
}

fieldsByConfigId nesnesi, dizine eklenen field nesnelerinden oluşan dizileri içerir "id"ye göre görselleştirme yapılandırmasını devreye sokun. Her biri 100'den az gösterim alan yapılandırmada tanımlanan her dataField için bu nesnede bir giriş.

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 seçtiği alan hakkında bilgi sağlar özellik panelini açın.

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

styleById

{
   configId: styleValue
}

styleById nesnesi, "id" tarafından dizine eklenen stil bilgilerini sağlar şurada tanımlandığı: görselleştirme yapılandırmasını inceleyin.

Alan Tür Açıklama
configId styleValue Stil değerini ve yapılandırma tanımlı varsayılan stil değeri

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ğere sahiptir. value ve defaultValue türü stil öğesine bağlıdır.

Alan Tür Açıklama
value string OR object OR bool OR number Stil öğesinin değeri kullanıcı seçiminden döndürüldü özellik panelinde
defaultValue string OR object OR bool OR number Stilin varsayılan değeri öğesi görselleştirme yapılandırması

interactionsById

{

}

interactionsById nesnesi, interactionId görselleştirme yapılandırmasını inceleyin.

Dizin Tür Açıklama
configId interaction Bir etkileşim

interactionField

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

interactionField nesnesi, şurada tanımlanan supportedActions dizisini içerir: yapılandırmanın 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 Stil öğesinin değeri kullanıcı seçiminden döndürüldü özellik panelinde
supportedActions Array<InteractionType> Bu API'nin desteklediği işlemler ve etkileşimin ( yapılandırma

interactionValue

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

{
  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) Veriler mevcut durumuyla ilişkilidir seçin. Bu anahtar mevcut değil filtrenin geçerli olup olmadığını kontrol edin.

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çimine sahip bir nesne
fontColor object {color: string, opacity: number} biçimine sahip bir nesne
accentFillColor object {color: string, opacity: number} biçimine sahip bir nesne
accentFontColor object {color: string, opacity: number} biçimine sahip bir nesne
fontFamily string Yazı tipi ailesini açıklayan bir dize
accentFontFamily string Vurgu yazı tipini açıklayan bir dize aile
increaseColor object {color: string, opacity: number} biçimine sahip bir nesne
decreaseColor object {color: string, opacity: number} biçimine sahip bir nesne
gridColor object {color: string, opacity: number} biçimine sahip bir nesne
seriesColor Array<object> Nesne dizisi biçim{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 verileri döndürür ve "COMPARISON" girildiğinde, yalnızca kullanıcı Verileri karşılaştırma satırlarıyla yapılandırır.

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

Alan Tür Açıklama
"VARSAYILAN" object(tableObject) OR Array<objectRow> İlişkili tableObject kullanıcının bir reklam grubuna eklediği veriler görselleştirme
"KARŞILAŞTIRMA" object(tableObject) OR Array<objectRow> İlişkili tableObject tarih karşılaştırma verileri (varsa) geçerli

dateRangesById

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

dateRangesById nesnesi, varsayılan ve karşılaştırma hakkında bilgi sağlar tarih aralıkları başlıklı makaleyi inceleyin. Herhangi bir tarih aralığı yoksa nesne boştur. DEFAULT ve COMPARISON yalnızca ilgili tarihle doldurulur aralıklar kullanıcı tarafından yapılandırıldığından emin olun. Tarih aralıklarındaki veriler, tablesById'de tanımlandığı gibi varsayılan verileri ve karşılaştırma verilerini içerir.

Alan Tür Açıklama
"VARSAYILAN" object(dateRange) Şununla ilişkili dateRange varsayılan tarih aralığı (varsa) belirleyin.
"KARŞILAŞTIRMA" object(dateRange) Bir dateRange ile ilişkilendirilmiş karşılaştırma tarih aralığı (varsa).

dateRange

{
  start: string,
  end: string
}

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

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
üst bilgiler Array Bir fields nesnesi dizisi. Bu alan nesnelerin de bir configId özelliği vardır yapılandırmadaki kimliklere karşılık gelir.
satırlar Array<Array> Diziler: Her dizi, bir veri satırıdır

Örnek tableFormat verileri

Bu, şu seçenekle dscc.subscribeToData() kullanılarak döndürülen örnek data örneğidir: 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"
      ]
    }
  }
}

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, şu seçenekle dscc.subscribeToData() kullanılarak döndürülen örnek data örneğidir: 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"
      ]
    }
  }
}