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

docs - sdk updates (#49173)

parent d616baf6
No related merge requests found
Hide whitespace changes
Inline Side-by-side
docs/embedding/sdk/authentication.md
+ 2
− 2
View file @ 5929e664
......@@ -32,7 +32,7 @@ if (auth.status === "success") {
You can customize how the SDK fetches the refresh token by specifying the `fetchRefreshToken` function in the `config` prop:
```typescript jsx
```typescript
/**
* This is the default implementation used in the SDK.
* You can customize this function to fit your needs, such as adding headers or excluding cookies.
......@@ -59,7 +59,7 @@ const config = { fetchRequestToken };
In case you need to reload a Metabase component, for example, your users modify your application data and that data is used to render a question in Metabase. If you embed this question and want to force Metabase to reload the question to show the latest data, you can do so by using the `key` prop to force a component to reload.
```typescript jsx
```typescript
// Inside your application component
const [data, setData] = useState({});
// This is used to force reloading Metabase components
......
docs/embedding/sdk/collections.md
+ 8
− 7
View file @ 5929e664
......@@ -12,17 +12,18 @@ You can embed Metabase's collection browser so that people can explore items in
## `CollectionBrowser` props
| Prop | Type | Description |
| ------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| collectionId | `number` | The numerical ID of the collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in `http://localhost:3000/collection/1-my-collection` would be `1`. If no ID is provided, the collection browser will start at the root `Our analytics` collection, which is ID = 0. |
| onClick | `(item: CollectionItem) => void` | An optional click handler that emits the clicked entity. |
| pageSize | `number` | The number of items to display per page. The default is 25. |
| visibleEntityTypes | `("question" \| "model" \| "dashboard" \| "collection")[]` | The types of entities that should be visible. If not provided, all entities will be shown. |
| Prop | Type | Description |
| ------------------ | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| collectionId | `number` | The numerical ID of the collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in `http://localhost:3000/collection/1-my-collection` would be `1`. If no ID is provided, the collection browser will start at the root `Our analytics` collection, which is ID = 0. |
| onClick | `(item: CollectionItem) => void` | An optional click handler that emits the clicked entity. |
| pageSize | `number` | The number of items to display per page. The default is 25. |
| visibleEntityTypes | `["question", "model", "dashboard", "collection"]` | The types of entities that should be visible. If not provided, all entities will be shown. |
## Example embedding code with `CollectionBrowser`
```tsx
import React from "react";
import { CollectionBrowser } from "@metabase/embedding-sdk-react"
import { CollectionBrowser } from "@metabase/embedding-sdk-react";
export default function App() {
const collectionId = 123; // This is the collection ID you want to browse
......
docs/embedding/sdk/dashboards.md
+ 9
− 9
View file @ 5929e664
......@@ -37,7 +37,7 @@ _\* Not available for `StaticDashboard`._
## Example embedded dashboard with `InteractiveDashboard` component
```typescript jsx
```typescript
import React from "react";
import {MetabaseProvider, InteractiveDashboard} from "@metabase/embedding-sdk-react";
......@@ -72,7 +72,7 @@ This plugin allows you to add, remove, and modify the custom actions on the over
The plugin's default configuration looks like this:
```typescript jsx
```typescript
const plugins = {
dashboard: {
dashcardMenu: {
......@@ -86,7 +86,7 @@ const plugins = {
`dashcardMenu`: can be used in the InteractiveDashboard like this:
```typescript jsx
```typescript
{% raw %}
<InteractiveDashboard
questionId={1}
......@@ -103,7 +103,7 @@ const plugins = {
To remove the download button from the dashcard menu, set `withDownloads` to `false`. To remove the edit link from the dashcard menu, set `withEditLink` to `false`.
```typescript jsx
```typescript
const plugins = {
dashboard: {
dashcardMenu: {
......@@ -119,7 +119,7 @@ const plugins = {
You can add custom actions to the dashcard menu by adding an object to the `customItems` array. Each element can either be an object or a function that takes in the dashcard's question, and outputs a list of custom items in the form of:
```typescript jsx
```typescript
{
iconName: string;
label: string;
......@@ -130,7 +130,7 @@ You can add custom actions to the dashcard menu by adding an object to the `cust
Here's an example:
```typescript jsx
```typescript
const plugins: SdkPluginsConfig = {
dashboard: {
dashcardMenu: {
......@@ -161,7 +161,7 @@ const plugins: SdkPluginsConfig = {
If you want to replace the existing menu with your own component, you can do so by providing a function that returns a React component. This function also can receive the question as an argument.
```typescript jsx
```typescript
const plugins: SdkPluginsConfig = {
dashboard: {
dashcardMenu: ({ question }) => (
......@@ -177,7 +177,7 @@ Creating a dashboard could be done with `useCreateDashboardApi` hook or `CreateD
### Hook
```typescript jsx
```typescript
const { createDashboard } = useCreateDashboardApi();
const handleDashboardCreate = async () => {
......@@ -199,7 +199,7 @@ Props:
### Component
```typescript jsx
```typescript
const [dashboard, setDashboard] = useState<Dashboard | null>(null);
if (dashboard) {
......
docs/embedding/sdk/introduction.md
+ 3
− 3
View file @ 5929e664
......@@ -18,16 +18,16 @@ To give you and idea of what's possible with the SDK, we've put together example
![Pug and play example app built with embedding SDK](../images/pug-and-play.png)
# Embedding SDK prerequisites
# Embedded analytics SDK prerequisites
- React application. The SDK is tested to work with React 18 or higher, though it may work with earlier versions.
- [Metabase Pro or Enterprise subscription or free trial](https://www.metabase.com/pricing/).
- Metabase version 1.50 or higher.
- [Node.js 18.x LTS](https://nodejs.org/en) or higher.
## Embedding SDK on NPM
## Embedded analytics SDK on NPM
Check out the [Metabase embedding SDK on NPM: [metaba.se/sdk](https://metaba.se/sdk).
Check out the Metabase Embedded analytics SDK on NPM: [metaba.se/sdk](https://metaba.se/sdk).
## Installation
......
docs/embedding/sdk/plugins.md
+ 2
− 2
View file @ 5929e664
......@@ -14,7 +14,7 @@ The Metabase Embedding SDK supports plugins to customize the behavior of compone
To use a plugin globally, add the plugin to the `MetabaseProvider`'s `pluginsConfig` prop:
```typescript jsx
```typescript
{% raw %}
<MetabaseProvider
config={config}
......@@ -32,7 +32,7 @@ To use a plugin globally, add the plugin to the `MetabaseProvider`'s `pluginsCon
To use a plugin on a per-component basis, pass the plugin as a prop to the component:
```typescript jsx
```typescript
{% raw %}
<InteractiveQuestion
questionId={1}
......
docs/embedding/sdk/questions.md
+ 5
− 5
View file @ 5929e664
......@@ -21,7 +21,7 @@ You can embed a static question using the `StaticQuestion` component.
The component has a default height, which can be customized by using the `height` prop. To inherit the height from the parent container, you can pass `100%` to the height prop.
```typescript jsx
```typescript
import React from "react";
import {MetabaseProvider, StaticQuestion} from "@metabase/embedding-sdk-react";
......@@ -50,7 +50,7 @@ You can pass parameter values to questions defined with SQL via `parameterValues
You can embed an interactive question using the `InteractiveQuestion` component.
```typescript jsx
```typescript
import React from "react";
import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";
......@@ -89,13 +89,13 @@ By default, the Embedded Analytics SDK provides a default layout for interactive
Here's an example of using the `InteractiveQuestion` component with its default layout:
```typescript jsx
```typescript
<InteractiveQuestion questionId={95} />
```
To customize the layout, use namespaced components within the `InteractiveQuestion` component. For example:
```typescript jsx
```typescript
{% raw %}
<InteractiveQuestion questionId={95}>
<div
......@@ -160,7 +160,7 @@ 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 jsx
```typescript
// You can provide a custom action with your own `onClick` logic.
const createCustomAction = clicked => ({
buttonType: "horizontal",
......
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