TABLE OF CONTENTS


1. Adding new widget

POST http://localhost:4200/dashboard/api/widgets(URL)

{
  
"selector":"<widget key>",
  
"name":"<widget name>",
  
"config":"<configuration>",
  
"isPublic":false,
  
"dashboard":{
    
"id"<dashboard id>

}
}


2. Widget “Welcome”



Picture 35. Welcome widget

  • selector key ext-common/xm-widget-welcome

  • imageSrc - specifies the URL of an image

  • title - title name (Welcome to the XME.digital! default value)

  • subtitle - title name (This is your homepage default value)


Request example:

{  
  
"selector":"ext-common/xm-widget-welcome",
  
"name":"Welcome",
  
"config":{
    
"title":"New title",
    
"subtitle":"New sub title"
},
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}

3.  Widget “Sign-in/Sign-up”


Picture 36

  • selector keyxm-widget-sign-in-up

  • signUpEnabled - to hide registration posibilitites from widget (default value is true)

  • privacyAndTermsEnabled - to hide terms conditions and privacy policy agreemnet in registration (default value is false)

  • privacyAndTerms - localized list with links to markdown resources (example: { "en": "<link>" })


Request example:

{  
  
"selector":"xm-widget-sign-in-up",
  
"name":"Sign-in/Sign-up",
  
"config":{  
    
"signUpEnabled":false
},
  
"isPublic":false,
  
"dashboard":{  
    
"id":951
}
}


4. Widget “Entity”


Picture 37

  • selector key - ext-common-entity/xm-widget-entity

  • grid - contains row elements to build a layout

    • class - row classes (example: row)

    • content - contains column elements for build a layout

      • class - column classes (example: col-sm-6 col-sm-offset-3)

      • component - entity component name. It could be:

        • entity-card

        • entity-data-card

        • function-list-card

        • attachment-list

        • location-list-card

        • link-list

        • comment-list

        • calendar-card

        • timeline

Request example:

{
  
"selector""ext-common-entity/xm-widget-entity",
  
"name""Entity details",
  
"isPublic"false,
  
"config": {
    
"grid": [
{
        
"class""row",
        
"content": [
{
            
"class""col-sm-6 col-sm-offset-3",
            
"component""entity-card"
}
]
}
]
},
  
"dashboard": {
    
"id"951

}
}


5. Widget “Stats”


Picture 38

  • selector key - xm-widget-stats

  • stats - tag contains an array with configuration for each statistic block

    • name - name of statistic block

    • color - color of statistic block

    • icon - icon of statistic block based on Google Material Icons

    • query - search query based on Query Syntax. Total count header of query uses.


Request example:

{  
   
"selector":"xm-widget-stats",
   
"name":"Statistic",
   
"config":{  
      
"stats":[  
{
            "name":"Active accounts",
            
"color":"blue",
            
"icon":"account_circle",
            
"query":"typeKey:ACCOUNT* AND stateKey:ACTIVE"
},
{
            
"name":"Cars in move",
            
"color":"orange",
            
"icon":"directions_car",
            
"query":"typeKey:RESOURCE.CAR AND data.isMoving:true"
},
{
            
"name":"Cars in service",
            
"color":"red",
            
"icon":"warning",
            
"query":"typeKey:RESOURCE.CAR AND stateKey:'IN-SERVICE'"
},
{
            
"name":"Charging stations",
            
"color":"green",
            
"icon":"ev_station",
            
"query":"typeKey:'RESOURCE.CHARGING-POINT'"
}
]
},
   
"isPublic":false,
   
"dashboard":{  
      
"id":951

}
}


6. Widget “General Map”


Picture 39

  • selector key ext-common-entity/xm-widget-general-map

  • groups - each groups will be present as button switcher with own visualization on the map

    • name - name of group of markers

    • color - hexidecimal color for marker pin on the map

    • query - search query based on Query Syntax. XM Entities locations of query uses.


Request example:

{  
  
"selector":"ext-common-entity/xm-widget-general-map",
  
"name":"Available cars",
  
"config":{  
    
"groups":[  
{
        
"name":"In use",
        
"color":"#4CAF50",
        
"query":"stateKey:'IN-USE' AND locations.typeKey:RESOURCE.CAR.CURRENT-LOCATION AND locations.longitude:* AND locations.latitude:*"
},
{
        
"name":"Available",
        
"color":"#CDDC39",
        
"query":"stateKey:AVAILABLE AND locations.typeKey:RESOURCE.CAR.CURRENT-LOCATION AND locations.longitude:* AND locations.latitude:*"
}
]
},
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}


7. Widget “Weather”


Picture 40

  • selector key - ext-common/xm-widget-weather

  • city - city name geocoding


Request example:

{  
  
"selector":"ext-common/xm-widget-weather",
  
"name":"Weather",
  
"config":{  
    
"city":"Kiev, Ukraine"
},
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}


8.  Widget “Clock”


Picture 41


  • selector key - ext-common/xm-widget-clock


Request example:

{  
  
"selector":"ext-common/xm-widget-clock",
  
"name":"Local time",
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}


9. Widget “News”


Picture 42

  • selector key - ext-common/xm-widget-news

  • url - URL to the RRS content

  • size - count of news in widget that will be shown


Request example:

{  

  "selector":"ext-common/xm-widget-news",

  "name": "Banknote News",

  "config": {

    "size": 3,

    "url": "http://www.banknotenews.com/files/banknotenews.xml"

  },

  "isPublic":false,

  "dashboard":{  

    "id":951

  }

}


10. Widget “Markdown”


Picture 43


  • selector key - xm-widget-md

  • content - markdown content

  • isEditable - to provide possibility edit content


Request example:

{  
  
"selector":"xm-widget-md",
  
"name":"Some rich text",
  
"config":{  
    
"content":"# Header",
    
"isEditable":true
},
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}


11.  Widget “Active Calls”


Picture 44

The widget uses Asterisk ARI interface and gets channels via credentials asterisk/asterisk. More about ARI API: List all active channels in Asterisk.

  • selector key - xm-widget-active-calls


Request example:

{  
  
"selector":"xm-widget-active-calls",
  
"name":"Active calls",
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}


12. Widget “Tasks”


Picture 45


  • selector key - ext-common-entity/xm-widget-tasks

  • rootTypeKey - root type key for tasks visualization. 


XM Entity specification example:

 keyTASK
      
name{ en: "Task", ru: "Задача" }
      
isApptrue
      
isAbstracttrue
      
iconassignment_turned_in
      
states:
          - 
keyTODO
            
name{ en: "TODO", ru: "TODO" }
            
iconplay_arrow
            
color'#4CAF50'
            
next:
                - 
stateKeyDONE
                  
name{ en: "DONE", ru: "DONE" }
                - 
stateKeyREJECTED
                  
name{ en: "To rejected", ru: "Отклонить" }
          - 
keyDONE
            
name{ en: "DONE", ru: "DONE" }
            
iconstop
            
color'#000000'
            
next:
                - 
stateKeyTODO
                  
name{ en: "TODO", ru: "TODO" }
                - 
stateKeyREJECTED
                  
name{ en: "To rejected", ru: "Отклонить" }
          - 
keyREJECTED
            
name{ en: "Rejected", ru: "Отклонена" }
            
iconclose
            
color'#FF5722'
            
next:
                - 
stateKeyTODO
                  
name{ en: "TODO", ru: "TODO" }
                - 
stateKeyDONE
                  
name{ en: "DONE", ru: "DONE" }
    - 
keyTASK.NEW-FEATURE
      
name{ en: "New feature", ru: "Новая функция" }
      
isAppfalse
      
isAbstractfalse
    - 
keyTASK.UX-UI
      
name{ en: "UX/UI", ru: "UX/UI" }
      
isAppfalse
      
isAbstractfalse
    - 
keyTASK.CONFIGURATION
      
name{ en: "Configuration", ru: "Конфигурация" }
      
isAppfalse
      
isAbstractfalse
    - 
keyTASK.DEFECT
      
name{ en: "Defect", ru: "Дефект" }
      
isAppfalse
      
isAbstract
false


Request example:

{  
  
"selector":"ext-common-entity/xm-widget-tasks",
  
"name":"Tasks",
  
"config":{  
    
"rootTypeKey":"TASK"
},
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}


13. Widget “Entities list”


Picture 46


  • selector key - ext-common-entity/xm-widget-entities-list

  • entities - tag contains array with configuration for each entity

    • typeKey - entity key from Entity Specification

    • query - search query based on Query Syntax without typeKey field.

    • name - entity localized name via map structure. For example: { "en": "Cars", "ru": "Машины" }

    • fastSearch - Fast Search functionality used to speed up entities selection on the widget page

      • name - name of searchable section

      • query - search query based on Query Syntax

    • fields - tag contains array with displayed fields

      • field - name of general entity or dataSpec parameters. For example: namedescriptiondata.vin, etc.

      • title - column localized name via map structure

      • action - container for the action button configuration

        • name - action button localized name via map structure

        • functionKey - LEP function name with action logic


Request example:

{
"id": 1152,
"selector": "ext-common-entity/xm-widget-entities-list",
"name": "Entities list",
"config": {
"entities": [
{
"typeKey": "APPLICATION",
"name": {
"en": "My Applications"
},
"fields": [
{
"field": "name",
"title": {
"en": "Name"
}
},
{
"field": "stateKey",
"title": {
"en": "State"
}
},
{
"field": "startDate",
"title": {
"en": "Created"
}
},
{
"action": {
"functionKey": "START-TEST",
"name": {
"en": "Start test"
}
}
}
]
}
]
},
    "isPublic": 
false,
"dashboard": {
      "id": 
1102

}
  }


14. Widget “Available offerings”


Picture 47


  • selector key - ext-common-entity/xm-widget-available-offerings

  • query - search query based on Query Syntax

  • functionKey - alternative option to search available offerings through the LEP function call. It should be used without query. LEP function could implement business logic: exclude already ordered offerings, provisioning, charging, etc.

  • action - container for the action button configuration

    • enabled true to show action button (default value is false)

    • name - action button localized name via map structure

    • functionKey - LEP function name with action logic

Request example:

{  
  
"selector":"ext-common-entity/xm-widget-available-offerings",
  
"name":"Job profiles",
  
"config":{  
    
"query":"typeKey:JOB-PROFILE AND stateKey:NEW"
},
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}


15. Widget “Lots”


Picture 48

  • selector key - xm-widget-lots

Request example:

{  
  
"selector":"xm-widget-lots",
  
"name":"Lots",
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}


16. Widget “Chartist line”


Picture 49


  • selector key - ext-common-entity/xm-widget-chartist-line

  • name - name of chart list

  • size - count of points by X coordinates

  • series - tag contains array with configuration for each chart line block (Limitation: it implemented only for one series)

    • name - name of chart line block

    • query - search query based on Query Syntax. Total count header of query uses.

    • sort - is used to sort the data by field in ascending or descending order

    • labelSelector - data selector for the labels - X coordinates labels

    • seriesSelector - data selector for the values - Y values

  • options - tag contains array with configuration params specified for Chartist Line chart

    • axisX - options for X-Axis

      • offset - the offset of the labels to the chart area

      • position - the position where labels are placed. Can be set to start or end where start is equivalent to left or top on the vertical axis and end is equivalent to right or bottom on the horizontal axis.

      • labelOffset - allows correcting label positioning on this axis by positive or negative x and y offset. { x: -20, y: 0 }

      • showLabel - if labels should be shown or not

      • showGrid - if the axis grid should be drawn or not

      • labelInterpolationFnc - interpolation function that allows you to intercept the value from the axis label

      • type - set the axis type to be used to project values on this axis. If not defined, Chartist.StepAxis will be used for the X-Axis, where the ticks option will be set to the labels in the data and the stretch option will be set to the global fullWidth option. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.

    • axisY - options for Y-Axis

      • offset - the offset of the labels to the chart area

      • position - the position where labels are placed. Can be set to start or end where start is equivalent to left or top on the vertical axis and end is equivalent to right or bottom on the horizontal axis.

      • labelOffset - allows correcting label positioning on this axis by positive or negative x and y offset. `{ x: 0, y: 0 }

      • showLabel - if labels should be shown or not

      • showGrid - if the axis grid should be drawn or not

      • labelInterpolationFnc - interpolation function that allows you to intercept the value from the axis label

      • type - set the axis type to be used to project values on this axis. If not defined, Chartist.AutoScaleAxis will be used for the Y-Axis, where the high and low options will be set to the global high and low options. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.

      • scaleMinSpace - this value specifies the minimum height in pixel of the scale steps

      • onlyInteger - use only integer values (whole numbers) for the scale steps

    • width - specify a fixed width for the chart as a string (i.e. '100px' or '50%')

    • height - specify a fixed height for the chart as a string (i.e. '100px' or '50%')

    • showLine - if the line should be drawn or not

    • showPoint - if dots should be drawn or not

    • showArea - if the line chart should draw an area

    • areaBase - the base for the area chart that will be used to close the area shape (is normally 0)

    • lineSmooth - specify if the lines should be smoothed. This value can be true or false where true will result in smoothing using the default smoothing interpolation function Chartist.Interpolation.cardinal and false results in Chartist.Interpolation.none. You can also choose other smoothing / interpolation functions available in the Chartist.Interpolation module, or write your own interpolation function. Check the examples for a brief description.

    • low - overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value

    • high - overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value

    • chartPadding - Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}

    • fullWidth - when set to true, the last grid line on the x-axis is not drawn and the chart elements will expand to the full available width of the chart. For the last label to be drawn correctly you might need to add chart padding or offset the last label with a draw event handler.

    • reverseData - if true the whole data is reversed including labels, the series order as well as the whole series data arrays.

    • classNames - override the class names that get used to generate the SVG structure of the chart object { chart: 'ct-chart-line', label: 'ct-label', labelGroup: 'ct-labels', series: 'ct-series', line: 'ct-line', point: 'ct-point', area: 'ct-area', grid: 'ct-grid', gridGroup: 'ct-grids', vertical: 'ct-vertical', horizontal: 'ct-horizontal', start: 'ct-start', end: 'ct-end' }


Request example:

{
  
"selector":"ext-common-entity/xm-widget-chartist-line",
  
"name":"Donation Statistic",
  
"config":{  
    
"size":8,
    
"series":[  
{
        
"name":"Donation",
        
"query":"typeKey:'DONATION'",
        
"sort":"data.donationDate,desc",
        
"labelSelector":"data.donationDate",
        
"seriesSelector":"data.dailyDonation"
}
],
    
"options":{  
      
"axisY":{  
        
"showGrid":true,
        
"offset":40
},
      
"axisX":{  
        
"showGrid":false
},
      
"low":0,
      
"high":100,
      
"showPoint":true,
      
"height":"310px"
}
},
  
"isPublic":false,
  
"dashboard":{  
    
"id":951

}
}