From 956970ce5f00074b814d7f2be5b1ecdc23eb7af7 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 26 Jan 2023 14:00:38 +0100
Subject: [PATCH] Style VerticalbarChart

---
 client/src/components/ui/VerticalBarChart.vue | 42 +++++++++++++++++--
 client/src/locales/de.json                    |  4 +-
 client/src/pages/cockpit/FeedbackPage.vue     |  5 ++-
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ui/VerticalBarChart.vue b/client/src/components/ui/VerticalBarChart.vue
index ad42c832..4063bb9c 100644
--- a/client/src/components/ui/VerticalBarChart.vue
+++ b/client/src/components/ui/VerticalBarChart.vue
@@ -1,7 +1,8 @@
 <template>
   <QuestionSummary :title="props.title" :text="props.text">
+    <h5 class="text-base mb-6">{{ answers }} {{ $t("feedback.answers") }}</h5>
     <div
-      class="mb-10 grid grid-cols-horizontal-bar-chart-slim grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart md:grid-cols-horizontal-bar-chart"
+      class="grid grid-cols-horizontal-bar-chart-slim grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart md:grid-cols-horizontal-bar-chart"
     >
       <div class="-mt-[10px] flex flex-col justify-between pb-[30px] grid-in-y-axis">
         <span
@@ -27,20 +28,44 @@
         :style="greenStyle"
       ></div>
       <div class="self-center justify-self-center font-bold grid-in-left-label">
-        Nein
+        <Popover class="relative">
+          <PopoverButton class="focus:outline-none">
+            {{ $t("general.no") }}
+          </PopoverButton>
+          <PopoverPanel
+            class="absolute top-[-200%] font-normal z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm"
+          >
+            <p>
+              {{ `"${$t('general.no')}" ${numberOfRatings["no"]} ${$t("feedback.answers")}` }}
+            </p>
+          </PopoverPanel>
+        </Popover>
       </div>
       <div class="self-center justify-self-center font-bold grid-in-right-label">
-        Ja
+        <Popover class="relative">
+          <PopoverButton class="focus:outline-none">
+            {{ $t("general.yes") }}
+          </PopoverButton>
+          <PopoverPanel
+            class="absolute top-[-200%] font-normal z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm"
+          >
+            <p>
+              {{ `"${$t('general.yes')}" ${numberOfRatings["yes"]} ${$t("feedback.answers")}` }}
+            </p>
+          </PopoverPanel>
+        </Popover>
       </div>
     </div>
   </QuestionSummary>
 </template>
 
 <script setup lang="ts">
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import QuestionSummary from "@/components/ui/QuestionSummary.vue";
 import { computed } from "vue";
 const props = defineProps<{
   ratio: number;
+  ratings: boolean[];
   title: string;
   text: string;
 }>();
@@ -53,6 +78,17 @@ const redHeight = computed(() => {
   return 1 - ratio.value;
 });
 
+const answers = computed(() => {
+  return props.ratings.length;
+});
+
+const numberOfRatings = computed(() => {
+  return {
+    yes: props.ratings.filter((rating) => rating).length,
+    no: props.ratings.filter((rating) => !rating).length,
+  };
+});
+
 const redStyle = {
   height: `${100 * redHeight.value}%`,
 };
diff --git a/client/src/locales/de.json b/client/src/locales/de.json
index f0da2921..f8498a89 100644
--- a/client/src/locales/de.json
+++ b/client/src/locales/de.json
@@ -20,7 +20,9 @@
     "certificate": "Zertifikat | Zertifikate",
     "notification": "Benachrichtigung | Benachrichtigungen",
     "profileLink": "Profil anzeigen",
-    "shop": "Shop"
+    "shop": "Shop",
+    "yes": "Ja",
+    "no": "Nein"
   },
   "mainNavigation": {
     "logout": "Abmelden",
diff --git a/client/src/pages/cockpit/FeedbackPage.vue b/client/src/pages/cockpit/FeedbackPage.vue
index d39b6c0b..a3a2501d 100644
--- a/client/src/pages/cockpit/FeedbackPage.vue
+++ b/client/src/pages/cockpit/FeedbackPage.vue
@@ -17,16 +17,19 @@
           {{ $t("feedback.feedbackPageInfo") }}
         </p>
         <ol v-if="Object.keys(feedbackData).length > 0">
-          <li v-for="(question, i) in orderedQuestions" class="mb-8 bg-white p-8">
+          <li v-for="(question, i) in orderedQuestions">
             <RatingScale
               v-if="ratingKeys.includes(question.key)"
+              class="bg-white mb-8"
               :ratings="feedbackData.questions[question.key]"
               :title="`${$t('feedback.questionTitle')} ${i}`"
               :text="question.question"
             />
             <VerticalBarChart
+              class="bg-white mb-8"
               v-else-if="verticalChartKyes.includes(question.key)"
               :title="`${$t('feedback.questionTitle')} ${i}`"
+              :ratings="feedbackData.questions[question.key]"
               :text="question.question"
               :ratio="0.2"
             />