55 lines
1.0 KiB
Vue
55 lines
1.0 KiB
Vue
<script setup>
|
|
import { useTheme } from 'vuetify'
|
|
import { getPolarChartConfig } from '@core/libs/chartjs/chartjsConfig'
|
|
import PolarAreaChart from '@core/libs/chartjs/components/PolarAreaChart'
|
|
|
|
const props = defineProps({
|
|
colors: {
|
|
type: null,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const vuetifyTheme = useTheme()
|
|
const chartConfig = computed(() => getPolarChartConfig(vuetifyTheme.current.value))
|
|
|
|
const data = {
|
|
labels: [
|
|
'Africa',
|
|
'Asia',
|
|
'Europe',
|
|
'America',
|
|
'Antarctica',
|
|
'Australia',
|
|
],
|
|
datasets: [{
|
|
borderWidth: 0,
|
|
label: 'Population (millions)',
|
|
data: [
|
|
19,
|
|
17.5,
|
|
15,
|
|
13.5,
|
|
11,
|
|
9,
|
|
],
|
|
backgroundColor: [
|
|
props.colors.primary,
|
|
props.colors.yellow,
|
|
props.colors.polarChartWarning,
|
|
props.colors.polarChartInfo,
|
|
props.colors.polarChartGrey,
|
|
props.colors.polarChartGreen,
|
|
],
|
|
}],
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<PolarAreaChart
|
|
:height="400"
|
|
:chart-data="data"
|
|
:chart-options="chartConfig"
|
|
/>
|
|
</template>
|