import 'package:eatvio_app/features/profile/models/circumference_model.dart'; import 'package:eatvio_app/features/profile/presentation/bloc/profile_cubit/profile_cubit.dart'; import 'package:eatvio_app/core/theme/theme_helper.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; class CircumferenceChartWidget extends StatefulWidget { final List circumferencePoints; final ProfileCubit? profileCubit; const CircumferenceChartWidget({ super.key, required this.circumferencePoints, this.profileCubit, }); @override State createState() => _CircumferenceChartWidgetState(); } class _CircumferenceChartWidgetState extends State { late FixedExtentScrollController chestController; late FixedExtentScrollController waistController; late FixedExtentScrollController hipController; late int chest; late int waist; late int hip; @override Widget build(BuildContext context) { return Column( children: [ if (widget.circumferencePoints.isNotEmpty) Padding( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: Row( children: [ Text( '${widget.circumferencePoints.last.chestCircumference}', style: const TextStyle( color: Colors.black, fontSize: 40, fontWeight: FontWeight.w500, ), ), if (widget.circumferencePoints.length == 1) Container( margin: const EdgeInsets.symmetric(horizontal: 12), width: 8, height: 8, decoration: const BoxDecoration( shape: BoxShape.circle, color: Colors.black12, ), ), if (widget.circumferencePoints.length > 1) widget.circumferencePoints.last.chestCircumference > widget.circumferencePoints[widget.circumferencePoints.length - 2].chestCircumference ? const Icon( Icons.arrow_drop_up, size: 40, color: Colors.grey, ) : const Icon( Icons.arrow_drop_down, size: 40, color: Colors.grey, ), Text( '${widget.circumferencePoints.last.waistCircumference}', style: const TextStyle( color: Colors.black, fontSize: 40, fontWeight: FontWeight.w500, ), ), if (widget.circumferencePoints.length == 1) Container( margin: const EdgeInsets.symmetric(horizontal: 12), width: 8, height: 8, decoration: const BoxDecoration( shape: BoxShape.circle, color: Colors.black12, ), ), if (widget.circumferencePoints.length > 1) widget.circumferencePoints.last.waistCircumference > widget.circumferencePoints[widget.circumferencePoints.length - 2].waistCircumference ? const Icon( Icons.arrow_drop_up, size: 40, color: Colors.grey, ) : const Icon( Icons.arrow_drop_down, size: 40, color: Colors.grey, ), Text( '${widget.circumferencePoints.last.hipCircumference}', style: const TextStyle( color: Colors.black, fontSize: 40, fontWeight: FontWeight.w500, ), ), if (widget.circumferencePoints.length == 1) Container( margin: const EdgeInsets.symmetric(horizontal: 12), width: 8, height: 8, decoration: const BoxDecoration( shape: BoxShape.circle, color: Colors.black12, ), ), if (widget.circumferencePoints.length > 1) widget.circumferencePoints.last.hipCircumference > widget.circumferencePoints[widget.circumferencePoints.length - 2].hipCircumference ? const Icon( Icons.arrow_drop_up, size: 40, color: Colors.grey, ) : const Icon( Icons.arrow_drop_down, size: 40, color: Colors.grey, ), ], ), ), Stack( alignment: Alignment.center, children: [ SfCartesianChart( margin: const EdgeInsets.symmetric(horizontal: 8), enableAxisAnimation: true, plotAreaBorderWidth: 0, trackballBehavior: TrackballBehavior( enable: true, activationMode: ActivationMode.singleTap, tooltipDisplayMode: TrackballDisplayMode.groupAllPoints, tooltipSettings: const InteractiveTooltip(), lineType: TrackballLineType.vertical, ), primaryXAxis: DateTimeCategoryAxis( tickPosition: TickPosition.inside, majorTickLines: const MajorTickLines( size: 0, ), edgeLabelPlacement: EdgeLabelPlacement.shift, dateFormat: DateFormat.MMMd('ru'), labelStyle: const TextStyle( color: Colors.grey, ), majorGridLines: MajorGridLines(dashArray: const [1], color: Colors.grey.withValues(alpha: 0.3)), axisLine: AxisLine( color: Colors.grey.withValues(alpha: 0.3), width: 0.4, ), ), primaryYAxis: const NumericAxis( isVisible: false, labelFormat: '{value} см', axisLine: AxisLine( width: 1, ), majorTickLines: MajorTickLines(size: 0), ), series: _getSplineSeries(), tooltipBehavior: TooltipBehavior(enable: true), ), if (widget.profileCubit != null) Positioned( right: 16, bottom: 16, child: FloatingActionButton.small( heroTag: 'addCircumference', onPressed: () { if (widget.circumferencePoints.isNotEmpty) { chest = widget.circumferencePoints.last.chestCircumference; waist = widget.circumferencePoints.last.waistCircumference; hip = widget.circumferencePoints.last.hipCircumference; chestController = FixedExtentScrollController(initialItem: chest - 20); waistController = FixedExtentScrollController(initialItem: waist - 20); hipController = FixedExtentScrollController(initialItem: hip - 20); } else { chestController = FixedExtentScrollController(); waistController = FixedExtentScrollController(); hipController = FixedExtentScrollController(); } showModalBottomSheet( useRootNavigator: true, context: context, builder: (context) { return SafeArea( child: Column( children: [ Expanded( child: Row( children: [ Expanded( child: CupertinoPicker( magnification: 1.22, squeeze: 1.2, useMagnifier: true, scrollController: chestController, itemExtent: 24, onSelectedItemChanged: (int value) { chest = value; }, children: [ for (int i = 20; i < 200; i++) Text('$i'), ], ), ), Expanded( child: CupertinoPicker( magnification: 1.22, squeeze: 1.2, useMagnifier: true, scrollController: waistController, itemExtent: 24, onSelectedItemChanged: (int value) { waist = value; }, children: [ for (int i = 20; i < 200; i++) Text('$i'), ], ), ), Expanded( child: CupertinoPicker( magnification: 1.22, squeeze: 1.2, useMagnifier: true, scrollController: hipController, itemExtent: 24, onSelectedItemChanged: (int value) { hip = value; }, children: [ for (int i = 20; i < 200; i++) Text('$i'), ], ), ), ], ), ), InkWell( onTap: () { widget.profileCubit?.addCircumference( chestCircumference: chest + 20, waistCircumference: waist + 20, hipCircumference: hip + 20, ); Navigator.of(context).pop(); }, borderRadius: BorderRadius.circular(16), child: Ink( width: MediaQuery.of(context).size.width - 32, padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: appTheme.blueA400, borderRadius: BorderRadius.circular(16), ), child: const Center( child: Text( 'Сохранить', style: TextStyle( color: Colors.white, ), ), ), ), ), ], ), ); }, ); }, backgroundColor: appTheme.blueA400, shape: const CircleBorder(), child: const Icon( Icons.add, color: Colors.white, ), ), ), if (widget.circumferencePoints.isEmpty) const Padding( padding: EdgeInsets.symmetric(horizontal: 48), child: Text( 'Добавьте Ваши замеры', textAlign: TextAlign.center, ), ), ], ), ], ); } List> _getSplineSeries() { const Color seriesColor1 = Colors.red; final Color seriesColor2 = appTheme.blueA400; const Color seriesColor3 = Colors.green; return >[ SplineAreaSeries( markerSettings: const MarkerSettings( isVisible: true, color: seriesColor1, height: 8, width: 8, ), dataLabelSettings: const DataLabelSettings( labelAlignment: ChartDataLabelAlignment.top, isVisible: true, ), dataSource: widget.circumferencePoints, borderColor: seriesColor1, gradient: LinearGradient( colors: [ seriesColor1.withValues(alpha: 0.14), Colors.transparent, ], begin: Alignment.topCenter, end: const Alignment(0, 0.6), ), name: 'Грудь', xValueMapper: (CircumferenceModel value, int index) => value.createdAt, yValueMapper: (CircumferenceModel value, int index) => value.chestCircumference, ), SplineAreaSeries( markerSettings: MarkerSettings( isVisible: true, color: seriesColor2, height: 8, width: 8, ), dataLabelSettings: const DataLabelSettings( labelAlignment: ChartDataLabelAlignment.top, isVisible: true, ), dataSource: widget.circumferencePoints, borderColor: seriesColor2, gradient: LinearGradient( colors: [ seriesColor2.withValues(alpha: 0.14), Colors.transparent, ], begin: Alignment.topCenter, end: const Alignment(0, 0.6), ), name: 'Талия', xValueMapper: (CircumferenceModel value, int index) => value.createdAt, yValueMapper: (CircumferenceModel value, int index) => value.waistCircumference, ), SplineAreaSeries( markerSettings: const MarkerSettings( isVisible: true, color: seriesColor3, height: 8, width: 8, ), dataLabelSettings: const DataLabelSettings( labelAlignment: ChartDataLabelAlignment.top, isVisible: true, ), dataSource: widget.circumferencePoints, borderColor: seriesColor3, gradient: LinearGradient( colors: [ seriesColor3.withValues(alpha: 0.14), Colors.transparent, ], begin: Alignment.topCenter, end: const Alignment(0, 0.6), ), name: 'Бёдра', xValueMapper: (CircumferenceModel value, int index) => value.createdAt, yValueMapper: (CircumferenceModel value, int index) => value.hipCircumference, ), ]; } }