Este instructivo está dirigido a desarrolladores de JavaScript experimentados y supone que están familiarizados con técnicas de programación funcionales.
En este ejemplo, comenzamos con una consulta que se relaciona con información hipotética sobre las ventas trimestrales de algunas marcas. Primero, filtraremos la búsqueda por marcas específicas y, luego, alternaremos los resultados por trimestre de ventas. Consulta la siguiente tabla para ver un ejemplo.
Luego, usaremos los componentes de visualización para crear una visualización personalizada que muestre las tendencias de los productos de cada marca durante el último trimestre. El resultado será un nuevo tipo de visualización compuesto por una serie de minigráficos anidados dentro de una tabla, que se ve como este ejemplo:
Además de mostrarte cómo crear una visualización personalizada, en este ejemplo se muestran algunas prácticas recomendadas para trabajar con la API de Looker dentro de una aplicación de React.
Para crear una visualización personalizada con componentes de Looker, asegúrate de que tu configuración cumpla con los requisitos y, luego, sigue estos pasos:
- Crea una consulta en una exploración y copia el valor
qid
. - Pasa los datos a un componente de visualización personalizada
- Compila el componente
CustomVis
- Transforma los datos normalizados
- Inserta los datos transformados en
CustomVis
. - Genera la visualización personalizada
El uso de componentes de visualización para crear una visualización personalizada es apropiado cuando esta visualización está destinada a una aplicación o extensión incorporada. Si quieres que la visualización personalizada esté disponible para los usuarios de Looker en una instancia de Looker, sigue las instrucciones de la página de documentación de
visualization
. Si quieres desarrollar una visualización personalizada y subirla a Looker Marketplace, sigue las instrucciones de la página de documentación Desarrolla una visualización personalizada para Looker Marketplace.
Requisitos
Antes de comenzar, necesitas algunos elementos:
- Debes tener acceso a una instancia de Looker.
- Ya sea que compiles en el framework de extensiones o en tu propia aplicación de React independiente, es importante autenticar con la API de Looker y tener acceso al objeto del SDK de Looker. Consulta sobre la autenticación de la API de Looker o nuestro framework de extensión para obtener más información.
- Asegúrate de haber instalado el paquete de NPM de los componentes de visualización de Looker y el paquete de NPM
@looker/components-data
. La información para instalar y usar el paquete de componentes de visualización se encuentra en el documento readme, disponible en GitHub y NPM.
Paso 1: Crea una consulta en una exploración y copia el ID de consulta
En este ejemplo, usamos información hipotética sobre las ventas trimestrales para las marcas a las que les hacemos un seguimiento a lo largo del tiempo.
Cambiaremos estos datos, ya que esta es la forma integrada de Looker para agrupar los resultados de las consultas. En una Exploración, podemos ejecutar una consulta y crear un gráfico de los datos con uno de los tipos de visualizaciones nativas de Looker. El gráfico proporciona mucha información, pero es difícil analizar a simple vista las tendencias de los productos de cada marca:
Al igual que en el ejemplo de cómo renderizar una visualización simple, el siguiente paso es copiar el valor qid
de la barra de URL de Explorar. A los efectos de este ejemplo, el valor de qid
será Uijcav7pCA4MZY2MompsPZ
, pero ese valor es específico de nuestra instancia de prueba. tu valor diferirá.
Paso 2: Pasa los datos a un componente de visualización personalizada
Para comenzar, pasa el valor qid
tomado de la URL de Explorar al componente Query
y el objeto SDK autenticado a 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>
)
}
A continuación, en lugar de renderizar una visualización nativa de Looker con el componente Visualization
, crearemos nuestro propio componente personalizado llamado CustomVis
.
El componente Query
puede aceptar cualquier elemento de React como elemento secundario y simplemente pasará los valores config
, data
, fields
y totals
como propiedades para renderizar tus propios componentes de visualización. Renderizaremos CustomVis
como un elemento secundario de Query
, de modo que pueda recibir todos los datos relevantes como propiedades.
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>
)
}
Paso 3: Compila el componente CustomVis
A continuación, compilemos el componente CustomVis
. Las propiedades que se heredan del componente Query
son config
, fields
, data
, pivots
y totals
:
config
describe todas las formas en que se deben renderizar los datos en un gráfico, como el espesor de la línea en un minigráfico o el tamaño y la forma de los puntos de un diagrama de dispersión.fields
almacena metadatos adicionales sobre los valores de medición y dimensión que se muestran en la consulta, como el formato que se debe dar a los valores o qué etiquetar cada eje.data
es la respuesta del par clave-valor que mostró la consulta.pivots
describe la dimensión a la que se dinamiza la consulta.totals
hace referencia a los totales de filas de Looker para usarlos en visualizaciones basadas en tablas.
Podemos pasar estas propiedades sin modificar a una visualización de tabla si insertamos un componente 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} />
}
Esto nos da una idea de los datos, ya que se muestran directamente desde el SDK. En la respuesta renderizada, hay una fila para cada marca con los resultados agrupados o dinámicos por trimestre.
Paso 4: Transforma los datos normalizados
Para convertir estos datos dinámicos para que se procesen con minigráficos anidados, aislamos todos los valores de medición y los pasamos a los subgráficos. En el siguiente gráfico, se destacan los datos relevantes de una sola fila para ilustrar los datos que contraeremos y renderizaremos con una visualización secundaria:
En este caso, crearemos una transformación personalizada. El siguiente es un ejemplo específico para esta situación. tendrás que analizar tus propios datos en consecuencia.
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.
// 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: [],
}}
/>
),
},
]
}, [])
}
La función se crea con los siguientes pasos:
- Reduce el conjunto de datos para aislar el nombre de la marca de los datos de pedidos trimestrales para cada fila.
- Actualiza cada fila para incluir la dimensión y un componente de React renderizado que pueda representar los valores de cada fila en la tabla.
Paso 5: Inserta los datos transformados en CustomVis
Ahora transforma los datos con nuestra nueva función y asigna el resultado a una nueva variable llamada 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}
/>
)
}
Paso 6: Genera la visualización personalizada
Una vez que hayas insertado los datos transformados y configurado el gráfico, la visualización se verá como este ejemplo de una tabla con minigráficos individuales para cada fila:
Todo el código necesario para renderizar esta visualización es el siguiente:
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.
// 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>
)
}
Próximos pasos
- Usa componentes de visualización y la propiedad
dashboard
para renderizar una visualización simple - Usa componentes de visualización y la propiedad
query
para renderizar una visualización simple - Usa componentes de visualización para renderizar visualizaciones personalizadas
- Tablas de propiedades de visualización y consulta