mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-13 10:42:16 +01:00
add support for interval / duration format in frontend views
This commit is contained in:
Gregor Vostrak
committed by
Constantin Graf
Constantin Graf
parent
b8d9bc5b7e
commit
c1d43bcc67
@@ -1,44 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
import VChart, { THEME_KEY } from "vue-echarts";
|
||||
import { provide, computed } from "vue";
|
||||
import { use } from "echarts/core";
|
||||
import DashboardCard from "@/Components/Dashboard/DashboardCard.vue";
|
||||
import { BoltIcon } from "@heroicons/vue/20/solid";
|
||||
import { HeatmapChart } from "echarts/charts";
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { provide, computed, inject, type ComputedRef } from 'vue';
|
||||
import { use } from 'echarts/core';
|
||||
import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
|
||||
import { BoltIcon } from '@heroicons/vue/20/solid';
|
||||
import { HeatmapChart } from 'echarts/charts';
|
||||
import {
|
||||
CalendarComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
VisualMapComponent
|
||||
} from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import dayjs from "dayjs";
|
||||
VisualMapComponent,
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
firstDayIndex,
|
||||
formatDate,
|
||||
formatHumanReadableDuration,
|
||||
getDayJsInstance
|
||||
} from "@/packages/ui/src/utils/time";
|
||||
import { useCssVar } from "@vueuse/core";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import { getCurrentOrganizationId } from "@/utils/useUser";
|
||||
import { api } from "@/packages/api/src";
|
||||
import { LoadingSpinner } from "@/packages/ui/src";
|
||||
getDayJsInstance,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import { useCssVar } from '@vueuse/core';
|
||||
import { useQuery } from '@tanstack/vue-query';
|
||||
import { getCurrentOrganizationId } from '@/utils/useUser';
|
||||
import { api, type Organization } from '@/packages/api/src';
|
||||
import { LoadingSpinner } from '@/packages/ui/src';
|
||||
|
||||
const organization = inject<ComputedRef<Organization>>('organization');
|
||||
|
||||
// Get the organization ID using the utility function
|
||||
const organizationId = computed(() => getCurrentOrganizationId());
|
||||
|
||||
|
||||
const { data: dailyHoursTracked, isLoading } = useQuery({
|
||||
queryKey: ["dailyTrackedHours", organizationId],
|
||||
queryKey: ['dailyTrackedHours', organizationId],
|
||||
queryFn: () => {
|
||||
return api.dailyTrackedHours({
|
||||
params: {
|
||||
organization: organizationId.value!
|
||||
}
|
||||
organization: organizationId.value!,
|
||||
},
|
||||
});
|
||||
},
|
||||
enabled: computed(() => !!organizationId.value)
|
||||
enabled: computed(() => !!organizationId.value),
|
||||
});
|
||||
|
||||
use([
|
||||
@@ -47,96 +48,104 @@ use([
|
||||
VisualMapComponent,
|
||||
CalendarComponent,
|
||||
HeatmapChart,
|
||||
CanvasRenderer
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
provide(THEME_KEY, "dark");
|
||||
provide(THEME_KEY, 'dark');
|
||||
|
||||
const max = computed(() => {
|
||||
if (!isLoading.value && dailyHoursTracked.value) {
|
||||
return Math.max(
|
||||
Math.max(...dailyHoursTracked.value.map((el) => el.duration)),
|
||||
1
|
||||
);
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
if (!isLoading.value && dailyHoursTracked.value) {
|
||||
return Math.max(
|
||||
Math.max(...dailyHoursTracked.value.map((el) => el.duration)),
|
||||
1
|
||||
);
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const backgroundColor = useCssVar('--color-card-background', null, { observe: true });
|
||||
const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, { observe: true });
|
||||
const backgroundColor = useCssVar('--color-card-background', null, {
|
||||
observe: true,
|
||||
});
|
||||
const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, {
|
||||
observe: true,
|
||||
});
|
||||
|
||||
const option = computed(() => {
|
||||
return {
|
||||
tooltip: {},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: max.value,
|
||||
type: "piecewise",
|
||||
orient: "horizontal",
|
||||
left: "center",
|
||||
top: "center",
|
||||
inRange: {
|
||||
color: [itemBackgroundColor.value, "#2DBE45"]
|
||||
},
|
||||
show: false
|
||||
return {
|
||||
tooltip: {},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: max.value,
|
||||
type: 'piecewise',
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
inRange: {
|
||||
color: [itemBackgroundColor.value, '#2DBE45'],
|
||||
},
|
||||
calendar: {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 40,
|
||||
right: 10,
|
||||
cellSize: [40, 40],
|
||||
dayLabel: {
|
||||
firstDay: firstDayIndex.value
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
range: [
|
||||
dayjs().format("YYYY-MM-DD"),
|
||||
getDayJsInstance()()
|
||||
.subtract(50, "day")
|
||||
.startOf("week")
|
||||
.format("YYYY-MM-DD")
|
||||
],
|
||||
itemStyle: {
|
||||
color: "transparent",
|
||||
borderWidth: 8,
|
||||
borderColor: backgroundColor.value
|
||||
},
|
||||
yearLabel: { show: false }
|
||||
show: false,
|
||||
},
|
||||
calendar: {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 40,
|
||||
right: 10,
|
||||
cellSize: [40, 40],
|
||||
dayLabel: {
|
||||
firstDay: firstDayIndex.value,
|
||||
},
|
||||
series: {
|
||||
type: "heatmap",
|
||||
coordinateSystem: "calendar",
|
||||
data: dailyHoursTracked?.value?.map((el) => [el.date, el.duration]) ?? [],
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: "rgba(255,255,255,0.05)",
|
||||
borderWidth: 1
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: (value: number, dataIndex: number) => {
|
||||
if(dailyHoursTracked?.value){
|
||||
return (
|
||||
formatDate(dailyHoursTracked?.value[dataIndex].date) +
|
||||
": " +
|
||||
formatHumanReadableDuration(value)
|
||||
);
|
||||
}
|
||||
else {
|
||||
return "";
|
||||
}
|
||||
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
range: [
|
||||
dayjs().format('YYYY-MM-DD'),
|
||||
getDayJsInstance()()
|
||||
.subtract(50, 'day')
|
||||
.startOf('week')
|
||||
.format('YYYY-MM-DD'),
|
||||
],
|
||||
itemStyle: {
|
||||
color: 'transparent',
|
||||
borderWidth: 8,
|
||||
borderColor: backgroundColor.value,
|
||||
},
|
||||
yearLabel: { show: false },
|
||||
},
|
||||
series: {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
data:
|
||||
dailyHoursTracked?.value?.map((el) => [el.date, el.duration]) ??
|
||||
[],
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: 'rgba(255,255,255,0.05)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: (value: number, dataIndex: number) => {
|
||||
if (dailyHoursTracked?.value) {
|
||||
return (
|
||||
formatDate(
|
||||
dailyHoursTracked?.value[dataIndex].date
|
||||
) +
|
||||
': ' +
|
||||
formatHumanReadableDuration(
|
||||
value,
|
||||
organization?.value?.interval_format,
|
||||
organization?.value?.number_format
|
||||
)
|
||||
);
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
backgroundColor: "transparent"
|
||||
};
|
||||
});
|
||||
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
Reference in New Issue
Block a user