Page Comparison

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="357px" height="1063px"     viewBox="393.5 -303.5 357 1063" 0 0 320 600" style="enable-background=":new 393.5 -303.5 357 1063"
	 0 0 320 600;" xml:space="preserve">
<ellipse fill="{{myAccentColor}}" cx="612212.51" cy="{{rotateValue1}}" rx="90.815" ry="90.815"/>
<polygon fill="{{myAccentColor}}" points="47777.126,{{rotateValue2}} 529129.021,{{rotateValue3}} 529129.021,{{rotateValue4}} "/>
<line fill="none" stroke="#E6E6E6" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" x1="44848.54" y1="600500.887" x2="44848.54" y2="-177127.535"/>
<line fill="none" stroke="{{myAccentColor}}" stroke-width="48" stroke-linecap="round" stroke-miterlimit="10" x1="44848.54" y1="600500.887" x2="44848.54" y2="{{rotateValue5}}"/>
  <text x="614214" y="{{rotateValue6}}" fill="#FFFFFF" font-family="'ArialMT'" font-size="25" text-anchor="middle">{{myNavName}}</text>
<text x="44949" y="-208.596" font-family="'ArialMT'" font-size="30" text-anchor="middle">{{maxInputValue}}</text>
  <text x="44949" y="655555.5" font-family="'ArialMT'" font-size="30" text-anchor="middle">{{minInputValue}}</text>
<text x="614214" y="{{rotateValue7}}" fill="#FFFFFF" font-family="'ArialMT'" font-size="50" text-anchor="middle">{{prettyValue}}</text>
</svg>

var myRactive = this;
   
myRactive.prettyValue         = GetPrettyValue(point);
myRactive.myValue             = point.curVal;
myRactive.myNavName           = this.shortName || point.navName;
myRactive.minInputValue       = this.minVal || point.minVal || 0;
myRactive.maxInputValue       = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue1     = myRactive.minOutputVal ||  580474.686036;
myRactive.maxOutputValue1     = myRactive.maxOutputVal ||  -200100.686;

myRactive.minOutputValue2     = myRactive.minOutputVal ||  579474.022372;
myRactive.maxOutputValue2     = myRactive.maxOutputVal ||  -201101.022;

myRactive.minOutputValue3     = myRactive.minOutputVal ||  559495.7813;
myRactive.maxOutputValue3     = myRactive.maxOutputVal ||  -221121.78;

myRactive.minOutputValue4     = myRactive.minOutputVal ||  600453.264614;
myRactive.maxOutputValue4     = myRactive.maxOutputVal ||  -18080.264;

myRactive.minOutputValue5     = myRactive.minOutputVal ||  600500.887;
myRactive.maxOutputValue5     = myRactive.maxOutputVal ||  -178127.535;

myRactive.minOutputValue6     = myRactive.minOutputVal ||  607500.68635;
myRactive.maxOutputValue6     = myRactive.maxOutputVal ||  -173127;

myRactive.minOutputValue7     = myRactive.minOutputVal ||  580473.68635;
myRactive.maxOutputValue7     = myRactive.maxOutputVal ||  -200100;
myRactive.myAccentColor       = this.color || "#29ABE2";
    
var myRotateValue1     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue1, myRactive.maxOutputValue1);
var myRotateValue2     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue2, myRactive.maxOutputValue2);
var myRotateValue3     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue3, myRactive.maxOutputValue3);
var myRotateValue4     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue4, myRactive.maxOutputValue4);
var myRotateValue5     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue5, myRactive.maxOutputValue5);
var myRotateValue6     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue6, myRactive.maxOutputValue6);
var myRotateValue7     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue7, myRactive.maxOutputValue7);
  
myRactive.ractive.animate('rotateValue1',myRotateValue1);
myRactive.ractive.animate('rotateValue2',myRotateValue2);
myRactive.ractive.animate('rotateValue3',myRotateValue3);
myRactive.ractive.animate('rotateValue4',myRotateValue4);
myRactive.ractive.animate('rotateValue5',myRotateValue5);
myRactive.ractive.animate('rotateValue6',myRotateValue6);
myRactive.ractive.animate('rotateValue7',myRotateValue7);