嵌入式分析SDK - 仪表板

import React from "react";
import {
  InteractiveDashboard,
  MetabaseProvider,
  defineMetabaseAuthConfig,
} from "@metabase/embedding-sdk-react";

const authConfig = defineMetabaseAuthConfig({
  metabaseInstanceUrl: "https://your-metabase.example.com",
});

export default function App() {
  const dashboardId = 1; // This is the dashboard ID you want to embed
  const initialParameters = {}; // Define your query parameters here

  // choose parameter names that are in your dashboard
  const hiddenParameters = ["location", "city"];

  return (
    <MetabaseProvider authConfig={authConfig}>
      <InteractiveDashboard
        dashboardId={dashboardId}
        initialParameters={initialParameters}
        withTitle={false}
        withDownloads={false}
        hiddenParameters={hiddenParameters}
      />
    </MetabaseProvider>
  );
}

<InteractiveDashboard
  dashboardId={95}
  renderDrillThroughQuestion={QuestionView}
/>

// You can use namespaced components to build the question's layout.
const QuestionView = () => <InteractiveQuestion.Title />;

const plugins = {
  dashboard: {
    dashboardCardMenu: {
      withDownloads: true,
      withEditLink: true,
      customItems: [],
    },
  },
};

<InteractiveDashboard
  dashboardId={1}
  plugins={{
    dashboard: {
      dashboardCardMenu: () => null,
    },
  }}
/>

const plugins = {
  dashboard: {
    dashboardCardMenu: {
      withDownloads: false,
      withEditLink: false,
      customItems: [],
    },
  },
};

type DashCardMenuItem = {
  iconName: string;
  label: string;
  onClick: () => void;
  disabled?: boolean;
};

const plugins: MetabasePluginsConfig = {
  dashboard: {
    dashboardCardMenu: {
      customItems: [
        {
          iconName: "chevronright",
          label: "Custom action",
          onClick: () => {
            alert(`Custom action clicked`);
          },
        },
        ({ question }) => {
          return {
            iconName: "chevronright",
            label: "Custom action",
            onClick: () => {
              alert(`Custom action clicked ${question?.name}`);
            },
          };
        },
      ],
    },
  },
};

const plugins: MetabasePluginsConfig = {
  dashboard: {
    dashboardCardMenu: ({ question }) => (
      <button onClick={() => console.log(question.name)}>Click me</button>
    ),
  },
};

const hookResult = useCreateDashboardApi();

const handleDashboardCreate = async () => {
  // hookResult is `null` until the SDK is fully loaded and initialized
  if (!hookResult) {
    return;
  }

  const dashboard = await hookResult.createDashboard(options);

  // do something with created empty dashboard, e.g., use the dashboard in EditableDashboard component
};

return <button onClick={handleDashboardCreate}>Create new dashboard</button>;

const [dashboard, setDashboard] = useState<MetabaseDashboard | null>(null);

if (dashboard) {
  return <EditableDashboard dashboardId={dashboard.id} />;
}

return <CreateDashboardModal onClose={handleClose} onCreate={setDashboard} />;