Chemical Plant Catalyst Efficiency Dashboard

A full-stack web application for analysing and visualising catalyst efficiency data using statistical analysis (ANOVA) and an interactive dashboard.

Project Overview

This application helps chemical engineers optimise catalyst selection by:

• Analysing catalyst efficiency data using ANOVA statistical testing
• Visualising average yield across different catalysts
• Making data-driven recommendations on catalyst selection
• Adding new trial data to the analysis dataset

Project Structure

project_seven/
├── app.py                                 # Flask backend API
├── catalyst_efficiency_cleaned.csv        # Dataset
├── catalyst_efficiency_anova.ipynb        # Analysis notebook
├── catalyst-dashboard/                    # React frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── Charts.jsx                # Chart visualization component
│   │   │   └── Dashboard.jsx             # Form and dashboard component
│   │   ├── App.jsx                       # Main app component
│   │   ├── App.css                       # Styling
│   │   ├── main.jsx                      # Entry point
│   │   └── index.css                     # Global styles
│   ├── package.json                      # Dependencies
│   ├── vite.config.js                    # Vite configuration
│   └── index.html                        # HTML template
└── README.md                             # This file

Tech Stack

Backend

• Framework: Flask
• CORS: flask-cors
• Data Analysis: pandas, statsmodels
• API: RESTful endpoints returning JSON

Frontend

• Framework: React
• Build Tool: Vite
• Charting: Recharts
• Styling: CSS

Installation

Prerequisites

• Python 3.8+
• Node.js 14+
• npm or yarn

Backend Setup

1. Install Python dependencies:

pip install flask flask-cors pandas statsmodels

2. Ensure catalyst_efficiency_cleaned.csv is in the project root directory

Frontend Setup

1. Navigate to the dashboard folder:

cd catalyst-dashboard

2. Install dependencies:

npm install

Running the Application

Start Backend Server

From the project root:

python app.py

The Flask API will run on http://127.0.0.1:5000

Start Frontend Development Server

From the catalyst-dashboard folder:

npm run dev

The React app will run on http://localhost:5173

API Endpoints

GET /catalysts

Retrieves catalyst efficiency analysis and ANOVA results.

Response:

{
  "status": "success",
  "data": {
    "Catalysts_mean": {
      "A": 82.87,
      "B": 85.87,
      "C": 88.87
    },
    "P_value": 0.0000,
    "is_significant": true,
    "Recommendations": "Catalyst C"
  }
}

POST /add_trial

Adds a new trial entry to the dataset.

Request Body:

{
  "catalyst": "A",
  "yield": 85.5
}

Response:

{
  "status": "success",
  "message": "Data added successfully"
}

Features

✅ Statistical Analysis: ANOVA testing to determine if catalyst differences are statistically significant
✅ Interactive Charts: Recharts bar chart showing average yield per catalyst
✅ Dashboard: Executive summary with p-values and recommendations
✅ Data Input: Add new trial data from the frontend
✅ Responsive Design: Works on desktop and tablet devices

Data Format

The CSV file should contain the following columns:

• TRIAL_ID: Unique identifier for each trial
• Catalyst_type: Type of catalyst (A, B, C, etc.)
• Yield_Pct: Yield percentage achieved
• Reaction_Temp_C: Reaction temperature in Celsius

Usage

1. Open the dashboard in your browser at http://localhost:5173
2. View the current catalyst analysis and ANOVA results
3. Check the "Executive Dashboard" card for statistical significance
4. Use the form to add new trial data (if available)
5. Data is automatically appended to the CSV and analysis updates

Statistical Interpretation

• P-value < 0.05: Catalyst differences are statistically significant
• P-value ≥ 0.05: No statistically significant difference between catalysts
• Recommendations: Based on mean yield when significant, otherwise maintain current catalyst

Troubleshooting

"Cannot read properties of undefined"

• Ensure Flask server is running on port 5000
• Check that CSV file exists and is readable

Chart not displaying

• Verify the browser console for errors
• Ensure Recharts library is installed in node_modules

POST request not working

• Verify request method is POST
• Check request body format matches API specification
• Ensure Flask server has received the data

Future Enhancements

• Database integration instead of CSV
• User authentication
• Data visualization improvements
• Export analysis reports as PDF
• Historical data tracking
• Advanced filtering options

License

MIT License

Contact

For questions or issues, please refer to the project documentation.