53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<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> |