vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +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

276
doc/chart/LineStylesDoc.vue Normal file
View file

@ -0,0 +1,276 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Various styles of a line series can be customized to display customizations like an area chart.</p>
</DocSectionText>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
<script>
export default {
data() {
return {
chartData: null,
chartOptions: null,
code: {
basic: `
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
options: `
<template>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-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 {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--blue-500')
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderDash: [5, 5],
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--teal-500')
},
{
label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
borderColor: documentStyle.getPropertyValue('--orange-500'),
tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)'
}
]
};
},
setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
return {
maintainAspectRatio: false,
aspectRatio: 0.6,
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
},
y: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
}
}
};
}
}
};
<\/script>`,
composition: `
<template>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-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 {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--blue-500')
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderDash: [5, 5],
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--teal-500')
},
{
label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
borderColor: documentStyle.getPropertyValue('--orange-500'),
tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)'
}
]
};
};
const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
return {
maintainAspectRatio: false,
aspectRatio: 0.6,
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
},
y: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
}
}
};
}
<\/script>`
}
};
},
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
},
methods: {
setChartData() {
const documentStyle = getComputedStyle(document.documentElement);
return {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--blue-500')
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderDash: [5, 5],
tension: 0.4,
borderColor: documentStyle.getPropertyValue('--teal-500')
},
{
label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
borderColor: documentStyle.getPropertyValue('--orange-500'),
tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)'
}
]
};
},
setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
return {
maintainAspectRatio: false,
aspectRatio: 0.6,
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
},
y: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
}
}
};
}
}
};
</script>