Page Comparison

var ractiveComponent    = query('stackRactive');
ractiveComponent.ractive.set('points',[{
            mainIcon    : "wi-fire",
            iconColor   : "#c34c46",
            mainText    : "Hot Water Boiler",
            mainValue   : "80ºC",
            btIcon      : "icon-location",
            btIconText  : "Heating",
            view        : 'icon',
            options     : "hideButtons",
            range       :"Date"
        },{
            mainIcon    : "icon-location",
            iconColor   : "red",
            mainText    : "Energy",
            mainValue   : "66%",
            btIcon      : "icon-calendar",
            btIconText  : "Today",
            view        : 'light2',
            options     : "hideButtons",
            fillValue   : 66,
            myStart     : "Select",
            myEnd       : "Date"
        },{
            mainIcon    : "sm-oil",
            iconColor   : "#3488b2",
            mainText    : "Main Water",
            mainValue   : "150L",
            btIcon      : "icon-graph-line",
            btIconText  : "Data",
            mainText2   : "Rain Water",
            mainValue2  : "50L",
            view        : 'amChart',
            options     : "hideButtons",
            amId        : top.app.Utils.GetPseudoId(),
            range       :"today()",
            query       :'dashboardData()',
            chartConfig : {
                "type"          : "serial",
                "theme"         : "light",
                "marginRight"   : 80,
                "dataProvider"  : null,
                "valueAxes"     : [{
                    "axisAlpha" : 0.1
                }],
            
                "graphs": [{
                    "balloonText"   : "[[title]]: [[value]]",
                    "columnWidth"   : 20,
                    "fillAlphas"    : 1,
                    "title"         : "Energy",
                    "type"          : "column",
                    "valueField"    : "v0"
                }, {
                    "balloonText"   : "[[title]]: [[value]]",
                    "lineThickness" : 2,
                    "title"         : "intra-day",
                    "valueField"    : "v1"
                }],
                "zoomOutButtonRollOverAlpha"    : 0.15,
                "chartCursor": {
                    "categoryBalloonDateFormat" : "MMM DD JJ:NN",
                    "cursorPosition"            : "mouse",
                    "showNextAvailable"         : true
                },
                "autoMarginOffset"  : 5,
                "columnWidth"       : 1,
                "categoryField"     : "ts",
                "categoryAxis"      : {
                    "minPeriod" : "hh",
                    "parseDates": true
                },
                "export": {
                    "enabled": true
                }
                }}]);

var ractiveComponent    = query('stackRactive');
var virtualPoints       = queryAll('virtualPoint and curVal');

var myPoints = [];

virtualPoints.forEach(function(item){
    myPoints.push({
            mainIcon    : "icon-location",
            iconColor   : "#c9b4e0",
            mainText    : item.navName,
            mainValue   : GetPrettyValue(item),
            btIcon      : "sm-site",
            btIconText  : item.siteRefDis,
            view        : 'icon',
            range       : "Today",
            options     : "hideButtons",
            pollPointId : item.id
        });
});

ractiveComponent.ractive.set('points',myPoints);