Cette page a été traduite par l'API Cloud Translation.

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

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

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

Référence tableFormat

tableObject

Exemple de données tableFormat

Documentation de référence sur objectFormat

objectRow

Exemple de données objectFormat

`getWidth()`

Utiliser `getWidth()`

`getHeight()`

Utiliser `getHeight()`

`InteractionType`

Utiliser `sendInteraction`

`interactionData`

Utiliser `clearInteraction()`

`subscribeToData(callback, options)`

Utiliser `subscribeToData()`

`data`

Référence `tableFormat`

Exemple de données `tableFormat`