From 36cdae523f6daba88726d2f67f836d01be4333ef Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 17 Sep 2024 16:56:02 +0200
Subject: [PATCH] fix bug where chart does not update project colors on data
 change

---
 .../js/Components/Common/Reporting/ReportingPieChart.vue     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/Common/Reporting/ReportingPieChart.vue b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
index f6c08000..db489a91 100644
--- a/resources/js/Components/Common/Reporting/ReportingPieChart.vue
+++ b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
@@ -15,6 +15,7 @@ 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';
+import { storeToRefs } from 'pinia';
 
 use([
     CanvasRenderer,
@@ -32,7 +33,7 @@ const props = defineProps<{
     type: string | null;
 }>();
 const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
-const { projects } = useProjectsStore();
+const { projects } = storeToRefs(useProjectsStore());
 
 const groupChartData = computed(() => {
     return (
@@ -43,7 +44,7 @@ const groupChartData = computed(() => {
                 color = '#CCCCCC';
             } else if (props.type === 'project') {
                 color =
-                    projects.find((project) => project.id === entry.key)
+                    projects.value?.find((project) => project.id === entry.key)
                         ?.color ?? '#CCCCCC';
             }
             return {