Stack global counts and eclecticism charts

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=0.0.16
-app.versionCode=16
+app.versionName=0.0.17
+app.versionCode=17

fastlane/metadata/android/en-US/changelogs/17.txt

+Stack global counts and eclecticism charts.

fastlane/metadata/android/fr-FR/changelogs/17.txt

+Superposition des graphiques d'écoutes global et d'éclectisme.

lib/ui/widgets/charts/custom_bar_chart.dart

@@ -37,7 +37,7 @@ class CustomBarChart extends StatelessWidget {
   }
 
   double getBarWidth(double containerWidth, int barsCount) {
-    return 0.7 * (containerWidth / barsCount);
+    return 0.65 * (containerWidth / barsCount);
   }
 
   List<BarChartGroupData> getDataCounts(double barWidth) {
@@ -118,11 +118,21 @@ class CustomBarChart extends StatelessWidget {
     final AxisTitles verticalTitles = AxisTitles(
       sideTitles: SideTitles(
         showTitles: true,
-        reservedSize: 30,
+        reservedSize: 35,
         getTitlesWidget: getVerticalTitlesWidget,
         interval: this.verticalTicksInterval,
       ),
     );
+
+    final AxisTitles verticalSpacer = AxisTitles(
+      sideTitles: SideTitles(
+        showTitles: true,
+        reservedSize: 35,
+        getTitlesWidget: getVerticalTitlesSpacerWidget,
+        interval: this.verticalTicksInterval,
+      ),
+    );
+
     final AxisTitles horizontalTitles = AxisTitles(
       sideTitles: SideTitles(
         showTitles: true,
@@ -136,13 +146,14 @@ class CustomBarChart extends StatelessWidget {
       bottomTitles: horizontalTitles,
       leftTitles: verticalTitles,
       topTitles: none,
-      rightTitles: verticalTitles,
+      rightTitles: verticalSpacer,
     );
   }
 
   Widget getVerticalTitlesWidget(double value, TitleMeta meta) {
     String suffix =
         this.verticalAxisTitleSuffix != '' ? ' ' + this.verticalAxisTitleSuffix : '';
+
     return SideTitleWidget(
       axisSide: meta.axisSide,
       space: 4,
@@ -156,6 +167,14 @@ class CustomBarChart extends StatelessWidget {
     );
   }
 
+  Widget getVerticalTitlesSpacerWidget(double value, TitleMeta meta) {
+    return SideTitleWidget(
+      axisSide: meta.axisSide,
+      space: 4,
+      child: Text(''),
+    );
+  }
+
   Widget getHorizontalTitlesWidget(double value, TitleMeta meta) {
     final DateFormat formatter = DateFormat('dd/MM');
 
@@ -165,13 +184,16 @@ class CustomBarChart extends StatelessWidget {
     return SideTitleWidget(
       axisSide: meta.axisSide,
       space: 4,
-      child: RotationTransition(
-        turns: new AlwaysStoppedAnimation(-30 / 360),
-        child: Text(
-          text,
-          style: TextStyle(
-            color: AppColors.mainTextColor1,
-            fontSize: this.titleFontSize,
+      child: Padding(
+        padding: EdgeInsets.only(right: 10),
+        child: RotationTransition(
+          turns: new AlwaysStoppedAnimation(-30 / 360),
+          child: Text(
+            text,
+            style: TextStyle(
+              color: AppColors.mainTextColor1,
+              fontSize: this.titleFontSize,
+            ),
           ),
         ),
       ),

lib/ui/widgets/charts/custom_line_chart.dart

-import 'package:easy_localization/easy_localization.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 
 import '../../../config/app_colors.dart';
-import '../../../utils/color_extensions.dart';
 
 class CustomLineChart extends StatelessWidget {
   CustomLineChart({super.key});
@@ -20,34 +18,54 @@ class CustomLineChart extends StatelessWidget {
     );
   }
 
-  LinearGradient getGradient(Color baseColor) {
-    return LinearGradient(
-      begin: Alignment.topCenter,
-      end: Alignment.bottomCenter,
-      colors: <Color>[
-        baseColor.lighten(30),
-        baseColor,
-        baseColor.darken(30),
-      ],
-      tileMode: TileMode.mirror,
-    );
-  }
-
   FlBorderData getBorderData() {
     return FlBorderData(
-      show: true,
-      border: Border.all(
-        color: AppColors.borderColor,
-        width: 2,
-      ),
+      show: false,
     );
   }
 
   FlGridData getGridData() {
     return const FlGridData(
+      show: false,
+    );
+  }
+
+  FlTitlesData getTitlesData() {
+    const AxisTitles none = const AxisTitles(
+      sideTitles: SideTitles(showTitles: false),
+    );
+
+    final AxisTitles verticalTitles = AxisTitles(
+      sideTitles: SideTitles(
+        showTitles: true,
+        reservedSize: 35,
+        getTitlesWidget: getVerticalTitlesWidget,
+        interval: 25,
+      ),
+    );
+
+    final AxisTitles verticalSpacer = AxisTitles(
+      sideTitles: SideTitles(
+        showTitles: true,
+        reservedSize: 35,
+        getTitlesWidget: getVerticalTitlesSpacerWidget,
+      ),
+    );
+
+    final AxisTitles horizontalTitles = AxisTitles(
+      sideTitles: SideTitles(
+        showTitles: true,
+        reservedSize: 20,
+        getTitlesWidget: getHorizontalTitlesWidget,
+      ),
+    );
+
+    return FlTitlesData(
       show: true,
-      drawHorizontalLine: true,
-      drawVerticalLine: false,
+      bottomTitles: horizontalTitles,
+      leftTitles: verticalSpacer,
+      topTitles: none,
+      rightTitles: verticalTitles,
     );
   }
 
@@ -56,7 +74,7 @@ class CustomLineChart extends StatelessWidget {
       axisSide: meta.axisSide,
       space: 4,
       child: Text(
-        value.toInt().toString(),
+        value.toInt().toString() + ' %',
         style: TextStyle(
           color: AppColors.mainTextColor1,
           fontSize: this.titleFontSize,
@@ -65,28 +83,18 @@ class CustomLineChart extends StatelessWidget {
     );
   }
 
-  Widget getHorizontalTitlesWidget(double value, TitleMeta meta) {
-    final DateFormat formatter = DateFormat('dd/MM');
-
-    final DateTime date = DateTime.fromMillisecondsSinceEpoch(value.toInt());
-    final String text = formatter.format(date);
-
+  Widget getVerticalTitlesSpacerWidget(double value, TitleMeta meta) {
     return SideTitleWidget(
       axisSide: meta.axisSide,
       space: 4,
-      child: RotationTransition(
-        turns: new AlwaysStoppedAnimation(-30 / 360),
-        child: Text(
-          text,
-          style: TextStyle(
-            color: AppColors.mainTextColor1,
-            fontSize: this.titleFontSize,
-          ),
-        ),
-      ),
+      child: Text(''),
     );
   }
 
+  Widget getHorizontalTitlesWidget(double value, TitleMeta meta) {
+    return Text('');
+  }
+
   LineTouchData getLineTouchDataEclecticism() {
     return LineTouchData(
       handleBuiltInTouches: true,

lib/ui/widgets/main_screen/timeline_chart_counts.dart

@@ -10,7 +10,7 @@ class ChartTimelineCounts extends CustomBarChart {
 
   ChartTimelineCounts({super.key, required this.chartData});
 
-  final double chartHeight = 150.0;
+  final double chartHeight = 120.0;
   final double verticalTicksInterval = 50;
 
   @override

lib/ui/widgets/main_screen/timeline_chart_eclecticism.dart

@@ -13,16 +13,19 @@ class ChartTimelineEclecticism extends CustomLineChart {
 
   @override
   Widget build(BuildContext context) {
+    final horizontalScale = getHorizontalScale();
+
     return Container(
       height: this.chartHeight,
       child: LineChart(
         LineChartData(
           lineBarsData: getDataEclecticism(),
-          backgroundColor: Theme.of(context).colorScheme.onSurface,
           borderData: getBorderData(),
           gridData: getGridData(),
           titlesData: getTitlesData(),
           lineTouchData: getLineTouchDataEclecticism(),
+          minX: horizontalScale['min'],
+          maxX: horizontalScale['max'],
           maxY: 100,
           minY: 0,
         ),
@@ -31,6 +34,33 @@ class ChartTimelineEclecticism extends CustomLineChart {
     );
   }
 
+  Map<String, double> getHorizontalScale() {
+    // Left/right margins: 12h, in milliseconds
+    int margin = 12 * 60 * 60 * 1000;
+
+    double minDateAsDouble = double.maxFinite;
+    double maxDateAsDouble = -double.maxFinite;
+
+    this.chartData.data.keys.forEach((element) {
+      TimelineDataValue? value = this.chartData.data[element];
+      if (value != null) {
+        final double date = DateTime.parse(element).millisecondsSinceEpoch.toDouble();
+
+        if (date < minDateAsDouble) {
+          minDateAsDouble = date;
+        }
+        if (date > maxDateAsDouble) {
+          maxDateAsDouble = date;
+        }
+      }
+    });
+
+    return {
+      'min': minDateAsDouble - margin,
+      'max': maxDateAsDouble + margin,
+    };
+  }
+
   List<LineChartBarData> getDataEclecticism() {
     List<FlSpot> spots = [];
 
@@ -45,53 +75,17 @@ class ChartTimelineEclecticism extends CustomLineChart {
     });
 
     final baseColor = AppColors.contentColorCyan;
-    final gradient = getGradient(baseColor);
     final borderColor = baseColor.darken(20);
 
     return [
       LineChartBarData(
         isCurved: true,
         color: borderColor,
-        barWidth: 3,
+        barWidth: 2,
         isStrokeCapRound: false,
         dotData: const FlDotData(show: false),
-        belowBarData: BarAreaData(
-          show: true,
-          color: baseColor,
-          gradient: gradient,
-        ),
         spots: spots,
       ),
     ];
   }
-
-  FlTitlesData getTitlesData() {
-    const AxisTitles none = const AxisTitles(
-      sideTitles: SideTitles(showTitles: false),
-    );
-
-    final AxisTitles verticalTitles = AxisTitles(
-      sideTitles: SideTitles(
-        showTitles: true,
-        reservedSize: 30,
-        getTitlesWidget: getVerticalTitlesWidget,
-        interval: 25,
-      ),
-    );
-    final AxisTitles horizontalTitles = AxisTitles(
-      sideTitles: SideTitles(
-        showTitles: true,
-        reservedSize: 20,
-        getTitlesWidget: getHorizontalTitlesWidget,
-      ),
-    );
-
-    return FlTitlesData(
-      show: true,
-      bottomTitles: horizontalTitles,
-      leftTitles: verticalTitles,
-      topTitles: none,
-      rightTitles: verticalTitles,
-    );
-  }
 }

lib/ui/widgets/main_screen/timeline_content.dart

@@ -35,14 +35,11 @@ class ChartTimelineCardContent extends StatelessWidget {
         const SizedBox(height: 8),
         this.isLoading
             ? Text(placeholder)
-            : Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.center,
+            : Stack(
                 children: [
                   ChartTimelineCounts(
                     chartData: TimelineData.fromJson(jsonDecode(this.chartData.toString())),
                   ),
-                  const SizedBox(height: 8),
                   ChartTimelineEclecticism(
                     chartData: TimelineData.fromJson(jsonDecode(this.chartData.toString())),
                   ),

pubspec.yaml

@@ -3,7 +3,7 @@ description: Display scrobbles data and charts
 
 publish_to: 'none'
 
-version: 0.0.16+16
+version: 0.0.17+17
 
 environment:
   sdk: '^3.0.0'