438 lines
17 KiB
Dart
438 lines
17 KiB
Dart
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:flutter/material.dart';
|
|
import '../models/response_output.dart';
|
|
|
|
/// Wiederverwendbares Balkendiagramm Widget für PV/Import Vergleich
|
|
///
|
|
/// Zeigt zwei Datensätze (z.B. TraunPV + TraunImport) als nebeneinander angeordnete Balken
|
|
/// - PV Daten in Orange
|
|
/// - Import Daten in Rot
|
|
/// - Y-Achse: kW Werte
|
|
/// - X-Achse: Datetime (als Uhrzeit angezeigt)
|
|
class ComparisonBarChart extends StatelessWidget {
|
|
final ResponseOutput pvData;
|
|
final ResponseOutput importData;
|
|
final String title;
|
|
|
|
const ComparisonBarChart({
|
|
required this.pvData,
|
|
required this.importData,
|
|
required this.title,
|
|
super.key,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final pvValues = pvData.dataResult?.values ?? [];
|
|
final importValues = importData.dataResult?.values ?? [];
|
|
|
|
// Erstelle eine Map mit datetime als Schlüssel
|
|
final Map<String, double> pvMap = {
|
|
for (var v in pvValues) (v.datetime ?? ''): (v.value ?? 0.0),
|
|
};
|
|
final Map<String, double> importMap = {
|
|
for (var v in importValues) (v.datetime ?? ''): (v.value ?? 0.0),
|
|
};
|
|
|
|
// Alle eindeutigen datetimes sammeln und sortieren
|
|
final allDatetimes = {...pvMap.keys, ...importMap.keys}.toList();
|
|
allDatetimes.sort();
|
|
|
|
// Begrenzen auf die letzten 20 Einträge für bessere Lesbarkeit
|
|
// final displayDatetimes = allDatetimes.length > 20
|
|
// ? allDatetimes.sublist(allDatetimes.length - 20)
|
|
// : allDatetimes;
|
|
final displayDatetimes = allDatetimes;
|
|
|
|
if (displayDatetimes.isEmpty) {
|
|
return const Center(child: Text('Keine Daten verfügbar'));
|
|
}
|
|
|
|
// Berechne Maximalwert
|
|
final allValues = [...pvMap.values, ...importMap.values];
|
|
final maxValue = allValues.fold(0.0, (a, b) => a > b ? a : b);
|
|
|
|
// Maxima für PV und Import separat
|
|
double maxPvValue = 0;
|
|
int maxPvIndex = 0;
|
|
double maxImportValue = 0;
|
|
int maxImportIndex = 0;
|
|
|
|
for (int i = 0; i < displayDatetimes.length; i++) {
|
|
final dt = displayDatetimes[i];
|
|
final pv = pvMap[dt] ?? 0.0;
|
|
final imp = importMap[dt] ?? 0.0;
|
|
|
|
if (pv > maxPvValue) {
|
|
maxPvValue = pv;
|
|
maxPvIndex = i;
|
|
}
|
|
if (imp > maxImportValue) {
|
|
maxImportValue = imp;
|
|
maxImportIndex = i;
|
|
}
|
|
}
|
|
|
|
return SingleChildScrollView(
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(
|
|
left: 26.0,
|
|
right: 35.0,
|
|
top: 16.0,
|
|
bottom: 16.0,
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
const SizedBox(height: 16),
|
|
Text(
|
|
title,
|
|
style: Theme.of(context).textTheme.headlineSmall,
|
|
textAlign: TextAlign.center,
|
|
),
|
|
const SizedBox(height: 24),
|
|
// Chart mit fester Höhe
|
|
SizedBox(
|
|
height: 500,
|
|
child: BarChart(
|
|
BarChartData(
|
|
barTouchData: BarTouchData(
|
|
enabled: true,
|
|
touchTooltipData: BarTouchTooltipData(
|
|
// Optional: Hintergrundfarbe und Styling des Tooltips anpassen
|
|
getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
|
// 1. Datum/Uhrzeit anhand des groupIndex abrufen
|
|
final rawDateTime = displayDatetimes[groupIndex];
|
|
|
|
// 2. Formatieren zu "20.07.26 12:00"
|
|
String formattedDateTime = rawDateTime;
|
|
try {
|
|
final parsedDate = DateTime.parse(rawDateTime);
|
|
final day = parsedDate.day.toString().padLeft(2, '0');
|
|
final month = parsedDate.month.toString().padLeft(
|
|
2,
|
|
'0',
|
|
);
|
|
final year = parsedDate.year.toString().substring(2);
|
|
final hour = parsedDate.hour.toString().padLeft(
|
|
2,
|
|
'0',
|
|
);
|
|
final minute = parsedDate.minute.toString().padLeft(
|
|
2,
|
|
'0',
|
|
);
|
|
formattedDateTime = '$day.$month.$year $hour:$minute';
|
|
} catch (_) {}
|
|
|
|
// 3. Typ bestimmen (z.B. PV oder Import je nach Rod-Index)
|
|
final label = rodIndex == 0 ? 'PV' : 'Import';
|
|
final unit = 'kW';
|
|
|
|
// 4. Nur beim ersten Ballekn der Gruppe das Datum als Header einfügen
|
|
// (sonst würde es bei jedem Einzelbalken doppelt stehen)
|
|
return BarTooltipItem(
|
|
'$formattedDateTime\n$label: ${rod.toY.round()} $unit',
|
|
const TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 12,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
alignment: BarChartAlignment.spaceAround,
|
|
maxY: maxValue * 1.02,
|
|
minY: 0,
|
|
gridData: FlGridData(
|
|
show: true,
|
|
drawVerticalLine: false,
|
|
horizontalInterval: maxValue * 0.2,
|
|
),
|
|
titlesData: FlTitlesData(
|
|
show: true,
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 40,
|
|
getTitlesWidget: (value, meta) {
|
|
final index = value.toInt();
|
|
|
|
// PV Maximum - oranger Pin
|
|
if (index == maxPvIndex) {
|
|
return Transform.translate(
|
|
offset: const Offset(0, 0),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.orange,
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.grey.withValues(
|
|
alpha: 0.3,
|
|
),
|
|
blurRadius: 4,
|
|
),
|
|
],
|
|
),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 12,
|
|
vertical: 6,
|
|
),
|
|
child: Text(
|
|
maxPvValue.toStringAsFixed(0),
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
),
|
|
// Pin nach unten
|
|
CustomPaint(
|
|
size: const Size(20, 10),
|
|
painter: PinPainter(Colors.orange),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// Import Maximum - roter Pin
|
|
if (index == maxImportIndex) {
|
|
return Transform.translate(
|
|
offset: const Offset(3, 0),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.red,
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.grey.withValues(
|
|
alpha: 0.3,
|
|
),
|
|
blurRadius: 4,
|
|
),
|
|
],
|
|
),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 12,
|
|
vertical: 6,
|
|
),
|
|
child: Text(
|
|
maxImportValue.toStringAsFixed(0),
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
),
|
|
// Pin nach unten
|
|
CustomPaint(
|
|
size: const Size(20, 10),
|
|
painter: PinPainter(Colors.red),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
return const SizedBox();
|
|
},
|
|
),
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 50,
|
|
getTitlesWidget: (value, meta) {
|
|
return Text(
|
|
'${value.toInt()} kW',
|
|
style: const TextStyle(fontSize: 12),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 40, // Platz für die normale Textzeile
|
|
getTitlesWidget: (value, meta) {
|
|
final index = value.toInt();
|
|
if (index < 0 || index >= displayDatetimes.length) {
|
|
return const SizedBox();
|
|
}
|
|
|
|
// 1. Indizes für Start, Mitte und Ende bestimmen
|
|
final firstIndex = 0;
|
|
final lastIndex = displayDatetimes.length - 1;
|
|
final middleIndex = displayDatetimes.length ~/ 2;
|
|
|
|
// 2. Nur anzeigen, wenn es Start, Mitte oder Ende ist
|
|
final isFirst = index == firstIndex;
|
|
final isMiddle =
|
|
index == middleIndex &&
|
|
displayDatetimes.length > 2;
|
|
final isLast =
|
|
index == lastIndex && displayDatetimes.length > 1;
|
|
|
|
if (!isFirst && !isMiddle && !isLast) {
|
|
return const SizedBox(); // Für alle anderen Balken ausblenden
|
|
}
|
|
|
|
final datetimeRaw = displayDatetimes[index];
|
|
|
|
// 3. Formatiere den String zu "DD.MM.YY HH:mm"
|
|
String formattedDateTime = datetimeRaw;
|
|
try {
|
|
final parsedDate = DateTime.parse(datetimeRaw);
|
|
final day = parsedDate.day.toString().padLeft(
|
|
2,
|
|
'0',
|
|
);
|
|
final month = parsedDate.month.toString().padLeft(
|
|
2,
|
|
'0',
|
|
);
|
|
final year = parsedDate.year.toString().substring(
|
|
2,
|
|
); // Die letzten 2 Stellen
|
|
final hour = parsedDate.hour.toString().padLeft(
|
|
2,
|
|
'0',
|
|
);
|
|
final minute = parsedDate.minute.toString().padLeft(
|
|
2,
|
|
'0',
|
|
);
|
|
|
|
formattedDateTime =
|
|
'$day.$month.$year $hour:$minute';
|
|
} catch (_) {
|
|
// Fallback, falls String kein echtes ISO-Format ist
|
|
formattedDateTime = datetimeRaw;
|
|
}
|
|
|
|
// 4. Liegend (horizontal) ausgeben
|
|
return Padding(
|
|
padding: const EdgeInsets.only(top: 8.0),
|
|
child: Text(
|
|
formattedDateTime,
|
|
style: const TextStyle(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
barGroups: _generateBarGroups(
|
|
displayDatetimes,
|
|
pvMap,
|
|
importMap,
|
|
),
|
|
borderData: FlBorderData(show: true),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
// Legende
|
|
Wrap(
|
|
alignment: WrapAlignment.center,
|
|
spacing: 24,
|
|
runSpacing: 8,
|
|
children: [
|
|
Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(width: 16, height: 16, color: Colors.orange),
|
|
const SizedBox(width: 8),
|
|
const Text('PV-Anlage(kW)'),
|
|
],
|
|
),
|
|
Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(width: 16, height: 16, color: Colors.red),
|
|
const SizedBox(width: 8),
|
|
const Text('Netzbezug(kW)'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
List<BarChartGroupData> _generateBarGroups(
|
|
List<String> datetimes,
|
|
Map<String, double> pvMap,
|
|
Map<String, double> importMap,
|
|
) {
|
|
return List.generate(datetimes.length, (index) {
|
|
final datetime = datetimes[index];
|
|
final pvValue = pvMap[datetime] ?? 0.0;
|
|
final importValue = importMap[datetime] ?? 0.0;
|
|
|
|
return BarChartGroupData(
|
|
x: index,
|
|
barRods: [
|
|
// Orange Bar für PV
|
|
BarChartRodData(
|
|
toY: pvValue,
|
|
color: Colors.orange,
|
|
width: 5, // <-- ERHEBLICH SCHMALER (z.B. 2 oder 3 statt 6/8)
|
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(1)),
|
|
),
|
|
// Roter Bar für Import
|
|
BarChartRodData(
|
|
toY: importValue,
|
|
color: Colors.red,
|
|
width: 5, // <-- ERHEBLICH SCHMALER
|
|
borderRadius: const BorderRadius.vertical(
|
|
top: Radius.circular(2.5),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
});
|
|
}
|
|
}
|
|
|
|
class PinPainter extends CustomPainter {
|
|
final Color color;
|
|
|
|
PinPainter(this.color);
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
final paint = Paint()..color = color;
|
|
final path = Path();
|
|
path.moveTo(size.width / 2, size.height);
|
|
path.lineTo(0, 0);
|
|
path.lineTo(size.width, 0);
|
|
path.close();
|
|
canvas.drawPath(path, paint);
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(PinPainter oldDelegate) => false;
|
|
}
|