mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 00:02:15 +00:00
35 lines
672 B
Vue
35 lines
672 B
Vue
<template>
|
|
<div class="flex items-end justify-between sm:h-28 h-20">
|
|
<!--Data bar-->
|
|
<span
|
|
class="2xl:w-3 md:w-2 w-1 block rounded-lg lg:mr-2 mr-1.5 bg-theme"
|
|
v-for="(height, i) in data"
|
|
:style="{height: height.amount + '%'}"
|
|
:key="i">
|
|
</span>
|
|
|
|
<!--Ghost bar-->
|
|
<div v-if="ghostLength >= 1">
|
|
<span
|
|
class="md:w-2 w-1 block rounded-lg lg:mr-2 mr-1.5 bg-gray-100"
|
|
v-for="(ghost, i) in ghostLength"
|
|
:style="{height: '5%'}"
|
|
:key="i">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'BarChart',
|
|
props: [
|
|
'color',
|
|
'data',
|
|
],
|
|
computed: {
|
|
ghostLength() {
|
|
return 65 - this.data.length
|
|
}
|
|
}
|
|
}
|
|
</script> |