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

Update styling for horizontal bar chart

This commit is contained in:
Ramon Wenger 2023-01-19 13:58:17 +01:00 committed by Christian Cueni
parent 47e84f992f
commit 8f202aa4b6
2 changed files with 81 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
client/src/components/ui/HorizontalBarChart.vue
View File

@ -1,13 +1,26 @@
<template> <template>
<div class="overflow-hidden"> <div class="horizontal-bar-chart overflow-hidden mb-10">
<h1>Horizontal Barchart</h1> <div class="y-axis">
<div <span class="text-sm">100%</span>
class="h-[200px] relative border-y border-gray-400 flex justify-around content-center items-end" <span class="text-sm">75%</span>
> <span class="text-sm">50%</span>
<div class="background"></div> <span class="text-sm">25%</span>
<div class="w-72 bg-red-500 inline-block relative" :style="redStyle"></div> <span class="text-sm">0%</span>
<div class="w-72 bg-green-500 inline-block relative" :style="greenStyle"></div>
</div> </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> </div>
</template> </template>
@ -17,8 +30,12 @@ const props = defineProps<{
ratio: number; ratio: number;
}>(); }>();
const ratio = computed(() => {
return Math.min(props.ratio, 1);
});
const redHeight = computed(() => { const redHeight = computed(() => {
return 1 - props.ratio; return 1 - ratio.value;
}); });
const redStyle = { const redStyle = {
@ -26,19 +43,38 @@ const redStyle = {
}; };
const greenStyle = { const greenStyle = {
height: `${100 * props.ratio}%`, height: `${100 * ratio.value}%`,
}; };
</script> </script>
<style lang="postcss"> <style lang="postcss">
.background { .background {
position: absolute;
border-top: 1px theme(colors.gray.400) solid; border-top: 1px theme(colors.gray.400) solid;
border-bottom: 1px theme(colors.gray.400) solid; border-bottom: 1px theme(colors.gray.400) solid;
width: 100%; width: 100%;
top: 50%;
height: 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 { .background::before {
@ -49,4 +85,35 @@ const greenStyle = {
position: absolute; position: absolute;
top: 50%; 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> </style>

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

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