From eaf6caf66138118dd0581feec8f1c03563c5d493 Mon Sep 17 00:00:00 2001
From: Olivier Ribiere <olivier.ribiere@geneva.msf.org>
Date: Sat, 2 Mar 2024 13:50:10 +0100
Subject: [PATCH] fix(histogram): review histogram style and values

---
 src/Store.ts                       |  2 +-
 src/components/Date.vue            |  2 +-
 src/components/HistogramSlider.vue | 20 ++++++++++++++++++--
 src/locales/de.json                |  3 +++
 src/locales/en.json                |  3 +++
 src/locales/fr.json                |  3 +++
 src/locales/it.json                |  3 +++
 7 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/Store.ts b/src/Store.ts
index 5a25bb2..33072fb 100644
--- a/src/Store.ts
+++ b/src/Store.ts
@@ -16,7 +16,7 @@ export class Store {
     popUpType: null,
     popUpData: null,
     virtualVisitAlreadyOpened: false,
-    minDate: new Date(2016, 0, 1),
+    minDate: new Date(2016, 2, 7),
     maxDate: new Date(),
     switch: {
       rescue: true,
diff --git a/src/components/Date.vue b/src/components/Date.vue
index 0fee858..28461a8 100644
--- a/src/components/Date.vue
+++ b/src/components/Date.vue
@@ -8,7 +8,7 @@
           <h1 class="font-bold text-secondary">{{ $t("popup.dateFilter") }}</h1>
           <button id="dateCloseButton" type="button" class="focus:outline-none text-grayClose" @click="toggleVisible">X</button>
         </div>
-        <Datepicker v-model="date" @update:modelValue="handleDate" inline autoApply/>
+        <Datepicker v-model="date" @update:modelValue="handleDate" inline autoApply :enable-time-picker="false"/>
       </div>
     </div>
   </div>
diff --git a/src/components/HistogramSlider.vue b/src/components/HistogramSlider.vue
index c5865f3..7b2320b 100644
--- a/src/components/HistogramSlider.vue
+++ b/src/components/HistogramSlider.vue
@@ -6,6 +6,7 @@
       <div class="slider-wrapper">
         <input type="text" :id="'histogram-slider'" :name="'histogram-slider'" value=""/>
       </div>
+      <div class="histogram-text hidden lg:block">{{ $t("histogram.text") }}</div>
     </div>
     <span class="hidden md:block icon icon-calendar text-4xl text-right color-secondary cursor-pointer" @click="toggleMaxDateVisibility"/>
   </div>
@@ -84,7 +85,22 @@ export default defineComponent({
 
 <style>
   .histo{
-    margin-left: 3%;
+    margin-left: 3% !important;
+    height: 20% !important;
+    padding: 20px !important;
+  }
+
+  @media only screen and (max-width: 500px){
+    .histo{
+      padding: 0px !important;
+      width: 93% !important;
+    }
+  }
+
+  .histogram-text{
+    font-size: 0.7em !important;
+    margin-top: 5px;
+    font-style: italic;
   }
 
 .vue-histogram-view {
@@ -327,7 +343,7 @@ export default defineComponent({
   line-height: 1;
   text-shadow: none;
   padding: 3px 5px;
-  background-color: var(--label-color);
+  background-color: rgba(26, 39, 71, 0.7);
   color: white;
   border-radius: 4px;
 }
diff --git a/src/locales/de.json b/src/locales/de.json
index 8075ad6..b446b1d 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -59,5 +59,8 @@
         "testimony" : "Zeugnisse",
         "peoplesNB" : "Anzahl der Personen",
         "shipwreckNB" : "Anzahl der Schiffswracks"
+    },
+    "histogram": {
+        "text": "Anzahl der Operationen pro Monat"
     }
 }
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 63927d1..3f930a5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -59,5 +59,8 @@
         "testimony" : "Testimonies",
         "peoplesNB" : "Number of people",
         "shipwreckNB" : "Number of shipwreck"
+    },
+    "histogram": {
+        "text": "Number of operation per month"
     }
 }
\ No newline at end of file
diff --git a/src/locales/fr.json b/src/locales/fr.json
index f7c192b..03c6060 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -59,5 +59,8 @@
         "testimony" : "Témoignages",
         "peoplesNB" : "Nombre de personnes",
         "shipwreckNB" : "Nombre d'épaves"
+    },
+    "histogram": {
+        "text": "Nombre d'opérations par mois"
     }
 }
\ No newline at end of file
diff --git a/src/locales/it.json b/src/locales/it.json
index 5b2db5f..b977bfd 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -59,5 +59,8 @@
         "testimony" : "Testimonianze",
         "peoplesNB" : "Numero di persone",
         "shipwreckNB" : "Numero di naufragi"
+    },
+    "histogram": {
+        "text": "Numero di operazioni al mese"
     }
 }
\ No newline at end of file