Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/vizFrameRules.js

Created July 17, 2015 13:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ikiw/bf29f9240188928423f9 to your computer and use it in GitHub Desktop.
Save ikiw/bf29f9240188928423f9 to your computer and use it in GitHub Desktop.
Download ZIP
Viz Frame Rules
Raw
vizFrameRules.js
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>test</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-xx-bindingSyntax='complex'
data-sap-ui-libs='sap.ui.commons,sap.m, sap.viz'></script>
<!-- add 'sap.ui.table' and/or other libraries if required -->
<script id="myxml" type="text/xmldata">
<core:View xmlns:core="sap.ui.core" xmlns:viz="sap.viz.ui5.controls"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz.data="sap.viz.ui5.data" xmlns="sap.m"
controllerName="my.own.controller" >
<App>
<Page title="SAPUI5 App">
<viz:VizFrame id="DueDateGridFrame" vizType="info/bar" uiConfig="{applicationSet:'fiori'}" >
<viz:dataset>
<viz.data:FlattenedDataset data="{/businessData}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Country" value="{Country}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition value="{profit}" name="Profit" />
<viz.data:MeasureDefinition value="{revenue}" name="Revenue" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="primaryValues" type="Measure" values="Profit,Revenue" />
<viz.feeds:FeedItem uid="axisLabels" type="Dimension" values="Country" />
</viz:feeds>
</viz:VizFrame>
</Page>
</App>
</core:View>
</script>
<script>
sap.ui.controller("my.own.controller", {
onInit: function() {
var oData = {
"businessData":[
{'Country' : "Canada", 'Product' :'Car', 'profit' : -141.25, 'revenue' : 100 },
{'Country' : "China", 'Product' :'Car', 'profit' : 133.82, 'revenue' : 200},
{'Country' : "France", 'Product' :'Car', 'profit' : 348.76, 'revenue' : 300},
{'Country' : "Germany", 'Product' :'Car', 'profit' : 217.29, 'revenue' : 200},
{'Country' : "India", 'Product' :'Car', 'profit' : 117.00, 'revenue' : 400},
{'Country' : "United States", 'Product' :'Car', 'profit' : 609.16, 'revenue' : 500}
]
};
var oModel = new sap.ui.model.json.JSONModel(oData);
var thresholdMeasure = "profit";
var improvementDirection = "MA";
this.getView().setModel(oModel);
var oVizFrame = this.byId('DueDateGridFrame');
var oRule1 = function (oContext) {
var data = oVizFrame.getModel().getData().businessData;
var bindingContext = oContext._context_row_number;
var bindingData = data[bindingContext];
var referenceMeasureValue = bindingData[thresholdMeasure];
if(referenceMeasureValue!=null && typeof referenceMeasureValue!='undefined') {
if(oContext[oContext.measureNames] > referenceMeasureValue) {
if(improvementDirection == "MA")
return true;
} else if(oContext[oContext.measureNames] < referenceMeasureValue) {
if(improvementDirection == "MI")
return true;
}
} else
return false;
};
var oRule2 = function (oContext) {
var data = oVizFrame.getModel().getData().businessData;
var bindingContext = oContext._context_row_number;
var bindingData = data[bindingContext];
var referenceMeasureValue = bindingData[thresholdMeasure];
if(referenceMeasureValue!=null && typeof referenceMeasureValue!='undefined') {
if(oContext[oContext.measureNames] > referenceMeasureValue) {
if(improvementDirection == "MI")
return true;
} else if(oContext[oContext.measureNames] < referenceMeasureValue) {
if(improvementDirection == "MA")
return true;
}
} else
return false;
};
var oRule3 = function (oContext) {
var data = oVizFrame.getModel().getData().businessData;
var bindingContext = oContext._context_row_number;
var bindingData = data[bindingContext];
var referenceMeasureValue = bindingData[thresholdMeasure];
if(referenceMeasureValue==null || typeof referenceMeasureValue=='undefined') {
jQuery.sap.log.error("Threshold Measure:'"+thresholdMeasure+"' not in Dataset. Error Applying Semantic Color");
return true;
}
};
oVizFrame.setVizProperties({
plotArea : {
dataPointStyle : {
"rules":
[
{
callback: oRule1,
"properties": {
"color":"sapUiChartPaletteSemanticGoodLight1"
},
"displayName":""
},{
callback: oRule2,
properties : {
color : "sapUiChartPaletteSemanticBadLight1"
},
//'displayName': 'Profit < 0'
},{
callback: oRule3,
properties : {
color : "sapUiChartPaletteSemanticNeutralLight1"
},
//'displayName': 'Profit < 0'
}],
others : {
properties: {
color: 'sapUiChartPaletteSemanticNeutral'
}
}
}
}
});
}
});
sap.ui.view({ viewContent:document.scripts.myxml.innerText, type:sap.ui.core.mvc.ViewType.XML }).placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment