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 una 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 inmediato, personalizar o tratar como formateadores de datos puros para pasar datos limpios de una exploración de Looker a fin de facilitar la creació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. Ese paso se controla automáticamente cuando compilas con el framework de extensión de Looker.

Crea visualizaciones con los 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 de forma adecuada en una página.

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

  • Línea
  • Área
  • Dispersión
  • Minigráfico
  • Un solo valor
  • Barra
  • Columna
  • Tabla
  • Circular

Hay más tipos de gráficos en desarrollo.

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.

Si quieres ver las opciones de configuración disponibles para cada tipo de gráfico, consulta la zona de pruebas de visualización en el Portal para 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 para los desarrolladores y les brindan 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 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: Cuando se usan componentes de visualización, es más fácil personalizar las visualizaciones incorporadas que cuando se usan 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.

Instala componentes de visualización

Para comenzar, agrega el paquete NPM de los componentes de visualización de Looker:

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

También deberás satisfacer algunas dependencias de intercambio de tráfico: Looker/componentes, React y componentes con estilos:

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

Puedes encontrar información para instalar y usar el paquete de componentes de visualización en el documento README, disponible en GitHub y NPM.

Próximos pasos