/**
 * This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highcharts Stock.
 * It also shows custom graphics drawn in the chart area on chart load.
 */


/**
 * Fires on chart load, called from the chart.events.load option.
 */
function onChartLoad() {

    var centerX = 140,
        centerY = 110,
        path = [],
        angle,
        radius,
        badgeColor = Highcharts.color(
            Highcharts.getOptions().colors[0]
        ).brighten(-0.2).get(),
        spike,
        empImage,
        big5,
        label,
        left,
        right,
        years,
        renderer;

    if (this.chartWidth < 530) {
        return;
    }

    // Draw the spiked disc
    for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
        radius = spike ? 80 : 70;
        path.push(
            'L',
            centerX + radius * Math.cos(angle),
            centerY + radius * Math.sin(angle)
        );
        spike = !spike;
    }
    path[0] = 'M';
    path.push('z');
    this.renderer.path(path)
        .attr({
            fill: badgeColor,
            zIndex: 6
        })
        .add();

    // Employee image overlay
    empImage = this.renderer.path(path)
        .attr({
            zIndex: 7,
            opacity: 0,
            stroke: badgeColor,
            'stroke-width': 1
        })
        .add();

    // Big 5
    big5 = this.renderer.text('5')
        .attr({
            zIndex: 6
        })
        .css({
            color: 'white',
            fontSize: '100px',
            fontStyle: 'italic',
            fontFamily: '\'Brush Script MT\', sans-serif'
        })
        .add();
    big5.attr({
        x: centerX - big5.getBBox().width / 2,
        y: centerY + 14
    });

    // Draw the label
    label = this.renderer.text('Highcharts Anniversary')
        .attr({
            zIndex: 6
        })
        .css({
            color: '#FFFFFF'
        })
        .add();

    left = centerX - label.getBBox().width / 2;
    right = centerX + label.getBBox().width / 2;

    label.attr({
        x: left,
        y: centerY + 44
    });

    // The band
    left = centerX - 90;
    right = centerX + 90;
    this.renderer
        .path([
            'M', left, centerY + 30,
            'L', right, centerY + 30,
            right, centerY + 50,
            left, centerY + 50,
            'z',
            'M', left, centerY + 40,
            'L', left - 20, centerY + 40,
            left - 10, centerY + 50,
            left - 20, centerY + 60,
            left + 10, centerY + 60,
            left, centerY + 50,
            left + 10, centerY + 60,
            left + 10, centerY + 50,
            left, centerY + 50,
            'z',
            'M', right, centerY + 40,
            'L', right + 20, centerY + 40,
            right + 10, centerY + 50,
            right + 20, centerY + 60,
            right - 10, centerY + 60,
            right, centerY + 50,
            right - 10, centerY + 60,
            right - 10, centerY + 50,
            right, centerY + 50,
            'z'
        ])
        .attr({
            fill: badgeColor,
            stroke: '#FFFFFF',
            'stroke-width': 1,
            zIndex: 5
        })
        .add();

    // 2009-2014
    years = this.renderer.text('2009-2014')
        .attr({
            zIndex: 6
        })
        .css({
            color: '#FFFFFF',
            fontStyle: 'italic',
            fontSize: '10px'
        })
        .add();
    years.attr({
        x: centerX - years.getBBox().width / 2,
        y: centerY + 62
    });

    // Prepare mouseover
    renderer = this.renderer;
    if (renderer.defs) { // is SVG
        this.get('employees').points.forEach(point => {
            let pattern;
            if (point.image) {
                pattern = renderer.createElement('pattern').attr({
                    id: 'pattern-' + point.image,
                    patternUnits: 'userSpaceOnUse',
                    width: 400,
                    height: 400
                }).add(renderer.defs);
                renderer.image(
                    'https://www.highcharts.com/images/employees2014/' + point.image + '.jpg',
                    centerX - 80,
                    centerY - 80,
                    160,
                    213
                ).add(pattern);

                Highcharts.addEvent(point, 'mouseOver', function () {
                    empImage
                        .attr({
                            fill: 'url(#pattern-' + point.image + ')'
                        })
                        .animate({ opacity: 1 }, { duration: 500 });
                });
                Highcharts.addEvent(point, 'mouseOut', function () {
                    empImage.animate({ opacity: 0 }, { duration: 500 });
                });
            }
        });
    }
}

const options = {
    chart: {
        events: {
            load: onChartLoad
        }
    },
    xAxis: {
        type: 'datetime',
        minTickInterval: 365 * 24 * 36e5,
        labels: {
            align: 'left'
        },
        plotBands: [{
            from: Date.UTC(2009, 10, 27),
            to: Date.UTC(2010, 11, 1),
            color: '#EFFFFF',
            label: {
                text: '<em>Offices:</em><br> Torstein\'s basement',
                style: {
                    color: '#999999'
                },
                y: 180
            }
        }, {
            from: Date.UTC(2010, 11, 1),
            to: Date.UTC(2013, 9, 1),
            color: '#FFFFEF',
            label: {
                text: '<em>Offices:</em><br> Tomtebu',
                style: {
                    color: '#999999'
                },
                y: 30
            }
        }, {
            from: Date.UTC(2013, 9, 1),
            to: Date.UTC(2014, 10, 27),
            color: '#FFEFFF',
            label: {
                text: '<em>Offices:</em><br> VikØrsta',
                style: {
                    color: '#999999'
                },
                y: 30
            }
        }]

    },
    title: {
        text: 'Highcharts and Highsoft timeline'
    },
    caption: {
        text: 'An advanced demo showing a combination of various Highcharts features, including flags and plot bands. The chart shows how Highcharts and Highsoft has evolved over time, with number of employees, revenue, search popularity, office locations, and various events of interest.'
    },
    credits: {
        enabled: false
    },
    tooltip: {
        style: {
            width: '250px'
        }
    },
    yAxis: [{
        max: 100,
        labels: {
            enabled: false
        },
        title: {
            text: ''
        },
        gridLineColor: 'rgba(0, 0, 0, 0.07)'
    }, {
        allowDecimals: false,
        max: 15,
        labels: {
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        title: {
            text: 'Employees',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        opposite: true,
        gridLineWidth: 0
    }],
    plotOptions: {
        series: {
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2
            },
            fillOpacity: 0.5
        },
        flags: {
            tooltip: {
                xDateFormat: '%B %e, %Y'
            },
            accessibility: {
                point: {
                    valueDescriptionFormat: '{xDescription}. {point.title}: {point.text}.'
                }
            }
        }
    },
    series: [{
        type: 'spline',
        id: 'google-trends',
        dashStyle: 'dash',
        name: 'Google search for <em>highcharts</em>',
        data: [
            { x: 1258322400000, /* November 2009 */ y: 0 },
            { x: 1260961200000, y: 5 },
            { x: 1263639600000, y: 7 },
            { x: 1266188400000, y: 5 },
            { x: 1268740800000, y: 6 },
            { x: 1271368800000, y: 8 },
            { x: 1274004000000, y: 11 },
            { x: 1276639200000, y: 9 },
            { x: 1279274400000, y: 12 },
            { x: 1281952800000, y: 13 },
            { x: 1284588000000, y: 17 },
            { x: 1287223200000, y: 17 },
            { x: 1289858400000, y: 18 },
            { x: 1292497200000, y: 20 },
            { x: 1295175600000, y: 20 },
            { x: 1297724400000, y: 27 },
            { x: 1300276800000, y: 32 },
            { x: 1302904800000, y: 29 },
            { x: 1305540000000, y: 34 },
            { x: 1308175200000, y: 34 },
            { x: 1310810400000, y: 36 },
            { x: 1313488800000, y: 43 },
            { x: 1316124000000, y: 44 },
            { x: 1318759200000, y: 42 },
            { x: 1321394400000, y: 47 },
            { x: 1324033200000, y: 46 },
            { x: 1326711600000, y: 50 },
            { x: 1329303600000, y: 57 },
            { x: 1331899200000, y: 54 },
            { x: 1334527200000, y: 59 },
            { x: 1337162400000, y: 62 },
            { x: 1339797600000, y: 66 },
            { x: 1342432800000, y: 61 },
            { x: 1345111200000, y: 68 },
            { x: 1347746400000, y: 67 },
            { x: 1350381600000, y: 73 },
            { x: 1353016800000, y: 63 },
            { x: 1355655600000, y: 54 },
            { x: 1358334000000, y: 67 },
            { x: 1360882800000, y: 74 },
            { x: 1363435200000, y: 81 },
            { x: 1366063200000, y: 89 },
            { x: 1368698400000, y: 83 },
            { x: 1371333600000, y: 88 },
            { x: 1373968800000, y: 86 },
            { x: 1376647200000, y: 81 },
            { x: 1379282400000, y: 83 },
            { x: 1381917600000, y: 95 },
            { x: 1384552800000, y: 86 },
            { x: 1387191600000, y: 83 },
            { x: 1389870000000, y: 89 },
            { x: 1392418800000, y: 90 },
            { x: 1394971200000, y: 94 },
            { x: 1397599200000, y: 100 },
            { x: 1400234400000, y: 100 },
            { x: 1402869600000, y: 99 },
            { x: 1405504800000, y: 99 },
            { x: 1408183200000, y: 93 },
            { x: 1410818400000, y: 97 },
            { x: 1413453600000, y: 98 }
        ],
        tooltip: {
            xDateFormat: '%B %Y',
            valueSuffix: ' % of best month'
        }
    }, {
        name: 'Revenue',
        id: 'revenue',
        type: 'area',
        data: [
            [1257033600000, 2],
            [1259625600000, 3],
            [1262304000000, 2],
            [1264982400000, 3],
            [1267401600000, 4],
            [1270080000000, 4],
            [1272672000000, 4],
            [1275350400000, 4],
            [1277942400000, 5],
            [1280620800000, 7],
            [1283299200000, 6],
            [1285891200000, 9],
            [1288569600000, 10],
            [1291161600000, 8],
            [1293840000000, 10],
            [1296518400000, 13],
            [1298937600000, 15],
            [1301616000000, 14],
            [1304208000000, 15],
            [1306886400000, 16],
            [1309478400000, 22],
            [1312156800000, 19],
            [1314835200000, 20],
            [1317427200000, 32],
            [1320105600000, 34],
            [1322697600000, 36],
            [1325376000000, 34],
            [1328054400000, 40],
            [1330560000000, 37],
            [1333238400000, 35],
            [1335830400000, 40],
            [1338508800000, 38],
            [1341100800000, 39],
            [1343779200000, 43],
            [1346457600000, 49],
            [1349049600000, 43],
            [1351728000000, 54],
            [1354320000000, 44],
            [1356998400000, 43],
            [1359676800000, 43],
            [1362096000000, 52],
            [1364774400000, 52],
            [1367366400000, 56],
            [1370044800000, 62],
            [1372636800000, 66],
            [1375315200000, 62],
            [1377993600000, 63],
            [1380585600000, 60],
            [1383264000000, 60],
            [1385856000000, 58],
            [1388534400000, 65],
            [1391212800000, 52],
            [1393632000000, 72],
            [1396310400000, 57],
            [1398902400000, 70],
            [1401580800000, 63],
            [1404172800000, 65],
            [1406851200000, 65],
            [1409529600000, 89],
            [1412121600000, 100]
        ],
        tooltip: {
            xDateFormat: '%B %Y',
            valueSuffix: ' % of best month'
        }

    }, {
        yAxis: 1,
        name: 'Highsoft employees',
        id: 'employees',
        type: 'area',
        step: 'left',
        tooltip: {
            headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>',
            pointFormat: '{point.name}<br><b>{point.y}</b>',
            valueSuffix: ' employees'
        },
        data: [
            { x: Date.UTC(2009, 10, 1), y: 1, name: 'Torstein worked alone', image: 'Torstein' },
            { x: Date.UTC(2010, 10, 20), y: 2, name: 'Grethe joined', image: 'Grethe' },
            { x: Date.UTC(2011, 3, 1), y: 3, name: 'Erik joined', image: null },
            { x: Date.UTC(2011, 7, 1), y: 4, name: 'Gert joined', image: 'Gert' },
            { x: Date.UTC(2011, 7, 15), y: 5, name: 'Hilde joined', image: 'Hilde' },
            { x: Date.UTC(2012, 5, 1), y: 6, name: 'Guro joined', image: 'Guro' },
            { x: Date.UTC(2012, 8, 1), y: 5, name: 'Erik left', image: null },
            { x: Date.UTC(2012, 8, 15), y: 6, name: 'Anne Jorunn joined', image: 'AnneJorunn' },
            { x: Date.UTC(2013, 0, 1), y: 7, name: 'Hilde T. joined', image: null },
            { x: Date.UTC(2013, 7, 1), y: 8, name: 'Jon Arild joined', image: 'JonArild' },
            { x: Date.UTC(2013, 7, 20), y: 9, name: 'Øystein joined', image: 'Oystein' },
            { x: Date.UTC(2013, 9, 1), y: 10, name: 'Stephane joined', image: 'Stephane' },
            { x: Date.UTC(2014, 9, 1), y: 11, name: 'Anita joined', image: 'Anita' },
            { x: Date.UTC(2014, 10, 27), y: 11, name: ' ', image: null }
        ]

    }]
};

// Add flags for important milestones. This requires Highcharts Stock.
if (Highcharts.Series.types.flags) {
    options.series.push({
        type: 'flags',
        name: 'Cloud',
        color: '#333333',
        shape: 'squarepin',
        y: -80,
        data: [
            { x: Date.UTC(2014, 4, 1), text: 'Highcharts Cloud Beta', title: 'Cloud', shape: 'squarepin' }
        ],
        showInLegend: false
    }, {
        type: 'flags',
        name: 'Highmaps',
        color: '#333333',
        shape: 'squarepin',
        y: -55,
        data: [
            { x: Date.UTC(2014, 5, 13), text: 'Highmaps version 1.0 released', title: 'Maps' }
        ],
        showInLegend: false
    }, {
        type: 'flags',
        name: 'Highcharts',
        color: '#333333',
        shape: 'circlepin',
        data: [
            { x: Date.UTC(2009, 10, 27), text: 'Highcharts version 1.0 released', title: '1.0' },
            { x: Date.UTC(2010, 6, 13), text: 'Ported from canvas to SVG rendering', title: '2.0' },
            { x: Date.UTC(2010, 10, 23), text: 'Dynamically resize and scale to text labels', title: '2.1' },
            { x: Date.UTC(2011, 9, 18), text: 'Highcharts Stock version 1.0 released', title: 'Stock', shape: 'squarepin' },
            { x: Date.UTC(2012, 7, 24), text: 'Gauges, polar charts and range series', title: '2.3' },
            { x: Date.UTC(2013, 2, 22), text: 'Multitouch support, more series types', title: '3.0' },
            { x: Date.UTC(2014, 3, 22), text: '3D charts, heatmaps', title: '4.0' }
        ],
        showInLegend: false
    }, {
        type: 'flags',
        name: 'Events',
        color: '#333333',
        fillColor: 'rgba(255,255,255,0.8)',
        data: [
            { x: Date.UTC(2012, 10, 1), text: 'Highsoft won "Entrepeneur of the Year" in Sogn og Fjordane, Norway', title: 'Award' },
            { x: Date.UTC(2012, 11, 25), text: 'Packt Publishing published <em>Learning Highcharts by Example</em>. Since then, many other books are written about Highcharts.', title: 'First book' },
            { x: Date.UTC(2013, 4, 25), text: 'Highsoft nominated Norway\'s Startup of the Year', title: 'Award' },
            { x: Date.UTC(2014, 4, 25), text: 'Highsoft nominated Best Startup in Nordic Startup Awards', title: 'Award' }
        ],
        onSeries: 'revenue',
        showInLegend: false
    });
}

Highcharts.chart('container', options);