Swift
79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
/* eslint-disable vue/require-default-prop */
|
|
<template>
|
|
<CChartBar :datasets="computedDatasets" :options="computedOptions" :labels="labels" />
|
|
</template>
|
|
|
|
<script>
|
|
import CoreUtils from '~/mixins/CoreUtils'
|
|
|
|
export default {
|
|
name: 'CChartBarSimple',
|
|
mixins: [CoreUtils],
|
|
props: {
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
datasets: Array,
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
labels: [Array, String],
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
options: Object,
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
plugins: Array,
|
|
backgroundColor: {
|
|
type: String,
|
|
default: 'rgba(0,0,0,.2)'
|
|
},
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
pointHoverBackgroundColor: String,
|
|
dataPoints: {
|
|
type: Array,
|
|
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: 'Sales'
|
|
},
|
|
pointed: Boolean
|
|
},
|
|
computed: {
|
|
defaultDatasets() {
|
|
return [
|
|
{
|
|
data: this.dataPoints,
|
|
backgroundColor: this.getColor(this.backgroundColor),
|
|
pointHoverBackgroundColor: this.getColor(this.pointHoverBackgroundColor),
|
|
label: this.label,
|
|
barPercentage: 0.5,
|
|
categoryPercentage: 1
|
|
}
|
|
]
|
|
},
|
|
defaultOptions() {
|
|
return {
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [
|
|
{
|
|
display: false
|
|
}
|
|
],
|
|
yAxes: [
|
|
{
|
|
display: false
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
computedDatasets() {
|
|
return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
|
},
|
|
computedOptions() {
|
|
return this.deepObjectsMerge(this.defaultOptions, this.options || {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|