<template>
    <div class="container">
        <p class="text">{{ centerText }}</p>
        <p class="bottom_text">{{ bottomText }}</p>
        <apexchart type="radialBar" height="205" :options="chartOptions" :series="series" ref="chart"/>
    </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'
import Vue from 'vue'

Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)
export default {
    name: 'RadialBarChart',
    props: {
        series: Array,
        centerText: String,
        colors: String,
        name: String,
        bottomText: String,
    },
    watch: {
        series: {
            deep: true,
            handler() {
                this.$refs.chart.updateSeries(this.series)
            }
        }
    },
    data() {
        return {
            chartOptions: {
                series: this.series,
                chart: {
                    type: 'radialBar',
                    offsetY: 0
                },
                plotOptions: {
                    radialBar: {
                        startAngle: -135,
                        endAngle: 135,
                        dataLabels: {
                            name: {
                                fontSize: '15px',
                                color: this.colors,
                                offsetY: 56
                            },
                            value: {
                                offsetY: 60,
                                fontSize: '14px',
                                color: undefined,
                                formatter: () => {return ''}
                            }
                        }
                    }
                },
                fill: {
                    colors: this.colors
                },
                labels: [this.name],
                states: {
                    hover: {
                        filter: {
                            type: 'none'
                        }
                    },
                    active: {
                        filter: {
                            type: 'none'
                        }
                    }
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    position: relative;
    margin: 0 auto;
    height: 172px;
    .text {
        position: absolute;
        top: calc(50% - 3px);
        width: 100%;
        text-align: center;
    }
    .bottom_text {
        position: absolute;
        top: calc(152px);
        font-weight: 600;
        width: 100%;
        text-align: center;
    }
}
</style>
