Add ability to choose direction of legend items in legend settings

ui/src/app/common/types.constant.js

@@ -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",

ui/src/app/components/legend-config-panel.controller.js

@@ -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) {

ui/src/app/components/legend-config-panel.tpl.html

@@ -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>

ui/src/app/components/legend-config.directive.js

@@ -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,

ui/src/app/components/legend-config.scss

@@ -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;
   }
 }
 

ui/src/app/components/legend.directive.js

@@ -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;
         }

ui/src/app/components/legend.scss

@@ -57,5 +57,9 @@ table.tb-legend {
         opacity: .6;
       }
     }
+
+    &.tb-row-direction {
+      display: inline-block;
+    }
   }
 }

ui/src/app/components/legend.tpl.html

@@ -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)"

ui/src/app/locale/locale.constant-en_US.json

@@ -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",

ui/src/app/locale/locale.constant-ru_RU.json

@@ -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": "Показать минимальное значение",

ui/src/app/locale/locale.constant-uk_UA.json

@@ -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": "Показати мінімальне значення ",