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 (le composant de communauté Looker Studio) est une bibliothèque qui vous aide à créer de la communauté pour Looker Studio. Le code source se trouve 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, dans pixels

`getWidth()` utilisé(s)

// 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

`getHeight()` utilisé(s)

// to get the height of the iframe
var height = dscc.getHeight();

sendInteraction()

La fonction sendInteraction() envoie un message contenant les données à Looker Studio. pour un filtre.

Paramètres :

Nom	Type	Description
actionID	`string`	La chaîne que correspond à actionId dans la configuration
interaction	`enum(InteractionType)`	Indique à Looker Studio sur l'interaction
données	`object(InteractionData)`	Fournit le paramètre 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`

`sendInteraction` utilisé(s)


// 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 de `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 à un la valeur de la dimension.

Échantillon interactionData :

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

Utiliser dscc.sendInteraction avec l'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`	La chaîne correspondant au paramètre actionId dans la configuration
interaction	`enum(InteractionType)`	Indique à Looker Studio les interaction

`clearInteraction()` utilisé(s)


// 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 prend 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 messages ultérieurs de Looker Studio

`subscribeToData()` utilisé(s)

// 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)`	Un objet contenant champs indexés par son configId ;
style	`object(styleById)`	Un objet contenant objets de style indexé selon son ID de configuration (configId)
interactions	`object(interactionsById)`	Un objet contenant interaction des objets
thème	`themeStyle`	Un objet "themeStyle" contenant un style de thème des informations pour le rapport
tables	`object(tablesById)`	Un objet contenant tableObjects
dateRanges	`object(dateRangesById)`	Un objet contenant dateRanges

fieldsByConfigId

{
   configId: array(field)
}

L'objet fieldsByConfigId contient des tableaux d'objets field indexés par "id" définis dans le configuration de la visualisation. Il y a une entrée dans cet objet pour chaque dataField défini dans la configuration.

Champ	Type	Description
configId	`Array<field>`	Tableau de champs associés au champ dataField

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. 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 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 par "id" défini dans la configuration de la visualisation.

Champ	Type	Description
configId	`styleValue`	Un objet contenant la valeur de style et la valeur du 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 la valeur par défaut définie dans la configuration. Type de value et defaultValue dépendent de l'élément de style.

Champ	Type	Description
valeur	`string OR object OR bool OR number`	La 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`	La valeur par défaut du style défini dans la section configuration de visualisation

interactionsById

{

}

L'objet interactionsById fournit des données d'interaction indexées par l'objet interactionId configuration de la visualisation.

Index	Type	Description
configId	`interaction`	Un objet qui contient des données associées à interaction

interactionField

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

L'objet interactionField contient le tableau des éléments pris en charge 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`	La 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>`	Les actions possibles d'interaction, comme défini dans configuration

interactionValue

L'objet interactionValue fournit les valeurs sélectionnées par l'utilisateur pour l'interaction. de mots clés. Si la clé data existe, l'objet InteractionData reflète le l'état actuel du filtre. Si la clé data n'existe pas, la visualisation n'est actuellement pas configuré en tant que filtre.

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

Champ	Type	Description
type	`enum(InteractionType)`	L'utilisateur sélectionné InteractionType
données	`object(InteractionData)`	L'attribut data associé à l'état actuel le 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`	Un objet au format `{color: string, opacity: number}`
fontColor	`object`	Un objet au format `{color: string, opacity: number}`
accentFillColor	`object`	Un objet au format `{color: string, opacity: number}`
accentFontColor	`object`	Un objet au format `{color: string, opacity: number}`
fontFamily	`string`	Chaîne décrivant la famille de polices
accentFontFamily	`string`	Chaîne décrivant la police d'accentuation famille
increaseColor	`object`	Un objet au format `{color: string, opacity: number}`
decreaseColor	`object`	Un objet au format `{color: string, opacity: number}`
gridColor	`object`	Un objet au format `{color: string, opacity: number}`
seriesColor	`Array<object>`	Tableau d'objets de la 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. "PAR DÉFAUT" renverra toujours des données et « COMPARAISON » ne sont renseignées 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
"PAR DÉFAUT"	`object(tableObject) OR Array<objectRow>`	Le `tableObject` associé à les données qu'un utilisateur ajoute visualisation
"COMPARAISON"	`object(tableObject) OR Array<objectRow>`	Le `tableObject` associé à les données de comparaison de dates, si applicables

dateRangesById

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

L'objet dateRangesById fournit des informations sur la valeur par défaut et la comparaison plages de dates. Si aucune plage de dates n'est définie, l'objet vide. DEFAULT et COMPARISON ne seront renseignés que si les dates respectives sont configurées par l'utilisateur. Les données des plages de dates sont liées aux les données par défaut et les données de comparaison, telles que définies dans tablesById.

Champ	Type	Description
"PAR DÉFAUT"	`object(dateRange)`	Le `dateRange` associé au plage de dates par défaut, le cas échéant.
"COMPARAISON"	`object(dateRange)`	Le `dateRange` associé à un 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 période 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 champs Les objets ont é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é 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()

getWidth() utilisé(s)

getHeight()

getHeight() utilisé(s)

sendInteraction()

InteractionType

sendInteraction utilisé(s)

interactionData

clearInteraction()

clearInteraction() utilisé(s)

subscribeToData(callback, options)

subscribeToData() utilisé(s)

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()`

`getWidth()` utilisé(s)

`getHeight()`

`getHeight()` utilisé(s)

`InteractionType`

`sendInteraction` utilisé(s)

`interactionData`

`clearInteraction()` utilisé(s)

`subscribeToData(callback, options)`

`subscribeToData()` utilisé(s)

`data`

Référence `tableFormat`

Exemple de données `tableFormat`