Loading...
Tags: TABULAR, DASHBOARD, PLOTS
Supabase is a cloud-based open-source backend that provides a PostgreSQL database, authentication, and other useful features for building web and mobile applications. In this tutorial, you will learn how to read data from Supabase and plot it in real-time on a Gradio Dashboard.
Prerequisites: To start, you will need a free Supabase account, which you can sign up for here: https://app.supabase.com/
In this end-to-end guide, you will learn how to:
If you already have data on Supabase that you’d like to visualize in a dashboard, you can skip the first two sections and go directly to visualizing the data!
First of all, we need some data to visualize. Following this excellent guide, we’ll create fake commerce data and put it in Supabase.
1. Start by creating a new project in Supabase. Once you’re logged in, click the “New Project” button
2. Give your project a name and database password. You can also choose a pricing plan (for our purposes, the Free Tier is sufficient!)
3. You’ll be presented with your API keys while the database spins up (can take up to 2 minutes).
4. Click on “Table Editor” (the table icon) in the left pane to create a new table. We’ll create a single table called Product
, with the following schema:
product_id | int8 |
inventory_count | int8 |
price | float8 |
product_name | varchar |
5. Click Save to save the table schema.
Our table is now ready!
The next step is to write data to a Supabase dataset. We will use the Supabase Python library to do this.
6. Install supabase
by running the following command in your terminal:
pip install supabase
7. Get your project URL and API key. Click the Settings (gear icon) on the left pane and click ‘API’. The URL is listed in the Project URL box, while the API key is listed in Project API keys (with the tags service_role
, secret
)
8. Now, run the following Python script to write some fake data to the table (note you have to put the values of SUPABASE_URL
and SUPABASE_SECRET_KEY
from step 7):
import supabase
# Initialize the Supabase client
client = supabase.create_client('SUPABASE_URL', 'SUPABASE_SECRET_KEY')
# Define the data to write
import random
main_list = []
for i in range(10):
value = {'product_id': i,
'product_name': f"Item {i}",
'inventory_count': random.randint(1, 100),
'price': random.random()*100
}
main_list.append(value)
# Write the data to the table
data = client.table('Product').insert(main_list).execute()
Return to your Supabase dashboard and refresh the page, you should now see 10 rows populated in the Product
table!
Finally, we will read the data from the Supabase dataset using the same supabase
Python library and create a realtime dashboard using gradio
.
Note: We repeat certain steps in this section (like creating the Supabase client) in case you did not go through the previous sections. As described in Step 7, you will need the project URL and API Key for your database.
9. Write a function that loads the data from the Product
table and returns it as a pandas Dataframe:
import supabase
import pandas as pd
client = supabase.create_client('SUPABASE_URL', 'SUPABASE_SECRET_KEY')
def read_data():
response = client.table('Product').select("*").execute()
df = pd.DataFrame(response.data)
return df
10. Create a small Gradio Dashboard with 2 Barplots that plots the prices and inventories of all of the items every minute and updates in real-time:
import gradio as gr
with gr.Blocks() as dashboard:
with gr.Row():
gr.BarPlot(read_data, x="product_id", y="price", title="Prices", every=60)
gr.BarPlot(read_data, x="product_id", y="inventory_count", title="Inventory", every=60)
dashboard.queue().launch()
Notice that by passing in a function to gr.BarPlot()
, we have the BarPlot query the database as soon as the web app loads (and then again every 60 seconds because of the every
parameter). Your final dashboard should look something like this:
That’s it! In this tutorial, you learned how to write data to a Supabase dataset, and then read that data and plot the results as bar plots. If you update the data in the Supabase database, you’ll notice that the Gradio dashboard will update within a minute.
Try adding more plots and visualizations to this example (or with a different dataset) to build a more complex dashboard!