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

Panoramica dell'API

dscc (componente della community di Looker Studio) è una libreria che aiuta a creare componenti della community per Looker Studio. Il codice sorgente è disponibile su 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 all'actionId nella configurazione
interazione	`enum(InteractionType)`	Comunica a Looker Studio l'interazione
dati	`object(InteractionData)`	Fornisce i 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 `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
concept	`Array`	Array di `fieldIds`
valori	`Array<Array>`	Array nidificato di valori dei dati. Ogni sottoarray deve avere la lunghezza dell'array `concepts`. Ogni valore nel sottoarray corrisponde a un valore della dimensione.

Esempio interactionData:

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

L'utilizzo di dscc.sendInteraction con il precedente interactionData equivale alla 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 all'actionId nella configurazione
interazione	`enum(InteractionType)`	Comunica a Looker Studio l'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 di Looker Studio.

Parametri:

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

L'oggetto delle opzioni ha il seguente aspetto:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Valore restituito:

Tipo	Descrizione
`function`	Annulla l'iscrizione di `callback` a ulteriori messaggi da 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 a callback registrato con dscc.subscribeToData. Di seguito sono riportati i campi condivisi tra 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
i campi	`object(fieldsByConfigId)`	Un oggetto che contiene fields indicizzati in base al loro configId
stile	`object(styleById)`	Un oggetto che contiene oggetti di stile indicizzati in base al relativo configId
interazioni	`object(interactionsById)`	Un oggetto che contiene oggetti interazione
tema	`themeStyle`	Un oggetto themeStyle che contiene informazioni sullo stile del tema 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 in base all'"id" definito nella configurazione della visualizzazione. In questo oggetto è presente una voce 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 pannello 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)`	Il semanticType del campo
concetto	`enum(conceptType)`	Il conceptType del campo

styleById

{
   configId: styleValue
}

L'oggetto styleById fornisce informazioni sullo stile indicizzate dall'attributo "id" definito nella configurazione della visualizzazione.

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

styleValue

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

L'oggetto styleValue fornisce sia il valore dello stile selezionato dall'utente sia il valore predefinito definito nella configurazione. Il tipo di value e defaultValue dipende 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 dell'elemento di stile definito nella configurazione della visualizzazione

interactionsById

{

}

L'oggetto interactionsById fornisce dati di interazione indicizzati dalla interactionId configurazione della 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 supportedActions definito nella configurazione, nonché 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 questa interazione, come definito nella configurazione

interactionValue

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

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

Campo	Tipo	Descrizione
tipo	`enum(InteractionType)`	InteractionType selezionato dall'utente
dati	`object(InteractionData)`	I dati associati allo stato attuale del filtro. Questa chiave non esiste se il filtro è attualmente 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 trasmette 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 la famiglia di caratteri in risalto
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 nel formato`{color: string, opacity: number}`

tablesById

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

tableObject fornisce informazioni su intestazioni e dati per ogni riga. "DEFAULT" restituirà sempre i dati, mentre "COMPARISON" verrà compilato solo se l'utente configura i dati con le righe di confronto.

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

Campo	Tipo	Descrizione
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	Il `tableObject` associato ai dati che un utente aggiunge a una visualizzazione
"COMPARISON"	`object(tableObject) OR Array<objectRow>`	Il `tableObject` associato ai dati di confronto delle date, se applicabile

dateRangesById

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

L'oggetto dateRangesById fornisce informazioni sugli intervalli di date predefiniti e di confronto. Se non sono presenti intervalli di date, l'oggetto sarà vuoto. DEFAULT e COMPARISON verranno compilati solo se gli intervalli di date corrispondenti sono configurati dall'utente. I dati negli intervalli di date sono correlati ai dati predefiniti e di confronto definiti in tablesById.

Campo	Tipo	Descrizione
"DEFAULT"	`object(dateRange)`	Il `dateRange` associato all'intervallo di date predefinito, se applicabile.
"COMPARISON"	`object(dateRange)`	Il `dateRange` associato a un 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 oggetti campo hanno anche 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 di `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 configurazione

Dati di esempio di 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) Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

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 di tableFormat

Riferimento objectFormat

objectRow

Dati di esempio di objectFormat

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

`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 di `tableFormat`