Render summary as bar chart after submitting answer

Author: kangasta

back-end/server.py

@@ -252,10 +252,20 @@ def get_feedback_summary(key: str):
         values[value_to_str(c)] = 0
     values[value_to_str(None)] = 0
 
+    total = 0
+    non_null = 0
     for count, value in rows:
         values[value_to_str(value)] = count
 
-    data = dict(values=values)
+        total += count
+        if value is not None:
+            non_null += count
+
+    data = dict(
+        count_non_null=non_null,
+        count_total=total,
+        values=values,
+    )
     return jsonify(data), 200
 
 

back-end/test.sh

@@ -4,38 +4,38 @@ base_url=${1:-localhost\:5000}
 
 # Wait until server is online
 for i in $(seq 1 60); do
-    curl $base_url/feedback/how-are-you-feeling && break || true
+    curl $base_url/feedback/thumbs && break || true
     sleep 1
 done
 
 check_summary() {
-    len=$(curl -s $base_url/feedback/how-are-you-feeling/answer | jq 'length')
+    len=$(curl -s $base_url/feedback/thumbs/answer | jq 'length')
     test "$len" -eq $1
 
-    positive=$(curl -s $base_url/feedback/how-are-you-feeling/summary | jq .'values."1"')
+    positive=$(curl -s $base_url/feedback/thumbs/summary | jq .'values."1"')
     test "$positive" -eq $2
-    negative=$(curl -s $base_url/feedback/how-are-you-feeling/summary | jq .'values."-1"')
+    negative=$(curl -s $base_url/feedback/thumbs/summary | jq .'values."-1"')
     test "$negative" -eq $3
-    empty=$(curl -s $base_url/feedback/how-are-you-feeling/summary | jq .'values.""')
+    empty=$(curl -s $base_url/feedback/thumbs/summary | jq .'values.""')
     test "$empty" -eq $4
 }
 
-len=$(curl -s $base_url/feedback/how-are-you-feeling/answer | jq 'length')
+len=$(curl -s $base_url/feedback/thumbs/answer | jq 'length')
 test "$len" -eq 0
 
 feedback="1
 -1
 1"
 
 for i in $feedback; do
-    curl -s -X POST -H "Content-Type: application/json" -d "{\"value\":$i, \"submit\": true}" $base_url/feedback/how-are-you-feeling/answer
+    curl -s -X POST -H "Content-Type: application/json" -d "{\"value\":$i, \"submit\": true}" $base_url/feedback/thumbs/answer
 done;
 
-last=$(curl -s -X POST -H "Content-Type: application/json" -d "{\"value\": -1}" $base_url/feedback/how-are-you-feeling/answer | jq .id -r)
+last=$(curl -s -X POST -H "Content-Type: application/json" -d "{\"value\": -1}" $base_url/feedback/thumbs/answer | jq .id -r)
 
 check_summary 4 2 2 0
 
-curl -s -X PATCH -H "Content-Type: application/json" -d "{\"value\": 1, \"submit\": true}" $base_url/feedback/how-are-you-feeling/answer/$last
-curl -s -X POST -H "Content-Type: application/json" -d "{}" $base_url/feedback/how-are-you-feeling/answer
+curl -s -X PATCH -H "Content-Type: application/json" -d "{\"value\": 1, \"submit\": true}" $base_url/feedback/thumbs/answer/$last
+curl -s -X POST -H "Content-Type: application/json" -d "{}" $base_url/feedback/thumbs/answer
 
 check_summary 5 3 1 1

front-end/src/App.svelte

@@ -18,6 +18,7 @@
   import Error from "./lib/Error.svelte";
   import Submit from "./lib/Submit.svelte";
   import Comment from "./lib/Comment.svelte";
+    import BarChart from "./lib/BarChart.svelte";
 
   let loading = $state(true);
   let error = $state<Problem | null>(null);
@@ -139,10 +140,10 @@
       {/if}
       <Submit onSubmit={handleSubmit} />
     {/if}
-  {:else if question && answer?.submitted_at}
+  {:else if question && answer?.submitted_at && summary}
     <div class="summary">
       <p>Thank you for your feedback!</p>
-      <pre>{JSON.stringify(summary, null, 2)}</pre>
+      <BarChart choices={question.choices} {summary} />
     </div>
   {/if}
 </main>

front-end/src/lib/BarChart.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Choice, Summary } from "./api";
+
+  interface Props {
+    choices: Choice[];
+    summary: Summary;
+  }
+
+  let { choices, summary }: Props = $props();
+</script>
+
+<div class="bar-chart">
+  {#each choices as choice}
+    <div class="row">
+      <span>{choice.label}</span>
+      <div class="bar" style="width: {summary.values[String(choice.value)] / summary.count_non_null * 100}%"
+        ></div>
+      <span>{summary.values[String(choice.value)]}</span>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .bar-chart {
+    margin: 2rem 0;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 1rem 0;
+  }
+
+  .bar {
+    background-color: var(--color-primary);
+    border-radius: var(--border-radius);
+    height: 0.5rem;
+    min-width: 1rem;
+  }
+</style>

front-end/src/lib/api.ts

@@ -34,6 +34,8 @@ export interface Answer {
 export type UpdateAnswerPayload = Partial<Pick<Answer, "value" | "comment" | "group"> & {submit: boolean}>;
 
 export interface Summary {
+  count_non_null: number;
+  count_total: number;
   values: Record<string, number>;
 }