Présentation de l'API
dscc
(composant de la communauté Looker Studio) est une bibliothèque qui permet de créer des composants de communauté pour Looker Studio. Le code source est disponible sur GitHub.
dscc
expose trois fonctions: getWidth()
, getHeight()
et subscribeToData()
.
getWidth()
Nom | Paramètres | Type renvoyé | Description |
---|---|---|---|
getWidth() | Aucun | number
|
Renvoie la largeur de l'iFrame, en pixels. |
Utiliser getWidth()
// to get the width of the iframe
var width = dscc.getWidth();
getHeight()
Nom | Paramètres | Type renvoyé | Description |
---|---|---|---|
getHeight() | Aucun | int
|
Renvoie la hauteur de l'iFrame, en pixels. |
Utiliser getHeight()
// to get the height of the iframe
var height = dscc.getHeight();
sendInteraction()
La fonction sendInteraction()
envoie un message à Looker Studio contenant les données d'un filtre.
Paramètres :
Nom | Type | Description |
---|---|---|
actionID | string
|
Chaîne correspondant à l'actionId dans la configuration. |
interaction | enum(InteractionType)
|
Il indique à Looker Studio l'interaction |
données | object(InteractionData)
|
Fournit les données requises pour une interaction |
InteractionType
Actuellement, le seul InteractionType
valide est FILTER
.
Nom | Type | Description |
---|---|---|
dscc.InteractionType.FILTER | Énumération | Décrit l'interaction FILTER |
Utiliser 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))
}
Champ | Type | Description |
---|---|---|
concepts | Array |
Tableau fieldIds |
valeurs | Array<Array>
|
Tableau imbriqué de valeurs de données. Chaque sous-tableau doit correspondre à la longueur du tableau concepts .
Chaque valeur du sous-tableau correspond à une valeur de dimension. |
Échantillon interactionData
:
var interactionData = {
"concepts": ["dim1Id", "dim2Id"],
"values": [
["dim1Val1", "dim2Val1"],
["dim1Val2", "dim2Val2"]
]
}
L'utilisation de dscc.sendInteraction
avec la interactionData
ci-dessus équivaut à l'instruction SQL suivante:
SELECT data WHERE
(dim1 == dim1Val1 AND dim2 == dim2Val1)
OR
(dim1 == dim1Val2 AND dim2 == dim2Val2);
clearInteraction()
La fonction clearInteraction()
envoie un message à Looker Studio pour effacer un filtre précédemment défini par cette visualisation.
Paramètres :
Nom | Type | Description |
---|---|---|
actionID | string
|
Chaîne correspondant à l'actionId dans la configuration |
interaction | enum(InteractionType)
|
Il indique à Looker Studio l'interaction |
Utiliser 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 fonction subscribeToData()
s'abonne aux messages de Looker Studio.
Paramètres :
Nom | Type | Description |
---|---|---|
rappel(données) | function
|
Une fonction qui reçoit les données renvoyées par subscribeToData . |
options | object |
Définit le format de retour de données souhaité |
L'objet options se présente comme suit:
{
transform: dscc.tableTransform | dscc.objectTransform
}
Renvoie :
Type | Description |
---|---|
function |
Désabonne callback des nouveaux messages de Looker Studio |
Utiliser 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
Il s'agit de l'objet transmis à l'élément callback
enregistré auprès de dscc.subscribeToData
. Voici les champs partagés entre dscc.objectFormat
et dscc.tableFormat
.
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById)
}
Champ | Type | Description |
---|---|---|
champs | object(fieldsByConfigId)
|
Un objet contenant des champs indexés selon leur configId |
style | object(styleById)
|
Objet contenant des objets de style indexés par leur configId |
interactions | object(interactionsById)
|
Un objet qui contient des objets d'interaction |
thème | themeStyle
|
Un objet themeStyle contenant des informations sur les styles de thème pour le rapport |
tables | object(tablesById)
|
Un objet contenant des tableObjects |
dateRanges | object(dateRangesById)
|
Un objet contenant dateRanges |
fieldsByConfigId
{
configId: array(field)
}
L'objet fieldsByConfigId
contient des tableaux d'objets field indexés par l'ID défini dans la configuration de visualisation. Cet objet contient une entrée pour chaque dataField
défini dans la configuration.
Champ | Type | Description |
---|---|---|
configId | Array<field> |
Tableau de champs associés au champ de données |
champ
{
id: fieldId,
name: string,
description: string,
type: fieldType,
concept: enum(conceptType)
}
L'objet field
fournit des informations sur le champ sélectionné par l'utilisateur dans le panneau des propriétés.
Champ | Type | Description |
---|---|---|
id | string |
ID généré par Looker Studio pour le champ |
name | string |
Nom du champ dans un format lisible |
description | string |
Description du champ |
type | enum(fieldType) |
La valeur semanticType du champ |
concept | enum(conceptType) |
Le conceptType du champ |
styleById
{
configId: styleValue
}
L'objet styleById
fournit des informations de style indexées selon l'ID défini dans la configuration de visualisation.
Champ | Type | Description |
---|---|---|
configId | styleValue
|
Objet contenant la valeur de style et la valeur de style par défaut définie par la configuration |
styleValue
{
value: string | object | bool | number,
defaultValue: string | object | bool | number
}
L'objet styleValue
fournit à la fois la valeur de style sélectionnée par l'utilisateur et la valeur par défaut définie dans la configuration. Les types de value
et defaultValue
dépendent de l'élément de style.
Champ | Type | Description |
---|---|---|
valeur | string OR object OR bool OR
number
|
Valeur de l'élément de style renvoyé par la sélection de l'utilisateur dans le panneau des propriétés |
defaultValue | string OR object OR bool OR
number
|
Valeur par défaut de l'élément de style défini dans la configuration de la visualisation |
interactionsById
{
}
L'objet interactionsById
fournit des données d'interaction indexées par la configuration de visualisation interactionId
.
Index | Type | Description |
---|---|---|
configId | interaction
|
Un objet qui contient des données associées à une interaction |
interactionField
{
value: object(interactionValue),
supportedActions: array(InteractionType)
}
L'objet interactionField
contient le tableau de supportedActions définis dans la configuration, ainsi que les valeurs sélectionnées par l'utilisateur pour l'interaction.
Champ | Type | Description |
---|---|---|
valeur | string OR object OR
bool OR number
|
Valeur de l'élément de style renvoyé par la sélection de l'utilisateur dans le panneau des propriétés |
supportedActions | Array<InteractionType>
|
Actions prises en charge par cette interaction, telles que définies dans la configuration |
interactionValue
L'objet interactionValue
fournit des valeurs sélectionnées par l'utilisateur pour le type d'interaction. Si la clé data
existe, l'objet InteractionData
reflète l'état actuel du filtre. Si la clé data
n'existe pas, la visualisation n'est pas actuellement configurée en tant que filtre.
{
type: enum(InteractionType)
data: object(interactionData) | None
}
Champ | Type | Description |
---|---|---|
type | enum(InteractionType)
|
Le InteractionType sélectionné par l'utilisateur |
données | object(InteractionData)
|
Données associées à l'état actuel du filtre. Cette clé n'existe pas si le filtre est actuellement effacé. |
thème
{
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'objet themeStyle
transmet les informations sur le thème du rapport à la visualisation.
Champ | Type | Description |
---|---|---|
fillColor | object
|
Objet au format {color:
string, opacity: number} |
fontColor | object
|
Objet au format {color:
string, opacity: number} |
accentFillColor | object
|
Objet au format {color:
string, opacity: number} |
accentFontColor | object
|
Objet au format {color:
string, opacity: number} |
fontFamily | string |
Chaîne décrivant la famille de polices |
accentFontFamily | string
|
Chaîne décrivant la famille de polices d'accentuation |
increaseColor | object
|
Objet au format {color:
string, opacity: number} |
decreaseColor | object
|
Objet au format {color:
string, opacity: number} |
gridColor | object
|
Objet au format {color:
string, opacity: number} |
seriesColor | Array<object>
|
Tableau d'objets au format{color: string, opacity:
number} |
tablesById
{
"DEFAULT": object(tableObject),
"COMPARISON": object(tableObject) | undefined
}
Le tableObject
fournit des informations d'en-tête et de données pour chaque ligne. "PAR DÉFAUT" renvoie toujours des données, et "COMPARISON" n'est renseigné que si l'utilisateur configure les données avec des lignes de comparaison.
Le format de tableObject est la seule différence entre dscc.tableFormat
et dscc.objectFormat
.
Champ | Type | Description |
---|---|---|
"DEFAULT" | object(tableObject) OR
Array<objectRow>
|
tableObject associé aux données qu'un utilisateur ajoute à une visualisation |
"COMPARAISON" | object(tableObject) OR
Array<objectRow>
|
La valeur tableObject associée aux données de comparaison de dates, le cas échéant |
dateRangesById
{
"DEFAULT": object(dateRange),
"COMPARISON": object(dateRange)
}
L'objet dateRangesById
fournit des informations sur les plages de dates par défaut et de comparaison. Si aucune plage de dates n'est définie, l'objet sera vide. DEFAULT
et COMPARISON
ne seront renseignés que si les plages de dates respectives sont configurées par l'utilisateur. Les données des plages de dates sont liées aux données par défaut et aux données de comparaison, telles que définies dans tablesById.
Champ | Type | Description |
---|---|---|
"DEFAULT" | object(dateRange)
|
Le dateRange associé à la plage de dates par défaut, le cas échéant. |
"COMPARAISON" | object(dateRange)
|
Le dateRange associé à une plage de dates de comparaison, le cas échéant. |
dateRange
{
start: string,
end: string
}
L'objet dateRange
fournit des informations sur les dates de début et de fin d'une plage de dates par défaut ou de comparaison.
Champ | Type | Description |
---|---|---|
start | string |
Date de début de la plage de dates au format AAAAMMJJ. |
end | string |
Date de fin de la période au format AAAAMMJJ. |
Référence tableFormat
tableObject
{
headers: array(object),
rows: array(array)
}
Champ | Type | Description |
---|---|---|
headers | Array
|
Tableau d'objets fields. Ces objets de champ disposent en outre d'une propriété configId qui correspond aux ID de la configuration. |
lignes | Array<Array> |
Un tableau de tableaux: chaque tableau est une ligne de données |
Exemple de données tableFormat
Il s'agit d'un exemple de data
renvoyé en utilisant dscc.subscribeToData()
avec l'option 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"
]
}
}
}
Documentation de référence sur objectFormat
objectRow
{
configId1: array(string | bool | number),
configId2: array(string | bool | number)
}
Champ | Type | Description |
---|---|---|
configId | tableau | tableau de valeurs associées à un ID de configuration particulier |
Exemple de données objectFormat
Il s'agit d'un exemple de data
renvoyé en utilisant dscc.subscribeToData()
avec l'option 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"
]
}
}
}