vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merged new Docs and Demos

Browse source
This commit is contained in:
Cagatay Civici 2023-02-28 11:29:30 +03:00
parent 296cc217fb
commit dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
Download patch file Download diff file Expand all files Collapse all files

135
doc/chart/PieChartDoc.vue Normal file
View file

@ -0,0 +1,135 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
<script>
export default {
data() {
return {
chartData: null,
chartOptions: {
plugins: {
legend: {
labels: {
usePointStyle: true
}
}
}
},
code: {
basic: `
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
</div>
</template>
<script>
export default {
data() {
return {
chartData: null,
chartOptions: {
plugins: {
legend: {
labels: {
usePointStyle: true
}
}
}
}
};
},
mounted() {
this.chartData = this.setChartData();
},
methods: {
setChartData() {
const documentStyle = getComputedStyle(document.body);
return {
labels: ['A', 'B', 'C'],
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
}
]
};
}
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
onMounted(() => {
chartData.value = setChartData();
});
const chartData = ref();
const chartOptions = ref({
plugins: {
legend: {
labels: {
usePointStyle: true
}
}
}
});
const setChartData = () => {
const documentStyle = getComputedStyle(document.body);
return {
labels: ['A', 'B', 'C'],
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
}
]
};
};
<\/script>`
}
};
},
mounted() {
this.chartData = this.setChartData();
},
methods: {
setChartData() {
const documentStyle = getComputedStyle(document.body);
return {
labels: ['A', 'B', 'C'],
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
}
]
};
}
}
};
</script>