Add ability to choose direction of legend items in legend settings
This commit is contained in:
Chantsova Ekaterina
parent
d1c6a9073e
commit
426dbbeea1
@ -276,6 +276,16 @@ export default angular.module('thingsboard.types', [])
|
||||
name: 'alias.filter-type-entity-view-search-query'
|
||||
}
|
||||
},
|
||||
direction: {
|
||||
column: {
|
||||
value: "column",
|
||||
name: "direction.column"
|
||||
},
|
||||
row: {
|
||||
value: "row",
|
||||
name: "direction.row"
|
||||
}
|
||||
},
|
||||
position: {
|
||||
top: {
|
||||
value: "top",
|
||||
|
||||
@ -21,10 +21,26 @@ export default function LegendConfigPanelController(mdPanelRef, $scope, types, l
|
||||
vm.legendConfig = legendConfig;
|
||||
vm.onLegendConfigUpdate = onLegendConfigUpdate;
|
||||
vm.positions = types.position;
|
||||
vm.directions = types.direction;
|
||||
vm.isRowDirection = vm.legendConfig.direction === types.direction.row.value;
|
||||
|
||||
vm._mdPanelRef.config.onOpenComplete = function () {
|
||||
$scope.theForm.$setPristine();
|
||||
}
|
||||
};
|
||||
|
||||
vm.onChangeDirection = function() {
|
||||
if (vm.legendConfig.direction === types.direction.row.value) {
|
||||
vm.isRowDirection = true;
|
||||
vm.legendConfig.position = types.position.bottom.value;
|
||||
vm.legendConfig.showMin = false;
|
||||
vm.legendConfig.showMax = false;
|
||||
vm.legendConfig.showAvg = false;
|
||||
vm.legendConfig.showTotal = false;
|
||||
}
|
||||
else {
|
||||
vm.isRowDirection = false;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.$watch('vm.legendConfig', function () {
|
||||
if (onLegendConfigUpdate) {
|
||||
|
||||
@ -20,24 +20,34 @@
|
||||
<md-content style="height: 100%" flex layout="column">
|
||||
<section layout="column">
|
||||
<md-content class="md-padding" layout="column">
|
||||
<md-input-container>
|
||||
<label translate>legend.direction</label>
|
||||
<md-select ng-model="vm.legendConfig.direction" style="min-width: 150px;"
|
||||
ng-change="vm.onChangeDirection()">
|
||||
<md-option ng-repeat="direction in vm.directions" ng-value="direction.value">
|
||||
{{direction.name | translate}}
|
||||
</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<label translate>legend.position</label>
|
||||
<md-select ng-model="vm.legendConfig.position" style="min-width: 150px;">
|
||||
<md-option ng-repeat="pos in vm.positions" ng-value="pos.value">
|
||||
<md-option ng-repeat="pos in vm.positions" ng-value="pos.value"
|
||||
ng-disabled="(vm.isRowDirection && (pos.value === vm.positions.left.value || pos.value === vm.positions.right.value))">
|
||||
{{pos.name | translate}}
|
||||
</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
<md-checkbox flex aria-label="{{ 'legend.show-min' | translate }}"
|
||||
<md-checkbox flex aria-label="{{ 'legend.show-min' | translate }}" ng-disabled="vm.isRowDirection"
|
||||
ng-model="vm.legendConfig.showMin">{{ 'legend.show-min' | translate }}
|
||||
</md-checkbox>
|
||||
<md-checkbox flex aria-label="{{ 'legend.show-max' | translate }}"
|
||||
<md-checkbox flex aria-label="{{ 'legend.show-max' | translate }}" ng-disabled="vm.isRowDirection"
|
||||
ng-model="vm.legendConfig.showMax">{{ 'legend.show-max' | translate }}
|
||||
</md-checkbox>
|
||||
<md-checkbox flex aria-label="{{ 'legend.show-avg' | translate }}"
|
||||
<md-checkbox flex aria-label="{{ 'legend.show-avg' | translate }}" ng-disabled="vm.isRowDirection"
|
||||
ng-model="vm.legendConfig.showAvg">{{ 'legend.show-avg' | translate }}
|
||||
</md-checkbox>
|
||||
<md-checkbox flex aria-label="{{ 'legend.show-total' | translate }}"
|
||||
<md-checkbox flex aria-label="{{ 'legend.show-total' | translate }}" ng-disabled="vm.isRowDirection"
|
||||
ng-model="vm.legendConfig.showTotal">{{ 'legend.show-total' | translate }}
|
||||
</md-checkbox>
|
||||
</md-content>
|
||||
|
||||
@ -102,6 +102,7 @@ function LegendConfig($compile, $templateCache, types, $mdPanel, $document) {
|
||||
scope.updateView = function () {
|
||||
var value = {};
|
||||
var model = scope.model;
|
||||
value.direction = model.direction;
|
||||
value.position = model.position;
|
||||
value.showMin = model.showMin;
|
||||
value.showMax = model.showMax;
|
||||
@ -117,6 +118,7 @@ function LegendConfig($compile, $templateCache, types, $mdPanel, $document) {
|
||||
scope.model = {};
|
||||
}
|
||||
var model = scope.model;
|
||||
model.direction = value.direction || types.direction.column.value;
|
||||
model.position = value.position || types.position.bottom.value;
|
||||
model.showMin = angular.isDefined(value.showMin) ? value.showMin : false;
|
||||
model.showMax = angular.isDefined(value.showMax) ? value.showMax : false;
|
||||
@ -124,6 +126,7 @@ function LegendConfig($compile, $templateCache, types, $mdPanel, $document) {
|
||||
model.showTotal = angular.isDefined(value.showTotal) ? value.showTotal : false;
|
||||
} else {
|
||||
scope.model = {
|
||||
direction: types.direction.column.value,
|
||||
position: types.position.bottom.value,
|
||||
showMin: false,
|
||||
showMax: false,
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
.tb-legend-config-panel {
|
||||
min-width: 220px;
|
||||
max-height: 220px;
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
@ -41,7 +41,7 @@
|
||||
}
|
||||
|
||||
.md-padding {
|
||||
padding: 0 16px;
|
||||
padding: 12px 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -43,6 +43,8 @@ function Legend($compile, $templateCache, types) {
|
||||
scope.isHorizontal = scope.legendConfig.position === types.position.bottom.value ||
|
||||
scope.legendConfig.position === types.position.top.value;
|
||||
|
||||
scope.isRowDirection = scope.legendConfig.direction === types.direction.row.value;
|
||||
|
||||
scope.toggleHideData = function(index) {
|
||||
scope.legendData.keys[index].dataKey.hidden = !scope.legendData.keys[index].dataKey.hidden;
|
||||
}
|
||||
|
||||
@ -57,5 +57,9 @@ table.tb-legend {
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
&.tb-row-direction {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
-->
|
||||
<table class="tb-legend">
|
||||
<thead>
|
||||
<tr class="tb-legend-header">
|
||||
<tr class="tb-legend-header" ng-if="!isRowDirection">
|
||||
<th colspan="2"></th>
|
||||
<th ng-if="legendConfig.showMin === true">{{ 'legend.min' | translate }}</th>
|
||||
<th ng-if="legendConfig.showMax === true">{{ 'legend.max' | translate }}</th>
|
||||
@ -26,7 +26,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="tb-legend-keys" ng-repeat="legendKey in legendData.keys">
|
||||
<tr class="tb-legend-keys" ng-repeat="legendKey in legendData.keys" ng-class="{ 'tb-row-direction': isRowDirection }">
|
||||
<td><span class="tb-legend-line" ng-style="{backgroundColor: legendKey.dataKey.color}"></span></td>
|
||||
<td class="tb-legend-label"
|
||||
ng-click="toggleHideData(legendKey.dataIndex)"
|
||||
|
||||
@ -670,6 +670,10 @@
|
||||
"dialog": {
|
||||
"close": "Close dialog"
|
||||
},
|
||||
"direction": {
|
||||
"column": "Column",
|
||||
"row": "Row"
|
||||
},
|
||||
"error": {
|
||||
"unable-to-connect": "Unable to connect to the server! Please check your internet connection.",
|
||||
"unhandled-error-code": "Unhandled error code: {{errorCode}}",
|
||||
@ -1116,6 +1120,7 @@
|
||||
"select": "Select target layout"
|
||||
},
|
||||
"legend": {
|
||||
"direction": "Legend direction",
|
||||
"position": "Legend position",
|
||||
"show-max": "Show max value",
|
||||
"show-min": "Show min value",
|
||||
|
||||
@ -670,6 +670,10 @@
|
||||
"dialog": {
|
||||
"close": "Закрыть диалог"
|
||||
},
|
||||
"direction": {
|
||||
"column": "Колонка",
|
||||
"row": "Строка"
|
||||
},
|
||||
"error": {
|
||||
"unable-to-connect": "Не удалось подключиться к серверу! Пожалуйста, проверьте интернет-соединение.",
|
||||
"unhandled-error-code": "Код необработанной ошибки: {{errorCode}}",
|
||||
@ -1109,6 +1113,7 @@
|
||||
"select": "Выбрать макет"
|
||||
},
|
||||
"legend": {
|
||||
"direction": "Расположение элементов легенды",
|
||||
"position": "Расположение легенды",
|
||||
"show-max": "Показать максимальное значение",
|
||||
"show-min": "Показать минимальное значение",
|
||||
|
||||
@ -795,6 +795,10 @@
|
||||
"dialog": {
|
||||
"close": "Закрити діалогове вікно"
|
||||
},
|
||||
"direction": {
|
||||
"column": "Колонка",
|
||||
"row": "Рядок"
|
||||
},
|
||||
"error": {
|
||||
"unable-to-connect": "Неможливо підключитися до сервера! Перевірте підключення до Інтернету.",
|
||||
"unhandled-error-code": "Неопрацьований помилковий код: {{errorCode}}",
|
||||
@ -1526,6 +1530,7 @@
|
||||
"select": "Вибрати макет"
|
||||
},
|
||||
"legend": {
|
||||
"direction": "Розташування елементів легенди",
|
||||
"position": "Розташування легенди",
|
||||
"show-max": "Показати максимальне значення",
|
||||
"show-min": "Показати мінімальне значення ",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user