Add first version of the repetition chart and finally remove old chart library

lib/helpers/colors.dart

@@ -1,3 +1,4 @@
+import 'dart:math';
 import 'dart:ui';
 
 const LIST_OF_COLORS8 = [
@@ -40,3 +41,18 @@ Iterable<Color> generateChartColors(int nrOfItems) sync* {
     yield color;
   }
 }
+
+/// Returns a random color based on the given seed
+Color getRandomColor(int nrOfItems, int seed) {
+  final List<Color> colors;
+
+  if (nrOfItems <= 3) {
+    colors = LIST_OF_COLORS3;
+  } else if (nrOfItems <= 5) {
+    colors = LIST_OF_COLORS5;
+  } else {
+    colors = LIST_OF_COLORS8;
+  }
+
+  return colors[Random(seed).nextInt(colors.length)];
+}

lib/providers/workout_plans.dart

@@ -300,6 +300,8 @@ class WorkoutPlansProvider with ChangeNotifier {
         query: {'id': base.id.toString()},
       ),
     );
+    // log(data.toString());
+
     return data;
   }
 

lib/theme/theme.dart

@@ -16,7 +16,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import 'package:charts_flutter/flutter.dart' as charts;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:table_calendar/table_calendar.dart';
@@ -30,8 +29,6 @@ const Color wgerTextMuted = Colors.black38;
 const Color wgerBackground = Color(0xfff4f4f6);
 
 // Chart colors
-const charts.Color wgerChartPrimaryColor = charts.Color(r: 0x2a, g: 0x4c, b: 0x7d);
-const charts.Color wgerChartSecondaryColor = charts.Color(r: 0xe6, g: 0x39, b: 0x46);
 
 /// Original sizes for the material text theme
 /// https://api.flutter.dev/flutter/material/TextTheme-class.html

lib/widgets/workouts/charts.dart

@@ -16,10 +16,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import 'package:charts_flutter/flutter.dart' as charts;
+import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
-import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:intl/intl.dart';
+import 'package:wger/helpers/colors.dart';
 
 /// Sample time series data type.
 class TimeSeriesLog {
@@ -29,53 +29,112 @@ class TimeSeriesLog {
   TimeSeriesLog(this.time, this.weight);
 }
 
-class LogChartWidget extends StatelessWidget {
+class LogChartWidgetFl extends StatefulWidget {
   final Map _data;
   final DateTime _currentDate;
-  const LogChartWidget(this._data, this._currentDate);
+
+  const LogChartWidgetFl(this._data, this._currentDate);
+
+  @override
+  State<LogChartWidgetFl> createState() => _LogChartWidgetFlState();
+}
+
+class _LogChartWidgetFlState extends State<LogChartWidgetFl> {
+  final interval = 15 * Duration.millisecondsPerDay / 1000 / 60;
 
   @override
   Widget build(BuildContext context) {
-    return _data.containsKey('chart_data') && _data['chart_data'].length > 0
-        ? charts.TimeSeriesChart(
-            [
-              ..._data['chart_data'].map((e) {
-                return charts.Series<TimeSeriesLog, DateTime>(
-                  id: '${e.first['reps']} ${AppLocalizations.of(context).reps}',
-                  domainFn: (datum, index) => datum.time,
-                  measureFn: (datum, index) => datum.weight,
-                  data: [
-                    ...e.map(
-                      (entry) => TimeSeriesLog(
-                        DateTime.parse(entry['date']),
-                        double.parse(entry['weight']),
-                      ),
-                    ),
-                  ],
-                );
-              }),
-            ],
-            primaryMeasureAxis: const charts.NumericAxisSpec(
-              tickProviderSpec: charts.BasicNumericTickProviderSpec(zeroBound: false),
-            ),
-            behaviors: [
-              charts.SeriesLegend(
-                position: charts.BehaviorPosition.bottom,
-                desiredMaxColumns: 4,
+    return AspectRatio(
+      aspectRatio: 1.70,
+      child: Padding(
+        padding: const EdgeInsets.only(
+          right: 18,
+          left: 12,
+          top: 24,
+          bottom: 12,
+        ),
+        child: LineChart(
+          mainData(),
+        ),
+      ),
+    );
+  }
+
+  LineChartData mainData() {
+    return LineChartData(
+      gridData: FlGridData(
+        show: true,
+        drawVerticalLine: true,
+        //horizontalInterval: 1,
+        //verticalInterval: interval,
+        getDrawingHorizontalLine: (value) {
+          return FlLine(
+            color: Colors.grey,
+            strokeWidth: 1,
+          );
+        },
+        getDrawingVerticalLine: (value) {
+          return FlLine(
+            color: Colors.grey,
+            strokeWidth: 1,
+          );
+        },
+      ),
+      titlesData: FlTitlesData(
+        show: true,
+        rightTitles: AxisTitles(
+          sideTitles: SideTitles(showTitles: false),
+        ),
+        topTitles: AxisTitles(
+          sideTitles: SideTitles(showTitles: false),
+        ),
+        bottomTitles: AxisTitles(
+          sideTitles: SideTitles(
+            showTitles: true,
+            getTitlesWidget: (value, meta) {
+              final DateTime date = DateTime.fromMillisecondsSinceEpoch(value.toInt() * 1000 * 60);
+              return Text(
+                DateFormat.yMd(Localizations.localeOf(context).languageCode).format(date),
+              );
+            },
+            interval: interval,
+          ),
+        ),
+        leftTitles: AxisTitles(
+          sideTitles: SideTitles(
+            showTitles: true,
+            reservedSize: 50,
+            getTitlesWidget: (value, meta) {
+              return Text(value.toString());
+            },
+          ),
+        ),
+      ),
+      borderData: FlBorderData(
+        show: true,
+        border: Border.all(color: const Color(0xff37434d)),
+      ),
+      lineBarsData: [
+        ...widget._data['chart_data'].map(
+          (e) {
+            return LineChartBarData(
+              spots: [
+                ...e.map((entry) => FlSpot(
+                      DateTime.parse(entry['date']).millisecondsSinceEpoch / 1000 / 60,
+                      double.parse(entry['weight']),
+                    ))
+              ],
+              isCurved: false,
+              color: getRandomColor(widget._data['chart_data'].length, e.first['reps']),
+              barWidth: 2,
+              isStrokeCapRound: true,
+              dotData: FlDotData(
+                show: false,
               ),
-              charts.RangeAnnotation([
-                charts.LineAnnotationSegment(
-                  _currentDate, charts.RangeAnnotationAxisType.domain,
-                  strokeWidthPx: 2,
-                  labelPosition: charts.AnnotationLabelPosition.margin,
-                  color: charts.Color.black,
-                  dashPattern: [0, 1, 1, 1],
-                  //startLabel: DateFormat.yMd(Localizations.localeOf(context).languageCode)
-                  //      .format(_currentDate),
-                )
-              ]),
-            ],
-          )
-        : Container();
+            );
+          },
+        )
+      ],
+    );
   }
 }

lib/widgets/workouts/log.dart

@@ -17,7 +17,6 @@
  */
 
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
 import 'package:wger/helpers/ui.dart';
@@ -48,7 +47,7 @@ class ExerciseLogChart extends StatelessWidget {
         height: 150,
         child: snapshot.connectionState == ConnectionState.waiting
             ? const Center(child: CircularProgressIndicator())
-            : LogChartWidget(snapshot.data!, _currentDate),
+            : LogChartWidgetFl(snapshot.data!, _currentDate),
       ),
     );
   }