216 lines
6.7 KiB
Vue
216 lines
6.7 KiB
Vue
|
<template>
|
||
|
<DocSectionText v-bind="$attrs">
|
||
|
<p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
|
||
|
</DocSectionText>
|
||
|
<div class="card flex justify-center">
|
||
|
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
|
||
|
</div>
|
||
|
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import EventBus from '@/layouts/AppEventBus';
|
||
|
|
||
|
export default {
|
||
|
redrawListener: null,
|
||
|
data() {
|
||
|
return {
|
||
|
chartData: null,
|
||
|
chartOptions: null,
|
||
|
code: {
|
||
|
basic: `
|
||
|
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
|
||
|
`,
|
||
|
options: `
|
||
|
<template>
|
||
|
<div class="card flex justify-center">
|
||
|
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
data() {
|
||
|
return {
|
||
|
chartData: null,
|
||
|
chartOptions: null
|
||
|
};
|
||
|
},
|
||
|
mounted() {
|
||
|
this.chartData = this.setChartData();
|
||
|
this.chartOptions = this.setChartOptions();
|
||
|
},
|
||
|
methods: {
|
||
|
setChartData() {
|
||
|
const documentStyle = getComputedStyle(document.documentElement);
|
||
|
|
||
|
return {
|
||
|
datasets: [
|
||
|
{
|
||
|
data: [11, 16, 7, 3, 14],
|
||
|
backgroundColor: [
|
||
|
documentStyle.getPropertyValue('--p-pink-500'),
|
||
|
documentStyle.getPropertyValue('--p-gray-500'),
|
||
|
documentStyle.getPropertyValue('--p-orange-500'),
|
||
|
documentStyle.getPropertyValue('--p-purple-500'),
|
||
|
documentStyle.getPropertyValue('--p-cyan-500')
|
||
|
],
|
||
|
label: 'My dataset'
|
||
|
}
|
||
|
],
|
||
|
labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
|
||
|
};
|
||
|
},
|
||
|
setChartOptions() {
|
||
|
const documentStyle = getComputedStyle(document.documentElement);
|
||
|
const textColor = documentStyle.getPropertyValue('--p-text-color');
|
||
|
const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');
|
||
|
|
||
|
return {
|
||
|
plugins: {
|
||
|
legend: {
|
||
|
labels: {
|
||
|
color: textColor
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
scales: {
|
||
|
r: {
|
||
|
grid: {
|
||
|
color: surfaceBorder
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
<\/script>
|
||
|
`,
|
||
|
composition: `
|
||
|
<template>
|
||
|
<div class="card flex justify-center">
|
||
|
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script setup>
|
||
|
import { ref, onMounted } from "vue";
|
||
|
|
||
|
onMounted(() => {
|
||
|
chartData.value = setChartData();
|
||
|
chartOptions.value = setChartOptions();
|
||
|
});
|
||
|
|
||
|
const chartData = ref();
|
||
|
const chartOptions = ref();
|
||
|
|
||
|
const setChartData = () => {
|
||
|
const documentStyle = getComputedStyle(document.documentElement);
|
||
|
|
||
|
return {
|
||
|
datasets: [
|
||
|
{
|
||
|
data: [11, 16, 7, 3, 14],
|
||
|
backgroundColor: [
|
||
|
documentStyle.getPropertyValue('--p-pink-500'),
|
||
|
documentStyle.getPropertyValue('--p-gray-500'),
|
||
|
documentStyle.getPropertyValue('--p-orange-500'),
|
||
|
documentStyle.getPropertyValue('--p-purple-500'),
|
||
|
documentStyle.getPropertyValue('--p-cyan-500')
|
||
|
],
|
||
|
label: 'My dataset'
|
||
|
}
|
||
|
],
|
||
|
labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
|
||
|
};
|
||
|
};
|
||
|
const setChartOptions = () => {
|
||
|
const documentStyle = getComputedStyle(document.documentElement);
|
||
|
const textColor = documentStyle.getPropertyValue('--p-text-color');
|
||
|
const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');
|
||
|
|
||
|
return {
|
||
|
plugins: {
|
||
|
legend: {
|
||
|
labels: {
|
||
|
color: textColor
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
scales: {
|
||
|
r: {
|
||
|
grid: {
|
||
|
color: surfaceBorder
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
}
|
||
|
<\/script>
|
||
|
`
|
||
|
}
|
||
|
};
|
||
|
},
|
||
|
beforeUnmount() {
|
||
|
EventBus.off('dark-mode-toggle-complete', this.redrawListener);
|
||
|
EventBus.off('theme-palette-change', this.redrawListener);
|
||
|
},
|
||
|
mounted() {
|
||
|
this.chartData = this.setChartData();
|
||
|
this.chartOptions = this.setChartOptions();
|
||
|
|
||
|
this.redrawListener = () => {
|
||
|
this.chartOptions = this.setChartOptions();
|
||
|
};
|
||
|
|
||
|
EventBus.on('theme-palette-change', this.redrawListener);
|
||
|
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
|
||
|
},
|
||
|
methods: {
|
||
|
setChartData() {
|
||
|
const documentStyle = getComputedStyle(document.documentElement);
|
||
|
|
||
|
return {
|
||
|
datasets: [
|
||
|
{
|
||
|
data: [11, 16, 7, 3, 14],
|
||
|
backgroundColor: [
|
||
|
documentStyle.getPropertyValue('--p-pink-500'),
|
||
|
documentStyle.getPropertyValue('--p-gray-500'),
|
||
|
documentStyle.getPropertyValue('--p-orange-500'),
|
||
|
documentStyle.getPropertyValue('--p-purple-500'),
|
||
|
documentStyle.getPropertyValue('--p-cyan-500')
|
||
|
],
|
||
|
label: 'My dataset'
|
||
|
}
|
||
|
],
|
||
|
labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
|
||
|
};
|
||
|
},
|
||
|
setChartOptions() {
|
||
|
const documentStyle = getComputedStyle(document.documentElement);
|
||
|
const textColor = documentStyle.getPropertyValue('--p-text-color');
|
||
|
const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');
|
||
|
|
||
|
return {
|
||
|
plugins: {
|
||
|
legend: {
|
||
|
labels: {
|
||
|
color: textColor
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
scales: {
|
||
|
r: {
|
||
|
grid: {
|
||
|
color: surfaceBorder
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
</script>
|