126 lines
3.7 KiB
JavaScript
126 lines
3.7 KiB
JavaScript
define([
|
|
'jquery', 'knockout', 'text!./DualArcGauge.svg', 'sprintf'
|
|
], function(jquery, ko, svgString, sprintf) {
|
|
|
|
function getXY(positionNorm, r) {
|
|
var a = (120*positionNorm-60)/180*Math.PI;
|
|
return {
|
|
'x': 50+r*Math.sin(a),
|
|
'y': 52-r*Math.cos(a)
|
|
}
|
|
}
|
|
|
|
function Tick( width, positionNorm, color ) {
|
|
var self = this;
|
|
|
|
self.width = width;
|
|
self.color = color;
|
|
|
|
var xy = getXY( positionNorm, 45 );
|
|
self.getStartXY = xy.x.toString()+","+ xy.y.toString();
|
|
|
|
xy = getXY( positionNorm, 50 );
|
|
self.getEndXY = xy.x.toString()+","+ xy.y.toString();
|
|
}
|
|
|
|
function Marker( label, positionNorm, color ) {
|
|
var self = this;
|
|
|
|
self.label = label;
|
|
self.color = color;
|
|
|
|
var xy = getXY( positionNorm, 52 );
|
|
self.getX = xy.x;
|
|
self.getY = xy.y;
|
|
|
|
self.anchor = 'middle';
|
|
if( positionNorm < 0.4 ) self.anchor = 'end';
|
|
if( positionNorm > 0.6 ) self.anchor = 'start';
|
|
}
|
|
|
|
function Arc( color, start, end ) {
|
|
var self = this;
|
|
self.color = color;
|
|
|
|
if( start == end ) {
|
|
start -= 0.005;
|
|
end += 0.005;
|
|
}
|
|
|
|
var xy = getXY( start, 47.5 );
|
|
self.getStartXY = xy.x.toString()+","+ xy.y.toString();
|
|
|
|
xy = getXY( end, 47.5 );
|
|
self.getEndXY = xy.x.toString()+","+ xy.y.toString();
|
|
}
|
|
|
|
function ViewModel(params) {
|
|
var self = this;
|
|
|
|
self.config = {
|
|
label : params.label || '',
|
|
min : params.min || 0,
|
|
max : params.max || 1,
|
|
left : {
|
|
value : params.left.value || 0,
|
|
format : params.left.format || '%d',
|
|
},
|
|
right : {
|
|
value : params.right.value || 0,
|
|
format : params.right.format || '%d',
|
|
},
|
|
}
|
|
|
|
function getRotationNorm(value) {
|
|
if (value < self.config.min)
|
|
return 0;
|
|
if (value > self.config.max)
|
|
return 1;
|
|
return (value - self.config.min) / (self.config.max - self.config.min);
|
|
}
|
|
|
|
self.leftRotationNorm = ko.pureComputed(function() {
|
|
return getRotationNorm(ko.utils.unwrapObservable(self.config.left.value));
|
|
});
|
|
|
|
self.rightRotationNorm = ko.pureComputed(function() {
|
|
return getRotationNorm(ko.utils.unwrapObservable(self.config.right.value));
|
|
});
|
|
|
|
self.leftText = ko.pureComputed(function() {
|
|
return sprintf.sprintf(self.config.left.format, ko.utils.unwrapObservable(self.config.left.value));
|
|
});
|
|
|
|
self.rightText = ko.pureComputed(function() {
|
|
return sprintf.sprintf(self.config.right.format, ko.utils.unwrapObservable(self.config.right.value));
|
|
});
|
|
|
|
self.label = self.config.label;
|
|
|
|
self.markers = [];
|
|
self.ticks = [];
|
|
self.arcs = [];
|
|
|
|
for ( var pos in params.marker) {
|
|
var m = params.marker[pos];
|
|
self.markers.push( new Marker( pos, getRotationNorm(Number(pos)), m) );
|
|
}
|
|
|
|
for ( var pos in params.ticks) {
|
|
var t = params.ticks[pos];
|
|
self.ticks.push( new Tick( t.width || 1, getRotationNorm(Number(pos)), t.color || 'white' ) );
|
|
}
|
|
|
|
if( params.arcs ) params.arcs.forEach(function(arc) {
|
|
var end = arc.end || arc.start;
|
|
self.arcs.push( new Arc(arc.color,getRotationNorm(Number(arc.start)),getRotationNorm(Number(end))));
|
|
});
|
|
|
|
}
|
|
|
|
// Return component definition
|
|
return {
|
|
viewModel : ViewModel,
|
|
template : svgString
|
|
};
|
|
});
|