Cet exemple présente une visualisation personnalisée qui est adaptée à une application en cours de développement, et non à une visualisation personnalisée disponible sur Looker Marketplace.
Les composants de 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 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é de remplacer ou d'ajouter des graphiques peut s'avérer particulièrement pertinente si vous créez une application qui permet aux utilisateurs de modifier le type de visualisation des graphiques au cours d'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 associé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 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 des extensions de Looker, et le SDK provient de ExtensionContext
.
Dans DataProvider
, vous pouvez effectuer le rendu des composants Query
et Visualization
pour demander des données au SDK Looker et effectuer le rendu attendu 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 rendu en transmettant une configuration de remplacement 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 que les composants Looker proposent par défaut. Que se passe-t-il si vous voulez 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 des composants de graphique dans le type/mappage de composants du système d'adaptateur.
Par exemple, si vous souhaitez ajouter un nouveau graphique en radar à la carte des types et des composants, ajoutez-le au fichier 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
MyCustomRadar
React - 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 identifier le rendu d'unetype
deradar
Voici comment il s'affiche dans l'environnement de visualisation de Looker:
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 la valeur par défaut Looker.
Étapes suivantes
- Utiliser des composants de visualisation et la propriété
dashboard
pour afficher une visualisation simple - Utiliser des composants de visualisation et la propriété
query
pour afficher une visualisation simple - Utiliser des composants de visualisation pour créer une visualisation personnalisée
- Visualisation et requêtes des tables de propriété