嵌入式分析SDK - 配置
⚠️ 此功能处于测试阶段。您可以随意尝试，但请注意，可能会有所变化（可能无法按预期工作）。
要在您的应用程序中使用SDK，您需要导入MetabaseProvider组件，并给它提供一个config对象，如下所示
const config = defineEmbeddingSdkConfig({
metabaseInstanceUrl: "https://metabase.example.com", // Required: Your Metabase instance URL
jwtProviderUri: "https://app.example.com/sso/metabase", // Required: An endpoint in your app that returns signs the user in and delivers a token
});
export default function App() {
return (
<MetabaseProvider config={config} theme={theme} className="optional-class">
Hello World!
</MetabaseProvider>
);
}
您还可以向MetabaseProvider传递其他对象
传递给MetabaseProvider的示例config对象
import React from "react";
import {
MetabaseProvider,
defineEmbeddingSdkConfig,
defineEmbeddingSdkTheme,
} from "@metabase/embedding-sdk-react";
// Configuration
const config = defineEmbeddingSdkConfig({
metabaseInstanceUrl: "https://metabase.example.com", // Required: Your Metabase instance URL
jwtProviderUri: "https://app.example.com/sso/metabase", // Required: An endpoint in your app that returns signs the user in and delivers a token
});
// See the "Customizing appearance" section for more information
const theme = defineEmbeddingSdkTheme({
// 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 config={config} 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 config={config} eventHandlers={eventHandlers}>
{children}
</MetabaseProvider>
);
重新加载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的其他版本的文档。