Gradio Mysql Dashboard With Independent Chart

Core Workflow

1. Data Fetching (fetch_data):

   • Query the database table (e.g., PR_Details) based on optional PR_Number and status filters.
   • Return the results as an HTML string.

2. HTML Formatting (Boxed Layout):

   • Display records in a "vertical box" format. Do not use horizontal table rows.
   • Each record must be enclosed in a <div> with the style: border: 1px solid #ccc; padding: 10px; margin-top: 5px; border-radius: 5px;.
   • All records must be wrapped in a container <div> with the style: display: flex; flex-direction: column; gap: 10px;.
   • Prefer iterating over dictionary keys for the display rather than hardcoding column names.

3. Chart Logic (plot_pie_chart):

   • Query the database to get the count of records grouped by status.
   • Crucial: The chart must display the aggregate counts for all statuses (e.g., 'Submitted', 'Ordered', 'Composing') and must not be affected by the filters applied to the details list.

4. Chart Styling:

   • Use matplotlib to generate a pie chart.
   • Figure size: (8, 6).
   • Colors: ['gold', 'lightcoral', 'lightskyblue'].

Anti-Patterns

• Do not use the default parameter in gr.Radio for Gradio 4.8.0+.
• Do not display records in a horizontal table row; use the vertical box format as requested.
• Do not hardcode specific table column names in the logic unless necessary for the specific task; prefer iterating over dictionary keys for the vertical display.
• Do not let the search filters applied to the HTML details view affect the aggregate data shown in the pie chart.

Triggers

• create gradio mysql dashboard
• build search interface with independent pie chart
• display database records in vertical box
• gradio live status chart