Notez que vous consultez actuellement la documentation de Looker. Pour accéder à la documentation sur Looker Studio, consultez la page https://support.google.com/looker-studio.

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

Créer des extensions de tuiles

À partir de Looker 24.0, il est possible de développer des extensions pour s'exécuter dans une carte dans les tableaux de bord. Les extensions qui peuvent être exécutées en tant que carte ou visualisation peuvent être ajoutées lorsque le tableau de bord est en mode Édition ou enregistrées dans un tableau de bord en tant que visualisation à partir d'une exploration. Les extensions peuvent également être configurées sous forme de vignettes dans les tableaux de bord LookML.

Voici des exemples d'extensions pouvant être utilisées comme vignettes de tableau de bord:

L'extension de visualisation de cartes montre comment créer une visualisation personnalisée à l'aide du framework d'extension.
L'extension du SDK de cartes affiche les méthodes d'API disponibles spécifiques aux extensions de carte.

Utiliser le SDK Extension Looker avec les extensions de carte

Les extensions de carte nécessitent que le paramètre mount_points soit défini dans le fichier manifeste du projet LookML pour qu'elles puissent être chargées en tant que vignettes dans un tableau de bord. Il existe deux types de mount_points en lien avec les extensions de carte:

  mount_points: {
    dashboard_vis: yes
    dashboard_tile: yes
    standalone: yes
  }

dashboard_vis : lorsque cette option est activée, l'extension apparaît dans les options de visualisation d'une exploration, où l'extension peut être sélectionnée en tant que visualisation et enregistrée en tant que vignette de tableau de bord. Lorsque le tableau de bord est exécuté, il exécute la requête associée à la vignette et met les données à la disposition de l'extension. Ce fonctionnement est semblable aux visualisations personnalisées. La principale différence entre une visualisation personnalisée et une extension s'exécutant dans une vignette de tableau de bord pour laquelle dashboard_vis est activé est que l'extension peut effectuer des appels d'API Looker.
dashboard_tile : lorsque cette extension est activée, elle apparaît dans le panneau Extensions qui s'affiche lorsqu'un utilisateur modifie un tableau de bord et sélectionne l'option Extensions après avoir cliqué sur le bouton Ajouter. Ce type d'extension est chargé de récupérer ses propres données, au lieu de laisser la requête de carte fournir automatiquement des données à l'extension.

En ajoutant un point d'installation supplémentaire, standalone, l'extension s'affiche dans la section Applications du menu principal de Looker. Il est possible qu'une extension ait plusieurs points d'installation définis. Au moment de l'exécution, l'extension reçoit une notification de la façon dont elle est installée et peut ajuster son comportement en conséquence. Par exemple, vous devrez peut-être définir leur propre hauteur pour les extensions standalone, contrairement aux extensions de type "Tile".

API supplémentaires de l'extension de carte

Les extensions de carte sont fournies avec des données et des API supplémentaires au moment de l'exécution. Elles sont obtenues à partir du contexte de l'extension:

const {
  tileSDK,
  tileHostData,
  visualizationData,
  visualizationSDK,
} = useContext(ExtensionContext40)

tileSDK : fournit des fonctions spécifiques aux cartes pour permettre à l'extension d'interagir avec l'hôte du tableau de bord Looker. Par exemple, pour autoriser l'extension à afficher et effacer les messages d'erreur.
tileHostData : fournit les données de tuiles à l'extension. Les données sont automatiquement mises à jour en fonction des interactions avec le tableau de bord d'hébergement. L'indicateur isDashboardEditing en est un exemple.
visualizationSDK : fournit des fonctions spécifiques à la visualisation pour permettre à l'extension d'interagir avec l'hôte du tableau de bord Looker. La fonction updateRowLimit en est un exemple.
visualizationData : fournit des données de visualisation à l'extension. Les données sont automatiquement mises à jour en fonction des interactions avec le tableau de bord d'hébergement. Elles sont semblables à celles fournies pour les visualisations personnalisées.

Créer des extensions réactives

Les iFrames dans lesquels les extensions s'exécutent sont automatiquement redimensionnés lorsque la fenêtre hôte Looker parente est redimensionnée. Cette opération est automatiquement reflétée dans la fenêtre de contenu de l'iFrame. Le composant iFrame n'a pas de marge intérieure. C'est donc à l'extension de fournir sa propre marge intérieure, afin qu'il soit cohérent avec l'application Looker. Pour les extensions autonomes, c'est à l'extension de contrôler la hauteur de l'extension. Pour les extensions qui s'exécutent dans des vignettes de tableau de bord ou des visualisations d'exploration, la fenêtre de contenu de l'iFrame est automatiquement définie sur la hauteur fournie par l'iFrame.

Remarques sur le rendu

Il est important de noter que les extensions de vignette sont affichées lorsqu'un tableau de bord est téléchargé au format PDF ou image. Le moteur de rendu s'attend à ce que la carte l'informe une fois le rendu terminé. Sinon, le moteur de rendu cesse de répondre. Voici un exemple d'alerte au moteur de rendu que la carte s'est affichée.

  const { extensionSDK } = useContext(ExtensionContext40)

  useEffect(() => {
    extensionSDK.rendered()
  }, [])

Les animations doivent également être désactivées lors du rendu. Voici un exemple dans lequel les configurations d'animation sont désactivées lors de l'affichage:

  const { lookerHostData} = useContext(ExtensionContext40)
  const isRendering = lookerHostData?.isRendering

  const config = isRendering
    ? {
        ...visConfig,
        valueCountUp: false,
        waveAnimateTime: 0,
        waveRiseTime: 0,
        waveAnimate: false,
        waveRise: false,
      }
    : visConfig

  if (mountPoint === MountPoint.dashboardVisualization) {
    return <VisualizationTile config={config} />
  }

Fonctions et propriétés du SDK Tile

Le SDK de cartes fournit des fonctions qui permettent à une extension de carte d'interagir avec son tableau de bord d'hébergement.

Les fonctions et propriétés disponibles sont présentées dans le tableau suivant:

Fonction ou propriété	Description
`tileHostData` (propriété)	Hébergez les données spécifiques à l'extension de carte. Pour en savoir plus, consultez la section Données du SDK Tile.
`addError`	Lorsqu'ils sont appelés, le tableau de bord ou l'exploration affiche un message d'erreur sous la visualisation.
`clearError`	Lorsqu'ils sont appelés, le tableau de bord ou l'exploration masque tout message d'erreur affiché sous la visualisation.
`openDrillMenu`	Pour les extensions de visualisation, cet appel ouvre un menu d'analyse. Cet appel est ignoré si l'extension n'est pas une visualisation de l'extension de carte.
`runDashboard`	Exécute le tableau de bord actuel. Cet appel est ignoré par une extension de visualisation de vignettes exécutée dans une exploration.
`stopDashboard`	Arrête un tableau de bord en cours d'exécution. Cet appel est ignoré par une extension de visualisation de vignettes exécutée dans une exploration.
`updateFilters`	Met à jour les filtres dans le tableau de bord ou l'exploration actuels.
`openScheduleDialog`	Ouvre la boîte de dialogue de planification. Cet appel est ignoré lors de l'exécution dans une exploration.
`toggleCrossFilter`	Active/Désactive les filtres croisés. Cet appel est ignoré lors de l'exécution dans une exploration.

Données du SDK Tile

Les propriétés disponibles des données du SDK de carte sont présentées dans le tableau suivant:

Propriété	Description
`isExploring`	Lorsque la valeur est "true", indique que la vignette est configurée en tant que visualisation dans une exploration.
`dashboardId`	ID du tableau de bord de la vignette en cours de rendu. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée.
`elementId`	ID de l'élément de la carte en cours de rendu. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée.
`queryId`	ID de requête de la vignette en cours de rendu si elle est associée à une visualisation. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée. `queryId` est l'ID de la requête créée lorsque la visualisation est intégrée à l'exploration Looker. Il ne contient aucun filtre ni aucun filtrage croisé à appliquer au tableau de bord. Pour refléter les données affichées dans le `QueryResponse`, vous devrez appliquer des filtres et des filtres croisés, et générer une nouvelle requête. Par conséquent, certaines propriétés peuvent être plus utiles que `queryId`. Consultez `filteredQuery` pour obtenir un objet de requête avec des filtres appliqués.
`querySlug`	Le slug de requête de la carte en cours d'affichage si elle est associée à une visualisation. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée. `querySlug` est un slug de la requête créé lorsque la visualisation est intégrée à l'exploration Looker. Il ne contient aucun filtre ni filtrage croisé appliqué au tableau de bord. Pour refléter les données affichées dans le `QueryResponse`, vous devrez appliquer des filtres et des filtres croisés, et générer une nouvelle requête. Par conséquent, certaines propriétés peuvent être plus utiles que `querySlug`. Consultez `filteredQuery` pour obtenir un objet de requête avec des filtres appliqués.
`dashboardFilters`	Filtres appliqués au tableau de bord. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée.
`dashboardRunState`	Indique si le tableau de bord est en cours d'exécution. Si la tuile est configurée en tant qu'exploration, l'état est `UNKNOWN`. Pour des raisons de performances du tableau de bord, l'état d'exécution peut ne jamais être affiché comme étant en cours d'exécution. Cela se produit généralement si aucune autre tuile n'est associée à une requête, y compris celle à laquelle l'extension est associée. Si l'extension a besoin de savoir avec certitude qu'un tableau de bord a été exécuté, détecter les différences dans `lastRunStartTime` est la méthode fiable.
`isDashboardEditing`	Lorsque la valeur est "true", le tableau de bord est en cours de modification. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée.
`isDashboardCrossFilteringEnabled`	Lorsque la valeur est "true", le filtrage croisé est activé dans le tableau de bord. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée.
`filteredQuery`	Objet de requête correspondant à l'ID de requête associé à l'élément de tableau de bord sous-jacent qui applique les filtres de tableau de bord et les modifications de fuseau horaire apportées au niveau du tableau de bord.
`lastRunSourceElementId`	ID de l'élément d'extension de carte qui a déclenché la dernière exécution du tableau de bord. L'ID sera indéfini si l'exécution du tableau de bord a été déclenchée par le bouton Exécuter ou l'actualisation automatique du tableau de bord, ou si l'exécution a été déclenchée à l'aide du SDK intégré. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée. Notez que `lastRunSourceElementId` peut être identique à l'ID de l'élément de l'instance d'extension actuelle. Par exemple, si l'extension déclenche l'exécution d'un tableau de bord, elle en sera informée au début et à la fin.
`lastRunStartTime`	Indique l'heure de début de la dernière exécution du tableau de bord. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée. Notez que les heures de début et de fin indiquées ne doivent pas être utilisées pour collecter des métriques de performances.
`lastRunEndTime`	Indique l'heure de fin de la dernière exécution du tableau de bord. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée. Si la vignette est en cours d'exécution, cette propriété n'est pas renseignée. Notez que les heures de début et de fin indiquées ne doivent pas servir à collecter les métriques de performances.
`lastRunSuccess`	Indique si la dernière exécution du tableau de bord a réussi ou non. Si la tuile est configurée en tant qu'exploration, cette propriété n'est pas renseignée. Si la vignette est en cours d'exécution, cette propriété n'est pas renseignée.

Fonctions et propriétés du SDK Visualisation

Les fonctions et propriétés du SDK de visualisation disponibles sont présentées dans le tableau suivant:

Fonction ou propriété	Description
`visualizationData` (propriété)	Visualisation (combinaison de données `visConfig` et `queryResponse`).
`visConfig` (propriété)	Données de configuration de la visualisation: Configurations de mesure Configurations des dimensions Calculs de tables Configurations de tableau croisé dynamique Configurations de visualisation Ils permettent de personnaliser l'apparence d'une visualisation dans une exploration.
`queryResponse` (propriété)	Données de réponse de la requête
`configureVisualization`	Définit la configuration par défaut pour une visualisation des extensions. La configuration sera affichée dans l'éditeur de visualisation des explorations. Cette méthode ne doit être appelée qu'une seule fois.
`setVisConfig`	Met à jour la configuration de la visualisation.
`updateRowLimit`	Met à jour le nombre maximal de lignes de la requête.

Données du SDK de visualisation

Le SDK de visualisation comprend les éléments suivants:

Données de configuration de la visualisation
Données de réponse à la requête

Données de configuration de la visualisation

Propriété	Description
`queryFieldMeasures`	Mesurer les informations
`queryFieldDimensions`	Informations sur les dimensions
`queryFieldTableCalculations`	Informations sur le calcul de tables
`queryFieldPivots`	Informations sur le tableau croisé dynamique
`visConfig`	Données de configuration visuelle Elle doit être fusionnée avec la configuration par défaut et appliquée à la visualisation affichée par l'extension.

export interface VisualizationConfig {
  queryFieldMeasures: Measure[]
  queryFieldDimensions: Dimension[]
  queryFieldTableCalculations: TableCalculation[]
  queryFieldPivots: PivotConfig[]
  visConfig: RawVisConfig
}

Données de réponse à la requête

Propriété	Description
`data`	Tableau de données de ligne
`fieldMeasures`	Informations sur les mesures de champ.
`fieldDimensions`	Informations sur les dimensions des champs.
`fieldTableCalculations`	Informations sur les calculs de table de champs.
`fieldPivots`	Informations sur le tableau croisé dynamique des champs.
`fieldMeasureLike`	Tableau concaténé d'informations de mesure de champ et de calculs de tables qui se comportent comme des mesures.
`fieldDimensionLike`	Tableau concaténé d'informations de dimension de champ et de calculs de tables qui se comportent comme des dimensions.