Looker visualization components are a suite of React-based components that are available in the open source
Visualization components accept a query ID from a Looker Explore or a dashboard ID from a Looker dashboard and render a client-side visualization without an iframe.
These components can be used out of the box, customized, or treated as pure data formatters to pass cleaned data from a Looker Explore to facilitate building your own customized visualizations.
Creating visualizations with Looker visualization components
Looker’s visualization components suite provides two high-level components for working with your data:
Query— Handles the data fetching and loads the response into React context
Visualization— Accepts the data that is returned by
Queryand uses configuration adapters to render the appropriately customized chart on a page
Currently, data can be rendered as the following chart types:
- Single value
More chart types are in development.
To view the property tables for each chart type, visit the Visualization and Query property tables documentation page.
To view the available configuration options for each chart type, view the visualization playground on the Looker Developer Portal.
Why use visualization components?
Visualization components improve and simplify the process of rendering a visualization from Looker within an application, free up developer time, and give developers more options to customize and extend their visualizations from Looker.
- Improved embedding — Visualization components allow developers to embed a Looker visualization in an application without an iframe. This can improve performance, monitoring, and the ability to customize.
- Easy integration — Visualization components can then be combined with other components from
@looker/componentsto create entirely new compositions and front-end experiences.
- Customization — It is easier to customize embedded visualizations when using visualization components than when using iframes. Additionally, with visualization components, developers can create highly customized applications much faster, without having to create a visualization layer from scratch.
- Simplification — Visualization components improve the portability of Looker visualizations and simplify interactions with the Looker API.
Installing visualization components
To get started, add the Looker Visualization Components NPM package:
npm install @looker/visualizations
yarn add @looker/visualizations
You’ll also need to satisfy a few peer dependencies — Looker/components, React, and Styled Components:
npm install @looker/components react react-dom styled-components
yarn add @looker/components react react-dom styled-components
Information on installing and using the visualization components package can be found in the README document, available in GitHub and NPM.
- If you would like to create an embeddable visualization that responds to changes within the Looker UI, and therefore can be updated by Looker users other than app developers, follow the instructions on the Using visualization components and a dashboard ID to render a simple visualization documentation page.
- If you would like to create an embeddable visualization that that does not respond to changes within the Looker UI, follow the instructions on the Using visualization components and a query ID to render a simple visualization documentation page.
- Visualization components can do more than render and customize Looker’s native visualizations. They can also be used to render custom visualizations. The Using visualization components to build a custom visualization documentation page provides an example of that type of transformation and customization.
- To understand all the properties of the
Querycomponents, refer to the Visualization and Query property tables documentation page.