From 1d2ea37474193c8035cbe17ad33c0e22b57aa869 Mon Sep 17 00:00:00 2001 From: Alberto Perdomo Date: Wed, 17 Apr 2024 11:29:00 +0100 Subject: [PATCH 1/5] Initial commit Python Flask --- .gitignore | 2 ++ README.md | 20 ++++++++++++++++++++ python/README.md | 30 ++++++++++++++++++++++++++++++ python/app.py | 26 ++++++++++++++++++++++++++ python/requirements.txt | 2 ++ 5 files changed, 80 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 python/README.md create mode 100644 python/app.py create mode 100644 python/requirements.txt diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f5c201f --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +python/.venv +python/__pycache__ diff --git a/README.md b/README.md new file mode 100644 index 0000000..48d6bc7 --- /dev/null +++ b/README.md @@ -0,0 +1,20 @@ +# Metabase static embedding sample apps + +This repo contains code samples demonstrating how embed Metabase dashboards in an app using [static embedding](https://www.metabase.com/docs/latest/embedding/static-embedding). + +For [interactive embedding](https://www.metabase.com/docs/latest/embedding/interactive-embedding), check out the following resources: + +* [Interactive embedding quick start](https://www.metabase.com/learn/customer-facing-analytics/interactive-embedding-quick-start) +* [Sample repo for the quick start](https://github.com/metabase/metabase-nodejs-express-interactive-embedding-sample) +* [Sample with React](https://github.com/metabase/sso-examples/tree/master/app-embed-example) + +If you are unsure about what embedding feature is best for you, check out our [live demos](https://www.metabase.com/embedding-demo). + +## Free static embedding + +Embedding Metabase charts will always be free, but we include a "Powered by Metabase" graphic when using the open source version. + +If you'd like to remove the "Powered by Metabase" attribution, check out our [paid plans](https://www.metabase.com/pricing/). In addition to removing the banner, you can also customize the fonts and hide the download buttons for questions. + +## Samples +* [Python Flask](/python) diff --git a/python/README.md b/python/README.md new file mode 100644 index 0000000..a6fcc74 --- /dev/null +++ b/python/README.md @@ -0,0 +1,30 @@ +# Metabase Python static embedding sample + +This sample code demonstrates using Metabase static embedding in Python using Flask. + +## Pre-requisites +* Have a running instance of Metabase. If you don't have one + * [download the free open source version](https://www.metabase.com/start/oss/) or + * [sign up for a free trial of Metabase Cloud](https://www.metabase.com/pricing/). +* A dashboard to embed. If you don't have one, use X-Rays to let Metabase create one for you. Note down the dashboard id. + +## Preparing the embed +1. Sign in to your Metabase instance as an admin. +2. Go to admin settings and enabling embedding. +3. Under admin settings/embedding, click on static embedding and copy the embedding secret key. + +## Configure the app + +1. Paste the secret key into an env var: `$ export METABASE_EMBEDDING_SECRET="PASTE_SECRET_HERE"` +2. Create an env var pointing to your Metabase site URL, if it's not on http://localhost:3000 `$ export METABASE_SITE_URL="http://localhost:4000"` +3. Create an env var with the ID of the dashboard to embed, if it's not 1: `$ export METABASE_EMBED_DASHBOARD_ID="8"` + +## Embed the dashboard +1. Go to your dashboard, click on the share/embed button at the top +2. Click on the "Publish" button + +# Running the sample +1. Activate the virtual environment: `$ source .venv/bin/activate` +2. Install the dependencies: `$ pip install -r requirements.txt` +3. Start the app: `$ flask run -p 9090` +4. Open the app at http://localhost:9090 diff --git a/python/app.py b/python/app.py new file mode 100644 index 0000000..f83da1d --- /dev/null +++ b/python/app.py @@ -0,0 +1,26 @@ +import time +import os +from urllib.parse import urljoin + +from flask import Flask +import jwt + +app = Flask(__name__) + +METABASE_SITE_URL = os.environ.get('METABASE_SITE_URL', 'http://localhost:3000') +METABASE_EMBEDDING_SECRET = os.environ.get('METABASE_EMBEDDING_SECRET') +METABASE_EMBED_DASHBOARD_ID = int(os.environ.get('METABASE_EMBED_DASHBOARD_ID', '1')) + +@app.route("/") +def static_embed(): + payload = { + "resource": {"dashboard": METABASE_EMBED_DASHBOARD_ID}, + "params": { + }, + "exp": round(time.time()) + (60 * 10) # 10 minute expiration + } + token = jwt.encode(payload, METABASE_EMBEDDING_SECRET, algorithm="HS256") + iframeUrl = urljoin(METABASE_SITE_URL, "/embed/dashboard/" + token + "#bordered=true&titled=true") + return f''' + + ''' diff --git a/python/requirements.txt b/python/requirements.txt new file mode 100644 index 0000000..b6c86b6 --- /dev/null +++ b/python/requirements.txt @@ -0,0 +1,2 @@ +Flask==3.0.0 +PyJWT==2.8.0 From 878ce51ccc703212cffeb8a1c0f05c31365e867e Mon Sep 17 00:00:00 2001 From: Alberto Perdomo Date: Wed, 17 Apr 2024 11:35:18 +0100 Subject: [PATCH 2/5] Add instructions to create .venv --- python/README.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/python/README.md b/python/README.md index a6fcc74..a815410 100644 --- a/python/README.md +++ b/python/README.md @@ -24,7 +24,8 @@ This sample code demonstrates using Metabase static embedding in Python using Fl 2. Click on the "Publish" button # Running the sample -1. Activate the virtual environment: `$ source .venv/bin/activate` -2. Install the dependencies: `$ pip install -r requirements.txt` -3. Start the app: `$ flask run -p 9090` -4. Open the app at http://localhost:9090 +1. Create the virtual environment: `$ python3 -m venv .venv` +2. Activate the virtual environment: `$ source .venv/bin/activate` +3. Install the dependencies: `$ pip install -r requirements.txt` +4. Start the app: `$ flask run -p 9090` +5. Open the app at http://localhost:9090 From 3fef807a25659e7cd18aea5ed3eaf2a2216cf5a7 Mon Sep 17 00:00:00 2001 From: Alberto Perdomo Date: Wed, 17 Apr 2024 17:38:18 +0100 Subject: [PATCH 3/5] Use code blocks to get copy/paste functionality Co-authored-by: Mahatthana (Kelvin) Nomsawadi --- python/README.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/python/README.md b/python/README.md index a815410..24ea32d 100644 --- a/python/README.md +++ b/python/README.md @@ -15,9 +15,18 @@ This sample code demonstrates using Metabase static embedding in Python using Fl ## Configure the app -1. Paste the secret key into an env var: `$ export METABASE_EMBEDDING_SECRET="PASTE_SECRET_HERE"` -2. Create an env var pointing to your Metabase site URL, if it's not on http://localhost:3000 `$ export METABASE_SITE_URL="http://localhost:4000"` -3. Create an env var with the ID of the dashboard to embed, if it's not 1: `$ export METABASE_EMBED_DASHBOARD_ID="8"` +1. Paste the secret key into an env var: + ``` + export METABASE_EMBEDDING_SECRET="PASTE_SECRET_HERE" + ``` +2. Create an env var pointing to your Metabase site URL, if it's not on http://localhost:3000 + ``` + export METABASE_SITE_URL="http://localhost:4000" + ``` +3. Create an env var with the ID of the dashboard to embed, if it's not 1: + ``` + export METABASE_EMBED_DASHBOARD_ID="8" + ``` ## Embed the dashboard 1. Go to your dashboard, click on the share/embed button at the top From cb452d7779278cba620ae64a4fb7270b69853bb4 Mon Sep 17 00:00:00 2001 From: Alberto Perdomo Date: Wed, 17 Apr 2024 17:38:41 +0100 Subject: [PATCH 4/5] Use code blocks to get copy/paste functionality Co-authored-by: Mahatthana (Kelvin) Nomsawadi --- python/README.md | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/python/README.md b/python/README.md index 24ea32d..1c79a62 100644 --- a/python/README.md +++ b/python/README.md @@ -33,8 +33,20 @@ This sample code demonstrates using Metabase static embedding in Python using Fl 2. Click on the "Publish" button # Running the sample -1. Create the virtual environment: `$ python3 -m venv .venv` -2. Activate the virtual environment: `$ source .venv/bin/activate` -3. Install the dependencies: `$ pip install -r requirements.txt` -4. Start the app: `$ flask run -p 9090` +1. Create the virtual environment: + ``` + python3 -m venv .venv + ``` +2. Activate the virtual environment: + ``` + source .venv/bin/activate + ``` +3. Install the dependencies: + ``` + pip install -r requirements.txt + ``` +4. Start the app: + ``` + flask run -p 9090 + ``` 5. Open the app at http://localhost:9090 From 6ad776d803877ba4aba5c4d5dca2d17ad1e5f360 Mon Sep 17 00:00:00 2001 From: Alberto Perdomo Date: Wed, 17 Apr 2024 17:40:00 +0100 Subject: [PATCH 5/5] Capitalization of ID Co-authored-by: Mahatthana (Kelvin) Nomsawadi --- python/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/python/README.md b/python/README.md index 1c79a62..41e4219 100644 --- a/python/README.md +++ b/python/README.md @@ -6,7 +6,7 @@ This sample code demonstrates using Metabase static embedding in Python using Fl * Have a running instance of Metabase. If you don't have one * [download the free open source version](https://www.metabase.com/start/oss/) or * [sign up for a free trial of Metabase Cloud](https://www.metabase.com/pricing/). -* A dashboard to embed. If you don't have one, use X-Rays to let Metabase create one for you. Note down the dashboard id. +* A dashboard to embed. If you don't have one, use X-Rays to let Metabase create one for you. Note down the dashboard ID. ## Preparing the embed 1. Sign in to your Metabase instance as an admin.