From 90269af04f08f52645b3f15d92b0d33fee3809a4 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sun, 12 Nov 2023 11:58:57 +0100
Subject: [PATCH] Client - style fix on charts

---
 .../components/Common/StatsChart/Chart.vue    | 23 ++++++++++++++++---
 .../WorkoutDetail/WorkoutChart/index.vue      | 23 ++++++++++++-------
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/fittrackee_client/src/components/Common/StatsChart/Chart.vue b/fittrackee_client/src/components/Common/StatsChart/Chart.vue
index 85f7519a..4a953a5c 100644
--- a/fittrackee_client/src/components/Common/StatsChart/Chart.vue
+++ b/fittrackee_client/src/components/Common/StatsChart/Chart.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="chart">
-    <Bar :data="chartData" :options="options" class="bar-chart" />
+  <div class="bar-chart" :class="{ minimal: !fullStats }">
+    <Bar :data="chartData" :options="options" />
   </div>
 </template>
 
@@ -41,7 +41,7 @@
   }))
   const options = computed<ChartOptions<'bar'>>(() => ({
     responsive: true,
-    maintainAspectRatio: true,
+    maintainAspectRatio: false,
     animation: false,
     layout: {
       padding: {
@@ -198,3 +198,20 @@
       : 'km'
   }
 </script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/vars.scss';
+
+  .bar-chart {
+    min-height: 400px;
+    &.minimal {
+      min-height: 300px;
+    }
+
+    @media screen and (max-width: $small-limit) {
+      &.minimal {
+        min-height: 290px;
+      }
+    }
+  }
+</style>
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue
index 6a7197d8..fb57192f 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue
@@ -24,13 +24,14 @@
           </label>
         </div>
         <div id="chart-legend" />
-        <Line
-          class="line-chart"
-          :data="chartData"
-          :options="options"
-          :plugins="plugins"
-          @mouseleave="emitEmptyCoordinates"
-        />
+        <div class="line-chart">
+          <Line
+            :data="chartData"
+            :options="options"
+            :plugins="plugins"
+            @mouseleave="emitEmptyCoordinates"
+          />
+        </div>
         <div class="chart-info">
           <div class="no-data-cleaning">
             {{ $t('workouts.NO_DATA_CLEANING') }}
@@ -107,7 +108,7 @@
   )
   const options = computed<ChartOptions<'line'>>(() => ({
     responsive: true,
-    maintainAspectRatio: true,
+    maintainAspectRatio: false,
     animation: false,
     layout: {
       padding: {
@@ -278,6 +279,9 @@
             }
           }
         }
+        .line-chart {
+          min-height: 400px;
+        }
       }
 
       @media screen and (max-width: $small-limit) {
@@ -293,6 +297,9 @@
               padding: 0 $default-padding * 2;
             }
           }
+          .line-chart {
+            min-height: 338px;
+          }
         }
       }
     }