| 1 | <template> |
| 2 | <Badge :color="getComplianceLevelColor(getComplianceLevel(score))" type="splitted" bright class="whitespace-nowrap"> |
| 3 | <template #iconLeft> |
| 4 | <ScaLevelIcon :level="getComplianceLevel(score)" :size="14" /> |
| 5 | </template> |
| 6 | <template #label>Score</template> |
| 7 | <template #value>{{ score }}%</template> |
| 8 | </Badge> |
| 9 | </template> |
| 10 | |
| 11 | <script setup lang="ts"> |
| 12 | import type { BadgeColor } from "@/components/common/Badge.vue" |
| 13 | import Badge from "@/components/common/Badge.vue" |
| 14 | import { ScaComplianceLevel } from "@/types/sca.d" |
| 15 | import ScaLevelIcon from "./ScaLevelIcon.vue" |
| 16 | import { getComplianceLevel } from "./utils" |
| 17 | |
| 18 | const { score } = defineProps<{ score: number }>() |
| 19 | |
| 20 | function getComplianceLevelColor(level: ScaComplianceLevel): BadgeColor { |
| 21 | switch (level) { |
| 22 | case ScaComplianceLevel.Excellent: |
| 23 | return "success" |
| 24 | case ScaComplianceLevel.Good: |
| 25 | return "primary" |
| 26 | case ScaComplianceLevel.Average: |
| 27 | return "warning" |
| 28 | case ScaComplianceLevel.Poor: |
| 29 | return "warning" |
| 30 | case ScaComplianceLevel.Critical: |
| 31 | return "danger" |
| 32 | default: |
| 33 | return "primary" |
| 34 | } |
| 35 | } |
| 36 | </script> |