Skip to content

B
business-java
Commit c3b8d363 authored by prumde's avatar prumde
Browse files
Options

Changes for SUN CHC KPI Dashboard 

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@217000 ce508802-f39f-4f6c-b175-0d175dae99d5
parent cf769e20
Show whitespace changes
Inline Side-by-side
Showing with 527 additions and 43 deletions
webitm-dashboard/ibase/dashboard/module-resource/sfa/metadataxml/chc/chc_kpi.xml
View file @ c3b8d363
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
}, },
{ {
id: "GREEN", id: "GREEN",
expression: " 81 < data[0] ", expression: " 81 <= data[0] ",
colors: [[0, 199, 153], [248, 248, 248]] colors: [[0, 199, 153], [248, 248, 248]]
} }
] ]
...@@ -155,9 +155,11 @@ ...@@ -155,9 +155,11 @@
tooltips: { tooltips: {
callbacks: { callbacks: {
label: function(tooltipItem, data) { label: function(tooltipItem, data) {
console.log('tooltipItem', tooltipItem, data.datasets[0].dataSource) ; //console.log('tooltipItem', tooltipItem, data) ;
var currentYear = (data.datasets[0].dataSource == 'YTD') ? ' ' : ' ' + new Date().getFullYear();
var label = tooltipItem.yLabel + ' Calls on ' + tooltipItem.xLabel + ' 2020 ' + data.datasets[0].dataSource; var labelTxt = (data.datasets[0].dataSource == 'YTD') ? ' Calls in ' : ' Calls on ';
//var label = tooltipItem.yLabel + ' Calls on ' + tooltipItem.xLabel + ' 2020 ';
var label = tooltipItem.yLabel + labelTxt + tooltipItem.xLabel + currentYear;
return label; return label;
}, },
title: function(tooltipItem, data) { title: function(tooltipItem, data) {
...@@ -182,21 +184,21 @@ ...@@ -182,21 +184,21 @@
return label; return label;
} }
}, },
fontSize: 8 fontSize: 7
} }
} }
], ],
yAxes: [ yAxes: [
{ {
ticks: { ticks: {
callback: function( label, index, labels ) { fontSize: 10,
if ( /\s/.test( label ) ) { beginAtZero: true,
return label.split( " " ); min: 0,
} else { callback: function(value, index, values) {
return label; if (Math.floor(value) === value) {
return value;
}
} }
},
fontSize: 10
} }
} }
] ]
...@@ -257,7 +259,7 @@ ...@@ -257,7 +259,7 @@
x_column: 'X_VALUE', x_column: 'X_VALUE',
x_column_label: 'Duration', x_column_label: 'Duration',
y_column: 'ACTUAL_VALUE', y_column: 'ACTUAL_VALUE',
y_column_label: 'Orders', y_column_label: 'Orders ( in \u20B9 )',
datasets: [ datasets: [
{ {
fill: true, fill: true,
...@@ -278,8 +280,11 @@ ...@@ -278,8 +280,11 @@
tooltips: { tooltips: {
callbacks: { callbacks: {
label: function(tooltipItem, data) { label: function(tooltipItem, data) {
console.log('tooltipItem', tooltipItem, data) ; //console.log('tooltipItem', tooltipItem, data) ;
var label = tooltipItem.yLabel + ' Orders on ' + tooltipItem.xLabel + ' 2020 '; var currentYear = (data.datasets[0].dataSource == 'YTD') ? ' ' : ' ' + new Date().getFullYear();
var labelTxt = (data.datasets[0].dataSource == 'YTD') ? ' Orders in ' : ' Orders on ';
//var label = tooltipItem.yLabel + ' Orders on ' + tooltipItem.xLabel + ' 2020 ';
var label = '\u20B9 ' + tooltipItem.yLabel + labelTxt + tooltipItem.xLabel + currentYear;
return label; return label;
}, },
title: function(tooltipItem, data) { title: function(tooltipItem, data) {
...@@ -304,21 +309,21 @@ ...@@ -304,21 +309,21 @@
return label; return label;
} }
}, },
fontSize: 8 fontSize: 7
} }
} }
], ],
yAxes: [ yAxes: [
{ {
ticks: { ticks: {
callback: function( label, index, labels ) { fontSize: 10,
if ( /\s/.test( label ) ) { beginAtZero: true,
return label.split( " " ); min: 0,
} else { callback: function(value, index, values) {
return label; if (Math.floor(value) === value) {
return value;
}
} }
},
fontSize: 10
} }
} }
] ]
...@@ -398,8 +403,11 @@ ...@@ -398,8 +403,11 @@
tooltips: { tooltips: {
callbacks: { callbacks: {
label: function(tooltipItem, data) { label: function(tooltipItem, data) {
console.log('tooltipItem', tooltipItem, data) ; //console.log('tooltipItem', tooltipItem, data) ;
var label = tooltipItem.yLabel + ' Items on ' + tooltipItem.xLabel + ' 2020 '; var currentYear = (data.datasets[0].dataSource == 'YTD') ? ' ' : ' ' + new Date().getFullYear();
var labelTxt = (data.datasets[0].dataSource == 'YTD') ? ' Items in ' : ' Items on ';
//var label = tooltipItem.yLabel + ' Items on ' + tooltipItem.xLabel + ' 2020 ';
var label = tooltipItem.yLabel + labelTxt + tooltipItem.xLabel + currentYear;
return label; return label;
}, },
title: function(tooltipItem, data) { title: function(tooltipItem, data) {
...@@ -424,21 +432,21 @@ ...@@ -424,21 +432,21 @@
return label; return label;
} }
}, },
fontSize: 8 fontSize: 7
} }
} }
], ],
yAxes: [ yAxes: [
{ {
ticks: { ticks: {
callback: function( label, index, labels ) { fontSize: 10,
if ( /\s/.test( label ) ) { beginAtZero: true,
return label.split( " " ); min: 0,
} else { callback: function(value, index, values) {
return label; if (Math.floor(value) === value) {
return value;
}
} }
},
fontSize: 10
} }
} }
] ]
...@@ -476,12 +484,9 @@ ...@@ -476,12 +484,9 @@
charts_config: { charts_config: {
image: 'total_calls.svg', image: 'total_calls.svg',
title_column: 'Total Calls', title_column: 'Total Calls',
theme : 'violet' theme : 'violet',
},
chart_properties: {
chartType: 'percentage',
labels: [''],
options: { options: {
percentFactorColumn: 'TARGET_VALUE',
animateScale: true, animateScale: true,
animateRotate: true, animateRotate: true,
width: 114, width: 114,
...@@ -505,7 +510,7 @@ ...@@ -505,7 +510,7 @@
}, },
{ {
id: "GREEN", id: "GREEN",
expression: " 81 < data[0] ", expression: " 81 <= data[0] ",
colors: [[0, 199, 153], [248, 248, 248]] colors: [[0, 199, 153], [248, 248, 248]]
} }
] ]
......
webitm-dashboard/ibase/dashboard/module-resource/sfa/metadataxml/chc/landingDashboard.xml 0 → 100644
View file @ c3b8d363
<?xml version='1.0'?>
<Root>
<filters display='N'>
</filters>
<page_title><![CDATA[Dashboard Links]]></page_title>
<!--
Blue : background-image: linear-gradient(-45deg, #007bab, #00c9ff);
Orange : background-image: linear-gradient(-45deg, #e47842, #ffac83);
Voilate : background-image: linear-gradient(-45deg, #7053cc, #c3b3f7);
Green : background-image: linear-gradient(-45deg, #01a27f, #00e1af);
Gray : background-image: linear-gradient(-45deg, #333333, #666666);
-->
<datasource id='1' dataSourceType='jsondata'><![CDATA[{
"image" : "logo_company.png",
"title" : "Proteus Vision",
"subtitle" : "Simple &#149; Smart &#149; Intelligent",
"kpilinks" : [
{
"bgImage":"linear-gradient(-45deg, #007bab, #00c9ff)",
"image" : "location_w.svg",
"title" : "My Places",
"count" : " getUserActSummary('PTE_COUNT') ",
"summary" : " getUserActSummary('PTE_MSG') ",
"execFunction" :"openTransactionGWT('place_time_entity','place-time-entity','A','My Places');"
},
{
"bgImage":"linear-gradient(-45deg, #7053cc, #c3b3f7)",
"image" : "content_library.svg",
"title" : "My Contents",
"count" : "getUserActSummary('CLM_COUNT')",
"summary" : "getUserActSummary('CLM_MSG')",
"execFunction" : "openTransactionGWT('content_library','dashboard_contentLibrary','A','My Contents');"
},
{
"bgImage":"linear-gradient(-45deg, #01a27f, #00e1af)",
"image" : "background_progress.svg",
"title" : "Jobs In Progress",
"count" : " getUserActSummary('JOBS_COUNT') ",
"summary" : "getUserActSummary('JOBS_MSG')",
"execFunction" : "openTransactionGWT('background_job_status','dashboard_backgroundJobStatus','A','Jobs In Progress');"
},
{
"bgImage":"linear-gradient(-45deg, #e47842, #ffac83)",
"image" : "tag.svg",
"title" : "Tagged Entries",
"count" : " getUserActSummary('TAGS_COUNT') ",
"summary" : "getUserActSummary('TAGS_MSG')",
"execFunction" : "openTransactionGWT('my_tags','my-tagging','A','Tagged Entries');"
}
],
"quicklinks" : [
{
"bgImage":"linear-gradient(-45deg,#fff,#fff)",
"image" : "call-list.svg",
"title" : "My Call List",
"subtitle1" : " getUserActSummary('CALL_LIST_COUNT') ",
"execFunction" : "openTransactionGWT('wsfa_strg_series','wsfa_strg_series','T','My Call List');",
"obj_name_rights" : "wsfa_strg_series"
},
{
"bgImage":"linear-gradient(-45deg,#fff,#fff)",
"image" : "todays.svg",
"title" : "Today's Calls",
"subtitle1" : " getTodaysDashboardStatus('CUST_TYPE') ",
"subtitle2" : " getTodaysDashboardStatus('LISTED') ",
"execFunction" : "openTransactionGWT('todays','dashboard_todays','A','Todays dashboard');",
"obj_name_rights" : "strg_meet_dcr_realtime_wiz"
},
{
"bgImage":"linear-gradient(-45deg,#fff,#fff)",
"image" : "auto_sync.svg",
"imageFunction" : " getAutoSyncImgClass() ",
"title" : "Auto Sync",
"subtitle1" : " getAutoSyncStatus('PENDING') ",
"subtitle2" : " getAutoSyncStatus('FAILED') ",
"execFunction" : "openTransactionGWT(' ','sync_dcr','G','Sync');",
"obj_name_rights" : "sync_dcr"
},
{
"bgImage":"linear-gradient(-45deg,#fff,#fff)",
"image" : "wallet.svg",
"title" : "My Expense",
"execFunction" : "openTransactionGWT('myexpensedata','dashboard_myexpensedata','A','My Expense');",
"obj_name_rights" : "my_expense"
},
{
"bgImage":"linear-gradient(-45deg,#fff,#fff)",
"image" : "kpiActivity.svg",
"title" : "CHC KPI Activity",
"execFunction" : "openTransactionGWT('chc_kpi_dm','dashboard_chc_kpi','A','CHC KPI Activity');"
}
],
"preload_functions" : [
"preloadDashboardData({'url' : '/ibase/TodaysServlet', 'value' : 'TodaysServlet', 'type' : 'servlet'});",
"preloadDashboardData({'url' : '', 'value' : 'SPRS_CUST_INFO', 'type' : 'datamodel', 'callbackJSFunction' : 'updateCacheDatamodel'});",
"preloadDashboardMetadata('customerInfo');",
"preloadDashboardData({'url' : '/ibase/rest/dashboard/userActSummary', 'value' : 'UserActSummary', 'type' : 'servlet'});"
]
}]]></datasource>
<view id='1' name='Default' type='flatonly'>
<component datasource='1' id='1' type='FEED'>
<component_icon><![CDATA[]]>
</component_icon>
<ComponentTitle><![CDATA[Dashboard Links]]></ComponentTitle>
<ComponentName><![CDATA[Dashboard Links]]></ComponentName>
<component_css><![CDATA[db-col-1]]></component_css>
<component_descr><![CDATA[]]>
</component_descr>
<layout protoType='card'>
<html><![CDATA[
<style>
.quicklink-dashboard {
display: block;
position: relative;
border-radius: 2px;
}
.quicklink-dashboard .qd-header {
display: block;
box-shadow: 0px 0px 16px -6px rgba(0,0,0,.3);
background: #465775;
color: #fff;
text-align: center;
margin: 0 8px;
padding: 0;
border-radius: 4px;
width: calc(100% - 16px);
}
.quicklink-dashboard .qd-header-content {
display: block;
color: #fff;
text-align: center;
margin: 8px 0;
padding: 16px;
}
.quicklink-dashboard .icon-circle {
margin: auto;
height: 110px;
width: 110px;
background-color: #fff;
border-radius: 50%;
text-align: center;
display: block;
}
.quicklink-dashboard .icon-circle img {
margin-top: calc(50% - 12px);
height: 24px;
}
.quicklink {
display: block;
position: relative;
margin: 8px;
border-radius: 4px;
cursor: pointer;
height: 200px;
padding: 0px !important;
/* box-shadow: 3px 3px 16px -6px rgba(0,0,0,.1), -3px 3px 16px -10px rgba(0,0,0,.1), 0px -3px 16px -10px rgba(0,0,0,.1);*/
box-shadow: 0px 0px 15px -5px rgba(0,0,0,.1), 0px 0px 0px 1px rgb(144, 157, 165,.1);
}
.quicklink-dashboard .quicklink-icon img {
text-align: center;
height: 26px;
width: 26px;
margin: 13px;
}
.quicklink-dashboard .quicklink-icon span {
font-size : 24px;
color: #666;
line-height:52px;
}
.quicklink-dashboard .quicklink-action {
color: #fff;
width: 30px;
height: 30px;
padding: 5px;
position: relative;
justify-items: flex-end;
text-align: center;
display: inline-block;
vertical-align: top;
}
.quicklink-icon .rotate {
-webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.quicklink-dashboard .first-line {
font-size: 18px;
line-height: 24px;
display: block;
}
.quicklink-dashboard .second-line {
font-size: 18px;
line-height: 16px;
display: block;
}
.quicklink-dashboard .quicklink-icon {
color: #fff;
width: 52px;
height: 52px;
padding: 0px;
background-color: rgba(0, 0, 0, .1);
margin: auto;
border-radius: 50%;
display: block;
}
.quicklink .feedContetContainer {
display: block;
color: #fff;
text-align: center;
margin: 8px;
padding: 40px 8px;
}
.quicklink-dashboard .quicklink-content {
color: #fff;
font-size: 14px;
padding-top: 8px;
}
.quicklink-content .quicklink-content-first-line {
font-size: 14px;
line-height: 24px;
color: #252525;
display: block;
}
.quicklink-content .quicklink-content-second-line {
font-size: 14px;
line-height: 16px;
color: #666;
display: block;
}
.quick-row,
.kpi-row {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.kpi-box {
height: 114px;
max-height: 114px;
/* box-shadow: 3px 3px 16px -6px rgba(0,0,0,.1), -3px 3px 16px -10px rgba(0,0,0,.1), 0px -3px 16px -10px rgba(0,0,0,.1);*/
box-shadow: 0px 0px 15px -5px rgba(0,0,0,.1), 0px 0px 0px 1px rgb(144, 157, 165,.1);
position: relative;
border-radius: 4px;
cursor: pointer;
display: flex;
flex-direction: column;
margin: 8px;
}
.kpi-header {
display: inline-block;
height: 32px;
width: 100%;
}
.kpi-icon {
color: #fff;
padding: 4px;
margin: 4px;
border-radius: 50%;
background: rgba(0, 0, 0, .1);
display: inline-block;
position: relative;
width: 20px;
height: 20px;
}
.kpi-icon img {
height: 15px;
width: 15px;
margin: 3px;
padding: 0;
}
.kpi-info {
display: flex;
position: relative;
align-items: center;
padding: 0 4px 0 0;
width: 100%;
height: 32px;
}
.kpi-info-column {
width: 100%;
text-align: center;
font-size: 10px;
color: #fff;
}
.kpi-title {
color: #fff;
font-size: 16px;
width: calc( 100% - 44px );
line-height: 32px;
display: inline-block;
position: absolute;
text-align: right;
margin: 0 8px 0 0;
}
.kpi-count-summary {
display: block;
margin: auto;
padding-bottom: 32px;
height: 50px;
}
.kpi-count {
color: #fff;
padding: 0;
font-size: 42px;
display: block;
text-align: center;
height: 36px;
line-height: 36px;
}
.kpi-summary {
color: #fff;
padding: 0;
font-size: 14px;
display: block;
text-align: center;
line-height: 14px;
}
.no-kpi-count{
height: 18px;
}
.quick-row .col,
.kpi-row .col{
float: left;
}
@media (min-width:320px) {
.kpi-card {
width: calc(100% - 16px) ;
}
.quick-card {
width: calc(100% - 16px) ;
}
}
@media (min-width:576px) {
.kpi-card {
width: calc(50% - 16px) ;
}
.quick-card {
width: calc(50% - 16px) ;
}
}
@media (min-width:768px) {
.kpi-card {
width: calc(25% - 16px) ;
}
.quick-card {
width: calc(33.33333% - 16px) ;
}
}
@media (min-width:992px) {
.kpi-card {
width: calc(25% - 16px) ;
}
.quick-card {
width: calc(33.33333% - 16px) ;
}
}
@media (min-width:1200px) {
.kpi-card {
width: calc(25% - 16px);
}
.quick-card {
width: calc(33.33333% - 16px) ;
}
}
</style>
<div class="quicklink-dashboard">
<div class="qd-header">
<div class="qd-header-content">
<span class="icon-circle"><img src='angplugin/assets/images/{{context.image != "NA" ? context.image : "logo_company.png" }}' /></span>
<span class="first-line">{{context.title != 'NA' ? context.title : "Proteus Vision" }}</span>
<span class="second-line" [innerHTML]="context.subtitle != 'NA' ? context.subtitle : 'Simple &#149; Smart &#149; Intelligent' " ></span>
</div>
</div>
<div class="kpi-row">
<div *ngFor="let kpilink of context.kpilinks" >
<ng-container *ngTemplateOutlet=" kpiLinkTemplate; context:{ $implicit: kpilink }" ></ng-container>
</div>
</div>
<div class="quick-row">
<div *ngFor="let quicklink of context.quicklinks" >
<ng-container *ngTemplateOutlet=" quickLinkTemplate; context:{ $implicit: quicklink }" ></ng-container>
</div>
</div>
</div>
<ng-template #quickLinkTemplate let-quicklink >
<div *ngIf="quicklink.displayLink == 'Y' " class="quick-card col quicklink"
[style.background-image]="quicklink.bgImage" (click)="evalFunction(quicklink.execFunction)">
<div class="feedContetContainer">
<div *ngIf="quicklink.font_icon" class="quicklink-icon">
<span [ngClass]="quicklink.font_icon"></span>
</div>
<div *ngIf="quicklink.image && quicklink.image.indexOf('/') == -1 " class="quicklink-icon">
<img src='angplugin/assets/images/svg/{{quicklink.image}}' [ngClass]="evalFunction(quicklink.imageFunction)" />
</div>
<div *ngIf="quicklink.image && quicklink.image.indexOf('/') != -1 " class="quicklink-icon">
<img src='{{quicklink.image}}' [ngClass]="evalFunction(quicklink.imageFunction)" />
</div>
<div class="quicklink-content">
<span class="quicklink-content-first-line">
{{quicklink.title}}
</span>
<span class="quicklink-content-second-line">
{{evalFunction(quicklink.subtitle1)}}
</span>
<span class="quicklink-content-second-line">
{{evalFunction(quicklink.subtitle2)}}
</span>
</div>
</div>
</div>
</ng-template>
<ng-template #kpiLinkTemplate let-quicklink >
<div class="kpi-card col kpi-box " [style.background-image]="quicklink.bgImage" (click)="evalFunction(quicklink.execFunction)">
<div class="kpi-header">
<div *ngIf="quicklink.image.indexOf('/') == -1 " class="kpi-icon">
<img src='angplugin/assets/images/svg/{{quicklink.image}}' [ngClass]="evalFunction(quicklink.imageFunction)" />
</div>
<div *ngIf="quicklink.image.indexOf('/') != -1 " class="kpi-icon">
<img src='{{quicklink.image}}' [ngClass]="evalFunction(quicklink.imageFunction)"/>
</div>
<div class="kpi-title">{{quicklink.title}}</div>
</div>
<div class="kpi-count-summary">
<span class="kpi-count" [ngClass]="{'no-kpi-count':evalFunction(quicklink.count) == ''}">{{evalFunction(quicklink.count)}}</span>
<span class="kpi-summary">{{evalFunction(quicklink.summary)}}</span>
</div>
</div>
</ng-template>
]]></html>
</layout>
</component>
</view>
</Root>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment