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

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"

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>

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