diff --git a/Bouvet.Developer.Survey.Backend/Bouvet.Developer.Survey.Service/TransferObjects/Survey/Results/Response/QuestionResponseDto.cs b/Bouvet.Developer.Survey.Backend/Bouvet.Developer.Survey.Service/TransferObjects/Survey/Results/Response/QuestionResponseDto.cs index c3b01e3..919c93a 100644 --- a/Bouvet.Developer.Survey.Backend/Bouvet.Developer.Survey.Service/TransferObjects/Survey/Results/Response/QuestionResponseDto.cs +++ b/Bouvet.Developer.Survey.Backend/Bouvet.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? Choices { get; set; } + public int NumberOfRespondents { get; set; } public static QuestionResponseDto CreateFromEntity(Question question, ICollection 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/Bouvet.Developer.Survey.Backend/Bouvet.Developer.Survey.Service/TransferObjects/Survey/Structures/SurveyDto.cs b/Bouvet.Developer.Survey.Backend/Bouvet.Developer.Survey.Service/TransferObjects/Survey/Structures/SurveyDto.cs index 6522032..8cd7547 100644 --- a/Bouvet.Developer.Survey.Backend/Bouvet.Developer.Survey.Service/TransferObjects/Survey/Structures/SurveyDto.cs +++ b/Bouvet.Developer.Survey.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? 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 index 6b2d721..7dcf434 100644 --- 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
Henter resultater...
; if (error) return
Error: {error.message}
; + return (
- - {data.isMultipleChoice && } + + {data.isMultipleChoice && ( + + )}
); diff --git a/frontend/src/app/components/charts/BarChart.tsx b/frontend/src/app/components/charts/BarChart.tsx index b8ee1f2..a6dc9b3 100644 --- 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[] = [ { x, @@ -77,7 +80,7 @@ const BarChart = ({ x, y }: BarChartData) => { />
- +
); diff --git a/frontend/src/app/components/charts/ChartCounter.tsx b/frontend/src/app/components/charts/ChartCounter.tsx index 23b7d85..b5c8ffe 100644 --- 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 (
Antall svar:
-
{number.toString()}
+
{numberOfRespondents.toString()}
({percentage}%)
); diff --git a/frontend/src/app/components/charts/DotPlotChart.tsx b/frontend/src/app/components/charts/DotPlotChart.tsx index d3ea9f0..86da9c1 100644 --- 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 }} />
- +
); diff --git a/frontend/src/app/types/survey.ts b/frontend/src/app/types/survey.ts index 3f119a8..3e0888a 100644 --- 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 {