ghost bar chart

resources/js/components/UI/BarChart.vue

@@ -1,9 +1,18 @@
 <template>
-	<div class="flex items-end justify-between h-28">
+	<div class="flex items-end justify-between sm:h-28 h-20">
+		<!--Data bar-->
 		<span
-			class="w-2.5 block rounded-lg lg:mr-2 mr-1.5"
-			:style="{height: height + '%', backgroundColor: color}"
+			class="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-->
+		<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>
@@ -11,9 +20,14 @@
 <script>
 export default {
 	name: 'BarChart',
-	props: {
-		data: {},
-		color: {},
+	props: [
+		'color',
+		'data',
+	],
+	computed: {
+		ghostLength() {
+			return 45 - this.data.length
+		}
 	}
 }
 </script>