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ı hakkında daha ayrıntılı bilgi verilmektedir.

Topluluk görselleştirmeleri için ds-component iki işlevi vardır.

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

Etkinliklere abone olma

Bir kullanıcı, seçili alanları veya stili değiştirme ya da bileşeni yeniden boyutlandırma gibi görsellerinizle etkileşim kurduğunda Looker Studio, görselleştirmenize etkinlik gönderir.

dscc.subscribeToData, Looker Studio'daki her postMessage etkinliği için çağrılacak bir geri çağırma kaydeder. Geri çağırma, bir data nesnesine geçirilir.

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 alan bilgileri
interactions Kullanıcı tarafından seçilen etkileşimler
theme Tema bilgilerini bildirin
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. Yaygın olarak kullanılan iki biçim, dizi veya nesne dizisidir. ds-component kitaplığı, sizi doğrudan bu veri biçimlerine götürmek için tasarlanmış iki dönüşüm sağlar.

Bu iki dönüşüm, kitaplık referansında belgelenmiştir. Bu işlemler, eşlemeyi JavaScript görselleştirme kitaplıklarının yaygın olarak beklediği veri biçimlerine kolayca dönüştürür. Desteklenen iki dönüşüm şunlardır: Bir nesne dizisi döndüren objectTransform ve bir dizi dizisi döndüren tableTransform.

dscc.objectTransform

Bazı görselleştirmelerde veriler bir nesne dizisi şeklinde bekler.

Örneğin:

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

Aşağıdaki kod, dscc.objectTransform biçiminden bir nesne dizisine nasıl erişileceğini gösterir.


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 çok alan girebileceği şekilde tanımlanırsa (örneğin, bir sankey diyagramı için tanımlanmış iki boyut varsa) Looker Studio'nun döndürdüğü veri biçimi daha çok aşağıdaki gibi göründüğünden dönüşüm, kullanım alanınıza bağlı olur:


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

dscc.tableTransform

Bazı görselleştirme kitaplıkları bir dizi dizisi bekler.

Örneğin:

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

Aşağıdaki kod, dscc.tableTransform biçimindeki bir satır satırına nasıl erişileceğini gösterir.


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