功能
价格
登录 开始使用
文档 学习
首页
分析
嵌入
管理
其他资源

嵌入式分析SDK - 仪表盘

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

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

您可以将交互式、可编辑或静态仪表板嵌入。

嵌入仪表板

您可以使用仪表板组件之一来嵌入仪表板

  • InteractiveDashboard
  • StaticDashboard
  • EditableDashboard

仪表板组件属性

属性 类型 描述
dashboardId 数字 \| 字符串 仪表板的ID。这是
- 访问仪表板链接时的数值ID，例如 https://127.0.0.1:3000/dashboard/1-my-dashboard，其中ID为 1
- 在直接使用API或使用SDK集合浏览器返回数据时，仪表板对象的entity_id键中找到的字符串ID
initialParameterValues Record 仪表板的查询参数。对于单个选项，使用一个string值，对于多个选项，使用字符串列表。
withTitle boolean 仪表板是否应显示标题。
withCardTitle boolean 仪表板卡片是否应显示标题。
withDownloads boolean \| null 是否隐藏下载按钮。
hiddenParameters string[] \| null 要隐藏的参数列表。
questionHeight* number \| null 从仪表板钻取到问题级别时问题组件的高度。
questionPlugins* { mapQuestionClickActions: Function } \| null 用于覆盖或添加钻取菜单的附加映射函数。有关详细信息，请参阅实现自定义操作部分。
onLoad (dashboard: Dashboard \| null) => void 事件处理器，在仪表板加载并显示所有可见卡片及其内容后触发。
onLoadWithoutCards (dashboard: Dashboard \| null) => void 事件处理器，在仪表板加载后触发，但未加载其卡片 - 在此阶段仪表板标题、选项卡和卡片网格已渲染，但卡片内容尚未加载。

* 对于StaticDashboard不可用。

默认情况下，仪表板组件占满整个页面高度（100vh）。您可以通过传递到style或className属性的自定义样式来覆盖此行为。

<EditableDashboard
  style=
  dashboardId={dashboardId}
/>

使用InteractiveDashboard组件的示例嵌入式仪表板

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

const config = {...}

export default function App() {
    const dashboardId = 1; // This is the dashboard ID you want to embed
    const initialParameterValues = {}; // Define your query parameters here

    // choose parameter names that are in your dashboard
    const hiddenParameters = ["location", "city"]

    return (
        <MetabaseProvider config={config}>
            <InteractiveDashboard
                dashboardId={dashboardId}
                initialParameterValues={initialParameterValues}
                withTitle={false}
                withDownloads={false}
                hiddenParameters={hideParameters}
            />
        </MetabaseProvider>
    );
}

仪表板插件

dashcardMenu

此插件允许您向仪表板卡片的溢出菜单中添加、删除和修改自定义操作。该插件在卡片的右上角显示为下拉菜单。

插件默认配置如下

const plugins = {
  dashboard: {
    dashcardMenu: {
      withDownloads: true,
      withEditLink: true,
      customItems: [],
    },
  },
};

dashcardMenu：可以在InteractiveDashboard中使用如下


<InteractiveDashboard
  questionId={1}
  plugins={{
    dashboard: {
      dashcardMenu: null,
    },
  }}
/>

启用/禁用默认操作

要从dashcard菜单中删除下载按钮，将withDownloads设置为false。要从dashcard菜单中删除编辑链接，将withEditLink设置为false。

const plugins = {
  dashboard: {
    dashcardMenu: {
      withDownloads: false,
      withEditLink: false,
      customItems: [],
    },
  },
};

向现有菜单添加自定义操作

您可以通过向customItems数组中添加对象来向dashcard菜单添加自定义操作。每个元素可以是对象或函数，该函数接受dashcard的问题，并输出以下形式的自定义项列表

{
    iconName: string;
    label: string;
    onClick: () => void;
    disabled ? : boolean;
}

以下是一个示例

const plugins: SdkPluginsConfig = {
  dashboard: {
    dashcardMenu: {
      customItems: [
        {
          iconName: "chevronright",
          label: "Custom action",
          onClick: () => {
            alert(`Custom action clicked`);
          },
        },
        ({ question }) => {
          return {
            iconName: "chevronright",
            label: "Custom action",
            onClick: () => {
              alert(`Custom action clicked ${question.name}`);
            },
          };
        },
      ],
    },
  },
};

用您自己的组件替换现有菜单

如果您想用您自己的组件替换现有菜单，可以提供一个返回React组件的函数。此函数也可以接收问题作为参数。

const plugins: SdkPluginsConfig = {
  dashboard: {
    dashcardMenu: ({ question }) => (
      <button onClick={() => console.log(question.name)}>Click me</button>
    ),
  },
};

创建仪表板

可以使用useCreateDashboardApi钩子或CreateDashboardModal组件创建仪表板。

钩子

const { createDashboard } = useCreateDashboardApi();

const handleDashboardCreate = async () => {
  const dashboard = await createDashboard(props);

  // do something with created empty dashboard, e.g., use the dashboard in EditableDashboard component
};

return <Button onClick={handleDashboardCreate}>Create new dashboard</Button>;

属性

属性 类型 描述
name string (必需)仪表板标题
description string \| null 可选的仪表板描述
collectionId number \| 'root' \| 'personal' \| null 创建新仪表板的位置集合。您可以使用预定义的系统值，如root或personal。

组件

const [dashboard, setDashboard] = useState<Dashboard | null>(null);

if (dashboard) {
  return <EditableDashboard dashboardId={dashboard.id} />;
}

return <CreateDashboardModal onClose={handleClose} onCreate={setDashboard} />;

支持的组件属性

属性 类型 描述
collectionId? number \| 'root' \| 'personal' \| null 初始集合字段值。您可以使用预定义的系统值，如root或personal。
onCreate (dashboard: Dashboard) => void 处理仪表板创建的处理器。
onClose () => void 关闭模态组件的处理程序

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

想改进这些文档？ 提出更改。