$(function() {
    var chartW = $(window).width() > 320 ? null : 320;
    Highcharts.setOptions({
        colors: ['#73C23A', '#555555']
    });
    $('#total-revenue').highcharts({
        chart: {
            style: {
                fontFamily: '"DB HelvethaicaAIS X Regular"'
            },
            backgroundColor: 'rgba(255, 255, 255, 0)',
            width: chartW,
            height: 365,
            events: {
                load: function() {
                    if (chartW <= 320) {
                        $(".highcharts-container").css({
                            left: -40
                        });
                    }
                }
            }
        },
        title: {
            text: 'รายได้รวม'
        },
        legend: {
            enabled: true
        },
        credits: {
            enabled: false,
        },
        xAxis: {
            lineWidth: 1,
            tickWidth: 0,
            categories: [
                '2560',
                '2561',
                '2562',
                '2563',
                '2564',
                '2565',
                '2566'
            ],
            plotLines: [{
                color: '#9b9b9b',
                dashStyle: 'longdashdot',
                width: 1,
                value: 5.5
            }]
        },
        yAxis: [{
                lineWidth: 0,
                tickWidth: 0,
                gridLineWidth: 0,
                title: {
                    align: 'high',
                    offset: 0,
                    text: 'ล้านบาท',
                    rotation: 0,
                    x: chartW > 320 ? 0 : 50,
                    y: 0
                },
                min: 0,
                max: 230000,
                labels: {
                    enabled: false
                }
            },
            {
                title: {
                    text: ''
                },
                lineWidth: 0,
                tickWidth: 0,
                gridLineWidth: 0,
                title: {
                    align: 'high',
                    offset: 0,
                    text: '',
                    rotation: 0,
                    y: 0
                },
                min: -40,
                max: 20,
                labels: {
                    enabled: false
                },
                opposite: true
            }
        ],
        tooltip: {
            valueDecimals: 0
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                pointWidth: 30,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    inside: true,
                    color: '#00000',
                    rotation: 270,
                    style: {
                        textOutline: false      
                    }
                },
                // states: {
                //     hover: {
                //         color: '#d6d74a'
                //     }
                // }
            }
        },
        series: [{
                type: 'column',
                name: 'รายได้รวม',
                data: [157722, 169856, 180894, 172890, 181333,185485, 188873],
                tooltip: {
                    headerFormat: '<b>{point.key}</b><br>',
                    valueSuffix: ' ลบ.',
                    style: {
                        color: '#515151',
                        textShadow: '0 0 0 black'
                    }
                }
            },
            {
                type: 'line',
                yAxis: 1,
                name: 'อัตราเติบโตรายได้รวม',
                data: [3.7, 7.7, 8.3, -4.4, 4.9,2.3,1.8],
                tooltip: {
                    valueSuffix: ' %',
                    valueDecimals: 1,
                },
                marker: {
                    symbol: 'circle',
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[1],
                    fillColor: Highcharts.getOptions().colors[0],
                    states: {
                        hover: {
                            lineColor: Highcharts.getOptions().colors[1],
                            fillColor: Highcharts.getOptions().colors[0],
                        }
                    }
                }
            }
        ],
        tooltip: {
            shared: true,
            useHTML: true,
            valueDecimals: 0,
            positioner: function(labelWidth, labelHeight, point) {
                var tooltipX, tooltipY;
                var winW = $(window).width();
                if (winW > 320) {
                    if (point.plotX + labelWidth > this.chart.plotWidth) {
                        tooltipX = point.plotX + this.chart.plotLeft - labelWidth - 20;
                    } else {
                        tooltipX = point.plotX + this.chart.plotLeft + 20;
                    }
                    tooltipY = point.plotY + this.chart.plotTop - 20;
                } else {
                    tooltipX = this.chart.plotLeft;
                    tooltipY = this.chart.plotLeft;
                }
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            }
        }
    });
});