SkyScanner.getInitializers().push(
    new Promise((resolve,reject)=>{
        LN().load("/vue/ln.skyscanner.node.html").
        then((template)=>{
            skyScannerRoutes.push(
                {
                    path: "/vue/nodes/:nodeID",
                    component: {
                        template: template,
                        data: function(){ return { node: null }; },
                        beforeRouteEnter: function(to,from,next){
                            next((vm)=>{
                                skyscanner.loadNode(to.params.nodeID,(node)=>{
                                    vm.node = node;
                                }, 1000);
                            });
                        },
                        beforeRouteLeave: function(from,to,next){
                            clearTimeout(skyscanner.currentTimeout);
                            next();
                        },
                    },
                }
            );
            resolve();
        });
    })
);

function loadGraph(perfValue){
    skyscanner.loadPerformanceGraph(perfValue.PerfPath,3600,(perfData)=>{
        var perfID = skyscanner.encodeID(perfValue.PerfName);
        var chartColor = perfValue.CheckState == "CRITICAL" ? '#C00000' : (perfValue.CheckState == "WARN") ? '#C0C000' : '#008000';

        var gDiv = $("#" + perfID);
        var chart = null;

        if (!gDiv.length)
        {
            gDiv = $("<div></div>").attr("id",perfID).css("height","400px");
            var canvas = $("<canvas></canvas>").appendTo(gDiv);
            chart = new Chart( canvas, {
                type: 'line',
                data: {
                    datasets: [
                        {
                            label: "-",
                            data: [],
                            borderColor: chartColor,
                            backgroundColor: null,
                            fill: false,
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    callback: SkyScanner.scaleSI,
                                    beginAtZero: true,
                                }
                            }
                        ],
                        xAxes: [{
                            type: 'time',
                            time: {
                                unit: "minute",
                                tooltipFormat: "DD.MM.YYYY HH:mm",
                                displayFormats: {
                                    minute: "DD.MM.YYYY HH:mm"
                                },
                                parser: moment.unix
                            }
                        }]
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                    cubicInterpolationMode: "monotone",
                    fill: false,
                }
            } );
            chart.data.labels.length = 0;
            chart.data.datasets[0].data.length = 0;
            chart.data.datasets[0].label = perfValue.PerfName;

            gDiv.data("chart",chart);
        } else 
        {
            chart = gDiv.data("chart");
        }

        chart.data.datasets[0].data.length = 0;
        $.each( perfData, function(){
            if (this.TimeStamp != 0)
                chart.data.datasets[0].data.push( { x: this.TimeStamp, y: this.Value } );
        });

        chart.update();

        $("#graphs").append(gDiv);
    });
}