import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

class StatCharts extends StatelessWidget {
  const StatCharts({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        LineChart(
          LineChartData(
            backgroundColor: Colors.lightBlue,
            titlesData: FlTitlesData(
              leftTitles: SideTitles(showTitles: true),
              bottomTitles: SideTitles(showTitles: true),
            ),
            borderData: FlBorderData(show: true),
            minX: 0,
            maxX: 4,
            minY: 0,
            maxY: 50,
            lineBarsData: [
              LineChartBarData(
                spots: [
                  FlSpot(0, 10),
                  FlSpot(1, 20),
                  FlSpot(2, 30),
                  FlSpot(3, 40),
                ],
                isCurved: true,
                colors: [Colors.blue],
              ),
            ],
          ),
        ),
        const SizedBox(height: 20),
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.8,
          height: 160,
          child: BarChart(
            BarChartData(
              alignment: BarChartAlignment.spaceAround,
              maxY: 20,
              barTouchData: BarTouchData(enabled: false),
              titlesData: FlTitlesData(
                bottomTitles: SideTitles(
                  showTitles: true,
                  getTextStyles: (value) => const TextStyle(color: Colors.black),
                  margin: 10,
                  getTitles: (value) {
                    switch (value.toInt()) {
                      case 0:
                        return 'Placeholder1';
                      case 1:
                        return 'Placeholder2';
                      case 2:
                        return 'Placeholder3';
                      default:
                        return '';
                    }
                  },
                ),
                leftTitles: SideTitles(
                  showTitles: true,
                  getTextStyles: (value) => const TextStyle(color: Colors.black),
                  margin: 10,
                  reservedSize: 30,
                  interval: 5,
                ),
              ),
              borderData: FlBorderData(
                show: true,
                border: Border.all(color: Colors.white, width: 1),
              ),
              barGroups: [
                BarChartGroupData(
                  x: 0,
                  barRods: [
                    BarChartRodData(y: 15, width: 10),
                  ],
                ),
                BarChartGroupData(
                  x: 1,
                  barRods: [
                    BarChartRodData(y: 10, width: 10),
                  ],
                ),
                BarChartGroupData(
                  x: 2,
                  barRods: [
                    BarChartRodData(y: 18, width: 10),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}