axisEditor.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <div class="editor-row">
  2. <div class="section">
  3. <h5>Left Y Axis</h5>
  4. <div class="editor-option">
  5. <label class="small">Format <tip>Y-axis formatting</tip></label>
  6. <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns']" ng-change="render()"></select>
  7. </div>
  8. <div class="editor-option">
  9. <label class="small">Min / <a ng-click="toggleGridMinMax('leftMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.leftMin)"></i></a></label>
  10. <input type="number" class="input-small" ng-model="panel.grid.leftMin" ng-change="render()" ng-model-onblur />
  11. </div>
  12. <div class="editor-option">
  13. <label class="small">Max / <a ng-click="toggleGridMinMax('leftMax')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.leftMax)"></i></a></label>
  14. <input type="number" class="input-small" ng-model="panel.grid.leftMax" ng-change="render()" ng-model-onblur />
  15. </div>
  16. <div class="editor-option">
  17. <label class="small">Label</label>
  18. <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
  19. </div>
  20. </div>
  21. <div class="section">
  22. <h5>Right Y Axis</h5>
  23. <div class="editor-option">
  24. <label class="small">Format <tip>Y-axis formatting</tip></label>
  25. <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns']" ng-change="render()"></select>
  26. </div>
  27. <div class="editor-option">
  28. <label class="small">Min / <a ng-click="toggleGridMinMax('rightMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.rightMin)"></i></a></label>
  29. <input type="number" class="input-small" ng-model="panel.grid.rightMin" ng-change="render()" ng-model-onblur />
  30. </div>
  31. <div class="editor-option">
  32. <label class="small">Max / <a ng-click="toggleGridMinMax('rightMax')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.rightMax)"></i></a></label>
  33. <input type="number" class="input-small" ng-model="panel.grid.rightMax" ng-change="render()" ng-model-onblur />
  34. </div>
  35. </div>
  36. </div>
  37. <div class="editor-row">
  38. <div class="section">
  39. <h5>Legend styles</h5>
  40. <div class="editor-option">
  41. <label class="small">Show Legend</label><input type="checkbox" ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render();">
  42. </div>
  43. <div class="editor-option">
  44. <label class="small">Include Values</label><input type="checkbox" ng-model="panel.legend.values" ng-checked="panel.legend.values" ng-change="render();">
  45. </div>
  46. <div class="editor-option">
  47. <label class="small">Align as table</label><input type="checkbox" ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable">
  48. </div>
  49. <div class="editor-option">
  50. <label class="small">Right side</label><input type="checkbox" ng-model="panel.legend.rightSide" ng-change="render();" ng-checked="panel.legend.rightSide">
  51. </div>
  52. </div>
  53. <div class="section" ng-if="panel.legend.values">
  54. <h5>Legend values</h5>
  55. <div class="editor-option">
  56. <label class="small">Min</label><input type="checkbox" ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="render();">
  57. </div>
  58. <div class="editor-option">
  59. <label class="small">Max</label><input type="checkbox" ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="render();">
  60. </div>
  61. <div class="editor-option">
  62. <label class="small">Current</label><input type="checkbox" ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="render();">
  63. </div>
  64. <div class="editor-option">
  65. <label class="small">Total</label><input type="checkbox" ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="render();">
  66. </div>
  67. <div class="editor-option">
  68. <label class="small">Avg</label><input type="checkbox" ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="render();">
  69. </div>
  70. </div>
  71. <div class="section">
  72. <h5>Grid thresholds</h5>
  73. <div class="editor-option">
  74. <label class="small">Level1</label>
  75. <input type="number" class="input-small" ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur />
  76. </div>
  77. <div class="editor-option">
  78. <label class="small">Color</label>
  79. <spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
  80. </div>
  81. <div class="editor-option">
  82. <label class="small">Level2</label>
  83. <input type="number" class="input-small" ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur />
  84. </div>
  85. <div class="editor-option">
  86. <label class="small">Color</label>
  87. <spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
  88. </div>
  89. <div class="editor-option">
  90. <label class="small">Line mode</label><input type="checkbox" ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render();">
  91. </div>
  92. </div>
  93. <div class="section">
  94. <h5>Show Axes</h5>
  95. <div class="editor-option">
  96. <label class="small">X-Axis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
  97. </div>
  98. <div class="editor-option">
  99. <label class="small">Y-Axis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
  100. </div>
  101. </div>
  102. </div>