popover over bar chart

resources/js/components/UI/BarChart.vue

@@ -1,12 +1,11 @@
 <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>
+		<Bar
+			v-for="(item, i) in data"
+			:key="i"
+			:bar="item"
+		/>
 
 		<!--Ghost bar-->
 		<span
@@ -19,16 +18,21 @@
 	</div>
 </template>
 <script>
-export default {
-	name: 'BarChart',
-	props: [
-		'color',
-		'data',
-	],
-	computed: {
-		ghostLength() {
-			return 45 - this.data.length
-		}
-	},
-}
+    import Bar from "./Bar";
+
+	export default {
+		name: 'BarChart',
+		props: [
+			'color',
+			'data',
+		],
+		components: {
+			Bar,
+		},
+		computed: {
+			ghostLength() {
+				return 45 - this.data.length
+			}
+		},
+	}
 </script>