scinote-web/app/javascript/vue/experiments/renderers/completed_tasks.vue
2023-12-07 12:53:21 +01:00

28 lines
656 B
Vue

<template>
<div class="relative leading-5 h-full flex items-center">
<div>
{{ i18n.t('experiments.card.completed_value', {
completed: params.data.completed_tasks,
all: params.data.total_tasks
}) }}
<div class="py-1">
<div class="w-48 h-1 bg-sn-light-grey">
<div class="h-full bg-sn-blue" :style="{
width: params.data.completed_tasks / params.data.total_tasks * 100 + '%'
}"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CompletedTasksRenderer',
props: {
params: {
required: true,
},
},
};
</script>