primevue-mirror/apps/showcase/doc/chart/PolarAreaDoc.vue

216 lines
6.7 KiB
Vue
Raw Normal View History

2023-02-28 08:29:30 +00:00
<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>
2024-05-20 12:14:38 +00:00
<div class="card flex justify-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
2023-02-28 08:29:30 +00:00
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
<script>
2023-10-17 13:12:53 +00:00
import EventBus from '@/layouts/AppEventBus';
2023-02-28 08:29:30 +00:00
export default {
2024-03-29 07:44:47 +00:00
redrawListener: null,
2023-02-28 08:29:30 +00:00
data() {
return {
chartData: null,
chartOptions: null,
code: {
2023-09-22 12:54:14 +00:00
basic: `
2024-05-20 12:14:38 +00:00
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
2023-10-15 09:38:39 +00:00
`,
2023-09-22 12:54:14 +00:00
options: `
<template>
2024-05-20 12:14:38 +00:00
<div class="card flex justify-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
2023-02-28 08:29:30 +00:00
</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')
2023-02-28 08:29:30 +00:00
],
label: 'My dataset'
}
],
2024-01-29 13:22:29 +00:00
labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
2023-02-28 08:29:30 +00:00
};
},
setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
2024-05-21 08:07:57 +00:00
const textColor = documentStyle.getPropertyValue('--p-text-color');
const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');
2023-02-28 08:29:30 +00:00
return {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
r: {
grid: {
color: surfaceBorder
}
}
}
};
}
}
};
2023-10-15 09:38:39 +00:00
<\/script>
`,
2023-09-22 12:54:14 +00:00
composition: `
<template>
2024-05-20 12:14:38 +00:00
<div class="card flex justify-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
2023-02-28 08:29:30 +00:00
</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')
2023-02-28 08:29:30 +00:00
],
label: 'My dataset'
}
],
2024-01-29 13:22:29 +00:00
labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
2023-02-28 08:29:30 +00:00
};
};
const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement);
2024-05-21 08:07:57 +00:00
const textColor = documentStyle.getPropertyValue('--p-text-color');
const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');
2023-02-28 08:29:30 +00:00
return {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
r: {
grid: {
color: surfaceBorder
}
}
}
};
}
2023-10-15 09:38:39 +00:00
<\/script>
`
2023-02-28 08:29:30 +00:00
}
};
},
beforeUnmount() {
2024-03-29 07:44:47 +00:00
EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
},
2023-02-28 08:29:30 +00:00
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
2023-10-17 13:12:53 +00:00
2024-03-29 07:44:47 +00:00
this.redrawListener = () => {
2023-10-17 13:12:53 +00:00
this.chartOptions = this.setChartOptions();
};
2024-03-29 07:44:47 +00:00
EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
2023-02-28 08:29:30 +00:00
},
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')
2023-02-28 08:29:30 +00:00
],
label: 'My dataset'
}
],
2024-01-29 13:22:29 +00:00
labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
2023-02-28 08:29:30 +00:00
};
},
setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
2024-05-21 08:07:57 +00:00
const textColor = documentStyle.getPropertyValue('--p-text-color');
const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');
2023-02-28 08:29:30 +00:00
return {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
r: {
grid: {
color: surfaceBorder
}
}
}
};
}
}
};
</script>