嵌入式分析SDK - 问题

嵌入式分析SDK仅适用于ProEnterprise套餐(包括自托管和Metabase Cloud)。但是,您可以在本地机器上使用API密钥进行身份验证,无需许可证即可使用SDK进行尝试。

您可以以不同的方式嵌入问题

嵌入问题

您可以使用其中一个问题组件来嵌入问题

StaticQuestion

一个轻量级的问题组件。当您希望显示结果而不让人们与数据交互时,请使用此组件。

Static question

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

API参考

示例

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

const authConfig = defineMetabaseAuthConfig({
  metabaseInstanceUrl: "https://your-metabase.example.com",
});

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

  return (
    <MetabaseProvider authConfig={authConfig}>
      <StaticQuestion questionId={questionId} withChartTypeSelector={false} />
    </MetabaseProvider>
  );
}

属性

属性 类型 描述
className? 字符串 要添加到根元素的自定义类名。
height? Height<string | number> 一个数字或字符串,指定CSS大小值,用于指定组件的高度
initialSqlParameters? SqlParameterValues SQL参数的初始值。
questionId null | SdkQuestionId -
style? CSSProperties 要添加到根元素的自定义样式对象。
title? SdkQuestionTitleProps 确定是否显示问题标题,并允许显示自定义标题而不是默认问题标题。默认显示。仅适用于使用默认布局的交互式问题。
width? Width<string | number> 一个数字或字符串,指定CSS大小值,用于指定组件的宽度
withChartTypeSelector? 布尔值 确定是否显示图表类型选择器和相应的设置按钮。仅在使用默认布局时相关。
withDownloads? 布尔值 启用在交互式问题中下载结果的功能。

InteractiveQuestion

当您希望允许人们探索数据和自定义问题布局时,请使用此组件。

Interactive question

API参考

示例

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

const authConfig = defineMetabaseAuthConfig({
  metabaseInstanceUrl: "https://your-metabase.example.com",
});

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

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

属性

属性 类型 描述
className? 字符串 要添加到根元素的自定义类名。
componentPlugins? MetabasePluginsConfig 用于覆盖或添加钻取菜单的附加映射函数
entityTypes? EmbeddingEntityType[] 一个数组,指定数据选择器中可用的实体类型
height? Height<string | number> 一个数字或字符串,指定CSS大小值,用于指定组件的高度
initialSqlParameters? SqlParameterValues SQL参数的初始值。
isSaveEnabled? 布尔值 是否显示保存按钮。
onBeforeSave? (question: undefined | MetabaseQuestion, context: { isNewQuestion: boolean; }) => Promise<void> 保存前触发的回调函数。仅在isSaveEnabled = true时相关
onNavigateBack? () => void 用户点击返回按钮时触发的回调函数。
onRun? (question: undefined | MetabaseQuestion) => void 问题更新时触发的回调函数,包括用户点击问题编辑器中的可视化按钮时
onSave? (question: MetabaseQuestion, context: { dashboardTabId?: number; isNewQuestion: boolean; }) => void 用户保存问题时触发的回调函数。仅在isSaveEnabled = true时相关
plugins? MetabasePluginsConfig -
questionId null | SdkQuestionId -
style? CSSProperties 要添加到根元素的自定义样式对象。
targetCollection? SdkCollectionId 保存问题的集合。这将隐藏保存模态框中的集合选择器。仅适用于交互式问题。
title? SdkQuestionTitleProps 确定是否显示问题标题,并允许显示自定义标题而不是默认问题标题。默认显示。仅适用于使用默认布局的交互式问题。
width? Width<string | number> 一个数字或字符串,指定CSS大小值,用于指定组件的宽度
withChartTypeSelector? 布尔值 确定是否显示图表类型选择器和相应的设置按钮。仅在使用默认布局时相关。
withDownloads? 布尔值 启用在交互式问题中下载结果的功能。
withResetButton? 布尔值 确定是否显示重置按钮。仅在使用默认布局时相关。

使用initialSqlParameters将SQL参数传递给SQL问题

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

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

initialSqlParameters不能与使用查询构建器构建的问题一起使用。

自定义交互式问题

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

这是使用带有默认布局的InteractiveQuestion组件的示例

<InteractiveQuestion questionId={95} />

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

<div
  className="App"
  style={{
    width: "100%",
    maxWidth: "1600px",
    height: "800px",
    margin: "0 auto",
  }}
>
  <MetabaseProvider authConfig={authConfig} theme={theme}>
    <InteractiveQuestion questionId={95}>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
        }}
      >
        <div style={{ display: "grid", placeItems: "center", width: "100%" }}>
          <InteractiveQuestion.Title />
          <InteractiveQuestion.ResetButton />
        </div>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            overflow: "hidden",
            width: "100%",
          }}
        >
          <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", width: "100%" }}
        >
          <InteractiveQuestion.Filter />
        </div>
      </div>
    </InteractiveQuestion>
  </MetabaseProvider>
</div>

交互式问题组件

这些组件可通过InteractiveQuestion命名空间访问(例如,<InteractiveQuestion.Filter />)。

API参考

交互式问题插件

您可以使用插件为问题添加自定义功能。

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 authConfig={authConfig} pluginsConfig={plugins}>
    <InteractiveQuestion questionId={questionId} />
  </MetabaseProvider>
);

阻止用户保存对InteractiveQuestion的更改

要阻止用户保存对交互式问题的更改,或将其保存为新问题,您可以设置isSaveEnabled={false}

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

const authConfig = defineMetabaseAuthConfig({
  metabaseInstanceUrl: "https://your-metabase.example.com",
});

export default function App() {
  return (
    <MetabaseProvider authConfig={authConfig}>
      <InteractiveQuestion questionId={1} isSaveEnabled={false} />
    </MetabaseProvider>
  );
}

嵌入查询构建器以创建新问题

Query builder

您可以通过将questionId="new"属性传递给InteractiveQuestion组件来嵌入查询构建器以创建新问题。您可以使用children属性自定义创建新问题的布局。

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

const authConfig = defineMetabaseAuthConfig({
  metabaseInstanceUrl: "https://your-metabase.example.com",
});

export default function App() {
  return (
    <MetabaseProvider authConfig={authConfig}>
      <InteractiveQuestion questionId="new" />
    </MetabaseProvider>
  );
}

要自定义问题编辑器的布局,请直接使用具有自定义children属性InteractiveQuestion组件。

阅读其他版本的 Metabase 的文档。

这有帮助吗?

感谢您的反馈!
想要改进这些文档吗?提出更改。
© . This site is unofficial and not affiliated with Metabase, Inc.