mubot-server/public/js/rickshaw.js

A server for mubot

// set up our data series with 150 random data points


//add data



/*
lC.loadHpsChart = () => {
  var cpuData = graphics.cpuChart.cpuData;
  var palette =  graphics.palette;
  var series = graphics.cpuChart.series;
  var graph = graphics.cpuChart.rickshaw;


  if(window.outerWidth < 701) graph.height = window.outerWidth / 10

  graphics.cpuChart.note = new Rickshaw.Graph.Annotate({ 
    graph: graph,
    element: document.getElementById('timeline') 
  });

  var y_axis = new Rickshaw.Graph.Axis.Y({ graph: graph, orientation: 'left', tickFormat: Rickshaw.Fixtures.Number.formatKMBT, element: document.getElementById('y_axis') });
  var x_axis = new Rickshaw.Graph.Axis.Time ({ graph: graph, timeUnit: 60000 });
  var legend = new Rickshaw.Graph.Legend({element: document.querySelector('#legend'), graph: graph })
  var offsetForm = document.getElementById('offset_form');

  offsetForm.addEventListener('change', e => {
    var offsetMode = e.target.value;
    if(offsetMode === 'lines') { 
      graph.setRenderer('line');
      graph.offset = 'zero'
    } else {
      graph.setRenderer('stack');
      graph.offset = offsetMode
    }
  }, false);

  var time = 0;
  graph.render();

  // Create our graphing interval
  setInterval(() => {
    time += 5;
    // An algo I hacked up that refreshes the graph data ever 10000 entries.
    if(cpuData[0].length > 40) {
      let _cpuData = [];
      //let p = graphics.cpuChart.series.active;
      for(let i = 0, l = cpuData.length; i < l; ++i) {
        _cpuData[i] = [cpuData[i][cpuData[i].length-1]];
      }
      cpuData = graphics.cpuChart.cpuData = _cpuData;
      //series = [];
      lC.miner._threads.forEach((_, i) => series.push({ name: 'Thread ' + i, color: palette.color(), data: cpuData[i] }));
      graph.series = [];
      //series.active = p;
      $('.annotation_line').remove();
      $('.annotation').remove();
      graph.update()
    }
    for(let i = 0, l = cpuData.length; i < l; ++i) {
      if(lC.miner._threads[i]) {
//debugger;//
console.log("Adding")
debugger;
        cpuData[i] = cpuData[i] || [];
        cpuData[i].push({ x: time, y: lC.miner._threads[i].hashesPerSecond })
debugger;
      } else { 
        cpuData[i].push({x: time, y: 0 })
      }
    }
    $('#hps').text(lC.miner.getHashesPerSecond().toFixed(2));
    $('#hashes').text(lC.miner.getTotalHashes());

    if($(window).innerHeight() > 600) document.getElementById("chart_container").style.visibility = ''
    //else console.log($(window).innerHeight())
    //$('#loading-container').remove();
    //if(!lC.username.slice(0, 5) === 'Guest') { // && needsLoginButton) {
      //delete lC.needsLoginButton;
    //  $('#main-container').append('<a href="" class="login-button" data-toggle="modal" data-target=".login-modal-sm" onclick="event.preventDefault()"><p class="login-text">Log In (Free!)</p></a>')
    //}
    graph.update()
  }, 2500)
}




*/
//  Object.assign(graph, new Rickshaw.Graph({ 
//    element: document.getElementById("chart"),
//    width: 500, height: 150, renderer: 'stack', stroke: true,
//    series: series
//  }));



//const seriesData = [];
//const cpuData = [];

//function loadHpsChart() {

/*
var i = 0, l = lC.miner.lC.getNumThreads();
do {
  cpuData[i] = [ {x: 0, y: 0 } ];
  seriesData.push({ name: 'Thread ' + i, color: palette.color(), data: cpuData[i] });
} while(++i < l);
*/


/*
var palette = new Rickshaw.Color.Palette({scheme: 'spectrum2000'});

var i = 0, l = 10;
do {
  cpuData[i] = [ {x: Date.now(), y: i } ];
  seriesData.push({ name: 'Thread #', color: palette.color(), data: cpuData[i] });
} while(++i < l);




// instantiate our graph!

var graph = graph = new Rickshaw.Graph( {
	element: document.getElementById("chart"),
	width: 500,
	height: 150,
	renderer: 'stack',
	stroke: true,
	series: seriesData,
});

graph.render();

var preview = new Rickshaw.Graph.RangeSlider( {
	graph: graph,
	element: document.getElementById('preview'),
} );

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
	graph: graph,
	xFormatter: function(x) {
		return new Date(x * 1000).toString();
	}
});

var annotator = new Rickshaw.Graph.Annotate( {
	graph: graph,
	element: document.getElementById('timeline')
});

var legend = new Rickshaw.Graph.Legend( {
	graph: graph,
	element: document.getElementById('legend')

});

var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
	graph: graph,
	legend: legend
});

var order = new Rickshaw.Graph.Behavior.Series.Order( {
	graph: graph,
	legend: legend
});

var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
	graph: graph,
	legend: legend
});

var smoother = new Rickshaw.Graph.Smoother( {
	graph: graph,
	element: document.querySelector('#smoother')
});

var ticksTreatment = 'glow';

var xAxis = new Rickshaw.Graph.Axis.Time( {
	graph: graph,
	ticksTreatment: ticksTreatment,
	timeFixture: new Rickshaw.Fixtures.Time.Local()
});

xAxis.render();

var yAxis = new Rickshaw.Graph.Axis.Y( {
	graph: graph,
	tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
	ticksTreatment: ticksTreatment
});

yAxis.render();


var controls = new RenderControls( {
	element: document.querySelector('form'),
	graph: graph
});

// add some data every so often

var messages = [];

var fixtures = new Rickshaw.Fixtures.RandomData(150);

setInterval( function() {
	fixtures.removeData(seriesData);
	fixtures.addData(seriesData);
	graph.update();

}, 3000 );

function addAnnotation(force) {
	if (messages.length > 0 && (force || Math.random() >= 0.95)) {
		annotator.add(seriesData[2][seriesData[2].length-1].x, messages.shift());
		annotator.update();
	}
}

var previewXAxis = new Rickshaw.Graph.Axis.Time({
	graph: preview.previews[0],
	timeFixture: new Rickshaw.Fixtures.Time.Local(),
	ticksTreatment: ticksTreatment
});

previewXAxis.render();
*/


var seriesData = [ [], [], [], [], [], [], [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);

for (var i = 0; i < 150; i++) {
	random.addData(seriesData);
}

var palette = new Rickshaw.Color.Palette( { scheme: 'classic9' } );

// instantiate our graph!

var graph = new Rickshaw.Graph( {
	element: document.getElementById("chart"),
	width: 900,
	height: 500,
	renderer: 'area',
	stroke: true,
	preserve: true,
	series: [
		{
			color: palette.color(),
			data: seriesData[0],
			name: 'Moscow'
		}, {
			color: palette.color(),
			data: seriesData[1],
			name: 'Shanghai'
		}, {
			color: palette.color(),
			data: seriesData[2],
			name: 'Amsterdam'
		}, {
			color: palette.color(),
			data: seriesData[3],
			name: 'Paris'
		}, {
			color: palette.color(),
			data: seriesData[4],
			name: 'Tokyo'
		}, {
			color: palette.color(),
			data: seriesData[5],
			name: 'London'
		}, {
			color: palette.color(),
			data: seriesData[6],
			name: 'New York'
		}
	]
} );

graph.render();

var preview = new Rickshaw.Graph.RangeSlider( {
	graph: graph,
	element: document.getElementById('preview'),
} );

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
	graph: graph,
	xFormatter: function(x) {
		return new Date(x * 1000).toString();
	}
} );

var annotator = new Rickshaw.Graph.Annotate( {
	graph: graph,
	element: document.getElementById('timeline')
} );

var legend = new Rickshaw.Graph.Legend( {
	graph: graph,
	element: document.getElementById('legend')

} );

var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
	graph: graph,
	legend: legend
} );

var order = new Rickshaw.Graph.Behavior.Series.Order( {
	graph: graph,
	legend: legend
} );

var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
	graph: graph,
	legend: legend
} );

var smoother = new Rickshaw.Graph.Smoother( {
	graph: graph,
	element: document.querySelector('#smoother')
} );

var ticksTreatment = 'glow';

var xAxis = new Rickshaw.Graph.Axis.Time( {
	graph: graph,
	ticksTreatment: ticksTreatment,
	timeFixture: new Rickshaw.Fixtures.Time.Local()
} );

xAxis.render();

var yAxis = new Rickshaw.Graph.Axis.Y( {
	graph: graph,
	tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
	ticksTreatment: ticksTreatment
} );

yAxis.render();


var controls = new RenderControls( {
	element: document.querySelector('form'),
	graph: graph
} );

// add some data every so often

var messages = [
	"Changed home page welcome message",
	"Minified JS and CSS",
	"Changed button color from blue to green",
	"Refactored SQL query to use indexed columns",
	"Added additional logging for debugging",
	"Fixed typo",
	"Rewrite conditional logic for clarity",
	"Added documentation for new methods"
];

setInterval( function() {
	random.removeData(seriesData);
	random.addData(seriesData);
	graph.update();

}, 3000 );

function addAnnotation(force) {
	if (messages.length > 0 && (force || Math.random() >= 0.95)) {
		annotator.add(seriesData[2][seriesData[2].length-1].x, messages.shift());
		annotator.update();
	}
}

addAnnotation(true);
setTimeout( function() { setInterval( addAnnotation, 6000 ) }, 6000 );

var previewXAxis = new Rickshaw.Graph.Axis.Time({
	graph: preview.previews[0],
	timeFixture: new Rickshaw.Fixtures.Time.Local(),
	ticksTreatment: ticksTreatment
});

previewXAxis.render();