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

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

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

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

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

如果您要构建的应用允许用户在会话期间更改图表可视化类型，那么能够替换或添加图表就显得尤为重要。

背景

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

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

Visualization 组件的 chartTypeMap 属性可让您向类型/组件映射添加新条目，或替换现有条目，该映射用于将每个 type 值与特定组件相关联。

要求

您必须先导入 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 默认实现。

后续步骤