Componentes de visualización de Looker

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

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

Estos componentes se pueden usar de forma predeterminada, se pueden personalizar o tratar como formatos de datos puros para pasar datos limpios desde una exploración de Looker a fin de facilitar la compilación de tus propias visualizaciones personalizadas.

Los componentes de visualización de Looker están diseñados para usarse en un entorno de React que se autenticó con la API de Looker mediante el SDK de TypeScript/JavaScript. Este paso se controla automáticamente cuando compilas con el framework de extensión de Looker.

Cómo 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 tus datos:

  • Query: Controla la recuperación de datos y carga la respuesta en React context.
  • Visualization: Acepta los datos que muestra Query y usa adaptadores de configuración para renderizar el gráfico personalizado en una página.

Actualmente, los datos se pueden renderizar como los siguientes tipos de gráficos:

  • Línea
  • Área
  • De dispersión
  • Minigráfico
  • Valor único
  • Barra
  • Columna
  • Tabla
  • Circular

Se están desarrollando más tipos de gráficos.

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

Para ver las opciones de configuración disponibles para cada tipo de gráfico, consulta la zona de pruebas de visualización en el portal de desarrolladores de Looker.

¿Por qué usar componentes de visualización?

Los componentes de visualización mejoran y simplifican el proceso de renderizar una visualización desde Looker dentro de una aplicación, liberan tiempo de desarrollo y brindan a los desarrolladores más opciones para personalizar y extender sus visualizaciones desde Looker.

  • Incorporación mejorada: Los componentes de visualización permiten a los desarrolladores incorporar una visualización de Looker en una aplicación sin un iframe. Esto puede mejorar el rendimiento, la supervisión y la capacidad de personalizar la experiencia.
  • Integración sencilla: Luego, 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 incorporadas cuando usas componentes de visualización que cuando usas iframes. Además, con los componentes de visualización, los desarrolladores pueden crear aplicaciones altamente 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 comenzar, agrega el paquete de NPM de los componentes de visualización de Looker:

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

También deberás cumplir con algunas dependencias de pares: 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 encontrar información sobre cómo instalar y usar el paquete de componentes de visualización en el documento README, disponible en GitHub y NPM.

Próximos pasos