DSS Features Enhancements V2 Technical Document for UI
- jk
- JaganKumar
Description :
This release for DSS focuses on improving user experience and ability given to the user to get
deeper insights using drill through and comparison indicators in tables.
The release includes the following features:
Breadcrumbs for better navigation
Drill through options in tables and charts
Comparison indicators in Table
Breadcrumbs for Navigation
In addition to the left navigation panel, the addition of breadcrumbs is also useful to provide a better sense of the current page insight. It is also very much helpful for mobile navigation. The user can navigate using the breadcrumbs by clicking on the required parent menu.
Technical Implementation Details:
It Works based on the Current Route URL and previous Route URL
File Details
Drill through options in tables and charts
The ability provided in DSS to configure the drill through for required options in tables as well as charts. The drill through options is useful in configuring the required hierarchy of data set. This helps users to go up to 'N' levels to get deeper insights
Technical Implementation Details:
Drill down /Drill through in Tables, is based on the drillDownChartId and filter.
Here chart id is used for the subsequent call to fetch the next table along with the applied/selected filters.
File Details
Drill throughs in piecharts :
It is Similar to Dilldown in tables, here Drill through in piecharts are based on the drillDownChartId field in the parent piechart
File Details,
Comparison Indicators in Tables
Providing better insights about the metric performances of different dimensions, a comparison indicator is required inside data tables comparing usually with a different time range (last year/last month) and what is percentage change with time.
Technical Implementation Details:
For Comparing with previous year data in every table data, the same request object will be used by changing the time range to the previous year/month/week.
File Details
The following Method along with parameters is used to fetch the previous year data.
getLastYearRequest(calledFrom, visualcode, active, filterList) after receiving last year data it is compared with current year data and will be shown insight data will be shown, comparison logic is present in uiTable.js
TimeFilter
The current time component is not very intuitive and user friendly. So New library react-date-range was used to enhance the time filter.
File Details
Event Duration Graphs
Ability to generate graphs showcasing time spent between multiple events like average turnaround time, complaint assigning time, etc.
A DSS_EVENT_DURATION_GRAPH was added in the PGR config
{
"id": 412,
"name": "DSS_EVENT_DURATION_GRAPH",
"dimensions": {
"height": 350,
"width": 7
},
"vizType": "chart",
"isCollapsible": false,
"label": "",
"charts": [
{
"id": "eventDurationGraph",
"name": "Monthly",
"code": "",
"chartType": "line",
"filter": "",
"headers": []
}
]
}API Call Role Action mapping:
S.No. | API | Action id | Roles |
|---|---|---|---|
1 |
|
|
|
2 |
|
|
|
3 |
|
|
|
4 |
|
|
|
5 |
|
|
|
6 |
|
|
|
7 |
|
|
|
8 |
|
|
|