feat(tablepanel): more column style rules

public/app/panels/table/controller.ts

@@ -37,15 +37,18 @@ export class TablePanelCtrl {
       transform: 'timeseries_to_rows',
       pageSize: 50,
       showHeader: true,
-      columns: [{
-        pattern: '/.*/',
-        unit: 'short',
-        decimals: 2,
-        colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
-      }],
+      columns: [],
     };
 
-    _.defaults($scope.panel, panelDefaults);
+    $scope.init = function() {
+      _.defaults($scope.panel, panelDefaults);
+
+      if ($scope.panel.columns.length === 0) {
+        $scope.addColumnStyle();
+      }
+
+      panelSrv.init($scope);
+    };
 
     $scope.setUnitFormat = function(column, subItem) {
       column.unit = subItem.value;
@@ -73,7 +76,32 @@ export class TablePanelCtrl {
       panelHelper.broadcastRender($scope, $scope.table);
     };
 
-    panelSrv.init($scope);
+    $scope.getColumnNames = function() {
+      if (!$scope.table) {
+        return [];
+      }
+      return _.map($scope.table.columns, function(col: any) {
+        return col.text;
+      });
+    };
+
+    $scope.addColumnStyle = function() {
+      var columnStyleDefaults = {
+        unit: 'short',
+        decimals: 2,
+        colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
+        pattern: '/.*/',
+        colorMode: 'value',
+      };
+
+      $scope.panel.columns.push(angular.copy(columnStyleDefaults));
+    };
+
+    $scope.removeColumnStyle = function(col) {
+      $scope.panel.columns = _.without($scope.panel.columns, col);
+    };
+
+    $scope.init();
   }
 }
 

public/app/panels/table/module.ts

@@ -42,10 +42,10 @@ export function tablePanelDirective() {
 
       function createColumnFormater(style) {
         return function(v) {
-          if (v === null) {
+          if (v === null || v === void 0) {
             return '-';
           }
-          if (_.isString(v)) {
+          if (_.isString(v) || style) {
             return v;
           }
           let valueFormater = kbn.valueFormats[style.unit];
@@ -79,7 +79,8 @@ export function tablePanelDirective() {
         let rowElements = $(document.createDocumentFragment());
         let rowEnd = Math.min(panel.pageSize, data.rows.length);
         let rowStart = 0;
-
+        // reset formater cache
+        formaters = [];
 
         for (var y = rowStart; y < rowEnd; y++) {
           let row = data.rows[y];

public/app/panels/table/options.html

@@ -41,76 +41,76 @@
 <div class="editor-row" style="margin-top: 20px">
 	<h5>Column Styles</h5>
 
-	<div class="tight-form-container" ng-repeat="column in panel.columns">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item">
-					<i class="fa fa-remove pointer" ng-click="removeColumnStyle(column)"></i>
-				</li>
-
-				<li class="tight-form-item">
-					Name or regex
-				</li>
-
-				<li>
-					<input type="text" ng-model="column.pattern" bs-typeahead="getColumnNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input">
-				</li>
-
-				<li class="tight-form-item">
-					Unit
-				</li>
-				<li class="dropdown"
-					ng-model="column.unit"
-					dropdown-typeahead="unitFormats"
-					dropdown-typeahead-on-select="setUnitFormat(column, $subItem)">
-				</li>
-				<li class="tight-form-item">
-					Decimals
-				</li>
-				<li style="width: 105px">
-					<input type="number" class="input-mini tight-form-input" ng-model="column.decimals" ng-change="render()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item">
-					<i class="fa fa-remove pointer invisible"></i>
-				</li>
-				<li class="tight-form-item">
-					Coloring
-				</li>
-				<li>
-					<select class="input-small tight-form-input"
-							ng-model="panel.transform"
+	<div class="tight-form-container">
+		<div ng-repeat="column in panel.columns">
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item">
+						<i class="fa fa-remove pointer" ng-click="removeColumnStyle(column)"></i>
+					</li>
+					<li class="tight-form-item">
+						Name or regex
+					</li>
+					<li>
+						<input type="text" ng-model="column.pattern" bs-typeahead="getColumnNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input">
+					</li>
+					<li class="tight-form-item" style="width: 86px">
+						Unit
+					</li>
+					<li class="dropdown" style="width: 150px"
+						ng-model="column.unit"
+						dropdown-typeahead="unitFormats"
+						dropdown-typeahead-on-select="setUnitFormat(column, $subItem)">
+					</li>
+					<li class="tight-form-item" style="width: 60px">
+						Decimals
+					</li>
+					<li style="width: 105px">
+						<input type="number" class="input-mini tight-form-input" ng-model="column.decimals" ng-change="render()" ng-model-onblur>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item">
+						<i class="fa fa-remove pointer invisible"></i>
+					</li>
+					<li class="tight-form-item text-right" style="width: 93px">
+						Coloring
+					</li>
+					<li>
+						<select class="input-small tight-form-input"
+							ng-model="column.colorMode"
 							ng-options="k as v.text for (k, v) in colorModes"
-							ng-change="render()"></select>
-				</li>
-				<li class="tight-form-item">
-					Thresholds<tip>Comma seperated values</tip>
-				</li>
-				<li>
-					<input type="text" class="input-small tight-form-input" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
-				</li>
-				<li class="tight-form-item">
-					Colors
-				</li>
-				<li class="tight-form-item">
-					<spectrum-picker ng-model="column.colors[0]" ng-change="render()" ></spectrum-picker>
-					<spectrum-picker ng-model="column.colors[1]" ng-change="render()" ></spectrum-picker>
-					<spectrum-picker ng-model="column.colors[2]" ng-change="render()" ></spectrum-picker>
-				</li>
-				<li class="tight-form-item last">
-					<a class="pointer" ng-click="invertColorOrder()">invert order</a>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+							ng-change="render()"
+							style="width: 150px"
+							></select>
+					</li>
+					<li class="tight-form-item">
+						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>
+					</li>
+					<li class="tight-form-item" style="width: 60px">
+						Colors
+					</li>
+					<li class="tight-form-item">
+						<spectrum-picker ng-model="column.colors[0]" ng-change="render()" ></spectrum-picker>
+						<spectrum-picker ng-model="column.colors[1]" ng-change="render()" ></spectrum-picker>
+						<spectrum-picker ng-model="column.colors[2]" ng-change="render()" ></spectrum-picker>
+					</li>
+					<li class="tight-form-item last">
+						<a class="pointer" ng-click="invertColorOrder()">invert order</a>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 		</div>
-
 	</div>
 
-	<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addSeriesOverride()">
+	<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addColumnStyle()">
 		Add column display rule
 	</button>
 </div>

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

@@ -30,7 +30,7 @@ describe('when transforming time series table', () => {
         expect(table.rows[0][1]).to.be('series1');
         expect(table.rows[1][1]).to.be('series1');
         expect(table.rows[2][1]).to.be('series2');
-        expect(table.rows[0][2]).to.be('12.12');
+        expect(table.rows[0][2]).to.be(12.12);
       });
 
       it('should return 3 rows', () => {
@@ -59,12 +59,12 @@ describe('when transforming time series table', () => {
 
       it ('should return 2 rows', () => {
         expect(table.rows.length).to.be(2);
-        expect(table.rows[0][1]).to.be('12.12');
-        expect(table.rows[0][2]).to.be('16.12');
+        expect(table.rows[0][1]).to.be(12.12);
+        expect(table.rows[0][2]).to.be(16.12);
       });
 
-      it ('should show - when no value for timestamp', () => {
-        expect(table.rows[1][2]).to.be('-');
+      it ('should be undefined when no value for timestamp', () => {
+        expect(table.rows[1][2]).to.be(undefined);
       });
     });
   });