run.ipynb

{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: draggable_dashboard"]}, {"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 gradio as gr\n", "import numpy as np\n", "import pandas as pd\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"# Draggable Dashboard Demo\")\n", "    gr.Markdown(\"Drag the charts around to reorder them!\")\n", "    \n", "    x = np.linspace(0, 10, 100)\n", "    data = pd.DataFrame({\n", "        'x': x,\n", "        'y1': np.random.normal(100, 20, 100) + 10 * np.sin(x),\n", "        'y2': np.random.normal(500, 100, 100) + 50 * np.cos(x),\n", "        'y3': np.random.normal(1000, 200, 100) + 100 * np.sin(x/2),\n", "        'y4': np.random.normal(0.15, 0.05, 100) + 0.05 * np.cos(x/3)\n", "    })\n", "    \n", "    with gr.Row():\n", "        with gr.Column(scale=1):\n", "            gr.Markdown(\"### Horizontal Layout (orientation='row')\")\n", "            with gr.Draggable(orientation=\"row\"):\n", "                gr.LinePlot(\n", "                    data,\n", "                    x=\"x\",\n", "                    y=\"y1\",\n", "                    title=\"Chart 1\",\n", "                    height=200,\n", "                    width=300\n", "                )\n", "                gr.LinePlot(\n", "                    data,\n", "                    x=\"x\",\n", "                    y=\"y2\",\n", "                    title=\"Chart 2\",\n", "                    height=200,\n", "                    width=300\n", "                )\n", "                gr.LinePlot(\n", "                    data,\n", "                    x=\"x\",\n", "                    y=\"y3\",\n", "                    title=\"Chart 3\",\n", "                    height=200,\n", "                    width=300\n", "                )\n", "                gr.LinePlot(\n", "                    data,\n", "                    x=\"x\",\n", "                    y=\"y4\",\n", "                    title=\"Chart 4\",\n", "                    height=200,\n", "                    width=300\n", "                )\n", "        \n", "        with gr.Column(scale=1):\n", "            gr.Markdown(\"### Vertical Layout (orientation='column')\")\n", "            with gr.Draggable(orientation=\"column\"):\n", "                gr.LinePlot(\n", "                    data,\n", "                    x=\"x\",\n", "                    y=\"y1\",\n", "                    title=\"Chart 1\",\n", "                    height=200,\n", "                    width=300\n", "                )\n", "                gr.LinePlot(\n", "                    data,\n", "                    x=\"x\",\n", "                    y=\"y2\",\n", "                    title=\"Chart 2\",\n", "                    height=200,\n", "                    width=300\n", "                )\n", "                gr.LinePlot(\n", "                    data,\n", "                    x=\"x\",\n", "                    y=\"y3\",\n", "                    title=\"Chart 3\",\n", "                    height=200,\n", "                    width=300\n", "                )\n", "                gr.LinePlot(\n", "                    data,\n", "                    x=\"x\",\n", "                    y=\"y4\",\n", "                    title=\"Chart 4\",\n", "                    height=200,\n", "                    width=300\n", "                )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}