Yardımcı kitaplığı kullanma

Looker Studio, topluluk görselleştirmesini içeren iFrame'e veri ve stil bilgileri sağlamak için postMessage arayüzünü kullanır. Bu kılavuzda yardımcı kitaplığın kullanımıyla ilgili daha ayrıntılı bilgi verilmektedir.

Topluluk görselleştirmeleri için ds-component iki işlevi yerine getirir.

  1. Iframe'in boyutlarını edinme
  2. Looker Studio ile iletişimi yönetme

Etkinliklere abone olma

Kullanıcı, görselleştirmenizle etkileşime girdiğinde (ör. seçili alanları değiştirme, stili değiştirme veya bileşeni yeniden boyutlandırma) Looker Studio, görselleştirmenize etkinlikler gönderir.

dscc.subscribeToData, Looker Studio'dan gelen her postMessage etkinliği için çağrılacak bir geri çağırma kaydeder. Geri çağırma işlevine data nesnesi iletilir.

function drawViz(data){
  // obtain the height and width to scale your visualization appropriately
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  // write your visualization code here
  console.log("I'm the callback and I was passed this data: " + JSON.stringify(data, null, '  '));
}

// call drawViz every time Looker Studio sends a new postMessage
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

Döndürülen veriler

Her iki veri dönüşümü de beş anahtarlı bir nesne döndürür.

Anahtar Amaç
style Kullanıcı tarafından seçilen ve varsayılan stil bilgileri
fields Kullanıcı tarafından seçilen alanlarla ilgili bilgiler
interactions Kullanıcı tarafından seçilen etkileşimler
theme Tema bilgilerini bildirme
tables Veri satırları
dateRanges Varsayılan ve karşılaştırma tarih aralıkları

Veri biçimi:

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

Farklı görselleştirmeler için farklı veri biçimleri gerekir. İki yaygın biçim vardır: diziler dizisi veya nesneler dizisi. ds-component kitaplığı, doğrudan bu veri biçimlerine ulaşmanızı sağlayacak şekilde tasarlanmış iki dönüştürme işlevi sunar.

İki dönüştürme işlemi, library-reference içinde belgelenmiştir. Bu dönüşümler, JavaScript görselleştirme kitaplıklarının genellikle beklediği veri biçimleriyle kolayca eşlenir. Desteklenen iki dönüştürme işlevi vardır: objectTransform (nesne dizisi döndürür) ve tableTransform (dizi dizisi döndürür).

dscc.objectTransform

Bazı görselleştirmeler, verilerin nesne dizisi olarak girilmesini bekler.

Örneğin:

var data = [
  {'colA': 'hello', 'colB', 'world'},
  {'colA': 'hello', 'colB', 'world'}
];

Aşağıdaki kodda, dscc.objectTransform biçimindeki bir nesne dizisine nasıl erişileceği gösterilmektedir.


function drawViz(data){
  // what the object transform could look like
  // [
  //  {'configId1': ['hello'], 'configId2': [1] },
  //  {'configId1': ['world'], 'configId2': [2] }
  // ]
  var dsccObjectTransformData = data.tables.DEFAULT;

  // creating an array of objects
  var arrayOfObjects = dscc.ObjectTransformData.rows.map(function(d){
    return {
      'configId1': d.configId1[0],
      'configId2': d.configId2[0]
    };
  };

}

Veri bölümleri, kullanıcının birden fazla alan girebileceği şekilde tanımlanmışsa (örneğin, bir Sankey diyagramı için iki boyut tanımlanmışsa) Looker Studio tarafından döndürülen veri biçimi daha çok aşağıdaki gibi görüneceğinden dönüştürme, kullanım alanınıza bağlı olacaktır:


var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]

dscc.tableTransform

Bazı görselleştirme kitaplıkları, diziler dizisi bekler.

Örneğin:

var data = [
  ['hello', 1],
  ['world', 2]
];

Aşağıdaki kodda, dscc.tableTransform biçimindeki satırlar satırına nasıl erişileceği gösterilmektedir.


function drawViz(data);
  // what the below object looks like
  // {
  //    headers: [{
  //      "id": "qt_ky8sltutsb",
  //      "name": "dimension",
  //      "type": "TEXT",
  //      "concept": "DIMENSION",
  //      "configId": "configId1"
  //    }, {
  //      "id": "qt_m9dtntutsb",
  //      "name": "metric",
  //      "type": "NUMBER",
  //      "concept": "METRIC",
  //      "configId": "configId2"
  //    }],
  //  rows: [
  //    ['hello', 1],
  //    ['world', 2]
  //  ];
  // }
  var dsccTableTransformObject = data.tables.DEFAULT;

  // accessing the row of rows
  var rowOfRows = dsccTableTransformObject.rows;

  // accessing the header row
  var headers = dsccTableTransformObject.headers;
}

dscc.subscribeToData(drawViz, {transform: tableTransform});