...
| Code Block | ||||
|---|---|---|---|---|
| ||||
.s-container{
min-width: 300px;
}
.s-height{
height: 40px;
border-top: solid #d2d2d2;
}
.s-icon{
font-size: 16px;
width:50%;
font-weight: bold;
}
.s-date{
width:50%;
}
.n-chart{
min-height: 350px;
max-height: 400px;
min-width: 500px;
}
.s-bottomLabel{
font-size: 2vw;
font-weight: bold;
}
.s-topLabel{
font-size: 1.3vw;
}
.iconHeight{
min-height: 400px;
max-height: 450px;
}
.svgIcon{
height:100px;
width:125px;
}
.s-select{
height:24px;
width:85px;
}
.fHt{
height: 100%;
}
.fWd{
width: 100%;
}
.horizontal{
display: flex;
flex-direction: row;
}
.middle{
align-items: center;
}
.vertical{
display: flex;
flex-direction: column;
}
.center{
align-items: center;
}
.wrap{
flex-wrap: wrap;
}
.flex{
flex: 1 1 auto;
}
.mst{
margin-top: 5px;
}
.msl{
margin-left: 5px;
}
.mnv{
margin-top: 10px;
margin-bottom: 10px;
}
.mnt{
margin-top: 10px;
}
.mnb{
margin-bottom: 10px;
}
.pla{
padding: 15px;
}
.pnr{
padding-right: 10px;
}
.psb{
padding-bottom: 5px;
}
.bottom{
justify-content: flex-end;
}
.right{
justify-content: flex-end;
} |
Init
| Code Block | ||||
|---|---|---|---|---|
| ||||
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-calendar",
btIconText: "Today",
view: 'icon',
range:"Date",
options: "hideButtons"
},{
mainIcon: "icon-location",
iconColor: "red",
mainText: "Rain Water",
mainValue: "50L",
btIcon: "icon-calendar",
btIconText: "Today",
view: 'waterdrop',
fillColor:"lightblue",
svgBackColor:"#d2d2d2",
fillValue:50,
myStart:"Select",
myEnd:"Date",
options: "hideButtons"
},{
mainIcon: "icon-graph-line",
iconColor: "#b083e0",
mainText: "Errors",
mainValue: "23",
btIcon: "icon-graph-line",
btIconText: "Data",
view: 'amChart',
options: "hideButtons",
amId: top.app.Utils.GetPseudoId(),
range:"today()",
fold:"avg",
chartConfig: {
"type": "pie",
"theme": "light",
dataProvider: [{
"country": "IT",
"value": 31.32
}, {
"country": "Heating",
"value": 27.47
}, {
"country": "Cooling",
"value": 25.55
}, {
"country": "Lighting",
"value": 15.66
} ],
"valueField": "value",
"titleField": "country",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]:</b> ([[percents]]%)</span>",
"angle": 30,
"export": {
"enabled": true
}
}
}]}); |
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
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
}
}}]); |
Virtual Point Button
This component will display all the virtual points in the graphic
| Code Block | ||||
|---|---|---|---|---|
| ||||
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);
|
...