From f15961e7cf5bce971244abc40dc87687854810a8 Mon Sep 17 00:00:00 2001
From: Qin Guan <qinguan20040914@gmail.com>
Date: Fri, 14 Jul 2023 14:59:18 +0800
Subject: [PATCH] feat: charts

---
 pages/dashboard/surveys/[id]/analytics.vue | 47 +++++++++++---
 server/trpc/context.ts                     |  3 +-
 server/trpc/routers/analytics/index.ts     | 71 ++++++++++++++++++----
 shared/survey.ts                           |  1 +
 4 files changed, 101 insertions(+), 21 deletions(-)

diff --git a/pages/dashboard/surveys/[id]/analytics.vue b/pages/dashboard/surveys/[id]/analytics.vue
index ceefe5d..a29a6ef 100644
--- a/pages/dashboard/surveys/[id]/analytics.vue
+++ b/pages/dashboard/surveys/[id]/analytics.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import RadioButton from 'primevue/radiobutton'
 import Dialog from 'primevue/dialog'
 import TabView from 'primevue/tabview'
 import TabPanel from 'primevue/tabpanel'
@@ -7,6 +6,8 @@ import DataTable from 'primevue/datatable'
 import Button from 'primevue/button'
 import Textarea from 'primevue/textarea'
 import Column from 'primevue/column'
+import Chart from 'primevue/chart'
+import RadioButton from 'primevue/radiobutton'
 
 const route = useRoute()
 const { $client } = useNuxtApp()
@@ -15,12 +16,9 @@ const responsePreview = reactive({
   visible: false,
   idx: -1,
 })
-const { data } = await $client.analytics.listResponses.useQuery({ id: route.params.id as string })
-// const qnData = computed(() => {
-//   return data.value.map((d) => d.data).reduce((acc, curr) => {
 
-//   }, [])
-// })
+const { data } = await $client.analytics.listResponses.useQuery({ id: route.params.id as string })
+const { data: allChartData } = await $client.analytics.chartResponses.useQuery({ id: route.params.id as string })
 </script>
 
 <template>
@@ -29,7 +27,13 @@ const { data } = await $client.analytics.listResponses.useQuery({ id: route.para
       <div flex flex-col divide-y divide-gray>
         <div v-for="(question, idx) in data.schema" :key="idx" flex flex-col gap3 py6>
           <span font-semibold>{{ question.title }}</span>
-          <div>
+
+          <div
+            v-if="
+              // @ts-expect-error This exists
+              data.responses[responsePreview.idx].data[idx]
+            "
+          >
             <Textarea
               v-if="question.type === 'text'" disabled :value="
                 // @ts-expect-error Answer exists on text type
@@ -51,6 +55,11 @@ const { data } = await $client.analytics.listResponses.useQuery({ id: route.para
               </div>
             </div>
           </div>
+          <div v-else>
+            <span text-red-600>
+              No response as this question is new!
+            </span>
+          </div>
         </div>
       </div>
     </Dialog>
@@ -77,7 +86,29 @@ const { data } = await $client.analytics.listResponses.useQuery({ id: route.para
         </DataTable>
       </TabPanel>
       <TabPanel header="Charts">
-        <div />
+        <div flex flex-col gap6>
+          <div
+            v-for="(qnChartData, idx) in allChartData"
+            :key="idx"
+          >
+            <div
+              v-if="qnChartData.labels.length > 0"
+            >
+              <span font-semibold>
+                {{ data.schema[idx].title }}
+              </span>
+              <Chart
+                type="bar" :data="qnChartData" :options="{
+                  scales: {
+                    y: {
+                      beginAtZero: true,
+                    },
+                  },
+                }"
+              />
+            </div>
+          </div>
+        </div>
       </TabPanel>
     </TabView>
   </main>
diff --git a/server/trpc/context.ts b/server/trpc/context.ts
index 4cc9dd8..ed5e5d6 100644
--- a/server/trpc/context.ts
+++ b/server/trpc/context.ts
@@ -1,6 +1,5 @@
 import type { inferAsyncReturnType } from '@trpc/server'
 import type { H3Event } from 'h3'
-import { logger } from '../utils/logger'
 import { createSessionContext } from '../utils/session'
 
 /**
@@ -9,7 +8,7 @@ import { createSessionContext } from '../utils/session'
  */
 export function createContext(_event: H3Event) {
   // TODO better logging for this
-  logger(_event.node.req, _event.node.res)
+  // logger(_event.node.req, _event.node.res)
 
   const session = createSessionContext(_event)
 
diff --git a/server/trpc/routers/analytics/index.ts b/server/trpc/routers/analytics/index.ts
index ea62763..095e699 100644
--- a/server/trpc/routers/analytics/index.ts
+++ b/server/trpc/routers/analytics/index.ts
@@ -1,8 +1,8 @@
 import { z } from 'zod'
-import { TRPCError } from '@trpc/server'
 import { protectedProcedure, router } from '../../trpc'
-import { surveySchema } from '../../../../shared/survey'
+import type { SurveyResponseSchema, SurveySchema } from '../../../../shared/survey'
 
+// TODO probably need a better name for all the functions here
 export const analyticsRouter = router({
   myResponses: protectedProcedure.query(async ({ ctx }) => {
     return await ctx.prisma.survey.findMany({
@@ -33,17 +33,66 @@ export const analyticsRouter = router({
       },
     })
 
-    const result = await surveySchema.safeParseAsync(data.schema)
-    if (!result.success) {
-      throw new TRPCError({
-        code: 'BAD_REQUEST',
-        cause: result.error,
-      })
-    }
-
     return {
       ...data,
-      schema: result.data,
+      schema: data.schema as SurveySchema,
     }
   }),
+  chartResponses: protectedProcedure.input(
+    z.object({
+      id: z.string(),
+    }),
+  ).query(async ({ ctx, input }) => {
+    const [responses, survey] = await Promise.all([ctx.prisma.response.findMany({
+      where: {
+        surveyId: input.id,
+      },
+    }), ctx.prisma.survey.findUniqueOrThrow({
+      where: {
+        id: input.id,
+      },
+    })])
+
+    const surveySchema = survey.schema as SurveySchema
+
+    /**
+     * [
+     *  { // Question 1
+     *    "A label": 10,
+     *    "Another label": 20,
+     *  }
+     * ]
+     */
+    const labels: (Record<string, number>)[] = Array.from({ length: surveySchema.length }).map(() => ({}))
+
+    for (const idx in responses) { // For every response
+      const responseData = responses[idx].data as SurveyResponseSchema
+
+      for (const qnIdx in responseData) { // For every question in response
+        const qnData = responseData[qnIdx]
+
+        if (qnData.type === 'mcq') {
+          const textOption = surveySchema[qnIdx].options[qnData.option]
+          if (!labels[qnIdx][textOption])
+            labels[qnIdx][textOption] = 0
+
+          labels[qnIdx][textOption]++
+        }
+      }
+    }
+
+    const chartData = labels.map((qn) => {
+      return {
+        labels: Object.keys(qn),
+        datasets: [
+          {
+            label: 'Responses',
+            data: Object.values(qn),
+          },
+        ],
+      }
+    })
+
+    return chartData
+  }),
 })
diff --git a/shared/survey.ts b/shared/survey.ts
index 4462435..7a1b793 100644
--- a/shared/survey.ts
+++ b/shared/survey.ts
@@ -28,3 +28,4 @@ export const surveyResponseSchema = z.array(questionResponseSchema)
 
 export type QuestionResponseSchema = z.infer<typeof questionResponseSchema>
 export type SurveyResponseSchema = z.infer<typeof surveyResponseSchema>
+export type SurveySchema = z.infer<typeof surveySchema>