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,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,

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,