|
1 | 1 | <script lang="ts" setup> |
2 | | -import VChart, { THEME_KEY } from 'vue-echarts'; |
3 | | -import { provide, ref } from 'vue'; |
4 | | -import { use } from 'echarts/core'; |
5 | | -import DashboardCard from '@/Components/Dashboard/DashboardCard.vue'; |
6 | | -import { BoltIcon } from '@heroicons/vue/20/solid'; |
7 | | -import { HeatmapChart } from 'echarts/charts'; |
| 2 | +import VChart, { THEME_KEY } from "vue-echarts"; |
| 3 | +import { provide, computed } from "vue"; |
| 4 | +import { use } from "echarts/core"; |
| 5 | +import DashboardCard from "@/Components/Dashboard/DashboardCard.vue"; |
| 6 | +import { BoltIcon } from "@heroicons/vue/20/solid"; |
| 7 | +import { HeatmapChart } from "echarts/charts"; |
8 | 8 | import { |
9 | 9 | CalendarComponent, |
10 | 10 | TitleComponent, |
11 | 11 | TooltipComponent, |
12 | | - VisualMapComponent, |
13 | | -} from 'echarts/components'; |
14 | | -import { CanvasRenderer } from 'echarts/renderers'; |
15 | | -import dayjs from 'dayjs'; |
| 12 | + VisualMapComponent |
| 13 | +} from "echarts/components"; |
| 14 | +import { CanvasRenderer } from "echarts/renderers"; |
| 15 | +import dayjs from "dayjs"; |
16 | 16 | import { |
17 | 17 | firstDayIndex, |
18 | 18 | formatDate, |
19 | 19 | formatHumanReadableDuration, |
20 | | - getDayJsInstance, |
21 | | -} from '@/packages/ui/src/utils/time'; |
22 | | -import { useCssVar } from '@vueuse/core'; |
| 20 | + getDayJsInstance |
| 21 | +} from "@/packages/ui/src/utils/time"; |
| 22 | +import { useCssVar } from "@vueuse/core"; |
| 23 | +import { useQuery } from "@tanstack/vue-query"; |
| 24 | +import { getCurrentOrganizationId } from "@/utils/useUser"; |
| 25 | +import { api } from "@/packages/api/src"; |
| 26 | +import { LoadingSpinner } from "@/packages/ui/src"; |
| 27 | +
|
| 28 | +// Get the organization ID using the utility function |
| 29 | +const organizationId = computed(() => getCurrentOrganizationId()); |
23 | 30 |
|
24 | | -const props = defineProps<{ |
25 | | - dailyHoursTracked: { duration: number; date: string }[]; |
26 | | -}>(); |
| 31 | +
|
| 32 | +const { data: dailyHoursTracked, isLoading } = useQuery({ |
| 33 | + queryKey: ["dailyTrackedHours", organizationId], |
| 34 | + queryFn: () => { |
| 35 | + return api.dailyTrackedHours({ |
| 36 | + params: { |
| 37 | + organization: organizationId.value! |
| 38 | + } |
| 39 | + }); |
| 40 | + }, |
| 41 | + enabled: computed(() => !!organizationId.value) |
| 42 | +}); |
27 | 43 |
|
28 | 44 | use([ |
29 | 45 | TitleComponent, |
30 | 46 | TooltipComponent, |
31 | 47 | VisualMapComponent, |
32 | 48 | CalendarComponent, |
33 | 49 | HeatmapChart, |
34 | | - CanvasRenderer, |
| 50 | + CanvasRenderer |
35 | 51 | ]); |
36 | 52 |
|
37 | | -provide(THEME_KEY, 'dark'); |
| 53 | +provide(THEME_KEY, "dark"); |
38 | 54 |
|
39 | | -const max = Math.max( |
40 | | - Math.max(...props.dailyHoursTracked.map((el) => el.duration)), |
41 | | - 1 |
| 55 | +const max = computed(() => { |
| 56 | + if (!isLoading.value && dailyHoursTracked.value) { |
| 57 | + return Math.max( |
| 58 | + Math.max(...dailyHoursTracked.value.map((el) => el.duration)), |
| 59 | + 1 |
| 60 | + ); |
| 61 | + } else { |
| 62 | + return 1; |
| 63 | + } |
| 64 | + } |
42 | 65 | ); |
43 | 66 |
|
44 | | -const backgroundColor = useCssVar('--color-bg-secondary'); |
45 | | -const itemBackgroundColor = useCssVar('--color-bg-tertiary'); |
46 | | -const option = ref({ |
47 | | - tooltip: {}, |
48 | | - visualMap: { |
49 | | - min: 0, |
50 | | - max: max, |
51 | | - type: 'piecewise', |
52 | | - orient: 'horizontal', |
53 | | - left: 'center', |
54 | | - top: 'center', |
55 | | - inRange: { |
56 | | - color: [itemBackgroundColor.value, '#2DBE45'], |
57 | | - }, |
58 | | - show: false, |
59 | | - }, |
60 | | - calendar: { |
61 | | - top: 40, |
62 | | - bottom: 20, |
63 | | - left: 40, |
64 | | - right: 10, |
65 | | - cellSize: [40, 40], |
66 | | - dayLabel: { |
67 | | - firstDay: firstDayIndex.value, |
68 | | - }, |
69 | | - splitLine: { |
70 | | - show: false, |
71 | | - }, |
72 | | - range: [ |
73 | | - dayjs().format('YYYY-MM-DD'), |
74 | | - getDayJsInstance()() |
75 | | - .subtract(50, 'day') |
76 | | - .startOf('week') |
77 | | - .format('YYYY-MM-DD'), |
78 | | - ], |
79 | | - itemStyle: { |
80 | | - color: 'transparent', |
81 | | - borderWidth: 8, |
82 | | - borderColor: backgroundColor.value, |
83 | | - }, |
84 | | - yearLabel: { show: false }, |
85 | | - }, |
86 | | - series: { |
87 | | - type: 'heatmap', |
88 | | - coordinateSystem: 'calendar', |
89 | | - data: props.dailyHoursTracked.map((el) => [el.date, el.duration]), |
90 | | - itemStyle: { |
91 | | - borderRadius: 5, |
92 | | - borderColor: 'rgba(255,255,255,0.05)', |
93 | | - borderWidth: 1, |
94 | | - }, |
95 | | - tooltip: { |
96 | | - valueFormatter: (value: number, dataIndex: number) => { |
97 | | - return ( |
98 | | - formatDate(props.dailyHoursTracked[dataIndex].date) + |
99 | | - ': ' + |
100 | | - formatHumanReadableDuration(value) |
101 | | - ); |
| 67 | +const backgroundColor = useCssVar("--color-bg-secondary"); |
| 68 | +const itemBackgroundColor = useCssVar("--color-bg-tertiary"); |
| 69 | +const option = computed(() => { |
| 70 | + return { |
| 71 | + tooltip: {}, |
| 72 | + visualMap: { |
| 73 | + min: 0, |
| 74 | + max: max.value, |
| 75 | + type: "piecewise", |
| 76 | + orient: "horizontal", |
| 77 | + left: "center", |
| 78 | + top: "center", |
| 79 | + inRange: { |
| 80 | + color: [itemBackgroundColor.value, "#2DBE45"] |
| 81 | + }, |
| 82 | + show: false |
102 | 83 | }, |
103 | | - }, |
104 | | - }, |
105 | | - backgroundColor: 'transparent', |
106 | | -}); |
| 84 | + calendar: { |
| 85 | + top: 40, |
| 86 | + bottom: 20, |
| 87 | + left: 40, |
| 88 | + right: 10, |
| 89 | + cellSize: [40, 40], |
| 90 | + dayLabel: { |
| 91 | + firstDay: firstDayIndex.value |
| 92 | + }, |
| 93 | + splitLine: { |
| 94 | + show: false |
| 95 | + }, |
| 96 | + range: [ |
| 97 | + dayjs().format("YYYY-MM-DD"), |
| 98 | + getDayJsInstance()() |
| 99 | + .subtract(50, "day") |
| 100 | + .startOf("week") |
| 101 | + .format("YYYY-MM-DD") |
| 102 | + ], |
| 103 | + itemStyle: { |
| 104 | + color: "transparent", |
| 105 | + borderWidth: 8, |
| 106 | + borderColor: backgroundColor.value |
| 107 | + }, |
| 108 | + yearLabel: { show: false } |
| 109 | + }, |
| 110 | + series: { |
| 111 | + type: "heatmap", |
| 112 | + coordinateSystem: "calendar", |
| 113 | + data: dailyHoursTracked?.value?.map((el) => [el.date, el.duration]) ?? [], |
| 114 | + itemStyle: { |
| 115 | + borderRadius: 5, |
| 116 | + borderColor: "rgba(255,255,255,0.05)", |
| 117 | + borderWidth: 1 |
| 118 | + }, |
| 119 | + tooltip: { |
| 120 | + valueFormatter: (value: number, dataIndex: number) => { |
| 121 | + if(dailyHoursTracked?.value){ |
| 122 | + return ( |
| 123 | + formatDate(dailyHoursTracked?.value[dataIndex].date) + |
| 124 | + ": " + |
| 125 | + formatHumanReadableDuration(value) |
| 126 | + ); |
| 127 | + } |
| 128 | + else { |
| 129 | + return ""; |
| 130 | + } |
| 131 | +
|
| 132 | + } |
| 133 | + } |
| 134 | + }, |
| 135 | + backgroundColor: "transparent" |
| 136 | + }; |
| 137 | + }); |
| 138 | +
|
107 | 139 | </script> |
108 | 140 |
|
109 | 141 | <template> |
110 | 142 | <DashboardCard title="Activity Graph" :icon="BoltIcon"> |
111 | 143 | <div class="px-2"> |
112 | | - <v-chart |
113 | | - class="chart" |
114 | | - :autoresize="true" |
115 | | - :option="option" |
116 | | - style="height: 260px; background-color: transparent" /> |
| 144 | + <div v-if="isLoading" class="flex justify-center items-center h-40"> |
| 145 | + <LoadingSpinner /> |
| 146 | + </div> |
| 147 | + <div v-else-if="dailyHoursTracked"> |
| 148 | + <v-chart |
| 149 | + class="chart" |
| 150 | + :autoresize="true" |
| 151 | + :option="option" |
| 152 | + style="height: 260px; background-color: transparent" /> |
| 153 | + </div> |
| 154 | + <div v-else class="text-center text-gray-500 py-8"> |
| 155 | + No activity data available |
| 156 | + </div> |
117 | 157 | </div> |
118 | 158 | </DashboardCard> |
119 | 159 | </template> |
|
0 commit comments