added prettier

resources/js/components/UI/BarChart.vue

@@ -1,38 +1,32 @@
 <template>
-	<div class="lg:flex lg:items-end lg:justify-between grid grid-flow-col lg:gap-0 sm:gap-2 gap-1 items-end sm:h-28 h-20">
-		<!--Data bar-->
-		<Bar
-			v-for="(item, i) in data"
-			:key="i"
-			:bar="item"
-		/>
+    <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="2xl:w-3 lg:w-2 block lg:mr-2 relative cursor-pointer dark:bg-gray-800 bg-gray-100"
-			v-for="(ghost, i) in ghostLength"
-			:style="{height: '7%'}"
-			:key="i">
-		</span>
-	</div>
+        <!--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";
+import Bar from './Bar'
 
-	export default {
-		name: 'BarChart',
-		props: [
-			'color',
-			'data',
-		],
-		components: {
-			Bar,
-		},
-		computed: {
-			ghostLength() {
-				return 45 - this.data.length
-			}
-		},
-	}
-</script>
+export default {
+    name: 'BarChart',
+    props: ['color', 'data'],
+    components: {
+        Bar,
+    },
+    computed: {
+        ghostLength() {
+            return 45 - this.data.length
+        },
+    },
+}
+</script>