Energy Dashboard
Jul 13, 2018
- 1 Create Your Own
- 1.1 Ractive
- 1.2 Tagging
- 1.3 Program
- 1.3.1 Compare Cost of Kw per Sqft.
- 1.3.2 Current Site
- 1.3.3 Building kW Peak
- 1.3.4 Gauges
- 1.3.5 AM Chart
Create Your Own
This dashboard is made up of 6 different Ractive components. I set my background to 1280X1050.
Ractive
Drag out Ractive from components on the left side menu
Under Properties, click Ractive editor, then open editor
Copy and paste the code below for template, model, style, and init, into the corresponding tabs for each component
Tagging
Click the tag icon and type in the name of the tag to apply it on your component
Program
Go to programs in the left menu
Click the plus to add a new program, and it will pull up the program editor
In the Program Target Filter type the name of the tag applied to the correcponding Ractive model
Click the three dots in the top right corner, and select variables
Click the gear that appears as you haver over "this"
Turn on Invokes the Function
Change the dropdown to Custom Event
In the textbox below the dropdown type obtainData
Click the gray Save button
Copy and paste the code below into the main section and click the blue save
Compare Cost of Kw per Sqft.
Template
<div class="s-box">
<span class="titleText">Compare Cost of Kwh per Sqft.</span>
<div style="width:100%;">
<center>
<div class="s-bar" style="background-color:none;"><b>Compare:</b>
<div class="dropDownDiv">
<select class="drop" value={{selected}} on-change="foldUpdate">
<option>Select...</option>
{{#myPoints}}
<option value="{{siteRef}}">{{dis}}</option>
{{/myPoints}}
</select>
</div>
<div class="dropDownDiv">
<select class="drop" value={{selected2}} on-change="foldUpdate2">
<option>Select...</option>
{{#myPoints}}
<option value="{{siteRef}}">{{dis}}</option>
{{/myPoints}}
</select>
</div>
</div>
<div class="s-bar3" style="background-color:#6cc487; color:#fff;"><b>Current:</b>
<div class="whiteBox">{{#curentData}}${{curentData.toFixed(2)}}{{/curentData}}</div>
<div class="whiteBox">{{#curentData2}}${{curentData2.toFixed(2)}}{{/curentData2}}</div>
</div>
<div class="s-bar3" style="background-color:#8c68b2; color:#fff;"><b>Last:</b>
<div class="whiteBox">{{#lastData}}${{lastData.toFixed(2)}}{{/lastData}}</div>
<div class="whiteBox">{{#lastData2}}${{lastData2.toFixed(2)}}{{/lastData2}}</div>
</div>
<div class="buttonBar">
<div class="s-button selected" id="day" on-click="day">Day</div>
<div class="s-button" id="week" on-click="week">Week</div>
<div class="s-button" id="month" on-click="month">Month</div>
<div class="s-button" id="year" on-click="year">Year</div>
</div>
</center>
</div>
</div>
Model
{
data:
{
myPoints:[],
curentData:[],
lastData:[],
curentData2:[],
lastData2:[]
}
}Style
.titleText{
font-weight: bold;
font-size: 20px;
}
.s-box{
padding: 10px;
background-color: #fafafa;
border-radius: 5px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.selected{
background-color: #7093c1;
}
.drop{
width:100%;
height: 30px;
margin-top: 5px;
}
.s-bar3{
margin-top:15px;
height:50px;
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow:1;
justify-content: flex-end;
align-items: center;
border-radius: 5px;
}
.s-bar{
margin-top:15px;
height:50px;
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow:1;
justify-content: flex-end;
align-items: center;
border-radius: 5px;
}
.whiteBox{
width: 40%;
height: 40px;
margin-right: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #fefefe;
color: #000;
font-size: 18px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.dropDownDiv{
width: 40%;
height: 30px;
margin-right: 5px;
margin-left: 5px;
border-radius: 5px;
color: #000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.buttonBar{
width:100%;
height:40px;
margin-top:15px;
border-radius: 5px;
background-color: #4f7ab3;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.s-button{
color:#fff;
border-radius: 5px;
width:100%;
height: 100%;
font-weight: bold;
padding: 10px 15px 10px 15px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}Init
this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
var myTarget = model.queryAll('targetPoint');
var datePick = "today";
var datePick2 = "yesterday";
model.on('foldUpdate', function(event) {
var point = model.get("curentData");
var points = model.get("lastData");
var selected = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice1 = data.result.toObj()[0].curVal;
var curentData = (firstCurrentPoint[0].v0 * costPrice1);
model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice2 = data.result.toObj()[0].curVal;
var lastData = (firstLastPoint[0].v0 * costPrice2);
model.set('lastData', lastData);
});
});
}, 200);
});
model.on('foldUpdate2', function(event) {
var point2 = model.get("curentData2");
var point3 = model.get("lastData2");
var selected2 = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice3 = data.result.toObj()[0].curVal;
var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
model.set('curentData2', curentData2);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice4 = data.result.toObj()[0].curVal;
var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
model.set('lastData2', lastData2);
});
});
}, 200);
});
this.ractive.on("day", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var dayID = template.view.querySelector("#day");
var weekID = template.view.querySelector("#week");
var monthID = template.view.querySelector("#month");
var yearID = template.view.querySelector("#year");
dayID.style.backgroundColor = "#7093c1";
weekID.style.backgroundColor = "#4f7ab3";
monthID.style.backgroundColor = "#4f7ab3";
yearID.style.backgroundColor = "#4f7ab3";
});
datePick = "today";
datePick2 = "yesterday";
var point = model.get("curentData");
var selected = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice1 = data.result.toObj()[0].curVal;
var curentData = (firstCurrentPoint[0].v0 * costPrice1);
model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice2 = data.result.toObj()[0].curVal;
var lastData = (firstLastPoint[0].v0 * costPrice2);
model.set('lastData', lastData);
});
});
}, 200);
var point2 = model.get("curentData2");
var selected2 = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice3 = data.result.toObj()[0].curVal;
var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
model.set('curentData2', curentData2);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice4 = data.result.toObj()[0].curVal;
var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
model.set('lastData2', lastData2);
});
});
}, 200);
});
this.ractive.on("week", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var dayID = template.view.querySelector("#day");
var weekID = template.view.querySelector("#week");
var monthID = template.view.querySelector("#month");
var yearID = template.view.querySelector("#year");
weekID.style.backgroundColor = "#7093c1";
dayID.style.backgroundColor = "#4f7ab3";
monthID.style.backgroundColor = "#4f7ab3";
yearID.style.backgroundColor = "#4f7ab3";
});
datePick = "thisWeek";
datePick2 = "lastWeek";
var point = model.get("curentData");
var selected = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice1 = data.result.toObj()[0].curVal;
var curentData = (firstCurrentPoint[0].v0 * costPrice1);
model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice2 = data.result.toObj()[0].curVal;
var lastData = (firstLastPoint[0].v0 * costPrice2);
model.set('lastData', lastData);
});
});
}, 200);
var point2 = model.get("curentData2");
var selected2 = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice3 = data.result.toObj()[0].curVal;
var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
model.set('curentData2', curentData2);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice4 = data.result.toObj()[0].curVal;
var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
model.set('lastData2', lastData2);
});
});
}, 200);
});
this.ractive.on("month", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var dayID = template.view.querySelector("#day");
var weekID = template.view.querySelector("#week");
var monthID = template.view.querySelector("#month");
var yearID = template.view.querySelector("#year");
monthID.style.backgroundColor = "#7093c1";
weekID.style.backgroundColor = "#4f7ab3";
dayID.style.backgroundColor = "#4f7ab3";
yearID.style.backgroundColor = "#4f7ab3";
});
datePick = "thisMonth";
datePick2 = "lastMonth";
var point = model.get("curentData");
var selected = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice1 = data.result.toObj()[0].curVal;
var curentData = (firstCurrentPoint[0].v0 * costPrice1);
model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice2 = data.result.toObj()[0].curVal;
var lastData = (firstLastPoint[0].v0 * costPrice2);
model.set('lastData', lastData);
});
});
}, 200);
var point2 = model.get("curentData2");
var selected2 = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice3 = data.result.toObj()[0].curVal;
var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
model.set('curentData2', curentData2);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice4 = data.result.toObj()[0].curVal;
var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
model.set('lastData2', lastData2);
});
});
}, 200);
});
this.ractive.on("year", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var dayID = template.view.querySelector("#day");
var weekID = template.view.querySelector("#week");
var monthID = template.view.querySelector("#month");
var yearID = template.view.querySelector("#year");
yearID.style.backgroundColor = "#7093c1";
weekID.style.backgroundColor = "#4f7ab3";
monthID.style.backgroundColor = "#4f7ab3";
dayID.style.backgroundColor = "#4f7ab3";
});
datePick = "thisYear";
datePick2 = "lastYear";
var point = model.get("curentData");
var selected = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice1 = data.result.toObj()[0].curVal;
var curentData = (firstCurrentPoint[0].v0 * costPrice1);
model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
var costPrice2 = data.result.toObj()[0].curVal;
var lastData = (firstLastPoint[0].v0 * costPrice2);
model.set('lastData', lastData);
});
});
}, 200);
var point2 = model.get("curentData2");
var selected2 = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstCurrentPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice3 = data.result.toObj()[0].curVal;
var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
model.set('curentData2', curentData2);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
var firstLastPoint2 = data.result.toObj();
finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
var costPrice4 = data.result.toObj()[0].curVal;
var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
model.set('lastData2', lastData2);
});
});
}, 200);
});Program
var template = this;
var myTarget = query('targetPoint');
finstack.eval('readAll(meter).sort("navName")', function(data){
template.myPoints=data.result.toObj();
});Current Site
Template
<div class="s-boxTop">
<div class="s-horizontal">
<div class="s-vertical">
<select class="drop" value={{selected}} on-change="foldUpdate">
<option>Select...</option>
{{#myPoints}}
<option value="{{id}}">{{dis}}</option>
{{/myPoints}}
</select>
<div class="tempBar"> High:<div class="s-whiteBox">{{#highLow}}{{weatherHigh}}{{weatherHighUnit}}{{/highLow}}</div></div>
<div class="tempBar"> Low:<div class="s-whiteBox">{{#highLow}}{{weatherLow}}{{weatherLowUnit}}{{/highLow}}</div></div>
</div>
<div class="s-vertical">
<center>
{{#picId}}<img src='/api/demo/rec/{{picId}}/file' height="60px" width="60px">{{/picId}}
{{#highLow}}
<div class="s-temp">
{{weatherTemp}}{{weatherTempUnit}}
</div>
<div style="font-size: 12px;">Current Temp</div>
{{/highLow}}
</center>
</div>
</div>
</div>
<div class="s-gap"></div>
<div class="s-boxBottom">
<div class="titleText tooltip">Degree Days
<span class="tooltiptext">Degree Days ...</span>
</div>
<div class="degree">
<div class="blue">33.5ºdaysF</div>
<div class="red">0.0ºdaysF</div>
</div>
<div class="degreeBar">
<div class="s-degreeButton selected" id="current" on-click="current">Current Year</div>
<div class="s-degreeButton" id="last" on-click="last">Last Year</div>
</div>
</div>Model
{
data:
{
myPoints:[],
highLow: [],
picId: []
}
}Style
.titleText{
font-weight: bold;
font-size: 20px;
}
.s-boxTop{
padding: 10px;
background-color: #fafafa;
border-radius: 5px;
width: 100%;
height: 145px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.s-gap{
width: 100%;
height: 15px;
}
.s-boxBottom{
padding: 10px;
background-color: #fafafa;
border-radius: 5px;
width: 100%;
height: 145px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.s-horizontal{
width: 100%;
display: flex;
flex-direction: row;
}
.tempBar{
background-color:#7093c1;
border-radius:5px;
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin-top:7px;
color: #fff;
}
.s-vertical{
width:50%;
display: flex;
flex-direction: column;
}
.s-temp{
font-size: 30px;
}
.s-whiteBox{
width: 250px;
height: 30px;
margin-left: 8px;
margin-right: 5px;
border-radius: 5px;
background-color: #fefefe;
color: #000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.titleText{
font-weight: bold;
font-size: 20px;
}
.s-box{
padding: 10px;
background-color: #fafafa;
border-radius: 5px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.selected{
background-color: #7093c1;
}
.degree{
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.blue{
background-color: #7093c1;
width:45%;
height: 40px;
border-radius: 5px;
margin: 3px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
color: #fff;
}
.red{
background-color: #be1e2d;
width:45%;
height: 40px;
border-radius: 5px;
margin: 3px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
color: #fff;
}
.degreeBar{
width: 100%;
height:40px;
margin-top:5px;
border-radius: 5px;
background-color: #4f7ab3;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.s-degreeButton{
color:#fff;
border-radius: 5px;
width:100%;
height: 100%;
font-weight: bold;
padding: 10px 5px 10px 5px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: black;
opacity: 0.7;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 16px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -100px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}Init
this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
this.ractive.on("current", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var currentID = template.view.querySelector("#current");
var lastID = template.view.querySelector("#last");
currentID.style.backgroundColor = "#7093c1";
lastID.style.backgroundColor = "#4f7ab3";
});
var selected = model.get("selected");
setTimeout(function() {
finstack.eval('read(id=='+selected+').degreeDays(thisYear).hisRollup(sum, 1yr)', function(data){
var degree = data.result.toObj();
model.set('degree', degree);
});
}, 200);
});
this.ractive.on("last", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var currentID = template.view.querySelector("#current");
var lastID = template.view.querySelector("#last");
lastID.style.backgroundColor = "#7093c1";
currentID.style.backgroundColor = "#4f7ab3";
});
var selected = model.get("selected");
setTimeout(function() {
finstack.eval('read(id=='+selected+').degreeDays(lastYear).hisRollup(sum, 1yr)', function(data){
var degree = data.result.toObj();
model.set('degree', degree);
});
}, 200);
});
model.on('foldUpdate', function(event) {
var selected = model.get("selected");
setTimeout(function() {
finstack.eval('readAll(id=='+selected+')', function(data){
var highLow = data.result.toObj();
var pic = highLow[0].imageRef;
var picId = pic.substr(1);
model.set('highLow', highLow);
model.set('picId', picId);
});
}, 200);
});Program
var template = this;
finstack.eval('readAll(site)', function(data){
template.myPoints=data.result.toObj();
});Building kW Peak
Template
<div class="s-box">
<span class="titleText">Building Kw Peak</span>
<div style="width:100%;">
<center>
<select class="drop2" value={{selectedDrop}} on-change="foldUpdate">
<option>Select...</option>
{{#myPoints}}
<option value="{{siteRef}}">{{dis}}</option>
{{/myPoints}}
</select>
<div class="s-bar2" style="background-color:#6cc487;"><b>Current:</b>
<div class="whiteBox3">{{#currentData}}{{v0.toFixed(2)}}Kw<br>{{ts}}{{/currentData}}</div>
</div>
<div class="s-bar2" style="background-color:#8c68b2; color:#fff;"><b>Last:</b>
<div class="whiteBox3">{{#lastData}}{{v0.toFixed(2)}}Kw<br>{{ts}}{{/lastData}}</div>
</div>
<div class="buttonBar">
<div class="s-button selected" id="day2" on-click="day2">Day</div>
<div class="s-button" id="week2" on-click="week2">Week</div>
<div class="s-button" id="month2" on-click="month2">Month</div>
<div class="s-button" id="year2" on-click="year2">Year</div>
</div>
</center>
</div>
</div>Model
{
data:
{
myPoints:[],
currentData:[],
lastData:[]
}
}Style
.titleText{
font-weight: bold;
font-size: 20px;
}
.s-box{
padding: 10px;
background-color: #fafafa;
border-radius: 5px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.selected{
background-color: #7093c1;
}
.drop2{
width:100%;
margin-top: 35px;
}
.s-bar2{
margin-top:20px;
height:50px;
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow:1;
justify-content: flex-end;
align-items: center;
border-radius: 5px;
}
.whiteBox3{
width: 80%;
height: 40px;
margin-right: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #fefefe;
color: #000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.buttonBar{
width:100%;
height:40px;
margin-top:15px;
border-radius: 5px;
background-color: #4f7ab3;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.s-button{
color:#fff;
border-radius: 5px;
width:100%;
height: 100%;
font-weight: bold;
padding: 10px 15px 10px 15px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}Init
this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
var myTarget = model.queryAll('targetPoint');
var datePick = "today";
var datePick2 = "yesterday";
model.on('foldUpdate', function(event) {
var selectedDrop = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});
this.ractive.on("day2", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var dayID = template.view.querySelector("#day2");
var weekID = template.view.querySelector("#week2");
var monthID = template.view.querySelector("#month2");
var yearID = template.view.querySelector("#year2");
dayID.style.backgroundColor = "#7093c1";
weekID.style.backgroundColor = "#4f7ab3";
monthID.style.backgroundColor = "#4f7ab3";
yearID.style.backgroundColor = "#4f7ab3";
});
var datePick = "today";
var datePick2 = "yesterday";
var selectedDrop = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
console.log(currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});
this.ractive.on("week2", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var dayID = template.view.querySelector("#day2");
var weekID = template.view.querySelector("#week2");
var monthID = template.view.querySelector("#month2");
var yearID = template.view.querySelector("#year2");
weekID.style.backgroundColor = "#7093c1";
dayID.style.backgroundColor = "#4f7ab3";
monthID.style.backgroundColor = "#4f7ab3";
yearID.style.backgroundColor = "#4f7ab3";
});
datePick = "thisWeek";
datePick2 = "lastWeek";
var selectedDrop = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});
this.ractive.on("month2", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var dayID = template.view.querySelector("#day2");
var weekID = template.view.querySelector("#week2");
var monthID = template.view.querySelector("#month2");
var yearID = template.view.querySelector("#year2");
monthID.style.backgroundColor = "#7093c1";
weekID.style.backgroundColor = "#4f7ab3";
dayID.style.backgroundColor = "#4f7ab3";
yearID.style.backgroundColor = "#4f7ab3";
});
datePick = "thisMonth";
datePick2 = "lastMonth";
var selectedDrop = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});
this.ractive.on("year2", function(event) {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var dayID = template.view.querySelector("#day2");
var weekID = template.view.querySelector("#week2");
var monthID = template.view.querySelector("#month2");
var yearID = template.view.querySelector("#year2");
yearID.style.backgroundColor = "#7093c1";
weekID.style.backgroundColor = "#4f7ab3";
monthID.style.backgroundColor = "#4f7ab3";
dayID.style.backgroundColor = "#4f7ab3";
});
datePick = "thisYear";
datePick2 = "lastYear";
var selectedDrop = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});Program
var template = this;
var myTarget = query('targetPoint');
finstack.eval('readAll(meter)', function(data){
template.myPoints=data.result.toObj();
});Gauges
Template
<div class="s-box">
<div class="horizontal">
<select class="s-dropDown" value={{selected}} on-change="foldUpdate">
{{#drop}}
<option value={{id}}>{{dis}}</option>
{{/drop}}
</select>
<select class="s-dropDown2 mnl" value={{selected2}} on-change="foldUpdate">
{{#drop2}}
<option value={{id}}>{{navName}}</option>
{{/drop2}}
</select>
</div>
<div class="rowSVG">
{{#myPoints.0}}
<svg class="s-heightSVG" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.9 78.51">
<title>phaseA</title>
<path d="M70.4,126a1,1,0,0,0,1-1,23,23,0,0,1,46,0,1,1,0,0,0,1,1h25a1,1,0,0,0,1-1,50,50,0,0,0-100,0,1,1,0,0,0,1,1Z" transform="translate(-32.52 -61.49)" style="fill: rgb(127, 127, 127);"></path>
<text transform="translate(48.87 6.64)" style="font-size: 8px; font-family: SourceSansPro-Regular, "Source Sans Pro";">Phase A</text>
<text transform="translate(10 66.76)" style="font-size:8px; font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="end">{{min}}</text>
<text transform="translate(114 66.76)" style="font-size:8px;font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="start">{{max}}</text>
<circle cx="61.85" cy="64.51" r="14" style="fill: rgb(86, 140, 189);"></circle>
<path d="M57.9,59.10l3.06-33.91a.94.94,0,0,1,1.88,0l3.06,33.91Z" transform="rotate({{rotateVal}} 61.85,64.51)" style="fill:#568cbd" />
<text transform="translate(62 67.76)" style="text-anchor: middle; font-size: 6px; fill: rgb(255, 255, 255); font-family: SourceSansPro-Light;Source Sans Pro;">{{curVal.toFixed(1)}}</text>
</svg>
{{/myPoints.0}}
{{#myPoints.1}}
<svg class="s-heightSVG" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.9 78.51">
<title>phaseB</title>
<path d="M70.4,126a1,1,0,0,0,1-1,23,23,0,0,1,46,0,1,1,0,0,0,1,1h25a1,1,0,0,0,1-1,50,50,0,0,0-100,0,1,1,0,0,0,1,1Z" transform="translate(-32.52 -61.49)" style="fill: rgb(127, 127, 127);"></path>
<text transform="translate(48.87 6.64)" style="font-size: 8px; font-family: SourceSansPro-Regular, "Source Sans Pro";">Phase B</text>
<text transform="translate(10 66.76)" style="font-size:8px; font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="end">{{min}}</text>
<text transform="translate(114 66.76)" style="font-size:8px;font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="start">{{max}}</text>
<circle cx="61.85" cy="64.51" r="14" style="fill: rgb(86, 140, 189);"></circle>
<path d="M57.9,59.10l3.06-33.91a.94.94,0,0,1,1.88,0l3.06,33.91Z" transform="rotate({{rotateVal}} 61.85,64.51)" style="fill:#568cbd" />
<text transform="translate(62 67.76)" style="text-anchor: middle; font-size: 6px; fill: rgb(255, 255, 255); font-family: SourceSansPro-Light;Source Sans Pro;">{{curVal.toFixed(1)}}</text>
</svg>
{{/myPoints.1}}
{{#myPoints.2}}
<svg class="s-heightSVG" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.9 78.51">
<title>phaseC</title>
<path d="M70.4,126a1,1,0,0,0,1-1,23,23,0,0,1,46,0,1,1,0,0,0,1,1h25a1,1,0,0,0,1-1,50,50,0,0,0-100,0,1,1,0,0,0,1,1Z" transform="translate(-32.52 -61.49)" style="fill: rgb(127, 127, 127);"></path>
<text transform="translate(48.87 6.64)" style="font-size: 8px; font-family: SourceSansPro-Regular, "Source Sans Pro";">Phase C</text>
<text transform="translate(10 66.76)" style="font-size:8px; font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="end">{{min}}</text>
<text transform="translate(114 66.76)" style="font-size:8px;font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="start">{{max}}</text>
<circle cx="61.85" cy="64.51" r="14" style="fill: rgb(86, 140, 189);"></circle>
<path d="M57.9,59.10l3.06-33.91a.94.94,0,0,1,1.88,0l3.06,33.91Z" transform="rotate({{rotateVal}} 61.85,64.51)" style="fill:#568cbd" />
<text transform="translate(62 67.76)" style="text-anchor: middle; font-size: 6px; fill: rgb(255, 255, 255); font-family: SourceSansPro-Light;Source Sans Pro;">{{curVal.toFixed(1)}}</text>
</svg>
{{/myPoints.2}}
</div>
<div class="buttonBarGauge">
<div class="s-button selected" id="kw" on-click="kw">Kw</div>
<div class="s-button" id="kva" on-click="kva">Kva</div>
<div class="s-button" id="kvar" on-click="kvar">Kvar</div>
<div class="s-button" id="current" on-click="current">Current</div>
<div class="s-button" id="pf" on-click="pf">Pf</div>
</div>
</div>