Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/twilighty-abhi/locust-data-visualiser

Locust Data Visualiser
https://github.com/twilighty-abhi/locust-data-visualiser

data locust testing-tools

Last synced: 10 months ago
JSON representation

Locust Data Visualiser

Awesome Lists containing this project

README 

          
# 🚀 Locust Performance Report Visualizer



A simple, powerful web application for visualizing Locust performance testing reports. Transform your HTML reports into comprehensive, interactive dashboards with beautiful charts and insights.



## ✨ Features



### 📊 **Comprehensive Visualizations**

- **Overview Statistics**: Key metrics at a glance (total requests, failures, response times)

- **Request Analysis**: Success vs failure rates with stacked bar charts

- **Response Time Trends**: Min, max, and average response times

- **Performance Percentiles**: 50th, 95th, and 99th percentile analysis

- **Throughput Distribution**: Requests per second (RPS) breakdown

- **Error Analysis**: Detailed error distribution and statistics



### 🎨 **Modern UI/UX**

- Clean, professional design with gradient backgrounds

- Responsive layout that works on all devices

- Tabbed interface for organized data viewing

- Drag-and-drop file upload with visual feedback

- Interactive charts powered by Chart.js



### 📋 **Detailed Tables**

- Complete request statistics with sortable columns

- Error details with truncated messages and full tooltips

- Color-coded success/failure indicators



## 🚀 Getting Started



### Prerequisites

- A modern web browser (Chrome, Firefox, Safari, Edge)

- A Locust HTML report file



### Installation

No installation required! This is a client-side web application.



1. **Download the files**:

   - `index.html` - Main application file

   - `app.js` - JavaScript logic

   - `README.md` - This documentation



2. **Open the application**:

   - Simply open `index.html` in your web browser

   - Or serve it using a local web server (recommended for best performance)



### Using a Local Server (Recommended)

```bash

# Using Python 3

python -m http.server 8000



# Using Python 2

python -m SimpleHTTPServer 8000



# Using Node.js (if you have http-server installed)

npx http-server



# Using PHP

php -S localhost:8000

```



Then open `http://localhost:8000` in your browser.



## 📖 How to Use



### 1. **Upload Your Report**

   - Click the upload area or drag and drop your Locust HTML report

   - The application accepts `.html` files generated by Locust

   - Processing typically takes 1-2 seconds



### 2. **Explore the Dashboard**

   The application organizes data into four main tabs:



   **📈 Overview Tab**

   - Request success/failure comparison

   - Response time analysis (min, max, average)



   **⚡ Performance Tab**

   - Response time percentiles

   - Throughput (RPS) distribution



   **❌ Errors Tab**

   - Error distribution pie chart

   - Detailed error table with messages



   **📋 Details Tab**

   - Complete statistics table

   - All metrics in sortable format



### 3. **Interpret the Results**

   - **Green indicators**: Successful operations

   - **Red indicators**: Failures or errors

   - **Charts**: Interactive - hover for details

   - **Tables**: Click column headers to sort



## 📊 Supported Metrics



The visualizer extracts and displays:



- **Request Statistics**:

  - Total requests and failures

  - Average, minimum, maximum response times

  - Current requests per second (RPS)

  - Request methods and endpoints



- **Response Time Analysis**:

  - Percentile distributions (50th, 95th, 99th)

  - Response time trends across endpoints



- **Error Analysis**:

  - Error types and frequencies

  - Detailed error messages

  - Failure rates by endpoint



- **Performance Metrics**:

  - Throughput analysis

  - Test duration

  - Content length statistics



## 🛠️ Technical Details



### Built With

- **Frontend**: Pure HTML5, CSS3, and JavaScript

- **Charting**: Chart.js for interactive visualizations

- **Styling**: Modern CSS with gradients and animations

- **Data Processing**: Client-side JSON parsing



### Browser Compatibility

- ✅ Chrome 60+

- ✅ Firefox 55+

- ✅ Safari 12+

- ✅ Edge 79+



### File Processing

The application:

1. Reads the uploaded HTML file

2. Extracts `window.templateArgs` JavaScript object

3. Parses the JSON data structure

4. Processes statistics and creates visualizations

5. Renders interactive charts and tables



## 🎯 Use Cases



Perfect for:

- **Performance Engineers**: Quick report analysis and sharing

- **DevOps Teams**: CI/CD pipeline integration

- **QA Teams**: Load testing result interpretation

- **Developers**: Performance bottleneck identification

- **Management**: High-level performance reporting



## 🔒 Privacy & Security



- **100% Client-Side**: No data leaves your browser

- **No Server Required**: Works completely offline

- **No Data Storage**: Files are processed in memory only

- **No External Dependencies**: Uses only CDN libraries for charts



## 🤔 Troubleshooting



### Common Issues



**File won't upload:**

- Ensure the file is a valid Locust HTML report

- Check file size (very large files may take longer)

- Try refreshing the page and uploading again



**Charts not displaying:**

- Ensure you have an internet connection (for Chart.js CDN)

- Check if your browser blocks JavaScript

- Try using a different browser



**Data looks incorrect:**

- Verify the Locust report was generated properly

- Check the browser console for any error messages

- Ensure the HTML file contains `window.templateArgs`



### Getting Help



If you encounter issues:

1. Check the browser console for error messages

2. Verify your Locust report format

3. Try with a different report file

4. Use a modern browser version



## 🚀 Future Enhancements



Potential improvements:

- Historical report comparison

- Export capabilities (PDF, PNG)

- Custom chart configurations

- Real-time data streaming

- Advanced filtering options



## 📄 License



This project is open source and available under the MIT License.



---



**Happy Performance Testing! 🎯**



*Transform your Locust reports into actionable insights with beautiful visualizations.*