Skip to content
Snippets Groups Projects
user avatar
Mahatthana (Kelvin) Nomsawadi authored
* Correct embedding hash options type semantically

* Pass `X-Metabase-Locale` to embed downloads

* wip locale header middleware

* Allow smart scalar text to be translated

* Stop using global variable

* Add more details to embedding types

* Extend the E2E util type and correct some properties types

* Add e2e test

* Fix dashboard name

* Add a test for static embed question

* Make a type name follows a convention

Co-authored-by: default avatarDenis Berezin <denis.berezin@metabase.com>

* Fix failed E2E tests due to missing default values

* Fix public embed not working with `?locale` anymore

* Revert "wip locale header middleware"

This reverts commit 83d8d135.

* Preserve locale when in the `as-admin` macro is used

Motivating issue:

```shell
❯ http get 'http://localhost:3000/api/embed/dashboard/eyJhbGciOiJIUzI1NiJ9.eyJyZXNvdXJjZSI6eyJkYXNoYm9hcmQiOjEyfSwicGFyYW1zIjp7fX0.QZ-tEWpgJeSMUuaPfuH6_VQwM2yXNMcuureWCtHsszU/dashcard/162/card/124' x-metabase-locale:fr -pb | jq '.data|.cols|map(.display_name)'
[
  "State",
  "Count"
]
```

I'm running a query that has aggregated columns and it is returning the
untranslated. Note that these are computed and dynamically given a
display name.

```clojure
(case tag
  :count     (i18n/tru "Count")
  :cum-count (i18n/tru "Cumulative count"))
```

The problem is that we run embedding things as admin. And that gets the
current user, which in embed and public spaces is nil, and so binds a
nil to user-locale, which defaults to english when translating.

After:

```
❯ http get 'http://localhost:3000/api/embed/dashboard/eyJhbGciOiJIUzI1NiJ9.eyJyZXNvdXJjZSI6eyJkYXNoYm9hcmQiOjEyfSwicGFyYW1zIjp7fX0.QZ-tEWpgJeSMUuaPfuH6_VQwM2yXNMcuureWCtHsszU/dashcard/162/card/124' x-metabase-locale:fr -pb | jq '.data|.cols|map(.display_name)'
[
  "State",
  "Nombre de lignes"
]

❯ http get 'http://localhost:3000/api/embed/dashboard/eyJhbGciOiJIUzI1NiJ9.eyJyZXNvdXJjZSI6eyJkYXNoYm9hcmQiOjEyfSwicGFyYW1zIjp7fX0.QZ-tEWpgJeSMUuaPfuH6_VQwM2yXNMcuureWCtHsszU/dashcard/162/card/124' x-metabase-locale:zh -pb | jq '.data|.cols|map(.display_name)'
[
  "State",
  "行数"
]

❯ http get 'http://localhost:3000/api/embed/dashboard/eyJhbGciOiJIUzI1NiJ9.eyJyZXNvdXJjZSI6eyJkYXNoYm9hcmQiOjEyfSwicGFyYW1zIjp7fX0.QZ-tEWpgJeSMUuaPfuH6_VQwM2yXNMcuureWCtHsszU/dashcard/162/card/124

' x-metabase-locale:es -pb | jq '.data|.cols|map(.display_name)'
[
  "State",
  "Contar"
]
```

This is fetching a dashboard's card which is a query of orders grouped
by created at month, sum of total.

---------

Co-authored-by: default avatarNicolò Pretto <info@npretto.com>
Co-authored-by: default avatarDenis Berezin <denis.berezin@metabase.com>
Co-authored-by: default avatardan sutton <dan@dpsutton.com>
57d786df
History
Code owners
Assign users and groups as approvers for specific file changes. Learn more.

Metabase embedded analytics SDK

This SDK is in public beta and actively being developed. You can expect some changes to the API, especially during the beta. The SDK currently only works with a Metabase 1.51 or higher.

With Metabase's Embedded analytics SDK, you can embed individual Metabase components with React (like standalone charts, dashboards, the query builder, and more). You can manage access and interactivity per component, and you have advanced customization for seamless styling.

Learn more.

Installing Metabase Enterprise Edition

You can run Metabase Pro on a Cloud plan (with a free trial)](https://www.metabase.com/pricing).

Or run it locally. Here's a docker one-liner:

docker run -d -p 3000:3000 --name metabase metabase/metabase-enterprise:latest

You can also download the JAR, and run it like so:

java -jar metabase.jar

By default, Metabase will run at http://localhost:3000.

If you get stuck, check out our installation docs.

Installing the SDK

You can install Metabase Embedded analytics SDK for React via npm:

npm install @metabase/embedding-sdk-react

or using yarn:

yarn add @metabase/embedding-sdk-react

Which SDK version to use

The SDK version tracks with the Metabase version.

So, for example, if you're on Metabase version 1.51.x, you should use the SDK with the tag 51-stable.

See Versioning.

Docs

For how to use the SDK, check out our docs for the Embedded analytics SDK.

Development

Storybook

You can use storybook to run SDK components during local development.

When you have Metabase instance running:

yarn storybook-embedding-sdk

Initial configuration

  1. Set JWT secret to be "0000000000000000000000000000000000000000000000000000000000000000" in Admin > Authentication > JWT > String used by the JWT signing key
  2. Make sure "User Provisioning" setting is set to "on".
  3. Set Authorized Origins to "*" in Admin > Embedding > Interactive embedding

Building locally

First you need to build the Metabase Embedding SDK for React locally:

yarn build-release:cljs

And then run:

yarn build-embedding-sdk:watch

Using the local build

After that you need to add this built SDK package location to your package.json. In this example we assume that your application is located in the same directory as Metabase directory:

"dependencies": {
"@metabase/embedding-sdk-react": "file:../metabase/resources/embedding-sdk"
}

And then you can install the package using npm or yarn:

npm install
# or
yarn

Releases

Embedding SDK package build happens with Github actions if embedding-sdk-build label has been set on the PR.

Published package will use a version from package.template.json + current date and commit short hash.