finishCommit
This commit is contained in:
atseirjo
@@ -0,0 +1,333 @@
|
||||
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.all(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(
|
||||
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(-5, 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(5, 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: 60,
|
||||
getTitlesWidget: (value, meta) {
|
||||
final index = value.toInt();
|
||||
if (index < 0 || index >= displayDatetimes.length) {
|
||||
return const SizedBox();
|
||||
}
|
||||
final datetime = displayDatetimes[index];
|
||||
// Extrahiere nur Uhrzeit (HH:mm)
|
||||
final timePart = datetime.contains('T')
|
||||
? datetime.split('T').last.substring(0, 5)
|
||||
: datetime.substring(0, 5);
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 8.0),
|
||||
child: RotatedBox(
|
||||
quarterTurns: 1,
|
||||
child: Text(
|
||||
timePart,
|
||||
style: const TextStyle(fontSize: 10),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
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: 8,
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)),
|
||||
),
|
||||
// Roter Bar für Import
|
||||
BarChartRodData(
|
||||
toY: importValue,
|
||||
color: Colors.red,
|
||||
width: 8,
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)),
|
||||
),
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user