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. ...@@ -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: Here's an example that includes the various styling options available:
```js ```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. // 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 // You can set the font to "Custom" to use the custom font
// configured in your Metabase instance. // configured in your Metabase instance.
...@@ -169,7 +171,7 @@ const theme = { ...@@ -169,7 +171,7 @@ const theme = {
zIndex: 4, zIndex: 4,
}, },
}, },
}; });
``` ```
### Customizing loader and error components ### Customizing loader and error components
......
docs/embedding/sdk/collections.md
+ 9
− 0
View file @ a9819e8c
...@@ -44,3 +44,12 @@ export default function App() { ...@@ -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" ...@@ -10,9 +10,9 @@ title: "Embedded analytics SDK - components"
There are different ways you can embed questions: There are different ways you can embed questions:
- [`StaticQuestion`](#embedding-a-static-question). Embeds a chart. Clicking on the chart doesn't do anything. - [Static question](#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. - [Interactive question](#embedding-an-interactive-question). Clicking on the chart gives you the drill-through menu.
- [`CreateQuestion`]() - [Query builder](#embedding-the-query-builder). Embeds the graphical query builder without a pre-defined query.
## Embedding a static question ## Embedding a static question
...@@ -68,19 +68,19 @@ export default function App() { ...@@ -68,19 +68,19 @@ export default function App() {
## Question props ## Question props
| Prop | Type | Description | | 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. | | 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 } \| null` | Additional mapper function to override or add drill-down menu. | | plugins | `{ mapQuestionClickActions: Function }` or 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 | | height | number or 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 | | 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. | | 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 | | 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. | | 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. | | 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`. | | 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`. | | 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. | | 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 ## Customizing interactive questions
...@@ -137,7 +137,7 @@ To customize the layout, use namespaced components within the `InteractiveQuesti ...@@ -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 />`). These components are available via the `InteractiveQuestion` namespace (e.g., `<InteractiveQuestion.Filter />`).
| Component | Info | | Component | Info |
|-------------------------|------------------------------------------------------------------------------------------------------------------------------| | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `BackButton` | The back button, which provides `back` functionality for the InteractiveDashboard | | `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 | | `FilterBar` | The row of badges that contains the current filters that are applied to the question |
| `Filter` | The Filter pane containing all possible filters | | `Filter` | The Filter pane containing all possible filters |
...@@ -154,10 +154,11 @@ These components are available via the `InteractiveQuestion` namespace (e.g., `< ...@@ -154,10 +154,11 @@ These components are available via the `InteractiveQuestion` namespace (e.g., `<
## Interactive question plugins ## Interactive question plugins
You can use plugins to add custom functionality to your questions.
### `mapQuestionClickActions` ### `mapQuestionClickActions`
This plugin allows you to add custom actions to This plugin allows you to add custom actions to the click-through menu of an interactive question. You can add and
the click-through menu of an interactive question. You can add and
customize the appearance and behavior of the custom actions. customize the appearance and behavior of the custom actions.
```typescript ```typescript
...@@ -216,39 +217,39 @@ return ( ...@@ -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 ```tsx
import React from "react"; import React from "react";
import {MetabaseProvider, CreateQuestion} from "@metabase/embedding-sdk-react"; import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";
const config = {...} const config = {...}
export default function App() { export default function App() {
return ( return (
<MetabaseProvider config={config}> <MetabaseProvider config={config}>
<CreateQuestion/> <InteractiveQuestion questionId={1} isSaveEnabled />
</MetabaseProvider> </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 ```tsx
import React from "react"; import React from "react";
import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react"; import {MetabaseProvider, CreateQuestion} from "@metabase/embedding-sdk-react";
const config = {...} const config = {...}
export default function App() { export default function App() {
return ( return (
<MetabaseProvider config={config}> <MetabaseProvider config={config}>
<InteractiveQuestion questionId={1} isSaveEnabled /> <CreateQuestion/>
</MetabaseProvider> </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