<template>
    <div>
        <bubble-chart ref="bubble" :chartData='bubbleData' :options='bubbleOptions' style="max-width:700px;margin:auto"></bubble-chart>

        <el-row type="flex" style="margin-top:50px" justify="center">
            <el-button @click="randomizeData">随机改变值</el-button>
            <el-button @click="addDataset" type="primary">添加数据集</el-button>
            <el-button @click="removeDataset" type="success">删除数据集</el-button>
        </el-row>

    </div>
</template>
<script>
import Chart from 'chart.js'
import bubbleChart from '../components/Bubble'
export default {
    created() {

    },
    data() {
        return {
            DATA_COUNT: 16,
            MIN_XY: -150,
            MAX_XY: 100,
            _seed: '',
            bubbleData: null,
            bubbleOptions: null,
            chartColors: {
                red: 'rgb(255, 99, 132)',
                orange: 'rgb(255, 159, 64)',
                yellow: 'rgb(255, 205, 86)',
                green: 'rgb(75, 192, 192)',
                blue: 'rgb(54, 162, 235)',
                purple: 'rgb(153, 102, 255)',
                grey: 'rgb(201, 203, 207)'
            },
            COLORS: [
                '#4dc9f6',
                '#f67019',
                '#f53794',
                '#537bc4',
                '#acc236',
                '#166a8f',
                '#00a950',
                '#58595b',
                '#8549ba'
            ],
            MONTHS: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

        }
    },
    mounted() {
        this.updateChart()
    },
    methods: {
        updateChart() {
            this._seed = Date.now()
            this.bubbleOptions = {
                aspectRatio: 1,
                legend: false,
                tooltips: false,

                elements: {
                    point: {
                        backgroundColor: this.colorize.bind(null, false),

                        borderColor: this.colorize.bind(null, true),

                        borderWidth: (context) => {
                            return Math.min(Math.max(1, context.datasetIndex + 1), 8);
                        },

                        hoverBackgroundColor: 'transparent',

                        hoverBorderColor: (context) => {
                            return this.color(context.datasetIndex);
                        },

                        hoverBorderWidth: (context) => {
                            var value = context.dataset.data[context.dataIndex];
                            return Math.round(8 * value.v / 1000);
                        },

                        radius: (context) => {
                            var value = context.dataset.data[context.dataIndex];
                            var size = context.chart.width;
                            var base = Math.abs(value.v) / 1000;
                            return (size / 24) * base;
                        }
                    }
                }
            }
            this.bubbleData = {
                datasets: [{
                    data: this.generateData()
                }, {
                    data: this.generateData()
                }]
            }
        },
        colorize(opaque, context) {
            var value = context.dataset.data[context.dataIndex];
            var x = value.x / 100;
            var y = value.y / 100;
            var r = x < 0 && y < 0 ? 250 : x < 0 ? 150 : y < 0 ? 50 : 0;
            var g = x < 0 && y < 0 ? 0 : x < 0 ? 50 : y < 0 ? 150 : 250;
            var b = x < 0 && y < 0 ? 0 : x > 0 && y > 0 ? 250 : 150;
            var a = opaque ? 1 : 0.5 * value.v / 1000;

            return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
        },
        color: function (index) {
            return this.COLORS[index % this.COLORS.length];
        },
        generateData() {
            var data = [];
            var i;

            for (i = 0; i < this.DATA_COUNT; ++i) {
                data.push({
                    x: this.rand(this.MIN_XY, this.MAX_XY),
                    y: this.rand(this.MIN_XY, this.MAX_XY),
                    v: this.rand(0, 1000)
                });
            }

            return data;
        },
        rand(min, max) {
            var seed = this._seed;
            min = min === undefined ? 0 : min;
            max = max === undefined ? 1 : max;
            this._seed = (seed * 9301 + 49297) % 233280;
            return min + (this._seed / 233280) * (max - min);
        },
        randomizeData() {
            var bubbleData = this.bubbleData
            bubbleData.datasets.forEach((dataset, index) => {
                bubbleData.datasets[index].data = this.generateData();
            });
            this.bubbleData = bubbleData
            this.$refs.bubble.updateChart()
        },
        addDataset() {
           this.bubbleData.datasets.push({
				data: this.generateData()
			});
            this.$refs.bubble.updateChart()
        },
        removeDataset() {
            this.bubbleData.datasets.shift();
            this.$refs.bubble.updateChart();
        },
    },
    components: { bubbleChart }
}
</script>
<style lang="less" scoped>
</style>
