Componentes de visualización de Looker

Los componentes de visualización de Looker son un conjunto de componentes basados en React que están disponibles en el paquete de código abierto @looker/visualizations.

Los componentes de visualización aceptan un valor Query.client_id o un ID de consulta de una exploración de Looker o un ID de panel de control de Looker y renderizan una visualización del lado del cliente sin un iframe.

Estos componentes se pueden usar tal cual, personalizar o tratar como formateadores de datos puros para transferir datos limpios de un Explorar de Looker y facilitar la creación de visualizaciones personalizadas.

Los componentes de visualización de Looker se han diseñado para usarse en un entorno de React que se haya autenticado con la API de Looker mediante el SDK de TypeScript o JavaScript. Este paso se realiza automáticamente cuando compilas con el framework de extensiones de Looker.

Crear visualizaciones con componentes de visualización de Looker

El paquete de componentes de visualización de Looker proporciona dos componentes de alto nivel para trabajar con sus datos:

  • Query: gestiona la obtención de datos y carga la respuesta en el contexto de React.
  • Visualization: acepta los datos devueltos por Query y usa adaptadores de configuración para renderizar el gráfico personalizado correspondiente en una página.

Actualmente, los datos se pueden representar en los siguientes tipos de gráficos:

  • Línea
  • Área
  • Dispersión
  • Sparkline
  • Valor único
  • Barras
  • Columna
  • Tabla
  • Circulares

Estamos desarrollando más tipos de gráficos.

Para ver las tablas de propiedades de cada tipo de gráfico, consulta la página de documentación Tablas de propiedades de visualización y de consulta.

Para ver las opciones de configuración disponibles de cada tipo de gráfico, consulta el entorno de pruebas de visualizaciones.

¿Por qué usar componentes de visualización?

Los componentes de visualización mejoran y simplifican el proceso de renderización de una visualización de Looker en una aplicación, liberan tiempo de los desarrolladores y les ofrecen más opciones para personalizar y ampliar sus visualizaciones de Looker.

  • Inserción mejorada: los componentes de visualización permiten a los desarrolladores insertar una visualización de Looker en una aplicación sin un iframe. Esto puede mejorar el rendimiento, la monitorización y la capacidad de personalización.
  • Integración sencilla: los componentes de visualización se pueden combinar con otros componentes de @looker/components para crear composiciones y experiencias de frontend completamente nuevas.
  • Personalización: es más fácil personalizar las visualizaciones insertadas cuando se usan componentes de visualización que cuando se usan iframes. Además, con los componentes de visualización, los desarrolladores pueden crear aplicaciones muy personalizadas mucho más rápido, sin tener que crear una capa de visualización desde cero.
  • Simplificación: los componentes de visualización mejoran la portabilidad de las visualizaciones de Looker y simplifican las interacciones con la API de Looker.

Instalar componentes de visualización

Para empezar, añade el paquete NPM de componentes de visualización de Looker:

  • NPM: npm install @looker/visualizations
  • YARN: yarn add @looker/visualizations

También tendrás que cumplir algunas dependencias de mismo nivel: Looker/components, React y Styled Components:

  • NPM: npm install @looker/components react react-dom styled-components
  • YARN: yarn add @looker/components react react-dom styled-components

Puedes consultar información sobre cómo instalar y usar el paquete de componentes de visualización en el archivo README, disponible en GitHub y NPM.

Pasos siguientes