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 utile per la creazione di 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 di un filtro.

Parametri:

Nome	Tipo	Descrizione
actionID	`string`	La stringa che corrisponde all'actionId in
interazione	`enum(InteractionType)`	Indica a Looker Studio l'interazione
dati	`object(InteractionData)`	Fornisce i dati necessari per un'interazione

`InteractionType`

Al momento, l'unico InteractionType valido è 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 di dati. Ogni sottoarray deve avere la lunghezza dell'array `concepts`. Ogni valore nel sottoarray corrisponde a un valore di dimensione.

Esempio di interactionData:

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

L'utilizzo di dscc.sendInteraction con interactionData riportato sopra 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 nel file
interazione	`enum(InteractionType)`	Indica 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 l'iscrizione ai messaggi di Looker Studio.

Parametri:

Nome	Tipo	Descrizione
callback(dati)	`function`	Una funzione che accetta i dati restituiti da `subscribeToData`.
opzioni	`object`	Definisce il formato di ritorno 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. Questi sono 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
campi	`object(fieldsByConfigId)`	Un oggetto che contiene campi indicizzati dal rispettivo configId
stile	`object(styleById)`	Un oggetto che contiene oggetti di stile indicizzati dal relativo valore configId
interazioni	`object(interactionsById)`	Un oggetto che contiene oggetti di 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 dall'"id" definito nella configurazione di visualizzazione. In questo oggetto è presente una voce per ogni dataField definito nel file di 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.
digita	`enum(fieldType)`	Il semanticType del campo.
concetto	`enum(conceptType)`	Il valore conceptType del campo

styleById

{
   configId: styleValue
}

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

Campo	Tipo	Descrizione
configId	`styleValue`	Un oggetto che contiene il valore di stile e il 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 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 di visualizzazione

interactionsById

{

}

L'oggetto interactionsById fornisce dati sulle interazioni indicizzati dalla configurazione di visualizzazione interactionId.

Indice	Tipo	Descrizione
configId	`interaction`	Un oggetto contenente dati associati a un'interazione

interactionField

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

L'oggetto interactionField contiene l'array di azioni supportate definite 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 nel file

interactionValue

L'oggetto interactionValue fornisce valori selezionati dall'utente per il tipo di interazione. Se la chiave data esiste, 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
digita	`enum(InteractionType)`	Il valore 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 passa le informazioni relative al tema del report alla visualizzazione.

Campo	Tipo	Descrizione
fillColor	`object`	Un oggetto con il formato `{color: string, opacity: number}`
fontColor	`object`	Un oggetto con il formato `{color: string, opacity: number}`
accentFillColor	`object`	Un oggetto con il formato `{color: string, opacity: number}`
accentFontColor	`object`	Un oggetto con il 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 accentati
increaseColor	`object`	Un oggetto con il formato `{color: string, opacity: number}`
decreaseColor	`object`	Un oggetto con il formato `{color: string, opacity: number}`
gridColor	`object`	Un oggetto con il 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. Il valore "DEFAULT" restituirà sempre i dati, mentre il valore "COMPARISON" verrà completato 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
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	`tableObject` associato ai dati che un utente aggiunge a una visualizzazione
"CONFRONTO"	`object(tableObject) OR Array<objectRow>`	`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 i rispettivi intervalli di date sono stati configurati dall'utente. I dati negli intervalli di date sono correlati ai dati predefiniti e di confronto come definiti in tablesById.

Campo	Tipo	Descrizione
"DEFAULT"	`object(dateRange)`	L'elemento `dateRange` associato all'intervallo di date predefinito, se applicabile.
"CONFRONTO"	`object(dateRange)`	L'elemento `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 fine di un intervallo di date predefinito o di confronto.

Campo	Tipo	Descrizione
avvio	`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
headers	`Array`	Un array di oggetti fields. Questi oggetti campo hanno inoltre una proprietà `configId` che corrisponde agli ID della configurazione.
righe	`Array<Array>`	Un array di matrici: ogni array è una riga di dati

Dati di esempio relativi a `tableFormat`

Questo è l'esempio 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	array	array di valori associati a un determinato ID configurazione

Dati objectFormat di esempio

Questo è l'esempio 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 relativi a tableFormat

Riferimento objectFormat

objectRow

Dati objectFormat di esempio

`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 relativi a `tableFormat`