josiadmin/flutter_test_services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graph better looking

Browse Source
This commit is contained in:
atseirjo
2026-07-23 14:36:03 +02:00
parent f0808047e3
commit 9e356f8581
2 changed files with 125 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/controller/home_controller.dart
+1 -1
View File
@@ -215,7 +215,7 @@ class HomeController extends GetxController {
return 'http://localhost:3000/invoke/IFN_ASKI_Service.flows/getAskiData?'; return 'http://localhost:3000/invoke/IFN_ASKI_Service.flows/getAskiData?';
} else { } else {
// Produktion: Direkt an den Server oder über den Produktions-Proxy // Produktion: Direkt an den Server oder über den Produktions-Proxy
return 'http://atwmdv04:5556/invoke/IFN_ASKI_Service.flows/getAskiData?'; return 'http://localhost:3000/invoke/IFN_ASKI_Service.flows/getAskiData?';
// ODER bei Nginx-Proxy: '/api/IFN_ASKI_Service.flows/getAskiData?' // ODER bei Nginx-Proxy: '/api/IFN_ASKI_Service.flows/getAskiData?'
} }
} }
lib/widgets/comparison_bar_chart.dart
+123 -19
View File
@@ -75,7 +75,12 @@ class ComparisonBarChart extends StatelessWidget {
return SingleChildScrollView( return SingleChildScrollView(
child: Padding( child: Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.only(
left: 26.0,
right: 35.0,
top: 16.0,
bottom: 16.0,
),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
@@ -92,6 +97,52 @@ class ComparisonBarChart extends StatelessWidget {
height: 500, height: 500,
child: BarChart( child: BarChart(
BarChartData( 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, alignment: BarChartAlignment.spaceAround,
maxY: maxValue * 1.02, maxY: maxValue * 1.02,
minY: 0, minY: 0,
@@ -112,7 +163,7 @@ class ComparisonBarChart extends StatelessWidget {
// PV Maximum - oranger Pin // PV Maximum - oranger Pin
if (index == maxPvIndex) { if (index == maxPvIndex) {
return Transform.translate( return Transform.translate(
offset: const Offset(-5, 0), offset: const Offset(0, 0),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@@ -122,7 +173,9 @@ class ComparisonBarChart extends StatelessWidget {
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.grey.withValues(alpha: 0.3), color: Colors.grey.withValues(
alpha: 0.3,
),
blurRadius: 4, blurRadius: 4,
), ),
], ],
@@ -153,7 +206,7 @@ class ComparisonBarChart extends StatelessWidget {
// Import Maximum - roter Pin // Import Maximum - roter Pin
if (index == maxImportIndex) { if (index == maxImportIndex) {
return Transform.translate( return Transform.translate(
offset: const Offset(5, 0), offset: const Offset(3, 0),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@@ -163,7 +216,9 @@ class ComparisonBarChart extends StatelessWidget {
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.grey.withValues(alpha: 0.3), color: Colors.grey.withValues(
alpha: 0.3,
),
blurRadius: 4, blurRadius: 4,
), ),
], ],
@@ -213,24 +268,71 @@ class ComparisonBarChart extends StatelessWidget {
bottomTitles: AxisTitles( bottomTitles: AxisTitles(
sideTitles: SideTitles( sideTitles: SideTitles(
showTitles: true, showTitles: true,
reservedSize: 60, reservedSize: 40, // Platz für die normale Textzeile
getTitlesWidget: (value, meta) { getTitlesWidget: (value, meta) {
final index = value.toInt(); final index = value.toInt();
if (index < 0 || index >= displayDatetimes.length) { if (index < 0 || index >= displayDatetimes.length) {
return const SizedBox(); return const SizedBox();
} }
final datetime = displayDatetimes[index];
// Extrahiere nur Uhrzeit (HH:mm) // 1. Indizes für Start, Mitte und Ende bestimmen
final timePart = datetime.contains('T') final firstIndex = 0;
? datetime.split('T').last.substring(0, 5) final lastIndex = displayDatetimes.length - 1;
: datetime.substring(0, 5); 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( return Padding(
padding: const EdgeInsets.only(top: 8.0), padding: const EdgeInsets.only(top: 8.0),
child: RotatedBox(
quarterTurns: 1,
child: Text( child: Text(
timePart, formattedDateTime,
style: const TextStyle(fontSize: 10), style: const TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
), ),
), ),
); );
@@ -296,15 +398,17 @@ class ComparisonBarChart extends StatelessWidget {
BarChartRodData( BarChartRodData(
toY: pvValue, toY: pvValue,
color: Colors.orange, color: Colors.orange,
width: 8, width: 5, // <-- ERHEBLICH SCHMALER (z.B. 2 oder 3 statt 6/8)
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)), borderRadius: const BorderRadius.vertical(top: Radius.circular(1)),
), ),
// Roter Bar für Import // Roter Bar für Import
BarChartRodData( BarChartRodData(
toY: importValue, toY: importValue,
color: Colors.red, color: Colors.red,
width: 8, width: 5, // <-- ERHEBLICH SCHMALER
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)), borderRadius: const BorderRadius.vertical(
top: Radius.circular(2.5),
),
), ),
], ],
); );