diff --git a/app/components/TeamsMenu.vue b/app/components/TeamsMenu.vue index 072ac66..cb0ec9b 100644 --- a/app/components/TeamsMenu.vue +++ b/app/components/TeamsMenu.vue @@ -5,40 +5,50 @@ defineProps<{ collapsed?: boolean }>() -const teams = ref([{ - label: 'Nuxt', - avatar: { - src: 'https://github.com/nuxt.png', - alt: 'Nuxt' - } -}, { - label: 'NuxtHub', - avatar: { - src: 'https://github.com/nuxt-hub.png', - alt: 'NuxtHub' - } -}, { - label: 'NuxtLabs', - avatar: { - src: 'https://github.com/nuxtlabs.png', - alt: 'NuxtLabs' +const teams = ref([ + { + label: 'Nuxt', + avatar: { + src: 'https://github.com/nuxt.png', + alt: 'Nuxt' + } + }, + { + label: 'NuxtHub', + avatar: { + src: 'https://github.com/nuxt-hub.png', + alt: 'NuxtHub' + } + }, + { + label: 'NuxtLabs', + avatar: { + src: 'https://github.com/nuxtlabs.png', + alt: 'NuxtLabs' + } } -}]) +]) const selectedTeam = ref(teams.value[0]) const items = computed(() => { - return [teams.value.map(team => ({ - ...team, - onSelect() { - selectedTeam.value = team - } - })), [{ - label: 'Create team', - icon: 'i-lucide-circle-plus' - }, { - label: 'Manage teams', - icon: 'i-lucide-cog' - }]] + return [ + teams.value.map((team) => ({ + ...team, + onSelect() { + selectedTeam.value = team + } + })), + [ + { + label: 'Create team', + icon: 'i-lucide-circle-plus' + }, + { + label: 'Manage teams', + icon: 'i-lucide-cog' + } + ] + ] }) @@ -46,7 +56,9 @@ const items = computed(() => { -import { eachDayOfInterval, eachWeekOfInterval, eachMonthOfInterval, format } from 'date-fns' -import { VisXYContainer, VisLine, VisAxis, VisArea, VisCrosshair, VisTooltip } from '@unovis/vue' +import { + eachDayOfInterval, + eachWeekOfInterval, + eachMonthOfInterval, + format +} from 'date-fns' +import { + VisXYContainer, + VisLine, + VisAxis, + VisArea, + VisCrosshair, + VisTooltip +} from '@unovis/vue' import type { Period, Range } from '~/types' const cardRef = useTemplateRef('cardRef') @@ -19,32 +31,47 @@ const { width } = useElementSize(cardRef) const data = ref([]) -watch([() => props.period, () => props.range], () => { - const dates = ({ - daily: eachDayOfInterval, - weekly: eachWeekOfInterval, - monthly: eachMonthOfInterval - } as Record)[props.period](props.range) - - const min = 1000 - const max = 10000 - - data.value = dates.map(date => ({ date, amount: Math.floor(Math.random() * (max - min + 1)) + min })) -}, { immediate: true }) +watch( + [() => props.period, () => props.range], + () => { + const dates = ( + { + daily: eachDayOfInterval, + weekly: eachWeekOfInterval, + monthly: eachMonthOfInterval + } as Record + )[props.period](props.range) + + const min = 1000 + const max = 10000 + + data.value = dates.map((date) => ({ + date, + amount: Math.floor(Math.random() * (max - min + 1)) + min + })) + }, + { immediate: true } +) const x = (_: DataRecord, i: number) => i const y = (d: DataRecord) => d.amount -const total = computed(() => data.value.reduce((acc: number, { amount }) => acc + amount, 0)) +const total = computed(() => + data.value.reduce((acc: number, { amount }) => acc + amount, 0) +) -const formatNumber = new Intl.NumberFormat('en', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format +const formatNumber = new Intl.NumberFormat('en', { + style: 'currency', + currency: 'USD', + maximumFractionDigits: 0 +}).format const formatDate = (date: Date): string => { - return ({ + return { daily: format(date, 'd MMM'), weekly: format(date, 'd MMM'), monthly: format(date, 'MMM yyy') - })[props.period] + }[props.period] } const xTicks = (i: number) => { @@ -55,16 +82,18 @@ const xTicks = (i: number) => { return formatDate(data.value[i].date) } -const template = (d: DataRecord) => `${formatDate(d.date)}: ${formatNumber(d.amount)}` +const template = (d: DataRecord) => + `${formatDate(d.date)}: ${formatNumber(d.amount)}`