Files
syncrow-web/lib/pages/device_managment/power_clamp/view/power_chart.dart
2024-10-24 17:40:32 +03:00

287 lines
11 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;
final String formattedDate;
final Widget widget;
final Function()? onTap;
EnergyConsumptionPage({
required this.chartData,
required this.totalConsumption,
required this.date,
required this.widget,
required this.onTap,
required this.formattedDate,
});
@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,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
widget.formattedDate,
style: const TextStyle(
color: ColorsManager.grayColor,
fontWeight: FontWeight.w400,
fontSize: 8,
),
),
const Text(
'1000.00 kWh',
style: TextStyle(
color: ColorsManager.grayColor,
fontWeight: FontWeight.w400,
fontSize: 8,
),
),
],
),
Expanded(
child: Column(
children: [
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,
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 2,
child: Container(
decoration: BoxDecoration(
color: ColorsManager.graysColor,
borderRadius: BorderRadius.circular(10),
),
child:
Expanded(child: Container(child: widget.widget)),
),
),
Spacer(),
Expanded(
flex: 2,
child: Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: ColorsManager.graysColor,
borderRadius: BorderRadius.circular(10),
),
child: InkWell(
onTap: widget.onTap,
child: Center(
child: Container(
child: SizedBox(
child: Padding(
padding: const EdgeInsets.all(5),
child: Text(widget.formattedDate),
),
)),
),
),
),
),
],
),
)
],
),
),
],
),
);
}
}
class EnergyData {
EnergyData(this.time, this.consumption);
final String time;
final double consumption;
}
//