smart-top/src/api/static/js/dashboard.js

type = ['','info','success','warning','danger'];

dashboard = {
    initPickColor: function(){
        $('.pick-class-label').click(function(){
            var new_class = $(this).attr('new-class');
            var old_class = $('#display-buttons').attr('data-class');
            var display_div = $('#display-buttons');
            if(display_div.length) {
            var display_buttons = display_div.find('.btn');
            display_buttons.removeClass(old_class);
            display_buttons.addClass(new_class);
            display_div.attr('data-class', new_class);
            }
        });
    },

    initChartist: function(){
        var getData = $.get('/1/app/usage/trend');

        getData.done(function(results) {
            var data = JSON.parse(results)
            var app = data['Chrome'];

            function getCpuUsage (app){
                cpu_usage = []
                for (var i in app){
                    cpu_usage.push(app[i].cpu_usage)

                }
                return cpu_usage
            }

            function getMemoryUsage (app){
                memory_usage = []
                for (var i in app){
                    memory_usage.push(app[i].memory_usage)

                }
                return memory_usage
            }
            function getStatus (app){
                statusList = []
                for (var i in app){
                    statusList.push(app[i].status)
                }
                return statusList
            }

// monitoring apps chart
        var dataChart = {
          labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
          series: [app.memory_used, app.cpu, ] // TODO: Check the order, the graph is by index not name.
        };

        var optionsChart = {
          lineSmooth: false,
          low: 0,
          high: 100,
          showArea: true,
          height: "245px",
          axisX: {
            showGrid: false,
          },
          lineSmooth: Chartist.Interpolation.simple({
            divisor: 1
          }),
          showLine: true,
          showPoint: false,
        };

        var responsiveChart = [
          ['screen and (max-width: 640px)', {
            axisX: {
              labelInterpolationFnc: function (value) {
                return value[0];
              }
            }
          }]
        ];

        Chartist.Line('#chartHours', dataChart, optionsChart, responsiveChart);

// cpu and memory --------------------------
        var data = {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          series: [app.cpu, app.memory_used]

        };

        var options = {
            seriesBarDistance: 10,
            axisX: {
                showGrid: false
            },
            height: "245px"
        };

        var responsiveOptions = [
          ['screen and (max-width: 640px)', {
            seriesBarDistance: 5,
            axisX: {
              labelInterpolationFnc: function (value) {
                return value[0];
              }
            }
          }]
        ];

        Chartist.Line('#chartActivity', data, options, responsiveOptions);

        status = getStatus(app)
        statusList = status.split(',');

        statusByNum = getStatusByType(statusList)

        function getStatusByType(statusList){
            running = 0;
            idle = 0;
            crash = 0;

            for (var n in statusList){
                if (statusList[n] == 'running'){
                    running += 1;
                };
                if (statusList[n] == 'idle'){
                    idle += 1;
                };
                if (statusList[n] == 'crash'){
                    crash += 1;
                };
            }
            statusList = [running, idle, crash];
            return statusList
        }

        percentage = getStatusPercent(statusByNum);

        function getStatusPercent(statusByNum){
            let total = 0
            for (var i in statusByNum){
                total += statusByNum[i];
            }

            percent = []
            for (var i in statusByNum){
                percent.push(total / statusByNum[i])
            }
            total = 100
            let percentage = []
            for (var i in percent){
                percentage.push(total/percent[i])
            }
            for (var i in percentage){
                if (percentage[i] == 0){
                    percentage.pop(percentage[i]);
                }
            }
            return percentage
        }

        for (i in percentage){
            percentage[i] = percentage[i].toString()+'%';
        }

        Chartist.Pie('#chartPreferences', {
          labels: percentage,
          series: [1,2,3]
        });
    })
},
// End chartist function

    initGoogleMaps: function(){
        var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
        var mapOptions = {
          zoom: 13,
          center: myLatlng,
          scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
          styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]

        }
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            title:"Hello World!"
        });

        // To add the marker to the map, call setMap();
        marker.setMap(map);
    },

	showNotification: function(from, align){
    	color = Math.floor((Math.random() * 4) + 1);

    	$.notify({
        	icon: "ti-comment",
        	message: "Message."

        },{
            type: type[color],
            timer: 4000,
            placement: {
                from: from,
                align: align
            }
        });
	},

}


/**
 * Global information about the dashboard
 * @TODO: Add socket handling ... it would make non-blocking updating information
 */

var g = {}
g.summary = {}
/**
 * Initializing the top section of the dashboard (apps and folders)
 */
g.summary.factory = function (url,pointer) {
    var object = {}
    object.url = url
    var observer = null
    var TIME_ELLAPSED = 2000 ;
    object.callback = function (r) {
        r = JSON.parse(r.responseText)
        pointer(r)
        console.log(r)
        //monitorStatus(r.idle, r.crash, r.running)

        //observer.notify()

    }
    object.init = function (observer) {
        observer = observer

        var httpclient = HttpClient.instance()
        //httpclient.setAsync(false)
        httpclient.get(this.url, this.callback)
        setTimeout(function(){
            observer.notify()
        },TIME_ELLAPSED) ;

        //observer.notify()
    }
    return object

}