init

frontend/app/components/CardBarChart.vue

@@ -0,0 +1,53 @@
+<template>
+
+	<!-- Active Users Card -->
+	<a-card :bordered="false" class="dashboard-bar-chart" style="margin-bottom: 20px;">
+		<chart-bar :height="220" :data="barChartData"></chart-bar>
+		<div class="card-title">
+			<h2>Active Users</h2>
+			<p>than last week <span class="text-success">+23%</span></p>
+		</div>
+		<div class="card-content">
+			<p>We have created multiple options for you to put together and customise into pixel perfect pages.</p>
+		</div>
+		<a-row class="card-footer" type="flex" justify="center" align="top">
+			<a-col :span="6">
+				<h4>3,6K</h4>
+				<span>Users</span>
+			</a-col>
+			<a-col :span="6">
+				<h4>2m</h4>
+				<span>Clicks</span>
+			</a-col>
+			<a-col :span="6">
+				<h4>$772</h4>
+				<span>Sales</span>
+			</a-col>
+			<a-col :span="6">
+				<h4>82</h4>
+				<span>Items</span>
+			</a-col>
+		</a-row>
+	</a-card>
+	<!-- Active Users Card -->
+
+</template>
+
+<script setup lang="ts">
+
+const barChartData = {
+  labels: ["01", "02", "03", "04", "05", "06", "07", "08", "09"],
+  datasets: [
+    {
+      label: "Sales",
+      backgroundColor: '#fff',
+      borderWidth: 0,
+      borderSkipped: false,
+      borderRadius: 6,
+      data: [850, 600, 500, 620, 900, 500, 900, 630, 900],
+      maxBarThickness: 20
+    }
+  ]
+}
+
+</script>