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

Cet exemple affiche une visualisation personnalisée en local d'une application en cours de développement. Il ne s'agit pas d'une visualisation personnalisée disponible depuis Looker Marketplace.

Les composants de visualisation Looker disposent d'un système d'adaptateur qui permet aux développeurs d'ignorer les types de graphiques existants ou d'ajouter de toutes nouvelles options de type de graphique.

Cette option peut être utile dans les cas suivants:

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

La possibilité d'ignorer ou d'ajouter des graphiques peut s'avérer particulièrement utile si vous créez une application permettant aux utilisateurs de modifier le type de visualisation des graphiques au cours d'une session.

Expérience

Après avoir affiché une requête dans l'interface Explorer de Looker et transmis son Query.client_id aux 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 est affiché, et ainsi de suite.

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

Conditions requises

Comme pour utiliser des composants de visualisation et la propriété query pour afficher une visualisation simple, vous devez commencer par importer le composant DataProvider et fournir une instance SDK authentifiée. L'exemple suivant est conçu dans le framework d'extension 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 est la suivante (dans la propriété query, remplacez la valeur par le Query.client_id de 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 pour l'exemple de visualisation simple, vous pouvez modifier le type de graphique affiché en transmettant un config override au composant Query.

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

Dans ce cas, type a été défini sur pie, ce qui correspond à un graphique proposé par défaut par les composants Looker. Mais 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 la carte de types/composants du système d'adaptateur.

Si, par exemple, vous voulez ajouter un nouveau graphique en radar au mappage de types/composants, ajoutez-le à 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
  • Il attribue la clé radar à la propriété config.type.
  • Met à jour la propriété chartTypeMap afin que le système de mappage des types sache quoi afficher pour un type de radar.

Voici comment elle s'affiche dans le bac à sable de la visualisation Looker:

Une carte en radar est affichée dans le terrain de jeu de visualisation.

De même, vous pouvez remplacer des graphiques existants si vous souhaitez effectuer le rendu de 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 l'implémentation par défaut de Looker.

Étapes suivantes