update: improve chart appearance

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,7 +102,9 @@ class _BarDataState extends State<BarData> {
         padding: const EdgeInsets.only(top: 16),
         child: Column(
           children: [
-            BarChart(
+            SizedBox(
+              width: MediaQuery.of(context).size.width, // Set the desired width
+              child: BarChart(
                 BarChartData(
                   alignment: BarChartAlignment.center,
                   maxY: 12,
@@ -124,15 +123,22 @@ class _BarDataState extends State<BarData> {
                       reservedSize: 30,
                       interval: 2,
                     ),
+                    rightTitles: SideTitles(
+                      showTitles: true,
+                      getTextStyles: (value) => const TextStyle(color: Colors.white60),
+                      margin: 10,
+                      reservedSize: 30,
+                      interval: 2,
+                    ),
                   ),
-            groupsSpace: 12,
+                  groupsSpace: 14,
                   gridData: FlGridData(
                     show: true,
                   ),
                   borderData: FlBorderData(
                     show: false,
                   ),
-                barGroups: bars.entries
+                  barGroups: barData.entries
                       .map(
                         (e) => generateGroup(
                       e.key,
@@ -143,8 +149,9 @@ class _BarDataState extends State<BarData> {
                   ).toList(),
                 ),
               ),
+            ),
             Padding( // Legend items
-              padding: const EdgeInsets.only(top: 16),
+              padding: const EdgeInsets.only(top: 20),
               child: Center(
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,

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,