improve reporting chart, fix project table with long client name, fixes ST-414

This commit is contained in:
Gregor Vostrak
2024-09-07 01:29:53 +02:00
committed by Constantin Graf
parent 3b41d90b07
commit a4d6ba3cdb
3 changed files with 9 additions and 20 deletions

View File

@@ -49,7 +49,7 @@ const { clients } = storeToRefs(useClientsStore());
<div <div
data-testid="project_table" data-testid="project_table"
class="grid min-w-full" class="grid min-w-full"
style="grid-template-columns: 1fr 150px 150px 150px 80px"> style="grid-template-columns: 1fr 1fr 1fr 150px 80px">
<ProjectTableHeading></ProjectTableHeading> <ProjectTableHeading></ProjectTableHeading>
<div <div
class="col-span-5 py-24 text-center" class="col-span-5 py-24 text-center"

View File

@@ -73,16 +73,8 @@ const seriesData = computed(() => {
...el, ...el,
...{ ...{
itemStyle: { itemStyle: {
color: new LinearGradient(0, 0, 0, 1, [ color: el.color
{
offset: 0,
color: hexToRGBA(el.color, 0.8),
},
{
offset: 1,
color: hexToRGBA(el.color, 0.4),
},
]),
}, },
}, },
}; };
@@ -93,7 +85,8 @@ const option = ref({
trigger: 'item', trigger: 'item',
}, },
legend: { legend: {
top: 'bottom', show: true,
top: '250px'
}, },
backgroundColor: 'transparent', backgroundColor: 'transparent',
series: [ series: [
@@ -107,21 +100,17 @@ const option = ref({
}, },
}, },
data: seriesData, data: seriesData,
radius: ['30%', '65%'], radius: ['30%', '60%'],
top: '-50%',
type: 'pie', type: 'pie',
top: '-10%',
}, },
], ],
}); });
</script> </script>
<template> <template>
<v-chart class="chart" :autoresize="true" :option="option" /> <v-chart class="background-transparent h-[450px]" :autoresize="true" :option="option" />
</template> </template>
<style scoped> <style scoped>
.chart {
height: 300px;
background: transparent;
}
</style> </style>

View File

@@ -146,7 +146,7 @@ async function createTag(tag: string) {
</script> </script>
<template> <template>
<AppLayout title="Reporting" data-testid="reporting_view"> <AppLayout title="Reporting" data-testid="reporting_view" class="overflow-hidden">
<MainContainer <MainContainer
class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center"> class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
<div class="flex items-center space-x-3 sm:space-x-6"> <div class="flex items-center space-x-3 sm:space-x-6">