app mobile allarmi prima
This commit is contained in:
619
lib/screens/dashboard_screen.dart
Normal file
619
lib/screens/dashboard_screen.dart
Normal file
@@ -0,0 +1,619 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:fl_chart/fl_chart.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import '../models/statistiche.dart';
|
||||
import '../services/api_service.dart';
|
||||
import '../utils/constants.dart';
|
||||
|
||||
class DashboardScreen extends StatefulWidget {
|
||||
const DashboardScreen({super.key});
|
||||
|
||||
@override
|
||||
State<DashboardScreen> createState() => _DashboardScreenState();
|
||||
}
|
||||
|
||||
class _DashboardScreenState extends State<DashboardScreen> {
|
||||
final _apiService = ApiService();
|
||||
Statistiche? _statistiche;
|
||||
AllarmiPerGiornoResponse? _allarmiPerGiorno;
|
||||
bool _isLoading = true;
|
||||
String? _errorMessage;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadData();
|
||||
}
|
||||
|
||||
Future<void> _loadData() async {
|
||||
setState(() => _isLoading = true);
|
||||
|
||||
try {
|
||||
final stats = await _apiService.getStatistiche();
|
||||
final allarmiGiorno = await _apiService.getAllarmiPerGiorno(giorni: 30);
|
||||
|
||||
setState(() {
|
||||
_statistiche = stats;
|
||||
_allarmiPerGiorno = allarmiGiorno;
|
||||
_isLoading = false;
|
||||
_errorMessage = null;
|
||||
});
|
||||
} catch (e) {
|
||||
setState(() {
|
||||
_errorMessage = 'Errore caricamento dati: $e';
|
||||
_isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Dashboard'),
|
||||
Text('Panoramica generale', style: TextStyle(fontSize: 12)),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
onPressed: _loadData,
|
||||
),
|
||||
],
|
||||
),
|
||||
body: _isLoading
|
||||
? const Center(child: CircularProgressIndicator())
|
||||
: _errorMessage != null
|
||||
? Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: AppColors.critical,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(_errorMessage!),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton.icon(
|
||||
onPressed: _loadData,
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Riprova'),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
: RefreshIndicator(
|
||||
onRefresh: _loadData,
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(AppSizes.paddingL),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// KPI Cards
|
||||
_buildKPISection(),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Grafico Severità
|
||||
_buildSeveritaChart(),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Grafico Stati
|
||||
_buildStatiChart(),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Grafico Temporale
|
||||
_buildTimelineChart(),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Grafico Siti per Tipo
|
||||
_buildSitiPerTipoChart(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildKPISection() {
|
||||
if (_statistiche == null) return const SizedBox.shrink();
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text('Indicatori Chiave', style: AppTextStyles.h2),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _buildKPICard(
|
||||
'Allarmi Totali',
|
||||
_statistiche!.totaleAllarmi.toString(),
|
||||
Icons.notifications_active,
|
||||
AppColors.primary,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSizes.paddingM),
|
||||
Expanded(
|
||||
child: _buildKPICard(
|
||||
'Siti Monitorati',
|
||||
_statistiche!.totaleSiti.toString(),
|
||||
Icons.location_on,
|
||||
AppColors.secondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: AppSizes.paddingM),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _buildKPICard(
|
||||
'Aperti',
|
||||
_statistiche!.allarmiAperti.toString(),
|
||||
Icons.warning,
|
||||
AppColors.warning,
|
||||
subtitle:
|
||||
'${_statistiche!.percentualeAperti.toStringAsFixed(1)}%',
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSizes.paddingM),
|
||||
Expanded(
|
||||
child: _buildKPICard(
|
||||
'Critici',
|
||||
_statistiche!.allarmiCritical.toString(),
|
||||
Icons.error,
|
||||
AppColors.critical,
|
||||
subtitle:
|
||||
'${_statistiche!.percentualeCritici.toStringAsFixed(1)}%',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildKPICard(
|
||||
String label,
|
||||
String value,
|
||||
IconData icon,
|
||||
Color color, {
|
||||
String? subtitle,
|
||||
}) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [color, color.withOpacity(0.7)],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: color.withOpacity(0.3),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(icon, color: Colors.white, size: 28),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
value,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: Colors.white.withOpacity(0.9),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
if (subtitle != null) ...[
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
subtitle,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSeveritaChart() {
|
||||
if (_statistiche == null) return const SizedBox.shrink();
|
||||
|
||||
final sections = [
|
||||
if (_statistiche!.allarmiCritical > 0)
|
||||
PieChartSectionData(
|
||||
color: AppColors.critical,
|
||||
value: _statistiche!.allarmiCritical.toDouble(),
|
||||
title: '${_statistiche!.allarmiCritical}',
|
||||
radius: 50,
|
||||
titleStyle: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
if (_statistiche!.allarmiWarning > 0)
|
||||
PieChartSectionData(
|
||||
color: AppColors.warning,
|
||||
value: _statistiche!.allarmiWarning.toDouble(),
|
||||
title: '${_statistiche!.allarmiWarning}',
|
||||
radius: 50,
|
||||
titleStyle: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
if (_statistiche!.allarmiInfo > 0)
|
||||
PieChartSectionData(
|
||||
color: AppColors.info,
|
||||
value: _statistiche!.allarmiInfo.toDouble(),
|
||||
title: '${_statistiche!.allarmiInfo}',
|
||||
radius: 50,
|
||||
titleStyle: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
];
|
||||
|
||||
if (sections.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
return _buildChartCard(
|
||||
'Allarmi per Severità',
|
||||
Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 200,
|
||||
child: PieChart(
|
||||
PieChartData(
|
||||
sections: sections,
|
||||
sectionsSpace: 2,
|
||||
centerSpaceRadius: 40,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_buildLegend([
|
||||
_LegendItem('Critici', AppColors.critical, _statistiche!.allarmiCritical),
|
||||
_LegendItem('Avvisi', AppColors.warning, _statistiche!.allarmiWarning),
|
||||
_LegendItem('Info', AppColors.info, _statistiche!.allarmiInfo),
|
||||
]),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatiChart() {
|
||||
if (_statistiche == null) return const SizedBox.shrink();
|
||||
|
||||
return _buildChartCard(
|
||||
'Allarmi per Stato',
|
||||
Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 200,
|
||||
child: BarChart(
|
||||
BarChartData(
|
||||
alignment: BarChartAlignment.spaceAround,
|
||||
maxY: _statistiche!.totaleStato.toDouble() * 1.2,
|
||||
barTouchData: BarTouchData(enabled: false),
|
||||
titlesData: FlTitlesData(
|
||||
show: true,
|
||||
bottomTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
getTitlesWidget: (value, meta) {
|
||||
switch (value.toInt()) {
|
||||
case 0:
|
||||
return const Text('Nuovi', style: TextStyle(fontSize: 12));
|
||||
case 1:
|
||||
return const Text('In Gest.', style: TextStyle(fontSize: 12));
|
||||
case 2:
|
||||
return const Text('Risolti', style: TextStyle(fontSize: 12));
|
||||
default:
|
||||
return const Text('');
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
leftTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
topTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
rightTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
),
|
||||
borderData: FlBorderData(show: false),
|
||||
barGroups: [
|
||||
BarChartGroupData(
|
||||
x: 0,
|
||||
barRods: [
|
||||
BarChartRodData(
|
||||
toY: _statistiche!.allarmiNuovo.toDouble(),
|
||||
color: AppColors.critical,
|
||||
width: 40,
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)),
|
||||
),
|
||||
],
|
||||
),
|
||||
BarChartGroupData(
|
||||
x: 1,
|
||||
barRods: [
|
||||
BarChartRodData(
|
||||
toY: _statistiche!.allarmiInGestione.toDouble(),
|
||||
color: AppColors.warning,
|
||||
width: 40,
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)),
|
||||
),
|
||||
],
|
||||
),
|
||||
BarChartGroupData(
|
||||
x: 2,
|
||||
barRods: [
|
||||
BarChartRodData(
|
||||
toY: _statistiche!.allarmiRisolto.toDouble(),
|
||||
color: AppColors.success,
|
||||
width: 40,
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTimelineChart() {
|
||||
if (_allarmiPerGiorno == null || _allarmiPerGiorno!.dati.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final spots = _allarmiPerGiorno!.dati.asMap().entries.map((entry) {
|
||||
return FlSpot(entry.key.toDouble(), entry.value.count.toDouble());
|
||||
}).toList();
|
||||
|
||||
final maxY = _allarmiPerGiorno!.dati
|
||||
.map((d) => d.count)
|
||||
.reduce((a, b) => a > b ? a : b)
|
||||
.toDouble();
|
||||
|
||||
return _buildChartCard(
|
||||
'Andamento Temporale (30 giorni)',
|
||||
SizedBox(
|
||||
height: 200,
|
||||
child: LineChart(
|
||||
LineChartData(
|
||||
gridData: FlGridData(
|
||||
show: true,
|
||||
drawVerticalLine: false,
|
||||
horizontalInterval: 1,
|
||||
getDrawingHorizontalLine: (value) {
|
||||
return FlLine(
|
||||
color: Colors.grey[300],
|
||||
strokeWidth: 1,
|
||||
);
|
||||
},
|
||||
),
|
||||
titlesData: FlTitlesData(
|
||||
show: true,
|
||||
bottomTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
reservedSize: 30,
|
||||
interval: 5,
|
||||
getTitlesWidget: (value, meta) {
|
||||
if (value.toInt() >= _allarmiPerGiorno!.dati.length) {
|
||||
return const Text('');
|
||||
}
|
||||
final data = _allarmiPerGiorno!.dati[value.toInt()].data;
|
||||
return Text(
|
||||
DateFormat('d/M').format(data),
|
||||
style: const TextStyle(fontSize: 10),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
leftTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
topTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
rightTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
),
|
||||
borderData: FlBorderData(show: false),
|
||||
minX: 0,
|
||||
maxX: spots.length.toDouble() - 1,
|
||||
minY: 0,
|
||||
maxY: maxY * 1.2,
|
||||
lineBarsData: [
|
||||
LineChartBarData(
|
||||
spots: spots,
|
||||
isCurved: true,
|
||||
color: AppColors.primary,
|
||||
barWidth: 3,
|
||||
isStrokeCapRound: true,
|
||||
dotData: const FlDotData(show: false),
|
||||
belowBarData: BarAreaData(
|
||||
show: true,
|
||||
color: AppColors.primary.withOpacity(0.1),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSitiPerTipoChart() {
|
||||
if (_statistiche == null) return const SizedBox.shrink();
|
||||
|
||||
final data = [
|
||||
_ChartData('Ponti', _statistiche!.sitiPonte, Colors.blue),
|
||||
_ChartData('Gallerie', _statistiche!.sitiGalleria, Colors.brown),
|
||||
_ChartData('Dighe', _statistiche!.sitiDiga, Colors.cyan),
|
||||
_ChartData('Frane', _statistiche!.sitiFrana, Colors.orange),
|
||||
_ChartData('Versanti', _statistiche!.sitiVersante, Colors.green),
|
||||
_ChartData('Edifici', _statistiche!.sitiEdificio, Colors.purple),
|
||||
].where((d) => d.value > 0).toList();
|
||||
|
||||
if (data.isEmpty) return const SizedBox.shrink();
|
||||
|
||||
return _buildChartCard(
|
||||
'Siti per Tipologia',
|
||||
SizedBox(
|
||||
height: 200,
|
||||
child: BarChart(
|
||||
BarChartData(
|
||||
alignment: BarChartAlignment.spaceAround,
|
||||
maxY: data.map((d) => d.value).reduce((a, b) => a > b ? a : b).toDouble() * 1.2,
|
||||
barTouchData: BarTouchData(enabled: false),
|
||||
titlesData: FlTitlesData(
|
||||
show: true,
|
||||
bottomTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
getTitlesWidget: (value, meta) {
|
||||
if (value.toInt() >= data.length) return const Text('');
|
||||
return Text(
|
||||
data[value.toInt()].label.substring(0, 3),
|
||||
style: const TextStyle(fontSize: 12),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
leftTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
topTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
rightTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
),
|
||||
borderData: FlBorderData(show: false),
|
||||
barGroups: data.asMap().entries.map((entry) {
|
||||
return BarChartGroupData(
|
||||
x: entry.key,
|
||||
barRods: [
|
||||
BarChartRodData(
|
||||
toY: entry.value.value.toDouble(),
|
||||
color: entry.value.color,
|
||||
width: 30,
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)),
|
||||
),
|
||||
],
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildChartCard(String title, Widget child) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(AppSizes.paddingL),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.05),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(title, style: AppTextStyles.h3),
|
||||
const SizedBox(height: 16),
|
||||
child,
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLegend(List<_LegendItem> items) {
|
||||
return Wrap(
|
||||
spacing: 16,
|
||||
runSpacing: 8,
|
||||
children: items.map((item) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 16,
|
||||
height: 16,
|
||||
decoration: BoxDecoration(
|
||||
color: item.color,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'${item.label}: ${item.value}',
|
||||
style: AppTextStyles.bodySmall,
|
||||
),
|
||||
],
|
||||
);
|
||||
}).toList(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LegendItem {
|
||||
final String label;
|
||||
final Color color;
|
||||
final int value;
|
||||
|
||||
_LegendItem(this.label, this.color, this.value);
|
||||
}
|
||||
|
||||
class _ChartData {
|
||||
final String label;
|
||||
final int value;
|
||||
final Color color;
|
||||
|
||||
_ChartData(this.label, this.value, this.color);
|
||||
}
|
||||
Reference in New Issue
Block a user