96 lines
3.2 KiB
Markdown
96 lines
3.2 KiB
Markdown
# 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
|