diff --git a/.changeset/busy-files-invite.md b/.changeset/busy-files-invite.md new file mode 100644 index 0000000000..b72ef50a81 --- /dev/null +++ b/.changeset/busy-files-invite.md @@ -0,0 +1,5 @@ +--- +"gradio": minor +--- + +feat:Fix native plot lite demos diff --git a/demo/bar_plot_demo/run.ipynb b/demo/bar_plot_demo/run.ipynb new file mode 100644 index 0000000000..0131a915ea --- /dev/null +++ b/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} \ No newline at end of file diff --git a/demo/bar_plot_demo/run.py b/demo/bar_plot_demo/run.py new file mode 100644 index 0000000000..ed2509663b --- /dev/null +++ b/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() diff --git a/demo/line_plot_demo/run.ipynb b/demo/line_plot_demo/run.ipynb new file mode 100644 index 0000000000..e368d4b3f6 --- /dev/null +++ b/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} \ No newline at end of file diff --git a/demo/line_plot_demo/run.py b/demo/line_plot_demo/run.py new file mode 100644 index 0000000000..f227c53660 --- /dev/null +++ b/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() diff --git a/demo/scatter_plot_demo/run.ipynb b/demo/scatter_plot_demo/run.ipynb new file mode 100644 index 0000000000..ae93530961 --- /dev/null +++ b/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} \ No newline at end of file diff --git a/demo/scatter_plot_demo/run.py b/demo/scatter_plot_demo/run.py new file mode 100644 index 0000000000..78fa956e94 --- /dev/null +++ b/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() diff --git a/gradio/components/native_plot.py b/gradio/components/native_plot.py index 8414fd68dc..82b8d89791 100644 --- a/gradio/components/native_plot.py +++ b/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: