mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 00:02:15 +00:00
33 lines
805 B
Vue
33 lines
805 B
Vue
<template>
|
|
<div class="grid h-20 grid-flow-col items-end gap-1 sm:h-28 sm:gap-2 lg:flex lg:items-end lg:justify-between lg:gap-0">
|
|
<!--Data bar-->
|
|
<Bar v-for="(item, i) in data" :key="i" :bar="item" />
|
|
|
|
<!--Ghost bar-->
|
|
<span
|
|
v-if="ghostLength > 0"
|
|
class="relative block cursor-pointer bg-gray-100 dark:bg-gray-800 lg:mr-2 lg:w-2 2xl:w-3"
|
|
v-for="(ghost, i) in ghostLength"
|
|
:style="{ height: '7%' }"
|
|
:key="i"
|
|
>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Bar from './Bar'
|
|
|
|
export default {
|
|
name: 'BarChart',
|
|
props: ['color', 'data'],
|
|
components: {
|
|
Bar,
|
|
},
|
|
computed: {
|
|
ghostLength() {
|
|
return 45 - this.data.length
|
|
},
|
|
},
|
|
}
|
|
</script>
|