mahyargdz
139 lines
4.0 KiB
Vue
139 lines
4.0 KiB
Vue
<template>
|
|
<CChartLine
|
|
:datasets="computedDatasets"
|
|
:options="computedOptions"
|
|
:labels="labels"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import CoreUtils from '~/mixins/CoreUtils'
|
|
|
|
export default {
|
|
name: 'CChartLineSimple',
|
|
mixins: [CoreUtils],
|
|
props: {
|
|
datasets: Array,
|
|
labels: [Array, String],
|
|
options: Object,
|
|
plugins: Array,
|
|
borderColor: {
|
|
type: String,
|
|
default: 'rgba(255,255,255,.55)'
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: 'transparent'
|
|
},
|
|
dataPoints: {
|
|
type: Array,
|
|
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: 'Sales'
|
|
},
|
|
pointed: Boolean,
|
|
pointHoverBackgroundColor: String
|
|
},
|
|
computed: {
|
|
pointHoverColor() {
|
|
if (this.pointHoverBackgroundColor) {
|
|
return this.pointHoverBackgroundColor
|
|
} else if (this.backgroundColor !== 'transparent') {
|
|
return this.backgroundColor
|
|
}
|
|
return this.borderColor
|
|
},
|
|
defaultDatasets() {
|
|
return [
|
|
{
|
|
data: this.dataPoints,
|
|
borderColor: this.getColor(this.borderColor),
|
|
backgroundColor: this.getColor(this.backgroundColor),
|
|
pointBackgroundColor: this.getColor(this.pointHoverColor),
|
|
pointHoverBackgroundColor: this.getColor(this.pointHoverColor),
|
|
label: this.label
|
|
}
|
|
]
|
|
},
|
|
pointedOptions() {
|
|
return {
|
|
scales: {
|
|
xAxes: [
|
|
{
|
|
offset: true,
|
|
gridLines: {
|
|
color: 'transparent',
|
|
zeroLineColor: 'transparent'
|
|
},
|
|
ticks: {
|
|
fontSize: 2,
|
|
fontColor: 'transparent'
|
|
}
|
|
}
|
|
],
|
|
yAxes: [
|
|
{
|
|
display: false,
|
|
ticks: {
|
|
display: false,
|
|
min: Math.min.apply(Math, this.dataPoints) - 5,
|
|
max: Math.max.apply(Math, this.dataPoints) + 5
|
|
}
|
|
}
|
|
]
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderWidth: 1
|
|
},
|
|
point: {
|
|
radius: 4,
|
|
hitRadius: 10,
|
|
hoverRadius: 4
|
|
}
|
|
}
|
|
}
|
|
},
|
|
straightOptions() {
|
|
return {
|
|
scales: {
|
|
xAxes: [{
|
|
display: false
|
|
}],
|
|
yAxes: [{
|
|
display: false
|
|
}]
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderWidth: 2
|
|
},
|
|
point: {
|
|
radius: 0,
|
|
hitRadius: 10,
|
|
hoverRadius: 4
|
|
}
|
|
}
|
|
}
|
|
},
|
|
defaultOptions() {
|
|
const options = this.pointed ? this.pointedOptions : this.straightOptions
|
|
return Object.assign({}, options, {
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: false
|
|
}
|
|
})
|
|
},
|
|
computedDatasets() {
|
|
return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
|
},
|
|
computedOptions() {
|
|
return this.deepObjectsMerge(this.defaultOptions, this.options || {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|