feat: average check

Author: hmbanan666

apps/web-app/app/components/chart/KitchenChecks.client.vue

@@ -0,0 +1,135 @@
+<template>
+  <UCard ref="cardRef" :ui="{ root: 'overflow-visible', body: '!px-0 !pt-0 !pb-3' }">
+    <template #header>
+      <div>
+        <p class="text-xs text-muted uppercase mb-1.5">
+          Средний чек за {{ data.length }} {{ pluralizationRu(data.length, ['день', 'дня', 'дней']) }}
+        </p>
+        <p class="text-3xl text-highlighted font-semibold">
+          {{ formatNumber(total) }}
+        </p>
+      </div>
+    </template>
+
+    <VisXYContainer
+      :data="data"
+      :padding="{ top: 40 }"
+      :width="width"
+      class="h-80"
+    >
+      <VisLine
+        :x="x"
+        :y="y"
+        color="var(--ui-info)"
+      />
+      <VisArea
+        :x="x"
+        :y="y"
+        color="var(--ui-info)"
+        :opacity="0.1"
+      />
+
+      <VisAxis
+        type="x"
+        :x="x"
+        :tick-format="xTicks"
+      />
+
+      <VisCrosshair
+        color="var(--ui-info)"
+        :template="template"
+      />
+
+      <VisTooltip />
+    </VisXYContainer>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import type { Period, Range } from '#shared/types'
+import { VisArea, VisAxis, VisCrosshair, VisLine, VisTooltip, VisXYContainer } from '@unovis/vue'
+import { eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, format } from 'date-fns'
+import { ru } from 'date-fns/locale'
+
+type DataRecord = {
+  date: Date
+  checks: number
+  averageCheck: number
+  commonAverageCheck: number
+}
+
+const { period, range, values } = defineProps<{
+  period: Period
+  range: Range
+  values: { date: string, checks: number, averageCheck: number, commonAverageCheck: number }[]
+}>()
+
+const cardRef = useTemplateRef<HTMLElement | null>('cardRef')
+
+const { width } = useElementSize(cardRef)
+
+const data = ref<DataRecord[]>([])
+
+watch([() => period, () => range, () => values], () => {
+  const dates = ({
+    daily: eachDayOfInterval,
+    weekly: eachWeekOfInterval,
+    monthly: eachMonthOfInterval,
+  } as Record<Period, typeof eachDayOfInterval>)[period](range)
+
+  data.value = dates.map((date) => {
+    const dateStr = format(date, 'yyyy-MM-dd')
+    const value = values.find((d) => d.date.startsWith(dateStr))
+
+    return {
+      date,
+      checks: value?.checks ?? 0,
+      averageCheck: value?.averageCheck ?? 0,
+      commonAverageCheck: value?.commonAverageCheck ?? 0,
+    }
+  })
+}, { immediate: true })
+
+const x = (_: DataRecord, i: number) => i
+const y = (d: DataRecord) => d.averageCheck
+
+const total = computed(() => {
+  const count = data.value.filter((d) => d.averageCheck).length
+  return Math.floor(data.value.reduce((acc: number, { averageCheck }) => acc + averageCheck, 0) / count)
+})
+
+const formatNumber = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB', maximumFractionDigits: 0 }).format
+
+function formatDate(date: Date): string {
+  return ({
+    daily: format(date, 'd MMMM', { locale: ru }),
+    weekly: format(date, 'd MMMM', { locale: ru }),
+    monthly: format(date, 'MMMM yyy', { locale: ru }),
+  })[period]
+}
+
+function xTicks(i: number) {
+  if (i === 0 || i === data.value.length - 1 || !data.value[i]) {
+    return ''
+  }
+
+  return formatDate(data.value[i].date)
+}
+
+const template = (d: DataRecord) => `${formatDate(d.date)}: ${formatNumber(d.averageCheck)}`
+</script>
+
+<style scoped>
+.unovis-xy-container {
+  --vis-crosshair-line-stroke-color: var(--ui-info);
+  --vis-crosshair-circle-stroke-color: var(--ui-bg);
+
+  --vis-axis-grid-color: var(--ui-border);
+  --vis-axis-tick-color: var(--ui-border);
+  --vis-axis-tick-label-color: var(--ui-text-dimmed);
+
+  --vis-tooltip-background-color: var(--ui-bg);
+  --vis-tooltip-border-color: var(--ui-border);
+  --vis-tooltip-text-color: var(--ui-text-highlighted);
+}
+</style>

apps/web-app/app/components/chart/KitchenRevenue.client.vue

@@ -14,8 +14,8 @@
     <VisXYContainer
       :data="data"
       :padding="{ top: 40 }"
-      class="h-96"
       :width="width"
+      class="h-80"
     >
       <VisLine
         :x="x"

apps/web-app/app/pages/kitchen/[id]/finance.vue

@@ -5,6 +5,12 @@
       :range="range"
       :values="data ?? []"
     />
+
+    <ChartKitchenChecks
+      :period="period"
+      :range="range"
+      :values="data ?? []"
+    />
   </Content>
 </template>
 
@@ -17,7 +23,7 @@ const { params } = useRoute('kitchen-id')
 const { data } = useFetch(`/api/kitchen/id/${params.id}/revenue`)
 
 const range = shallowRef<Range>({
-  start: sub(new Date(), { days: 14 }),
+  start: sub(new Date(), { days: 89 }),
   end: new Date(),
 })
 const period = ref<Period>('daily')

apps/web-app/nuxt.config.ts

@@ -37,7 +37,7 @@ export default defineNuxtConfig({
       tasks: true,
     },
     scheduledTasks: {
-      '* * * * *': ['task:auto-create'], // Every minute
+      '* * * * *': ['task:auto-create', 'kitchen:average-update'], // Every minute
       '0 * * * *': ['kitchen:revenue-update'], // Every hour
       '0 0 * * *': ['kitchen:rating-update'], // Every day
     },

apps/web-app/server/tasks/kitchen/average-update.ts

@@ -0,0 +1,32 @@
+import { repository } from '@roll-stack/database'
+
+export default defineTask({
+  meta: {
+    name: 'kitchen:average-update',
+    description: 'Update average data of kitchens',
+  },
+  async run() {
+    try {
+      const revenuesToUpdate = await repository.kitchen.listRevenuesToUpdate()
+      for (const revenue of revenuesToUpdate) {
+        // Average check
+        const averageCheck = Math.round(revenue.total / revenue.checks)
+
+        // common
+        const allRevenuesThisPeriod = await repository.kitchen.listRevenuesForDate(revenue.date)
+        const commonAverageCheck = Math.round(allRevenuesThisPeriod.reduce((acc, curr) => acc + curr.averageCheck, 0) / allRevenuesThisPeriod.length)
+        const commonTotal = Math.round(allRevenuesThisPeriod.reduce((acc, curr) => acc + curr.total, 0) / allRevenuesThisPeriod.length)
+
+        await repository.kitchen.updateRevenue(revenue.id, {
+          averageCheck,
+          commonAverageCheck,
+          commonTotal,
+        })
+      }
+    } catch (error) {
+      errorResolver(error)
+    }
+
+    return { result: true }
+  },
+})

packages/database/src/repository/kitchen.ts

@@ -54,6 +54,25 @@ export class Kitchen {
     })
   }
 
+  static async listRevenuesForDate(date: string) {
+    return useDatabase().query.kitchenRevenues.findMany({
+      where: (revenues, { and }) => and(
+        sql`date(${revenues.date}) >= date(${date})`,
+        sql`date(${revenues.date}) <= date(${date})`,
+      ),
+    })
+  }
+
+  static async listRevenuesToUpdate() {
+    return useDatabase().query.kitchenRevenues.findMany({
+      where: (revenues, { eq, or }) => or(
+        eq(revenues.averageCheck, 0),
+        eq(revenues.commonTotal, 0),
+      ),
+      limit: 50,
+    })
+  }
+
   static async create(data: KitchenDraft) {
     const [kitchen] = await useDatabase().insert(kitchens).values(data).returning()
     return kitchen

packages/database/src/tables.ts

@@ -420,7 +420,10 @@ export const kitchenRevenues = pgTable('kitchen_revenues', {
   updatedAt: timestamp('updated_at', { precision: 3, withTimezone: true, mode: 'string' }).notNull().defaultNow(),
   date: date('date', { mode: 'string' }).notNull(),
   total: numeric('total', { mode: 'number' }).notNull().default(0),
+  commonTotal: numeric('common_total', { mode: 'number' }).notNull().default(0),
   checks: integer('checks').notNull().default(0),
+  averageCheck: numeric('average_check', { mode: 'number' }).notNull().default(0),
+  commonAverageCheck: numeric('common_average_check', { mode: 'number' }).notNull().default(0),
   kitchenId: cuid2('kitchen_id').notNull().references(() => kitchens.id),
 })