379 lines
7.1 KiB
JavaScript
379 lines
7.1 KiB
JavaScript
export const basicOptions = {
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: false
|
|
},
|
|
responsive: true
|
|
};
|
|
export let blueChartOptions = {
|
|
...basicOptions,
|
|
tooltips: {
|
|
backgroundColor: '#f5f5f5',
|
|
titleFontColor: '#333',
|
|
bodyFontColor: '#666',
|
|
bodySpacing: 4,
|
|
xPadding: 12,
|
|
mode: 'nearest',
|
|
intersect: 0,
|
|
position: 'nearest'
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(29,140,248,0.0)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 60,
|
|
suggestedMax: 125,
|
|
padding: 20,
|
|
fontColor: '#2380f7'
|
|
}
|
|
}
|
|
],
|
|
|
|
xAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(29,140,248,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
padding: 20,
|
|
fontColor: '#2380f7'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
};
|
|
|
|
export let lineChartOptionsBlue = {
|
|
...basicOptions,
|
|
tooltips: {
|
|
backgroundColor: '#f5f5f5',
|
|
titleFontColor: '#333',
|
|
bodyFontColor: '#666',
|
|
bodySpacing: 4,
|
|
xPadding: 12,
|
|
mode: 'nearest',
|
|
intersect: 0,
|
|
position: 'nearest'
|
|
},
|
|
responsive: true,
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(29,140,248,0.0)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 60,
|
|
suggestedMax: 125,
|
|
padding: 20,
|
|
fontColor: '#9e9e9e'
|
|
}
|
|
}
|
|
],
|
|
|
|
xAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(29,140,248,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
padding: 20,
|
|
fontColor: '#9e9e9e'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
};
|
|
|
|
export let barChartOptionsGradient = {
|
|
...basicOptions,
|
|
tooltips: {
|
|
backgroundColor: '#f5f5f5',
|
|
titleFontColor: '#333',
|
|
bodyFontColor: '#666',
|
|
bodySpacing: 4,
|
|
xPadding: 12,
|
|
mode: 'nearest',
|
|
intersect: 0,
|
|
position: 'nearest'
|
|
},
|
|
responsive: true,
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(253,93,147,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 60,
|
|
suggestedMax: 125,
|
|
padding: 20,
|
|
fontColor: '#9e9e9e'
|
|
}
|
|
}
|
|
],
|
|
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(253,93,147,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
padding: 20,
|
|
fontColor: '#9e9e9e'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
};
|
|
|
|
export let pieChartOptions = {
|
|
...basicOptions,
|
|
cutoutPercentage: 70,
|
|
tooltips: {
|
|
backgroundColor: '#f5f5f5',
|
|
titleFontColor: '#333',
|
|
bodyFontColor: '#666',
|
|
bodySpacing: 4,
|
|
xPadding: 12,
|
|
mode: 'nearest',
|
|
intersect: 0,
|
|
position: 'nearest'
|
|
},
|
|
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
display: 0,
|
|
ticks: {
|
|
display: false
|
|
},
|
|
gridLines: {
|
|
drawBorder: false,
|
|
zeroLineColor: 'transparent',
|
|
color: 'rgba(255,255,255,0.05)'
|
|
}
|
|
}
|
|
],
|
|
|
|
xAxes: [
|
|
{
|
|
display: 0,
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(255,255,255,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
display: false
|
|
}
|
|
}
|
|
]
|
|
}
|
|
};
|
|
|
|
export let purpleChartOptions = {
|
|
...basicOptions,
|
|
tooltips: {
|
|
backgroundColor: '#f5f5f5',
|
|
titleFontColor: '#333',
|
|
bodyFontColor: '#666',
|
|
bodySpacing: 4,
|
|
xPadding: 12,
|
|
mode: 'nearest',
|
|
intersect: 0,
|
|
position: 'nearest'
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(29,140,248,0.0)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 60,
|
|
suggestedMax: 125,
|
|
padding: 20,
|
|
fontColor: '#9a9a9a'
|
|
}
|
|
}
|
|
],
|
|
|
|
xAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(225,78,202,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
padding: 20,
|
|
fontColor: '#9a9a9a'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
};
|
|
|
|
export let orangeChartOptions = {
|
|
...basicOptions,
|
|
tooltips: {
|
|
backgroundColor: '#f5f5f5',
|
|
titleFontColor: '#333',
|
|
bodyFontColor: '#666',
|
|
bodySpacing: 4,
|
|
xPadding: 12,
|
|
mode: 'nearest',
|
|
intersect: 0,
|
|
position: 'nearest'
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(29,140,248,0.0)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 50,
|
|
suggestedMax: 110,
|
|
padding: 20,
|
|
fontColor: '#ff8a76'
|
|
}
|
|
}
|
|
],
|
|
|
|
xAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(220,53,69,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
padding: 20,
|
|
fontColor: '#ff8a76'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
};
|
|
export let greenChartOptions = {
|
|
...basicOptions,
|
|
tooltips: {
|
|
backgroundColor: '#f5f5f5',
|
|
titleFontColor: '#333',
|
|
bodyFontColor: '#666',
|
|
bodySpacing: 4,
|
|
xPadding: 12,
|
|
mode: 'nearest',
|
|
intersect: 0,
|
|
position: 'nearest'
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(29,140,248,0.0)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 50,
|
|
suggestedMax: 125,
|
|
padding: 20,
|
|
fontColor: '#9e9e9e'
|
|
}
|
|
}
|
|
],
|
|
|
|
xAxes: [
|
|
{
|
|
barPercentage: 1.6,
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(0,242,195,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
padding: 20,
|
|
fontColor: '#9e9e9e'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
};
|
|
|
|
export let barChartOptions = {
|
|
...basicOptions,
|
|
tooltips: {
|
|
backgroundColor: '#f5f5f5',
|
|
titleFontColor: '#333',
|
|
bodyFontColor: '#666',
|
|
bodySpacing: 4,
|
|
xPadding: 12,
|
|
mode: 'nearest',
|
|
intersect: 0,
|
|
position: 'nearest',
|
|
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(29,140,248,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 60,
|
|
suggestedMax: 120,
|
|
padding: 20,
|
|
fontColor: '#9e9e9e'
|
|
}
|
|
}
|
|
],
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: 'rgba(29,140,248,0.1)',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
padding: 20,
|
|
fontColor: '#9e9e9e'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
};
|