Merge pull request #69 from TaskFlow-CLAP/CLAP-216

CLAP-216 통계 페이지 API 연결

Author: seorang42

src/components/LineChart.vue

@@ -1,7 +1,11 @@
 <template>
   <Line
+    v-if="labels.length !== 0"
     :data="teamData"
     :options="options" />
+  <NoContent
+    v-else
+    content="데이터가 없습니다" />
 </template>
 
 <script setup lang="ts">
@@ -17,6 +21,7 @@ import {
   LinearScale,
   Colors
 } from 'chart.js'
+import NoContent from './lists/NoContent.vue'
 
 ChartJS.register(
   Title,
@@ -41,14 +46,22 @@ const teamData = {
     {
       label: dataLabel,
       data: series,
-      fill: true,
-      tension: 0.4
+      fill: true
     }
   ]
 }
 
 const options = {
   responsive: true,
-  maintainAspectRatio: false
+  maintainAspectRatio: false,
+  scales: {
+    y: {
+      beginAtZero: true,
+      ticks: {
+        stepSize: 1
+      },
+      suggestedMax: Math.max(...series) + 1
+    }
+  }
 }
 </script>

src/components/PieChart.vue

@@ -1,7 +1,11 @@
 <template>
   <Pie
+    v-if="labels.length !== 0"
     :data="teamData"
     :options="options" />
+  <NoContent
+    v-else
+    content="데이터가 없습니다" />
 </template>
 
 <script setup lang="ts">
@@ -16,6 +20,7 @@ import {
   type ChartEvent,
   type ActiveElement
 } from 'chart.js'
+import NoContent from './lists/NoContent.vue'
 ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
 
 const { labels, series } = defineProps<{ labels: string[]; series: number[] }>()

src/components/statistics/StatisticsCard.vue

@@ -10,24 +10,29 @@
     <div class="w-full h-[1px] bg-border-1" />
     <div class="h-60">
       <PieChart
+        :key="JSON.stringify(labels) + periodType"
         v-if="chartType === 'pie'"
-        :labels="['a', 'b', 'c']"
-        :series="[1, 2, 3]" />
+        :labels="labels"
+        :series="series" />
       <LineChart
+        :key="JSON.stringify(labels) + periodType"
         v-if="chartType === 'line'"
-        :labels="['a', 'b', 'c']"
-        :series="[1, 2, 3]"
+        :labels="labels"
+        :series="series"
         :data-label="title.slice(4)" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import PieChart from '../PieChart.vue'
 import LineChart from '../LineChart.vue'
 import PeriodButtons from './PeriodButtons.vue'
 import type { PeriodType } from '@/types/manager'
+import axiosInstance from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
+import type { StatisticsData } from '@/types/admin'
 
 const { title, statisticsType, chartType } = defineProps<{
   title: string
@@ -45,4 +50,31 @@ const periodType = ref<PeriodType>('DAY')
 const changePeriod = (newPeriodType: PeriodType) => {
   periodType.value = newPeriodType
 }
+
+const fetchStatistics = async () => {
+  const response = await axiosInstance.get('/api/tasks/statistics', {
+    headers: {
+      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
+    },
+    params: {
+      periodType: periodType.value,
+      statisticsType
+    }
+  })
+
+  return response.data
+}
+
+const { data } = useQuery<StatisticsData[]>({
+  queryKey: [statisticsType, periodType],
+  queryFn: fetchStatistics
+})
+
+const labels = computed(() => {
+  return data.value?.map(el => el.key) || []
+})
+
+const series = computed(() => {
+  return data.value?.map(el => el.count) || []
+})
 </script>

src/components/statistics/StatisticsCategoryCard.vue

@@ -11,29 +11,29 @@
     <div class="h-60 flex overflow-hidden">
       <div class="w-1/2 px-1">
         <PieChart
-          :labels="['a', 'b', 'c', 'd']"
-          :series="[1, 2, 3, 4]"
+          :key="JSON.stringify(mainLabels) + periodType"
+          :labels="mainLabels"
+          :series="mainSeries"
           @on-click="changeMainCategory" />
       </div>
       <div class="w-1/2 px-1">
         <PieChart
-          :key="mainCategory"
-          :labels="
-            mainCategory
-              ? [`${mainCategory}-1`, `${mainCategory}-2`, `${mainCategory}-3`, `${mainCategory}-4`]
-              : ['카테고리를 선택해주세요']
-          "
-          :series="mainCategory ? [1, 2, 3, 4] : []" />
+          :key="JSON.stringify(subLabels) + mainCategory + periodType"
+          :labels="subLabels"
+          :series="subSeries" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import PieChart from '../PieChart.vue'
 import PeriodButtons from './PeriodButtons.vue'
 import type { PeriodType } from '@/types/manager'
+import axiosInstance from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
+import type { StatisticsData } from '@/types/admin'
 
 const periodType = ref<PeriodType>('DAY')
 const changePeriod = (newPeriodType: PeriodType) => {
@@ -42,4 +42,53 @@ const changePeriod = (newPeriodType: PeriodType) => {
 
 const mainCategory = ref('')
 const changeMainCategory = (value: string) => (mainCategory.value = value)
+
+const fetchMainStatistics = async () => {
+  const response = await axiosInstance.get('/api/tasks/statistics', {
+    headers: {
+      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
+    },
+    params: {
+      periodType: periodType.value,
+      statisticsType: 'REQUEST_BY_CATEGORY'
+    }
+  })
+
+  return response.data
+}
+const { data: mainData } = useQuery<StatisticsData[]>({
+  queryKey: ['REQUEST_BY_CATEGORY', periodType],
+  queryFn: fetchMainStatistics
+})
+const mainLabels = computed(() => {
+  return mainData.value?.map(el => el.key) || []
+})
+const mainSeries = computed(() => {
+  return mainData.value?.map(el => el.count) || []
+})
+
+const fetchSubStatistics = async () => {
+  const response = await axiosInstance.get('/api/tasks/statistics/subcategory', {
+    headers: {
+      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
+    },
+    params: {
+      periodType: periodType.value,
+      mainCategory: mainCategory.value
+    }
+  })
+
+  return response.data
+}
+const { data: subData } = useQuery<StatisticsData[]>({
+  queryKey: [mainCategory.value, periodType],
+  queryFn: fetchSubStatistics,
+  enabled: computed(() => mainCategory.value !== '')
+})
+const subLabels = computed(() => {
+  return subData.value?.map(el => el.key) || []
+})
+const subSeries = computed(() => {
+  return subData.value?.map(el => el.count) || []
+})
 </script>

src/types/admin.ts

@@ -56,3 +56,8 @@ export interface NewLabelTypes {
   labelName: string
   labelColor: string
 }
+
+export interface StatisticsData {
+  key: string
+  count: number
+}