Add horizontal bar chart component

client/src/components/ui/HorizontalBarChart.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="overflow-hidden">
+    <h1>Horizontal Barchart</h1>
+    <div
+      class="h-[200px] relative border-y border-gray-400 flex justify-around content-center items-end"
+    >
+      <div class="background"></div>
+      <div class="w-72 bg-red-500 inline-block relative" :style="redStyle"></div>
+      <div class="w-72 bg-green-500 inline-block relative" :style="greenStyle"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+const props = defineProps<{
+  ratio: number;
+}>();
+
+const redHeight = computed(() => {
+  return 1 - props.ratio;
+});
+
+const redStyle = {
+  height: `${100 * redHeight.value}%`,
+};
+
+const greenStyle = {
+  height: `${100 * props.ratio}%`,
+};
+</script>
+
+<style lang="postcss">
+.background {
+  position: absolute;
+  border-top: 1px theme(colors.gray.400) solid;
+  border-bottom: 1px theme(colors.gray.400) solid;
+  width: 100%;
+  top: 50%;
+  height: 50%;
+  transform: translateY(-50%);
+}
+
+.background::before {
+  content: "";
+  border-top: 1px theme(colors.gray.400) solid;
+  width: 100%;
+  height: 0;
+  position: absolute;
+  top: 50%;
+}
+</style>

client/src/pages/StyleGuidePage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import IconLogout from "@/components/icons/IconLogout.vue";
 import IconSettings from "@/components/icons/IconSettings.vue";
+import HorizontalBarChart from "@/components/ui/HorizontalBarChart.vue";
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
 import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
 import ItDropdown from "@/components/ui/ItDropdown.vue";
@@ -432,39 +433,59 @@ function log(data: any) {
         title="Frage 1"
         text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
       />
-      <RatingScale :rating="2" :answers="17" 
+      <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" 
+      <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" 
+      <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" 
+      <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" 
+      <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" 
+      <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" 
+      <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" 
+      <RatingScale
+        :rating="4"
+        :answers="20"
         title="Frage 9"
         text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
-
       />
+      <HorizontalBarChart :ratio="0.5" />
+      <HorizontalBarChart :ratio="0.8" />
+      <HorizontalBarChart :ratio="0.2" />
+      <HorizontalBarChart :ratio="2" />
+      <HorizontalBarChart :ratio="0" />
     </div>
   </main>
 </template>