editor.ts 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. ///<reference path="../../../headers/common.d.ts" />
  2. import _ from 'lodash';
  3. import $ from 'jquery';
  4. import moment from 'moment';
  5. import angular from 'angular';
  6. import {transformers} from './transformers';
  7. import kbn from 'app/core/utils/kbn';
  8. export class TablePanelEditorCtrl {
  9. panel: any;
  10. panelCtrl: any;
  11. transformers: any;
  12. fontSizes: any;
  13. addColumnSegment: any;
  14. getColumnNames: any;
  15. canSetColumns: boolean;
  16. columnsHelpMessage: string;
  17. /** @ngInject */
  18. constructor($scope, private $q, private uiSegmentSrv) {
  19. $scope.editor = this;
  20. this.panelCtrl = $scope.ctrl;
  21. this.panel = this.panelCtrl.panel;
  22. this.transformers = transformers;
  23. this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
  24. this.addColumnSegment = uiSegmentSrv.newPlusButton();
  25. this.updateTransformHints();
  26. }
  27. updateTransformHints() {
  28. this.canSetColumns = false;
  29. this.columnsHelpMessage = '';
  30. switch (this.panel.transform) {
  31. case "timeseries_aggregations": {
  32. this.canSetColumns = true;
  33. break;
  34. }
  35. case "json": {
  36. this.canSetColumns = true;
  37. break;
  38. }
  39. case "table": {
  40. this.columnsHelpMessage = "Columns and their order are determined by the data query";
  41. }
  42. }
  43. }
  44. getColumnOptions() {
  45. if (!this.panelCtrl.dataRaw) {
  46. return this.$q.when([]);
  47. }
  48. var columns = this.transformers[this.panel.transform].getColumns(this.panelCtrl.dataRaw);
  49. var segments = _.map(columns, (c: any) => this.uiSegmentSrv.newSegment({value: c.text}));
  50. return this.$q.when(segments);
  51. }
  52. addColumn() {
  53. var columns = transformers[this.panel.transform].getColumns(this.panelCtrl.dataRaw);
  54. var column = _.find(columns, {text: this.addColumnSegment.value});
  55. if (column) {
  56. this.panel.columns.push(column);
  57. this.render();
  58. }
  59. var plusButton = this.uiSegmentSrv.newPlusButton();
  60. this.addColumnSegment.html = plusButton.html;
  61. this.addColumnSegment.value = plusButton.value;
  62. }
  63. transformChanged() {
  64. this.panel.columns = [];
  65. if (this.panel.transform === 'timeseries_aggregations') {
  66. this.panel.columns.push({text: 'Avg', value: 'avg'});
  67. }
  68. this.updateTransformHints();
  69. this.render();
  70. }
  71. render() {
  72. this.panelCtrl.render();
  73. }
  74. removeColumn(column) {
  75. this.panel.columns = _.without(this.panel.columns, column);
  76. this.panelCtrl.render();
  77. }
  78. }
  79. /** @ngInject */
  80. export function tablePanelEditor($q, uiSegmentSrv) {
  81. 'use strict';
  82. return {
  83. restrict: 'E',
  84. scope: true,
  85. templateUrl: 'public/app/plugins/panel/table/editor.html',
  86. controller: TablePanelEditorCtrl,
  87. };
  88. }