Repository: gradio-app/gradio
Pull request: Supabase Guide
Adds a Guide on how to use Gradio with Supabase (Closes: #3256)

Problem statement:
New data source guide featuring Supabase and `gr.Barplot`
Given that we now have a native `gr.Barplot` component, it would be nice to write a Guide featuring this component. One interesting use case to the open-source community might be setting up Gradio with a Supabase database and plotting the data in a real-time `gr.Barplot`

Hints from issue discussion:

Commit message: added images

Patch to review:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ed194214d..3285e8d916 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,9 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3297](https://git
 ## Documentation Changes:
 - Added the `types` field to the dependency field in the config by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3315](https://github.com/gradio-app/gradio/pull/3315) 
 - Gradio Status Page by [@aliabd](https://github.com/aliabd) in [PR 3331](https://github.com/gradio-app/gradio/pull/3331)
+- Adds a Guide on setting up a dashboard from Supabase data using the `gr.BarPlot` 
+component by [@abidlabs](https://github.com/abidlabs) in [PR 3275](https://github.com/gradio-app/gradio/pull/3275)
+
 
 ## Testing and Infrastructure Changes:
 - Adds a script to benchmark the performance of the queue and adds some instructions on how to use it. By [@freddyaboulton](https://github.com/freddyaboulton) and [@abidlabs](https://github.com/abidlabs) in [PR 3272](https://github.com/gradio-app/gradio/pull/3272)
diff --git a/guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md b/guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
new file mode 100644
index 0000000000..2338f4af2a
--- /dev/null
+++ b/guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
@@ -0,0 +1,122 @@
+# Creating a Dashboard from Supabase Data
+
+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, we will show you how to read data from Supabase plot it in **real-time** on a Gradio Dashboard.
+
+**Prerequisites:** To start, you will need to have a free Supabase account, which you can sign up for here: https://app.supabase.com/
+
+We'll cover the following steps in this end-to-end Guide:
+
+* Creating tables in Supabase
+* Writing data to Supabase using the Supabase Python Client
+* Visualize the data in a real-time dashboard using Gradio
+
+If you already have data on Supabase that you'd like to visualize in a dashboard, you can skip sections and first two sections and go directly to [visualizing the data]()!
+
+## Creating a table in Supabase
+
+First of all, we need some data to visualize. Following this [excellent guide](https://supabase.com/blog/loading-data-supabase-python), we'll create some fake commerce data and put it in Supabase. 
+
+1. We'll 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:
+
+<center>
+<table>
+<tr><td>product_id</td><td>int8</td></tr>
+<tr><td>inventory_count</td><td>int8</td></tr>
+<tr><td>price</td><td>float8</td></tr>
+<tr><td>product_name</td><td>varchar</td></tr>
+</table>
+</center>
+
+5. Click Save to save the table. Our schema is now ready!
+
+
+## Writing data to Supabase
+
+The next step is to write data to a Supabase dataset. We will use the Supabase Python library to do this. 
+
+6. Start by installing `supabase`, typically by running in your terminal:
+
+```bash
+pip install supabase
+```
+
+7. You'll also need the URL and API key for your project. You can find these in the Settings (gear icon on the left pane) > 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): 
+
+```python
+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()
+```
+
+If you go back to your Supabase dashboard and refresh the page, you should now see 10 rows populated in the `Product` table!
+
+## Visualizing the Data in a Real-Time Gradio Dashboard
+
+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:
+
+
+```python
+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:
+
+```python
+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()
+```
+
+Your final dashboard should look something like this:
+
+![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/product-plots.png)
+
+
+## Conclusion
+
+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. Of course, we can add other kinds of plots and visualizations to build a more complex dashboard as well.
\ No newline at end of file


Code review comments:
diff_hunk: @@ -0,0 +1,122 @@
+# Creating a Dashboard from Supabase Data
+
+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, we will show you how to read data from Supabase plot it in **real-time** on a Gradio Dashboard.
+
+**Prerequisites:** To start, you will need to have a free Supabase account, which you can sign up for here: https://app.supabase.com/
+
+We'll cover the following steps in this end-to-end Guide:
+
+* Creating tables in Supabase
+* Writing data to Supabase using the Supabase Python Client
+* Visualize the data in a real-time dashboard using Gradio
+
+If you already have data on Supabase that you'd like to visualize in a dashboard, you can skip sections and first two sections and go directly to [visualizing the data]()!
path: guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
text: @user1:
This can be more direct if we update the mood:

> If you already have data on Supabase that you'd like to visualize in a dashboard, you can skip the first two sections and [visualize the data]()!

diff_hunk: @@ -0,0 +1,122 @@
+# Creating a Dashboard from Supabase Data
+
+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, we will show you how to read data from Supabase plot it in **real-time** on a Gradio Dashboard.
+
+**Prerequisites:** To start, you will need to have a free Supabase account, which you can sign up for here: https://app.supabase.com/
+
+We'll cover the following steps in this end-to-end Guide:
+
+* Creating tables in Supabase
+* Writing data to Supabase using the Supabase Python Client
+* Visualize the data in a real-time dashboard using Gradio
+
+If you already have data on Supabase that you'd like to visualize in a dashboard, you can skip sections and first two sections and go directly to [visualizing the data]()!
+
+## Creating a table in Supabase
+
+First of all, we need some data to visualize. Following this [excellent guide](https://supabase.com/blog/loading-data-supabase-python), we'll create some fake commerce data and put it in Supabase. 
path: guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
text: @user1:
"some:" is unnecessary

```suggestion
First of all, we need some data to visualize. Following this [excellent guide](https://supabase.com/blog/loading-data-supabase-python), we'll create fake commerce data and put it in Supabase. 
```

diff_hunk: @@ -0,0 +1,122 @@
+# Creating a Dashboard from Supabase Data
+
+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, we will show you how to read data from Supabase plot it in **real-time** on a Gradio Dashboard.
+
+**Prerequisites:** To start, you will need to have a free Supabase account, which you can sign up for here: https://app.supabase.com/
+
+We'll cover the following steps in this end-to-end Guide:
+
+* Creating tables in Supabase
+* Writing data to Supabase using the Supabase Python Client
+* Visualize the data in a real-time dashboard using Gradio
+
+If you already have data on Supabase that you'd like to visualize in a dashboard, you can skip sections and first two sections and go directly to [visualizing the data]()!
+
+## Creating a table in Supabase
+
+First of all, we need some data to visualize. Following this [excellent guide](https://supabase.com/blog/loading-data-supabase-python), we'll create some fake commerce data and put it in Supabase. 
+
+1. We'll start by creating a new project in Supabase. Once you're logged in, click the "New Project" button
path: guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
text: @user1:
This isn't consistent with the other bullets 'Give', 'Click'. I actually think we can clean this up without it sounding impersonal by moving the "To start with..." out of the bullet:"

```markdown
We'll start by creating a new project in Supabase.

1. Log in and click the 'New Project' button
2. Give your project a name and database password. You can also choose a pricing plan (the free tier is sufficient for our purposes!)
   - You'll be presented with your API keys while the database spins up (can take up to 2 minutes). 
3. Click on "Table Editor" (the table icon) in the left pane to create a new table. Create a single table called `Product`, with the following schema:
```

Pulling the asides out of the numbered steps and moving the 'intro' text out of the bullet list adds clarity and makes the instructions more impactful/ direct.

diff_hunk: @@ -0,0 +1,122 @@
+# Creating a Dashboard from Supabase Data
+
+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, we will show you how to read data from Supabase plot it in **real-time** on a Gradio Dashboard.
+
+**Prerequisites:** To start, you will need to have a free Supabase account, which you can sign up for here: https://app.supabase.com/
+
+We'll cover the following steps in this end-to-end Guide:
+
+* Creating tables in Supabase
+* Writing data to Supabase using the Supabase Python Client
+* Visualize the data in a real-time dashboard using Gradio
+
+If you already have data on Supabase that you'd like to visualize in a dashboard, you can skip sections and first two sections and go directly to [visualizing the data]()!
+
+## Creating a table in Supabase
+
+First of all, we need some data to visualize. Following this [excellent guide](https://supabase.com/blog/loading-data-supabase-python), we'll create some fake commerce data and put it in Supabase. 
+
+1. We'll 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:
+
+<center>
+<table>
+<tr><td>product_id</td><td>int8</td></tr>
+<tr><td>inventory_count</td><td>int8</td></tr>
+<tr><td>price</td><td>float8</td></tr>
+<tr><td>product_name</td><td>varchar</td></tr>
+</table>
+</center>
+
+5. Click Save to save the table. Our schema is now ready!
+
+
+## Writing data to Supabase
+
+The next step is to write data to a Supabase dataset. We will use the Supabase Python library to do this. 
+
+6. Start by installing `supabase`, typically by running in your terminal:
path: guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
text: @user1:
This feels a little vague, i think we can add a link to installation instructions if we think this might not work for everyone.

```suggestion
6. Install `supabase` by running the following command in your terminal:
```

diff_hunk: @@ -0,0 +1,122 @@
+# Creating a Dashboard from Supabase Data
+
+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, we will show you how to read data from Supabase plot it in **real-time** on a Gradio Dashboard.
+
+**Prerequisites:** To start, you will need to have a free Supabase account, which you can sign up for here: https://app.supabase.com/
+
+We'll cover the following steps in this end-to-end Guide:
+
+* Creating tables in Supabase
+* Writing data to Supabase using the Supabase Python Client
+* Visualize the data in a real-time dashboard using Gradio
+
+If you already have data on Supabase that you'd like to visualize in a dashboard, you can skip sections and first two sections and go directly to [visualizing the data]()!
path: guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
text: @user1:
* typo:
> you can skip sections and first two sections and go 

you can skip ~sections and~ *the first two sections and go 

* change 
> [visualizing the data]()

to `[visualizing the data](#visualizing-the-data-in-a-real-time-gradio-dashboard)`

diff_hunk: @@ -0,0 +1,122 @@
+# Creating a Dashboard from Supabase Data
+
+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, we will show you how to read data from Supabase plot it in **real-time** on a Gradio Dashboard.
path: guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
text: @user1:
maybe add a link to supabase.com? 

typo:
> data from Supabase plot it in

data from Supabase *and plot it in

diff_hunk: @@ -0,0 +1,122 @@
+# Creating a Dashboard from Supabase Data
+
+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, we will show you how to read data from Supabase plot it in **real-time** on a Gradio Dashboard.
+
+**Prerequisites:** To start, you will need to have a free Supabase account, which you can sign up for here: https://app.supabase.com/
path: guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
text: @user1:
make the link clickable 
`[https://app.supabase.com/](https://app.supabase.com/)`

diff_hunk: @@ -0,0 +1,122 @@
+# Creating a Dashboard from Supabase Data
+
+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, we will show you how to read data from Supabase plot it in **real-time** on a Gradio Dashboard.
+
+**Prerequisites:** To start, you will need to have a free Supabase account, which you can sign up for here: https://app.supabase.com/
+
+We'll cover the following steps in this end-to-end Guide:
+
+* Creating tables in Supabase
+* Writing data to Supabase using the Supabase Python Client
+* Visualize the data in a real-time dashboard using Gradio
+
+If you already have data on Supabase that you'd like to visualize in a dashboard, you can skip sections and first two sections and go directly to [visualizing the data]()!
+
+## Creating a table in Supabase
+
+First of all, we need some data to visualize. Following this [excellent guide](https://supabase.com/blog/loading-data-supabase-python), we'll create some fake commerce data and put it in Supabase. 
+
+1. We'll start by creating a new project in Supabase. Once you're logged in, click the "New Project" button
path: guides/05_tabular-data-science-and-plots/creating-a-dashboard-from-supabase-data.md
text: @user1:
There's a numbering issue when the markdown gets rendered in html. You have to indent the sections in between. 

<img width="994" alt="Screen Shot 2023-03-01 at 12 11 43 AM" src="https://user-images.githubusercontent.com/9021060/222082090-373791ad-04f6-49f1-b21f-16e9b3672d5f.png">


<img width="1001" alt="Screen Shot 2023-03-01 at 12 11 29 AM" src="https://user-images.githubusercontent.com/9021060/222081861-6e6335fe-ecf6-4574-907e-e32308d9d59c.png">

To fix the above 
```
...table called `Product`, with the following schema:

<center>
<table>
<tr><td>product_id</td><td>int8</td></tr>
<tr><td>inventory_count</td><td>int8</td></tr>
<tr><td>price</td><td>float8</td></tr>
<tr><td>product_name</td><td>varchar</td></tr>
</table>
</center>

5. Click Save to save...
``` 

should be 

```
...table called `Product`, with the following schema:

    <center>
    <table>
    <tr><td>product_id</td><td>int8</td></tr>
    <tr><td>inventory_count</td><td>int8</td></tr>
    <tr><td>price</td><td>float8</td></tr>
    <tr><td>product_name</td><td>varchar</td></tr>
    </table>
    </center>
    
5. Click Save to save...
```

And same for the code.  


But I see you want to connect all the numbers together in the guide, instead of how it's rendering now, which restarts the count in every section

<img width="667" alt="Screen Shot 2023-03-01 at 12 20 05 AM" src="https://user-images.githubusercontent.com/9021060/222083192-2cdd96f2-cf9d-44ac-9616-384d5d279439.png">

If you actually wanna connect the numbers so it's 1 -> 10 just add a backslash before the period in every number: 

```
1\. 
2\.
3\.
```
You don't need indent anymore in this case.