Commit 62296d33 authored by Davide Vernassa's avatar Davide Vernassa
Browse files

fixed minor bugs on table widget

added calculated fields and aggregations to html widget
parent b33c5688
......@@ -41,7 +41,7 @@
<div layout="column">
<md-input-container md-class="md-block">
<label>{{translate.load('sbi.cockpit.table.visualizationtype')}}</label>
<md-select ng-model="selectedColumn.visType">
<md-select ng-model="selectedColumn.visType" ng-change="changeVisType()">
<md-option ng-repeat="vType in visTypes" value="{{vType}}">
{{vType}}
</md-option>
......@@ -96,12 +96,12 @@
</md-input-container>
<button flex="10" class="md-button md-raised md-button-empty" ng-click="chooseIcon(range)" ng-style="{'background-color':range['background-color']}">
<span ng-if="!range.icon">Choose Icon</span>
<span ng-if="!range.icon" ng-style="{'color':range.color}">Choose Icon</span>
<i ng-if="range.icon" ng-class="range.icon" ng-style="{'color':range.color}"></i>
</button>
<md-input-container flex=20 class="md-block">
<label>Icon color</label>
<label>Text/icon color</label>
<color-picker options="colorPickerProperty" ng-model="range.color"></color-picker>
</md-input-container>
......@@ -140,15 +140,15 @@
<label>{{translate.load('sbi.cockpit.style.suffix')}}</label>
<input class="input_class" ng-model="selectedColumn.style.suffix">
</md-input-container>
<md-input-container flex class="md-block" class="small counter">
<!-- md-input-container flex class="md-block" class="small counter">
<label>{{translate.load('sbi.cockpit.style.format')}}</label>
<md-select aria-label="aria-label" ng-model="selectedColumn.style.format">
<md-option ng-repeat="f in formatPattern" value="{{f}}">{{f}}</md-option>
</md-select>
</md-input-container>
<md-input-container flex class="md-block" class="small counter">
</md-input-container-->
<md-input-container flex class="md-block" class="small counter" ng-if="selectedColumn.type == 'java.lang.Double' || selectedColumn.type == 'java.lang.Float'">
<label>{{translate.load('sbi.cockpit.style.precision')}}</label>
<input class="input_class" type="number" ng-model="selectedColumn.style.precision" min="0" ng-disabled="!isPrecisionEnabled()">
<input class="input_class" type="number" ng-model="selectedColumn.style.precision" min="0" >
</md-input-container>
</div>
<div flex layout="row">
......
......@@ -36,7 +36,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}
}
})
function cockpitHtmlWidgetControllerFunction(
$scope,
$mdDialog,
......@@ -55,14 +54,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
cockpitModule_properties){
//Regular Expressions used
$scope.columnRegex = /(?:\[kn-column=[\'\"]{1}([a-zA-Z0-9\_\-\s\(\)]+)[\'\"]{1}(?:\s+row=[\'\"]{1}(\d*)[\'\"]{1})?\])/g;
$scope.columnRegex = /(?:\[kn-column=\'([a-zA-Z0-9\_\-]+)\'(?:\s+row=\'(\d*)\')?(?:\s+aggregation=\'(AVG|MIN|MAX|SUM|COUNT_DISTINCT|COUNT|DISTINCT COUNT)\')?(?:\s+precision=\'(\d)\')?\])/g;
$scope.aggregationRegex = /(?:\[kn-column=[\']{1}([a-zA-Z0-9\_\-]+)[\']{1}(?:\s+aggregation=[\']{1}(AVG|MIN|MAX|SUM|COUNT_DISTINCT|COUNT|DISTINCT COUNT)[\']{1}){1}(?:\s+precision=\'(\d)\')?\])/g;
$scope.paramsRegex = /(?:\[kn-parameter=[\'\"]{1}([a-zA-Z0-9\_\-]+)[\'\"]{1}\])/g;
$scope.calcRegex = /(?:\[kn-calc=\"([\d\D]*)\"(?:\s+precision=\'(\d)\')?\])/g;
$scope.repeatIndexRegex = /\[kn-repeat-index\]/g;
$scope.gt = /(\<.*kn-.*=["].*)(>)(.*["].*\>)/g;
$scope.lt = /(\<.*kn-.*=["].*)(<)(.*["].*\>)/g;
//dataset initializing and backward compatibilities checks
if(!$scope.ngModel.dataset){$scope.ngModel.dataset = ''};
if(!$scope.ngModel.dataset){$scope.ngModel.dataset = {}};
if($scope.ngModel.datasetId){
$scope.ngModel.dataset.dsId = $scope.ngModel.datasetId;
delete $scope.ngModel.datasetId;
......@@ -81,7 +82,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
$scope.reinit = function(){
$scope.showWidgetSpinner();
if($scope.ngModel.dataset){
if($scope.ngModel.dataset && $scope.ngModel.dataset.dsId){
sbiModule_restServices.restToRootProject();
var dataset = cockpitModule_datasetServices.getDatasetById($scope.ngModel.dataset.dsId);
......@@ -92,13 +93,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
$scope.params[p] = $scope.params[p][0];
}
}
sbiModule_restServices.promisePost("2.0/datasets", encodeURIComponent(dataset.label) + "/data?nearRealtime=" + !dataset.useCache,$scope.params && JSON.stringify({"parameters": $scope.params})).then(function(data){
$scope.htmlDataset = data.data;
$scope.manageHtml();
},function(error){
$scope.hideWidgetSpinner();
});
cockpitModule_datasetServices.loadDatasetRecordsById($scope.ngModel.dataset.dsId, 0, -1, undefined, undefined, $scope.ngModel, undefined).then(
function(data){
$scope.htmlDataset = data;
$scope.manageHtml();
},function(error){
$scope.hideWidgetSpinner();
});
}else {
$scope.trustedCss = $sce.trustAsHtml('<style>'+$scope.ngModel.cssToRender+'</style>');
$scope.trustedHtml = $sce.trustAsHtml($scope.ngModel.htmlToRender);
......@@ -125,6 +126,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
function(resultHtml){
$scope.checkPlaceholders(resultHtml.firstChild.innerHTML).then(
function(placeholderResultHtml){
placeholderResultHtml = $scope.parseCalc(placeholderResultHtml);
$scope.trustedHtml = $sce.trustAsHtml(placeholderResultHtml);
$scope.hideWidgetSpinner();
}
......@@ -134,15 +136,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}
//Get the dataset column name from the readable name. ie: 'column_1' for the name 'id'
$scope.getColumnFromName = function(name){
for(var i in $scope.htmlDataset.metaData.fields){
if($scope.htmlDataset.metaData.fields[i].header && $scope.htmlDataset.metaData.fields[i].header == name){
return $scope.htmlDataset.metaData.fields[i].name;
$scope.getColumnFromName = function(name,ds,aggregation){
for(var i in ds.metaData.fields){
if(typeof ds.metaData.fields[i].header != 'undefined' && ds.metaData.fields[i].header == (aggregation ? name+'_'+aggregation : name)){
return ds.metaData.fields[i].name;
}
}
}
/**
* Promise to get the functions inside the html, returns the parsed html
*/
......@@ -151,12 +152,41 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
var parser = new DOMParser()
var parsedHtml = parser.parseFromString(rawHtml, "text/html");
var allElements = parsedHtml.getElementsByTagName('*');
$scope.parseRepeat(allElements);
$scope.parseIf(allElements);
resolve(parsedHtml)
var aggregationsReg = rawHtml.match($scope.aggregationRegex);
if(aggregationsReg) {
var tempModel = angular.copy($scope.ngModel);
var tempDataset = cockpitModule_datasetServices.getDatasetById($scope.ngModel.dataset.dsId)
for(var a in aggregationsReg){
var aggRegex = /(?:\[kn-column=[\']{1}([a-zA-Z0-9\_\-]+)[\']{1}(?:\s+aggregation=[\']{1}(AVG|MIN|MAX|SUM|COUNT_DISTINCT|COUNT|DISTINCT COUNT)[\']{1})?(?:\s+precision=\'(\d)\')?\])/;
var aggregationReg = aggRegex.exec(aggregationsReg[a]);
for(var m in tempDataset.metadata.fieldsMeta){
if(tempDataset.metadata.fieldsMeta[m].name == aggregationReg[1]){
tempDataset.metadata.fieldsMeta[m].alias = aggregationReg[1]+'_'+aggregationReg[2];
tempDataset.metadata.fieldsMeta[m].aggregationSelected = aggregationReg[2];
if(tempModel.content.columnSelectedOfDataset) {
tempModel.content.columnSelectedOfDataset.push(angular.copy(tempDataset.metadata.fieldsMeta[m]));
}else{
tempModel.content.columnSelectedOfDataset = [angular.copy(tempDataset.metadata.fieldsMeta[m])];
}
}
}
}
cockpitModule_datasetServices.loadDatasetRecordsById($scope.ngModel.dataset.dsId, 0, -1, undefined, undefined, tempModel, undefined).then(
function(data){
$scope.aggregationDataset = data;
allElements = $scope.parseRepeat(allElements);
allElements = $scope.parseIf(allElements);
resolve(parsedHtml);
},function(error){
$scope.hideWidgetSpinner();
reject(error);
});
}else{
allElements = $scope.parseRepeat(allElements);
allElements = $scope.parseIf(allElements);
resolve(parsedHtml);
}
})
}
......@@ -193,6 +223,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}
} i++;
} while (i<allElements.length);
return allElements;
}
/**
......@@ -216,6 +247,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
j++;
} while (j<nodesNumber);
return allElements;
}
/**
* Function to replace kn-calc placeholders
*/
$scope.parseCalc = function(rawHtml) {
return rawHtml.replace($scope.calcRegex, $scope.calcReplacer);
}
/**
......@@ -242,18 +281,27 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}
//Replacers
$scope.calcReplacer = function(match,p1,precision){
return (precision && !isNaN(p1))? eval(p1).toFixed(precision) : eval(p1);
}
$scope.ifConditionReplacer = function(match, p1, p2){
if($scope.htmlDataset.rows[p2||0] && $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)]){
p1 = typeof($scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)]) == 'string' ? '\''+$scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)]+'\'' : $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)];
if($scope.htmlDataset.rows[p2||0] && $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1,$scope.htmlDataset)]){
p1 = typeof($scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1,$scope.htmlDataset)]) == 'string' ? '\''+$scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1,$scope.htmlDataset)]+'\'' : $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1,$scope.htmlDataset)];
}else {
p1 = 'null';
}
return p1;
}
$scope.replacer = function(match, p1, p2) {
p1=$scope.htmlDataset.rows[p2||0] && typeof($scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)])!='undefined' ? $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)] : 'null';
return p1;
$scope.replacer = function(match, p1, p2, p3, precision) {
if(p3){
p1=$scope.aggregationDataset && $scope.aggregationDataset.rows[0] && typeof($scope.aggregationDataset.rows[0][$scope.getColumnFromName(p1,$scope.aggregationDataset,p3)])!='undefined' ? $scope.aggregationDataset.rows[0][$scope.getColumnFromName(p1,$scope.aggregationDataset,p3)] : 'null';
}else{
p1=$scope.htmlDataset.rows[p2||0] && typeof($scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1,$scope.htmlDataset)])!='undefined' ? $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1,$scope.htmlDataset)] : 'null';
}
return (precision && !isNaN(p1))? p1.toFixed(precision) : p1;
}
$scope.paramsReplacer = function(match, p1){
p1=$scope.params[p1];
......@@ -327,7 +375,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
};
$scope.saveConfiguration=function(){
mdPanelRef.close();
angular.copy($scope.newModel,model);
finishEdit.resolve();
......
......@@ -89,7 +89,7 @@
<md-tab label="{{translate.load('sbi.cockpit.dataset')}}">
<md-card>
<md-card-content>
<dataset-selector ng-model="newModel.dataset.dsId" on-change="handleEvent('datasetChanged',dsId)" extended="true"></dataset-selector>
<dataset-selector ng-model="newModel.dataset.dsId" on-change="handleDsChange('datasetChanged',dsId)" extended="true"></dataset-selector>
</md-card-content>
</md-card>
</md-tab>
......
......@@ -37,7 +37,7 @@ angular.module("cockpitModule").service("cockpitModule_widgetSelection",function
var ds = dataset.label;
// var columns = ngModel==undefined ? undefined : ngModel.content.columnSelectedOfDataset;
var columns = (ngModel==undefined) ? undefined :(Array.isArray(ngModel.content.columnSelectedOfDataset) ) ? ngModel.content.columnSelectedOfDataset : ngModel.content.columnSelectedOfDataset[dataset.id.dsId] ;
var columns = (ngModel==undefined || !ngModel.content.columnSelectedOfDataset) ? undefined :(Array.isArray(ngModel.content.columnSelectedOfDataset) ) ? ngModel.content.columnSelectedOfDataset : ngModel.content.columnSelectedOfDataset[dataset.id.dsId] ;
if(columns != undefined){
//create aggregation
for(var i=0;i<columns.length;i++){
......
......@@ -122,8 +122,9 @@
if(column.ranges && column.ranges.length >0){
var ranges = column.ranges;
for (var k in ranges) {
if (value!="" && ranges[k]['background-color'] &&eval(value + ranges[k].operator + ranges[k].value)) {
style['background-color'] = ranges[k]['background-color'];
if (value!="" && eval(value + ranges[k].operator + ranges[k].value)) {
style['background-color'] = ranges[k]['background-color'] || '';
style['color'] = ranges[k]['color'] || '';
if (ranges[k].operator == '==') break;
}
}
......@@ -215,7 +216,15 @@
}else{
return '0%';
}
}
scope.getBarchartColor = function(column,value){
for(var r in column.ranges){
if(eval(value+column.ranges[r].operator+column.ranges[r].value)){
return column.ranges[r].color;
}
}
return column.barchart.style['background-color'];
}
//icon ranges recognition
......@@ -223,7 +232,7 @@
var ranges = column.ranges;
var icon = "";
for (var k in ranges) {
if (typeOf(value) !== 'undefined' && eval(value + ranges[k].operator + ranges[k].value)) {
if (value!="" && eval(value + ranges[k].operator + ranges[k].value)) {
icon = {
"iconClass": ranges[k].icon,
"iconColor": ranges[k].color
......
......@@ -37,27 +37,27 @@
<tr ng-repeat="row in model | orderBy : getSortingColumnFilter() : getSortingOrderAsBoolean() | limitTo : settings.pagination.enabled?settings.pagination.itemsNumber:undefined : (settings.pagination.enabled && settings.pagination.frontEnd)?(settings.page-1)*settings.pagination.itemsNumber:0" ng-style="::getRowStyle($even)" class="en-row" >
<td ng-repeat="column in columns" ng-if="!column.style.hiddenColumn" ng-click="selectCell($event,row,column)" ng-style="::getCellStyle(column,row[column.aliasToShow])" ng-class="{'highlight': isCellSelected(row,column)}">
<md-tooltip ng-if="!column.hideTooltip" md-direction="top" md-delay="500">
<span ng-if="column.type == 'java.lang.Double'"> {{row[column.aliasToShow] | number:1}} </span>
<span ng-if="column.type == 'java.lang.Double'"> {{row[column.aliasToShow] | number:(column.style.precision || 2)}} </span>
<span ng-if="column.type != 'java.lang.Double'"> {{row[column.aliasToShow]}} </span>
</md-tooltip>
<div class="cellContainer" ng-style="::getContainerStyle(column)">
<span ng-if="column.text.enabled" ng-class="{'truncated':column.truncated || column.barchart.enabled,'flex-50':column.barchart.enabled,'textEllipsis':row[column.aliasToShow].length > column.style.maxChars}" ng-style="{'font-size':column.style['font-size']}">
<span ng-if="column.text.enabled" ng-class="{'truncated':column.truncated || column.barchart.enabled,'flex':column.barchart.enabled,'textEllipsis':row[column.aliasToShow].length > column.style.maxChars}" ng-style="{'font-size':column.style['font-size']}">
<span ng-if="column.style.prefix">{{column.style.prefix}}</span>
<span ng-if="column.type == 'java.lang.Double'"> {{row[column.aliasToShow] | number:1}} </span>
<span ng-if="column.type == 'java.lang.Double'"> {{row[column.aliasToShow] | number:(column.style.precision || 2)}} </span>
<span ng-if="column.type != 'java.lang.Double'"> {{row[column.aliasToShow]}} </span>
<span ng-if="column.style.suffix">{{column.style.suffix}}</span>
</span>
<i class="fa fa-search showFullContentIcon" ng-if="column.style.maxChars!= '' && row[column.aliasToShow].length > column.style.maxChars" ng-click="showFullContent($event,row[column.aliasToShow])"></i>
<div class="barChart" ng-if="column.barchart && column.barchart != {}" flex ng-class="{'flex-50':column.text.enabled}">
<div class="progressTrack" ng-style="{'height':column.barchart.style['height']}">
<div class="progressFill" ng-style="{'height':column.barchart.style['height'],'line-height':column.barchart.style['height'],'width':getBarChartFill(row[column.aliasToShow],column.barchart.minValue,column.barchart.maxValue),'background-color':column.barchart.style['background-color'], 'color':column.barchart.style['color']}">
<div class="barChart" ng-if="(column.visType == 'Chart' || column.visType == 'Text & Chart') && column.barchart && column.barchart != {}" flex ng-class="{'flex':column.text.enabled}">
<div class="progressTrack" ng-style="{'height':column.barchart.style['height'],'display':'flex','justify-content':column.style.td['justify-content']}">
<div class="progressFill" ng-style="{'height':column.barchart.style['height'],'line-height':column.barchart.style['height'],'width':getBarChartFill(row[column.aliasToShow],column.barchart.minValue,column.barchart.maxValue),'background-color':getBarchartColor(column,row[column.aliasToShow]), 'color':column.barchart.style['color']}">
</div>
</div>
</div>
<span ng-if="column.ranges && column.ranges.length > 0">
<md-icon ng-class="::getDynamicIcon(column,row[column.aliasToShow]).iconClass" ng-style="{color: (::getDynamicIcon(column,row[column.aliasToShow]).iconColor)}"></md-icon>
<span ng-if="column.ranges && column.ranges.length > 0 && column.ranges[0].iconClass">
<md-icon ng-class="::getDynamicIcon(column,row[column.aliasToShow]).iconClass" ng-style="{color: getDynamicIcon(column,row[column.aliasToShow].iconColor)}"></md-icon>
</span>
</div>
......
Supports Markdown
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