From 31527eb99f7a530be68fc59450966568539b4253 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 18 Jan 2023 21:30:41 +0100
Subject: [PATCH] Add title and label to rating scale component, fix some bugs

---
 client/src/components/ui/RatingScale.vue | 124 +++++++++++++++++++----
 client/src/pages/StyleGuidePage.vue      |  44 +++++++-
 2 files changed, 141 insertions(+), 27 deletions(-)

diff --git a/client/src/components/ui/RatingScale.vue b/client/src/components/ui/RatingScale.vue
index 28f8b0e8..737e5e3d 100644
--- a/client/src/components/ui/RatingScale.vue
+++ b/client/src/components/ui/RatingScale.vue
@@ -1,3 +1,39 @@
+<template>
+  <div class="p-8 mb-8">
+    <h3 class="text-xl font-normal">{{ props.title }}</h3>
+    <h2 class="text-xl font-bold mb-6">
+      {{ props.text }}
+    </h2>
+    <div class="grid-rows-2 inline-grid grid-cols-[140px_auto] gap-x-2">
+      <h4 class="text-xl">Durchschnitt:</h4>
+      <span
+        class="w-11 h-9 inline-flex justify-center rounded items-center text-xl col-start-2 row-span-2"
+        :style="ratingValueStyle"
+      >
+        {{ props.rating }}
+      </span>
+      <h5 class="text-base">{{ props.answers }} Antworten</h5>
+    </div>
+    <div class="gradient-with-circle pt-3 relative grid grid-cols-8">
+      <div class="h-2 gradient relative z-10" :style="gradientStyle"></div>
+      <div class="h-2 bg-gray-300 absolute empty-bar w-full"></div>
+      <div class="relative circle-wrapper">
+        <div class="circle z-20" :style="circleStyle"></div>
+      </div>
+      <div
+        v-for="legend in legends"
+        :key="legend.index"
+        :class="`legend-${legend.index}`"
+        class="legend"
+      >
+        <div>{{ legend.index }}</div>
+
+        <p>{{ legend.label }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { computed } from "vue";
 
@@ -7,8 +43,18 @@ const yellow: RGB = [250, 200, 82]; // yellow-500
 const lightGreen: RGB = [120, 222, 163]; // green-500
 const darkGreen: RGB = [91, 183, 130]; // green-600
 
+const legends = [
+  { index: 1, label: "Sehr unzufrieden" },
+  { index: 2, label: "Unzufrieden" },
+  { index: 3, label: "Zufrieden" },
+  { index: 4, label: "Sehr zufrieden" },
+];
+
 const props = defineProps<{
   rating: number;
+  answers: number;
+  title: string;
+  text: string;
 }>();
 
 const weight = computed(() => {
@@ -32,7 +78,7 @@ const colors = computed(() => {
 });
 
 const blendColorValue = (v1: number, v2: number, weight: number) => {
-  return v1 * weight + v2 * (1 - weight);
+  return v1 * (1 - weight) + v2 * weight;
 };
 
 const blendColors = (c1: RGB, c2: RGB, weight: number): RGB => {
@@ -58,7 +104,7 @@ const percent = computed(() => {
 });
 
 const leftPosition = computed(() => {
-  return `${Math.round(percent.value)}%`;
+  return `${percent.value.toPrecision(3)}%`;
 });
 
 const rightClip = computed(() => {
@@ -71,7 +117,7 @@ const blendedColor = computed(() => {
 
 const backgroundColor = getRGBString(blendedColor.value);
 
-const style = {
+const circleStyle = {
   backgroundColor,
   left: leftPosition.value,
 };
@@ -87,32 +133,21 @@ const ratingValueStyle = {
 console.log(props);
 </script>
 
-<template>
-  <h3>
-    <span class="text-xl mr-2">Durchschnitt:</span>
-    <span
-      class="w-11 h-9 inline-flex justify-center rounded items-center text-xl"
-      :style="ratingValueStyle"
-    >
-      {{ props.rating }}
-    </span>
-  </h3>
-  <h3>{{ props.rating }} - {{ weight }} = {{ style }}</h3>
-  <div class="gradient-with-circle pt-3 relative">
-    <div class="h-2 gradient relative z-10" :style="gradientStyle"></div>
-    <div class="h-2 bg-gray-300 absolute empty-bar -mt-2 w-full"></div>
-    <div class="circle z-20" :style="style"></div>
-  </div>
-</template>
-
 <style lang="postcss">
+.gradient-with-circle {
+  display: grid;
+  grid-template-areas:
+    ". b b b b b b ."
+    "f f s s t t o o";
+}
+
 .circle {
   width: 32px;
   height: 32px;
   border-radius: 32px;
   position: absolute;
   transform: translateX(-50%);
-  top: 0;
+  top: -12px;
   padding: 3px;
 }
 
@@ -134,5 +169,50 @@ console.log(props);
     theme(colors.green.500) 66%,
     theme(colors.green.600) 100%
   );
+
+  grid-area: b;
+  overflow: visible;
+}
+
+.empty-bar {
+  grid-area: b;
+}
+
+.circle-wrapper {
+  grid-area: b;
+}
+
+.legend {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 16px;
+}
+
+.legend-1 {
+  grid-area: f;
+}
+
+.legend-2 {
+  grid-area: s;
+}
+
+.legend-3 {
+  grid-area: t;
+}
+
+.legend-4 {
+  grid-area: o;
+}
+
+.legend::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 1px;
+  background-color: theme(colors.gray.500);
+  height: 16px;
+  left: 50%;
 }
 </style>
diff --git a/client/src/pages/StyleGuidePage.vue b/client/src/pages/StyleGuidePage.vue
index a46f5eb4..4153be2c 100644
--- a/client/src/pages/StyleGuidePage.vue
+++ b/client/src/pages/StyleGuidePage.vue
@@ -426,11 +426,45 @@ function log(data: any) {
       :items="satisfactionValues"
     />
     <div>
-      <RatingScale :rating="1.1" />
-      <RatingScale :rating="2" />
-      <RatingScale :rating="2.5" />
-      <RatingScale :rating="3.9" />
-      <RatingScale :rating="4" />
+      <RatingScale
+        :rating="1.1"
+        :answers="19"
+        title="Frage 1"
+        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
+      />
+      <RatingScale :rating="2" :answers="17" 
+        title="Frage 2"
+        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
+      />
+      <RatingScale :rating="2.5" :answers="19" 
+        title="Frage 3"
+        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
+      />
+      <RatingScale :rating="3.9" :answers="18" 
+        title="Frage 4"
+        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
+      />
+      <RatingScale :rating="4" :answers="20" 
+        title="Frage 5"
+        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
+      />
+      <RatingScale :rating="1" :answers="20" 
+        title="Frage 6"
+        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
+      />
+      <RatingScale :rating="2" :answers="20" 
+        title="Frage 7"
+        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
+      />
+      <RatingScale :rating="3" :answers="20" 
+        title="Frage 8"
+        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
+      />
+      <RatingScale :rating="4" :answers="20" 
+        title="Frage 9"
+        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
+
+      />
     </div>
   </main>
 </template>