ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add horizontal bar chart component

This commit is contained in:
Ramon Wenger 2023-01-18 22:48:27 +01:00 committed by Christian Cueni
parent 31527eb99f
commit 47e84f992f
2 changed files with 82 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/src/components/ui/HorizontalBarChart.vue Normal file
View File

@ -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>

39
client/src/pages/StyleGuidePage.vue
View File

@ -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>