xidedix
102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
<script>
|
|
import { Line } from 'vue-chartjs'
|
|
import { getStyle } from '@coreui/coreui/js/src/utilities'
|
|
|
|
// const brandPrimary = '#20a8d8'
|
|
// const brandSuccess = '#4dbd74'
|
|
// const brandInfo = '#63c2de'
|
|
// const brandDanger = '#f86c6b'
|
|
|
|
function convertHex (hex, opacity) {
|
|
hex = hex.replace('#', '')
|
|
const r = parseInt(hex.substring(0, 2), 16)
|
|
const g = parseInt(hex.substring(2, 4), 16)
|
|
const b = parseInt(hex.substring(4, 6), 16)
|
|
|
|
// const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
|
|
return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`
|
|
}
|
|
|
|
function random (min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1) + min)
|
|
}
|
|
|
|
export default {
|
|
extends: Line,
|
|
props: ['height'],
|
|
mounted () {
|
|
let elements = 27
|
|
const data1 = []
|
|
const data2 = []
|
|
const data3 = []
|
|
|
|
for (let i = 0; i <= elements; i++) {
|
|
data1.push(random(50, 200))
|
|
data2.push(random(80, 100))
|
|
data3.push(65)
|
|
}
|
|
this.renderChart({
|
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
|
datasets: [
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: convertHex(getStyle('--info'), 10),
|
|
borderColor: getStyle('--info'),
|
|
pointHoverBackgroundColor: '#fff',
|
|
borderWidth: 2,
|
|
data: data1
|
|
},
|
|
{
|
|
label: 'My Second dataset',
|
|
backgroundColor: 'transparent',
|
|
borderColor: getStyle('--success'),
|
|
pointHoverBackgroundColor: '#fff',
|
|
borderWidth: 2,
|
|
data: data2
|
|
},
|
|
{
|
|
label: 'My Third dataset',
|
|
backgroundColor: 'transparent',
|
|
borderColor: getStyle('--danger'),
|
|
pointHoverBackgroundColor: '#fff',
|
|
borderWidth: 1,
|
|
borderDash: [8, 5],
|
|
data: data3
|
|
}
|
|
]
|
|
}, {
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawOnChartArea: false
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
maxTicksLimit: 5,
|
|
stepSize: Math.ceil(250 / 5),
|
|
max: 250
|
|
},
|
|
gridLines: {
|
|
display: true
|
|
}
|
|
}]
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0,
|
|
hitRadius: 10,
|
|
hoverRadius: 4,
|
|
hoverBorderWidth: 3
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|