# 📊 Panduan Fitur Grafik Chart - Aplikasi Pengering Ikan

## 🎯 Fitur yang Ditambahkan

Aplikasi sekarang memiliki **sistem grafik chart yang lengkap** untuk monitoring data pengeringan ikan secara visual dan detail.

---

## ✨ Komponen Grafik

### 1. **Dashboard - Grafik Real-time** 📈
Tampilan utama dengan 2 grafik real-time yang menampilkan:

#### **Grafik Suhu**
- Menampilkan perubahan suhu secara real-time
- Warna: Orange/Red gradient
- Range: 20-60°C
- Update setiap detik saat menerima data dari ESP32
- Menampilkan 20 data terakhir dengan scrolling otomatis

#### **Grafik Berat**
- Menampilkan penurunan berat ikan secara real-time  
- Warna: Blue/Cyan gradient
- Menampilkan garis target berat (hijau putus-putus)
- Tooltip menampilkan sisa berat menuju target
- Update setiap detik saat menerima data dari ESP32

**Fitur Grafik Dashboard:**
- 🔴 Live indicator - menandakan data real-time
- 📍 Dot marker pada titik terakhir
- 💧 Gradient fill di bawah garis
- 📏 Grid lines untuk kemudahan pembacaan
- 🎯 Target line pada grafik berat
- 👆 Touch tooltip - tap grafik untuk detail

---

### 2. **Chart Screen - History Detail** 📊

Layar khusus untuk melihat data history dari database dengan detail lengkap.

#### **Cara Akses:**
Klik tab **"Grafik"** di bottom navigation (icon bar_chart)

#### **Grafik yang Tersedia:**

**A. Grafik Suhu History**
- Menampilkan history suhu dari database
- Timeline berupa index data (#1, #2, dst)
- Tooltip menampilkan suhu + timestamp
- Smooth curve line

**B. Grafik Berat History**  
- Menampilkan history berat dari database
- Garis target berat horizontal
- Tooltip menampilkan berat, target, dan timestamp
- Color coding untuk titik di atas/bawah target

**C. Statistik Card**
Menampilkan analisis data:
- 📊 Rata-rata Suhu
- ⚖️ Rata-rata Berat
- 🔺 Max Suhu
- 🔻 Min Suhu
- 🔺 Max Berat
- 🔻 Min Berat

#### **Filter Data:**
Tekan icon filter (⋮) di kanan atas untuk memilih:
- 50 Data Terakhir
- 100 Data Terakhir
- 200 Data Terakhir

#### **Refresh Data:**
- Pull to refresh (tarik ke bawah)
- Atau tekan icon refresh di info card

---

## 🎨 Visual Features

### **Color Scheme:**
- **Suhu:** Orange → Red (panas)
- **Berat:** Blue → Cyan (sejuk)
- **Target:** Green (tujuan)
- **Live:** Orange dot (status real-time)

### **Gradient Effects:**
- Semua grafik menggunakan gradient fill
- Memberikan efek depth dan modern
- Smooth transitions

### **Interactive Elements:**
- Touch tooltip - tap grafik untuk detail
- Smooth animations
- Responsive layout

---

## 🔧 Cara Kerja

### **Dashboard Real-time Chart:**
1. Data diterima dari ESP32 via MQTT setiap 1 detik
2. Data disimpan ke list `suhuHistory` dan `beratHistory`
3. List maksimal 20 data (auto scroll/shift)
4. Widget `TemperatureChart` dan `WeightChart` render data
5. Chart update otomatis setiap ada data baru

### **Chart Screen History:**
1. Load data dari API endpoint `/api/data/history`
2. Parse data menjadi `List<SensorData>`
3. Convert ke `List<FlSpot>` untuk grafik
4. Hitung statistik (avg, min, max)
5. Render dengan `fl_chart` LineChart

---

## 📱 User Experience

### **Dashboard:**
- Scroll ke bawah untuk melihat grafik
- Grafik selalu update real-time saat pengeringan berjalan
- Compact layout untuk quick glance

### **Chart Screen:**
- Full-screen view untuk analisis detail
- Filter untuk berbagai range data
- Statistik summary untuk insights
- Refresh untuk update data terbaru

---

## 🛠️ Teknologi

### **Package:**
- `fl_chart: ^0.69.0` - Chart library Flutter terbaik
- Smooth animations
- Touch interactions
- Customizable

### **Widget Structure:**

```
lib/
├── screens/
│   ├── dashboard_screen.dart      (Main screen dengan real-time charts)
│   └── chart_screen.dart          (History charts screen)
└── widgets/
    ├── temperature_chart.dart     (Reusable temperature chart widget)
    └── weight_chart.dart          (Reusable weight chart widget)
```

---

## 📊 Data Flow

### **Real-time:**
```
ESP32 → MQTT → MqttService → DashboardScreen
                                    ↓
                            suhuHistory/beratHistory
                                    ↓
                        TemperatureChart/WeightChart
```

### **History:**
```
Backend MySQL → API → ApiService → ChartScreen
                                        ↓
                                 List<SensorData>
                                        ↓
                                  fl_chart LineChart
```

---

## 🎯 Tips Penggunaan

1. **Monitoring Real-time:**
   - Lihat dashboard untuk monitoring cepat
   - Grafik akan auto-scroll saat data penuh
   - Tap grafik untuk detail nilai spesifik

2. **Analisis History:**
   - Buka Chart Screen untuk analisis mendalam
   - Gunakan filter untuk berbagai rentang waktu
   - Perhatikan statistik untuk insights

3. **Performance:**
   - Dashboard limit 20 data untuk performa optimal
   - Chart Screen bisa load hingga 200 data
   - Refresh jika data tidak update

---

## 🚀 Future Improvements

Beberapa ide untuk pengembangan:

1. **Export Data:**
   - Export grafik sebagai image
   - Export data ke CSV/Excel

2. **Advanced Analytics:**
   - Trend analysis
   - Prediksi waktu selesai
   - Efisiensi pengeringan

3. **Comparison:**
   - Bandingkan multiple sessions
   - Overlay grafik

4. **Zoom & Pan:**
   - Zoom in/out grafik
   - Pan untuk navigasi

---

## ✅ Testing Checklist

- [x] Grafik suhu tampil real-time
- [x] Grafik berat tampil real-time
- [x] Target line muncul di grafik berat
- [x] Tooltip berfungsi saat tap
- [x] Chart screen dapat load history
- [x] Filter data berfungsi
- [x] Statistik dihitung dengan benar
- [x] Refresh data berfungsi
- [x] Layout responsive
- [x] No memory leaks

---

## 📞 Support

Jika ada pertanyaan atau bug:
1. Check console log untuk error messages
2. Pastikan backend API running
3. Pastikan MQTT connection aktif
4. Verify data di database

---

**Selamat menggunakan fitur Grafik Chart! 🎉**