solardash/root/js/solardash.base.js

Highcharts.setOptions({
	time: {
		timezone: 'America/Los_Angeles',
	},
	lang: {
		thousandsSep: ',',
	},
});

socket.onopen = function() {
	// connected
}

var msgNumbs = {
	p: "#production",
	ng: "#netgrid",
	c: "#consumption",
};

function netgridcolor(v) {
	if (v <= 0)
		return "#00ff00";
	else
		return "#ff0000";
}

function afterSetExtremes(e) {
	// hack to deal w/ HighStocks being stupid
	if (Date.now() - solarchart.sd_lastwindata < 500) {
		// Make sure we trigger again, and that the user doesn't
		// have to wait too long
		solarchart.sd_lastwindata = Date.now() - 500;
		return;
	}
	solarchart.showLoading('Loading data from server...');
	console.log(e)
	socket.send('win ' + Math.round(e.min).toString() + ' ' + Math.round(e.max).toString());
}

socket.onmessage = function(m) {
	var msg = m.data.split(" ");
	if (msg[0] in msgNumbs) {
		// simple update values
		var num = parseFloat(msg[1]);
		var targ = $(msgNumbs[msg[0]]);
		targ.text(num.toString());

		// update color for ng
		if (msg[0] == "ng") {
			$(".gridpower").css('background', netgridcolor(num));
		}
	} else if (msg[0] == 'o') {
		// received overview data
		var data = JSON.parse(msg[1]);
		console.log(solarchart);
		solarchart.navigator.series[consumIdx].setData(data.consumption, false);
		solarchart.navigator.series[gridIdx].setData(data.grid, false);
		solarchart.navigator.series[prodIdx].setData(data.production, false);
		solarchart.redraw();
	} else if (msg[0] == 'windata') {
		var data = JSON.parse(msg[1]);
		console.log(data);
		solarchart.sd_lastwindata = Date.now();
		solarchart.series[consumDataIdx].setData(data.consumption, false);
		solarchart.series[gridDataIdx].setData(data.grid, false);
		solarchart.series[prodDataIdx].setData(data.production, false);
		solarchart.redraw();
		solarchart.hideLoading()
	}
}

var solarchart = Highcharts.stockChart('solarchart', {
	chart: {
		zoomType: 'x'
	},
	title: {
		text: 'Panel Production'
	},
	subtitle: {
		text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
	},
	navigator: {
		adaptToUpdatedData: false, // XXX - keep?
		series: [
			{
				type: 'bar',
				name: 'consumptionNav',
				showInNavigator: true,
				data: [],
			},
			{
				type: 'bar',
				name: 'gridNav',
				showInNavigator: true,
				data: [],
			},
			{
				type: 'bar',
				name: 'productionNav',
				showInNavigator: true,
				data: [],
			},
		]
	},
	xAxis: {
		events: {
			afterSetExtremes: afterSetExtremes,
		},
		type: "datetime",
		title: {
			enabled: false,
		},
		ordinal: false,
	},
	yAxis: {
		title: {
			text: 'W',
		}
	},
	tooltip: {
		split: true,
		valueSuffix: ' W',
	},
	plotOptions: {
		area: {
			//stacking: 'normal',
			lineColor: '#666666',
			fillOpacity: .25,
			lineWidth: 1,
			marker: {
				lineWidth: 1,
				lineColor: '#666666'
			}
		}
	},
	series: [
		{
			name: 'consumption',
			type: 'line',
			data: [ ],
		},
		{
			name: 'grid',
			type: 'line',
			data: [ ],
		},
		{
			name: 'production',
			type: 'line',
			data: [ ],
		},
	]
});

// Indexes for chart series
delete solarchart.navigator.series[0];
for (var idx in solarchart.navigator.series) {
	if (solarchart.navigator.series[idx].name == 'consumptionNav')
		consumIdx = idx;
	else if (solarchart.navigator.series[idx].name == 'gridNav')
		gridIdx = idx;
	else if (solarchart.navigator.series[idx].name == 'productionNav')
		prodIdx = idx;
}
for (var idx in solarchart.series) {
	if (solarchart.series[idx].name == 'consumption')
		consumDataIdx = idx;
	else if (solarchart.series[idx].name == 'grid')
		gridDataIdx = idx;
	else if (solarchart.series[idx].name == 'production')
		prodDataIdx = idx;
}