chart bar

src/views/HomeView.vue

@@ -12,9 +12,12 @@ import DashboardCountCard from '@/components/DashboardCountCard.vue'
 import LabelText from '@/components/LabelText.vue'
 import ProjectMenu from '@/components/ProjectMenu.vue'
 import IssueStatusChart from '@/components/IssueStatusChart.vue'
+import IssueActivityChart from '@/components/IssueActivityChart.vue'
 
 const ACTIVE_STATUSES: Issue['status'][] = ['OPEN', 'IN_PROGRESS']
 
+const ACTIVITY_PERIODS = [7, 30, 90]
+
 const PRIORITY_ICONS: Record<number, string> = {
   4: 'mdi-chevron-double-up',
   3: 'mdi-chevron-up',
@@ -30,7 +33,7 @@ const issueStore = useIssueStore()
 const projectStore = useProjectStore()
 const statusStore = useStatusStore()
 
-const { stats } = storeToRefs(issueStore)
+const { stats, dailyStats } = storeToRefs(issueStore)
 const { projects, current, currentProjectId } = storeToRefs(projectStore)
 
 const currentUserId = computed(() => session.value.data?.user.id ?? null)
@@ -76,6 +79,16 @@ watch(
   { immediate: true },
 )
 
+const activityDays = ref(30)
+
+watch(
+  [currentProjectId, activityDays],
+  ([id, days]) => {
+    void issueStore.getDailyStat(id, days)
+  },
+  { immediate: true },
+)
+
 function isOverdue(issue: Issue) {
   return !!issue.dueDate && new Date(issue.dueDate).getTime() < Date.now()
 }
@@ -153,9 +166,18 @@ function onClickCard(status?: string) {
           </v-card>
         </v-col>
         <v-col cols="12" md="6">
-          <!--          <v-card border>-->
-          <!--            <v-card-text>text</v-card-text>-->
-          <!--          </v-card>-->
+          <v-card border>
+            <v-card-title class="d-flex align-center justify-space-between">
+              <span>Issues activity</span>
+              <v-btn-toggle border density="comfortable" size="small" v-model="activityDays" mandatory>
+                <v-btn border="0" v-for="days in ACTIVITY_PERIODS" :key="days" :value="days">{{ days }}d</v-btn>
+              </v-btn-toggle>
+            </v-card-title>
+            <v-divider />
+            <v-card-text>
+              <issue-activity-chart :stats="dailyStats" />
+            </v-card-text>
+          </v-card>
         </v-col>
       </v-row>