嵌入式分析 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? |
布尔值 |
是否允许记录到 DevTools 控制台。默认为 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 的文档。