用于 React 的嵌入式分析 SDK

快速构建定制的应用内分析

专为应用内报告设计的 React 工具包,其外观、行为和感受都像是您应用的一部分。完全掌控原型设计、样式和发布复杂的分析功能,无需复杂的开发。

npx @metabase/embedding-sdk-react@latest start
探索实时演示 前往快速入门

多租户且安全

确保客户只看到他们需要的内容。您的数据绝不会离开您的服务器。

几分钟即可上手

快速安装 SDK 并嵌入您的第一个图表。随着需求增长,构建高级分析功能。

丰富的文档和支持

开发者优先的工具和专家支持,确保集成过程按您的计划进行。

超过 70,000 家公司信赖 Metabase
open-ai logo mcdonalds logo huma logo capital-one logo airbyte logo betterment logo Deutsche Telekom logo kong logo

与您的 UI 集成

嵌入独立组件——从单个图表到查询构建器——无缝融入您的产品。像素级精准放置,无固定宽度或高度,支持响应式设计。覆盖菜单、重新排列字段、移动按钮,并布局组件以适应您的 UI。

Integrate With Ui 1
        
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>
        
      

动态主题

为每个组件设置样式,以匹配您的应用外观和感受。自定义字体、背景颜色、工具提示、阴影等。为每个组织、团队甚至每个用户应用不同的样式。

Dynamic Theming 1 Dynamic Theming 2 Dynamic Theming 3
        
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 />;
        
      

由您定义的 UX

自定义每个组件的行为和流程,例如为菜单添加自定义操作,或彻底改造查询构建器的布局。没有规则限制。

Ux by You 1
        
<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
    },
  }}
/>
        
      

满足您需求的正确实现类型

快速

Iframe 嵌入

适用于需要快速嵌入分析且工程开销小的组织。
  • 应用中的图表、仪表板和报告。提供交互式或静态版本。
  • 交互式嵌入允许您进行白标和设置权限,以便客户可以查询、可视化和深入分析数据。
  • 静态嵌入允许用户在简单的仪表板中查看数据,但无法点击深入。
查看实时演示
Interactive Embedding
定制化

用于 React 的嵌入式分析 SDK

适用于需要定制应用内分析的组织。在 iframe 提供的所有功能基础上,具有更多控制和灵活性。
  • 选择要嵌入的组件及其放置位置,实现与您的应用深度集成。
  • 管理每个组件和用户的权限与交互性。
  • 细粒度主题设置,让分析看起来像是您产品的一部分。
了解更多
Interactive Embedding
还有疑问?我们很乐意为您提供帮助
联系我们
© . All rights reserved.