vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Use variables based on color scheme

pull/4572/head
Cagatay Civici 2023-10-13 22:52:02 +03:00
parent 36304da196
commit 85ec13142b
1 changed files with 157 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
doc/chart/BasicDoc.vue
View File

@ -15,25 +15,8 @@
export default {
data() {
return {
chartData: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
label: 'Sales',
data: [540, 325, 702, 620],
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
borderWidth: 1
}
]
},
chartOptions: {
scales: {
y: {
beginAtZero: true
}
}
},
chartData: null,
chartOptions: null,
code: {
basic: `
<Chart type="bar" :data="chartData" :options="chartOptions" />`,
@ -48,7 +31,17 @@ export default {
export default {
data() {
return {
chartData: {
chartData: null,
chartOptions: null
};
},
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
},
methods: {
setChartData() {
return {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
@ -59,16 +52,44 @@ export default {
borderWidth: 1
}
]
};
},
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 {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
chartOptions: {
scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
},
y: {
beginAtZero: true
beginAtZero: true,
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
}
}
};
}
}
};
<\/script>`,
composition: `
@ -79,9 +100,18 @@ export default {
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
const chartData = ref({
onMounted(() => {
chartData.value = setChartData();
chartOptions.value = setChartOptions();
});
const chartData = ref();
const chartOptions = ref();
const setChartData = () => {
return {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
@ -92,17 +122,101 @@ const chartData = ref({
borderWidth: 1
}
]
});
const chartOptions = ref({
};
};
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 {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
},
y: {
beginAtZero: true
beginAtZero: true,
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
}
});
}
};
}
<\/script>`
}
};
},
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
},
methods: {
setChartData() {
return {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
label: 'Sales',
data: [540, 325, 702, 620],
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
borderWidth: 1
}
]
};
},
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 {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
},
y: {
beginAtZero: true,
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
}
}
};
}
}
};
</script>