table: refactoring table options, now column styles are in a seperate tab

2025-02-25 18:55:37 -06:00 · 2017-05-09 12:35:44 +02:00
parent e218052a90
commit 8bbff2c44e
6 changed files with 224 additions and 182 deletions
--- a/public/app/plugins/panel/table/column_options.ts
+++ b/public/app/plugins/panel/table/column_options.ts
@@ -0,0 +1,120 @@
+///<reference path="../../../headers/common.d.ts" />
+
+
+import _ from 'lodash';
+import $ from 'jquery';
+import moment from 'moment';
+import angular from 'angular';
+
+import kbn from 'app/core/utils/kbn';
+
+export class ColumnOptionsCtrl {
+  panel: any;
+  panelCtrl: any;
+  colorModes: any;
+  columnStyles: any;
+  columnTypes: any;
+  fontSizes: any;
+  dateFormats: any;
+  addColumnSegment: any;
+  unitFormats: any;
+  getColumnNames: any;
+  activeStyleIndex: number;
+
+  /** @ngInject */
+  constructor($scope, private $q, private uiSegmentSrv) {
+    $scope.editor = this;
+    this.activeStyleIndex = 0;
+    this.panelCtrl = $scope.ctrl;
+    this.panel = this.panelCtrl.panel;
+    this.unitFormats = kbn.getUnitFormats();
+    this.colorModes = [
+      {text: 'Disabled', value: null},
+      {text: 'Cell', value: 'cell'},
+      {text: 'Value', value: 'value'},
+      {text: 'Row', value: 'row'},
+    ];
+    this.columnTypes = [
+      {text: 'Number', value: 'number'},
+      {text: 'String', value: 'string'},
+      {text: 'Date', value: 'date'},
+      {text: 'Hidden', value: 'hidden'}
+    ];
+    this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
+    this.dateFormats = [
+      {text: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss'},
+      {text: 'MM/DD/YY h:mm:ss a', value: 'MM/DD/YY h:mm:ss a'},
+      {text: 'MMMM D, YYYY LT',  value: 'MMMM D, YYYY LT'},
+    ];
+
+    this.getColumnNames = () => {
+      if (!this.panelCtrl.table) {
+        return [];
+      }
+      return _.map(this.panelCtrl.table.columns, function(col: any) {
+        return col.text;
+      });
+    };
+  }
+
+  render() {
+    this.panelCtrl.render();
+  }
+
+  setUnitFormat(column, subItem) {
+    column.unit = subItem.value;
+    this.panelCtrl.render();
+  }
+
+  addColumnStyle() {
+    var newStyleRule = {
+      unit: 'short',
+      type: 'number',
+      alias: '',
+      decimals: 2,
+      colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
+      colorMode: null,
+      pattern: '',
+      dateFormat: 'YYYY-MM-DD HH:mm:ss',
+      thresholds: [],
+    };
+
+    var styles = this.panel.styles;
+    var stylesCount = styles.length;
+    var indexToInsert = stylesCount;
+
+    // check if last is a catch all rule, then add it before that one
+    if (stylesCount > 0) {
+      var last = styles[stylesCount-1];
+      if (last.pattern === '/.*/') {
+        indexToInsert = stylesCount-1;
+      }
+    }
+
+    styles.splice(indexToInsert, 0, newStyleRule);
+    this.activeStyleIndex = indexToInsert;
+  }
+
+  removeColumnStyle(style) {
+    this.panel.styles = _.without(this.panel.styles, style);
+  }
+
+  invertColorOrder(index) {
+    var ref = this.panel.styles[index].colors;
+    var copy = ref[0];
+    ref[0] = ref[2];
+    ref[2] = copy;
+    this.panelCtrl.render();
+  }
+}
+
+/** @ngInject */
+export function columnOptionsTab($q, uiSegmentSrv) {
+  'use strict';
+  return {
+    restrict: 'E',
+    scope: true,
+    templateUrl: 'public/app/plugins/panel/table/column_options.html',
+    controller: ColumnOptionsCtrl,
+  };
+}