@schneideress/dashboardframework 0.0.98 → 0.0.100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/schneideress-dashboardframework.umd.js +91 -18
- package/bundles/schneideress-dashboardframework.umd.js.map +1 -1
- package/bundles/schneideress-dashboardframework.umd.min.js +1 -1
- package/bundles/schneideress-dashboardframework.umd.min.js.map +1 -1
- package/esm2015/lib/ra-dashboard-area/ra.dashboard.area.js +12 -3
- package/esm2015/lib/ra-widget-container/ra.widget.container.component.js +53 -11
- package/esm2015/lib/ra.gridster.config.js +6 -6
- package/esm5/lib/ra-dashboard-area/ra.dashboard.area.js +24 -4
- package/esm5/lib/ra-widget-container/ra.widget.container.component.js +64 -11
- package/esm5/lib/ra.gridster.config.js +6 -6
- package/fesm2015/schneideress-dashboardframework.js +68 -17
- package/fesm2015/schneideress-dashboardframework.js.map +1 -1
- package/fesm5/schneideress-dashboardframework.js +91 -18
- package/fesm5/schneideress-dashboardframework.js.map +1 -1
- package/lib/ra-dashboard-area/ra.dashboard.area.d.ts +1 -0
- package/lib/ra-widget-container/ra.widget.container.component.d.ts +7 -0
- package/package.json +1 -1
- package/schneideress-dashboardframework.metadata.json +1 -1
|
@@ -524,13 +524,13 @@ const GridsterConfigDefaultSettings = {
|
|
|
524
524
|
minRows: 2,
|
|
525
525
|
maxRows: 100,
|
|
526
526
|
maxItemCols: 10,
|
|
527
|
-
minItemCols:
|
|
527
|
+
minItemCols: 2,
|
|
528
528
|
maxItemRows: 1000,
|
|
529
|
-
minItemRows:
|
|
529
|
+
minItemRows: 2,
|
|
530
530
|
maxItemArea: 1000,
|
|
531
|
-
minItemArea:
|
|
532
|
-
defaultItemCols:
|
|
533
|
-
defaultItemRows:
|
|
531
|
+
minItemArea: 4,
|
|
532
|
+
defaultItemCols: 2,
|
|
533
|
+
defaultItemRows: 2,
|
|
534
534
|
// fixedColWidth: 105,
|
|
535
535
|
// fixedRowHeight: 105,
|
|
536
536
|
keepFixedHeightInMobile: false,
|
|
@@ -591,6 +591,7 @@ class RADashboardArea {
|
|
|
591
591
|
this.widgetList = Array();
|
|
592
592
|
this.gridheight = 300;
|
|
593
593
|
this.isWidgetLoaded = false;
|
|
594
|
+
this.domResized = false;
|
|
594
595
|
this.widgetHeight = 3;
|
|
595
596
|
this.widgetWidth = 5;
|
|
596
597
|
}
|
|
@@ -606,6 +607,7 @@ class RADashboardArea {
|
|
|
606
607
|
*/
|
|
607
608
|
function () {
|
|
608
609
|
areaContext.setAreaHeight();
|
|
610
|
+
areaContext.domResized = !areaContext.domResized;
|
|
609
611
|
}), 1000);
|
|
610
612
|
}
|
|
611
613
|
/**
|
|
@@ -627,6 +629,11 @@ class RADashboardArea {
|
|
|
627
629
|
this.inititateEventBusSubscritions();
|
|
628
630
|
}
|
|
629
631
|
}
|
|
632
|
+
// public invokeResizeEvent() {
|
|
633
|
+
// this.widgetContainers.forEach(function(container,i){
|
|
634
|
+
// container.invokeWidgetResizedEvent();
|
|
635
|
+
// });
|
|
636
|
+
// }
|
|
630
637
|
/**
|
|
631
638
|
* To set GridsterConfig
|
|
632
639
|
* @return {?}
|
|
@@ -833,7 +840,7 @@ class RADashboardArea {
|
|
|
833
840
|
areaHeight = 600;
|
|
834
841
|
}
|
|
835
842
|
this.gridheight = areaHeight;
|
|
836
|
-
console.log('area height
|
|
843
|
+
console.log('area height adjusted1');
|
|
837
844
|
}
|
|
838
845
|
/**
|
|
839
846
|
* To remove a widget instance from dashboard and to save info in database
|
|
@@ -988,7 +995,7 @@ class RADashboardArea {
|
|
|
988
995
|
RADashboardArea.decorators = [
|
|
989
996
|
{ type: Component, args: [{
|
|
990
997
|
selector: 'ra-dashboard-area',
|
|
991
|
-
template: "<div #gridWrapper class=\"wrap gridster\" [style.height.px]=\"gridheight\" >\r\n<!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n <gridster [options]=\"options\" style=\"height:100%;\">\r\n <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\" (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\"\r\n [global-filter]=\"globalFilter\" [grid-cell-height]=\"item.widgetInfo.rowHeight\" [widget-width]=\"item.cols\" [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\"></ra-widget-container>\r\n </gridster-item>\r\n </gridster>\r\n <notifier-container></notifier-container>\r\n</div>\r\n\r\n",
|
|
998
|
+
template: "<div #gridWrapper class=\"wrap gridster\" [style.height.px]=\"gridheight\" >\r\n<!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n <gridster [options]=\"options\" style=\"height:100%;\">\r\n <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\" (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\"\r\n [global-filter]=\"globalFilter\" [grid-cell-height]=\"item.widgetInfo.rowHeight\" [widget-width]=\"item.cols\" [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"></ra-widget-container>\r\n </gridster-item>\r\n </gridster>\r\n <notifier-container></notifier-container>\r\n</div>\r\n\r\n",
|
|
992
999
|
styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#ededed;overflow-y:hidden!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;box-shadow:0 1px 10px rgba(0,0,0,.05)}gridster-item:hover{box-shadow:0 1px 10px rgba(0,0,0,.15)}"]
|
|
993
1000
|
}] }
|
|
994
1001
|
];
|
|
@@ -1044,6 +1051,8 @@ if (false) {
|
|
|
1044
1051
|
*/
|
|
1045
1052
|
RADashboardArea.prototype.isWidgetLoaded;
|
|
1046
1053
|
/** @type {?} */
|
|
1054
|
+
RADashboardArea.prototype.domResized;
|
|
1055
|
+
/** @type {?} */
|
|
1047
1056
|
RADashboardArea.prototype.userDashboardId;
|
|
1048
1057
|
/** @type {?} */
|
|
1049
1058
|
RADashboardArea.prototype.areaKey;
|
|
@@ -1116,6 +1125,8 @@ class RAWidgetContainer {
|
|
|
1116
1125
|
this.dropDownShown = false;
|
|
1117
1126
|
this.isDownloadChartVisible = false;
|
|
1118
1127
|
this.enableTitleLine = false;
|
|
1128
|
+
this.toolTipValue = ' ';
|
|
1129
|
+
this.toolTipWidth = '0px';
|
|
1119
1130
|
this.widgetDeleted = new EventEmitter();
|
|
1120
1131
|
this.renderer.listen('window', 'click', (/**
|
|
1121
1132
|
* @param {?} e
|
|
@@ -1136,6 +1147,13 @@ class RAWidgetContainer {
|
|
|
1136
1147
|
}
|
|
1137
1148
|
}));
|
|
1138
1149
|
}
|
|
1150
|
+
/**
|
|
1151
|
+
* @param {?} resized
|
|
1152
|
+
* @return {?}
|
|
1153
|
+
*/
|
|
1154
|
+
set setResized(resized) {
|
|
1155
|
+
this.invokeWidgetResizedEvent();
|
|
1156
|
+
}
|
|
1139
1157
|
/**
|
|
1140
1158
|
* @param {?} changes
|
|
1141
1159
|
* @return {?}
|
|
@@ -1160,14 +1178,20 @@ class RAWidgetContainer {
|
|
|
1160
1178
|
}
|
|
1161
1179
|
if (changes.width && changes.width.currentValue != changes.width.previousValue ||
|
|
1162
1180
|
(changes.height && changes.height.currentValue != changes.height.previousValue)) {
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1181
|
+
this.invokeWidgetResizedEvent();
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
/**
|
|
1185
|
+
* @return {?}
|
|
1186
|
+
*/
|
|
1187
|
+
invokeWidgetResizedEvent() {
|
|
1188
|
+
if (this.widgetElement) {
|
|
1189
|
+
/** @type {?} */
|
|
1190
|
+
let size = {};
|
|
1191
|
+
size.height = this.height;
|
|
1192
|
+
size.width = this.width;
|
|
1193
|
+
size.cellHeight = this.gridCellHeight;
|
|
1194
|
+
this.widgetElement.widgetResized(size);
|
|
1171
1195
|
}
|
|
1172
1196
|
}
|
|
1173
1197
|
/**
|
|
@@ -1327,6 +1351,23 @@ class RAWidgetContainer {
|
|
|
1327
1351
|
}
|
|
1328
1352
|
});
|
|
1329
1353
|
}
|
|
1354
|
+
/**
|
|
1355
|
+
* @param {?} event
|
|
1356
|
+
* @return {?}
|
|
1357
|
+
*/
|
|
1358
|
+
mouseOver(event) {
|
|
1359
|
+
this.toolTipValue = ' ';
|
|
1360
|
+
this.toolTipWidth = '0px';
|
|
1361
|
+
/** @type {?} */
|
|
1362
|
+
let element = this.searchInput.nativeElement;
|
|
1363
|
+
if (element.offsetWidth < element.scrollWidth) {
|
|
1364
|
+
this.toolTipValue = element.innerHTML;
|
|
1365
|
+
this.toolTipWidth = '300px';
|
|
1366
|
+
}
|
|
1367
|
+
else {
|
|
1368
|
+
this.toolTipWidth = '0px';
|
|
1369
|
+
}
|
|
1370
|
+
}
|
|
1330
1371
|
/**
|
|
1331
1372
|
* @private
|
|
1332
1373
|
* @param {?} config
|
|
@@ -1435,7 +1476,7 @@ class RAWidgetContainer {
|
|
|
1435
1476
|
RAWidgetContainer.decorators = [
|
|
1436
1477
|
{ type: Component, args: [{
|
|
1437
1478
|
selector: 'ra-widget-container',
|
|
1438
|
-
template: "<div class=\"wc-wrapper\" (mouseleave)=\"hideDropDown()\">\r\n <div class=\"wcheader widget-move\" [ngClass]=\"{'underLine': enableTitleLine}\">\r\n <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;\">\r\n <div style=\"display:flex;margin-top:10px;\">\r\n\r\n <div class=\"col-md-11 float-left title-label\">\r\n <ra-tooltip
|
|
1479
|
+
template: "<div class=\"wc-wrapper\" (mouseleave)=\"hideDropDown()\">\r\n <div class=\"wcheader widget-move\" [ngClass]=\"{'underLine': enableTitleLine}\">\r\n <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;\">\r\n <div style=\"display:flex;margin-top:10px;\">\r\n\r\n <div class=\"col-md-11 float-left title-label\">\r\n <ra-tooltip [value]=\"toolTipValue\" [width]=\"toolTipWidth\">\r\n <div style=\"text-overflow: ellipsis;white-space: nowrap;overflow: hidden;\" (mouseover)=\"mouseOver($event)\"\r\n #searchInput>{{data.widgetInfo.widgetTitle}}</div>\r\n </ra-tooltip>\r\n </div>\r\n\r\n\r\n <div class=\"col-md-1\" style=\"cursor:default;padding-right: 0px;\">\r\n <div class=\"float-right\" style=\"display: flex;\">\r\n <div class=\"title-bar-icon download download-icon\" *ngIf=\"isDownloadIconVisible\">\r\n <i class=\"fal fa-download\" (mouseover)=\"setDownloadIcon()\" #widgetDownload\r\n (click)=\"downloadClicked()\"></i>\r\n <div class=\"download-content\" [ngClass]=\"{'dropdown-click': isDownloadChartVisible}\">\r\n <a (click)=\"downloadIconClicked('PNG')\">\r\n <i class=\"fal fa-file-image\"></i>\r\n <span>{{'PNG'|translate}}</span>\r\n </a>\r\n <a (click)=\"downloadIconClicked('JPEG')\">\r\n <i class=\"fal fa-file\"></i>\r\n <span>{{'JPEG'|translate}}</span>\r\n </a>\r\n <a (click)=\"downloadIconClicked('PDF')\">\r\n <i class=\"fal fa-file-pdf\"></i>\r\n <span>{{'PDF'|translate}}</span>\r\n </a>\r\n <a (click)=\"downloadIconClicked('SVG')\">\r\n <i class=\"fal fa-file-alt\"></i>\r\n <span>{{'SVG'|translate}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"dropdown\">\r\n <div class=\"dropbtn title-bar-icon\"> <i #widgetDropdown class=\"fal fa-cog\" (click)=\"showDropDown()\"></i>\r\n </div>\r\n <div class=\"dropdown-content widget-config-item\" [ngClass]=\"{'dropdown-click': dropDownShown}\">\r\n <a (click)=\"editWidget()\">\r\n <i class=\"fal fa-edit\"></i>\r\n <span>{{'Edit'|translate}}</span>\r\n </a>\r\n <a (click)=\"copyWidget()\">\r\n <i class=\"fal fa-copy\"></i>\r\n <span>{{'Copy'|translate}}</span>\r\n </a>\r\n <a (click)=\"moveWidget()\">\r\n <i class=\"fal fa-arrows-alt\"></i>\r\n <span>{{'Move'|translate}}</span>\r\n </a>\r\n <hr class=\"hr\">\r\n <a (click)=\"deleteWidget()\">\r\n <i class=\"fal fa-times\" style=\"padding-left: 3px;\"></i>\r\n <span>{{'Delete'|translate}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <ra-tooltip [value]=\"lockTitle\" [width]=\"'300px'\">\r\n <div class=\"title-bar-lock-icon\">\r\n <i [ngClass]=\"lockClass\"></i>\r\n\r\n </div>\r\n </ra-tooltip>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wcBody\">\r\n <div class=\"m-fadeOut widget-overlay\" [ngClass]=\"{'m-fadeIn': showPanel}\">\r\n <div class=\"lds-roller\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </div>\r\n <perfect-scrollbar [scrollIndicators]=\"true\">\r\n <div #ctlWidget></div>\r\n </perfect-scrollbar>\r\n </div>\r\n</div>",
|
|
1439
1480
|
styles: [".wcheader{width:100%;height:45px;background:#fff;color:#3dcd58;position:absolute;left:0;top:0}.underLine{border-bottom:2px solid #d4d7d8}.wc-wrapper{height:100%;position:relative;margin:auto 15px}.wc-mover{cursor:all-scroll}.wcBody{width:100%;position:absolute;top:46px;left:0;bottom:15px}.wcBodyBorder{border:1px dashed #e6e2e2}.sp_icon{float:left;margin:0 15% 0 0}.dropbtn{cursor:pointer;color:#42b4e6}.dropdown{visibility:hidden;opacity:0;transition:visibility,opacity .5s linear;position:relative}.dropdown hr{margin:0!important}.dropdown-content{display:none;position:absolute;right:0;background-color:#f9f9f9;min-width:100px;box-shadow:0 8px 16px 8px rgba(0,0,0,.2);z-index:2;font-size:12px;font-weight:400}.dropdown-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown-click{display:block!important;-webkit-animation:.3s ease-out slide-down;animation:.3s ease-out slide-down}.download-icon{cursor:pointer}.dropdown:hover .dropdown-content{color:#fff}.wc-wrapper:hover .dropdown{visibility:visible;opacity:1}.title-bar-icon{margin:0 3px;color:#42b4e6}.title-bar-lock-icon{margin:0 3px}.hr{border:0;border-top:1px solid rgba(0,0,0,.1)}@keyframes slide-down{0%{opacity:0;transform:translateY(-20%)}100%{opacity:1;transform:translateY(0)}}@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-20%)}100%{opacity:1;-webkit-transform:translateY(0)}}.widget-config-item i{font-size:17px;color:#42b4e6}.widget-config-item span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}.locked{color:#42b4e6}.partiallocked{color:#a0d9f2}.unlocked{display:none}.download{visibility:hidden;opacity:0;transition:visibility,opacity .5s linear;position:relative}.wc-wrapper:hover .download{visibility:visible;opacity:1}.download-content{display:none;position:absolute;right:0;background-color:#f9f9f9;min-width:100px;box-shadow:0 8px 16px 8px rgba(0,0,0,.2);z-index:2;font-size:12px;font-weight:400}.download-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.download-content a:hover{background-color:#f1f1f1}.download-content a i{font-size:17px;color:#42b4e6}.download-content a span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}.title-label{width:96%;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}"]
|
|
1440
1481
|
}] }
|
|
1441
1482
|
];
|
|
@@ -1452,6 +1493,7 @@ RAWidgetContainer.propDecorators = {
|
|
|
1452
1493
|
ctlWidget: [{ type: ViewChild, args: ['ctlWidget', { static: false },] }],
|
|
1453
1494
|
widgetDropdown: [{ type: ViewChild, args: ['widgetDropdown', { static: false },] }],
|
|
1454
1495
|
widgetDownload: [{ type: ViewChild, args: ['widgetDownload', { static: false },] }],
|
|
1496
|
+
searchInput: [{ type: ViewChild, args: ['searchInput', { static: false },] }],
|
|
1455
1497
|
widgetInstanceId: [{ type: Input, args: ['widget-instance-id',] }],
|
|
1456
1498
|
globalFilter: [{ type: Input, args: ['global-filter',] }],
|
|
1457
1499
|
data: [{ type: Input, args: ['data',] }],
|
|
@@ -1460,7 +1502,8 @@ RAWidgetContainer.propDecorators = {
|
|
|
1460
1502
|
width: [{ type: Input, args: ['widget-width',] }],
|
|
1461
1503
|
height: [{ type: Input, args: ['widget-height',] }],
|
|
1462
1504
|
gridCellHeight: [{ type: Input, args: ['grid-cell-height',] }],
|
|
1463
|
-
widgetDeleted: [{ type: Output }]
|
|
1505
|
+
widgetDeleted: [{ type: Output }],
|
|
1506
|
+
setResized: [{ type: Input, args: ['dom-resized',] }]
|
|
1464
1507
|
};
|
|
1465
1508
|
if (false) {
|
|
1466
1509
|
/** @type {?} */
|
|
@@ -1502,12 +1545,18 @@ if (false) {
|
|
|
1502
1545
|
/** @type {?} */
|
|
1503
1546
|
RAWidgetContainer.prototype.enableTitleLine;
|
|
1504
1547
|
/** @type {?} */
|
|
1548
|
+
RAWidgetContainer.prototype.toolTipValue;
|
|
1549
|
+
/** @type {?} */
|
|
1550
|
+
RAWidgetContainer.prototype.toolTipWidth;
|
|
1551
|
+
/** @type {?} */
|
|
1505
1552
|
RAWidgetContainer.prototype.ctlWidget;
|
|
1506
1553
|
/** @type {?} */
|
|
1507
1554
|
RAWidgetContainer.prototype.widgetDropdown;
|
|
1508
1555
|
/** @type {?} */
|
|
1509
1556
|
RAWidgetContainer.prototype.widgetDownload;
|
|
1510
1557
|
/** @type {?} */
|
|
1558
|
+
RAWidgetContainer.prototype.searchInput;
|
|
1559
|
+
/** @type {?} */
|
|
1511
1560
|
RAWidgetContainer.prototype.widgetInstanceId;
|
|
1512
1561
|
/** @type {?} */
|
|
1513
1562
|
RAWidgetContainer.prototype.globalFilter;
|
|
@@ -1527,6 +1576,8 @@ if (false) {
|
|
|
1527
1576
|
RAWidgetContainer.prototype.widgetDeleted;
|
|
1528
1577
|
/** @type {?} */
|
|
1529
1578
|
RAWidgetContainer.prototype.lockTitle;
|
|
1579
|
+
/** @type {?} */
|
|
1580
|
+
RAWidgetContainer.prototype.domResized;
|
|
1530
1581
|
/**
|
|
1531
1582
|
* @type {?}
|
|
1532
1583
|
* @private
|