mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 07:07:19 +00:00
230 lines
7.9 KiB
Dart
230 lines
7.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:syncrow_web/utils/color_manager.dart';
|
|
|
|
class EnergyConsumptionPage extends StatefulWidget {
|
|
final List<dynamic> chartData;
|
|
final double totalConsumption;
|
|
final String date;
|
|
|
|
EnergyConsumptionPage({
|
|
required this.chartData,
|
|
required this.totalConsumption,
|
|
required this.date,
|
|
});
|
|
|
|
@override
|
|
_EnergyConsumptionPageState createState() => _EnergyConsumptionPageState();
|
|
}
|
|
|
|
class _EnergyConsumptionPageState extends State<EnergyConsumptionPage> {
|
|
late List<dynamic> _chartData;
|
|
|
|
@override
|
|
void initState() {
|
|
_chartData = widget.chartData;
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
color: ColorsManager.whiteColors,
|
|
child: Column(
|
|
children: [
|
|
const Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'Total Consumption',
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 20,
|
|
),
|
|
),
|
|
Text(
|
|
'8623.20 kWh',
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 20,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const Row(
|
|
children: [
|
|
Text(
|
|
'Energy consumption',
|
|
style: TextStyle(
|
|
color: ColorsManager.grayColor,
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'01/08/2024 - 31/08/2024',
|
|
style: TextStyle(
|
|
color: ColorsManager.grayColor,
|
|
fontWeight: FontWeight.w400,
|
|
fontSize: 8,
|
|
),
|
|
),
|
|
Text(
|
|
'1000.00 kWh',
|
|
style: TextStyle(
|
|
color: ColorsManager.grayColor,
|
|
fontWeight: FontWeight.w400,
|
|
fontSize: 8,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(top: 15),
|
|
child: LineChart(
|
|
LineChartData(
|
|
lineTouchData: LineTouchData(
|
|
handleBuiltInTouches: true,
|
|
touchSpotThreshold: 2,
|
|
getTouchLineEnd: (barData, spotIndex) {
|
|
return 10.0;
|
|
},
|
|
touchTooltipData: LineTouchTooltipData(
|
|
getTooltipColor: (touchTooltipItem) => Colors.white,
|
|
tooltipRoundedRadius: 10.0,
|
|
tooltipPadding: const EdgeInsets.all(8.0),
|
|
tooltipBorder: BorderSide(color: Colors.grey, width: 1),
|
|
getTooltipItems: (List<LineBarSpot> touchedSpots) {
|
|
return touchedSpots.map((spot) {
|
|
return LineTooltipItem(
|
|
'${spot.x},\n ${spot.y.toStringAsFixed(2)} kWh',
|
|
const TextStyle(
|
|
color: Colors.blue,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 12,
|
|
),
|
|
);
|
|
}).toList();
|
|
},
|
|
)),
|
|
titlesData: FlTitlesData(
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
),
|
|
),
|
|
leftTitles: const AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
),
|
|
),
|
|
rightTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
),
|
|
),
|
|
topTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
reservedSize: 70,
|
|
getTitlesWidget: (value, meta) {
|
|
int index = value.toInt();
|
|
if (index >= 0 && index < _chartData.length) {
|
|
return Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: RotatedBox(
|
|
quarterTurns: -1,
|
|
child: Text(_chartData[index].time,
|
|
style: TextStyle(fontSize: 10)),
|
|
),
|
|
);
|
|
}
|
|
return const SizedBox.shrink();
|
|
},
|
|
),
|
|
),
|
|
),
|
|
gridData: FlGridData(
|
|
show: true,
|
|
drawVerticalLine: true,
|
|
horizontalInterval: 1,
|
|
verticalInterval: 1,
|
|
getDrawingVerticalLine: (value) {
|
|
return FlLine(
|
|
color: Colors.grey.withOpacity(0.2),
|
|
dashArray: [8, 8],
|
|
strokeWidth: 1,
|
|
);
|
|
},
|
|
getDrawingHorizontalLine: (value) {
|
|
return FlLine(
|
|
color: Colors.grey.withOpacity(0.2),
|
|
dashArray: [5, 5],
|
|
strokeWidth: 1,
|
|
);
|
|
},
|
|
drawHorizontalLine: false,
|
|
),
|
|
lineBarsData: [
|
|
LineChartBarData(
|
|
preventCurveOvershootingThreshold: 0.1,
|
|
curveSmoothness: 0.5,
|
|
preventCurveOverShooting: true,
|
|
aboveBarData: BarAreaData(),
|
|
spots: _chartData
|
|
.asMap()
|
|
.entries
|
|
.map((entry) => FlSpot(
|
|
entry.key.toDouble(), entry.value.consumption))
|
|
.toList(),
|
|
isCurved: true,
|
|
color: ColorsManager.primaryColor.withOpacity(0.6),
|
|
show: true,
|
|
shadow: Shadow(color: Colors.black12),
|
|
belowBarData: BarAreaData(
|
|
show: true,
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
ColorsManager.primaryColor.withOpacity(0.5),
|
|
Colors.blue.withOpacity(0.1),
|
|
],
|
|
begin: Alignment.center,
|
|
end: Alignment.bottomCenter,
|
|
),
|
|
),
|
|
dotData: FlDotData(
|
|
show: false,
|
|
),
|
|
isStrokeCapRound: true,
|
|
barWidth: 2,
|
|
),
|
|
],
|
|
borderData: FlBorderData(
|
|
show: false,
|
|
border: Border.all(
|
|
color: Color(0xff023DFE).withOpacity(0.7),
|
|
width: 10,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class EnergyData {
|
|
EnergyData(this.time, this.consumption);
|
|
final String time;
|
|
final double consumption;
|
|
}
|
|
// |