eatvio_app/lib/features/profile/presentation/widgets/circumference_chart_widget.dart

import 'package:eatvio_app/core/app_export.dart';
import 'package:eatvio_app/features/profile/models/profile_model.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class CircumferenceChartWidget extends StatelessWidget {
  final List<Circumference> chartData;

  const CircumferenceChartWidget({
    super.key,
    required this.chartData,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 16),
          scrollDirection: Axis.horizontal,
          physics: const BouncingScrollPhysics(),
          child: Row(
            children: [
              Text(
                '${chartData.last.chestCircumference} см',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 48,
                  fontWeight: FontWeight.w500,
                ),
              ),
              chartData.last.chestCircumference > chartData[chartData.length - 2].chestCircumference
                  ? Icon(
                      Icons.arrow_drop_up,
                      size: 48,
                      color: Colors.grey,
                    )
                  : Icon(
                      Icons.arrow_drop_down,
                      size: 48,
                      color: Colors.grey,
                    ),
              Text(
                '${chartData.last.waistCircumference} см',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 48,
                  fontWeight: FontWeight.w500,
                ),
              ),
              chartData.last.waistCircumference > chartData[chartData.length - 2].waistCircumference
                  ? Icon(
                      Icons.arrow_drop_up,
                      size: 48,
                      color: Colors.grey,
                    )
                  : Icon(
                      Icons.arrow_drop_down,
                      size: 48,
                      color: Colors.grey,
                    ),
              Text(
                '${chartData.last.hipCircumference} см',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 48,
                  fontWeight: FontWeight.w500,
                ),
              ),
              chartData.last.hipCircumference > chartData[chartData.length - 2].hipCircumference
                  ? Icon(
                      Icons.arrow_drop_up,
                      size: 48,
                      color: Colors.grey,
                    )
                  : Icon(
                      Icons.arrow_drop_down,
                      size: 48,
                      color: Colors.grey,
                    ),
            ],
          ),
        ),
        SfCartesianChart(
          margin: EdgeInsets.symmetric(horizontal: 8),
          enableAxisAnimation: true,
          plotAreaBorderWidth: 0,
          trackballBehavior: TrackballBehavior(
            enable: true,
            activationMode: ActivationMode.singleTap,
            tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
            tooltipSettings: InteractiveTooltip(),
            lineType: TrackballLineType.vertical,
          ),
          primaryXAxis: DateTimeCategoryAxis(
            tickPosition: TickPosition.inside,
            majorTickLines: MajorTickLines(
              size: 0,
            ),
            edgeLabelPlacement: EdgeLabelPlacement.shift,
            dateFormat: DateFormat.MMMd('ru'),
            labelStyle: TextStyle(
              color: Colors.grey,
            ),
            majorGridLines: MajorGridLines(dashArray: [1], color: Colors.grey.withOpacity(0.3)),
            axisLine: AxisLine(
              color: Colors.grey.withOpacity(0.3),
              width: 0.4,
            ),
          ),
          primaryYAxis: NumericAxis(
            isVisible: false,
            labelFormat: '{value} см',
            axisLine: AxisLine(
              width: 1,
            ),
            majorTickLines: MajorTickLines(size: 0),
          ),
          series: _getSplineSeries(),
          tooltipBehavior: TooltipBehavior(enable: true),
        ),
      ],
    );
  }

  List<CartesianSeries<Circumference, DateTime>> _getSplineSeries() {
    final Color seriesColor1 = Colors.red;
    final Color seriesColor2 = appTheme.blueA400;
    final Color seriesColor3 = Colors.green;

    return <CartesianSeries<Circumference, DateTime>>[
      SplineAreaSeries<Circumference, DateTime>(
        markerSettings: MarkerSettings(
          isVisible: true,
          color: seriesColor1,
          height: 8,
          width: 8,
        ),
        dataLabelSettings: DataLabelSettings(
          labelAlignment: ChartDataLabelAlignment.top,
          isVisible: true,
        ),
        dataSource: chartData,
        borderColor: seriesColor1,
        gradient: LinearGradient(
          colors: [
            seriesColor1.withOpacity(0.14),
            Colors.transparent,
          ],
          begin: Alignment.topCenter,
          end: Alignment(0, 0.6),
        ),
        name: 'Грудь',
        xValueMapper: (Circumference value, int index) => value.createdAt,
        yValueMapper: (Circumference value, int index) => value.chestCircumference,
      ),
      SplineAreaSeries<Circumference, DateTime>(
        markerSettings: MarkerSettings(
          isVisible: true,
          color: seriesColor2,
          height: 8,
          width: 8,
        ),
        dataLabelSettings: DataLabelSettings(
          labelAlignment: ChartDataLabelAlignment.top,
          isVisible: true,
        ),
        dataSource: chartData,
        borderColor: seriesColor2,
        gradient: LinearGradient(
          colors: [
            seriesColor2.withOpacity(0.14),
            Colors.transparent,
          ],
          begin: Alignment.topCenter,
          end: Alignment(0, 0.6),
        ),
        name: 'Талия',
        xValueMapper: (Circumference value, int index) => value.createdAt,
        yValueMapper: (Circumference value, int index) => value.waistCircumference,
      ),
      SplineAreaSeries<Circumference, DateTime>(
        markerSettings: MarkerSettings(
          isVisible: true,
          color: seriesColor3,
          height: 8,
          width: 8,
        ),
        dataLabelSettings: DataLabelSettings(
          labelAlignment: ChartDataLabelAlignment.top,
          isVisible: true,
        ),
        dataSource: chartData,
        borderColor: seriesColor3,
        gradient: LinearGradient(
          colors: [
            seriesColor3.withOpacity(0.14),
            Colors.transparent,
          ],
          begin: Alignment.topCenter,
          end: Alignment(0, 0.6),
        ),
        name: 'Бёдра',
        xValueMapper: (Circumference value, int index) => value.createdAt,
        yValueMapper: (Circumference value, int index) => value.hipCircumference,
      ),
    ];
  }
}