editor.ts 2.7 KB

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