feat(tablepanel): worked on cell / value threshold coloring

public/app/panels/table/editor.html

@@ -79,21 +79,18 @@
 					<li>
 						<select class="input-small tight-form-input"
 							ng-model="column.type"
-							ng-options="k as v.text for (k, v) in columnTypes"
+							ng-options="c.value as c.text for c in columnTypes"
 							ng-change="render()"
 							style="width: 150px"
 							></select>
 					</li>
 				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="tight-form" ng-if="column.type === 'date'">
-				<ul class="tight-form-list">
-					<li class="tight-form-item text-right" style="width: 93px">
+				<ul class="tight-form-list" ng-if="column.type === 'date'">
+					<li class="tight-form-item">
 						Format
 					</li>
 					<li>
-						<input type="text" class="input-medium tight-form-input" ng-model="column.dateFormat" ng-change="render()" ng-model-onblur>
+						<input type="text" class="input-large tight-form-input" ng-model="column.dateFormat" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
@@ -106,7 +103,7 @@
 					<li>
 						<select class="input-small tight-form-input"
 							ng-model="column.colorMode"
-							ng-options="k as v.text for (k, v) in colorModes"
+							ng-options="c.value as c.text for c in colorModes"
 							ng-change="render()"
 							style="width: 150px"
 							></select>
@@ -115,7 +112,7 @@
 						Thresholds<tip>Comma seperated values</tip>
 					</li>
 					<li>
-						<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
+						<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80" array-join></input>
 					</li>
 					<li class="tight-form-item" style="width: 60px">
 						Colors

public/app/panels/table/editor.ts

@@ -18,16 +18,17 @@ export function tablePanelEditor() {
     link: function(scope, elem) {
       scope.transformers = transformers;
       scope.unitFormats = kbn.getUnitFormats();
-      scope.colorModes = {
-        'cell': {text: 'Cell'},
-        'value': {text: 'Value'},
-        'row': {text: 'Row'},
-      };
-      scope.columnTypes = {
-        'number': {text: 'Number'},
-        'string': {text: 'String'},
-        'date': {text: 'Date'},
-      };
+      scope.colorModes = [
+        {text: 'Disabled', value: null},
+        {text: 'Cell', value: 'cell'},
+        {text: 'Value', value: 'value'},
+        {text: 'Row', value: 'row'},
+      ];
+      scope.columnTypes = [
+        {text: 'Number', value: 'number'},
+        {text: 'String', value: 'string'},
+        {text: 'Date', value: 'date'},
+      ];
 
       scope.updateJsonFieldsMenu = function(data) {
         scope.jsonFieldsMenu = [];
@@ -82,8 +83,9 @@ export function tablePanelEditor() {
           type: 'number',
           decimals: 2,
           colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
-          colorMode: 'value',
+          colorMode: null,
           pattern: '/.*/',
+          thresholds: [],
         };
 
         scope.panel.columns.push(angular.copy(columnStyleDefaults));

public/app/panels/table/renderer.ts

@@ -6,32 +6,59 @@ import moment = require('moment');
 
 export class TableRenderer {
   formaters: any[];
+  colorState: any;
 
   constructor(private panel, private table, private timezone) {
     this.formaters = [];
+    this.colorState = {};
   }
 
-  createColumnFormater(style) {
-    return (v) => {
-      if (v === null || v === void 0) {
-        return '-';
-      }
-      if (_.isString(v) || !style) {
-        return v;
+  getColorForValue(value, style) {
+    if (!style.thresholds) { return null; }
+
+    for (var i = style.thresholds.length - 1; i >= 0 ; i--) {
+      if (value >= style.thresholds[i]) {
+        return style.colors[i];
       }
+    }
+    return null;
+  }
+
+  createColumnFormater(style) {
+    if (!style) {
+      return v => v;
+    }
 
-      if (style.type === 'date') {
+    if (style.type === 'date') {
+      return v => {
         if (_.isArray(v)) { v = v[0]; }
         var date = moment(v);
         if (this.timezone === 'utc') {
           date = date.utc();
         }
         return date.format(style.dateFormat);
-      }
+      };
+    }
 
-      if (_.isNumber(v) && style.type === 'number') {
-        let valueFormater = kbn.valueFormats[style.unit];
-        return valueFormater(v, style.decimals);
+    if (style.type === 'number') {
+      let valueFormater = kbn.valueFormats[style.unit];
+
+      return v =>  {
+        if (v === null || v === void 0) {
+          return '-';
+        }
+
+        if (style.colorMode) {
+          this.colorState[style.colorMode] = this.getColorForValue(v, style);
+        }
+
+        return valueFormater(v, style.decimals, null);
+      };
+    }
+
+    return v => {
+      if (v === null || v === void 0) {
+        return '-';
       }
 
       if (_.isArray(v)) {
@@ -65,8 +92,18 @@ export class TableRenderer {
   }
 
   renderCell(columnIndex, value) {
-    var colValue = this.formatColumnValue(columnIndex, value);
-    return '<td>' + colValue + '</td>';
+    var value = this.formatColumnValue(columnIndex, value);
+    var style = '';
+    if (this.colorState.cell) {
+      style = ' style="background-color:' + this.colorState.cell + ';color: white"';
+      this.colorState.cell = null;
+    }
+    else if (this.colorState.value) {
+      style = ' style="color:' + this.colorState.value + '"';
+      this.colorState.value = null;
+    }
+
+    return '<td' + style + '>' + value + '</td>';
   }
 
   render(page) {

public/app/panels/table/specs/renderer_specs.ts

@@ -6,7 +6,11 @@ import {TableRenderer} from '../renderer';
 describe('when rendering table', () => {
   describe('given 2 columns', () => {
     var table = new TableModel();
-    table.columns = [{text: 'Time'}, {text: 'Value'}];
+    table.columns = [
+      {text: 'Time'},
+      {text: 'Value'},
+      {text: 'Colored'}
+    ];
 
     var panel = {
       pageSize: 10,
@@ -15,6 +19,21 @@ describe('when rendering table', () => {
           pattern: 'Time',
           type: 'date',
           format: 'LLL'
+        },
+        {
+          pattern: 'Value',
+          type: 'number',
+          unit: 'ms',
+          decimals: 3,
+        },
+        {
+          pattern: 'Colored',
+          type: 'number',
+          unit: 'none',
+          decimals: 1,
+          colorMode: 'value',
+          thresholds: [0, 50, 80],
+          colors: ['green', 'orange', 'red']
         }
       ]
     };
@@ -26,6 +45,15 @@ describe('when rendering table', () => {
       expect(html).to.be('<td>2014-01-01T06:06:06+00:00</td>');
     });
 
+    it('number column should be formated', () => {
+      var html = renderer.renderCell(1, 1230);
+      expect(html).to.be('<td>1.230 s</td>');
+    });
+
+    it('colored cell should have style', () => {
+      var html = renderer.renderCell(2, 55);
+      expect(html).to.be('<td style="color:orange">55.0</td>');
+    });
   });
 });