Questa pagina è stata tradotta dall'API Cloud Translation.

Riferimento libreria del componente della community di Looker Studio (dscc)

Panoramica dell'API

dscc (componente della community di Looker Studio) è una libreria che ti aiuta a creare componenti della community per Looker Studio. Il codice sorgente è disponibile nella pagina GitHub.

dscc espone tre funzioni: getWidth(), getHeight() e subscribeToData().

`getWidth()`

Nome	Parametri	Tipo restituito	Descrizione
getWidth()	Nessuno	`number`	Restituisce la larghezza dell'iframe, in pixel

In uso: `getWidth()`

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

`getHeight()`

Nome	Parametri	Tipo restituito	Descrizione
getHeight()	Nessuno	`int`	Restituisce l'altezza dell'iframe, in pixel

In uso: `getHeight()`

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

sendInteraction()

La funzione sendInteraction() invia un messaggio a Looker Studio con i dati per un filtro.

Parametri:

Nome	Tipo	Descrizione
actionID	`string`	La stringa che corrisponde a l'actionId in la configurazione
interazione	`enum(InteractionType)`	Comunica a Looker Informazioni su Studio l'interazione
dati	`object(InteractionData)`	Fornisce il parametro dati richiesti per un interazione

`InteractionType`

Al momento, l'unico valore valido per InteractionType è FILTER.

Nome	Tipo	Descrizione
dscc.InteractionType.FILTER	Enum	Descrive l'interazione con `FILTER`

In uso: `sendInteraction`


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

Campo	Tipo	Descrizione
concetti	`Array`	Array di `fieldIds`
valori	`Array<Array>`	Array nidificato di valori dei dati. Ogni array secondario deve essere la lunghezza dell'array `concepts`. Ogni valore nel sottoarray corrisponde a un del valore della dimensione.

Esempio di interactionData:

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

L'utilizzo di dscc.sendInteraction con i interactionData precedenti equivale a la seguente istruzione SQL:

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

clearInteraction()

La funzione clearInteraction() invia un messaggio a Looker Studio per cancellare un filtro impostato in precedenza da questa visualizzazione.

Parametri:

Nome	Tipo	Descrizione
actionID	`string`	La stringa che corrisponde alla actionId nella configurazione
interazione	`enum(InteractionType)`	Indica a Looker Studio il interazione

In uso: `clearInteraction()`


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

La funzione subscribeToData() esegue la sottoscrizione ai messaggi da Looker Studio.

Parametri:

Nome	Tipo	Descrizione
callback(dati)	`function`	Una funzione che prende i dati restituiti `subscribeToData`.
opzioni	`object`	Definisce il formato di restituzione dei dati desiderato

L'oggetto opzioni ha il seguente aspetto:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Valore restituito:

Tipo	Descrizione
`function`	Annulla l'iscrizione di `callback` a ulteriori messaggi di Looker Studio

In uso: `subscribeToData()`

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

Questo è l'oggetto passato all'oggetto callback registrato con dscc.subscribeToData. Di seguito sono riportati i campi condivisi dscc.objectFormat e dscc.tableFormat.

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

Campo	Tipo	Descrizione
campi	`object(fieldsByConfigId)`	Un oggetto che contiene campi indicizzati da il relativo configId
stile	`object(styleById)`	Un oggetto che contiene oggetti di stile indicizzato dal relativo configId
interazioni	`object(interactionsById)`	Un oggetto che contiene interazione oggetti
tema	`themeStyle`	Un oggetto themeStyle che contiene stili del tema informazioni per il report
tabelle	`object(tablesById)`	Un oggetto che contiene tableObjects
dateRanges	`object(dateRangesById)`	Un oggetto che contiene dateRanges

fieldsByConfigId

{
   configId: array(field)
}

L'oggetto fieldsByConfigId contiene array di oggetti field indicizzati dall'"id" definita nel configurazione di visualizzazione. C'è una voce in questo oggetto per ogni dataField definito nella configurazione.

Campo	Tipo	Descrizione
configId	`Array<field>`	Un array di campi associati a dataField

campo

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

L'oggetto field fornisce informazioni sul campo selezionato dall'utente nel riquadro delle proprietà.

Campo	Tipo	Descrizione
id	`string`	L'ID generato da Looker Studio per il campo
nome	`string`	Il nome del campo leggibile
descrizione	`string`	La descrizione del campo
tipo	`enum(fieldType)`	La semanticType del campo
concetto	`enum(conceptType)`	Il conceptType del campo

styleById

{
   configId: styleValue
}

L'oggetto styleById fornisce informazioni sullo stile indicizzate dall'"id" definiti in nella configurazione di visualizzazione.

Campo	Tipo	Descrizione
configId	`styleValue`	Un oggetto che contiene il valore di stile e valore di stile predefinito definito dalla configurazione

styleValue

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

L'oggetto styleValue fornisce sia il valore di stile selezionato dall'utente sia predefinito definito nella configurazione. Il tipo di value e defaultValue dipendono dall'elemento di stile.

Campo	Tipo	Descrizione
valore	`string OR object OR bool OR number`	Il valore dell'elemento di stile restituito dalla selezione dell'utente nel riquadro delle proprietà
defaultValue	`string OR object OR bool OR number`	Il valore predefinito dello stile definito nel configurazione di visualizzazione

interactionsById

{

}

L'oggetto interactionsById fornisce dati sull'interazione indicizzati dall'oggetto interactionId configurazione di visualizzazione.

Indice	Tipo	Descrizione
configId	`interaction`	Un oggetto che contiene dati associati a un interazione

interactionField

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

L'oggetto interactionField contiene l'array di supported Actions definito in la configurazione e i valori selezionati dall'utente per l'interazione.

Campo	Tipo	Descrizione
valore	`string OR object OR bool OR number`	Il valore dell'elemento di stile restituito dalla selezione dell'utente nel riquadro delle proprietà
supportedActions	`Array<InteractionType>`	Le azioni supportate da questo interazione, come definito nel configura

interactionValue

L'oggetto interactionValue fornisce valori selezionati dall'utente per l'interazione di testo. Se la chiave data esiste, l'oggetto InteractionData riflette la lo stato attuale del filtro. Se la chiave data non esiste, la visualizzazione non è attualmente configurato come filtro.

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

Campo	Tipo	Descrizione
tipo	`enum(InteractionType)`	L'utente selezionato InteractionType
dati	`object(InteractionData)`	I dati associate allo stato attuale il filtro. Questa chiave non esiste se il filtro è al momento cancellato.

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

L'oggetto themeStyle passa le informazioni sul tema del report alla visualizzazione.

Campo	Tipo	Descrizione
fillColor	`object`	Un oggetto nel formato `{color: string, opacity: number}`
fontColor	`object`	Un oggetto nel formato `{color: string, opacity: number}`
accentFillColor	`object`	Un oggetto nel formato `{color: string, opacity: number}`
accentFontColor	`object`	Un oggetto nel formato `{color: string, opacity: number}`
fontFamily	`string`	Una stringa che descrive la famiglia di caratteri
accentFontFamily	`string`	Una stringa che descrive il carattere intenso famiglia
increaseColor	`object`	Un oggetto nel formato `{color: string, opacity: number}`
decreaseColor	`object`	Un oggetto nel formato `{color: string, opacity: number}`
gridColor	`object`	Un oggetto nel formato `{color: string, opacity: number}`
seriesColor	`Array<object>`	Un array di oggetti formato`{color: string, opacity: number}`

tablesById

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

L'tableObject fornisce informazioni su intestazioni e dati per ogni riga. "PREDEFINITO" restituisce sempre i dati e "CONFRONTO" verrà compilato solo se l'utente configura i dati con righe di confronto.

Il formato di tableObject è l'unica differenza tra dscc.tableFormat e dscc.objectFormat.

Campo	Tipo	Descrizione
"PREDEFINITO"	`object(tableObject) OR Array<objectRow>`	L'elemento `tableObject` associato a i dati aggiunti da un utente a un visualizzazione
"CONFRONTO"	`object(tableObject) OR Array<objectRow>`	L'elemento `tableObject` associato a i dati di confronto tra date, se applicabile

dateRangesById

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

L'oggetto dateRangesById fornisce informazioni su valore predefinito e confronto intervalli di date. Se non sono presenti intervalli di date, l'oggetto verrà vuoto. I campi DEFAULT e COMPARISON verranno compilati solo se la rispettiva data vengono configurati dall'utente. I dati negli intervalli di date sono correlati i dati predefiniti e di confronto come definito in tablesById.

Campo	Tipo	Descrizione
"PREDEFINITO"	`object(dateRange)`	L'elemento `dateRange` associato al intervallo di date predefinito, se applicabile.
"CONFRONTO"	`object(dateRange)`	Il parametro `dateRange` associato a intervallo di date di confronto, se applicabile.

dateRange

{
  start: string,
  end: string
}

L'oggetto dateRange fornisce informazioni sulle date di inizio e di fine di un intervallo di date predefinito o di confronto.

Campo	Tipo	Descrizione
start	`string`	Data di inizio dell'intervallo di date nel formato AAAAMMGG.
termina	`string`	Data di fine dell'intervallo di date nel formato AAAAMMGG.

Riferimento `tableFormat`

tableObject

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

Campo	Tipo	Descrizione
intestazioni	`Array`	Un array di oggetti fields. Questi campi gli oggetti hanno inoltre una proprietà `configId` che corrisponde agli ID della configurazione.
righe	`Array<Array>`	Un array di array: ogni array è una riga di dati

Dati di esempio su `tableFormat`

Questo è un esempio di data restituito utilizzando dscc.subscribeToData() con l'opzione 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"
      ]
    }
  }
}

Riferimento objectFormat

objectRow

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

Campo	Tipo	Descrizione
configId	matrice	array di valori associati a un determinato ID di configurazione

Dati di esempio objectFormat

Questo è un esempio di data restituito utilizzando dscc.subscribeToData() con l'opzione 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"
      ]
    }
  }
}

Riferimento libreria del componente della community di Looker Studio (dscc)

Panoramica dell'API

getWidth()

In uso: getWidth()

getHeight()

In uso: getHeight()

sendInteraction()

InteractionType

In uso: sendInteraction

interactionData

clearInteraction()

In uso: clearInteraction()

subscribeToData(callback, options)

In uso: subscribeToData()

data

fieldsByConfigId

campo

styleById

styleValue

interactionsById

interactionField

interactionValue

tema

tablesById

dateRangesById

dateRange

Riferimento tableFormat

tableObject

Dati di esempio su tableFormat

Riferimento objectFormat

objectRow

Dati di esempio objectFormat

`getWidth()`

In uso: `getWidth()`

`getHeight()`

In uso: `getHeight()`

`InteractionType`

In uso: `sendInteraction`

`interactionData`

In uso: `clearInteraction()`

`subscribeToData(callback, options)`

In uso: `subscribeToData()`

`data`

Riferimento `tableFormat`

Dati di esempio su `tableFormat`