53 lines
1.0 KiB
Vue
53 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{
|
|
statusCount?: {
|
|
fail: number;
|
|
success: number;
|
|
unknown: number;
|
|
};
|
|
}>();
|
|
|
|
const total = computed(() => {
|
|
return (
|
|
(props.statusCount?.fail || 0) +
|
|
(props.statusCount?.success || 0) +
|
|
(props.statusCount?.unknown || 0)
|
|
);
|
|
});
|
|
|
|
const done = computed(() => {
|
|
if (total.value === 0) {
|
|
return 0;
|
|
}
|
|
|
|
return ((props.statusCount?.success || 0) / total.value) * 100;
|
|
});
|
|
|
|
const notDone = computed(() => {
|
|
if (total.value === 0) {
|
|
return 0;
|
|
}
|
|
|
|
return ((props.statusCount?.fail || 0) / total.value) * 100 + done.value;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<span class="relative inline-block h-2 w-full bg-gray-300">
|
|
<span
|
|
v-if="notDone !== done"
|
|
class="absolute h-full bg-orange-500"
|
|
:style="{ width: `${notDone}%` }"
|
|
></span>
|
|
<span
|
|
v-if="done > 0"
|
|
class="absolute h-full bg-green-500"
|
|
:style="{ width: `${done}%` }"
|
|
></span>
|
|
</span>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|