Skip to content

Commit 00bcc4a

Browse files
github-automation-metabaseMetabase Docs bot
github-automation-metabase
and
Metabase Docs bot
authored
[auto] adding content to master->master (#795)
Co-authored-by: Metabase Docs bot <[email protected]>
1 parent b96c464 commit 00bcc4a

File tree

291 files changed

+2224
-22037
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

291 files changed

+2224
-22037
lines changed

‎_docs/master/embedding/sdk/introduction.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ The SDK doesn't support:
135135
- Official collections
136136
- Subscriptions
137137
- Alerts
138+
- Click behavior with custom destinations to other items in the same Metabase (like to other questions or dashboards)
138139
- Server-side rendering (SSR)
139140

140141
Other limitations:

‎_docs/master/embedding/sdk/plugins.md‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,59 +15,57 @@ layout: new-docs
1515

1616
The Metabase Embedded analytics SDK supports plugins to customize the behavior of components. These plugins can be used in a global context or on a per-component basis.
1717

18-
## Global plugins
18+
## Plugin scope
19+
20+
### Global plugins
1921

2022
To use a plugin globally, add the plugin to the `MetabaseProvider`'s `pluginsConfig` prop:
2123

2224
```typescript
2325
{% include_file "{{ dirname }}/snippets/plugins/global-plugins.tsx" snippet="example" %}
2426
```
2527

26-
## Component plugins
28+
### Component plugins
2729

2830
To use a plugin on a per-component basis, pass the plugin as a prop to the component:
2931

3032
```typescript
3133
{% include_file "{{ dirname }}/snippets/plugins/component-plugins.tsx" snippet="example" %}
3234
```
3335

34-
## `handleLink`
36+
See docs for specific components:
37+
38+
- [Interactive question plugins](./questions#interactive-question-plugins)
39+
- [Dashboard plugins](./dashboards#dashboard-plugins)
40+
41+
## Global plugins
42+
43+
### `mapQuestionClickActions`
44+
45+
The plugin `mapQuestionClickActions` lets you to customize what happens when people click on a data point on a dashboard or chart. `mapQuestionClickActions` can be used globally, or on component level.
46+
47+
See [`mapQuestionClickActions` plugin](./questions#mapquestionclickactions) for more information and examples.
48+
49+
### `handleLink`
3550

3651
To customize what happens when people click a link in your embedded questions and dashboards, use the global plugin `handleLink`:
3752

3853
```typescript
39-
export default function App() {
40-
const navigate = useNavigate(); // coming from whatever routing lib you're using
41-
42-
const plugins = {
43-
handleLink: (urlString: string) => {
44-
const url = new URL(urlString, window.location.origin);
45-
const isInternal = url.origin === window.location.origin;
46-
if (isInternal) {
47-
// client side navigation
48-
navigate(url.pathname + url.search + url.hash);
49-
50-
return { handled: true }; // prevent default navigation
51-
}
52-
return { handled: false }; // let the sdk do the default behavior
53-
},
54-
};
55-
56-
return (
57-
<MetabaseProvider authConfig={authConfig} pluginsConfig={plugins}>
58-
<nav style={{ display: "flex", gap: 12, padding: 12 }}>
59-
<Link to="/">Home</Link>
60-
<Link to="/question">Question</Link>
61-
<Link to="/about">About</Link>
62-
</nav>
63-
<div style={{ padding: 12 }}>
64-
<Outlet />
65-
</div>
66-
</MetabaseProvider>
67-
);
68-
}
54+
{% include_file "{{ dirname }}/snippets/plugins/handlelink.tsx" snippet="example" %}
6955
```
7056

57+
The plugin `handleLink` can only be used [globally](#plugin-scope) on provider level.
58+
59+
### `getNoDataIllustration` and `getNoObjectIllustration`
60+
61+
By default, Metabase displays a sailboat image when a query returns no results. To use a different image, you can use `getNoDataIllustration` and `getNoObjectIllustration` plugins which can accept a custom base64-encoded image:
62+
63+
```typescript
64+
{% include_file "{{ dirname }}/snippets/plugins/custom-images.tsx" snippet="example" %}
65+
```
66+
67+
The plugins `getNoDataIllustration` and `getNoObjectIllustration` can only be used [globally](#plugin-scope) on provider level.
68+
7169
## Further reading
7270

7371
- [Interactive question plugins](./questions#interactive-question-plugins)

‎_docs/master/embedding/sdk/snippets/plugins/custom-images.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {
2+
InteractiveDashboard,
3+
type MetabaseAuthConfig,
4+
MetabaseProvider,
5+
} from "@metabase/embedding-sdk-react";
6+
7+
const authConfig = {} as MetabaseAuthConfig;
8+
9+
export default function App() {
10+
// [<snippet example>]
11+
12+
const img_base64 = "..."; // base64-encoded image
13+
14+
const plugins = {
15+
getNoDataIllustration: () => img_base64,
16+
getNoObjectIllustration: () => img_base64,
17+
};
18+
19+
return (
20+
<MetabaseProvider authConfig={authConfig} pluginsConfig={plugins}>
21+
<InteractiveDashboard dashboardId={1} />
22+
</MetabaseProvider>
23+
);
24+
// [<endsnippet example>]
25+
}

‎_docs/master/embedding/sdk/snippets/plugins/handlelink.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {
2+
InteractiveDashboard,
3+
type MetabaseAuthConfig,
4+
MetabaseProvider,
5+
} from "@metabase/embedding-sdk-react";
6+
7+
const authConfig = {} as MetabaseAuthConfig;
8+
9+
export default function App() {
10+
// [<snippet example>]
11+
const plugins = {
12+
handleLink: (urlString: string) => {
13+
const url = new URL(urlString, window.location.origin);
14+
const isInternal = url.origin === window.location.origin;
15+
if (isInternal) {
16+
// Handle internal navigation (e.g., with your router)
17+
console.log("Navigate to:", url.pathname + url.search + url.hash);
18+
return { handled: true }; // prevent default navigation
19+
}
20+
return { handled: false }; // let the SDK do the default behavior
21+
},
22+
};
23+
24+
return (
25+
<MetabaseProvider authConfig={authConfig} pluginsConfig={plugins}>
26+
<InteractiveDashboard dashboardId={1} />
27+
</MetabaseProvider>
28+
);
29+
// [<endsnippet example>]
30+
}

‎_site/docs/master/CONTRIBUTING.html‎

Lines changed: 7 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -2717,91 +2717,28 @@ <h5>Embedding</h5>
27172717

27182718
<li>
27192719
<a href="/docs/master/embedding/sdk/introduction" class="">
2720-
Introduction
2721-
</a>
2722-
</li>
2723-
2724-
2725-
<li>
2726-
<a href="/docs/master/embedding/sdk/quickstart" class="">
2727-
Quickstart
2728-
</a>
2729-
</li>
2730-
2731-
2732-
<li>
2733-
<a href="/docs/master/embedding/sdk/quickstart-cli" class="">
2734-
Quickstart with CLI
2735-
</a>
2736-
</li>
2737-
2738-
2739-
<li>
2740-
<a href="/docs/master/embedding/sdk/quickstart-with-sample-app" class="">
2741-
Quickstart with sample app
2742-
</a>
2743-
</li>
2744-
2745-
2746-
<li>
2747-
<a href="/docs/master/embedding/sdk/questions" class="">
2748-
Questions
2749-
</a>
2750-
</li>
2751-
2752-
2753-
<li>
2754-
<a href="/docs/master/embedding/sdk/dashboards" class="">
2755-
Dashboards
2756-
</a>
2757-
</li>
2758-
2759-
2760-
<li>
2761-
<a href="/docs/master/embedding/sdk/ai-chat" class="">
2762-
AI chat
2763-
</a>
2764-
</li>
2765-
2766-
2767-
<li>
2768-
<a href="/docs/master/embedding/sdk/collections" class="">
2769-
Collections
2770-
</a>
2771-
</li>
2772-
2773-
2774-
<li>
2775-
<a href="/docs/master/embedding/sdk/authentication" class="">
2776-
Authentication
2777-
</a>
2778-
</li>
2779-
2780-
2781-
<li>
2782-
<a href="/docs/master/embedding/sdk/appearance" class="">
2783-
Appearance
2720+
Overview
27842721
</a>
27852722
</li>
27862723

27872724

27882725
<li>
2789-
<a href="/docs/master/embedding/sdk/config" class="">
2790-
Config
2726+
<a href="/docs/master/embedding/sdk/introduction#quickstarts" class="">
2727+
Quickstarts
27912728
</a>
27922729
</li>
27932730

27942731

27952732
<li>
2796-
<a href="/docs/master/embedding/sdk/next-js" class="">
2797-
Working with Next.js
2733+
<a href="" class="">
2734+
Components
27982735
</a>
27992736
</li>
28002737

28012738

28022739
<li>
2803-
<a href="/docs/master/embedding/sdk/version" class="">
2804-
Versioning
2740+
<a href="" class="">
2741+
Configuration
28052742
</a>
28062743
</li>
28072744

@@ -2813,13 +2750,6 @@ <h5>Embedding</h5>
28132750
</li>
28142751

28152752

2816-
<li>
2817-
<a href="/docs/master/embedding/sdk/plugins" class="">
2818-
Plugins
2819-
</a>
2820-
</li>
2821-
2822-
28232753
<li>
28242754
<a href="/docs/master/embedding/sdk/api/" class="">
28252755
API

‎_site/docs/master/actions/basic.html‎

Lines changed: 7 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -2717,91 +2717,28 @@ <h5>Embedding</h5>
27172717

27182718
<li>
27192719
<a href="/docs/master/embedding/sdk/introduction" class="">
2720-
Introduction
2721-
</a>
2722-
</li>
2723-
2724-
2725-
<li>
2726-
<a href="/docs/master/embedding/sdk/quickstart" class="">
2727-
Quickstart
2728-
</a>
2729-
</li>
2730-
2731-
2732-
<li>
2733-
<a href="/docs/master/embedding/sdk/quickstart-cli" class="">
2734-
Quickstart with CLI
2735-
</a>
2736-
</li>
2737-
2738-
2739-
<li>
2740-
<a href="/docs/master/embedding/sdk/quickstart-with-sample-app" class="">
2741-
Quickstart with sample app
2742-
</a>
2743-
</li>
2744-
2745-
2746-
<li>
2747-
<a href="/docs/master/embedding/sdk/questions" class="">
2748-
Questions
2749-
</a>
2750-
</li>
2751-
2752-
2753-
<li>
2754-
<a href="/docs/master/embedding/sdk/dashboards" class="">
2755-
Dashboards
2756-
</a>
2757-
</li>
2758-
2759-
2760-
<li>
2761-
<a href="/docs/master/embedding/sdk/ai-chat" class="">
2762-
AI chat
2763-
</a>
2764-
</li>
2765-
2766-
2767-
<li>
2768-
<a href="/docs/master/embedding/sdk/collections" class="">
2769-
Collections
2770-
</a>
2771-
</li>
2772-
2773-
2774-
<li>
2775-
<a href="/docs/master/embedding/sdk/authentication" class="">
2776-
Authentication
2777-
</a>
2778-
</li>
2779-
2780-
2781-
<li>
2782-
<a href="/docs/master/embedding/sdk/appearance" class="">
2783-
Appearance
2720+
Overview
27842721
</a>
27852722
</li>
27862723

27872724

27882725
<li>
2789-
<a href="/docs/master/embedding/sdk/config" class="">
2790-
Config
2726+
<a href="/docs/master/embedding/sdk/introduction#quickstarts" class="">
2727+
Quickstarts
27912728
</a>
27922729
</li>
27932730

27942731

27952732
<li>
2796-
<a href="/docs/master/embedding/sdk/next-js" class="">
2797-
Working with Next.js
2733+
<a href="" class="">
2734+
Components
27982735
</a>
27992736
</li>
28002737

28012738

28022739
<li>
2803-
<a href="/docs/master/embedding/sdk/version" class="">
2804-
Versioning
2740+
<a href="" class="">
2741+
Configuration
28052742
</a>
28062743
</li>
28072744

@@ -2813,13 +2750,6 @@ <h5>Embedding</h5>
28132750
</li>
28142751

28152752

2816-
<li>
2817-
<a href="/docs/master/embedding/sdk/plugins" class="">
2818-
Plugins
2819-
</a>
2820-
</li>
2821-
2822-
28232753
<li>
28242754
<a href="/docs/master/embedding/sdk/api/" class="">
28252755
API

0 commit comments

Comments
 (0)