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

嵌入式分析 SDK - 配置

⚠️ 此功能为 Beta 版。欢迎试用，但请注意，功能可能会发生变化（并且可能无法按预期工作）。

嵌入式分析 SDK 仅在 Pro 和 Enterprise 计划（自托管和 Metabase 云）中可用。但是，您可以使用 API 密钥验证嵌入，在本地计算机上试用 SDK，而无需许可证。

要在您的应用中使用 SDK，您需要导入 MetabaseProvider 组件，并为其提供 authConfig 对象，如下所示

const authConfig = defineMetabaseAuthConfig({
  metabaseInstanceUrl: "https://metabase.example.com", // Required: Your Metabase instance URL
  authProviderUri: "https://app.example.com/sso/metabase", // Required: An endpoint in your app that signs the user in and returns a session
});

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

您还可以将其他 props 传递给 MetabaseProvider

  • authConfig（必需）。定义如何使用 Metabase 进行身份验证。
  • theme（可选）请参阅外观。
  • pluginsConfig（可选）。请参阅插件。
  • eventHandlers（可选）。请参阅全局事件处理程序。
  • className（可选）。要添加到包装器元素的类。
  • locale（可选）。定义显示语言。接受 ISO 语言代码，例如 en 或 de。
  • loaderComponent（可选）。 SDK 加载时要显示的自定义加载器组件。
  • errorComponent（可选）。 SDK 遇到错误时要显示的自定义错误组件。
  • allowConsoleLog（可选）。如果为 true，则日志消息将打印到控制台。

传递给 MetabaseProvider 的 config 对象示例

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
  authProviderUri: "https://app.example.com/sso/metabase", // Required: An endpoint in your app that signs the user in and returns a session
});

// 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>
  );
}

全局事件处理程序

MetabaseProvider 也支持 eventHandlers。

目前，我们支持

  • onDashboardLoad?: (dashboard: Dashboard | null) => void;。当仪表盘加载所有可见卡片及其内容时触发
  • onDashboardLoadWithoutCards?: (dashboard: Dashboard | null) => void;。仪表盘加载后触发，但不包含卡片（在此阶段，仅呈现仪表盘标题、选项卡和卡片网格，但卡片的内容尚未加载）。
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>
);

重新加载 Metabase 组件

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

// 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 版本的文档。