Data Studio topluluk bileşeni (dscc) kitaplığı referansı

API'ye genel bakış

dscc (Data Studio Topluluk Bileşeni), Data Studio için topluluk bileşenleri oluşturmaya yardımcı olan bir kitaplıktır. Kaynak kodunu GitHub'da bulabilirsiniz.

dscc üç işlevi kullanıma sunar: getWidth(), getHeight() ve subscribeToData().

`getWidth()`

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

`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 piksel cinsinden yüksekliğini döndürür.

`getHeight()` kullanılıyor

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

sendInteraction()

sendInteraction() işlevi, filtre verileriyle birlikte Data Studio'ya bir mesaj gönderir.

Parametreler:

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

`InteractionType`

Şu anda tek geçerli InteractionType değeri FILTER'dir.

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
test edin	`Array`	`fieldIds` dizisi
values	`Array<Array>`	İç içe yerleştirilmiş veri değerleri dizisi. Her alt dizi, `concepts` dizisinin uzunluğunda 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 kullanmak 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 Data Studio'ya mesaj gönderir.

Parametreler:

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

`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, Data Studio'dan gelen iletilere abone olur.

Parametreler:

Ad	Tür	Açıklama
callback(data)	`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 şu şekilde görünür:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Döndürülen değer:

Tür	Açıklama
`function`	Data Studio'dan `callback` daha fazla mesaj almayı durdurur.

`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, callback ile kaydedilen dscc.subscribeToData öğesine iletilen nesnedir. Aşağıdaki alanlar dscc.objectFormat ve dscc.tableFormat arasında paylaşılır.

{
  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 eklenmiş alanlar içeren bir nesne
stil	`object(styleById)`	Yapılandırma kimliklerine göre 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 stili bilgilerini içeren bir themeStyle nesnesi
tablolar	`object(tablesById)`	tableObjects içeren bir nesne
dateRanges	`object(dateRangesById)`	dateRanges içeren bir nesne

fieldsByConfigId

{
   configId: array(field)
}

fieldsByConfigId nesnesi, görselleştirme yapılandırmasında tanımlanan "id" ile dizine eklenmiş alan nesnelerinin dizilerini içerir. Bu nesnede, yapılandırmada tanımlanan her dataField için bir giriş bulunur.

Alan	Tür	Açıklama
configId	`Array<field>`	dataField ile ilişkili bir 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`	Alan için Looker Studio tarafından oluşturulan kimlik
ad	`string`	Kullanıcıların okuyabileceği alan adı
açıklama	`string`	Alan açıklaması
tür	`enum(fieldType)`	Alanının semanticType'ı
kavram	`enum(conceptType)`	Alan conceptType'ı

styleById

{
   configId: styleValue
}

styleById nesnesi, görselleştirme yapılandırmasında tanımlanan "id"ye göre dizine eklenmiş stil bilgileri sağlar.

Alan	Tür	Açıklama
configId	`styleValue`	Stil değerini ve yapılandırmada tanımlanan 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ürü, 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 değeri
defaultValue	`string OR object OR bool OR number`	Görselleştirme yapılandırmasında tanımlanan stil öğesinin varsayılan değeri

interactionsById

{

}

interactionsById nesnesi, interactionId görselleştirme yapılandırmasına göre dizine eklenmiş etkileşim verileri 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 değeri
supportedActions	`Array<InteractionType>`	Yapılandırmada tanımlandığı şekilde, bu etkileşim tarafından desteklenen 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 mevcut durumunu yansıtır. data anahtarı yoksa görselleştirme şu anda filtre olarak yapılandırılmamıştır.

{
  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şkili veriler. Filtre şu anda temizlenmişse bu anahtar mevcut değildir.

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`	Vurgu 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>`	`{color: string, opacity: number}` biçimindeki nesneler dizisi

tablesById

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

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

dscc.tableFormat ile dscc.objectFormat arasındaki tek fark tableObject'in biçimidir.

Alan	Tür	Açıklama
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	Kullanıcının görselleştirmeye eklediği verilerle ilişkili `tableObject`
"COMPARISON"	`object(tableObject) OR Array<objectRow>`	Geçerliyse tarih karşılaştırma verileri ile 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ş olur. DEFAULT ve COMPARISON yalnızca ilgili tarih aralıkları kullanıcı tarafından yapılandırılmışsa doldurulur. Tarih aralıklarındaki veriler, tablesById içinde tanımlandığı şekilde varsayılan ve karşılaştırma verileriyle ilgilidir.

Alan	Tür	Açıklama
"DEFAULT"	`object(dateRange)`	Varsa varsayılan tarih aralığı ile ilişkili `dateRange`.
"COMPARISON"	`object(dateRange)`	Varsa bir karşılaştırma tarih aralığıyla ilişkili `dateRange`.

dateRange

{
  start: string,
  end: string
}

dateRange nesnesi, varsayılan veya karşılaştırma 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 başlangıç tarihi (YYYYAAAG biçiminde).
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
üstbilgiler	`Array`	Alan nesneleri dizisi. Bu alan nesneleri ayrıca 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.subscribeToData() ile dscc.tableFormat seçeneği kullanılarak döndürülen örnek data'dır.

{
  "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 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ğer dizisi

Örnek objectFormat verileri

Bu, dscc.subscribeToData() ile dscc.objectFormat seçeneği kullanılarak döndürülen örnek data'dır.

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

Data Studio topluluk bileşeni (dscc) kitaplığı referansı Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

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

objectFormat referansı

objectRow

Örnek objectFormat verileri

Data Studio topluluk bileşeni (dscc) kitaplığı referansı

`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