From 4a42cc31e708c0b294b19b97680394c63742c62e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Harrault?= <benoit@harrault.fr>
Date: Tue, 31 Oct 2023 13:26:34 +0100
Subject: [PATCH] Stack global counts and eclecticism charts
---
android/gradle.properties | 4 +-
.../metadata/android/en-US/changelogs/17.txt | 1 +
.../metadata/android/fr-FR/changelogs/17.txt | 1 +
lib/ui/widgets/charts/custom_bar_chart.dart | 42 ++++++---
lib/ui/widgets/charts/custom_line_chart.dart | 86 ++++++++++---------
.../main_screen/timeline_chart_counts.dart | 2 +-
.../timeline_chart_eclecticism.dart | 70 +++++++--------
.../widgets/main_screen/timeline_content.dart | 5 +-
pubspec.yaml | 2 +-
9 files changed, 118 insertions(+), 95 deletions(-)
create mode 100644 fastlane/metadata/android/en-US/changelogs/17.txt
create mode 100644 fastlane/metadata/android/fr-FR/changelogs/17.txt
diff --git a/android/gradle.properties b/android/gradle.properties
index 777ac2d..cd2d833 100644
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -1,5 +1,5 @@
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
diff --git a/fastlane/metadata/android/en-US/changelogs/17.txt b/fastlane/metadata/android/en-US/changelogs/17.txt
new file mode 100644
index 0000000..9af6c65
--- /dev/null
+++ b/fastlane/metadata/android/en-US/changelogs/17.txt
@@ -0,0 +1 @@
+Stack global counts and eclecticism charts.
diff --git a/fastlane/metadata/android/fr-FR/changelogs/17.txt b/fastlane/metadata/android/fr-FR/changelogs/17.txt
new file mode 100644
index 0000000..a3cdc48
--- /dev/null
+++ b/fastlane/metadata/android/fr-FR/changelogs/17.txt
@@ -0,0 +1 @@
+Superposition des graphiques d'écoutes global et d'éclectisme.
diff --git a/lib/ui/widgets/charts/custom_bar_chart.dart b/lib/ui/widgets/charts/custom_bar_chart.dart
index 606b7bd..2d0e851 100644
--- a/lib/ui/widgets/charts/custom_bar_chart.dart
+++ b/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,
+ ),
),
),
),
diff --git a/lib/ui/widgets/charts/custom_line_chart.dart b/lib/ui/widgets/charts/custom_line_chart.dart
index 472ba53..53034a9 100644
--- a/lib/ui/widgets/charts/custom_line_chart.dart
+++ b/lib/ui/widgets/charts/custom_line_chart.dart
@@ -1,9 +1,7 @@
-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,
diff --git a/lib/ui/widgets/main_screen/timeline_chart_counts.dart b/lib/ui/widgets/main_screen/timeline_chart_counts.dart
index 4024e7a..02534a9 100644
--- a/lib/ui/widgets/main_screen/timeline_chart_counts.dart
+++ b/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
diff --git a/lib/ui/widgets/main_screen/timeline_chart_eclecticism.dart b/lib/ui/widgets/main_screen/timeline_chart_eclecticism.dart
index c78e8fa..9db1699 100644
--- a/lib/ui/widgets/main_screen/timeline_chart_eclecticism.dart
+++ b/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,
- );
- }
}
diff --git a/lib/ui/widgets/main_screen/timeline_content.dart b/lib/ui/widgets/main_screen/timeline_content.dart
index f460cdf..1533ee1 100644
--- a/lib/ui/widgets/main_screen/timeline_content.dart
+++ b/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())),
),
diff --git a/pubspec.yaml b/pubspec.yaml
index 9a70a64..a0a42d3 100644
--- a/pubspec.yaml
+++ b/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'
--
GitLab