Update styling for horizontal bar chart

client/src/components/ui/HorizontalBarChart.vue

@@ -1,13 +1,26 @@
 <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 class="horizontal-bar-chart overflow-hidden mb-10">
+    <div class="y-axis">
+      <span class="text-sm">100%</span>
+      <span class="text-sm">75%</span>
+      <span class="text-sm">50%</span>
+      <span class="text-sm">25%</span>
+      <span class="text-sm">0%</span>
     </div>
+    <div class="background"></div>
+    <div
+      class="relative border-y border-gray-400 flex justify-around content-center items-end top-bottom-borders"
+    ></div>
+    <div
+      class="bg-red-500 inline-block relative negative-chart"
+      :style="redStyle"
+    ></div>
+    <div
+      class="bg-green-500 inline-block relative positive-chart"
+      :style="greenStyle"
+    ></div>
+    <div class="positive-legend">Nein</div>
+    <div class="negative-legend">Ja</div>
   </div>
 </template>
 
@@ -17,8 +30,12 @@ const props = defineProps<{
   ratio: number;
 }>();
 
+const ratio = computed(() => {
+  return Math.min(props.ratio, 1);
+});
+
 const redHeight = computed(() => {
-  return 1 - props.ratio;
+  return 1 - ratio.value;
 });
 
 const redStyle = {
@@ -26,19 +43,38 @@ const redStyle = {
 };
 
 const greenStyle = {
-  height: `${100 * props.ratio}%`,
+  height: `${100 * ratio.value}%`,
 };
 </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%);
+  grid-column: 2 / span 5;
+  grid-row: 1;
+  align-self: center;
+  position: relative;
+}
+
+.y-axis {
+  display: flex;
+  flex-direction: column;
+  grid-area: y;
+  justify-content: space-between;
+  padding-bottom: 30px;
+  margin-top: -10px;
+}
+
+.top-bottom-borders {
+  grid-column: 2 / span 5;
+  grid-row: 1;
+  justify-self: center;
+  align-self: center;
+  height: 200px;
+  width: 100%;
 }
 
 .background::before {
@@ -49,4 +85,35 @@ const greenStyle = {
   position: absolute;
   top: 50%;
 }
+
+.horizontal-bar-chart {
+  padding-top: 10px;
+  display: grid;
+  grid-template-columns: 50px 1fr 300px 4fr 300px 1fr;
+  grid-template-rows: 200px 40px;
+  grid-template-areas:
+    "y . n . p ."
+    "y . l . r .";
+}
+
+.positive-chart {
+  grid-area: p;
+  align-self: flex-end;
+  box-sizing: border-box;
+}
+.negative-chart {
+  grid-area: n;
+  align-self: flex-end;
+  padding-top: 10px;
+}
+.positive-legend {
+  grid-area: l;
+  justify-self: center;
+  align-self: center;
+}
+.negative-legend {
+  grid-area: r;
+  justify-self: center;
+  align-self: center;
+}
 </style>

client/src/components/ui/RatingScale.vue

@@ -133,7 +133,7 @@ const ratingValueStyle = {
 console.log(props);
 </script>
 
-<style lang="postcss">
+<style lang="postcss" scoped>
 .gradient-with-circle {
   display: grid;
   grid-template-areas: