From 426dbbeea11597b8b999cdd55c4375527367f71a Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Tue, 16 Apr 2019 11:38:22 +0300
Subject: [PATCH] Add ability to choose direction of legend items in legend
 settings

---
 ui/src/app/common/types.constant.js           | 10 ++++++++++
 .../legend-config-panel.controller.js         | 18 ++++++++++++++++-
 .../components/legend-config-panel.tpl.html   | 20 ++++++++++++++-----
 .../app/components/legend-config.directive.js |  3 +++
 ui/src/app/components/legend-config.scss      |  4 ++--
 ui/src/app/components/legend.directive.js     |  2 ++
 ui/src/app/components/legend.scss             |  4 ++++
 ui/src/app/components/legend.tpl.html         |  4 ++--
 ui/src/app/locale/locale.constant-en_US.json  |  5 +++++
 ui/src/app/locale/locale.constant-ru_RU.json  |  5 +++++
 ui/src/app/locale/locale.constant-uk_UA.json  |  5 +++++
 11 files changed, 70 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/common/types.constant.js b/ui/src/app/common/types.constant.js
index ed75737ca7..8e85e1a054 100644
--- a/ui/src/app/common/types.constant.js
+++ b/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",
diff --git a/ui/src/app/components/legend-config-panel.controller.js b/ui/src/app/components/legend-config-panel.controller.js
index 9365c3a2f2..6253da01a5 100644
--- a/ui/src/app/components/legend-config-panel.controller.js
+++ b/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) {
diff --git a/ui/src/app/components/legend-config-panel.tpl.html b/ui/src/app/components/legend-config-panel.tpl.html
index 2e4eb5f00a..848330744d 100644
--- a/ui/src/app/components/legend-config-panel.tpl.html
+++ b/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>
diff --git a/ui/src/app/components/legend-config.directive.js b/ui/src/app/components/legend-config.directive.js
index f68bc0afd9..2cf59f40ec 100644
--- a/ui/src/app/components/legend-config.directive.js
+++ b/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,
diff --git a/ui/src/app/components/legend-config.scss b/ui/src/app/components/legend-config.scss
index 3f64a2fcab..e131470312 100644
--- a/ui/src/app/components/legend-config.scss
+++ b/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;
   }
 }
 
diff --git a/ui/src/app/components/legend.directive.js b/ui/src/app/components/legend.directive.js
index 4b38be22aa..76ffdb4e78 100644
--- a/ui/src/app/components/legend.directive.js
+++ b/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;
         }
diff --git a/ui/src/app/components/legend.scss b/ui/src/app/components/legend.scss
index b5bc68252d..b363319e95 100644
--- a/ui/src/app/components/legend.scss
+++ b/ui/src/app/components/legend.scss
@@ -57,5 +57,9 @@ table.tb-legend {
         opacity: .6;
       }
     }
+
+    &.tb-row-direction {
+      display: inline-block;
+    }
   }
 }
diff --git a/ui/src/app/components/legend.tpl.html b/ui/src/app/components/legend.tpl.html
index 31047bb8d8..d8ce5df1cb 100644
--- a/ui/src/app/components/legend.tpl.html
+++ b/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)"
diff --git a/ui/src/app/locale/locale.constant-en_US.json b/ui/src/app/locale/locale.constant-en_US.json
index bc31a90de0..4e7312b8d8 100644
--- a/ui/src/app/locale/locale.constant-en_US.json
+++ b/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",
diff --git a/ui/src/app/locale/locale.constant-ru_RU.json b/ui/src/app/locale/locale.constant-ru_RU.json
index a69a094403..0af1ea0ae0 100644
--- a/ui/src/app/locale/locale.constant-ru_RU.json
+++ b/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": "Показать минимальное значение",
diff --git a/ui/src/app/locale/locale.constant-uk_UA.json b/ui/src/app/locale/locale.constant-uk_UA.json
index 4eb59a2d40..392dfeb983 100644
--- a/ui/src/app/locale/locale.constant-uk_UA.json
+++ b/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": "Показати мінімальне значення ",