Looker 可视化组件

Looker 可视化组件是一套基于 React 的组件，可在开源 @looker/visualizations 软件包中提供。

可视化图表组件接受 Query.client_id 值或 Looker 探索中的查询 ID 或 Looker 信息中心内的信息中心 ID，并且可在不使用 iframe 的情况下呈现客户端可视化。

这些组件可以直接使用，也可以自定义或处理为纯数据格式设置工具，用以从 Looker 探索传递经过清理的数据，从而帮助构建您自己的自定义可视化图表。

Looker 可视化组件旨在用于 React 环境，该环境已通过 Looker 的 API 使用 TypeScript/JavaScript SDK 进行身份验证。使用 Looker 扩展框架构建时，系统会自动处理此步骤。

使用 Looker 可视化组件创建可视化图表

Looker 的可视化组件套件提供了两个高级别组件来处理您的数据：

  • Query - 处理数据提取并将响应加载到 React 上下文中
  • Visualization - 接受 Query 返回的数据，并使用配置适配器在网页上渲染适当的自定义图表

目前，数据可呈现为以下图表类型：

  • 线
  • 面积图
  • 散点图
  • 火花谱线图
  • 单个值
  • 柱形
  • 列
  • 表
  • 饼图

我们正在努力开发更多类型的图表。

要查看每种图表类型的属性表，请访问可视化和查询属性表文档页面。

要查看每种图表类型可用的配置选项，请查看 Looker 开发者门户上的可视化园地。

为什么要使用可视化组件？

可视化组件可改善和简化通过 Looker 在应用内呈现可视化图表的过程，从而节省开发者时间，并为开发者提供更多选项，以便通过 Looker 自定义和扩展可视化图表。

  • 改进的嵌入 - 可视化组件让开发者可以将 Looker 可视化嵌入到没有 iframe 的应用中。这可以提高性能、监控和自定义的能力。
  • 轻松集成 - 之后可以将可视化组件与 @looker/components 中的其他组件结合使用，以打造全新的组合和前端体验。
  • 自定义 - 使用可视化组件时，自定义可视化内容比使用 iframe 更容易。此外，借助可视化组件，开发者可以更快地创建高度自定义的应用，而无需从头开始创建可视化层。
  • 简化 - 可视化组件提高了 Looker 可视化的可移植性并简化了与 Looker API 的交互。

安装可视化组件

首先，添加 Looker 可视化组件 NPM 软件包：

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

您还需要满足以下几个对等依赖项：Looker/components、React 和样式化组件：

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

如需了解如何安装和使用可视化组件软件包，请参阅 README 文档（位于 GitHub 和 NPM 中）。

后续步骤