From 8f202aa4b680e415cc6e236cfb45fd3dc2dcffa0 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 19 Jan 2023 13:58:17 +0100
Subject: [PATCH] Update styling for horizontal bar chart

---
 .../src/components/ui/HorizontalBarChart.vue  | 93 ++++++++++++++++---
 client/src/components/ui/RatingScale.vue      |  2 +-
 2 files changed, 81 insertions(+), 14 deletions(-)

diff --git a/client/src/components/ui/HorizontalBarChart.vue b/client/src/components/ui/HorizontalBarChart.vue
index 4a95424b..9da65876 100644
--- a/client/src/components/ui/HorizontalBarChart.vue
+++ b/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>
diff --git a/client/src/components/ui/RatingScale.vue b/client/src/components/ui/RatingScale.vue
index 737e5e3d..caee9d29 100644
--- a/client/src/components/ui/RatingScale.vue
+++ b/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: