使用可视化组件呈现自定义可视化图表

此示例呈现的是正在开发的应用的本地自定义可视化图表，而不是 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 可视化园地中的呈现方式如下：

可视化图表园地中显示雷达地图。

同样，如果您想呈现自己的版本，也可以替换现有图表。在以下示例中，系统会将自定义 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 默认值。

后续步骤