这是一个专为 React 设计的工具包，用于构建应用内报表，使其外观、行为和体验都与您的应用程序融为一体。您可以完全掌控原型设计、样式设置和交付复杂的分析功能，而无需复杂的开发过程。
npx @metabase/embedding-sdk-react@latest start
确保客户只能看到他们需要的内容。您的数据永远不会离开您的服务器。
快速安装 SDK 并嵌入您的第一个图表。随着需求的增长，逐步构建更高级的分析功能。
开发者优先的工具和专家支持，确保集成过程按您的计划进行。
嵌入独立的组件——从单个图表到查询构建器——它们能够无缝融入您的产品。像素级的精确定位，无固定宽度或高度，支持响应式设计。您可以覆盖菜单、重新排列字段、移动按钮，并根据您的 UI 布局组件。
import {
MetabaseProvider,
InteractiveQuestion,
defineEmbeddingSdkConfig
} from "@metabase/embedding-sdk-react";
const config = defineEmbeddingSdkConfig({
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
});
<MetabaseProvider config={config}>
<InteractiveQuestion
questionId={questionId}
isSaveEnabled={false}
withResetButton={true}
customTitle="Orders over time"
/>
</MetabaseProvider>
为每个组件设置样式，以匹配您应用的外观和感觉。自定义字体、背景颜色、工具提示、阴影等。可以为每个组织、团队甚至每个用户应用不同的样式。
const metabase: MetabaseTheme = {
fontFamily: "Inter",
fontSize: "14px",
colors: {
brand: colors.primary,
"brand-hover": colors.darkGrey,
"brand-hover-light": colors.darkGrey,
filter: colors.filter,
"text-primary": colors.lighterGrey,
"text-secondary": colors.lighterGrey,
"text-tertiary": colors.lighterGrey,
border: colors.darkGrey,
background: colors.background,
"background-secondary": colors.darkGrey,
"background-hover": colors.background,
"background-disabled": colors.darkGrey,
charts: [
colors.primary,
colors.filter,
"#ED6A5A",
"#FED18C",
"#82A74B",
"#FF8D69",
"#ED6A5A",
"#FED18C",
],
positive: "#45DF4C",
negative: "#FF3389",
},
components: {
cartesian: {
padding: "6px 16px",
},
dashboard: {
card: {
border: `"1px solid ${colors.darkGrey}"`,
backgroundColor: "#212426",
},
},
number: {
value: {
fontSize: "18px",
lineHeight: "22px",
},
},
popover: {
zIndex: 201,
},
},
};
const metabase: MetabaseTheme = {
fontFamily: "Arsenal",
fontSize: "14px",
colors: {
brand: colors.primary,
"brand-hover": "#fff",
"brand-hover-light": "#fff",
filter: colors.viz1,
summarize: "#BE54C0",
"text-primary": colors.green3,
"text-secondary": colors.green3,
"text-tertiary": colors.green3,
border: colors.green1,
background: colors.background,
"background-secondary": colors.background,
"background-hover": colors.background,
"background-disabled": colors.green2,
charts: [
colors.viz1,
"#E09862",
"#BE54C0",
"#DDA51F",
"#B34332",
"#4998E3",
"#BE54C0",
"#DDA51F",
],
positive: colors.green3,
negative: "#B34332",
shadow: "rgba(0, 0, 0, 0.1)",
},
components: {
cartesian: {
padding: "6px 16px",
},
dashboard: {
backgroundColor: "transparent",
},
number: {
value: {
fontSize: "36px",
lineHeight: "36px",
},
},
popover: {
zIndex: 201,
},
},
};
const metabase: MetabaseTheme = {
fontFamily: "DM Mono",
fontSize: "14px",
colors: {
brand: colors.primary,
filter: colors.secondary,
"text-primary": colors.darkGrey,
"text-secondary": colors.lightGrey,
"text-tertiary": colors.lightGrey,
border: "#3B3F3F",
background: colors.background,
"background-hover": "#FCFAF1",
"background-disabled": colors.lighterGrey,
charts: [
colors.primary,
colors.negative,
"#ECB405",
"#BD37C9",
colors.positive,
"#545455",
colors.primary,
colors.negative,
],
positive: colors.positive,
negative: colors.negative,
},
components: {
cartesian: {
padding: "6px 16px",
},
dashboard: {
card: {
border: "1px solid var(--mantine-color-gray-3)",
},
},
number: {
value: {
fontSize: "24px",
lineHeight: "30px",
},
},
popover: {
zIndex: 201,
},
},
};
为大规模数据探索定义权限和交互工具。为某些人提供只读访问权限。为某些人提供图表钻取功能，但不能保存。为其他人提供完全访问权限，可以创建、修改和保存问题，创建仪表盘等。
switch(currentUser.role) {
case curator: {
return (
<MetabaseProvider config={config} theme={theme}>
<InteractiveQuestion questionId={questionId} />
</MetabaseProvider>
);
break;
}
default: {
<MetabaseProvider config={config} theme={theme}>
<StaticQuestion questionId={questionId} />
</MetabaseProvider>
}
}
return <GuestGreeting />;
switch (currentUser.role) {
case (curator): {
return (
<MetabaseProvider config={config} theme={theme}>
<InteractiveQuestion questionId={questionId} />
</MetabaseProvider>
);
}
default: {
return (
<MetabaseProvider config={config} theme={theme}>
<StaticQuestion questionId={questionId} />
</MetabaseProvider>
)
}
}
return <GuestGreeting />;
来自真实客户的真实成果，他们使用 SDK 快速交付了自定义分析功能。
Marketfuel 需要紧密集成的分析功能，以在其电子商务平台中保持品牌体验。通过使用嵌入式分析 SDK，他们仅用一名开发人员，在不到一个月的时间里就完成了概念验证。
“使用 Metabase 对我们来说是一个改变游戏规则的举措。它让我们能够专注于我们最擅长的事情，而无需重新发明分析功能，从而节省了我们的时间和资源。”
了解 Marketfuel 如何使用 SDK 将报表构建到其产品中
Owlery 需要一个解决方案，让他们的团队和客户都能够创建和管理仪表盘，而无需工程师的持续参与。SDK 为他们提供了将分析功能无缝集成到产品中的灵活性。
“我们对使用 SDK 的决定感到非常满意。它让我们能够掌控我们产品的未来，并为我们的客户提供最佳的分析体验。”
了解 Owlery 如何使用 SDK 更快地将产品推向市场自定义每个组件的行为和流程，例如在菜单中添加自定义操作，或彻底改造查询构建器的布局。没有规则限制。
<MetabaseProvider
config={config}
theme={theme}
pluginsConfig={{
mapQuestionClickActions: (clickActions, clicked) => {
const nextClickActions = [...clickActions]
// If we are drilling down on the user id, add a custom action to view the user profile.
if (clicked.column?.name === "user_id") {
nextClickActions.push({
buttonType: "horizontal",
name: "view-profile",
section: "info",
type: "custom",
icon: "person",
title: "View user profile",
onClick: ({ closePopover }) => {
console.log(`View Profile > user_id = ${clicked.value}`)
closePopover()
},
})
}
return nextClickActions
},
}}
/>
