main.js

/*
	Authors: Tristan Wright, July 2012, Lillian Gray 2017-2020
	This reads the json formatted data generated by data_gen.py
	the data is piped into the Google Charts API and a graph with controls are made

	If more buildings are added increment buildingNum and add
	a new color to buildingColors

	Benchmark functions or sections by wrapping them in:
	console.log(var a = new Date()-0)
	console.log(var b = new Date()-0 - a)
*/

//init globals

//adaptive screen height.
var graphHeight = Math.floor($(document).height() * .6)
$("#dashboard").css("height", graphHeight+75)

//chart data source is global so we don't have to reload every time.
var lineChartJSONData = jQuery.ajax({
	url: "raw_line_chart.txt", //location of data file
	dataType: "json",
	async: false
}).responseText

var lineChartData
var dashboard
var controlWrapper
var chartWrapper

const buildingNum = 8
var whichBuildings = new Array()
for(i=0; i < buildingNum; i++){
	whichBuildings[i] = true
}

//change colors here
var buildingColors = new Array( '#9c1c34', '#0A22af', '#ff381a','#00ff00', '#009944','#50D8F1','#e9af32', '#E07628') 

//Sets initial range of site to the last month
var today 	  = new Date((new Date).toDateString())
var endDate	  = new Date(today)
var startDate = new Date(today.setMonth(today.getMonth() - 1))

//for permalink parsing
var URLComponents = document.URL.split('?')
if(URLComponents.length==2){
	var permalinked = true
	var args = URLComponents[1]
	var argsArray = args.split("+")

	var startTemp = parseDate(argsArray[0])
	var endTemp = parseDate(argsArray[1])
	var whichArgs = parseInts(argsArray[2].split(""))

	for(i=0; i<whichArgs.length; i++){
		whichBuildings[whichArgs[i]] = !whichBuildings[whichArgs[i]]
	}

	if(startTemp < endTemp){
		var startDate = startTemp
		var endDate = endTemp
	}
}

function flipAndRedraw(which){
	whichBuildings[which] = !whichBuildings[which]
	if(which===0){
		//Adds or removes total options for chart
		handleTotalOptions(whichBuildings[0])
	}
	drawLineChart()
}

function handleTotalOptions(totalVisible){
	if(totalVisible===true){
		//adds options for separate series for total data
		chartWrapper.setOption('series',{0:{'targetAxisIndex': 1}})
		chartWrapper.setOption('vAxes', {1:{
			'title':'Total Campus Usage in Kilowatts',
			'titleColor':buildingColors[0],
			'textColor':buildingColors[0],
			'gridlines':{'color':'transparent'},
			'baselineColor':'transparent'
		}})
	}
	else{
		//removes options for total data
		chartWrapper.setOption('series',{})
	}
}

function drawLineChart(){
	// column 0 is date and should always be included
	var visibleColumns = [0]
	var visibleColors = []
	for(i=0;i<whichBuildings.length;i++){
		if(whichBuildings[i]){
			//since column 0 is date, column index is one greater for API
			visibleColumns.push(i+1)
			visibleColors.push(buildingColors[i])
		}
	}

	lineChartData.setColumns(visibleColumns)
	chartWrapper.setOption('colors', visibleColors)

	// Total is not displayed in controlWrapper if it is enabled
	if(whichBuildings[0]===true){
		controlWrapper.setOption('ui.chartOptions.colors', visibleColors.slice(1))
		//Control wrapper columns are based on indexes of chart columns, include every index but 1 for Total
		var controlWrapperColumns = [0]
		for(i=2; i<visibleColumns.length;i++){
			controlWrapperColumns.push(i)
		}
		controlWrapper.setOption('ui.chartView.columns', controlWrapperColumns)
	}
	else{
		controlWrapper.setOption('ui.chartOptions.colors', visibleColors)
		controlWrapper.setOption('ui.chartView.columns', null)
	}

	dashboard.draw(lineChartData)
}

function initializeLineChart(){
	lineChartData = new google.visualization.DataView(new google.visualization.DataTable(lineChartJSONData))
	dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'))

	//changes time range if most current data isn't available
	var latestEntryDate = new Date(lineChartData.getValue(lineChartData.getNumberOfRows()-1, 0))
	if(!permalinked && latestEntryDate!=endDate){
		endDate = new Date(latestEntryDate)
		startDate = new Date(latestEntryDate.setMonth(latestEntryDate.getMonth() - 1))
	}

	//settings for control bar below chart
	controlWrapper = new google.visualization.ControlWrapper({
		'controlType': 'ChartRangeFilter',
		'containerId': 'control',
		'options': {
			// Filter by the date axis.
			'filterColumnIndex': 0,
			'ui': {
				'chartType': 'LineChart',
				'chartOptions': {
                			'chartArea': {'width': '100%', 'height': 75},
                			'colors': buildingColors.slice(1),
                			'hAxis': {'baselineColor': 'none'}},
				//1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
				'minRangeSize': 86400000
			} //close ui
		}, // Initial range: (yyyy-mm-dd)
		'state': {'range': {'start': startDate, 'end': endDate}}
	})

	//chart settings
	chartWrapper = new google.visualization.ChartWrapper({
	   'chartType': 'LineChart',
	   'containerId': 'lineChart',
	   'options':{
			// Use the same chart area width as the control for axis alignment.
			'width': '100%','height': graphHeight,
			'fontName': 'Georgia',
			'vAxis': {'title': 'Individual Building Usage in Kilowatts'},
			'hAxis': {	
				'slantedText': true,
				'format': 'EEE MMM d, yyyy', //ICU Simple Date Format
				'textStyle': {'fontSize':14},
				'gridlines': {'count':0, 'color': '#fff'}},
			'colors': buildingColors,
			'legend': 'none'
		},//close options
	}) //close chart_wrapper

	//event handler saves date
	google.visualization.events.addListener(controlWrapper, 'statechange',
		function(){
			startDate = controlWrapper.getState().range.start
			endDate   = controlWrapper.getState().range.end
		}
	)

	dashboard.bind(controlWrapper, chartWrapper) //bind control to chart

	if(whichBuildings[0]===true){
		handleTotalOptions(whichBuildings[0])
	}
	drawLineChart()
}

function parseDate(urlArg){
	var dateArr = urlArg.split("-")
	//month is zero-indexed
	return new Date(parseInt(dateArr[0]), parseInt(dateArr[1]) - 1, parseInt(dateArr[2]))
}

function parseInts(strArray){
	var a = new Array()
	for(i=0; i < strArray.length; i++)
		a.push(parseInt(strArray[i]))
	return a
}

// Generating a permalink
function genPermalink(){
	//month is zero-indexed
	var startStr = startDate.getFullYear()+"-"+(startDate.getMonth() + 1)+"-"+startDate.getDate()
	var endStr = endDate.getFullYear()+"-"+(endDate.getMonth() + 1)+"-"+endDate.getDate()
	var disabledBuildings = ""
	for(i=0; i < buildingNum; i++){
		if(!whichBuildings[i])
		disabledBuildings += i
	}
	var permalink = URLComponents[0]+"?"+startStr+"+"+endStr+"+"+disabledBuildings

	//Copies permalink and puts permalink in text box next to the button
	var plinkTextField = document.getElementById('plink')
	plinkTextField.value = permalink
	plinkTextField.select()
	document.execCommand('copy')

	//Fades tooltip in and out
	var plinkButton = document.querySelector('.getPlink')
	plinkButton.classList.add('active')
	plinkButton.classList.remove('inactive')

	setTimeout(function(){
		plinkButton.classList.remove('active')
		setTimeout(function(){
			plinkButton.classList.add('inactive')
		}, 1000)
	}, 1000)
}

$('#csvDownload').click(function () {
	//prepares and then downloads a csv file based on what is currently shown in the chart

	//creates csvString using same visible data as chart
	var dataView = new google.visualization.DataView(lineChartData)
	var filteredRows = dataView.getFilteredRows([{column: 0, minValue: startDate, maxValue: endDate}])
	dataView.setRows(filteredRows)
	var csvString = google.visualization.dataTableToCsv(dataView)

	//generates header to append to beginning of csvString
	var csvHeader = ""
	for(i=0; i < lineChartData.getNumberOfColumns(); i++){
		csvHeader += lineChartData.getColumnLabel(i)
		csvHeader += ","
	}
	csvString = csvHeader + "\n" + csvString

	//downloads csv
	var encodedUri = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvString)
	this.href = encodedUri
	this.download = 'energy-monitoring-data.csv'
	this.target = '_blank'
})

function changeDashboard(button) {
	if(button=="about") {
		if(document.getElementById("aboutText").classList.toggle('displayNone')){
			document.getElementById("lineChart").classList.remove('displayNone')
			document.getElementById("control").classList.remove('displayNone')
			document.getElementById("aboutButton").innerHTML = "About"
		}
		else {
			document.getElementById("lineChart").classList.add('displayNone')
			document.getElementById("control").classList.add('displayNone')
			document.getElementById("howToUse").classList.add('displayNone')
			document.getElementById("aboutButton").innerHTML = "Back"
			document.getElementById("howToButton").innerHTML = "How To Use"
		}
	}
	else if(button=="howToUse") {
		if(document.getElementById("howToUse").classList.toggle('displayNone')){
            document.getElementById("lineChart").classList.remove('displayNone')
            document.getElementById("control").classList.remove('displayNone')
			document.getElementById("howToButton").innerHTML = "How To Use"
        }
        else {
            document.getElementById("lineChart").classList.add('displayNone')
            document.getElementById("control").classList.add('displayNone')
            document.getElementById("aboutText").classList.add('displayNone')
			document.getElementById("aboutButton").innerHTML = "About"
			document.getElementById("howToButton").innerHTML = "Back"
        }
	}
}