Skip to content
Snippets Groups Projects
Unverified Commit a9819e8c authored by Jeff Bruemmer's avatar Jeff Bruemmer Committed by GitHub
Browse files

docs - sdk revisions (#49855)

parent d2d95df9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
docs/embedding/sdk/appearance.md
+ 4
− 2
View file @ a9819e8c
......@@ -13,7 +13,9 @@ You can style your embedded Metabase components with a theme.
Here's an example that includes the various styling options available:
```js
const theme = {
import {defineEmbeddingSdkTheme} from "@metabase/embedding-sdk-react";
const theme = defineEmbeddingSdkTheme({
// Specify a font to use from the set of fonts supported by Metabase.
// You can set the font to "Custom" to use the custom font
// configured in your Metabase instance.
......@@ -169,7 +171,7 @@ const theme = {
zIndex: 4,
},
},
};
});
```
### Customizing loader and error components
......
docs/embedding/sdk/collections.md
+ 9
− 0
View file @ a9819e8c
......@@ -44,3 +44,12 @@ export default function App() {
);
}
```
## Hide the collection picker and hard code the collection you want people to save stuff to
With static questions, you set a specific collection as the collection people can save items to, so that they don't have bother picking a collection. To hard-code a collection:
1. Set `isSaveEnabled` to true.
2. Set `saveToCollectionId` to the collection ID you want people to save items to.
For more options, see [Question props](./questions.md#question-props).
docs/embedding/sdk/questions.md
+ 28
− 27
View file @ a9819e8c
......@@ -10,9 +10,9 @@ title: "Embedded analytics SDK - components"
There are different ways you can embed questions:
- [`StaticQuestion`](#embedding-a-static-question). Embeds a chart. Clicking on the chart doesn't do anything.
- [`InteractiveQuestion`](#embedding-an-interactive-question). Clicking on the chart gives you the drill-through menu.
- [`CreateQuestion`]()
- [Static question](#embedding-a-static-question). Embeds a chart. Clicking on the chart doesn't do anything.
- [Interactive question](#embedding-an-interactive-question). Clicking on the chart gives you the drill-through menu.
- [Query builder](#embedding-the-query-builder). Embeds the graphical query builder without a pre-defined query.
## Embedding a static question
......@@ -68,19 +68,19 @@ export default function App() {
## Question props
| Prop | Type | Description |
| ------------------ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| questionId | `number \| string` | (required) The ID of the question. This is either:<br>- The numerical ID when accessing a question link, e.g., `http://localhost:3000/question/1-my-question` where the ID is `1`.<br>- The `entity_id` key of the question object. You can find a question's entity ID in the info panel when viewing a question. |
| plugins | `{ mapQuestionClickActions: Function } \| null` | Additional mapper function to override or add drill-down menu. |
| height | `number \| string` | (optional) A number or string specifying a CSS size value that specifies the height of the component |
| entityTypeFilter | `("table" \| "question" \| "model" \| "metric")[]` | (optional) An array that specifies which entity types are available in the data picker |
| isSaveEnabled | `boolean` | (optional) Whether people can save the question. |
| withResetButton | `boolean` | (optional, default: `true`) Determines whether a reset button is displayed. Only relevant when using the default layout |
| withTitle | `boolean` | (optional, default: `false`) Determines whether the question title is displayed. Only relevant when using the default layout. |
| customTitle | `string \| undefined` | (optional) Allows a custom title to be displayed instead of the default question title. Only relevant when using the default layout. |
| onBeforeSave | `() => void` | (optional) A callback function that triggers before saving. Only relevant when `isSaveEnabled = true`. |
| onSave | `() => void` | (optional) A callback function that triggers when a user saves the question. Only relevant when `isSaveEnabled = true`. |
| saveToCollectionId | `number` | (optional) The target collection to save the question to. This will hide the collection picker from the save modal. Only applicable to static questions. |
| Prop | Type | Description |
| ------------------ | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| questionId | number or string | (required) The ID of the question. This is either:<br>- The numerical ID when accessing a question link, e.g., `http://localhost:3000/question/1-my-question` where the ID is `1`.<br>- The `entity_id` key of the question object. You can find a question's entity ID in the info panel when viewing a question. |
| plugins | `{ mapQuestionClickActions: Function }` or null | Additional mapper function to override or add drill-down menu. |
| height | number or string | (optional) A number or string specifying a CSS size value that specifies the height of the component |
| entityTypeFilter | string array; options include "table", "question", "model", "metric" | (optional) An array that specifies which entity types are available in the data picker |
| isSaveEnabled | boolean | (optional) Whether people can save the question. |
| withResetButton | boolean | (optional, default: `true`) Determines whether a reset button is displayed. Only relevant when using the default layout |
| withTitle | boolean | (optional, default: `false`) Determines whether the question title is displayed. Only relevant when using the default layout. |
| customTitle | string or undefined | (optional) Allows a custom title to be displayed instead of the default question title. Only relevant when using the default layout. |
| onBeforeSave | `() => void` | (optional) A callback function that triggers before saving. Only relevant when `isSaveEnabled = true`. |
| onSave | `() => void` | (optional) A callback function that triggers when a user saves the question. Only relevant when `isSaveEnabled = true`. |
| saveToCollectionId | number | (optional) The target collection to save the question to. This will hide the collection picker from the save modal. Only applicable to static questions. |
## Customizing interactive questions
......@@ -137,7 +137,7 @@ To customize the layout, use namespaced components within the `InteractiveQuesti
These components are available via the `InteractiveQuestion` namespace (e.g., `<InteractiveQuestion.Filter />`).
| Component | Info |
|-------------------------|------------------------------------------------------------------------------------------------------------------------------|
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `BackButton` | The back button, which provides `back` functionality for the InteractiveDashboard |
| `FilterBar` | The row of badges that contains the current filters that are applied to the question |
| `Filter` | The Filter pane containing all possible filters |
......@@ -154,10 +154,11 @@ These components are available via the `InteractiveQuestion` namespace (e.g., `<
## Interactive question plugins
You can use plugins to add custom functionality to your questions.
### `mapQuestionClickActions`
This plugin allows you to add custom actions to
the click-through menu of an interactive question. You can add and
This plugin allows you to add custom actions to the click-through menu of an interactive question. You can add and
customize the appearance and behavior of the custom actions.
```typescript
......@@ -216,39 +217,39 @@ return (
);
```
## Creating a question
## Embedding an editable interactive question
With the `CreateQuestion` component, you can create a new question from scratch with Metabase's query builder.
You can edit an existing question using the query builder by passing the `isSaveEnabled` prop on the `InteractiveQuestion` component.
```tsx
import React from "react";
import {MetabaseProvider, CreateQuestion} from "@metabase/embedding-sdk-react";
import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";
const config = {...}
export default function App() {
return (
<MetabaseProvider config={config}>
<CreateQuestion/>
<InteractiveQuestion questionId={1} isSaveEnabled />
</MetabaseProvider>
);
}
```
## Embedding an editable question
## Embedding the query builder
You can edit an existing question using the query builder by using the `isSaveEnabled` prop on the `InteractiveQuestion` component.
With the `CreateQuestion` component, you can embed the query builder without a pre-defined question.
```tsx
import React from "react";
import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";
import {MetabaseProvider, CreateQuestion} from "@metabase/embedding-sdk-react";
const config = {...}
export default function App() {
return (
<MetabaseProvider config={config}>
<InteractiveQuestion questionId={1} isSaveEnabled />
<CreateQuestion/>
</MetabaseProvider>
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment