this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
var startRange = "";
var endRange = "";
var tpoint = model.queryAll("targetPoint");
if(tpoint.length > 0) tpoint = tpoint[0].pointId;
else tpoint = "undefined";
var query = this.query.replace(/\$id/g, tpoint);
var dataQuery = query+'.hisRead(today)';
function clearTabs(item){
model.set('myStart', "Date Picker");
model.set('myEnd', "Date Picker");
model.set('startPick', "Start");
model.set('endPick', "End");
}
function updateChart(newQuery, buttonInd){
var test = template.view.querySelector("#amChartPoint");
var buttonIds = [
template.view.querySelector("#day"),
template.view.querySelector("#week"),
template.view.querySelector("#month"),
template.view.querySelector("#datePicker"),
template.view.querySelector("#datePickerStart"),
template.view.querySelector("#datePickerEnd")
];
buttonIds.forEach(function(itm){ itm.style.backgroundColor = "#4f7ab3"; });
buttonIds[buttonInd].style.backgroundColor = "#7093c1";
setTimeout(function() {
finstack.eval(newQuery, function(event){
var cols = [];
event.result.columns.forEach(function(itm){
var t = /v\d+/.exec(itm.name);
if(t !== null && t[0] == t.input){
if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
else cols.push({dis: itm.name, col: itm.name});
}
});
var grphs = [];
var cou = 0;
cols.forEach(function(itm){
grphs.push({
"id": "g"+cou,
"balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
"lineThickness": 2,
"title": itm.dis,
"unit" : itm.unit,
"valueField": itm.col,
"fillAlphas": 0.2 //Area
});
cou++;
});
var myData = event.result.toObj();
var chartData =[];
var myData2 = [];
myData.forEach(function(itm){
myData2.push({
"ts": itm.ts,
"tsOffset": itm.tsOffset,
"tsTimezone": itm.tsTimezone,
"v0": itm.v0 || 0,
"v1": itm.v1 || 0,
"v2": itm.v2 || 0,
"v3": itm.v3 || 0,
"v4": itm.v4 || 0,
"v5": itm.v5 || 0,
"v6": itm.v6 || 0,
"v7": itm.v7 || 0
});
});
myData2.forEach(function(itm){
chartData.push({
"ts": itm.ts,
"tsOffset": itm.tsOffset,
"tsTimezone": itm.tsTimezone,
"v0": itm.v0.toFixed(1) || null,
"v1": itm.v1.toFixed(1) || null,
"v2": itm.v2.toFixed(1) || null,
"v3": itm.v3.toFixed(1) || null,
"v4": itm.v4.toFixed(1) || null,
"v5": itm.v5.toFixed(1) || null,
"v6": itm.v6.toFixed(1) || null,
"v7": itm.v7.toFixed(1) || null
});
});
var chart = AmCharts.makeChart(test, {
"type": "serial",
"theme": "light",
"marginRight": 80,
"dataProvider": chartData,
"valueAxes": [{
"axisAlpha": 0.1
}],
"graphs": grphs,
"zoomOutButtonRollOverAlpha": 0.15,
"chartCursor": {
"categoryBalloonDateFormat": "MMMM D L:NN A",
"cursorPosition": "mouse",
"showNextAvailable": true
},
"legend": {
"equalWidths": true,
"position": "top",
"valueAlign": "left",
"valueWidth": 100
},
"autoMarginOffset": 5,
"columnWidth": 1,
"categoryField": "ts",
"categoryAxis": {
"parseDates": true,
"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"
}]
},
"chartScrollbar": {
"enabled": true,
},
"export": {
"enabled": true
},
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
});
}, 200);
}
this.ractive.on("day", function(event) {
clearTabs(true);
updateChart(dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead(today)'), 0);
});
this.ractive.on("week", function(event) {
clearTabs(true);
updateChart(dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead(thisWeek)'), 1);
});
this.ractive.on("month", function(event) {
clearTabs(true);
updateChart(dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead(thisMonth)'), 2);
});
this.ractive.on("datePicker", function(event) {
clearTabs(true);
top.app.ShowCalendar(null,function(data){
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('MM/DD/YYYY');
var dateStringEnd = end;
var endDate = new moment(dateStringEnd).format('MM/DD/YYYY');
model.set('myStart', startDate);
model.set('myEnd', endDate);
var newQuery = "";
if(start == end) newQuery= dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+start+')');
else newQuery= dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+start+'..'+end+')');
updateChart(newQuery, 3);
},
{periods:true});
});
this.ractive.on("datePickerStart", function(event) {
clearTabs(true);
top.app.ShowCalendar(null,function(data){
startRange = moment(data.range.start).format("YYYY-MM-DD");
var dateStringStart = startRange;
var startDate = new moment(dateStringStart).format('MM/DD/YYYY');
model.set('startPick', startDate);
var newQuery = "";
// newQuery = dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+start+')');
updateChart("", 4);
});
});
this.ractive.on("datePickerEnd", function(event) {
model.set('myStart', "Date Picker");
model.set('myEnd', "Date Picker");
top.app.ShowCalendar(null,function(data){
endRange = moment(data.range.end).format("YYYY-MM-DD");
var dateStringEnd = endRange;
var endDate = new moment(dateStringEnd).format('MM/DD/YYYY');
model.set('endPick', endDate);
var newQuery = "";
newQuery= dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+startRange+'..'+endRange+')');
updateChart(newQuery, 5);
});
});
