Adding reverse functionnality to trendings panel

Nodashi · Nodashi · commit 00bd2c8d9015 · 2014-04-21T20:57:56.000+02:00
diff --git a/src/app/panels/trends/editor.html b/src/app/panels/trends/editor.html
@@ -4,17 +4,21 @@ <h4>Settings</h4>
     <div class="span3" ng-hide='panel.auto_int'>
       <label class="small">Use Elasticsearch date math format here (eg 1m, 5m, 1d, 2w, 1y)</label>
     </div>
-    <div class="span3">
+    <div class="span2">
        <label class="small">Time Ago</label>
         <input type="text" class="input-small" ng-model="panel.ago" ng-change="set_refresh(true)">
     </div>
     <div class="span2">
       <label class="small">Font Size</label>
-      <select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
+      <select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
+    </div>
+    <div class="span2">
+      <label class="small">List Format</label>
+      <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select>
     </div>
-    <div class="span3">
-      <label class="small" >List Format</label>
-      <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
+    <div class="span2">
+      <label class="small">Reverse</label>
+      <input type="checkbox" ng-model="panel.reverse" ng-checked="panel.reverse">
     </div>
   </div>
 </div>
diff --git a/src/app/panels/trends/module.html b/src/app/panels/trends/module.html
@@ -9,8 +9,17 @@
 
   <div ng-class="{'trends-horizontal':panel.arrangement == 'horizontal'}" ng-style="panel.style" style="line-height:{{panel.style['font-size']}};" ng-repeat="query in trends">
     <i class="icon-circle" style="color:{{query.info.color}}"></i>
-    <span bs-tooltip="'Then: '+query.hits.old+', Now: '+query.hits.new"  ng-class="{'text-success': query.hits.new >= query.hits.old, 'text-error': query.hits.old > query.hits.new}" class='pointer strong'>
-      <i class='large' ng-class="{'icon-caret-up': query.hits.new >= query.hits.old, 'icon-caret-down': query.hits.old > query.hits.new}"></i> {{query.percent}}%
+    <span 
+        bs-tooltip="'Then: '+query.hits.old+', Now: '+query.hits.new"  
+        ng-class="
+            {
+                'text-success': (query.hits.new >= query.hits.old && panel.reverse === false) || (query.hits.new < query.hits.old && panel.reverse === true), 
+                'text-error': (query.hits.old > query.hits.new && panel.reverse === false) || (query.hits.old <= query.hits.new && panel.reverse === true)
+            }
+        " 
+        class='pointer strong'
+    >
+      <i class='large' ng-class="{'icon-caret-up': query.hits.new >= query.hits.old, 'icon-caret-down': query.hits.old > query.hits.new}"></i>{{query.percent}}%
     </span>
     <span class="tiny light" ng-show="query.info.alias != ''">({{query.info.alias}})</span>
   </div>
diff --git a/src/app/panels/trends/module.js b/src/app/panels/trends/module.js
@@ -60,6 +60,12 @@ function (angular, app, _, kbn) {
        * arrangement:: `horizontal' or `vertical'
        */
       arrangement : 'vertical',
+      /** @scratch /panels/trends/5
+       * reverse:: true or false. 
+       * Set to true if you want to display trending informations in red if the variation is positive.
+       * Set to false if you want to display trending informations in green if the variation is positive.
+       */
+      reverse : false,
       /** @scratch /panels/trends/5
        * spyable:: Set to false to disable the inspect icon
        */
