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 simples formateadores de datos para pasar datos limpios de una exploración de Looker y 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 haya autenticado 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.

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 el contexto de React.
  • 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 renderizar como los siguientes tipos de gráficos:

  • Línea
  • Área
  • Dispersión
  • Minigráfico
  • Valor único
  • Bar
  • 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 Visualización y tablas de propiedades de consulta.

Para ver las opciones de configuración disponibles para cada tipo de gráfico, consulta el campo de pruebas de visualización.

¿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 dentro de una aplicación, liberan tiempo de los desarrolladores y les brindan más opciones para personalizar y extender sus visualizaciones desde Looker.

  • Incorporación mejorada: Los componentes de las visualizaciones permiten que los desarrolladores incorporen 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: Es más fácil personalizar las visualizaciones incorporadas 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 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.

Cómo instalar componentes de visualización

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

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

También deberás satisfacer algunas dependencias de pares: Looker/componentes, React y componentes de diseño:

  • 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