62 lines
1.2 KiB
Vue
62 lines
1.2 KiB
Vue
<script setup>
|
|
import { useTheme } from 'vuetify'
|
|
import { getRadarChartConfig } from '@core/libs/chartjs/chartjsConfig'
|
|
import RadarChart from '@core/libs/chartjs/components/RadarChart'
|
|
|
|
const vuetifyTheme = useTheme()
|
|
const chartConfig = computed(() => getRadarChartConfig(vuetifyTheme.current.value))
|
|
|
|
const chartData = {
|
|
labels: [
|
|
'STA',
|
|
'STR',
|
|
'AGI',
|
|
'VIT',
|
|
'CHA',
|
|
'INT',
|
|
],
|
|
datasets: [
|
|
{
|
|
fill: true,
|
|
label: 'Donté Panlin',
|
|
borderColor: 'transparent',
|
|
backgroundColor: 'rgba(255,161,161, 0.9)',
|
|
data: [
|
|
25,
|
|
59,
|
|
90,
|
|
81,
|
|
60,
|
|
82,
|
|
],
|
|
pointBorderColor: 'transparent',
|
|
pointBackgroundColor: 'transparent',
|
|
},
|
|
{
|
|
fill: true,
|
|
label: 'Mireska Sunbreeze',
|
|
borderColor: 'transparent',
|
|
backgroundColor: 'rgba(155,136,250, 0.9)',
|
|
data: [
|
|
40,
|
|
100,
|
|
40,
|
|
90,
|
|
40,
|
|
90,
|
|
],
|
|
pointBorderColor: 'transparent',
|
|
pointBackgroundColor: 'transparent',
|
|
},
|
|
],
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<RadarChart
|
|
:height="400"
|
|
:chart-data="chartData"
|
|
:chart-options="chartConfig"
|
|
/>
|
|
</template>
|