import gradio as gr
import plotly.express as px
import numpy as np
import math

def generate_chart(idx):
    x = np.arange(10)
    y = np.random.randint(0, 100, size=10)
    return px.line(x=x, y=y, markers=True, title=f"Chart {idx+1}")

def update_dashboard(num_charts, num_cols):
    num_charts, num_cols = int(num_charts), int(num_cols)

    charts = [generate_chart(i) for i in range(num_charts)]

    updates = []
    # Fill slots with charts
    for fig in charts:
        updates.append(gr.update(value=fig, visible=True))
    # Hide remaining slots
    for i in range(len(charts), max_slots):
        updates.append(gr.update(value=None, visible=False))

    return updates

max_slots = 20  # reserve max 20 plots

with gr.Blocks() as demo:
    with gr.Row():
        num_charts = gr.Number(label="Number of Charts", value=17, precision=0)
        num_cols = gr.Number(label="Number of Columns", value=4, precision=0, interactive=False, visible=False)
        num_cols_per_row = 4
        num_cols_state = gr.State(num_cols_per_row)
        btn = gr.Button("Generate Dashboard")

    chart_slots = []
    rows = math.ceil(max_slots / num_cols_per_row)   # default num_cols_per_row columns per row
    for r in range(rows):
        with gr.Row():
            for c in range(num_cols_per_row):        # num_cols_per_row cols per row
                chart_slots.append(gr.Plot(visible=False))

    btn.click(update_dashboard, [num_charts, num_cols], chart_slots)
    def on_num_cols_change(evt):
        print(evt)
        return evt
    num_cols.change(on_num_cols_change, inputs=[num_cols],outputs=[num_cols_state])

demo.launch()