Page Comparison

var self    = this;
var model   = self.ractive;

model.observe('points.*.view points.*.query', function(nVal,oVal,kPath){
   var pathToPoint  = kPath.substring(0, kPath.lastIndexOf('.'));
   var point        = model.get(pathToPoint);
   
   if (point) {
        if (kPath.indexOf('query') != -1) {
            var nQuery  = model.get('getUpdatedQueryStringForItem').call(model, point);
                
            if (!nQuery || !nQuery.length)
                return;
            
            finstack.eval(nQuery).then(function(data) {
                if (data && data.result && !data.result.isErrorGrid) {
                    point.chartConfig.dataProvider  = data.result.toObj();
                    model.get('updateChartForElementIdWithConfig').call(model, point.amId, point.chartConfig);
                } else {
                    console.log(data);
                }

            }, function(err) {
                console.error(err);
            });
        } else if (point && point.view == 'amChart') {
            model.get('updateChartForElementIdWithConfig').call(model, point.amId, point.chartConfig);
        }
    }
   
});

model.on('unrender', function() {
    model.get('updatePoll').call(model, true);
});


model.on('foldUpdate', function(event) {
    var point   = model.get(event.resolve());
    var fVal    = event.node.value;
    
    model.set(event.resolve()+ '.fold', fVal);
    model.get('updatePoll').call(model);
    
    if (fVal != 'live') {
        var q = 'readById(' +point.pointId+ ').hisRead(' +point.range+ ').foldCol("v0",'+point.fold+')';
        console.log("Setting out...", q);
        finstack.eval(q).then(function(data) {
            model.set(event.resolve()+ '.mainValue', fin.Data.PointUtil.GetPrettyValue(point.original,data.result.toObj(false,false,true)));
        }, function(err) {
            console.log(err);
        });
    }
});


this.ractive.on("calendar", function(event){
    var point   = self.ractive.get(event.resolve());
    var model   = self.ractive;
    
    top.app.ShowCalendar(true,function(calEvent){
        var date = top.app.Utils.DateRangeToAxonDate(calEvent.range, calEvent.mode);
        model.set(event.resolve()+ '.range', date);//.then(function() {
            
     if (point.fold != 'live') {
        var q = 'readById(' +point.pointId+ ').hisRead(' +point.range+ ').foldCol("v0",'+point.fold+')';
        console.log("Setting out...", q);
        finstack.eval(q).then(function(data) {
            model.set(event.resolve()+ '.mainValue', fin.Data.PointUtil.GetPrettyValue(point.original,data.result.toObj(false,false,true)));
        }, function(err) {
            console.log(err);
        });
            
    }
    }, {periods:true});
});



//  Init Data

self.ractive.set({points: [{
            mainIcon: "sm-oil",
            iconColor: "#3488b2",
            mainText: "Main Water",
            mainValue: "150L",
            btIcon: "icon-clockwise",
            btIconText: "Refresh",
            mainText2: "Rain Water",
            mainValue2: "50L",
            view: 'icon',
            range:"Date"
        },{
            mainIcon: "icon-location",
            iconColor: "red",
            mainText: "Revenue",
            mainValue: "37%",
            btIcon: "icon-calendar",
            btIconText: "Last Day",
            view: 'waterdrop',
            fillColor:"orange",
            svgBackColor:"#d2d2d2",
            fillValue:37,
            myStart:"Select",
            myEnd:"Date"
        },{
            mainIcon: "icon-graph-line",
            iconColor: "#b083e0",
            mainText: "Errors",
            mainValue: "23",
            btIcon: "icon-menu",
            btIconText: "Menu",
            view: 'amChart',
            amId: top.app.Utils.GetPseudoId(),
            range:"today()",
            fold:"avg",
            chartConfig: {
                theme: "light",
                type: "serial",
                dataProvider: [{
                    country: "USA",
                    year2004: 3.5,
                    year2005: 4.2
                }, {
                    country: "UK",
                    year2004: 1.7,
                    year2005: 3.1
                }, {
                    country: "Canada",
                    year2004: 2.8,
                    year2005: 2.9
                }, {
                    country: "Japan",
                    year2004: 2.6,
                    year2005: 2.3
                }, {
                    country: "France",
                    year2004: 1.4,
                    year2005: 2.1
                }, {
                    country: "Brazil",
                    year2004: 2.6,
                    year2005: 4.9
                }],
                valueAxes: [{
                    unit: "%",
                    position: "left",
                    title: "GDP growth rate",
                }],
                startDuration: 1,
                graphs: [{
                    balloonText: "GDP grow in [[category]] (2004): <b>[[value]]</b>",
                    fillAlphas: 0.9,
                    lineAlpha: 0.2,
                    title: "2004",
                    type: "column",
                    valueField: "year2004"
                }, {
                    balloonText: "GDP grow in [[category]] (2005): <b>[[value]]</b>",
                    fillAlphas: 0.9,
                    lineAlpha: 0.2,
                    title: "2005",
                    type: "column",
                    clustered:false,
                    columnWidth:0.5,
                    valueField: "year2005"
                }],
                plotAreaFillAlphas: 0.1,
                categoryField: "country",
                categoryAxis: {
                    gridPosition: "start"
                },
                export: {
                	enabled: true
                 }
            }
        }]
});