Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
E
eDisplay
Manage
Activity
Members
Labels
Plan
Wiki
Code
Merge requests
0
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Deploy
Releases
Package Registry
Operate
Terraform modules
Analyze
Value stream analytics
Contributor analytics
Repository analytics
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Green Science
eDisplay
Commits
207fba33
Commit
207fba33
authored
5 years ago
by
Lillian Gray
Browse files
Options
Downloads
Patches
Plain Diff
Reorganize function order and add comments #9
parent
7de75f0e
Branches
Branches containing commit
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
js/main.js
+110
-95
110 additions, 95 deletions
js/main.js
with
110 additions
and
95 deletions
js/main.js
+
110
−
95
View file @
207fba33
...
@@ -32,72 +32,16 @@ var buildingColors = new Array( '#9c1c34', '#0A22af', '#ff381a','#00ff00', '#009
...
@@ -32,72 +32,16 @@ var buildingColors = new Array( '#9c1c34', '#0A22af', '#ff381a','#00ff00', '#009
var
endDate
var
endDate
var
startDate
var
startDate
//split url on '?' for permalink creation and parsing
var
URLComponents
=
document
.
URL
.
split
(
'
?
'
)
var
URLComponents
=
document
.
URL
.
split
(
'
?
'
)
function
flipAndRedraw
(
which
){
/*called when GoogleAPI finishes loading in index.html
whichBuildings
[
which
]
=
!
whichBuildings
[
which
]
calls getData and then passes the data into initializeLineChart when finished*/
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
onAPILoad
(){
function
onAPILoad
(){
getData
().
done
(
initializeLineChart
)
getData
().
done
(
initializeLineChart
)
}
}
//fetches data for chart from text file generated by data_gen.py
function
getData
(){
function
getData
(){
return
$
.
ajax
({
return
$
.
ajax
({
url
:
"
raw_line_chart.txt
"
,
//location of data file
url
:
"
raw_line_chart.txt
"
,
//location of data file
...
@@ -105,6 +49,8 @@ function getData(){
...
@@ -105,6 +49,8 @@ function getData(){
})
})
}
}
/*creates chart with initial options
options that change such as visible columns are declared in drawLineChart*/
function
initializeLineChart
(
data
){
function
initializeLineChart
(
data
){
lineChartData
=
new
google
.
visualization
.
DataView
(
new
google
.
visualization
.
DataTable
(
data
))
lineChartData
=
new
google
.
visualization
.
DataView
(
new
google
.
visualization
.
DataTable
(
data
))
dashboard
=
new
google
.
visualization
.
Dashboard
(
document
.
getElementById
(
'
dashboard
'
))
dashboard
=
new
google
.
visualization
.
Dashboard
(
document
.
getElementById
(
'
dashboard
'
))
...
@@ -186,10 +132,109 @@ function initializeLineChart(data){
...
@@ -186,10 +132,109 @@ function initializeLineChart(data){
drawLineChart
()
drawLineChart
()
}
}
//hides loading icon, called once chart is ready
function
disableLoadingScreen
()
{
function
disableLoadingScreen
()
{
document
.
getElementById
(
"
spinner
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
spinner
"
).
classList
.
add
(
'
displayNone
'
)
}
}
//toggles if a building is shown in the chart and calls the chart to be redrawn
function
flipAndRedraw
(
which
){
whichBuildings
[
which
]
=
!
whichBuildings
[
which
]
if
(
which
===
0
){
//Adds or removes total options for chart
handleTotalOptions
(
whichBuildings
[
0
])
}
drawLineChart
()
}
//adds or removes options needed for Total which involves a second y-axis
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
'
,{})
}
}
//sets options for columns and colors in the chart and control bar and then draws the chart
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
)
}
//changes view within dashboard div between chart, how to use page, and about page
function
changeDashboard
(
button
)
{
if
(
button
==
"
close
"
){
document
.
getElementById
(
"
lineChart
"
).
classList
.
remove
(
'
displayNone
'
)
document
.
getElementById
(
"
control
"
).
classList
.
remove
(
'
displayNone
'
)
document
.
getElementById
(
"
howToUse
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
aboutText
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
closeButton
"
).
classList
.
add
(
'
displayNone
'
)
}
else
{
document
.
getElementById
(
"
lineChart
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
control
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
closeButton
"
).
classList
.
remove
(
'
displayNone
'
)
if
(
button
==
"
about
"
){
document
.
getElementById
(
"
howToUse
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
aboutText
"
).
classList
.
remove
(
'
displayNone
'
)
}
if
(
button
==
"
howToUse
"
){
document
.
getElementById
(
"
aboutText
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
howToUse
"
).
classList
.
remove
(
'
displayNone
'
)
}
}
}
//if user changes the window size the chart is redrawn to be the right size
$
(
window
).
resize
(
function
()
{
dashboard
.
draw
(
lineChartData
)
})
//called if series menu is clicked, toggles menu being shown
function
showSeriesOptions
(
el
)
{
el
.
nextElementSibling
.
classList
.
toggle
(
'
displayNone
'
)
}
//if site was loaded using a permalink, modifies startDate, endDate, and whichBuildings
function
parsePermalink
(){
function
parsePermalink
(){
permalinked
=
URLComponents
.
length
==
2
permalinked
=
URLComponents
.
length
==
2
if
(
permalinked
){
if
(
permalinked
){
...
@@ -208,12 +253,14 @@ function parsePermalink(){
...
@@ -208,12 +253,14 @@ function parsePermalink(){
}
}
}
}
//takes the date string from a permalink and returns them as a date object
function
parseDate
(
urlArg
){
function
parseDate
(
urlArg
){
var
dateArr
=
urlArg
.
split
(
"
-
"
)
var
dateArr
=
urlArg
.
split
(
"
-
"
)
//month is zero-indexed
//month is zero-indexed
return
new
Date
(
parseInt
(
dateArr
[
0
]),
parseInt
(
dateArr
[
1
])
-
1
,
parseInt
(
dateArr
[
2
]))
return
new
Date
(
parseInt
(
dateArr
[
0
]),
parseInt
(
dateArr
[
1
])
-
1
,
parseInt
(
dateArr
[
2
]))
}
}
//takes the string of integers from a permalink and returns them as an array of integers
function
parseInts
(
strArray
){
function
parseInts
(
strArray
){
var
a
=
new
Array
()
var
a
=
new
Array
()
for
(
i
=
0
;
i
<
strArray
.
length
;
i
++
)
for
(
i
=
0
;
i
<
strArray
.
length
;
i
++
)
...
@@ -221,7 +268,7 @@ function parseInts(strArray){
...
@@ -221,7 +268,7 @@ function parseInts(strArray){
return
a
return
a
}
}
//
G
eneratin
g
a
permalink
//
g
enerat
es a permal
in
k
a
nd copies it, called in index.html when the Get Permalink button is clicked
function
genPermalink
(){
function
genPermalink
(){
//month is zero-indexed
//month is zero-indexed
var
startStr
=
startDate
.
getFullYear
()
+
"
-
"
+
(
startDate
.
getMonth
()
+
1
)
+
"
-
"
+
startDate
.
getDate
()
var
startStr
=
startDate
.
getFullYear
()
+
"
-
"
+
(
startDate
.
getMonth
()
+
1
)
+
"
-
"
+
startDate
.
getDate
()
...
@@ -252,13 +299,8 @@ function genPermalink(){
...
@@ -252,13 +299,8 @@ function genPermalink(){
},
1000
)
},
1000
)
}
}
function
showSeriesOptions
(
el
)
{
//prepares and then downloads a csv file based on what is currently shown in the chart
el
.
nextElementSibling
.
classList
.
toggle
(
'
displayNone
'
)
}
function
downloadCSV
(
el
)
{
function
downloadCSV
(
el
)
{
//prepares and then downloads a csv file based on what is currently shown in the chart
//creates csvString using same visible data as chart
//creates csvString using same visible data as chart
var
dataView
=
new
google
.
visualization
.
DataView
(
lineChartData
)
var
dataView
=
new
google
.
visualization
.
DataView
(
lineChartData
)
var
filteredRows
=
dataView
.
getFilteredRows
([{
column
:
0
,
minValue
:
startDate
,
maxValue
:
endDate
}])
var
filteredRows
=
dataView
.
getFilteredRows
([{
column
:
0
,
minValue
:
startDate
,
maxValue
:
endDate
}])
...
@@ -278,31 +320,4 @@ function downloadCSV(el) {
...
@@ -278,31 +320,4 @@ function downloadCSV(el) {
el
.
href
=
encodedUri
el
.
href
=
encodedUri
el
.
download
=
'
energy-monitoring-data.csv
'
el
.
download
=
'
energy-monitoring-data.csv
'
el
.
target
=
'
_blank
'
el
.
target
=
'
_blank
'
}
}
\ No newline at end of file
function
changeDashboard
(
button
)
{
if
(
button
==
"
close
"
){
document
.
getElementById
(
"
lineChart
"
).
classList
.
remove
(
'
displayNone
'
)
document
.
getElementById
(
"
control
"
).
classList
.
remove
(
'
displayNone
'
)
document
.
getElementById
(
"
howToUse
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
aboutText
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
closeButton
"
).
classList
.
add
(
'
displayNone
'
)
}
else
{
document
.
getElementById
(
"
lineChart
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
control
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
closeButton
"
).
classList
.
remove
(
'
displayNone
'
)
if
(
button
==
"
about
"
){
document
.
getElementById
(
"
howToUse
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
aboutText
"
).
classList
.
remove
(
'
displayNone
'
)
}
if
(
button
==
"
howToUse
"
){
document
.
getElementById
(
"
aboutText
"
).
classList
.
add
(
'
displayNone
'
)
document
.
getElementById
(
"
howToUse
"
).
classList
.
remove
(
'
displayNone
'
)
}
}
}
$
(
window
).
resize
(
function
()
{
dashboard
.
draw
(
lineChartData
)
})
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Preview
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment