63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<UBadge
|
|
:color="badgeColor"
|
|
:variant="variant"
|
|
:size="size"
|
|
>
|
|
<UIcon v-if="showIcon" :name="iconName" class="mr-1" />
|
|
{{ displayText }}
|
|
</UBadge>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type ConcentrationStatus = 'green' | 'yellow' | 'red'
|
|
|
|
interface Props {
|
|
status: ConcentrationStatus
|
|
topSourcePct?: number
|
|
variant?: 'solid' | 'outline' | 'soft' | 'subtle'
|
|
size?: 'xs' | 'sm' | 'md' | 'lg'
|
|
showIcon?: boolean
|
|
showPercentage?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'subtle',
|
|
size: 'sm',
|
|
showIcon: false,
|
|
showPercentage: true
|
|
})
|
|
|
|
const badgeColor = computed(() => {
|
|
return props.status
|
|
})
|
|
|
|
const displayText = computed(() => {
|
|
const statusTexts = {
|
|
green: 'Low Risk',
|
|
yellow: 'Medium Risk',
|
|
red: 'High Risk'
|
|
}
|
|
|
|
const baseText = statusTexts[props.status]
|
|
|
|
if (props.showPercentage && props.topSourcePct) {
|
|
return `${baseText} (${Math.round(props.topSourcePct)}%)`
|
|
}
|
|
|
|
return baseText
|
|
})
|
|
|
|
const iconName = computed(() => {
|
|
switch (props.status) {
|
|
case 'green':
|
|
return 'i-heroicons-check-circle'
|
|
case 'yellow':
|
|
return 'i-heroicons-exclamation-triangle'
|
|
case 'red':
|
|
return 'i-heroicons-x-circle'
|
|
default:
|
|
return 'i-heroicons-question-mark-circle'
|
|
}
|
|
})
|
|
</script>
|