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

Add title and label to rating scale component, fix some bugs

This commit is contained in:
Ramon Wenger 2023-01-18 21:30:41 +01:00 committed by Christian Cueni
parent f3d61bff8a
commit 31527eb99f
2 changed files with 141 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
client/src/components/ui/RatingScale.vue
View File

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

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

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