嵌入式分析SDK - 问题

⚠️ 此功能处于测试阶段。您可以随意尝试，但请注意，某些功能可能会更改（可能无法按预期工作）。

嵌入式分析SDK仅适用于Pro和企业计划（包括自托管和Metabase云服务）。然而，您可以使用API密钥对嵌入进行身份验证，在本地机器上无需许可证即可尝试SDK。

您有多种方式可以嵌入问题

StaticQuestion。嵌入图表。点击图表不会发生任何事情。
InteractiveQuestion。点击图表将提供钻取菜单。
创建问题
ModifyQuestion. 嵌入交互式问题和查询构建器。

嵌入静态问题

您可以使用 StaticQuestion 组件嵌入静态问题。

该组件具有默认高度，可以通过使用 height 属性进行自定义。要继承父容器的宽度，可以将 100% 传递给高度属性。

import React from "react";
import {MetabaseProvider, StaticQuestion} from "@metabase/embedding-sdk-react";

const config = {...}

export default function App() {
    const questionId = 1; // This is the question ID you want to embed

    return (
        <MetabaseProvider config={config}>
            <StaticQuestion questionId={questionId} showVisualizationSelector={false}/>
        </MetabaseProvider>
    );
}

您可以通过 parameterValues 属性将参数值传递给使用 SQL 定义的问题，格式为 {parameter_name: parameter_value}。了解更多关于 SQL 参数的信息。

<StaticQuestion questionId={questionId} parameterValues={{ product_id: 50 }} />

嵌入交互式问题

您可以使用 InteractiveQuestion 组件嵌入交互式问题。

import React from "react";
import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";

const config = {...}

export default function App() {
    const questionId = 1; // This is the question ID you want to embed

    return (
        <MetabaseProvider config={config}>
            <InteractiveQuestion questionId={questionId}/>
        </MetabaseProvider>
    );
}

问题属性

属性	类型	描述
questionId	`数字 \\| 字符串`	(必需) 问题的 ID。这可以是 - 访问问题链接时的数字 ID，例如，在 `https://127.0.0.1:3000/question/1-my-question` 中，ID 为 `1`。 - 问题的 `entity_id` 键。您可以在查看问题时在信息面板中找到问题的实体 ID。
plugins	`{ mapQuestionClickActions: Function } \\| null`	用于覆盖或添加钻取菜单的额外映射函数。
height	`数字 \\| 字符串`	(可选) 一个数字或字符串，指定一个 CSS 大小值，用于指定组件的高度
entityTypeFilter	`("table" \\| "question" \\| "model" \\| "metric")[]`	(可选) 一个数组，指定数据选择器中可用的实体类型
isSaveEnabled	`布尔值`	(可选) 是否允许人们保存问题。
withResetButton	`布尔值`	(可选，默认: `true`) 决定是否显示重置按钮。仅在与默认布局一起使用时相关。
withTitle	`布尔值`	(可选，默认: `false`) 决定是否显示问题标题。仅在与默认布局一起使用时相关。
customTitle	`字符串 \\| 未定义`	(可选) 允许显示自定义标题而不是默认问题标题。仅在与默认布局一起使用时相关。
onBeforeSave	`() => void`	(可选) 一个在保存之前触发的回调函数。仅当 `isSaveEnabled = true` 时相关。
onSave	`() => void`	(可选) 当用户保存问题时触发的回调函数。仅当 `isSaveEnabled = true` 时相关。
saveToCollectionId	`数字`	(可选) 将问题保存到的目标集合。这将隐藏保存模式中的集合选择器。仅适用于静态问题。

自定义交互式问题

默认情况下，嵌入式分析 SDK 为交互式问题提供默认布局，允许您查看问题、应用筛选器和聚合，并在查询构建器中访问功能。

以下是使用 InteractiveQuestion 组件及其默认布局的示例

<InteractiveQuestion questionId={95} />

要自定义布局，请在 InteractiveQuestion 组件内部使用命名空间组件。例如

<InteractiveQuestion questionId={95}>
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
    }}
  >
    <div style={{ display: "grid", placeItems: "center" }}>
      <InteractiveQuestion.Title />
      <InteractiveQuestion.ResetButton />
    </div>
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "flex-start",
        overflow: "hidden",
      }}
    >
      <div style={{ width: "100%" }}>
        <InteractiveQuestion.QuestionVisualization />
      </div>
      <div style={{ display: "flex", flex: 1, overflow: "scroll" }}>
        <InteractiveQuestion.Summarize />
      </div>
    </div>
    <div style={{ display: "flex", flexDirection: "column" }}>
      <InteractiveQuestion.Filter />
    </div>
  </div>
</InteractiveQuestion>

交互式问题组件

这些组件通过 InteractiveQuestion 命名空间提供（例如，<InteractiveQuestion.Filter />）。

组件	信息
`返回按钮`	返回按钮，为交互式仪表板提供 `返回` 功能。
`过滤器栏`	包含应用在问题上的当前过滤器的徽章行。
`过滤器`	包含所有可能过滤器的过滤器面板。
`过滤器按钮`	默认布局中用于打开过滤器面板的按钮。您可以用自己的实现替换此按钮。
`重置按钮`	用于在修改问题（带有过滤器/聚合等）后重置问题的按钮。
`标题`	问题的标题。
`保存按钮`	保存问题的按钮。
`摘要`	包含所有可能聚合的摘要面板。
`摘要按钮`	默认布局中用于打开摘要面板的按钮。您可以用自己的实现替换此按钮。
`笔记本`	笔记本编辑器，允许进行更多过滤、聚合和自定义步骤。
`笔记本按钮`	默认布局中用于打开笔记本编辑器的按钮。您可以用自己的实现替换此按钮。
`问题可视化`	问题的图表可视化。

交互式问题插件

`mapQuestionClickActions`

此插件允许您向交互式问题的点击菜单中添加自定义操作。您可以添加和自定义自定义操作的外观和行为。

// You can provide a custom action with your own `onClick` logic.
const createCustomAction = clicked => ({
  buttonType: "horizontal",
  name: "client-custom-action",
  section: "custom",
  type: "custom",
  icon: "chevronright",
  title: "Hello from the click app!!!",
  onClick: ({ closePopover }) => {
    alert(`Clicked ${clicked.column?.name}: ${clicked.value}`);
    closePopover();
  },
});

// Or customize the appearance of the custom action to suit your need.
const createCustomActionWithView = clicked => ({
  name: "client-custom-action-2",
  section: "custom",
  type: "custom",
  view: ({ closePopover }) => (
    <button
      className="tw-text-base tw-text-yellow-900 tw-bg-slate-400 tw-rounded-lg"
      onClick={() => {
        alert(`Clicked ${clicked.column?.name}: ${clicked.value}`);
        closePopover();
      }}
    >
      Custom element
    </button>
  ),
});

const plugins = {
  /**
   * You will have access to default `clickActions` that Metabase renders by default.
   * So you could decide if you want to add custom actions, remove certain actions, etc.
   */
  mapQuestionClickActions: (clickActions, clicked) => {
    return [
      ...clickActions,
      createCustomAction(clicked),
      createCustomActionWithView(clicked),
    ];
  },
};

const questionId = 1; // This is the question ID you want to embed

return (
  <MetabaseProvider config={config} pluginsConfig={plugins}>
    <InteractiveQuestion questionId={questionId} />
  </MetabaseProvider>
);

创建问题

使用 CreateQuestion 组件，您可以使用 Metabase 的查询构建器从头开始创建新的问题。

import React from "react";
import {MetabaseProvider, CreateQuestion} from "@metabase/embedding-sdk-react";

const config = {...}

export default function App() {
    return (
        <MetabaseProvider config={config}>
            <CreateQuestion/>
        </MetabaseProvider>
    );
}

嵌入可编辑的问题

使用 ModifyQuestion 组件，您可以通过传递问题的 ID 使用查询构建器编辑现有的问题。

import React from "react";
import {MetabaseProvider, ModifyQuestion} from "@metabase/embedding-sdk-react";

const config = {...}

export default function App() {
    return (
        <MetabaseProvider config={config}>
            <ModifyQuestion questionId={1}/>
        </MetabaseProvider>
    );
}

查看其他 Metabase 版本的文档。

自助分析

嵌入式分析

文档

学习

数据分析

嵌入

管理

其他资源