定价
登录 开始使用
文档 学习
主页
分析
嵌入
管理
其他资源

嵌入式分析 SDK - 配置

嵌入式分析 SDK 仅适用于 专业版 和 企业版 计划（包括自托管和 Metabase 云版）。但是，您可以通过使用 API 密钥验证嵌入内容，在本地机器上无需许可证即可试用 SDK。

将配置对象传递给 MetabaseProvider

要在您的应用中使用 SDK，您需要导入 MetabaseProvider 组件并为其提供一个 authConfig 对象。

MetabaseProvider

一个配置 SDK 并提供 Metabase SDK 上下文和主题的组件。

API 参考

示例

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

// Configure authentication
const authConfig = defineMetabaseAuthConfig({
  metabaseInstanceUrl: "https://metabase.example.com", // Required: Your Metabase instance URL
});

// See the "Customizing appearance" section for more information
const theme = defineMetabaseTheme({
  // Optional: Specify a font to use from the set of fonts supported by Metabase
  fontFamily: "Lato",

  // Optional: Match your application's color scheme
  colors: {
    brand: "#9B5966",
    "text-primary": "#4C5773",
    "text-secondary": "#696E7B",
    "text-tertiary": "#949AAB",
  },
});

export default function App() {
  return (
    <MetabaseProvider
      authConfig={authConfig}
      theme={theme}
      className="optional-class"
    >
      Hello World!
    </MetabaseProvider>
  );
}

属性

属性 类型 描述
allowConsoleLog? 布尔值 是否允许日志输出到开发者工具控制台。默认为 true。
authConfig MetabaseAuthConfig 定义如何与 Metabase 进行身份验证。
children ReactNode MetabaseProvider 组件的子元素。
className? 字符串 要添加到根元素的自定义类名。
errorComponent? SdkErrorComponent 当 SDK 遇到错误时显示的自定义错误组件。
eventHandlers? SdkEventHandlersConfig 参见 全局事件处理程序。
loaderComponent? () => Element 当 SDK 正在加载时显示的自定义加载组件。
locale? 字符串 定义显示语言。接受 ISO 语言代码，例如 en 或 de。默认为实例的语言环境。
pluginsConfig? MetabasePluginsConfig 参见 插件。
theme? MetabaseTheme 参见 外观。

全局事件处理程序

您可以通过为 MetabaseProvider 定义 eventHandlers 属性来监听事件。

SdkEventHandlersConfig

接受一个对象，其中每个键是事件类型，相应的值是事件处理函数。

API 参考

示例

const handleDashboardLoad: SdkDashboardLoadEvent = (dashboard) => {
  /* do whatever you need to do - e.g. send analytics events, show notifications */
};

const eventHandlers = {
  onDashboardLoad: handleDashboardLoad,
  onDashboardLoadWithoutCards: handleDashboardLoad,
};

return (
  <MetabaseProvider authConfig={authConfig} eventHandlers={eventHandlers}>
    {children}
  </MetabaseProvider>
);

属性

属性 类型 描述
onDashboardLoad? SdkDashboardLoadEvent 当仪表板加载所有可见卡片及其内容时触发
onDashboardLoadWithoutCards? SdkDashboardLoadEvent 在仪表板加载后触发，但其卡片未加载（在此阶段仅渲染仪表板标题、选项卡和卡片网格，但卡片内容尚未加载）。

重新加载 Metabase 组件

如果您需要重新加载 Metabase 组件，例如，您的用户修改了应用程序数据，并且该数据用于在 Metabase 中呈现问题。如果您嵌入此问题并希望强制 Metabase 重新加载该问题以显示最新数据，您可以使用 key 属性来强制组件重新加载。

// Inside your application component
const [data, setData] = useState({});
// This is used to force reloading Metabase components
const [counter, setCounter] = useState(0);

// This ensures we only change the `data` reference when it's actually changed
const handleDataChange = newData => {
  setData(prevData => {
    if (isEqual(prevData, newData)) {
      return prevData;
    }

    return newData;
  });
};

useEffect(() => {
  /**
   * When you set `data` as the `useEffect` hook's dependency, it will trigger the effect
   * and increment the counter which is used in a Metabase component's `key` prop, forcing it to reload.
   */
  if (data) {
    setCounter(counter => counter + 1);
  }
}, [data]);

return <InteractiveQuestion key={counter} questionId={yourQuestionId} />;

阅读其他 Metabase 版本 的文档。

© . All rights reserved.