# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a single-page HTML application for visualizing SDS (Feinstaub/particulate matter) sensor data. The application is a self-contained HTML file (`feinstaub.html`) with embedded CSS and JavaScript, designed for deployment as a static web page.

**Language**: German (UI labels, documentation, and metadata are in German)

## Architecture

### Single-File Architecture
- **feinstaub.html**: Complete standalone application with embedded styles and scripts
- No build system, package manager, or external dependencies beyond CDN resources
- Uses Chart.js v3.9.1 from CDN for data visualization

### Core Components

**Data Processing Pipeline**:
1. Data input: JSON file upload or API endpoint
2. Auto-detection of outlier thresholds using IQR (Interquartile Range) method
3. Filtering based on user-defined or auto-detected thresholds
4. Chart rendering and statistics calculation

**Key Functions**:
- `processData(jsonData)`: Entry point for data loading, handles different JSON formats
- `applyFilters(data)`: Filters data based on SDS_P1 and SDS_P2 thresholds
- `calculateOutlierThreshold(values)`: IQR-based outlier detection (Q1, Q3, 1.5×IQR rule, capped at 95th percentile)
- `autoDetectThresholds(data)`: Automatically sets filter thresholds based on data distribution
- `renderChart()`: Sorts data by timestamp, applies filters, updates chart and statistics
- `updateChart(labels, p1Data, p2Data)`: Creates/updates Chart.js line chart

### Data Format

Expected JSON structure (flexible):
```javascript
// Array format
[
  { Uhrzeit: "10:00:38", SDS_P1: 9.15, SDS_P2: 6.22 },
  // ...
]

// Or object with data property
{
  "data": [ /* records */ ],
  // or "records": [ /* records */ ]
}
```

Timestamp field detection (checked in order):
- `Uhrzeit` (primary)
- `timestamp`
- `Zeitstempel`
- `created_at`

## Development

### Local Testing
```bash
# Open directly in browser
open feinstaub.html  # macOS
xdg-open feinstaub.html  # Linux
start feinstaub.html  # Windows

# Or serve via local web server
python3 -m http.server 8000
# Then visit: http://localhost:8000/feinstaub.html
```

### Making Changes
Since this is a single HTML file with embedded scripts and styles:
1. Edit `feinstaub.html` directly
2. Refresh browser to see changes
3. No build or compilation step required

### Testing with Sample Data
The application includes example data at the bottom of the script (lines 529-536) that loads automatically on page load for demonstration purposes.

## Metadata and Attribution

**Author**: Joachim Hummel (Next8AI)
**Copyright**: © 2025 Joachim Hummel
**Website**: https://next8ai.de/sds-visualisierung/
**Preview Image**: https://web.unixweb.home64.de/assets/sds-preview.png

All metadata, Open Graph tags, and footer links reference the author and Next8AI branding. Preserve these when making modifications.

## UI/UX Notes

- Gradient background (purple theme: #667eea to #764ba2)
- Responsive grid layouts using CSS Grid
- Auto-sizing chart container (600px height)
- Filter controls with real-time slider updates
- Statistics cards showing: data points, averages, time range, filtered count