嵌入式分析 SDK - 問題

您可以使用不同的方式嵌入問題

• 靜態問題。嵌入圖表。點擊圖表不會有任何反應。
• 互動式問題。點擊圖表會顯示鑽取選單。
• 查詢產生器。嵌入圖形化查詢產生器，不含預先定義的查詢。

嵌入靜態問題

您可以使用 StaticQuestion 元件嵌入靜態問題。

此元件具有預設高度，可使用 height prop 自訂。若要從父容器繼承高度，您可以將 100% 傳遞給 height prop。

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

const authConfig = {...}

export default function App() {
    const questionId = 1; // This is the question ID you want to embed

    return (
        <MetabaseProvider authConfig={authConfig}>
            <StaticQuestion questionId={questionId} withChartTypeSelector={false}/>
        </MetabaseProvider>
    );
}

嵌入互動式問題

您可以使用 InteractiveQuestion 元件嵌入互動式問題。

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

const authConfig = {...}

export default function App() {
    const questionId = 1; // This is the question ID you want to embed

    return (
        <MetabaseProvider authConfig={authConfig}>
            <InteractiveQuestion questionId={questionId}/>
        </MetabaseProvider>
    );
}

問題 Props

將 SQL 參數傳遞給問題

您可以透過 initialSqlParameters prop，以 {parameter_name: parameter_value} 的格式，將參數值傳遞給以 SQL 定義的問題。深入瞭解SQL 參數。

<StaticQuestion questionId={questionId} initialSqlParameters={{ product_id: 50 }} />

自訂互動式問題

預設情況下，嵌入式分析 SDK 為互動式問題提供預設版面配置，讓您可以檢視問題、套用篩選和彙總，以及存取查詢產生器內的功能。

以下是使用 InteractiveQuestion 元件及其預設版面配置的範例

<InteractiveQuestion questionId={95} />

若要自訂版面配置，請在 InteractiveQuestion 元件中使用命名空間元件。例如

<InteractiveQuestion questionId={95}>
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
    }}
  >
    <div style={{ display: "grid", placeItems: "center" }}>
      <InteractiveQuestion.Title />
      <InteractiveQuestion.ResetButton />
    </div>
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "flex-start",
        overflow: "hidden",
      }}
    >
      <div style={{ width: "100%" }}>
        <InteractiveQuestion.QuestionVisualization />
      </div>
      <div style={{ display: "flex", flex: 1, overflow: "scroll" }}>
        <InteractiveQuestion.Summarize />
      </div>
    </div>
    <div style={{ display: "flex", flexDirection: "column" }}>
      <InteractiveQuestion.Filter />
    </div>
  </div>
</InteractiveQuestion>

互動式問題元件

這些元件可透過 InteractiveQuestion 命名空間取得（例如，<InteractiveQuestion.Filter />）。

* 表示必填 prop

InteractiveQuestion.BackButton

返回上一個檢視畫面的導覽按鈕。僅在 InteractiveQuestion 的 onNavigateBack prop 可用時才會呈現。

底層使用 Mantine ActionIcon props，以及：| Prop | Type | Description | |——|——|————-| | className | string | Custom CSS class name for styling the component | | style | React.CSSProperties | Inline styles to apply to the component |

InteractiveQuestion.Filter

一組互動式篩選條件標籤，可讓您新增、編輯和移除篩選條件。將目前的篩選條件顯示為標籤，並提供「新增其他篩選條件」選項。

InteractiveQuestion.FilterDropdown

Filter 元件的下拉式按鈕。

InteractiveQuestion.ResetButton

用於重設問題修改的按鈕。僅在問題有未儲存的變更時才會顯示。

底層使用 Mantine Button props，以及：| Prop | Type | Description | |——|——|————-| | className | string | Custom CSS class name for styling the component | | style | React.CSSProperties | Inline styles to apply to the component |

InteractiveQuestion.Title

根據問題的狀態顯示標題。顯示

• 問題的顯示名稱（如果已儲存）
• 針對臨時問題（非原生查詢）自動產生的描述
• 「新問題」作為後備或用於新的/原生查詢

InteractiveQuestion.SaveButton

用於儲存問題變更的按鈕。僅在問題有未儲存的修改時才會啟用。

注意：目前，在自訂版面配置中，SaveButton 必須具有 onClick 處理常式，否則按鈕在點擊時不會執行任何動作。

底層使用 Mantine Button props，以及：| Prop | Type | Description | |——|——|————-| | className | string | Custom CSS class name for styling the component | | style | React.CSSProperties | Inline styles to apply to the component |

InteractiveQuestion.Breakout

一組用於管理資料分組（分組依據）的標籤。

沒有 props。使用問題上下文進行分組依據功能。

InteractiveQuestion.BreakoutDropdown

Breakout 元件的下拉式按鈕。

底層使用 Popover props，但 onClose、children 和 opened 除外，以及：| Prop | Type | Description | |——|——|————-| | className | string | Custom CSS class name for styling the component | | style | React.CSSProperties | Inline styles to apply to the component |

InteractiveQuestion.Summarize

用於新增和管理資料摘要（例如計數、總和、平均值）的介面。顯示為一組標籤。

沒有 props。使用問題上下文進行摘要功能。

InteractiveQuestion.SummarizeDropdown

Summarize 元件的下拉式按鈕。

底層使用 Popover props，但 onClose、children 和 opened 除外，以及：| Prop | Type | Description | |——|——|————-| | className | string | Custom CSS class name for styling the component | | style | React.CSSProperties | Inline styles to apply to the component |

InteractiveQuestion.Editor

進階查詢編輯器，可完整存取問題設定。包含篩選、彙總、自訂表達式和聯結。

取代已棄用的 InteractiveQuestion.Notebook

InteractiveQuestion.EditorButton

用於顯示/隱藏編輯器介面的切換按鈕。

取代已棄用的 InteractiveQuestion.NotebookButton

注意：目前，在自訂版面配置中，EditorButton 必須具有 onClick 處理常式，否則按鈕在點擊時不會執行任何動作。

底層使用 Mantine ActionIcon props，以及：| Prop | Type | Description | |——|——|————-| | isOpen | boolean | Whether the editor is currently open | | className | string | Custom CSS class name for styling the component | | style | React.CSSProperties | Inline styles to apply to the component |

InteractiveQuestion.QuestionVisualization

主要的可視化元件，可將問題結果呈現為圖表、表格或其他可視化類型。

InteractiveQuestion.QuestionSettings

用於設定可視化選項（如軸、顏色和格式）的設定面板。

沒有 props。使用問題上下文進行設定。

InteractiveQuestion.QuestionSettingsDropdown

包含 QuestionSettings 元件的下拉式按鈕。

底層使用 Popover props，但 onClose 和 opened 除外，以及：| Prop | Type | Description | |——|——|————-| | height | React.CSSProperties[“height”] | Height for the dropdown menu | | className | string | Custom CSS class name for styling the component | | style | React.CSSProperties | Inline styles to apply to the component |

InteractiveQuestion.ChartTypeSelector

詳細的圖表類型選擇介面，提供建議的可視化選項。

底層使用 Mantine Stack props，以及：| Prop | Type | Description | |——|——|————-| | className | string | 用於設定組件樣式的自訂 CSS 類別名稱 | | style | React.CSSProperties | 套用至組件的行內樣式 |

InteractiveQuestion.ChartTypeDropdown

用於選擇視覺化類型的下拉選單（長條圖、折線圖、表格等）。自動更新以顯示目前資料建議的視覺化類型。

底層使用 Mantine Menu props，以及：| Prop | Type | Description | |——|——|————-| | className | string | 用於設定組件樣式的自訂 CSS 類別名稱 | | style | React.CSSProperties | 套用至組件的行內樣式 |

InteractiveQuestion.SaveQuestionForm

用於儲存問題的表單，包含標題和描述。儲存時

• 對於新問題：呼叫來自 InteractiveQuestion 的 onCreate prop
• 對於現有問題：呼叫來自 InteractiveQuestion 的 onSave prop
• 兩個回呼都會接收更新後的問題物件
• 可以透過 onCancel prop 取消表單

互動式問題外掛程式

您可以使用外掛程式為您的問題新增自訂功能。

mapQuestionClickActions

此外掛程式允許您將自訂動作新增至互動式問題的點擊選單。您可以新增和自訂自訂動作的外觀和行為。

// You can provide a custom action with your own `onClick` logic.
const createCustomAction = clicked => ({
  buttonType: "horizontal",
  name: "client-custom-action",
  section: "custom",
  type: "custom",
  icon: "chevronright",
  title: "Hello from the click app!!!",
  onClick: ({ closePopover }) => {
    alert(`Clicked ${clicked.column?.name}: ${clicked.value}`);
    closePopover();
  },
});

// Or customize the appearance of the custom action to suit your need.
const createCustomActionWithView = clicked => ({
  name: "client-custom-action-2",
  section: "custom",
  type: "custom",
  view: ({ closePopover }) => (
    <button
      className="tw-text-base tw-text-yellow-900 tw-bg-slate-400 tw-rounded-lg"
      onClick={() => {
        alert(`Clicked ${clicked.column?.name}: ${clicked.value}`);
        closePopover();
      }}
    >
      Custom element
    </button>
  ),
});

const plugins = {
  /**
   * You will have access to default `clickActions` that Metabase renders by default.
   * So you could decide if you want to add custom actions, remove certain actions, etc.
   */
  mapQuestionClickActions: (clickActions, clicked) => {
    return [
      ...clickActions,
      createCustomAction(clicked),
      createCustomActionWithView(clicked),
    ];
  },
};

const questionId = 1; // This is the question ID you want to embed

return (
  <MetabaseProvider authConfig={authConfig} pluginsConfig={plugins}>
    <InteractiveQuestion questionId={questionId} />
  </MetabaseProvider>
);

嵌入可編輯的互動式問題

您可以透過在 InteractiveQuestion 組件上傳遞 isSaveEnabled prop，使用查詢產生器編輯現有的問題。

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

const authConfig = {...}

export default function App() {
    return (
        <MetabaseProvider authConfig={authConfig}>
            <InteractiveQuestion questionId={1} isSaveEnabled />
        </MetabaseProvider>
    );
}

嵌入查詢產生器

使用 CreateQuestion 組件，您可以嵌入查詢產生器，而無需預先定義的問題。

此組件建立於具有命名空間組件的 InteractiveQuestion 組件之上。它與 InteractiveQuestion 共用相同的 props，除了它缺少 questionId prop 和傳遞自訂 children 的能力。

若要自訂問題編輯器的版面配置，請直接將 InteractiveQuestion 組件與自訂 children prop 一起使用。

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

const authConfig = {...}

export default function App() {
    return (
        <MetabaseProvider authConfig={authConfig}>
            <CreateQuestion />
        </MetabaseProvider>
    );
}