Ce tutoriel s'adresse aux développeurs JavaScript expérimentés et suppose une certaine connaissance des techniques de programmation fonctionnelle.
Dans cet exemple, nous commençons par une requête en rapport avec des informations sur les ventes trimestrielles hypothétiques pour certaines marques. Nous allons d'abord filtrer la requête pour des marques spécifiques, puis nous croiser les résultats par trimestre de vente. Consultez le tableau suivant pour voir un exemple.
Ensuite, nous utiliserons des composants de visualisation pour créer une visualisation personnalisée qui montre comment les produits de chaque marque ont évolué au cours du dernier trimestre. Vous obtiendrez un nouveau type de visualisation composée d'une série de graphiques sparkline imbriqués dans un tableau, qui ressemble à l'exemple suivant:
En plus de vous montrer comment créer une visualisation personnalisée, cet exemple présente quelques bonnes pratiques pour utiliser l'API Looker dans une application React.
Pour créer une visualisation personnalisée avec les composants Looker, assurez-vous que votre configuration répond aux exigences, puis procédez comme suit:
- Créer une requête dans une exploration et copier la valeur
qid
- Transmettre les données à un composant de visualisation personnalisé
- Créer le composant
CustomVis
- Transformer les données normalisées
- Insérer les données transformées dans
CustomVis
- Générer la visualisation personnalisée
L'utilisation de composants de visualisation pour créer une visualisation personnalisée est appropriée lorsque la visualisation personnalisée est destinée à une application ou à une extension intégrée. Si vous souhaitez rendre la visualisation personnalisée disponible pour les utilisateurs Looker sur une instance Looker, suivez les instructions de la page de documentation de
visualization
. Si vous souhaitez développer une visualisation personnalisée et l'importer dans Looker Marketplace, suivez les instructions de la page de documentation Développer une visualisation personnalisée pour la place de marché Looker.
Conditions requises
Avant de commencer, vous devez prendre en compte les éléments suivants:
- Vous devez avoir accès à une instance Looker.
- Que vous conceviez dans le framework d'extension ou dans votre propre application React autonome, il est important de vous authentifier auprès de l'API de Looker et d'avoir accès à l'objet SDK Looker. Pour en savoir plus, consultez la page sur l'authentification via l'API Looker ou notre framework d'extension.
- Assurez-vous d'avoir installé le package NPM des composants de visualisation Looker et le package NPM
@looker/components-data
. Vous trouverez des informations sur l'installation et l'utilisation du package de composants de visualisation dans le document README, disponible sur GitHub et NPM.
Étape 1: Créer une requête dans une exploration et copier son ID
Dans cet exemple, nous utilisons des informations sur les ventes trimestrielles hypothétiques pour les marques que nous suivons au fil du temps.
Nous allons créer un tableau croisé dynamique pour ces données, car Looker est la méthode intégrée pour regrouper les résultats de requêtes. Dans une exploration, nous pouvons exécuter une requête et créer un graphique des données à l'aide de l'un des types de visualisation natifs de Looker. Le graphique fournit de nombreuses informations, mais il est difficile d'analyser d'un coup d'œil les tendances des produits de chaque marque:
Comme pour l'exemple d'affichage d'une visualisation simple, l'étape suivante consiste à copier la valeur qid
depuis la barre d'URL de l'exploration. Dans cet exemple, la valeur qid
sera Uijcav7pCA4MZY2MompsPZ
, mais cette valeur est spécifique à notre instance de test. Votre valeur sera différente.
Étape 2: Transmettre les données à un composant de visualisation personnalisé
Pour commencer, transmettez la valeur qid
extraite de l'URL de l'exploration au composant Query
, puis l'objet de SDK authentifié à DataProvider
.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query query='Uijcav7pCA4MZY2MompsPZ'></Query>
</DataProvider>
)
}
Au lieu d'afficher une visualisation Looker native via le composant Visualization
, nous allons créer notre propre composant personnalisé appelé CustomVis
.
Le composant Query
peut accepter n'importe quel élément React en tant qu'enfant. Il transmet simplement les valeurs config
, data
, fields
et totals
en tant que propriétés pour afficher vos propres composants de visualisation. Nous afficherons CustomVis
en tant qu'enfant de Query
, afin qu'il puisse recevoir toutes les données pertinentes en tant que propriétés.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'
import { CustomVis } from '../path/to/MyCustomVis'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query query='Uijcav7pCA4MZY2MompsPZ'>
<CustomVis />
</Query>
</DataProvider>
)
}
Étape 3: Créez le composant CustomVis
Créons ensuite le composant CustomVis
. Les propriétés héritées du composant Query
sont config
, fields
, data
, pivots
et totals
:
config
décrit toutes les façons dont les données doivent s'afficher dans un graphique, comme l'épaisseur de la ligne dans un graphique sparkline, ou la taille et la forme des points d'un nuage de points.fields
stocke des métadonnées supplémentaires sur les valeurs de mesure et de dimension renvoyées par la requête, telles que la mise en forme des valeurs ou le libellé à attribuer à chaque axe.data
est la réponse clé/valeur renvoyée par la requête.pivots
décrit la dimension selon laquelle la requête est croisée.totals
fait référence aux nombres totaux de lignes de Looker pour les visualisations basées sur des tables.
Nous pouvons transmettre ces propriétés non modifiées à une visualisation de table en insérant un composant Table
.
import React from 'react'
import { Table } from '@looker/visualizations'
export const CustomVis = ({ config, fields, data, pivots }) => {
return <Table config={config} data={data} fields={fields} pivots={pivots} />
}
Cela nous donne une idée des données telles qu'elles sont renvoyées directement par le SDK. Dans la réponse affichée, il y a une ligne pour chaque marque dont les résultats sont regroupés ou croisés par trimestre.
Étape 4: Transformer les données normalisées
Pour convertir ces données croisées dynamiquement avec des sparklines imbriquées, nous allons isoler toutes les valeurs de mesure et les transmettre aux sous-graphiques. Dans le graphique suivant, les données pertinentes d'une seule ligne sont mises en surbrillance pour illustrer les données que nous allons réduire et afficher avec une visualisation enfant:
Nous allons créer une transformation personnalisée pour cela. Voici un exemple spécifique à ce scénario ; vous devrez analyser vos propres données en conséquence.
import React from 'react'
import { Table, Sparkline } from '@looker/visualizations'
// we assign this value to a constant to ensure that fields and data
// objects remain in sync.
const NESTED_DATA_KEY = 'orderCount'
const nestSparklines = (data) => {
return data.reduce((acc, d) => {
// the first entry is the dimension (brand name), and the rest of the rows are the
// quarterly sales information we want to pass to the Sparkline.
const [parentDimension, ...measurePairs] = Object.entries(d)
// `nonPivotedData` represents a single data row.
// e.g. [{entry: 1, orderCount: 10}, {entry: 2, orderCount: 15}, ...etc]
const nonPivotedData: SDKRecord[] = measurePairs.map(([_, value], i) => {
return { entry: i, [NESTED_DATA_KEY]: value }
})
// now for each row in the table we render a Sparkline using the `nonPivotedData`
// that we built above.
// E.G. [{products.brand: 'adidas', orderCount: <Sparkline />}]
return [
...acc,
{
[parentDimension[0]]: parentDimension[1],
[NESTED_DATA_KEY]: () => (
<Sparkline
height={75}
data={nonPivotedData}
fields={{
measures: [{ name: NESTED_DATA_KEY }],
dimensions: [],
}}
/>
),
},
]
}, [])
}
Pour créer cette fonction, procédez comme suit:
- Effectuez une réduction sur l'ensemble de données pour isoler le nom de la marque des données de commande trimestrielles pour chaque ligne.
- Modifiez chaque ligne pour inclure la dimension et un composant React affiché pouvant représenter les valeurs de chaque ligne du tableau.
Étape 5: Insérez les données transformées dans CustomVis
À présent, transformez les données à l'aide de notre nouvelle fonction et affectez la sortie à une nouvelle variable appelée nestedData
:
export const CustomVis =({
fields,
data,
config,
pivots,
}) => {
const nestedData = nestSparklines(data)
return (
<Table
fields={{
measures: [{ name: NESTED_DATA_KEY, label: 'Orders Count By Quarter' }],
dimensions: fields.dimensions,
pivots: [],
}}
config={config}
data={nestedData}
pivots={pivots}
/>
)
}
Étape 6: Générer la visualisation personnalisée
Une fois que vous avez inséré les données transformées et configuré le graphique, la visualisation ressemble à cet exemple de tableau avec des graphiques sparkline individuels pour chaque ligne:
L'intégralité du code nécessaire pour afficher la visualisation ci-dessus est la suivante:
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Sparkline, Table } from '@looker/visualizations'
// we assign this value to a constant to ensure that fields and data
// objects remain in sync.
const NESTED_DATA_KEY = 'orderCount'
const ROW_HEIGHT = 75
const nestSparklines = data => {
return data.reduce((acc, d) => {
// the first entry is the dimension (brand name), and the rest of the rows are the
// quarterly sales information we want to pass to the Sparkline.
const [parentDimension, ...measurePairs] = Object.entries(d)
// `nonPivotedData` represents a single data row.
// e.g. [{entry: 1, orderCount: 10}, {entry: 2, orderCount: 15}, ...etc]
const nonPivotedData = measurePairs.map(([_, value], i) => {
return { entry: i, [NESTED_DATA_KEY]: value }
})
// now for each row in the table we render a Sparkline using the `nonPivotedData`
// that we built above.
// E.G. [{products.brand: 'adidas', orderCount: <Sparkline />}]
return [
...acc,
{
[parentDimension[0]]: parentDimension[1],
[NESTED_DATA_KEY]: () => (
<Sparkline
height={ROW_HEIGHT}
data={nonPivotedData}
fields={{
measures: [{ name: NESTED_DATA_KEY }],
dimensions: [],
}}
/>
),
},
]
}, [])
}
const CustomVis = ({ fields, data, pivots, config }) => {
const nestedData = nestSparklines(data)
return (
<Table
config={config}
height={500}
fields={{
measures: [{ name: NESTED_DATA_KEY, label: 'Orders Count By Quarter' }],
dimensions: fields.dimensions,
pivots: [],
}}
data={nestedData}
pivots={pivots}
defaultRowHeight={ROW_HEIGHT}
/>
)
}
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query query='Uijcav7pCA4MZY2MompsPZ'>
<CustomVis />
</Query>
</DataProvider>
)
}
É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 afficher des visualisations personnalisées
- Tables de propriétés de visualisation et de requête