Filters, Tables and Stats

Your dashboard will likely consist of more than just plots. Let's take a look at some of the other common components of a dashboard.

Filters

Use any of the standard Gradio form components to filter your data. You can do this via event listeners or function-as-value syntax. Let's look at the event listener approach first:

import gradio as gr
from data import df

with gr.Blocks() as demo:
    with gr.Row():
        origin = gr.Dropdown(["All", "DFW", "DAL", "HOU"], value="All", label="Origin")
        destination = gr.Dropdown(["All", "JFK", "LGA", "EWR"], value="All", label="Destination")
        max_price = gr.Slider(0, 1000, value=1000, label="Max Price")

    plt = gr.ScatterPlot(df, x="time", y="price", inputs=[origin, destination, max_price])

    @gr.on(inputs=[origin, destination, max_price], outputs=plt)
    def filtered_data(origin, destination, max_price):
        _df = df[df["price"] <= max_price]
        if origin != "All":
            _df = _df[_df["origin"] == origin]
        if destination != "All":
            _df = _df[_df["destination"] == destination]
        return _df

    
demo.launch()

And this would be the function-as-value approach for the same demo.

import gradio as gr
from data import df

with gr.Blocks() as demo:
    with gr.Row():
        origin = gr.Dropdown(["All", "DFW", "DAL", "HOU"], value="All", label="Origin")
        destination = gr.Dropdown(["All", "JFK", "LGA", "EWR"], value="All", label="Destination")
        max_price = gr.Slider(0, 1000, value=1000, label="Max Price")

    def filtered_data(origin, destination, max_price):
        _df = df[df["price"] <= max_price]
        if origin != "All":
            _df = _df[_df["origin"] == origin]
        if destination != "All":
            _df = _df[_df["destination"] == destination]
        return _df

    gr.ScatterPlot(filtered_data, x="time", y="price", inputs=[origin, destination, max_price])
    
demo.launch()

Tables and Stats

Add gr.DataFrame and gr.Label to your dashboard for some hard numbers.

import gradio as gr
from data import df

with gr.Blocks() as demo:
    with gr.Row():
        gr.Label(len(df), label="Flight Count")
        gr.Label(f"${df['price'].min()}", label="Cheapest Flight")
    gr.DataFrame(df)

    
demo.launch()