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;

  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;
}
//