mirror of
https://github.com/cruip/vuejs-admin-dashboard-template.git
synced 2026-03-01 00:35:36 +08:00
53 lines
1.5 KiB
Vue
53 lines
1.5 KiB
Vue
<template>
|
|
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
|
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
|
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Top Countries</h2>
|
|
</header>
|
|
<!-- Chart built with Chart.js 3 -->
|
|
<!-- Change the height attribute to adjust the chart height -->
|
|
<DoughnutChart :data="chartData" width="389" height="260" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue'
|
|
import DoughnutChart from '../../charts/DoughnutChart.vue'
|
|
|
|
// Import utilities
|
|
import { tailwindConfig } from '../../utils/Utils'
|
|
|
|
export default {
|
|
name: 'DashboardCard06',
|
|
components: {
|
|
DoughnutChart,
|
|
},
|
|
setup() {
|
|
const chartData = ref({
|
|
labels: ['United States', 'Italy', 'Other'],
|
|
datasets: [
|
|
{
|
|
label: 'Top Countries',
|
|
data: [
|
|
35, 30, 35,
|
|
],
|
|
backgroundColor: [
|
|
tailwindConfig().theme.colors.indigo[500],
|
|
tailwindConfig().theme.colors.blue[400],
|
|
tailwindConfig().theme.colors.indigo[800],
|
|
],
|
|
hoverBackgroundColor: [
|
|
tailwindConfig().theme.colors.indigo[600],
|
|
tailwindConfig().theme.colors.blue[500],
|
|
tailwindConfig().theme.colors.indigo[900],
|
|
],
|
|
borderWidth: 0,
|
|
},
|
|
],
|
|
})
|
|
|
|
return {
|
|
chartData,
|
|
}
|
|
}
|
|
}
|
|
</script> |