diff --git a/resources/js/Components/Dashboard/ActivityGraphCard.vue b/resources/js/Components/Dashboard/ActivityGraphCard.vue index 19654e9b..f3b935cd 100644 --- a/resources/js/Components/Dashboard/ActivityGraphCard.vue +++ b/resources/js/Components/Dashboard/ActivityGraphCard.vue @@ -13,9 +13,10 @@ import { } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; import dayjs from 'dayjs'; +import { formatDate, formatTime } from '@/utils/time'; const props = defineProps<{ - dailyHoursTracked: [string, number][]; + dailyHoursTracked: { duration: number; date: string }[]; }>(); use([ @@ -29,7 +30,10 @@ use([ provide(THEME_KEY, 'dark'); -const max = Math.max(...props.dailyHoursTracked.map((el) => el[1])); +const max = Math.max( + Math.max(...props.dailyHoursTracked.map((el) => el.duration)), + 1 +); const option = ref({ tooltip: {}, @@ -67,10 +71,19 @@ const option = ref({ series: { type: 'heatmap', coordinateSystem: 'calendar', - data: props.dailyHoursTracked, + data: props.dailyHoursTracked.map((el) => [el.date, el.duration]), itemStyle: { borderRadius: 5, }, + tooltip: { + valueFormatter: (value: string, dataIndex: number) => { + return ( + formatDate(props.dailyHoursTracked[dataIndex].date) + + ': ' + + formatTime(value) + ); + }, + }, }, backgroundColor: 'transparent', }); diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue index 9d3aa914..b899a892 100644 --- a/resources/js/Pages/Dashboard.vue +++ b/resources/js/Pages/Dashboard.vue @@ -28,7 +28,7 @@ const props = defineProps<{ duration: number; // Total duration in seconds history: number[]; // Array representing the duration in seconds of the 3h windows for the day }[]; - dailyTrackedHours: [string, number][]; + dailyTrackedHours: { duration: number; date: string }[]; weeklyProjectOverview: { value: number; name: string;