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

此示例会呈现所开发应用的本地自定义可视化图表，而不是可从 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 组件传递config override来修改所呈现的图表类型。

<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 默认设置。

后续步骤