86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<template>
|
|
<LoadingCard :loading="loading" class="flex flex-col px-6 py-4">
|
|
<div class="h-6 flex items-center mb-4">
|
|
<h3 class="flex-1 mr-3 leading-tight text-sm font-bold">{{ title }}</h3>
|
|
|
|
<HelpTextTooltip :text="helpText" :width="helpWidth" />
|
|
|
|
<div class="flex-none text-right">
|
|
<span class="text-gray-500 font-medium inline-block">
|
|
{{ formattedValue }}
|
|
<span v-if="suffix" class="text-sm">{{ formattedSuffix }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="flex items-center text-4xl mb-4">{{ percentage }}%</p>
|
|
|
|
<div class="flex h-full justify-center items-center flex-grow-1 mb-4">
|
|
<ProgressBar
|
|
:title="formattedValue"
|
|
:color="bgClass"
|
|
:value="percentage"
|
|
/>
|
|
</div>
|
|
</LoadingCard>
|
|
</template>
|
|
|
|
<script>
|
|
import { singularOrPlural } from '@/util'
|
|
|
|
export default {
|
|
name: 'BaseProgressMetric',
|
|
|
|
props: {
|
|
loading: { default: true },
|
|
title: {},
|
|
helpText: {},
|
|
helpWidth: {},
|
|
maxWidth: {},
|
|
target: {},
|
|
value: {},
|
|
percentage: {},
|
|
format: {
|
|
type: String,
|
|
default: '(0[.]00a)',
|
|
},
|
|
avoid: { type: Boolean, default: false },
|
|
prefix: '',
|
|
suffix: '',
|
|
suffixInflection: { type: Boolean, default: true },
|
|
},
|
|
|
|
computed: {
|
|
isNullValue() {
|
|
return this.value == null
|
|
},
|
|
|
|
formattedValue() {
|
|
if (!this.isNullValue) {
|
|
const value = Nova.formatNumber(new String(this.value), this.format)
|
|
|
|
return `${this.prefix}${value}`
|
|
}
|
|
|
|
return ''
|
|
},
|
|
|
|
formattedSuffix() {
|
|
if (this.suffixInflection === false) {
|
|
return this.suffix
|
|
}
|
|
|
|
return singularOrPlural(this.value, this.suffix)
|
|
},
|
|
|
|
bgClass() {
|
|
if (this.avoid) {
|
|
return this.percentage > 60 ? 'bg-yellow-500' : 'bg-green-300'
|
|
}
|
|
|
|
return this.percentage > 60 ? 'bg-green-500' : 'bg-yellow-300'
|
|
},
|
|
},
|
|
}
|
|
</script>
|