| 1 | <template> |
| 2 | <n-card size="small" embedded title="Template choice distribution"> |
| 3 | <div class="flex flex-col gap-2"> |
| 4 | <TemplateChoiceBar |
| 5 | label="Correct" |
| 6 | color="success" |
| 7 | :count="stats.template_choice_correct" |
| 8 | :total="templateChoiceTotal" |
| 9 | /> |
| 10 | <TemplateChoiceBar |
| 11 | label="Partial" |
| 12 | color="warning" |
| 13 | :count="stats.template_choice_partial" |
| 14 | :total="templateChoiceTotal" |
| 15 | /> |
| 16 | <TemplateChoiceBar |
| 17 | label="Wrong" |
| 18 | color="error" |
| 19 | :count="stats.template_choice_wrong" |
| 20 | :total="templateChoiceTotal" |
| 21 | /> |
| 22 | <p v-if="templateChoiceTotal === 0" class="text-sm">No template choice feedback yet.</p> |
| 23 | </div> |
| 24 | </n-card> |
| 25 | </template> |
| 26 | |
| 27 | <script setup lang="ts"> |
| 28 | import type { AiAnalystReviewStats } from "@/types/aiAnalyst.d" |
| 29 | import { NCard } from "naive-ui" |
| 30 | import { computed, toRefs } from "vue" |
| 31 | import TemplateChoiceBar from "./FeedbackTemplateChoiceBar.vue" |
| 32 | |
| 33 | const props = defineProps<{ |
| 34 | stats: AiAnalystReviewStats |
| 35 | }>() |
| 36 | |
| 37 | const { stats } = toRefs(props) |
| 38 | |
| 39 | const templateChoiceTotal = computed(() => |
| 40 | stats.value |
| 41 | ? stats.value.template_choice_correct + stats.value.template_choice_partial + stats.value.template_choice_wrong |
| 42 | : 0 |
| 43 | ) |
| 44 | </script> |