使用可视化组件渲染自定义可视化

此示例呈现的是位于开发中应用本地的自定义可视化，而不是 Looker Marketplace 中提供的自定义可视化。

Looker 可视化组件具有适配器系统，可让开发者替换现有图表类型或添加全新的图表类型选项。

在以下情况下，此选项非常有用：

  • 您已构建要与 Looker 组件搭配使用的自定义 React 可视化图表。
  • 您希望将现有的默认 Looker 可视化图表替换为基于其他库构建的可视化图表。

如果您构建的应用允许用户在会话期间更改图表可视化类型，则替换或添加图表的功能尤为相关。

背景

在 Looker 的“探索”界面中渲染查询并将其 Query.client_id 传递到 Looker 的可视化组件后，您可以通过更新 config 属性的 type 属性来修改图表类型。

type 属性接受的每个值都会映射到特定的 React 组件。因此，当 type 设置为 line 时，系统会呈现 Line 组件；当 type 设置为 area 时，系统会呈现 Area 组件；依此类推。

借助 Visualization 组件的 chartTypeMap 属性，您可以向类型/组件映射中添加新条目，或替换其中的现有条目，从而将每个 type 值与特定组件相关联。

使用要求

与使用可视化组件和 query 属性渲染简单的可视化示例类似，您必须先导入 DataProvider 组件并提供经过身份验证的 SDK 实例。以下示例是在 Looker 的扩展程序中构建的 框架，而 SDK 来自 ExtensionContext。

在 DataProvider 中，您可以呈现 Query 和 Visualization 组件，以从 Looker SDK 请求数据，并在应用中呈现预期的可视化结果。

设置如下（在 query 属性中，将值替换为查询中的 Query.client_id）：

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization />
            </Query>
        </DataProvider>
    )
}

添加新图表类型

与简单可视化示例一样，您可以通过将配置替换传递给 Query 组件来修改所呈现的图表类型。

<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'pie' }}>
    <Visualization />
</Query>

在本例中，type 设为了 pie：Looker 组件默认提供的图表。但是，如果您想使用系统默认不提供的图表，该怎么办？在这种情况下，您可以使用 Visualization 的 chartTypeMap 属性在适配器系统的类型/组件映射中添加或替换图表组件。

例如，如果要向类型/组成部分映射添加新的雷达图，请按如下所示将其添加到 chartTypeMap：

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'radar'}}>
                <Visualization chartTypeMap={{ radar: MyCustomRadar }} />
            </Query>
        </DataProvider>
    )
}

此代码会执行以下操作：

  • 导入 MyCustomRadar React 组件
  • 将 radar 键分配给 config.type 属性
  • 更新 chartTypeMap 属性，以便类型映射系统知道要为 radar 的 type 呈现什么内容

以下是其在 Looker 可视化园地中的渲染方式：

可视化 Playground 中会显示雷达图。

同样，如果您想呈现自己的版本，也可以替换现有图表。在以下示例中，默认 Looker 组件的折线图被自定义折线图组件覆盖：

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomLine } from '../MyCustomLine'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization chartTypeMap={{ line: MyCustomLine }} />
            </Query>
        </DataProvider>
    )
}

现在，每当 Query 组件遇到可视化类型设置为 line 的查询时，就会呈现自定义实现，而不是 Looker 默认设置。

后续步骤