Merge pull request #142 from bouvet/feat/add-number-of-respondents

feat: add number of respondents
bouvet · Jan 28, 2025 · 430d2c3 · 430d2c3
2 parents 3fe8c34 + 7b04760
commit 430d2c3
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 15 deletions.
diff --git a/...t.Developer.Survey.Service/TransferObjects/Survey/Results/Response/QuestionResponseDto.cs b/...t.Developer.Survey.Service/TransferObjects/Survey/Results/Response/QuestionResponseDto.cs
@@ -11,10 +11,10 @@ public class QuestionResponseDto
     public string QuestionText { get; set; } = null!;
     public string QuestionDescription { get; set; } = null!;
     public bool IsMultipleChoice { get; set; }
-
     public DateTimeOffset CreatedAt { get; set; }
     public DateTimeOffset? UpdatedAt { get; set; }
     public virtual ICollection<GetChoiceDto>? Choices { get; set; }
+    public int NumberOfRespondents { get; set; }
 
     public static QuestionResponseDto CreateFromEntity(Question question, ICollection<GetChoiceDto> getChoiceDto)
     {
@@ -28,8 +28,10 @@ public static QuestionResponseDto CreateFromEntity(Question question, ICollectio
             IsMultipleChoice = question.IsMultipleChoice,
             CreatedAt = question.CreatedAt,
             UpdatedAt = question.UpdatedAt,
-			// NumberOfRespondents = //TODO
-            Choices = getChoiceDto
+            Choices = getChoiceDto,
+            NumberOfRespondents = question.ResponseUsers != null
+            ? question.ResponseUsers.Select(ru => ru.UserId).Distinct().Count()
+            : 0,
         };
     }
 }
diff --git a/...ey.Backend/Bouvet.Developer.Survey.Service/TransferObjects/Survey/Structures/SurveyDto.cs b/...ey.Backend/Bouvet.Developer.Survey.Service/TransferObjects/Survey/Structures/SurveyDto.cs
@@ -10,6 +10,7 @@ public class SurveyDto
     public DateTimeOffset? UpdatedAt { get; set; }
     public DateTimeOffset? LastSyncedAt { get; set; }
     public virtual ICollection<SurveyElementDto>? SurveyBlocks { get; set; }
+    public int TotalParticipants { get; set; }
 
     public static SurveyDto CreateFromEntity(Domain.Entities.Survey.Survey survey)
     {
@@ -23,6 +24,7 @@ public static SurveyDto CreateFromEntity(Domain.Entities.Survey.Survey survey)
             UpdatedAt = survey.UpdatedAt,
             LastSyncedAt = survey.LastSyncedAt,
             SurveyBlocks = survey.SurveyBlocks?.Select(SurveyElementDto.CreateFromEntity).ToList(),
+            TotalParticipants = survey.Users?.Count ?? 0
         };
     }
 }
diff --git a/frontend/src/app/components/SurveyBlock/SurveyBlockRenderer.tsx b/frontend/src/app/components/SurveyBlock/SurveyBlockRenderer.tsx
@@ -14,12 +14,21 @@ const SurveyBlockRenderer = ({ questionId }: { questionId: string }) => {
 
   if (isLoading) return <div>Henter resultater...</div>;
   if (error) return <div>Error: {error.message}</div>;
+
   return (
     <section className="flex text-black gap-4 flex-col lg:flex-row lg:gap-6">
       <QuestionContainer data={data} />
       <AnswerContainer tabs={tabs}>
-        <BarChart {...barChartData} />
-        {data.isMultipleChoice && <DotPlotChart data={dotPlot} />}
+        <BarChart
+          {...barChartData}
+          numberOfRespondents={data.numberOfRespondents}
+        />
+        {data.isMultipleChoice && (
+          <DotPlotChart
+            data={dotPlot}
+            numberOfRespondents={data?.numberOfRespondents || 0}
+          />
+        )}
       </AnswerContainer>
     </section>
   );

diff --git a/frontend/src/app/components/charts/BarChart.tsx b/frontend/src/app/components/charts/BarChart.tsx
@@ -3,16 +3,19 @@ import { chartConfig, getGridShapes, useChartTheme } from "./chartConfig";
 import { BarChartData } from "@/app/hooks/useGetBarChartData";
 import ChartCounter from "./ChartCounter";
 
+interface Props extends BarChartData {
+  numberOfRespondents: number;
+}
+
 // lazy load 'react-plotly.js'
 const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
 
-const BarChart = ({ x, y }: BarChartData) => {
+const BarChart = ({ x, y, numberOfRespondents }: Props) => {
   // check dark mode and set graph theme
   const theme = useChartTheme();
   const numberOfChoices = y.length;
   const plotHeight = numberOfChoices * 30;
   const shapes = getGridShapes(y);
-
   const chartData: Partial<Plotly.Data>[] = [
     {
       x,
@@ -77,7 +80,7 @@ const BarChart = ({ x, y }: BarChartData) => {
         />
       </div>
       <div className="mt-auto ml-auto">
-        <ChartCounter number={50} total={200} />
+        <ChartCounter numberOfRespondents={numberOfRespondents} />
       </div>
     </div>
   );

diff --git a/frontend/src/app/components/charts/ChartCounter.tsx b/frontend/src/app/components/charts/ChartCounter.tsx
@@ -1,17 +1,21 @@
+import { useSurveyStructure } from "@/app/hooks/useSurveyStructure";
 import React from "react";
 
 interface ChartCounterProps {
-  number: number;
-  total: number;
+  numberOfRespondents: number;
 }
 
-const ChartCounter = ({ number, total }: ChartCounterProps) => {
-  const percentage = total > 0 ? ((number / total) * 100).toFixed(0) : "0";
+const ChartCounter = ({ numberOfRespondents }: ChartCounterProps) => {
+  const { data } = useSurveyStructure();
+  const percentage =
+    data.totalParticipants > 0
+      ? ((numberOfRespondents / data.totalParticipants) * 100).toFixed(0)
+      : "0";
 
   return (
     <div className="flex items-center space-x-1 text-white">
       <div>Antall svar:</div>
-      <div className="font-bold">{number.toString()}</div>
+      <div className="font-bold">{numberOfRespondents.toString()}</div>
       <div className="font-bold">({percentage}%)</div>
     </div>
   );

diff --git a/frontend/src/app/components/charts/DotPlotChart.tsx b/frontend/src/app/components/charts/DotPlotChart.tsx
@@ -13,9 +13,14 @@ const Plot = dynamic(() => import("react-plotly.js"), {
 interface DotPlotChartJsonProps {
   title?: string;
   data: DotPlot;
+  numberOfRespondents: number;
 }
 
-const DotPlotChart = ({ title, data }: DotPlotChartJsonProps) => {
+const DotPlotChart = ({
+  title,
+  data,
+  numberOfRespondents,
+}: DotPlotChartJsonProps) => {
   //check darkmode and set graph theme
   const theme = useChartTheme();
 
@@ -117,7 +122,7 @@ const DotPlotChart = ({ title, data }: DotPlotChartJsonProps) => {
         style={{ width: "100%", height: plotHeight }}
       />
       <div className="mt-auto mb-2 ml-auto">
-        <ChartCounter number={50} total={200} />
+        <ChartCounter numberOfRespondents={numberOfRespondents} />
       </div>
     </div>
   );

diff --git a/frontend/src/app/types/survey.ts b/frontend/src/app/types/survey.ts
@@ -28,6 +28,7 @@ export interface SurveyBlock extends BaseEntity {
 export interface Survey extends BaseEntity {
   name: string;
   surveyId: string;
+  totalParticipants: number;
   lastSyncedAt: string;
   surveyBlocks: SurveyBlock[];
 }
@@ -41,6 +42,7 @@ export interface Answer extends BaseEntity {
   createdAt: string;
   updatedAt: string | null;
   choices: Choice[];
+  numberOfRespondents: number;
 }
 
 export interface Choice extends BaseEntity {