fix bug where chart does not update project colors on data change

solidtime-io · Sep 17, 2024 · 3d982e8 · 3d982e8
1 parent dc33d10
commit 3d982e8
Showing 1 changed file with 3 additions and 2 deletions.
diff --git 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 {