Utiliser des composants de visualisation pour afficher des visualisations personnalisées

Cet exemple présente une visualisation personnalisée en local d'une application en cours de développement, et non une visualisation personnalisée disponible sur Looker Marketplace.

Les composants de la visualisation Looker comportent un système d'adaptateur qui permet aux développeurs de remplacer les types de graphiques existants ou d'ajouter des options de type de graphique entièrement nouvelles.

Cette option peut être utile dans les cas suivants:

  • Vous avez créé des visualisations React personnalisées que vous souhaitez utiliser avec des composants Looker.
  • Vous souhaitez remplacer une visualisation Looker par défaut existante par une visualisation créée sur une autre bibliothèque.

La possibilité de remplacer ou d'ajouter des graphiques peut être particulièrement utile si vous créez une application qui permet aux utilisateurs de modifier le type de visualisation d'un graphique pendant une session.

Contexte

Après avoir affiché une requête dans l'interface Explorer de Looker et transmis son Query.client_id dans les composants de visualisation de Looker, vous pouvez modifier le type de graphique en mettant à jour la propriété type de la propriété config.

Chaque valeur acceptée par la propriété type est mappée à un composant React spécifique. Ainsi, lorsque type est défini sur line, un composant Line est affiché. Lorsque type est défini sur area, un composant Area s'affiche, et ainsi de suite.

La propriété chartTypeMap du composant Visualization vous permet d'ajouter une entrée ou de remplacer des entrées existantes dans le mappage de type/composant qui associe chaque valeur type à un composant particulier.

Conditions requises

Comme pour l'exemple Utiliser des composants de visualisation et la propriété query pour afficher un exemple de visualisation simple, vous devez commencer par importer le composant DataProvider et fournir une instance de SDK authentifiée. L'exemple suivant est créé dans le framework d'extensions de Looker, et le SDK provient de ExtensionContext.

Dans DataProvider, vous pouvez afficher les composants Query et Visualization pour demander des données au SDK Looker et afficher la visualisation attendue dans votre application.

La configuration se présente comme suit (dans la propriété query, remplacez la valeur par Query.client_id) dans votre requête :

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization />
            </Query>
        </DataProvider>
    )
}

Ajouter un type de graphique

Comme dans l'exemple de visualisation simple, vous pouvez modifier le type de graphique affiché en transmettant un remplacement de configuration au composant Query.

<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'pie' }}>
    <Visualization />
</Query>

Dans le cas présent, type a été défini sur pie: un graphique proposé par défaut par les composants Looker. Que se passe-t-il si vous souhaitez utiliser un graphique qui n'est pas proposé par défaut ? Dans ce cas, vous pouvez utiliser la propriété chartTypeMap de Visualization pour ajouter ou remplacer les composants du graphique dans le mappage de type/composant du système d'adaptateurs.

Par exemple, si vous souhaitez ajouter un graphique radar à la carte de type/composant, ajoutez-le au chartTypeMap comme suit:

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'radar'}}>
                <Visualization chartTypeMap={{ radar: MyCustomRadar }} />
            </Query>
        </DataProvider>
    )
}

Ce code effectue les opérations suivantes:

  • Importe le composant React MyCustomRadar
  • Attribue la clé radar à la propriété config.type
  • Met à jour la propriété chartTypeMap pour que le système de mappage de types sache quoi afficher pour une type de radar.

Voici comment cela s'affiche dans l'espace de jeu de visualisation Looker:

Une carte radar est affichée dans l'aire de jeu de visualisation.

De même, vous pouvez remplacer les graphiques existants si vous souhaitez afficher votre propre version. Dans l'exemple suivant, le graphique en courbes des composants Looker par défaut est remplacé par un composant de graphique en courbes personnalisé:

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomLine } from '../MyCustomLine'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization chartTypeMap={{ line: MyCustomLine }} />
            </Query>
        </DataProvider>
    )
}

Désormais, chaque fois que le composant Query rencontre une requête dont le type de visualisation est défini sur line, il affiche l'implémentation personnalisée à la place de Looker par défaut.

Étapes suivantes