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

Update charts

pull/5880/head
Cagatay Civici 2024-06-12 01:01:35 +03:00
parent 65e817324f
commit 69bba31b0c
2 changed files with 25 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
apps/showcase/components/landing/samples/CustomersApp.vue
View File

@ -100,7 +100,7 @@
closeIcon="pi pi-sign-out" closeIcon="pi pi-sign-out"
:pt="{ :pt="{
root: { root: {
class: '!max-w-2xl !w-full !h-[100vh] rounded-l-2xl' class: '!max-w-2xl !w-full !h-screen rounded-l-2xl'
}, },
footer: { footer: {
class: 'hidden' class: 'hidden'
@ -111,7 +111,7 @@
}" }"
> >
<template #container=""> <template #container="">
<div class="flex flex-col h-[100vh] overflow-auto"> <div class="flex flex-col h-screen overflow-auto">
<div class=""> <div class="">
<div class="flex align-items-center gap-3 p-6"> <div class="flex align-items-center gap-3 p-6">
<Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="large" class="rounded-xl overflow-hidden" /> <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="large" class="rounded-xl overflow-hidden" />
@ -581,7 +581,8 @@ export default {
}, },
setChartData() { setChartData() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const darkMode = document.documentElement.classList.contains('p-dark'); const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
const hoverBackgroundColor = documentStyle.getPropertyValue('--p-primary-color');
return { return {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
@ -589,7 +590,7 @@ export default {
{ {
type: 'bar', type: 'bar',
label: 'Investment Wallet', label: 'Investment Wallet',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue(darkMode ? '--p-surface-700' : '--p-surface-200') + ' 100%, transparent)', backgroundColor: 'color-mix(in srgb, ' + borderColor + ' 100%, transparent)',
data: [100, 201, 404, 300, 140, 220, 314, 520, 145, 234, 325, 147], data: [100, 201, 404, 300, 140, 220, 314, 520, 145, 234, 325, 147],
borderRadius: { borderRadius: {
topLeft: 4, topLeft: 4,
@ -597,20 +598,18 @@ export default {
}, },
borderSkipped: true, borderSkipped: true,
barThickness: 20, barThickness: 20,
hoverBackgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue(darkMode ? '--p-surface-0' : '--p-surface-800') + ' 100%, transparent)', hoverBackgroundColor: 'color-mix(in srgb, ' + hoverBackgroundColor + ' 100%, transparent)',
hoverTransition: '1s ease all' hoverTransition: '1s ease all'
} }
] ]
}; };
}, },
setChartOptions() { setChartOptions() {
const darkMode = document.documentElement.classList.contains('p-dark');
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
const backgroundColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-900' : '--p-surface-0');
const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColor = documentStyle.getPropertyValue('--p-text-color');
const borderColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-800' : '--p-surface-100'); const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
const textMutedColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-500' : '--p-surface-400'); const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
const getOrCreateTooltip = (chart) => { const getOrCreateTooltip = (chart) => {
let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip'); let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
@ -703,10 +702,7 @@ export default {
x: { x: {
stacked: true, stacked: true,
ticks: { ticks: {
color: textMutedColor, color: textMutedColor
font: {
weight: 'lighter'
}
}, },
grid: { grid: {
color: 'transparent', color: 'transparent',
@ -719,10 +715,7 @@ export default {
}, },
stacked: true, stacked: true,
ticks: { ticks: {
color: textMutedColor, color: textMutedColor
font: {
weight: 'lighter'
}
}, },
grid: { grid: {
color: borderColor, color: borderColor,
@ -733,7 +726,7 @@ export default {
}; };
}, },
setLineChartData() { setLineChartData() {
const darkMode = document.documentElement.classList.contains('p-dark'); const darkMode = this.$appState.darkTheme;
return { return {
labels: ['31', '1', '2', '3', '4', '5', '6', '7', '8'], labels: ['31', '1', '2', '3', '4', '5', '6', '7', '8'],
@ -806,13 +799,13 @@ export default {
}; };
}, },
setLineChartOptions() { setLineChartOptions() {
const darkMode = document.documentElement.classList.contains('p-dark'); const darkMode = this.$appState.darkTheme;
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const backgroundColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-900' : '--p-surface-0'); const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColor = documentStyle.getPropertyValue('--p-text-color');
const borderColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-800' : '--p-surface-100'); const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
const textMutedColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-500' : '--p-surface-400'); const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
const getOrCreateTooltip = (chart) => { const getOrCreateTooltip = (chart) => {
let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip'); let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
@ -905,10 +898,7 @@ export default {
x: { x: {
stacked: true, stacked: true,
ticks: { ticks: {
color: textMutedColor, color: textMutedColor
font: {
weight: 'lighter'
}
}, },
grid: { grid: {
color: 'transparent', color: 'transparent',

30
apps/showcase/components/landing/samples/OverviewApp.vue
View File

@ -39,9 +39,7 @@
<div class="flex-1 text-color font-semibold leading-6">Crypto Analytics</div> <div class="flex-1 text-color font-semibold leading-6">Crypto Analytics</div>
<div class="flex items-center gap-5"> <div class="flex items-center gap-5">
<div v-for="(item, index) in chartData?.datasets" :key="index" class="flex items-center gap-2"> <div v-for="(item, index) in chartData?.datasets" :key="index" class="flex items-center gap-2">
<div class="p-1 rounded-full border border-surface flex items-center justify-center"> <div class="w-3 h-3 rounded-full" :style="{ backgroundColor: item.backgroundColor }"></div>
<div class="w-2 h-2 rounded-full" :style="{ backgroundColor: item.backgroundColor }"></div>
</div>
<span class="font-medium text-color leading-6">{{ item.label }}</span> <span class="font-medium text-color leading-6">{{ item.label }}</span>
</div> </div>
</div> </div>
@ -151,7 +149,6 @@ export default {
chartOptions: {}, chartOptions: {},
chartPlugins: [], chartPlugins: [],
dates: [], dates: [],
selectedTime: 'Monthly', selectedTime: 'Monthly',
timeOptions: ['Monthly', 'Weekly', 'Yearly'], timeOptions: ['Monthly', 'Weekly', 'Yearly'],
menuItems: [ menuItems: [
@ -196,7 +193,6 @@ export default {
this.chartPlugings = this.setChartPlugins(); this.chartPlugings = this.setChartPlugins();
this.redrawListener = () => { this.redrawListener = () => {
console.log('sss');
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
@ -244,13 +240,11 @@ export default {
}; };
}, },
setChartOptions() { setChartOptions() {
const darkMode = document.documentElement.classList.contains('p-dark');
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
const backgroundColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-900' : '--p-surface-0');
const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColor = documentStyle.getPropertyValue('--p-text-color');
const borderColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-800' : '--p-surface-100'); const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
const textMutedColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-500' : '--p-surface-400'); const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
const getOrCreateTooltip = (chart) => { const getOrCreateTooltip = (chart) => {
let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip'); let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
@ -391,10 +385,7 @@ export default {
x: { x: {
stacked: true, stacked: true,
ticks: { ticks: {
color: textMutedColor, color: textMutedColor
font: {
weight: 'lighter'
}
}, },
grid: { grid: {
color: 'transparent', color: 'transparent',
@ -402,19 +393,14 @@ export default {
} }
}, },
y: { y: {
border: {
display: false
},
stacked: true, stacked: true,
ticks: { ticks: {
color: textMutedColor, color: textMutedColor
font: {
weight: 'lighter'
}
}, },
grid: { grid: {
color: borderColor, color: borderColor,
borderColor: 'transparent' borderColor: 'transparent',
drawTicks: false
} }
} }
} }