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

200
doc/chart/BasicDoc.vue
View File

@ -15,25 +15,8 @@
export default { export default {
data() { data() {
return { return {
chartData: { chartData: null,
labels: ['Q1', 'Q2', 'Q3', 'Q4'], chartOptions: null,
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
}
}
},
code: { code: {
basic: ` basic: `
<Chart type="bar" :data="chartData" :options="chartOptions" />`, <Chart type="bar" :data="chartData" :options="chartOptions" />`,
@ -48,7 +31,17 @@ export default {
export default { export default {
data() { data() {
return { return {
chartData: { chartData: null,
chartOptions: null
};
},
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
},
methods: {
setChartData() {
return {
labels: ['Q1', 'Q2', 'Q3', 'Q4'], labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [ datasets: [
{ {
@ -59,15 +52,43 @@ export default {
borderWidth: 1 borderWidth: 1
} }
] ]
}, };
chartOptions: { },
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: { scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
},
y: { y: {
beginAtZero: true beginAtZero: true,
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
} }
} }
} };
}; }
} }
}; };
<\/script>`, <\/script>`,
@ -79,30 +100,123 @@ export default {
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
const chartData = ref({ onMounted(() => {
labels: ['Q1', 'Q2', 'Q3', 'Q4'], chartData.value = setChartData();
datasets: [ chartOptions.value = setChartOptions();
{
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
}
]
}); });
const chartOptions = ref({
scales: { const chartData = ref();
y: { const chartOptions = ref();
beginAtZero: true
const 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
}
]
};
};
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,
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder
}
}
} }
} };
}); }
<\/script>` <\/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> </script>