Sbs Dashboard

This is a json driven dynamic angular dashboard library. You can install this in your angular project and directly import the DashbaordModule and simply give the backend urls for dashboard layout and data. This dashbaord is a customized version. which contain five dashboard widgets only

Usage

<app-dashboard-lib
  (statementClicked)="statementClicked($event)"
  dashboardID="sbs-dashboard"
  dashboardConfigurationApi=""
  dataApi=""
  clientId="">
</app-dashboard-lib>

This is a customized dashboard for use some special purpose. the logged in client id should be passed as the clientId parameter. StatementClicked event is a specialized event which is component specific. As the dashboard layout angular gridster library is used. As per the gidster documentation you have pass x and y coordination of widget and size of widget too.

Sample dashboard layout

{
 "dashboards":[ 
   { 
      "cols":1,
      "rows":1,
      "y":0,
      "x":0,
      "widgetId":"info-1",
      "type":"type",
      "title":"title",
      "configuration":{ 
         "color":"color"
      },
      "active":true
   },
   { 
      "cols":1,
      "rows":1,
      "y":0,
      "x":1,
      "widgetId":"info-2",
      "type":"info",
      "title":"title",
      "configuration":{ 
         "color":"color"
      },
      "active":true
   }
 ]
}

Sample dashboard data json

{
"charts":[
   {
      "widgetId":"info-1",
      "data":{ 
         "key":"value",
         "key":"value"
      }
   },
   {
      "widgetId":"info-2",
      "data":{ 
          "key":"value",
          "key":"value"
      }
   },
   {
      "widgetId":"info-3",
      "data":{ 
         "key":"value",
         "key":"value"
      }
   }
]
}

Usage about json data

this is a sample format that you should send data to library end points. You can develop your backend as per the requirement.

Currently available widget type

currently the library is supporting three types of widgets

1. info widget (info)
2. pie widget (pie)
3. statement widget (statement) **application specific widget