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

Update chart samples to use new variables

pull/5507/head
Cagatay Civici 2024-03-27 00:24:49 +03:00
parent c06dd3f14c
commit dfcc243fe1
13 changed files with 169 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/chart/BasicDoc.vue
View File

@ -61,8 +61,8 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
plugins: { plugins: {
@ -132,8 +132,8 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
plugins: { plugins: {
@ -200,8 +200,8 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
plugins: { plugins: {

30
doc/chart/ComboDoc.vue
View File

@ -49,7 +49,7 @@ export default {
{ {
type: 'line', type: 'line',
label: 'Dataset 1', label: 'Dataset 1',
borderColor: documentStyle.getPropertyValue('--orange-500'), borderColor: documentStyle.getPropertyValue('--p-orange-500'),
borderWidth: 2, borderWidth: 2,
fill: false, fill: false,
tension: 0.4, tension: 0.4,
@ -58,7 +58,7 @@ export default {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [21, 84, 24, 75, 37, 65, 34], data: [21, 84, 24, 75, 37, 65, 34],
borderColor: 'white', borderColor: 'white',
borderWidth: 2 borderWidth: 2
@ -66,7 +66,7 @@ export default {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -75,8 +75,8 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -139,7 +139,7 @@ const setChartData = () => {
{ {
type: 'line', type: 'line',
label: 'Dataset 1', label: 'Dataset 1',
borderColor: documentStyle.getPropertyValue('--orange-500'), borderColor: documentStyle.getPropertyValue('--p-orange-500'),
borderWidth: 2, borderWidth: 2,
fill: false, fill: false,
tension: 0.4, tension: 0.4,
@ -148,7 +148,7 @@ const setChartData = () => {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [21, 84, 24, 75, 37, 65, 34], data: [21, 84, 24, 75, 37, 65, 34],
borderColor: 'white', borderColor: 'white',
borderWidth: 2 borderWidth: 2
@ -156,7 +156,7 @@ const setChartData = () => {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -165,8 +165,8 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -223,7 +223,7 @@ const setChartOptions = () => {
{ {
type: 'line', type: 'line',
label: 'Dataset 1', label: 'Dataset 1',
borderColor: documentStyle.getPropertyValue('--orange-500'), borderColor: documentStyle.getPropertyValue('--p-orange-500'),
borderWidth: 2, borderWidth: 2,
fill: false, fill: false,
tension: 0.4, tension: 0.4,
@ -232,7 +232,7 @@ const setChartOptions = () => {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [21, 84, 24, 75, 37, 65, 34], data: [21, 84, 24, 75, 37, 65, 34],
borderColor: 'white', borderColor: 'white',
borderWidth: 2 borderWidth: 2
@ -240,7 +240,7 @@ const setChartOptions = () => {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -249,8 +249,8 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,

12
doc/chart/DoughnutDoc.vue
View File

@ -50,8 +50,8 @@ export default {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')]
} }
] ]
}; };
@ -101,8 +101,8 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')]
} }
] ]
}; };
@ -147,8 +147,8 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
data: [300, 50, 100], data: [300, 50, 100],
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')]
} }
] ]
}; };

36
doc/chart/HorizontalBarDoc.vue
View File

@ -48,14 +48,14 @@ export default {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -64,8 +64,8 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
indexAxis: 'y', indexAxis: 'y',
@ -133,14 +133,14 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -149,8 +149,8 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
indexAxis: 'y', indexAxis: 'y',
@ -212,14 +212,14 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -228,8 +228,8 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
indexAxis: 'y', indexAxis: 'y',

24
doc/chart/LineDoc.vue
View File

@ -50,14 +50,14 @@ export default {
label: 'First Dataset', label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
tension: 0.4 tension: 0.4
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90], data: [28, 48, 40, 19, 86, 27, 90],
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
tension: 0.4 tension: 0.4
} }
] ]
@ -66,8 +66,8 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -131,14 +131,14 @@ const setChartData = () => {
label: 'First Dataset', label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
tension: 0.4 tension: 0.4
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90], data: [28, 48, 40, 19, 86, 27, 90],
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
tension: 0.4 tension: 0.4
} }
] ]
@ -147,8 +147,8 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -206,14 +206,14 @@ const setChartOptions = () => {
label: 'First Dataset', label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
tension: 0.4 tension: 0.4
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90], data: [28, 48, 40, 19, 86, 27, 90],
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
tension: 0.4 tension: 0.4
} }
] ]
@ -222,8 +222,8 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,

30
doc/chart/LineStylesDoc.vue
View File

@ -51,7 +51,7 @@ export default {
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
tension: 0.4, tension: 0.4,
borderColor: documentStyle.getPropertyValue('--cyan-500') borderColor: documentStyle.getPropertyValue('--p-cyan-500')
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
@ -59,13 +59,13 @@ export default {
fill: false, fill: false,
borderDash: [5, 5], borderDash: [5, 5],
tension: 0.4, tension: 0.4,
borderColor: documentStyle.getPropertyValue('--orange-500') borderColor: documentStyle.getPropertyValue('--p-orange-500')
}, },
{ {
label: 'Third Dataset', label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45], data: [12, 51, 62, 33, 21, 62, 45],
fill: true, fill: true,
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
tension: 0.4, tension: 0.4,
backgroundColor: 'rgba(107, 114, 128, 0.2)' backgroundColor: 'rgba(107, 114, 128, 0.2)'
} }
@ -75,8 +75,8 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -141,7 +141,7 @@ const setChartData = () => {
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
tension: 0.4, tension: 0.4,
borderColor: documentStyle.getPropertyValue('--cyan-500') borderColor: documentStyle.getPropertyValue('--p-cyan-500')
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
@ -149,13 +149,13 @@ const setChartData = () => {
fill: false, fill: false,
borderDash: [5, 5], borderDash: [5, 5],
tension: 0.4, tension: 0.4,
borderColor: documentStyle.getPropertyValue('--orange-500') borderColor: documentStyle.getPropertyValue('--p-orange-500')
}, },
{ {
label: 'Third Dataset', label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45], data: [12, 51, 62, 33, 21, 62, 45],
fill: true, fill: true,
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
tension: 0.4, tension: 0.4,
backgroundColor: 'rgba(107, 114, 128, 0.2)' backgroundColor: 'rgba(107, 114, 128, 0.2)'
} }
@ -165,8 +165,8 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -225,7 +225,7 @@ const setChartOptions = () => {
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
tension: 0.4, tension: 0.4,
borderColor: documentStyle.getPropertyValue('--cyan-500') borderColor: documentStyle.getPropertyValue('--p-cyan-500')
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
@ -233,13 +233,13 @@ const setChartOptions = () => {
fill: false, fill: false,
borderDash: [5, 5], borderDash: [5, 5],
tension: 0.4, tension: 0.4,
borderColor: documentStyle.getPropertyValue('--orange-500') borderColor: documentStyle.getPropertyValue('--p-orange-500')
}, },
{ {
label: 'Third Dataset', label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45], data: [12, 51, 62, 33, 21, 62, 45],
fill: true, fill: true,
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
tension: 0.4, tension: 0.4,
backgroundColor: 'rgba(107, 114, 128, 0.2)' backgroundColor: 'rgba(107, 114, 128, 0.2)'
} }
@ -249,8 +249,8 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,

24
doc/chart/MultiAxisDoc.vue
View File

@ -49,7 +49,7 @@ export default {
{ {
label: 'Dataset 1', label: 'Dataset 1',
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
yAxisID: 'y', yAxisID: 'y',
tension: 0.4, tension: 0.4,
data: [65, 59, 80, 81, 56, 55, 10] data: [65, 59, 80, 81, 56, 55, 10]
@ -57,7 +57,7 @@ export default {
{ {
label: 'Dataset 2', label: 'Dataset 2',
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
yAxisID: 'y1', yAxisID: 'y1',
tension: 0.4, tension: 0.4,
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
@ -68,8 +68,8 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
stacked: false, stacked: false,
@ -148,7 +148,7 @@ const setChartData = () => {
{ {
label: 'Dataset 1', label: 'Dataset 1',
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
yAxisID: 'y', yAxisID: 'y',
tension: 0.4, tension: 0.4,
data: [65, 59, 80, 81, 56, 55, 10] data: [65, 59, 80, 81, 56, 55, 10]
@ -156,7 +156,7 @@ const setChartData = () => {
{ {
label: 'Dataset 2', label: 'Dataset 2',
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
yAxisID: 'y1', yAxisID: 'y1',
tension: 0.4, tension: 0.4,
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
@ -167,8 +167,8 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
stacked: false, stacked: false,
@ -241,7 +241,7 @@ const setChartOptions = () => {
{ {
label: 'Dataset 1', label: 'Dataset 1',
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
yAxisID: 'y', yAxisID: 'y',
tension: 0.4, tension: 0.4,
data: [65, 59, 80, 81, 56, 55, 10] data: [65, 59, 80, 81, 56, 55, 10]
@ -249,7 +249,7 @@ const setChartOptions = () => {
{ {
label: 'Dataset 2', label: 'Dataset 2',
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
yAxisID: 'y1', yAxisID: 'y1',
tension: 0.4, tension: 0.4,
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
@ -260,8 +260,8 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
stacked: false, stacked: false,

12
doc/chart/PieChartDoc.vue
View File

@ -48,8 +48,8 @@ export default {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')]
} }
] ]
}; };
@ -99,8 +99,8 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')]
} }
] ]
}; };
@ -145,8 +145,8 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')]
} }
] ]
}; };

36
doc/chart/PolarAreaDoc.vue
View File

@ -48,11 +48,11 @@ export default {
{ {
data: [11, 16, 7, 3, 14], data: [11, 16, 7, 3, 14],
backgroundColor: [ backgroundColor: [
documentStyle.getPropertyValue('--pink-500'), documentStyle.getPropertyValue('--p-pink-500'),
documentStyle.getPropertyValue('--gray-500'), documentStyle.getPropertyValue('--p-gray-500'),
documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--p-orange-500'),
documentStyle.getPropertyValue('--purple-500'), documentStyle.getPropertyValue('--p-purple-500'),
documentStyle.getPropertyValue('--cyan-500') documentStyle.getPropertyValue('--p-cyan-500')
], ],
label: 'My dataset' label: 'My dataset'
} }
@ -63,7 +63,7 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
plugins: { plugins: {
@ -112,11 +112,11 @@ const setChartData = () => {
{ {
data: [11, 16, 7, 3, 14], data: [11, 16, 7, 3, 14],
backgroundColor: [ backgroundColor: [
documentStyle.getPropertyValue('--pink-500'), documentStyle.getPropertyValue('--p-pink-500'),
documentStyle.getPropertyValue('--gray-500'), documentStyle.getPropertyValue('--p-gray-500'),
documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--p-orange-500'),
documentStyle.getPropertyValue('--purple-500'), documentStyle.getPropertyValue('--p-purple-500'),
documentStyle.getPropertyValue('--cyan-500') documentStyle.getPropertyValue('--p-cyan-500')
], ],
label: 'My dataset' label: 'My dataset'
} }
@ -127,7 +127,7 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
plugins: { plugins: {
@ -170,11 +170,11 @@ const setChartOptions = () => {
{ {
data: [11, 16, 7, 3, 14], data: [11, 16, 7, 3, 14],
backgroundColor: [ backgroundColor: [
documentStyle.getPropertyValue('--pink-500'), documentStyle.getPropertyValue('--p-pink-500'),
documentStyle.getPropertyValue('--gray-500'), documentStyle.getPropertyValue('--p-gray-500'),
documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--p-orange-500'),
documentStyle.getPropertyValue('--purple-500'), documentStyle.getPropertyValue('--p-purple-500'),
documentStyle.getPropertyValue('--cyan-500') documentStyle.getPropertyValue('--p-cyan-500')
], ],
label: 'My dataset' label: 'My dataset'
} }
@ -185,7 +185,7 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
plugins: { plugins: {

54
doc/chart/RadarDoc.vue
View File

@ -49,20 +49,20 @@ export default {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--gray-400'), borderColor: documentStyle.getPropertyValue('--p-gray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--gray-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-gray-400'),
pointBorderColor: documentStyle.getPropertyValue('--gray-400'), pointBorderColor: documentStyle.getPropertyValue('--p-gray-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--gray-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--p-gray-400'),
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--cyan-400'), borderColor: documentStyle.getPropertyValue('--p-cyan-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--cyan-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-cyan-400'),
pointBorderColor: documentStyle.getPropertyValue('--cyan-400'), pointBorderColor: documentStyle.getPropertyValue('--p-cyan-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--cyan-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--p-cyan-400'),
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]
@ -71,7 +71,7 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
return { return {
plugins: { plugins: {
@ -121,20 +121,20 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--bluegray-400'), borderColor: documentStyle.getPropertyValue('--p-bluegray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-bluegray-400'),
pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'), pointBorderColor: documentStyle.getPropertyValue('--p-bluegray-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--p-bluegray-400'),
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--pink-400'), borderColor: documentStyle.getPropertyValue('--p-pink-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-pink-400'),
pointBorderColor: documentStyle.getPropertyValue('--pink-400'), pointBorderColor: documentStyle.getPropertyValue('--p-pink-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--p-pink-400'),
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]
@ -143,7 +143,7 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
return { return {
plugins: { plugins: {
@ -187,20 +187,20 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--gray-400'), borderColor: documentStyle.getPropertyValue('--p-gray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--gray-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-gray-400'),
pointBorderColor: documentStyle.getPropertyValue('--gray-400'), pointBorderColor: documentStyle.getPropertyValue('--p-gray-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--gray-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--p-gray-400'),
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--cyan-400'), borderColor: documentStyle.getPropertyValue('--p-cyan-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--cyan-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-cyan-400'),
pointBorderColor: documentStyle.getPropertyValue('--cyan-400'), pointBorderColor: documentStyle.getPropertyValue('--p-cyan-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--cyan-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--p-cyan-400'),
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]
@ -209,7 +209,7 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
return { return {
plugins: { plugins: {

30
doc/chart/StackedBarDoc.vue
View File

@ -49,19 +49,19 @@ export default {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 1', label: 'Dataset 1',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [50, 25, 12, 48, 90, 76, 42] data: [50, 25, 12, 48, 90, 76, 42]
}, },
{ {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [21, 84, 24, 75, 37, 65, 34] data: [21, 84, 24, 75, 37, 65, 34]
}, },
{ {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--orange-500'), backgroundColor: documentStyle.getPropertyValue('--p-orange-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -70,8 +70,8 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -140,19 +140,19 @@ const setChartData = () => {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 1', label: 'Dataset 1',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [50, 25, 12, 48, 90, 76, 42] data: [50, 25, 12, 48, 90, 76, 42]
}, },
{ {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [21, 84, 24, 75, 37, 65, 34] data: [21, 84, 24, 75, 37, 65, 34]
}, },
{ {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--orange-500'), backgroundColor: documentStyle.getPropertyValue('--p-orange-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -161,8 +161,8 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -225,19 +225,19 @@ const setChartOptions = () => {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 1', label: 'Dataset 1',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [50, 25, 12, 48, 90, 76, 42] data: [50, 25, 12, 48, 90, 76, 42]
}, },
{ {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [21, 84, 24, 75, 37, 65, 34] data: [21, 84, 24, 75, 37, 65, 34]
}, },
{ {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: documentStyle.getPropertyValue('--orange-500'), backgroundColor: documentStyle.getPropertyValue('--p-orange-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -246,8 +246,8 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,

36
doc/chart/VerticalBarDoc.vue
View File

@ -48,14 +48,14 @@ export default {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -64,8 +64,8 @@ export default {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -132,14 +132,14 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -148,8 +148,8 @@ const setChartData = () => {
const setChartOptions = () => { const setChartOptions = () => {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
@ -210,14 +210,14 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--cyan-500'), backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
borderColor: documentStyle.getPropertyValue('--cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--gray-500'), backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),
borderColor: documentStyle.getPropertyValue('--gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -226,8 +226,8 @@ const setChartOptions = () => {
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "primevue", "name": "primevue",
"version": "3.51.0-SNAPSHOT", "version": "4.0.0-beta.1",
"homepage": "https://primevue.org/", "homepage": "https://primevue.org/",
"repository": { "repository": {
"type": "git", "type": "git",