kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
63 wiersze
1.0 KiB
Vue
63 wiersze
1.0 KiB
Vue
|
<template>
|
||
|
<div ref="chart"></div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import { Chart } from 'frappe-charts/dist/frappe-charts.min.esm'
|
||
|
|
||
|
export default {
|
||
|
props: {
|
||
|
data: Array,
|
||
|
labelField: String,
|
||
|
valueField: String,
|
||
|
name: String,
|
||
|
maxSlices: {
|
||
|
type: Number,
|
||
|
default: 8
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
updateChart () {
|
||
|
let labels = []
|
||
|
let values = []
|
||
|
this.data.forEach(row => {
|
||
|
labels.push(row[this.labelField])
|
||
|
values.push(row[this.valueField])
|
||
|
})
|
||
|
|
||
|
this.chart = new Chart(this.$refs.chart, {
|
||
|
data: {
|
||
|
labels,
|
||
|
datasets: [{
|
||
|
values,
|
||
|
name: this.name
|
||
|
}]
|
||
|
},
|
||
|
type: 'pie',
|
||
|
height: 250,
|
||
|
maxSlices: this.maxSlices
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
watch: {
|
||
|
data () {
|
||
|
this.updateChart()
|
||
|
}
|
||
|
},
|
||
|
mounted () {
|
||
|
this.updateChart()
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
>>> .graph-svg-tip .title {
|
||
|
color: #fff;
|
||
|
}
|
||
|
@media (max-width: 1216px) {
|
||
|
>>> svg.chart {
|
||
|
height: 300px;
|
||
|
}
|
||
|
}
|
||
|
</style>
|