unify and fix chart styles in dashboard and reporting view, fixes ST-356

resources/js/Components/Common/Reporting/ReportingPieChart.vue

@@ -40,11 +40,11 @@ const groupChartData = computed(() => {
             const name = getNameForReportingRowEntry(entry.key, props.type);
             let color = getRandomColorWithSeed(entry.key ?? 'none');
             if (name && props.type && emptyPlaceholder[props.type] === name) {
-                color = '#CCC';
+                color = '#CCCCCC';
             } else if (props.type === 'project') {
                 color =
                     projects.find((project) => project.id === entry.key)
-                        ?.color ?? '#CCC';
+                        ?.color ?? '#CCCCCC';
             }
             return {
                 value: entry.seconds,
@@ -61,7 +61,12 @@ const seriesData = computed(() => {
             ...el,
             ...{
                 itemStyle: {
-                    color: el.color,
+                    color: `${el.color}BB`,
+                },
+                emphasis: {
+                    itemStyle: {
+                        color: `${el.color}`,
+                    },
                 },
             },
         };
@@ -88,7 +93,7 @@ const option = ref({
             },
             data: seriesData,
             radius: ['30%', '60%'],
-            top: '-50%',
+            top: '-45%',
             type: 'pie',
         },
     ],
@@ -97,7 +102,7 @@ const option = ref({
 
 <template>
     <v-chart
-        class="background-transparent h-[450px]"
+        class="background-transparent h-[460px]"
         :autoresize="true"
         :option="option" />
 </template>

resources/js/Components/Dashboard/ProjectsChartCard.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
 import { provide, ref } from 'vue';
-import LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -24,28 +23,6 @@ use([
 
 provide(THEME_KEY, 'dark');
 
-function hexToRGBA(hex: string, opacity = 1) {
-    // Remove the hash at the start if it's there
-    hex = hex.replace(/^#/, '');
-
-    // Parse the hex color
-    let r, g, b;
-    if (hex.length === 3) {
-        r = parseInt(hex.charAt(0) + hex.charAt(0), 16);
-        g = parseInt(hex.charAt(1) + hex.charAt(1), 16);
-        b = parseInt(hex.charAt(2) + hex.charAt(2), 16);
-    } else if (hex.length === 6) {
-        r = parseInt(hex.substring(0, 2), 16);
-        g = parseInt(hex.substring(2, 4), 16);
-        b = parseInt(hex.substring(4, 6), 16);
-    } else {
-        throw new Error('Invalid HEX color.');
-    }
-
-    // Return the RGBA color string
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-}
-
 const props = defineProps<{
     weeklyProjectOverview: {
         value: number;
@@ -59,16 +36,12 @@ const seriesData = props.weeklyProjectOverview.map((el) => {
         ...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}BB`,
+            },
+            emphasis: {
+                itemStyle: {
+                    color: `${el.color}`,
+                },
             },
         },
     };
@@ -78,8 +51,8 @@ const option = ref({
         trigger: 'item',
     },
     legend: {
-        orient: 'vertical',
         bottom: 'bottom',
+        top: '250px',
     },
     backgroundColor: 'transparent',
     series: [
@@ -93,20 +66,17 @@ const option = ref({
                 },
             },
             data: seriesData,
-            radius: ['30%', '65%'],
+            top: '-45%',
+            radius: ['30%', '60%'],
             type: 'pie',
         },
     ],
 });
 </script>
 
 <template>
-    <v-chart class="chart" :autoresize="true" :option="option" />
+    <v-chart
+        class="h-[420px] bg-transparent"
+        :autoresize="true"
+        :option="option" />
 </template>
-
-<style scoped>
-.chart {
-    height: 300px;
-    background: transparent;
-}
-</style>

resources/js/Layouts/AppLayout.vue

@@ -177,7 +177,7 @@ const page = usePage<{
                                 href="/billing"></NavigationSidebarItem>
                             <NavigationSidebarItem
                                 v-if="canUpdateOrganization()"
-                            title="Import / Export"
+                                title="Import / Export"
                                 :icon="ArrowsRightLeftIcon"
                                 :current="route().current('import')"
                                 :href="route('import')"></NavigationSidebarItem>

resources/js/Pages/Reporting.vue

@@ -146,7 +146,10 @@ async function createTag(tag: string) {
 </script>
 
 <template>
-    <AppLayout title="Reporting" data-testid="reporting_view" class="overflow-hidden">
+    <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">
@@ -340,7 +343,7 @@ async function createTag(tag: string) {
                         </div>
                     </div>
                 </div>
-                <div>
+                <div class="px-2 lg:px-4">
                     <ReportingPieChart
                         :type="aggregatedTableTimeEntries?.grouped_type"
                         :data="