From dd7991653042bb75f1dc6a4b31784e7a019675c3 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sat, 7 Sep 2024 01:29:53 +0200
Subject: [PATCH] improve reporting chart, fix project table with long client
 name, fixes ST-414

---
 .../Common/Project/ProjectTable.vue           |  2 +-
 .../Common/Reporting/ReportingPieChart.vue    | 25 ++++++-------------
 resources/js/Pages/Reporting.vue              |  2 +-
 3 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/resources/js/Components/Common/Project/ProjectTable.vue b/resources/js/Components/Common/Project/ProjectTable.vue
index 6f87aa8f..9937b65a 100644
--- a/resources/js/Components/Common/Project/ProjectTable.vue
+++ b/resources/js/Components/Common/Project/ProjectTable.vue
@@ -49,7 +49,7 @@ const { clients } = storeToRefs(useClientsStore());
             <div
                 data-testid="project_table"
                 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>
                 <div
                     class="col-span-5 py-24 text-center"
diff --git a/resources/js/Components/Common/Reporting/ReportingPieChart.vue b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
index f5ab289f..d2e58235 100644
--- a/resources/js/Components/Common/Reporting/ReportingPieChart.vue
+++ b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
@@ -73,16 +73,8 @@ const seriesData = computed(() => {
             ...el,
             ...{
                 itemStyle: {
-                    color: new LinearGradient(0, 0, 0, 1, [
-                        {
-                            offset: 0,
-                            color: hexToRGBA(el.color, 0.8),
-                        },
-                        {
-                            offset: 1,
-                            color: hexToRGBA(el.color, 0.4),
-                        },
-                    ]),
+                    color: el.color
+
                 },
             },
         };
@@ -93,7 +85,8 @@ const option = ref({
         trigger: 'item',
     },
     legend: {
-        top: 'bottom',
+        show: true,
+        top: '250px'
     },
     backgroundColor: 'transparent',
     series: [
@@ -107,21 +100,17 @@ const option = ref({
                 },
             },
             data: seriesData,
-            radius: ['30%', '65%'],
+            radius: ['30%', '60%'],
+            top: '-50%',
             type: 'pie',
-            top: '-10%',
         },
     ],
 });
 </script>
 
 <template>
-    <v-chart class="chart" :autoresize="true" :option="option" />
+    <v-chart class="background-transparent h-[450px]" :autoresize="true" :option="option" />
 </template>
 
 <style scoped>
-.chart {
-    height: 300px;
-    background: transparent;
-}
 </style>
diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue
index a75e72d5..98fa2961 100644
--- a/resources/js/Pages/Reporting.vue
+++ b/resources/js/Pages/Reporting.vue
@@ -146,7 +146,7 @@ async function createTag(tag: string) {
 </script>
 
 <template>
-    <AppLayout title="Reporting" data-testid="reporting_view">
+    <AppLayout title="Reporting" data-testid="reporting_view" class="overflow-hidden">
         <MainContainer
             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">