/
Energy Dashboard
Energy Dashboard
Sarah Padilla (Unlicensed)
Owned by Sarah Padilla (Unlicensed)
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
Expand source
<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
Expand source
{
data:
{
myPoints:[],
curentData:[],
lastData:[],
curentData2:[],
lastData2:[]
}
}
Style
Expand source
.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
Expand source
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
Expand source
var template = this;
var myTarget = query('targetPoint');
finstack.eval('readAll(meter).sort("navName")', function(data){
template.myPoints=data.result.toObj();
});
Current Site
Template
Expand source
<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
Expand source
{
data:
{
myPoints:[],
highLow: [],
picId: []
}
}
Style
Expand source
.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
Expand source
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
Expand source
var template = this;
finstack.eval('readAll(site)', function(data){
template.myPoints=data.result.toObj();
});
Building kW Peak
Template
Expand source
<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
Expand source
{
data:
{
myPoints:[],
currentData:[],
lastData:[]
}
}
Style
Expand source
.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
Expand source
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
Expand source
var template = this;
var myTarget = query('targetPoint');
finstack.eval('readAll(meter)', function(data){
template.myPoints=data.result.toObj();
});
Gauges
Template
Expand source
<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>
Model
Expand source
{
data:
{
myPoints:[]
}
}
Style
Expand source
.s-box{
padding: 10px;
background-color: #fafafa;
border-radius: 5px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
.s-heightSVG{
height: 200px;
margin-right: 40px;
}
.rowSVG{
margin-top: 10px;
height: 184px;
display: flex;
flex-direction: row;
justify-content: center;
}
.selected{
background-color: #7093c1;
}
.buttonBarGauge{
width:100%;
height:40px;
margin-top:35px;
border-radius: 5px;
background-color: #4f7ab3;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
}
.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
Expand source
this.ractive.fire("obtainData"); var template = this; var model = this.ractive; var myTarget = model.queryAll('targetPoint'); model.on('foldUpdate', function(event) { var point = model.get("myPoints"); var selected = model.get("selected"); setTimeout(function() { finstack.eval('readAll(equip and meter and siteRef=='+ selected +')', function(data){ meter=data.result.toObj(); var newMeter = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { newMeter.push({ dis : p.dis, id : p.id, navName : p.navName }); }); template.newMeter=data.result.toObj(); model.set('drop2', template.newMeter); var point2 = model.get("drop2"); }); },200); var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#7093c1"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and power and cur and his and point and sensor and not apparent and not reactive and not powerTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 5000, -90, 90), min : 0, max : 5000 }); }); template.ractive.set({'myPoints':myPoints}); }); }); this.ractive.on("kw", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#7093c1"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and power and cur and his and point and sensor and not apparent and not reactive and not powerTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 5000, -90, 90), min : 0, max : 5000 }); }); template.ractive.set({'myPoints':myPoints}); }); }); this.ractive.on("kva", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#4f7ab3"; kvaID.style.backgroundColor = "#7093c1"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and power and cur and his and point and sensor and apparent and not reactive and not powerTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 2000, -90, 90), min : 0, max : 2000 }); }); model.set({'myPoints':myPoints}); }); }); this.ractive.on("kvar", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#4f7ab3"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#7093c1"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and power and cur and his and point and sensor and apparent and not reactive and not powerTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 2000, -90, 90), min : 0, max : 2000 }); }); model.set({'myPoints':myPoints}); }); }); this.ractive.on("current", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#4f7ab3"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#7093c1"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and cur and his and point and current and not currentAverage and not currentTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 2000, -90, 90), min : 0, max : 2000 }); }); model.set({'myPoints':myPoints}); }); }); this.ractive.on("pf", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#4f7ab3"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#7093c1"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and cur and his and point and pf and not powerFactorTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, -10, 10, -90, 90), min : -10, max : 10 }); }); model.set({'myPoints':myPoints}); }); });
Program
Expand source
var template = this;
var myTarget = query('targetPoint');
finstack.eval('readAll(site).sort("dis")', function(data){
template.drop=data.result.toObj();
dropdown = template.drop;
});
setTimeout(function() {
finstack.eval('readAll(equip and meter and siteRef=='+ dropdown[0].id +')', function(data){
template.drop2=data.result.toObj();
dropdown2 = template.drop2;
var myId = template.drop2[0].id;
});
}, 200);
setTimeout(function() {
finstack.eval('readAll(equipRef=='+myId+' and power and cur and his and point and sensor and not apparent and not reactive and not powerTotal).sort("phase")').then(function(data) {
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
curVal : p.curVal,
rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 5000, -90, 90),
min : 0,
max : 5000
});
});
template.ractive.set({'myPoints':myPoints});
});
}, 400);
AM Chart
Template
Expand source
<div class="s-box">
<div class="horizontal">
<select class="s-dropDown" value={{selected}} on-change="foldUpdate">
{{#myPoints}}
<option value={{id}}>{{dis}}</option>
{{/myPoints}}
</select>
<select class="s-dropDown2 mnl" value={{selected2}} on-change="foldUpdate">
{{#myPoints2}}
<option value={{id}}>{{navName}}</option>
{{/myPoints2}}
</select>
<label class="s-space s-click" on-click="calendar">{{#if myStart==myEnd}}{{myStart}}{{else}}{{myStart}} to {{myEnd}}{{/if}}</label>
<label class="s-space">compared to</label>
<label class="s-space s-click" on-click="compare">{{#if myCompareStart==myCompareEnd}}{{myCompareStart}}{{else}}{{myCompareStart}} to {{myCompareEnd}}{{/if}}</label>
</div>
<br>
<div class="fWd s-chart pst">
<div id="amChart" class="mll" style="width:100%; height:100%;"></div>
</div>
</div>
Model
Expand source
{
data:
{
myPoints:[],
myStart:"Today",
myEnd:"Today",
myCompareStart:"None",
myCompareEnd:"None"
}
}
Style
Expand source
.s-box{
padding: 10px;
background-color: #fafafa;
border-radius: 5px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.s-dropDown{
width:150px;
height:30px;
}
.s-dropDown2{
width:200px;
height:30px;
}
.s-chart{
height:90%;
}
.s-date:hover{
background-color: #c9c7c7;
}
.s-date{
height:30px;
cursor: pointer;
border-radius: 4.5px;
}
.s-space{
margin-left:20px;
}
.s-click:hover{
cursor: pointer;
color: #537bb1;
}
Init
Expand source
this.ractive.fire("obtainData");
var self = this;
var template = this;
var model = self.ractive;
var ractive= this.ractive;
var date = "today()";
var compareDate = null;
model.on('foldUpdate', function(event) {
var point = model.get("myPoints");
var selected = model.get("selected");
setTimeout(function() {
finstack.eval('readAll(equip and meter and siteRef=='+ selected +')', function(data){
meter=data.result.toObj();
var newMeter = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newMeter.push({
dis : p.dis,
id : p.id,
navName : p.navName
});
});
template.newMeter=data.result.toObj();
model.set('myPoints2', template.newMeter);
var point2 = model.get("myPoints2");
});
setTimeout(function() {
var selected2 = model.get("selected2");
setTimeout(function() {
finstack.eval('readAll(energy and equipRef=='+ selected2 +' and siteRef=='+ selected +').hisRead('+date+')', function(data){
queryData=data.result.toObj();
var newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(1),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");
AmCharts.addInitHandler(function(chart) {
if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
return;
chart.addListener("zoomed", function(event) {
var enabled = true;
if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
enabled = false;
if (event.chart.chartScrollbar.enabled === enabled)
return;
event.chart.chartScrollbar.enabled = enabled;
event.chart.validateNow(false, true);
});
}, ["serial"]);
var chart = AmCharts.makeChart(test, {
"type": "serial",
"theme": "light",
"dataProvider": newPoints,
"date": "ts",
"value": "GetPrettyValue(v0)",
"precision" : 1,
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"dataDateFormat": "HH:mm:ss",
"valueAxes": [ {
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
} ],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [ {
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "v0",
"balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
} ],
"chartCursor": {
"categoryBalloonDateFormat":"MMM DD YYYY L:NN A",
"zoomable": true
},
"chartScrollbar": {
"autoHide": true
},
"categoryField": "ts",
"categoryAxis": {
"equalSpacing": true,
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"gridPosition": "start",
"minPeriod": "mm",
"dateFormats": [
{ "period":"fff", "format":"L:NN:SS A" },
{ "period":"ss", "format":"L:NN:SS A" },
{ "period":"mm", "format":"L:NN A" },
{ "period":"hh", "format":"L:NN A" },
{ "period":"DD", "format":"MMM DD" },
{ "period":"WW", "format":"MMM DD" },
{ "period":"MM", "format":"MMM" },
{ "period":"YYYY", "format":"YYYY" }
],
},
"export": {
"enabled": true
},
} );
} );
}, 1000);
}, 200);
}, 200);
});
this.ractive.on("calendar", function(event){
top.app.ShowCalendar(null,function(data)
{
var foobag = model.get("myStart");
var foo = model.get("myEnd");
var start = moment(data.range.start).format("YYYY-MM-DD");
var end = moment(data.range.end).format("YYYY-MM-DD");
var dateStringStart = start;
var startDate = new moment(dateStringStart).format('MMM DD, YYYY');
var dateStringEnd = end;
var endDate = new moment(dateStringEnd).format('MMM DD, YYYY');
if (start===end){
date = start;
}
else{
date = (start+'..'+end);
}
setTimeout(function() {
var selected = model.get("selected");
var selected2 = model.get("selected2");
finstack.eval('readAll(energy and equipRef=='+ selected2 +' and siteRef=='+ selected +').hisRead('+date+')', function(data){
queryData=data.result.toObj();
var newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(1),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");
AmCharts.addInitHandler(function(chart) {
if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
return;
chart.addListener("zoomed", function(event) {
var enabled = true;
if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
enabled = false;
if (event.chart.chartScrollbar.enabled === enabled)
return;
event.chart.chartScrollbar.enabled = enabled;
event.chart.validateNow(false, true);
});
}, ["serial"]);
var chart = AmCharts.makeChart(test, {
"type": "serial",
"theme": "light",
"dataProvider": newPoints,
"date": "ts",
"value": "GetPrettyValue(v0)",
"precision" : 1,
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"dataDateFormat": "HH:mm:ss",
"valueAxes": [ {
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
} ],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [ {
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "v0",
"balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
} ],
"chartCursor": {
"categoryBalloonDateFormat":"MMM DD YYYY L:NN A",
"zoomable": true
},
"chartScrollbar": {
"autoHide": true
},
"categoryField": "ts",
"categoryAxis": {
"equalSpacing": true,
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"gridPosition": "start",
"minPeriod": "mm",
"dateFormats": [
{ "period":"fff", "format":"L:NN:SS A" },
{ "period":"ss", "format":"L:NN:SS A" },
{ "period":"mm", "format":"L:NN A" },
{ "period":"hh", "format":"L:NN A" },
{ "period":"DD", "format":"MMM DD" },
{ "period":"WW", "format":"MMM DD" },
{ "period":"MM", "format":"MMM" },
{ "period":"YYYY", "format":"YYYY" }
],
},
"export": {
"enabled": true
},
} );
} );
}, 1000);
ractive.set('myStart', startDate);
ractive.set('myEnd', endDate);
ractive.set('myCompareStart', "None");
ractive.set('myCompareEnd', "None");
},
{periods:false});
});
this.ractive.on("compare", function(event){
top.app.ShowCalendar(null,function(data)
{
var foobag = model.get("myCompareStart");
var foo = model.get("myCompareEnd");
var start = moment(data.range.start).format("YYYY-MM-DD");
var end = moment(data.range.end).format("YYYY-MM-DD");
var dateStringStart = start;
var startCompareDate = new moment(dateStringStart).format('MMM DD, YYYY');
var dateStringEnd = end;
var endCompareDate = new moment(dateStringEnd).format('MMM DD, YYYY');
if (start===end){
compareDate = start;
}
else{
compareDate = (start+'..'+end);
}
setTimeout(function() {
var selected = model.get("selected");
var selected2 = model.get("selected2");
finstack.eval('readAll(energy and equipRef=='+ selected2 +' and siteRef=='+ selected +').finHisReadBaselineCore('+date+','+compareDate+')[0]', function(data){
queryData=data.result.toObj();
var newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(1),
v0base : p.v0base.toFixed(1),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");
AmCharts.addInitHandler(function(chart) {
if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
return;
chart.addListener("zoomed", function(event) {
var enabled = true;
if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
enabled = false;
if (event.chart.chartScrollbar.enabled === enabled)
return;
event.chart.chartScrollbar.enabled = enabled;
event.chart.validateNow(false, true);
});
}, ["serial"]);
var chart = AmCharts.makeChart(test, {
"type": "serial",
"theme": "light",
"dataProvider": newPoints,
"date": "ts",
"value1": "v0",
"value2": "v0base",
"precision" : 1,
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"dataDateFormat": "HH:mm:ss",
"valueAxes": [ {
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
} ],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [ {
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "v0",
"balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
},
{
"id": "g2",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0,
"lineColor": "#da616b",
"bullet": "round",
"bulletBorderAlpha": 1,
"dashLength":5,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "v0base",
"balloonText": "<span style='font-size:18px;'>[[v0base]]</span>"
}],
"chartCursor": {
"categoryBalloonDateFormat":"MMM DD YYYY L:NN A",
"zoomable": true
},
"chartScrollbar": {
"autoHide": true
},
"categoryField": "ts",
"categoryAxis": {
"equalSpacing": true,
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"gridPosition": "start",
"minPeriod": "mm",
"dateFormats": [
{ "period":"fff", "format":"L:NN:SS A" },
{ "period":"ss", "format":"L:NN:SS A" },
{ "period":"mm", "format":"L:NN A" },
{ "period":"hh", "format":"L:NN A" },
{ "period":"DD", "format":"MMM DD" },
{ "period":"WW", "format":"MMM DD" },
{ "period":"MM", "format":"MMM" },
{ "period":"YYYY", "format":"YYYY" }
],
},
"export": {
"enabled": true
},
} );
} );
}, 1000);
ractive.set('myCompareStart', startCompareDate);
ractive.set('myCompareEnd', endCompareDate);
},
{periods:false});
});
Program
Expand source
var template = this;
var myTarget = query('targetPoint');
var dropdown;
var dropdown2;
finstack.eval('readAll(site).sort("dis")', function(data){
template.myPoints=data.result.toObj();
dropdown = template.myPoints;
});
setTimeout(function() {
finstack.eval('readAll(equip and meter and siteRef=='+ dropdown[0].id +')', function(data){
template.myPoints2=data.result.toObj();
dropdown2 = template.myPoints2;
});
setTimeout(function() {
var queryData = query("stackRactive");
finstack.eval('readAll(energy and equipRef=='+ dropdown2[0].id +' and siteRef=='+ dropdown[0].id +').hisRead(today)', function(data){
queryData=data.result.toObj();
var newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(1),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");
AmCharts.addInitHandler(function(chart) {
if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
return;
chart.addListener("zoomed", function(event) {
var enabled = true;
if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
enabled = false;
if (event.chart.chartScrollbar.enabled === enabled)
return;
event.chart.chartScrollbar.enabled = enabled;
event.chart.validateNow(false, true);
});
}, ["serial"]);
var chart = AmCharts.makeChart(test, {
"type": "serial",
"theme": "light",
"dataProvider": newPoints,
"date": "ts",
"value": "v0",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"valueAxes": [ {
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
} ],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [ {
"precision": 1,
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "v0",
"balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
} ],
"chartCursor": {
"categoryBalloonDateFormat":"MMM DD YYYY L:NN A",
"zoomable": true
},
"chartScrollbar": {
"autoHide": true
},
"categoryField": "ts",
"categoryAxis": {
"equalSpacing": true,
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"gridPosition": "start",
"minPeriod": "mm",
"dateFormats": [
{ "period":"fff", "format":"L:NN:SS A" },
{ "period":"ss", "format":"L:NN:SS A" },
{ "period":"mm", "format":"L:NN A" },
{ "period":"hh", "format":"L:NN A" },
{ "period":"DD", "format":"MMM DD" },
{ "period":"WW", "format":"MMM DD" },
{ "period":"MM", "format":"MMM" },
{ "period":"YYYY", "format":"YYYY" }
],
},
"export": {
"enabled": true
},
} );
} );
}, 200);
}, 200);
, multiple selections available,
Related content
Ractive Dashboard
Ractive Dashboard
More like this
GB Ractive Dashboard
GB Ractive Dashboard
More like this
Example
Example
More like this
Meter Chart
Meter Chart
More like this
AM Charts for Ractive Dashboard
AM Charts for Ractive Dashboard
Read with this
Thermostat (Simple)
Thermostat (Simple)
More like this