syncrow-web/lib/pages/device_managment/power_clamp/view/power_chart.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;
}
//