245 lines
5.9 KiB
Markdown
245 lines
5.9 KiB
Markdown
# 📊 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! 🎉**
|