Documentation de référence sur la bibliothèque du composant de la communauté Looker Studio (dscc)

Présentation de l'API

dscc (composant de la communauté Looker Studio) est une bibliothèque qui permet de créer des composants de la 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 avec les données d'un filtre.

Paramètres :

Nom	Type	Description
actionID	`string`	Chaîne correspondant à l'actionId dans la configuration
interaction	`enum(InteractionType)`	Indique à Looker Studio l'interaction.
données	`object(InteractionData)`	Fournit les données requises pour une interaction

`InteractionType`

Actuellement, la seule valeur 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
des idées	`Array`	Tableau `fieldIds`
valeurs	`Array<Array>`	Tableau imbriqué de valeurs de données. La longueur de chaque sous-tableau doit être égale à celle 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 le 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)`	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
callback(data)	`function`	Fonction qui prend les données renvoyées par `subscribeToData`.
options	`object`	Définit le format de données souhaité pour le retour

L'objet d'options se présente comme suit :

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Renvoie :

Type	Description
`function`	`callback` se désabonne des 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 au callback enregistré avec 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)`	Objet contenant des champs indexés par leur configId
style	`object(styleById)`	Objet contenant des objets de style indexés par leur configId
interactions	`object(interactionsById)`	Objet contenant des objets d'interaction
thème	`themeStyle`	Un objet themeStyle contenant des informations sur le style du thème pour le rapport
tables	`object(tablesById)`	Objet contenant tableObjects
dateRanges	`object(dateRangesById)`	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 la 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 à dataField

champ

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

L'objet field fournit des informations sur le champ que l'utilisateur sélectionne dans le panneau des propriétés.

Champ	Type	Description
id	`string`	ID généré par Looker Studio pour le champ
nom	`string`	Nom du champ lisible par l'utilisateur
description	`string`	Description du champ
type	`enum(fieldType)`	semanticType du champ
concept	`enum(conceptType)`	conceptType du champ

styleById

{
   configId: styleValue
}

L'objet styleById fournit des informations de style indexées par l'ID défini dans la configuration de la visualisation.

Champ	Type	Description
configId	`styleValue`	Objet contenant la valeur de style et la valeur de style par défaut définie dans 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. Le type de value et defaultValue dépend 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é à partir de 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 la visualisation interactionId.

Index	Type	Description
configId	`interaction`	Objet contenant les données associées à une interaction

interactionField

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

L'objet interactionField contient le tableau des 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é à partir de la sélection de l'utilisateur dans le panneau des propriétés
supportedActions	`Array<InteractionType>`	Actions acceptées par cette interaction, telles que définies dans la configuration

interactionValue

L'objet interactionValue fournit les 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 configurée en tant que filtre.

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

Champ	Type	Description
type	`enum(InteractionType)`	InteractionType sélectionné par l'utilisateur
données	`object(InteractionData)`	Les 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
}

tableObject fournit des informations sur les en-têtes et les données pour chaque ligne. "DEFAULT" renverra toujours des données, et "COMPARISON" ne sera renseigné que si l'utilisateur configure les données avec des lignes de comparaison.

La seule différence entre dscc.tableFormat et dscc.objectFormat réside dans le format de tableObject.

Champ	Type	Description
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	Le `tableObject` associé aux données qu'un utilisateur ajoute à une visualisation
"COMPARISON"	`object(tableObject) OR Array<objectRow>`	Le `tableObject` associé 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 spécifiée, 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 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.
"COMPARISON"	`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 période par défaut ou de comparaison.

Champ	Type	Description
start	`string`	Date de début de la période au format AAAAMMJJ.
end	`string`	Date de fin de la période au format AAAAMMJJ.

Documentation de référence sur `tableFormat`

tableObject

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

Champ	Type	Description
headers	`Array`	Tableau d'objets fields. Ces objets de champ comportent également une propriété `configId` qui correspond aux ID de la configuration.
lignes	`Array<Array>`	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é à l'aide de 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"
      ]
    }
  }
}

Référence 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 spécifique

Exemple de données objectFormat

Il s'agit d'un exemple de data renvoyé à l'aide de 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"
      ]
    }
  }
}

Documentation de référence sur la bibliothèque du composant de la communauté Looker Studio (dscc) Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Présentation de l'API

getWidth()

Utiliser getWidth()

getHeight()

Utiliser getHeight()

sendInteraction()

InteractionType

Utiliser sendInteraction

interactionData

clearInteraction()

Utiliser clearInteraction()

subscribeToData(callback, options)

Utiliser subscribeToData()

data

fieldsByConfigId

champ

styleById

styleValue

interactionsById

interactionField

interactionValue

thème

tablesById

dateRangesById

dateRange

Documentation de référence sur tableFormat

tableObject

Exemple de données tableFormat

Référence objectFormat

objectRow

Exemple de données objectFormat

Documentation de référence sur la bibliothèque du composant de la communauté Looker Studio (dscc)

`getWidth()`

Utiliser `getWidth()`

`getHeight()`

Utiliser `getHeight()`

`InteractionType`

Utiliser `sendInteraction`

`interactionData`

Utiliser `clearInteraction()`

`subscribeToData(callback, options)`

Utiliser `subscribeToData()`

`data`

Documentation de référence sur `tableFormat`

Exemple de données `tableFormat`