JSFiddle - React, Tailwind, and code Playground

by Gabriel de Souza

HTML

<!DOCTYPE HTML>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.viz"
				data-sap-ui-theme="sap_bluecrystal">
		</script>

		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("learning");
				var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

JavaScript

var oModel = new sap.ui.model.json.JSONModel({
			data:[
			      { country : 'China', product : 'Car', profit :132 },  
			      { country : 'France', product : 'Car', profit : 43 },  
			      { country : 'Germany', product : 'Car', profit : 34 },  
			      { country : 'USA', product : 'Car', profit : 25 },  
			      { country : 'China', product : 'Truck', profit : 78 },  
			      { country : 'France', product : 'Truck', profit : 86 },  
			      { country : 'Germany', product : 'Truck', profit : 56 },  
			      { country : 'USA', product : 'Truck', profit : 76 },  
			      { country : 'China', product : 'Motorcycle', profit : 78 },  
			      { country : 'France', product : 'Motorcycle', profit : 86 },  
			      { country : 'Germany', product : 'Motorcycle', profit : 56 },  
			      { country : 'USA', product : 'Motorcycle', profit : 76 },  
			      { country : 'China', product : 'Bicycle', profit : 78 },  
			      { country : 'France', product : 'Bicycle', profit : 86 },  
			      { country : 'Germany', product : 'Bicycle', profit : 56 },  
			      { country : 'USA', product : 'Bicycle', profit : 76 }  
			      ]
		});
		
		
		sap.ui.getCore().setModel(oModel);
		
		  var dataset = new sap.viz.ui5.data.FlattenedDataset({  
			    dimensions : [  
			      { axis : 1, name : 'Country', value : "{country}" },  
			      { axis : 2, name : 'Product', value : "{product}" }  
			    ],  
			    measures : [  
			      { name : 'Profit', value : '{profit}' }  
			    ],  
			    data : { path : "/data" }  
			  }); 
		  
			  var stacked = new sap.viz.ui5.StackedColumn("oChart",{  
			    width : "100%",  
			    height : "200px",  
			    title : { visible : true, text : 'Test Stacked Column Chart' },  
			    dataset : dataset  
			  })
		
			  //return stacked;
			  
			  var iconTabBar = new sap.m.IconTabBar({
				 
				 items:[
				      new sap.m.IconTabFilter({
				    	  icon:"sap-icon://addresses",
				    	  
				    	 content:[stacked] 
				 ...