Sbs-dashboard NPM

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"
      }
   }
]
}