mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-25 12:10:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve plot rendering (#5642)

Browse Source 
* changes

* add changeset

* changes

* changes

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com>
This commit is contained in:
aliabid94 2023-09-22 08:32:49 -07:00 committed by GitHub
parent d76555a122
commit 21c7225bda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/eleven-kings-knock.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/plot": minor
"gradio": minor
---
feat:Improve plot rendering

2
demo/dashboard/run.ipynb
View File

@ -1 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: dashboard\n", "### This demo shows how you can build an interactive dashboard with gradio. Click on a python library on the left hand side and then on the right hand side click on the metric you'd like to see plot over time. Data is pulled from HuggingFace Hub datasets.\n", " "]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/dashboard/helpers.py"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import plotly.express as px\n", "from helpers import *\n", "\n", "\n", "LIBRARIES = [\"accelerate\", \"datasets\", \"diffusers\", \"evaluate\", \"gradio\", \"hub_docs\",\n", " \"huggingface_hub\", \"optimum\", \"pytorch_image_models\", \"tokenizers\", \"transformers\"]\n", "\n", "\n", "def create_pip_plot(libraries, pip_choices):\n", " if \"Pip\" not in pip_choices:\n", " return gr.Plot(visible=False)\n", " output = retrieve_pip_installs(libraries, \"Cumulated\" in pip_choices)\n", " df = pd.DataFrame(output).melt(id_vars=\"day\")\n", " plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", " title=\"Pip installs\")\n", " plot.update_layout(legend=dict(x=0.5, y=0.99), title_x=0.5, legend_title_text=\"\")\n", " return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "def create_star_plot(libraries, star_choices):\n", " if \"Stars\" not in star_choices:\n", " return gr.Plot(visible=False)\n", " output = retrieve_stars(libraries, \"Week over Week\" in star_choices)\n", " df = pd.DataFrame(output).melt(id_vars=\"day\")\n", " plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", " title=\"Number of stargazers\")\n", " plot.update_layout(legend=dict(x=0.5, y=0.99), title_x=0.5, legend_title_text=\"\")\n", " return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "def create_issue_plot(libraries, issue_choices):\n", " if \"Issue\" not in issue_choices:\n", " return gr.Plot(visible=False)\n", " output = retrieve_issues(libraries,\n", " exclude_org_members=\"Exclude org members\" in issue_choices,\n", " week_over_week=\"Week over Week\" in issue_choices)\n", " df = pd.DataFrame(output).melt(id_vars=\"day\")\n", " plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", " title=\"Cumulated number of issues, PRs, and comments\",\n", " )\n", " plot.update_layout(legend=dict(x=0.5, y=0.99), title_x=0.5, legend_title_text=\"\")\n", " return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "with gr.Blocks() as demo:\n", " with gr.Row():\n", " with gr.Column():\n", " gr.Markdown(\"## Select libraries to display\")\n", " libraries = gr.CheckboxGroup(choices=LIBRARIES, label=\"\")\n", " with gr.Column():\n", " gr.Markdown(\"## Select graphs to display\")\n", " pip = gr.CheckboxGroup(choices=[\"Pip\", \"Cumulated\"], label=\"\")\n", " stars = gr.CheckboxGroup(choices=[\"Stars\", \"Week over Week\"], label=\"\")\n", " issues = gr.CheckboxGroup(choices=[\"Issue\", \"Exclude org members\", \"week over week\"], label=\"\")\n", " with gr.Row():\n", " fetch = gr.Button(value=\"Fetch\")\n", " with gr.Row():\n", " with gr.Column():\n", " pip_plot = gr.Plot(visible=False)\n", " star_plot = gr.Plot(visible=False)\n", " issue_plot = gr.Plot(visible=False)\n", "\n", " fetch.click(create_pip_plot, inputs=[libraries, pip], outputs=pip_plot)\n", " fetch.click(create_star_plot, inputs=[libraries, stars], outputs=star_plot)\n", " fetch.click(create_issue_plot, inputs=[libraries, issues], outputs=issue_plot)\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: dashboard\n", "### This demo shows how you can build an interactive dashboard with gradio. Click on a python library on the left hand side and then on the right hand side click on the metric you'd like to see plot over time. Data is pulled from HuggingFace Hub datasets.\n", " "]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/dashboard/helpers.py"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import plotly.express as px\n", "from helpers import *\n", "\n", "\n", "LIBRARIES = [\"accelerate\", \"datasets\", \"diffusers\", \"evaluate\", \"gradio\", \"hub_docs\",\n", " \"huggingface_hub\", \"optimum\", \"pytorch_image_models\", \"tokenizers\", \"transformers\"]\n", "\n", "\n", "def create_pip_plot(libraries, pip_choices):\n", " if \"Pip\" not in pip_choices:\n", " return gr.Plot(visible=False)\n", " output = retrieve_pip_installs(libraries, \"Cumulated\" in pip_choices)\n", " df = pd.DataFrame(output).melt(id_vars=\"day\")\n", " plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", " title=\"Pip installs\")\n", " plot.update_layout(legend=dict(x=0.5, y=0.99), title_x=0.5, legend_title_text=\"\")\n", " return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "def create_star_plot(libraries, star_choices):\n", " if \"Stars\" not in star_choices:\n", " return gr.Plot(visible=False)\n", " output = retrieve_stars(libraries, \"Week over Week\" in star_choices)\n", " df = pd.DataFrame(output).melt(id_vars=\"day\")\n", " plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", " title=\"Number of stargazers\")\n", " plot.update_layout(legend=dict(x=0.5, y=0.99), title_x=0.5, legend_title_text=\"\")\n", " return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "def create_issue_plot(libraries, issue_choices):\n", " if \"Issue\" not in issue_choices:\n", " return gr.Plot(visible=False)\n", " output = retrieve_issues(libraries,\n", " exclude_org_members=\"Exclude org members\" in issue_choices,\n", " week_over_week=\"Week over Week\" in issue_choices)\n", " df = pd.DataFrame(output).melt(id_vars=\"day\")\n", " plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", " title=\"Cumulated number of issues, PRs, and comments\",\n", " )\n", " plot.update_layout(legend=dict(x=0.5, y=0.99), title_x=0.5, legend_title_text=\"\")\n", " return gr.Plot(value=plot, visible=True)\n", "\n", "\n", "with gr.Blocks() as demo:\n", " with gr.Row():\n", " with gr.Column():\n", " gr.Markdown(\"## Select libraries to display\")\n", " libraries = gr.CheckboxGroup(choices=LIBRARIES, show_label=False)\n", " with gr.Column():\n", " gr.Markdown(\"## Select graphs to display\")\n", " pip = gr.CheckboxGroup(choices=[\"Pip\", \"Cumulated\"], show_label=False)\n", " stars = gr.CheckboxGroup(choices=[\"Stars\", \"Week over Week\"], show_label=False)\n", " issues = gr.CheckboxGroup(choices=[\"Issue\", \"Exclude org members\", \"week over week\"], show_label=False)\n", " with gr.Row():\n", " fetch = gr.Button(value=\"Fetch\")\n", " with gr.Row():\n", " with gr.Column():\n", " pip_plot = gr.Plot(visible=False)\n", " star_plot = gr.Plot(visible=False)\n", " issue_plot = gr.Plot(visible=False)\n", "\n", " fetch.click(create_pip_plot, inputs=[libraries, pip], outputs=pip_plot)\n", " fetch.click(create_star_plot, inputs=[libraries, stars], outputs=star_plot)\n", " fetch.click(create_issue_plot, inputs=[libraries, issues], outputs=issue_plot)\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

8
demo/dashboard/run.py
View File

@ -48,12 +48,12 @@ with gr.Blocks() as demo:
with gr.Row():
with gr.Column():
gr.Markdown("## Select libraries to display")
libraries = gr.CheckboxGroup(choices=LIBRARIES, label="")
libraries = gr.CheckboxGroup(choices=LIBRARIES, show_label=False)
with gr.Column():
gr.Markdown("## Select graphs to display")
pip = gr.CheckboxGroup(choices=["Pip", "Cumulated"], label="")
stars = gr.CheckboxGroup(choices=["Stars", "Week over Week"], label="")
issues = gr.CheckboxGroup(choices=["Issue", "Exclude org members", "week over week"], label="")
pip = gr.CheckboxGroup(choices=["Pip", "Cumulated"], show_label=False)
stars = gr.CheckboxGroup(choices=["Stars", "Week over Week"], show_label=False)
issues = gr.CheckboxGroup(choices=["Issue", "Exclude org members", "week over week"], show_label=False)
with gr.Row():
fetch = gr.Button(value="Fetch")
with gr.Row():

2
demo/native_plots/bar_plot_demo.py
View File

@ -106,6 +106,6 @@ with gr.Blocks() as bar_plot:
label="Type of Bar Plot"
)
with gr.Column():
plot = gr.BarPlot(show_label=False)
plot = gr.BarPlot(show_label=False, show_actions_button=True)
display.change(bar_plot_fn, inputs=display, outputs=plot)
bar_plot.load(fn=bar_plot_fn, inputs=display, outputs=plot)

2
demo/native_plots/line_plot_demo.py
View File

@ -85,7 +85,7 @@ with gr.Blocks() as line_plot:
value="stocks",
)
with gr.Column():
plot = gr.LinePlot(show_label=False, container=False)
plot = gr.LinePlot()
dataset.change(line_plot_fn, inputs=dataset, outputs=plot)
line_plot.load(fn=line_plot_fn, inputs=dataset, outputs=plot)

3
gradio/components/bar_plot.py
View File

@ -70,6 +70,7 @@ class BarPlot(Plot):
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,
sort: Literal["x", "y", "-x", "-y"] | None = None,
show_actions_button: bool = False,
**kwargs,
):
"""
@ -101,6 +102,7 @@ class BarPlot(Plot):
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
sort: Specifies the sorting axis as either "x", "y", "-x" or "-y". If None, no sorting is applied.
show_actions_button: Whether to show the actions button on the top right corner of the plot.
"""
self.x = x
self.y = y
@ -123,6 +125,7 @@ class BarPlot(Plot):
self.width = width
self.height = height
self.sort = sort
self.show_actions_button = show_actions_button
super().__init__(
value=value,
label=label,

3
gradio/components/line_plot.py
View File

@ -82,6 +82,7 @@ class LinePlot(Plot):
visible: bool = True,
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,
show_actions_button: bool = False,
**kwargs,
):
"""
@ -114,6 +115,7 @@ class LinePlot(Plot):
visible: Whether the plot should be visible.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
show_actions_button: Whether to show the actions button on the top right corner of the plot.
"""
self.x = x
self.y = y
@ -136,6 +138,7 @@ class LinePlot(Plot):
self.interactive_chart = interactive
self.width = width
self.height = height
self.show_actions_button = show_actions_button
super().__init__(
value=value,
label=label,

3
gradio/components/scatter_plot.py
View File

@ -97,6 +97,7 @@ class ScatterPlot(Plot):
visible: bool = True,
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,
show_actions_button: bool = False,
**kwargs,
):
"""
@ -131,6 +132,7 @@ class ScatterPlot(Plot):
visible: Whether the plot should be visible.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
show_actions_button: Whether to show the actions button on the top right corner of the plot.
"""
self.x = x
self.y = y
@ -155,6 +157,7 @@ class ScatterPlot(Plot):
self.height = height
self.x_lim = x_lim
self.y_lim = y_lim
self.show_actions_button = show_actions_button
super().__init__(
value=value,
label=label,

14
js/plot/static/Plot.svelte
View File

@ -17,6 +17,7 @@
export let theme_mode: ThemeMode;
export let caption: string;
export let bokeh_version: string | null;
export let show_actions_button: bool;
const divId = `bokehDiv-${Math.random().toString(5).substring(2)}`;
function get_color(index: number): string {
@ -192,7 +193,7 @@
<div data-testid={"bokeh"} id={divId} class="gradio-bokeh" />
{:else if type == "altair"}
<div data-testid={"altair"} class="altair layout">
<Vega {spec} />
<Vega {spec} options={{ actions: show_actions_button }} />
{#if caption}
<div class="caption layout">
{caption}
@ -208,6 +209,16 @@
{/if}
<style>
.altair :global(canvas) {
max-width: 100%;
padding: 6px;
}
.altair :global(.vega-embed) {
padding: 0px !important;
}
.altair :global(.vega-actions) {
right: 0px !important;
}
.gradio-bokeh {
display: flex;
justify-content: center;
@ -233,6 +244,7 @@
.caption {
font-size: var(--text-sm);
margin-bottom: 6px;
}
.matplotlib img {

3
js/plot/static/StaticPlot.svelte
View File

@ -27,6 +27,7 @@
export let gradio: Gradio<{
change: never;
}>;
export let show_actions_button = false;
</script>
<Block
@ -37,6 +38,7 @@
{container}
{scale}
{min_width}
allow_overflow={false}
>
<BlockLabel {show_label} label={label || $_("plot.plot")} Icon={PlotIcon} />
<StatusTracker {...loading_status} />
@ -46,6 +48,7 @@
{theme_mode}
{caption}
{bokeh_version}
{show_actions_button}
on:change={() => gradio.dispatch("change")}
/>
</Block>

3
test/test_components.py
View File

@ -2441,6 +2441,7 @@ class TestScatterPlot:
"label": None,
"name": "plot",
"bokeh_version": "3.0.3",
"show_actions_button": False,
"root_url": None,
"show_label": True,
"container": True,
@ -2642,6 +2643,7 @@ class TestLinePlot:
"label": None,
"name": "plot",
"bokeh_version": "3.0.3",
"show_actions_button": False,
"root_url": None,
"show_label": True,
"container": True,
@ -2827,6 +2829,7 @@ class TestBarPlot:
"label": None,
"name": "plot",
"bokeh_version": "3.0.3",
"show_actions_button": False,
"root_url": None,
"show_label": True,
"container": True,