AhmadNovilAkwan
/
TKK_E32231503
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
TKK_E32231503/GRAFIK_CHART_GUIDE.md

5.9 KiB
Raw Blame History

📊 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

  • Grafik suhu tampil real-time
  • Grafik berat tampil real-time
  • Target line muncul di grafik berat
  • Tooltip berfungsi saat tap
  • Chart screen dapat load history
  • Filter data berfungsi
  • Statistik dihitung dengan benar
  • Refresh data berfungsi
  • Layout responsive
  • 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! 🎉