From 44c28c77093c5a1c0f10816d9ea72165c1bd9af8 Mon Sep 17 00:00:00 2001
From: Sara <sarasdj@stud.ntnu.no>
Date: Thu, 4 Apr 2024 19:01:58 +0200
Subject: [PATCH] update: improve chart appearance
---
app/lib/widgets/bar_graph/bar_data.dart | 89 +++++++++++++------------
app/lib/widgets/main_layout.dart | 2 +-
2 files changed, 49 insertions(+), 42 deletions(-)
diff --git a/app/lib/widgets/bar_graph/bar_data.dart b/app/lib/widgets/bar_graph/bar_data.dart
index ccc9e890..b0374fe4 100644
--- a/app/lib/widgets/bar_graph/bar_data.dart
+++ b/app/lib/widgets/bar_graph/bar_data.dart
@@ -10,12 +10,12 @@ class BarData extends StatefulWidget {
class _BarDataState extends State<BarData> {
- static const double barWidth = 18;
+ static const double barWidth = 30;
// NB should be rounded to two decimals in server
// NB should be allocated values dynamically
// Bar items show data for 10 previous days
- static const bars = <int, List<double>>{
+ static const barData = <int, List<double>>{
0: [1.5, 4, 2.5],
1: [1.8, 5.6, 3],
2: [1.5, 3.1, 3.5],
@@ -23,9 +23,6 @@ class _BarDataState extends State<BarData> {
4: [2, 2, 5],
5: [1.2, 1.5, 4.3],
6: [1.2, 4.8, 5],
- 7: [1.2, 5.5, 4],
- 8: [1.2, 3.2, 2],
- 9: [1.2, 1, 1.5],
};
int touchedIndex = -1;
@@ -105,46 +102,56 @@ class _BarDataState extends State<BarData> {
padding: const EdgeInsets.only(top: 16),
child: Column(
children: [
- BarChart(
- BarChartData(
- alignment: BarChartAlignment.center,
- maxY: 12,
- minY: 0,
- titlesData: FlTitlesData(
- show: true,
- bottomTitles: SideTitles(
- showTitles: true,
- reservedSize: 5,
- getTextStyles: (value) => const TextStyle(color: Colors.white60),
- ),
- leftTitles: SideTitles(
- showTitles: true,
- getTextStyles: (value) => const TextStyle(color: Colors.white60),
- margin: 10,
- reservedSize: 30,
- interval: 2,
- ),
- ),
- groupsSpace: 12,
- gridData: FlGridData(
- show: true,
- ),
- borderData: FlBorderData(
- show: false,
- ),
- barGroups: bars.entries
- .map(
- (e) => generateGroup(
- e.key,
- e.value[0],
- e.value[1],
- e.value[2],
+ SizedBox(
+ width: MediaQuery.of(context).size.width, // Set the desired width
+ child: BarChart(
+ BarChartData(
+ alignment: BarChartAlignment.center,
+ maxY: 12,
+ minY: 0,
+ titlesData: FlTitlesData(
+ show: true,
+ bottomTitles: SideTitles(
+ showTitles: true,
+ reservedSize: 5,
+ getTextStyles: (value) => const TextStyle(color: Colors.white60),
+ ),
+ leftTitles: SideTitles(
+ showTitles: true,
+ getTextStyles: (value) => const TextStyle(color: Colors.white60),
+ margin: 10,
+ reservedSize: 30,
+ interval: 2,
+ ),
+ rightTitles: SideTitles(
+ showTitles: true,
+ getTextStyles: (value) => const TextStyle(color: Colors.white60),
+ margin: 10,
+ reservedSize: 30,
+ interval: 2,
+ ),
+ ),
+ groupsSpace: 14,
+ gridData: FlGridData(
+ show: true,
),
- ).toList(),
+ borderData: FlBorderData(
+ show: false,
+ ),
+ barGroups: barData.entries
+ .map(
+ (e) => generateGroup(
+ e.key,
+ e.value[0],
+ e.value[1],
+ e.value[2],
+ ),
+ ).toList(),
+ ),
),
),
Padding( // Legend items
- padding: const EdgeInsets.only(top: 16),
+ padding: const EdgeInsets.only(top: 20),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
diff --git a/app/lib/widgets/main_layout.dart b/app/lib/widgets/main_layout.dart
index a4391d8f..4dcfd6db 100644
--- a/app/lib/widgets/main_layout.dart
+++ b/app/lib/widgets/main_layout.dart
@@ -220,7 +220,7 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: SizedBox(
- width: screenWidth * boxWidth,
+ width: screenWidth * boxWidth * 1.2,
height: screenWidth * boxHeight * 1.5, // NB: make dynamic
child: Align(
alignment: Alignment.topLeft,
--
GitLab