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 @looker/visualizations de código abierto.

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

Estos componentes se pueden usar de forma inmediata, personalizados o tratarse como formateadores puros de datos para pasar datos limpios de Looker Explore a fin de facilitar la compilación de sus 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 marco de trabajo de la extensión de Looker.

Crea visualizaciones con componentes de visualización de Looker

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

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

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

  • Línea (Line)
  • Área
  • Dispersión
  • Minigráfico
  • Valor único
  • Bar
  • Columna
  • Tabla
  • Pie

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 consultas y visualización.

Para ver las opciones de configuración disponibles para cada tipo de gráfico, consulta la zona de pruebas de la 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 el 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 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 usas componentes de visualización que si 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.

Instala 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 tendrás que cumplir con algunas dependencias de pares: Looker/components, React y Componentes con estilo:

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

La información sobre la instalación y el uso del paquete de componentes de visualización se puede encontrar en el documento README, que está disponible en GitHub y NPM.

Próximos pasos