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

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,7 +66,8 @@ const option = ref({
                 },
             },
             data: seriesData,
-            radius: ['30%', '65%'],
+            top: '-45%',
+            radius: ['30%', '60%'],
             type: 'pie',
         },
     ],
@@ -101,12 +75,8 @@ const option = ref({
 </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>