supercredit_com_broker/front-end/js/summary.js

var layout= {
    id: 'summary_layout',
    css: 'summary_layout',
	"rows": [
        {
            view: "toolbar", id:"topMenu", elements:[
              {
                view: "icon", icon: "mdi mdi-menu",
                click: function(){
                  return ; //disable side menu
                  if( $$("menu").config.hidden){
                    $$("menu").show();
                  }
                  else
                    $$("menu").hide();
                }
              },
              {
                view: "label",
                label: "Supercredit Transactions"
              }
            ]
        },
        { id:"workspace", rows:[
            { template:"loading ...." }
        ]},
        { "view": "template", id:"footer", css: "footer",  "template": "", "role": "placeholder", "height": 20 }
	]
}

//main area
webix.ui(layout)

//side menu
webix.ready(function(){
    webix.ui({
        view: "sidemenu",
        id: "menu",
        width: 200,
        position: "left",
        state:function(state){
          var toolbarHeight = $$("header").$height;
          state.top = toolbarHeight;
          state.height -= toolbarHeight;
        },
        css: "my_menu",
        body:{
          view:"list",
          borderless:true,
          scroll: false,
          template: "<span class='webix_icon mdi mdi-#icon#'></span> #value#",
          data:[
            {id: 1, value: "All", icon: "briefcase-account"},
            {id: 2, value: "upfront", icon: "account-arrow-left"},
            {id: 3, value: "Trail", icon: "account"},
            {id: 4, value: "Procesing", icon: "cube"},
            {id: 5, value: "App in Progress", icon: "chart-bar"},
            {id: 6, value: "Approved", icon: "database"},
            {id: 7, value: "Settled", icon: "cash-usd"},
            {id: 8, value: "Finished", icon: "cogs"}
          ],
          select:true,
          type:{
            height: 40
          }
        }
      });
    

    initTopMenu($$('summary_layout'), $$('topMenu'));
});


//summary data
var summary_graph = {
	"cols": [
		{
            "width": 200,
            "css" : "Label",
			"rows": [
				{ "padding": { "left": 10 },
					"cols": [
						{ "view": "label", "label": "Brokers" },
						{ "view": "icon", "icon": "wxi-search" }
					]
				},
				{ "view": "list", "url": "data/staff.json", "select": "true" }
			]
		},
		{
			"rows": [
                {
                    "view":"timeline", 
                    "layout": "x",
                    "height": 200,
                    "data": demo_summary_loan_counts,
                    "scroll": false
                },
				{
					"cols": [
                        { "view": "chart", "width": 400, "pieInnerText": "#value#", "label": "#month#", "url": "data/demo_chart.json" },
                        { "view": "chart", "type": "spline", "xAxis": { "template": "#value#", "lines": false },
                            "yAxis": {},
                            "url": "data/demo_chart.json"
                        },
    
						{ "view": "chart", "type": "barH", "yAxis": { "template": "#value#" },
							"xAxis": {},
							"color": "#color#",
							"url": "data/demo_chart.json"
						}
					]
				},
				{
					"view": "datatable",
					"columns": [
						{ "id": "title", "header": "Loan description", "fillspace": true, "sort": "string" },
						{ "id": "year", "header": "Date", "sort": "string" },
						{ "id": "votes", "header": "Loan Amount", "sort": "string" },
						{ "id": "rating", "header": "Upfront", "sort": "string" },
						{ "id": "rank", "header": "Tail paid", "sort": "string" },
						{ "id": "category", "header": "Lender", "sort": "string", "width": 200 }
					],
					"url": "data/demo_table.json"
				}
			]
		}
	]
}

function show_summary() {
  webix.ui(summary_graph, $$('summary_layout').getChildViews()[1]);
}

webix.ready(function(){
    show_summary();
});