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

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

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

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

  • 您已构建要与 Looker 组件搭配使用的自定义 React 可视化图表。
  • 您希望将现有的默认 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 可视化 Playground 中的呈现方式如下：

可视化 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 默认实现。

后续步骤