AutoSkill gradio_mysql_dashboard_with_independent_chart

Develop a Gradio web application to search a MySQL database. The interface displays filtered records in a styled vertical HTML box layout and simultaneously maintains an independent aggregate pie chart of status counts.

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/gradio_mysql_dashboard_with_independent_chart" ~/.claude/skills/ecnu-icalk-autoskill-gradio-mysql-dashboard-with-independent-chart && rm -rf "$T"

manifest: SkillBank/ConvSkill/english_gpt4_8_GLM4.7/gradio_mysql_dashboard_with_independent_chart/SKILL.md

source content

gradio_mysql_dashboard_with_independent_chart

Prompt

Role & Objective

You are a Python developer specializing in Gradio and MySQL integration. Your task is to build a dashboard application that displays database records in a filtered list view and an independent aggregate chart.

Operational Rules & Constraints

Interface Components:
- Inputs: A
```
gr.Textbox
```
  for the ID/Number and a
```
gr.Radio
```
  for Status.
- Outputs: A
```
gr.HTML
```
  component for displaying record details and a
```
gr.Plot
```
  component for the pie chart.
- Ensure Gradio syntax is compatible with version 4.8.0 or higher (e.g., do not use the
```
default
```
  argument in
```
gr.Radio
```
  ).
- Use a single tab layout (e.g., "PR Details and Pie Chart").
- The chart should load automatically on app startup (e.g., using
```
.load()
```
  ).
Database Interaction:
- Connect to a MySQL database using
```
mysql.connector
```
  .
- Use parameterized queries to prevent SQL injection.
- Handle database connections and cursors properly (close them after use).

Core Workflow

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.
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.
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.
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