make No Project white in chart fixes ST-360

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
 import { computed, 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';
@@ -15,6 +14,7 @@ import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
 import type { GroupedDataEntries } from '@/packages/api/src';
 import { useReportingStore } from '@/utils/useReporting';
+import { useProjectsStore } from '@/utils/useProjects';
 
 use([
     CanvasRenderer,
@@ -27,41 +27,29 @@ 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<{
     data: GroupedDataEntries | null;
     type: string | null;
 }>();
-const { getNameForReportingRowEntry } = useReportingStore();
+const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
+const { projects } = useProjectsStore();
 
 const groupChartData = computed(() => {
     return (
         props?.data?.map((entry) => {
+            const name = getNameForReportingRowEntry(entry.key, props.type);
+            let color = getRandomColorWithSeed(entry.key ?? 'none');
+            if (name && props.type && emptyPlaceholder[props.type] === name) {
+                color = '#CCC';
+            } else if (props.type === 'project') {
+                color =
+                    projects.find((project) => project.id === entry.key)
+                        ?.color ?? '#CCC';
+            }
             return {
                 value: entry.seconds,
                 name: getNameForReportingRowEntry(entry.key, props.type),
-                color: getRandomColorWithSeed(entry.key ?? 'none'),
+                color: color,
             };
         }) ?? []
     );
@@ -73,8 +61,7 @@ const seriesData = computed(() => {
             ...el,
             ...{
                 itemStyle: {
-                    color: el.color
-
+                    color: el.color,
                 },
             },
         };
@@ -86,7 +73,7 @@ const option = ref({
     },
     legend: {
         show: true,
-        top: '250px'
+        top: '250px',
     },
     backgroundColor: 'transparent',
     series: [
@@ -109,8 +96,10 @@ const option = ref({
 </script>
 
 <template>
-    <v-chart class="background-transparent h-[450px]" :autoresize="true" :option="option" />
+    <v-chart
+        class="background-transparent h-[450px]"
+        :autoresize="true"
+        :option="option" />
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

resources/js/utils/useReporting.ts

@@ -79,6 +79,14 @@ export const useReportingStore = defineStore('reporting', () => {
         return reportingTableResponse.value?.data as AggregatedTimeEntries;
     });
 
+    const emptyPlaceholder = {
+        user: 'No User',
+        project: 'No Project',
+        task: 'No Task',
+        billable: 'Non-Billable',
+        client: 'No Client',
+    } as Record<string, string>;
+
     function getNameForReportingRowEntry(
         key: string | null,
         type: string | null
@@ -87,14 +95,6 @@ export const useReportingStore = defineStore('reporting', () => {
             return null;
         }
         if (key === null) {
-            const emptyPlaceholder = {
-                user: 'No User',
-                project: 'No Project',
-                task: 'No Task',
-                billable: 'Non-Billable',
-                client: 'No Client',
-            };
-
             return emptyPlaceholder[type as keyof typeof emptyPlaceholder];
         }
 
@@ -167,5 +167,6 @@ export const useReportingStore = defineStore('reporting', () => {
         aggregatedTableTimeEntries,
         getNameForReportingRowEntry,
         groupByOptions,
+        emptyPlaceholder,
     };
 });