// ==UserScript==
// @name         Chart MissionControl
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://missioncontrol.pseuco.com/
// @grant        none
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js
// @require      http://code.jquery.com/jquery-3.3.1.min.js
// ==/UserScript==

(function() {
    'use strict';

    var canv = document.createElement('canvas');
    canv.id = 'canvas';


    var checkbox=$(document.createElement('input')).attr({
        id:    'myCheckbox'
        ,name:  'myCheckbox'
        ,value: 'myValue'
        ,type:  'checkbox'
    });

    var center=$(document.createElement('center'));
    $(center).append(checkbox, "Logarithmic");

    $('body').append(
        center//"<center>", checkbox, "Logarithmic", "</center>"
    );

    document.body.appendChild(canv);

    window.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)'
    };

    var labels = [];
    var points = [];
    var labels2 = [];
    var points2 = [];

    $("tbody tr").each(function( index ) {
        var text=[];
        $(this).children("td").each(function(index2) {
            //console.log($(this).text());
            text.push($(this).text());
        });
        labels.push(text[1]);
        if(text[4]>0){
        points.push(text[4]);
        }else{
        points.push(text[4]);
        }
        //console.log(text);
        //console.log( index + ": " + $( this ).text() );
    });

    //points.reverse();
    //labels.reverse();
    console.log(points);

        //var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        var color = Chart.helpers.color;
        var barChartData = {
            labels: labels, //['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'Punkte',
                backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                borderColor: window.chartColors.blue,
                borderWidth: 1,
                data: points
            }/*,{
                //label: 'Punkte',
                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                borderColor: window.chartColors.blue,
                borderWidth: 1,
                data: points2
            }, {
                label: 'Dataset 2',
                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                borderColor: window.chartColors.blue,
                borderWidth: 1,
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ]
            }*/]

        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart'
                    }
                }
            });

            var xScale = chart.scales['x-axis-0'];
            var yScale = chart.scales['y-axis-0'];
            chart.options.scales = {
                xAxes: [{
                    id: 'newId',
                    display: true
                }],
                yAxes: [{
                    display: true,
                    ticks: {
                        suggestedMax: 150,
                        suggestedMin: -150,
                        min: -150
                    },
                    type: 'linear'
                }]
            };

            chart.update();

            checkbox.on("change",function(){
                //console.log($(this).is(':checked'));
                if($(this).is(':checked')){
            chart.options.scales = {
                xAxes: [{
                    id: 'newId',
                    display: true
                }],
                yAxes: [{
                    display: true,
                    ticks: {
                        suggestedMax: 150,
                        suggestedMin: -150,
                        min: -150
                    },
                    type: 'logarithmic'
                }]
            };

            chart.update();
                }else{
            chart.options.scales = {
                xAxes: [{
                    id: 'newId',
                    display: true
                }],
                yAxes: [{
                    display: true,
                    ticks: {
                        suggestedMax: 150,
                        suggestedMin: -150,
                        min: -150
                    },
                    type: 'linear'
                }]
            };

            chart.update();
                }
            });

        };

    /*
    $(function() {

//        var headers = $("span",$("#tblVersions")).map(function() {
//            return this.innerHTML;
//        }).get();

        var rows = $("tbody tr",$("#tblVersions")).map(function() {
            return [$("td:eq(0) input:checkbox:checked",this).map(function() {
                return this.innerHTML;
            }).get()];
        }).get();

        console.log(rows);
    });
    */
})();