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

Fix #5171: Improve Chart.js colors

pull/5134/head^2^2
Onur Senture 2024-01-29 16:22:29 +03:00
parent b2bc41fcda
commit 13e5910259
13 changed files with 124 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/chart/BasicDoc.vue
View File

@ -51,8 +51,8 @@ export default {
{ {
label: 'Sales', label: 'Sales',
data: [540, 325, 702, 620], 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)'], backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246, 0.2)'],
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'], borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
borderWidth: 1 borderWidth: 1
} }
] ]
@ -122,8 +122,8 @@ const setChartData = () => {
{ {
label: 'Sales', label: 'Sales',
data: [540, 325, 702, 620], 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)'], backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246 0.2)'],
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'], borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
borderWidth: 1 borderWidth: 1
} }
] ]
@ -190,8 +190,8 @@ const setChartOptions = () => {
{ {
label: 'Sales', label: 'Sales',
data: [540, 325, 702, 620], 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)'], backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246, 0.2)'],
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'], borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
borderWidth: 1 borderWidth: 1
} }
] ]

18
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('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--green-500'), backgroundColor: documentStyle.getPropertyValue('--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('--orange-500'), backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -139,7 +139,7 @@ const setChartData = () => {
{ {
type: 'line', type: 'line',
label: 'Dataset 1', label: 'Dataset 1',
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--green-500'), backgroundColor: documentStyle.getPropertyValue('--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('--orange-500'), backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -223,7 +223,7 @@ const setChartOptions = () => {
{ {
type: 'line', type: 'line',
label: 'Dataset 1', label: 'Dataset 1',
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--green-500'), backgroundColor: documentStyle.getPropertyValue('--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('--orange-500'), backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]

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('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
} }
] ]
}; };
@ -101,8 +101,8 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
} }
] ]
}; };
@ -147,8 +147,8 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
data: [300, 50, 100], data: [300, 50, 100],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
} }
] ]
}; };

24
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('--blue-500'), backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--pink-500'), backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -133,14 +133,14 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'), backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--pink-500'), backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -212,14 +212,14 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'), backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--pink-500'), backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]

12
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('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--pink-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4 tension: 0.4
} }
] ]
@ -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('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--pink-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4 tension: 0.4
} }
] ]
@ -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('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--pink-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4 tension: 0.4
} }
] ]

24
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('--blue-500') borderColor: documentStyle.getPropertyValue('--cyan-500')
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
@ -59,15 +59,15 @@ export default {
fill: false, fill: false,
borderDash: [5, 5], borderDash: [5, 5],
tension: 0.4, tension: 0.4,
borderColor: documentStyle.getPropertyValue('--teal-500') borderColor: documentStyle.getPropertyValue('--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('--orange-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4, tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)' backgroundColor: 'rgba(107, 114, 128, 0.2)'
} }
] ]
}; };
@ -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('--blue-500') borderColor: documentStyle.getPropertyValue('--cyan-500')
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
@ -149,15 +149,15 @@ const setChartData = () => {
fill: false, fill: false,
borderDash: [5, 5], borderDash: [5, 5],
tension: 0.4, tension: 0.4,
borderColor: documentStyle.getPropertyValue('--teal-500') borderColor: documentStyle.getPropertyValue('--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('--orange-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4, tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)' backgroundColor: 'rgba(107, 114, 128, 0.2)'
} }
] ]
}; };
@ -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('--blue-500') borderColor: documentStyle.getPropertyValue('--cyan-500')
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
@ -233,15 +233,15 @@ const setChartOptions = () => {
fill: false, fill: false,
borderDash: [5, 5], borderDash: [5, 5],
tension: 0.4, tension: 0.4,
borderColor: documentStyle.getPropertyValue('--teal-500') borderColor: documentStyle.getPropertyValue('--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('--orange-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
tension: 0.4, tension: 0.4,
backgroundColor: 'rgba(255,167,38,0.2)' backgroundColor: 'rgba(107, 114, 128, 0.2)'
} }
] ]
}; };

12
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('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--green-500'), borderColor: documentStyle.getPropertyValue('--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]
@ -148,7 +148,7 @@ const setChartData = () => {
{ {
label: 'Dataset 1', label: 'Dataset 1',
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--green-500'), borderColor: documentStyle.getPropertyValue('--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]
@ -241,7 +241,7 @@ const setChartOptions = () => {
{ {
label: 'Dataset 1', label: 'Dataset 1',
fill: false, fill: false,
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--green-500'), borderColor: documentStyle.getPropertyValue('--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]

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('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
} }
] ]
}; };
@ -99,8 +99,8 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
} }
] ]
}; };
@ -145,8 +145,8 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
} }
] ]
}; };

36
doc/chart/PolarAreaDoc.vue
View File

@ -48,16 +48,16 @@ export default {
{ {
data: [11, 16, 7, 3, 14], data: [11, 16, 7, 3, 14],
backgroundColor: [ backgroundColor: [
documentStyle.getPropertyValue('--red-500'), documentStyle.getPropertyValue('--pink-500'),
documentStyle.getPropertyValue('--green-500'), documentStyle.getPropertyValue('--gray-500'),
documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--orange-500'),
documentStyle.getPropertyValue('--bluegray-500'), documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--blue-500') documentStyle.getPropertyValue('--cyan-500')
], ],
label: 'My dataset' label: 'My dataset'
} }
], ],
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'] labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
}; };
}, },
setChartOptions() { setChartOptions() {
@ -112,16 +112,16 @@ const setChartData = () => {
{ {
data: [11, 16, 7, 3, 14], data: [11, 16, 7, 3, 14],
backgroundColor: [ backgroundColor: [
documentStyle.getPropertyValue('--red-500'), documentStyle.getPropertyValue('--pink-500'),
documentStyle.getPropertyValue('--green-500'), documentStyle.getPropertyValue('--gray-500'),
documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--orange-500'),
documentStyle.getPropertyValue('--bluegray-500'), documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--blue-500') documentStyle.getPropertyValue('--cyan-500')
], ],
label: 'My dataset' label: 'My dataset'
} }
], ],
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'] labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
}; };
}; };
const setChartOptions = () => { const setChartOptions = () => {
@ -170,16 +170,16 @@ const setChartOptions = () => {
{ {
data: [11, 16, 7, 3, 14], data: [11, 16, 7, 3, 14],
backgroundColor: [ backgroundColor: [
documentStyle.getPropertyValue('--red-500'), documentStyle.getPropertyValue('--pink-500'),
documentStyle.getPropertyValue('--green-500'), documentStyle.getPropertyValue('--gray-500'),
documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--orange-500'),
documentStyle.getPropertyValue('--bluegray-500'), documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--blue-500') documentStyle.getPropertyValue('--cyan-500')
], ],
label: 'My dataset' label: 'My dataset'
} }
], ],
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'] labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan']
}; };
}, },
setChartOptions() { setChartOptions() {

32
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('--bluegray-400'), borderColor: documentStyle.getPropertyValue('--gray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'), pointBackgroundColor: documentStyle.getPropertyValue('--gray-400'),
pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'), pointBorderColor: documentStyle.getPropertyValue('--gray-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--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('--pink-400'), borderColor: documentStyle.getPropertyValue('--cyan-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'), pointBackgroundColor: documentStyle.getPropertyValue('--cyan-400'),
pointBorderColor: documentStyle.getPropertyValue('--pink-400'), pointBorderColor: documentStyle.getPropertyValue('--cyan-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--cyan-400'),
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]
@ -187,20 +187,20 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--bluegray-400'), borderColor: documentStyle.getPropertyValue('--gray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'), pointBackgroundColor: documentStyle.getPropertyValue('--gray-400'),
pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'), pointBorderColor: documentStyle.getPropertyValue('--gray-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--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('--pink-400'), borderColor: documentStyle.getPropertyValue('--cyan-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'), pointBackgroundColor: documentStyle.getPropertyValue('--cyan-400'),
pointBorderColor: documentStyle.getPropertyValue('--pink-400'), pointBorderColor: documentStyle.getPropertyValue('--cyan-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--cyan-400'),
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]

18
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('--blue-500'), backgroundColor: documentStyle.getPropertyValue('--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('--green-500'), backgroundColor: documentStyle.getPropertyValue('--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('--yellow-500'), backgroundColor: documentStyle.getPropertyValue('--orange-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -140,19 +140,19 @@ const setChartData = () => {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 1', label: 'Dataset 1',
backgroundColor: documentStyle.getPropertyValue('--blue-500'), backgroundColor: documentStyle.getPropertyValue('--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('--green-500'), backgroundColor: documentStyle.getPropertyValue('--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('--yellow-500'), backgroundColor: documentStyle.getPropertyValue('--orange-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]
@ -225,19 +225,19 @@ const setChartOptions = () => {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 1', label: 'Dataset 1',
backgroundColor: documentStyle.getPropertyValue('--blue-500'), backgroundColor: documentStyle.getPropertyValue('--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('--green-500'), backgroundColor: documentStyle.getPropertyValue('--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('--yellow-500'), backgroundColor: documentStyle.getPropertyValue('--orange-500'),
data: [41, 52, 24, 74, 23, 21, 32] data: [41, 52, 24, 74, 23, 21, 32]
} }
] ]

24
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('--blue-500'), backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--pink-500'), backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -132,14 +132,14 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'), backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--pink-500'), backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -210,14 +210,14 @@ const setChartOptions = () => {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--blue-500'), backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
borderColor: documentStyle.getPropertyValue('--blue-500'), borderColor: documentStyle.getPropertyValue('--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('--pink-500'), backgroundColor: documentStyle.getPropertyValue('--gray-500'),
borderColor: documentStyle.getPropertyValue('--pink-500'), borderColor: documentStyle.getPropertyValue('--gray-500'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]

12
doc/chart/pt/PTDoc.vue
View File

@ -82,8 +82,8 @@ export default {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
} }
] ]
}; };
@ -132,8 +132,8 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
} }
] ]
}; };
@ -155,8 +155,8 @@ const setChartData = () => {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')], backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')] hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
} }
] ]
}; };