Hello Experts,
In XS project have created Test.view.js file which is having Materix Layout component and Shell layout. This view is returning Shell layout object.
I have added gauge chart in Materix layout. Problem which I'm facing here is that first time(when page loads) gauge chart appears in shell layout but when we toggle/navigate between tabs then gauge chart disappears.
Can some one please us help to get resolve this issue. Please refer below code of this project.
1. Below is code for Test.view.js file.
sap.ui.jsview("Views.Test",
{
getControllerName : function(){
return null;
},
createContent : function(oController)
{
var sOrigin = window.location.protocol + "//" + window.location.hostname
+ (window.location.port ? ":" + window.location.port : "");
var scale_val = 0;
var oLayout_Summary = new sap.ui.commons.layout.MatrixLayout({
id : "Summary",
layoutFixed : true,
columns : 2,
width : "100%",
widths : [ "30%", "70%" ]
});
// 1st Row
var oRow_Summ = new sap.ui.commons.layout.MatrixLayoutRow({
id : 'Row-summ-0',
height: '20%',
position: 'absolute',
left: '50%'
});
var oCell_Summ = new sap.ui.commons.layout.MatrixLayoutCell({
id : 'Cell-Summ-0-0',
backgroundDesign : sap.ui.commons.layout.BackgroundDesign.Fill3,
colSpan : 2
});
var oText = new sap.ui.commons.TextView({
text : 'Liquidity and Margin Position',
design : sap.ui.commons.TextViewDesign.H1,
width : '100%',
semanticColor: sap.ui.commons.TextViewColor.Critical,
design: sap.ui.commons.TextViewDesign.H1});
oCell_Summ.addContent(oText);
oRow_Summ.addCell(oCell_Summ);
alert("1st row");
oLayout_Summary.addRow(oRow_Summ);
//2nd row
var oRow_Summ1 = new sap.ui.commons.layout.MatrixLayoutRow({
id : 'Row-dash-1.0',
});
var oCell_Summ1= new sap.ui.commons.layout.MatrixLayoutCell({
id : 'contain1',
height: '400px',
width: '400px',
colSpan:2
});
var html1 = new sap.ui.core.HTML("html11", {
// the static content as a long string literal
content:
"<div id='c1'style='width:400px;height:400px'></div>",
preferDOM : false,
// use the afterRendering event for 2 purposes
afterRendering : function(e) {
}
});
/////////////////////////////////////////////////////////End
oCell_Summ1.addContent(html1);
oRow_Summ1.addCell(oCell_Summ1); // Add Gauge
d3.select("#c1").select("svg").remove();
var gauge = function(html1g, configuration) {
var that = {};
var config = {
size : 300,
clipWidth : 300,
clipHeight : 110,
ringInset : 20,
ringWidth : 20,
pointerWidth : 10,
pointerTailLength : 5,
pointerHeadLengthPercent : 0.8,
minValue : 0,
maxValue : 5,
minAngle : -90,
maxAngle : 90,
transitionMs : 750,
majorTicks : 5,
labelFormat : d3.format(',g'),
labelInset : 10,
arcColorFn : d3.interpolateHsl(d3.rgb('#e8e2ca'), d3.rgb('#3e6c0a'))
};
var range = undefined;
var r = undefined;
var pointerHeadLength = undefined;
var value = 0;
var svg = undefined;
var arc = undefined;
var scale = undefined;
var ticks = undefined;
var tickData = undefined;
var pointer = undefined;
var donut = d3.layout.pie();
function deg2rad(deg) {
return deg * Math.PI / 180;
}
function newAngle(d) {
var ratio = scale(d);
var newAngle = config.minAngle + (ratio * range);
return newAngle;
}
function configure(configuration) {
var prop = undefined;
for ( prop in configuration ) {
config[prop] = configuration[prop];
}
range = config.maxAngle - config.minAngle;
r = config.size / 2;
pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent);
// a linear scale that maps domain values to a percent from 0..1
scale = d3.scale.linear()
.range([0,1])
.domain([config.minValue, config.maxValue]);
ticks = scale.ticks(config.majorTicks);
tickData = d3.range(config.majorTicks).map(function() {return 1/config.majorTicks;});
arc = d3.svg.arc()
.innerRadius(r - config.ringWidth - config.ringInset)
.outerRadius(r - config.ringInset)
.startAngle(function(d, i) {
var ratio = d * i;
return deg2rad(config.minAngle + (ratio * range));
})
.endAngle(function(d, i) {
var ratio = d * (i+1);
return deg2rad(config.minAngle + (ratio * range));
});
}
that.configure = configure;
function centerTranslation() {
return 'translate('+r +','+ r +')';
}
function isRendered() {
return (svg !== undefined);
}
that.isRendered = isRendered;
function render(newValue) {
svg = d3.select("#c1")
.append('svg')
.attr('class', 'gauge')
.attr('width', config.clipWidth)
.attr('height', config.clipHeight);
var centerTx = centerTranslation();
var parameter =["Not","Relatively Weak","Below Average","Average","Good","Very Good"];
var gaugeColor =["#fb250d","#fd7214","#ffc000","#caf7b5","#75e398"] ;
// alert(gaugeColor);
var arcs = svg.append('g')
.attr('class', 'arc')
.attr('transform', centerTx);
arcs.selectAll('path')
.data(tickData)
.enter().append('path')
.attr('fill', function(d,i){return gaugeColor[i]})
.attr('d', arc);
var lg = svg.append('g')
.attr('class', 'label')
.attr('transform', centerTx);
lg.selectAll('text')
.data(ticks)
.enter().append('text')
.attr('transform', function(d) {
var ratio = scale(d);
var newAngle = config.minAngle + (ratio * range);
return 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')';
})
.text(function(d,i){ return parameter[i]})
.style("writing-mode", "horizontal-tb")
.attr("text-anchor"," middle")
.attr("font-size"," 10px")
.attr("font-weight", "bold")
.style("fill","#666");
//.attr("font-family",settings.fontFamily);
var lineData = [ [config.pointerWidth / 2, 0],
[0, -pointerHeadLength],
[-(config.pointerWidth / 2), 0],
[0, config.pointerTailLength],
[config.pointerWidth / 2, 0] ];
var pointerLine = d3.svg.line().interpolate('monotone');
var pg = svg.append('g').data([lineData])
.attr('class', 'pointer')
.attr('transform', centerTx);
pointer = pg.append('path')
.attr('d', pointerLine/*function(d) { return pointerLine(d) +'Z';}*/ )
.attr('transform', 'rotate(' +config.minAngle +')');
update(newValue === undefined ? 0 : newValue);
}
that.render = render;
function update(newValue, newConfiguration) {
if ( newConfiguration !== undefined) {
configure(newConfiguration);
}
var scale1 = d3.scale.linear()
.range([0,1])
.domain([0.5, 5.5]);
//alert(scale_val);
var ratio = scale1(scale_val);
var newAngle = config.minAngle + (ratio * range);
pointer.transition()
.duration(config.transitionMs)
//.ease('elastic')
.attr('transform', 'rotate(' +newAngle +')');
}
that.update = update;
configure(configuration);
return that;
};
function onDocumentReady() {
var powerGauge = gauge("#c1", {
size: 300,
clipWidth: 300,
clipHeight: 300,
ringWidth: 60,
maxValue: 10,
transitionMs: 4000,
});
powerGauge.render();
}
if ( !window.isLoaded ) {
window.addEventListener("load", function() {
onDocumentReady();
}, false);
} else {
onDocumentReady();
}
oLayout_Summary.addRow(oRow_Summ1);
var oLabel1 = new sap.ui.commons.Label("test2");
oLabel1.setText("Summary1");
var oShell = new sap.ui.ux3.Shell("myshell1",{
appTitle: " TCS Real Time Liquidity and Margin Monitoring System",
appIcon: "./Image/TCS_logo.JPG",
showLogoutButton: false,
showSearchTool: false,
showInspectorTool: false,
showFeederTool: false,
headerItems: [
new sap.ui.commons.TextView({text:"Welcome"}),
new sap.ui.commons.TextView({text:"Refreshed at "+ new Date().toDateString() +" , "+ new Date().toLocaleTimeString()}),
],
worksetItems: [
new sap.ui.ux3.NavigationItem("WI_SUMM",{key:"WI_SUMMARY",text:"Summary"}),
new sap.ui.ux3.NavigationItem("WI_Liq",{key:"WI_Liquidity_Margin",text:"Liquidity & Margin Position"}),
],
/*content:[
oLayout_Summary
],*/
content: oLayout_Summary,
worksetItemSelected: function(oEvent){
var sId = oEvent.getParameter("id");
var oShell = oEvent.oSource;
switch (sId) {
case "WI_SUMM":
oShell.setContent(oLayout_Summary);
break;
case "WI_Liq":
oShell.setContent(oLabel1);
// oShell.setContent(oLabel1);
//alert(sId);
break;
default:
break;
}
}
});
return oShell;
}
});
2. Following is code for index.html.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta charset="utf-8"/>
<script id="sap-ui-bootstrap" type="text/javascript"
src="/sap/ui5/1/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3,sap.ui.demokit"
data-sap-ui-theme="sap_goldreflection">
</script>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<script type="text/javascript" src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
sap.ui.localResources("Views");
var view1 = sap.ui.view({id:"V1", viewName:"Views.Test", type:sap.ui.core.mvc.ViewType.JS});
view1.placeAt("content");
</script>
</head>
<body>
</body>
<div id="content"></div>
</html>
Thanks,
Shweta