Browser Data Analyzer

A comprehensive web application for analyzing browser usage trends with interactive data visualization and rolling average calculations.

Features

📊 Data Analysis

• CSV Data Processing: Upload browser usage data in CSV format (browser_name, timestamp, number)
• 7-Day Rolling Averages: Automatically calculates trailing rolling averages for trend analysis
• Market Share Percentages: Converts raw usage counts into percentage distributions
• Date Format Support: Handles multiple date formats (YYYY-MM-DD, MM/DD/YYYY)

📈 Interactive Visualization

• Dynamic Line Charts: Powered by Recharts for smooth, responsive visualizations
• Browser Toggle Controls: Show/hide individual browsers or use bulk operations (Show All, Hide All, Reverse Select)
• Customizable Y-Axis: Adjust scale from auto (0-100%) to focused ranges (20%, 30%, etc.)
• Adjustable Chart Height: Multiple size options from 400px to 800px

🎯 Advanced Features

• Multi-Day Tooltips: Pin tooltips for specific dates to compare data across time periods
• Draggable Tooltips: Move pinned tooltips around the chart for better visibility
• Sorted Data Display: Browser percentages automatically sorted by value in tooltips
• Debug Mode: Detailed calculation breakdown showing step-by-step processing

🔧 Data Validation

• Input Validation: Ensures CSV format compliance and minimum data requirements
• Error Handling: Clear error messages for invalid files or parsing issues
• Sample Data: Download feature provides example CSV format

Technology Stack

• Frontend: React 18 with modern hooks (useState, useCallback)
• Build Tool: Vite for fast development and optimized builds
• Styling: Tailwind CSS for responsive, utility-first design
• Visualization: Recharts library for interactive charts
• Data Processing: Papa Parse for CSV parsing
• Icons: Lucide React icon library
• Utilities: Lodash for data manipulation

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd browser_data_analyzer

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build
npm run preview

Usage

CSV Format

Your CSV file should contain three columns:

• browser_name: Name of the browser (e.g., "Chrome", "Firefox", "Safari")
• timestamp: Date in YYYY-MM-DD or MM/DD/YYYY format
• number: Usage count for that browser on that date

Example CSV:

browser_name,timestamp,number
Chrome,2024-01-01,150
Firefox,2024-01-01,100
Safari,2024-01-01,80
Chrome,2024-01-02,160
Firefox,2024-01-02,90
Safari,2024-01-02,85

Key Features Usage

1. Upload Data: Click the upload area or "Download Sample" to get started
2. Browser Controls: Use the legend controls to show/hide browsers
3. Pin Tooltips: Select dates from the dropdown to pin comparison tooltips
4. Drag Tooltips: Click and drag the small dot on pinned tooltips to reposition
5. Adjust View: Change Y-axis scale and chart height using the controls
6. Debug Mode: Expand the "Detailed Calculation Breakdown" section to see step-by-step processing

Algorithm Details

Rolling Average Calculation

• Uses 7-day trailing windows (includes current date + 6 previous days)
• Maintains full floating-point precision during intermediate calculations
• Applies Math.floor(value * 10) / 10 rounding for consistent display (e.g., 6.57% → 6.5%)
• Requires minimum 7 data points to begin generating rolling averages

Data Processing Pipeline

1. Validation: Filter valid rows and parse dates
2. Aggregation: Calculate daily totals per browser
3. Percentage Conversion: Convert counts to market share percentages
4. Rolling Average: Apply 7-day sliding window calculations
5. Display Formatting: Round values for consistent visualization

Project Structure

browser_data_analyzer/
├── src/
│   ├── main.jsx              # Application entry point
│   └── index.css             # Tailwind CSS imports
├── browser_data_analyzer.tsx  # Main React component
├── index.html                # HTML template
├── package.json              # Dependencies and scripts
├── vite.config.js            # Vite configuration
├── tailwind.config.js        # Tailwind CSS configuration
├── postcss.config.js         # PostCSS configuration
└── README.md                 # This file

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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

Support

For questions, issues, or feature requests, please open an issue on the GitHub repository.