Fix native plot lite demos (#9160)

* add demos

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/busy-files-invite.md

@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Fix native plot lite demos 

demo/bar_plot_demo/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: bar_plot_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "from random import randint, random\n", "import gradio as gr\n", "\n", "\n", "temp_sensor_data = pd.DataFrame(\n", "    {\n", "        \"time\": pd.date_range(\"2021-01-01\", end=\"2021-01-05\", periods=200),\n", "        \"temperature\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"humidity\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"location\": [\"indoor\", \"outdoor\"] * 100,\n", "    }\n", ")\n", "\n", "food_rating_data = pd.DataFrame(\n", "    {\n", "        \"cuisine\": [[\"Italian\", \"Mexican\", \"Chinese\"][i % 3] for i in range(100)],\n", "        \"rating\": [random() * 4 + 0.5 * (i % 3) for i in range(100)],\n", "        \"price\": [randint(10, 50) + 4 * (i % 3) for i in range(100)],\n", "        \"wait\": [random() for i in range(100)],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as bar_plots:\n", "    with gr.Row():\n", "        start = gr.DateTime(\"2021-01-01 00:00:00\", label=\"Start\")\n", "        end = gr.DateTime(\"2021-01-05 00:00:00\", label=\"End\")\n", "        apply_btn = gr.Button(\"Apply\", scale=0)\n", "    with gr.Row():\n", "        group_by = gr.Radio([\"None\", \"30m\", \"1h\", \"4h\", \"1d\"], value=\"None\", label=\"Group by\")\n", "        aggregate = gr.Radio([\"sum\", \"mean\", \"median\", \"min\", \"max\"], value=\"sum\", label=\"Aggregation\")\n", "\n", "    temp_by_time = gr.BarPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "    )\n", "    temp_by_time_location = gr.BarPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "        color=\"location\",\n", "    )\n", "\n", "    time_graphs = [temp_by_time, temp_by_time_location]\n", "    group_by.change(\n", "        lambda group: [gr.BarPlot(x_bin=None if group == \"None\" else group)] * len(time_graphs),\n", "        group_by,\n", "        time_graphs\n", "    )\n", "    aggregate.change(\n", "        lambda aggregate: [gr.BarPlot(y_aggregate=aggregate)] * len(time_graphs),\n", "        aggregate,\n", "        time_graphs\n", "    )\n", "\n", "    def rescale(select: gr.SelectData):\n", "        return select.index\n", "    rescale_evt = gr.on([plot.select for plot in time_graphs], rescale, None, [start, end])\n", "\n", "    for trigger in [apply_btn.click, rescale_evt.then]:\n", "        trigger(\n", "            lambda start, end: [gr.BarPlot(x_lim=[start, end])] * len(time_graphs), [start, end], time_graphs\n", "        )\n", "\n", "    with gr.Row():\n", "        price_by_cuisine = gr.BarPlot(\n", "            food_rating_data,\n", "            x=\"cuisine\",\n", "            y=\"price\",\n", "        )\n", "        with gr.Column(scale=0):\n", "            gr.Button(\"Sort $ > $$$\").click(lambda: gr.BarPlot(sort=\"y\"), None, price_by_cuisine)\n", "            gr.Button(\"Sort $$$ > $\").click(lambda: gr.BarPlot(sort=\"-y\"), None, price_by_cuisine)\n", "            gr.Button(\"Sort A > Z\").click(lambda: gr.BarPlot(sort=[\"Chinese\", \"Italian\", \"Mexican\"]), None, price_by_cuisine)\n", "\n", "    with gr.Row():\n", "        price_by_rating = gr.BarPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            x_bin=1,\n", "        )\n", "        price_by_rating_color = gr.BarPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"cuisine\",\n", "            x_bin=1,\n", "            color_map={\"Italian\": \"red\", \"Mexican\": \"green\", \"Chinese\": \"blue\"},\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    bar_plots.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/bar_plot_demo/run.py

@@ -0,0 +1,94 @@
+import pandas as pd
+from random import randint, random
+import gradio as gr
+
+
+temp_sensor_data = pd.DataFrame(
+    {
+        "time": pd.date_range("2021-01-01", end="2021-01-05", periods=200),
+        "temperature": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "humidity": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "location": ["indoor", "outdoor"] * 100,
+    }
+)
+
+food_rating_data = pd.DataFrame(
+    {
+        "cuisine": [["Italian", "Mexican", "Chinese"][i % 3] for i in range(100)],
+        "rating": [random() * 4 + 0.5 * (i % 3) for i in range(100)],
+        "price": [randint(10, 50) + 4 * (i % 3) for i in range(100)],
+        "wait": [random() for i in range(100)],
+    }
+)
+
+with gr.Blocks() as bar_plots:
+    with gr.Row():
+        start = gr.DateTime("2021-01-01 00:00:00", label="Start")
+        end = gr.DateTime("2021-01-05 00:00:00", label="End")
+        apply_btn = gr.Button("Apply", scale=0)
+    with gr.Row():
+        group_by = gr.Radio(["None", "30m", "1h", "4h", "1d"], value="None", label="Group by")
+        aggregate = gr.Radio(["sum", "mean", "median", "min", "max"], value="sum", label="Aggregation")
+
+    temp_by_time = gr.BarPlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+    )
+    temp_by_time_location = gr.BarPlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+        color="location",
+    )
+
+    time_graphs = [temp_by_time, temp_by_time_location]
+    group_by.change(
+        lambda group: [gr.BarPlot(x_bin=None if group == "None" else group)] * len(time_graphs),
+        group_by,
+        time_graphs
+    )
+    aggregate.change(
+        lambda aggregate: [gr.BarPlot(y_aggregate=aggregate)] * len(time_graphs),
+        aggregate,
+        time_graphs
+    )
+
+    def rescale(select: gr.SelectData):
+        return select.index
+    rescale_evt = gr.on([plot.select for plot in time_graphs], rescale, None, [start, end])
+
+    for trigger in [apply_btn.click, rescale_evt.then]:
+        trigger(
+            lambda start, end: [gr.BarPlot(x_lim=[start, end])] * len(time_graphs), [start, end], time_graphs
+        )
+
+    with gr.Row():
+        price_by_cuisine = gr.BarPlot(
+            food_rating_data,
+            x="cuisine",
+            y="price",
+        )
+        with gr.Column(scale=0):
+            gr.Button("Sort $ > $$$").click(lambda: gr.BarPlot(sort="y"), None, price_by_cuisine)
+            gr.Button("Sort $$$ > $").click(lambda: gr.BarPlot(sort="-y"), None, price_by_cuisine)
+            gr.Button("Sort A > Z").click(lambda: gr.BarPlot(sort=["Chinese", "Italian", "Mexican"]), None, price_by_cuisine)
+
+    with gr.Row():
+        price_by_rating = gr.BarPlot(
+            food_rating_data,
+            x="rating",
+            y="price",
+            x_bin=1,
+        )
+        price_by_rating_color = gr.BarPlot(
+            food_rating_data,
+            x="rating",
+            y="price",
+            color="cuisine",
+            x_bin=1,
+            color_map={"Italian": "red", "Mexican": "green", "Chinese": "blue"},
+        )
+
+if __name__ == "__main__":
+    bar_plots.launch()

demo/line_plot_demo/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: line_plot_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "from random import randint, random\n", "import gradio as gr\n", "\n", "\n", "temp_sensor_data = pd.DataFrame(\n", "    {\n", "        \"time\": pd.date_range(\"2021-01-01\", end=\"2021-01-05\", periods=200),\n", "        \"temperature\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"humidity\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"location\": [\"indoor\", \"outdoor\"] * 100,\n", "    }\n", ")\n", "\n", "food_rating_data = pd.DataFrame(\n", "    {\n", "        \"cuisine\": [[\"Italian\", \"Mexican\", \"Chinese\"][i % 3] for i in range(100)],\n", "        \"rating\": [random() * 4 + 0.5 * (i % 3) for i in range(100)],\n", "        \"price\": [randint(10, 50) + 4 * (i % 3) for i in range(100)],\n", "        \"wait\": [random() for i in range(100)],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as line_plots:\n", "    with gr.Row():\n", "        start = gr.DateTime(\"2021-01-01 00:00:00\", label=\"Start\")\n", "        end = gr.DateTime(\"2021-01-05 00:00:00\", label=\"End\")\n", "        apply_btn = gr.Button(\"Apply\", scale=0)\n", "    with gr.Row():\n", "        group_by = gr.Radio([\"None\", \"30m\", \"1h\", \"4h\", \"1d\"], value=\"None\", label=\"Group by\")\n", "        aggregate = gr.Radio([\"sum\", \"mean\", \"median\", \"min\", \"max\"], value=\"sum\", label=\"Aggregation\")\n", "\n", "    temp_by_time = gr.LinePlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "    )\n", "    temp_by_time_location = gr.LinePlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "        color=\"location\",\n", "    )\n", "\n", "    time_graphs = [temp_by_time, temp_by_time_location]\n", "    group_by.change(\n", "        lambda group: [gr.LinePlot(x_bin=None if group == \"None\" else group)] * len(time_graphs),\n", "        group_by,\n", "        time_graphs\n", "    )\n", "    aggregate.change(\n", "        lambda aggregate: [gr.LinePlot(y_aggregate=aggregate)] * len(time_graphs),\n", "        aggregate,\n", "        time_graphs\n", "    )\n", "\n", "    def rescale(select: gr.SelectData):\n", "        return select.index\n", "    rescale_evt = gr.on([plot.select for plot in time_graphs], rescale, None, [start, end])\n", "\n", "    for trigger in [apply_btn.click, rescale_evt.then]:\n", "        trigger(\n", "            lambda start, end: [gr.LinePlot(x_lim=[start, end])] * len(time_graphs), [start, end], time_graphs\n", "        )\n", "\n", "    price_by_cuisine = gr.LinePlot(\n", "        food_rating_data,\n", "        x=\"cuisine\",\n", "        y=\"price\",\n", "    )\n", "    with gr.Row():\n", "        price_by_rating = gr.LinePlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "        )\n", "        price_by_rating_color = gr.LinePlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"cuisine\",\n", "            color_map={\"Italian\": \"red\", \"Mexican\": \"green\", \"Chinese\": \"blue\"},\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    line_plots.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/line_plot_demo/run.py

@@ -0,0 +1,86 @@
+import pandas as pd
+from random import randint, random
+import gradio as gr
+
+
+temp_sensor_data = pd.DataFrame(
+    {
+        "time": pd.date_range("2021-01-01", end="2021-01-05", periods=200),
+        "temperature": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "humidity": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "location": ["indoor", "outdoor"] * 100,
+    }
+)
+
+food_rating_data = pd.DataFrame(
+    {
+        "cuisine": [["Italian", "Mexican", "Chinese"][i % 3] for i in range(100)],
+        "rating": [random() * 4 + 0.5 * (i % 3) for i in range(100)],
+        "price": [randint(10, 50) + 4 * (i % 3) for i in range(100)],
+        "wait": [random() for i in range(100)],
+    }
+)
+
+with gr.Blocks() as line_plots:
+    with gr.Row():
+        start = gr.DateTime("2021-01-01 00:00:00", label="Start")
+        end = gr.DateTime("2021-01-05 00:00:00", label="End")
+        apply_btn = gr.Button("Apply", scale=0)
+    with gr.Row():
+        group_by = gr.Radio(["None", "30m", "1h", "4h", "1d"], value="None", label="Group by")
+        aggregate = gr.Radio(["sum", "mean", "median", "min", "max"], value="sum", label="Aggregation")
+
+    temp_by_time = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+    )
+    temp_by_time_location = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+        color="location",
+    )
+
+    time_graphs = [temp_by_time, temp_by_time_location]
+    group_by.change(
+        lambda group: [gr.LinePlot(x_bin=None if group == "None" else group)] * len(time_graphs),
+        group_by,
+        time_graphs
+    )
+    aggregate.change(
+        lambda aggregate: [gr.LinePlot(y_aggregate=aggregate)] * len(time_graphs),
+        aggregate,
+        time_graphs
+    )
+
+    def rescale(select: gr.SelectData):
+        return select.index
+    rescale_evt = gr.on([plot.select for plot in time_graphs], rescale, None, [start, end])
+
+    for trigger in [apply_btn.click, rescale_evt.then]:
+        trigger(
+            lambda start, end: [gr.LinePlot(x_lim=[start, end])] * len(time_graphs), [start, end], time_graphs
+        )
+
+    price_by_cuisine = gr.LinePlot(
+        food_rating_data,
+        x="cuisine",
+        y="price",
+    )
+    with gr.Row():
+        price_by_rating = gr.LinePlot(
+            food_rating_data,
+            x="rating",
+            y="price",
+        )
+        price_by_rating_color = gr.LinePlot(
+            food_rating_data,
+            x="rating",
+            y="price",
+            color="cuisine",
+            color_map={"Italian": "red", "Mexican": "green", "Chinese": "blue"},
+        )
+
+if __name__ == "__main__":
+    line_plots.launch()

demo/scatter_plot_demo/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: scatter_plot_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "from random import randint, random\n", "import gradio as gr\n", "\n", "\n", "temp_sensor_data = pd.DataFrame(\n", "    {\n", "        \"time\": pd.date_range(\"2021-01-01\", end=\"2021-01-05\", periods=200),\n", "        \"temperature\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"humidity\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"location\": [\"indoor\", \"outdoor\"] * 100,\n", "    }\n", ")\n", "\n", "food_rating_data = pd.DataFrame(\n", "    {\n", "        \"cuisine\": [[\"Italian\", \"Mexican\", \"Chinese\"][i % 3] for i in range(100)],\n", "        \"rating\": [random() * 4 + 0.5 * (i % 3) for i in range(100)],\n", "        \"price\": [randint(10, 50) + 4 * (i % 3) for i in range(100)],\n", "        \"wait\": [random() for i in range(100)],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as scatter_plots:\n", "    with gr.Row():\n", "        start = gr.DateTime(\"2021-01-01 00:00:00\", label=\"Start\")\n", "        end = gr.DateTime(\"2021-01-05 00:00:00\", label=\"End\")\n", "        apply_btn = gr.Button(\"Apply\", scale=0)\n", "    with gr.Row():\n", "        group_by = gr.Radio([\"None\", \"30m\", \"1h\", \"4h\", \"1d\"], value=\"None\", label=\"Group by\")\n", "        aggregate = gr.Radio([\"sum\", \"mean\", \"median\", \"min\", \"max\"], value=\"sum\", label=\"Aggregation\")\n", "\n", "    temp_by_time = gr.ScatterPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "    )\n", "    temp_by_time_location = gr.ScatterPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "        color=\"location\",\n", "    )\n", "\n", "    time_graphs = [temp_by_time, temp_by_time_location]\n", "    group_by.change(\n", "        lambda group: [gr.ScatterPlot(x_bin=None if group == \"None\" else group)] * len(time_graphs),\n", "        group_by,\n", "        time_graphs\n", "    )\n", "    aggregate.change(\n", "        lambda aggregate: [gr.ScatterPlot(y_aggregate=aggregate)] * len(time_graphs),\n", "        aggregate,\n", "        time_graphs\n", "    )\n", "\n", "    price_by_cuisine = gr.ScatterPlot(\n", "        food_rating_data,\n", "        x=\"cuisine\",\n", "        y=\"price\",\n", "    )\n", "    with gr.Row():\n", "        price_by_rating = gr.ScatterPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"wait\",\n", "            show_actions_button=True,\n", "        )\n", "        price_by_rating_color = gr.ScatterPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"cuisine\",\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    scatter_plots.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/scatter_plot_demo/run.py

@@ -0,0 +1,78 @@
+import pandas as pd
+from random import randint, random
+import gradio as gr
+
+
+temp_sensor_data = pd.DataFrame(
+    {
+        "time": pd.date_range("2021-01-01", end="2021-01-05", periods=200),
+        "temperature": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "humidity": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "location": ["indoor", "outdoor"] * 100,
+    }
+)
+
+food_rating_data = pd.DataFrame(
+    {
+        "cuisine": [["Italian", "Mexican", "Chinese"][i % 3] for i in range(100)],
+        "rating": [random() * 4 + 0.5 * (i % 3) for i in range(100)],
+        "price": [randint(10, 50) + 4 * (i % 3) for i in range(100)],
+        "wait": [random() for i in range(100)],
+    }
+)
+
+with gr.Blocks() as scatter_plots:
+    with gr.Row():
+        start = gr.DateTime("2021-01-01 00:00:00", label="Start")
+        end = gr.DateTime("2021-01-05 00:00:00", label="End")
+        apply_btn = gr.Button("Apply", scale=0)
+    with gr.Row():
+        group_by = gr.Radio(["None", "30m", "1h", "4h", "1d"], value="None", label="Group by")
+        aggregate = gr.Radio(["sum", "mean", "median", "min", "max"], value="sum", label="Aggregation")
+
+    temp_by_time = gr.ScatterPlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+    )
+    temp_by_time_location = gr.ScatterPlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+        color="location",
+    )
+
+    time_graphs = [temp_by_time, temp_by_time_location]
+    group_by.change(
+        lambda group: [gr.ScatterPlot(x_bin=None if group == "None" else group)] * len(time_graphs),
+        group_by,
+        time_graphs
+    )
+    aggregate.change(
+        lambda aggregate: [gr.ScatterPlot(y_aggregate=aggregate)] * len(time_graphs),
+        aggregate,
+        time_graphs
+    )
+
+    price_by_cuisine = gr.ScatterPlot(
+        food_rating_data,
+        x="cuisine",
+        y="price",
+    )
+    with gr.Row():
+        price_by_rating = gr.ScatterPlot(
+            food_rating_data,
+            x="rating",
+            y="price",
+            color="wait",
+            show_actions_button=True,
+        )
+        price_by_rating_color = gr.ScatterPlot(
+            food_rating_data,
+            x="rating",
+            y="price",
+            color="cuisine",
+        )
+
+if __name__ == "__main__":
+    scatter_plots.launch()

gradio/components/native_plot.py

@@ -229,7 +229,7 @@ class BarPlot(NativePlot):
     """
     Creates a bar plot component to display data from a pandas DataFrame.
 
-    Demos: native_plots
+    Demos: bar_plot_demo
     """
 
     def get_block_name(self) -> str:
@@ -244,7 +244,7 @@ class LinePlot(NativePlot):
     """
     Creates a line plot component to display data from a pandas DataFrame.
 
-    Demos: native_plots
+    Demos: line_plot_demo
     """
 
     def get_block_name(self) -> str:
@@ -259,7 +259,7 @@ class ScatterPlot(NativePlot):
     """
     Creates a scatter plot component to display data from a pandas DataFrame.
 
-    Demos: native_plots
+    Demos: scatter_plot_demo
     """
 
     def get_block_name(self) -> str: