axes_editor.html 3.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <div class="editor-row">
  2. <div class="section gf-form-group">
  3. <h5 class="section-heading">Y Axis</h5>
  4. <div class="gf-form">
  5. <label class="gf-form-label width-6">Unit</label>
  6. <div class="gf-form-dropdown-typeahead max-width-10"
  7. ng-model="ctrl.panel.yAxis.format"
  8. dropdown-typeahead2="editor.unitFormats"
  9. dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
  10. </div>
  11. </div>
  12. <div class="gf-form">
  13. <label class="gf-form-label width-6">Scale</label>
  14. <div class="gf-form-select-wrapper max-width-10">
  15. <select class="gf-form-input" ng-model="ctrl.panel.yAxis.logBase" ng-options="v as k for (k, v) in editor.logScales" ng-change="ctrl.refresh()"></select>
  16. </div>
  17. </div>
  18. <div class="gf-form">
  19. <label class="gf-form-label width-6">Y-Min</label>
  20. <input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
  21. </div>
  22. <div class="gf-form">
  23. <label class="gf-form-label width-6">Y-Max</label>
  24. <input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
  25. </div>
  26. <div class="gf-form">
  27. <label class="gf-form-label width-6">Decimals</label>
  28. <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
  29. bs-tooltip="'Override automatic decimal precision for axis.'"
  30. ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
  31. </div>
  32. <div ng-show="ctrl.panel.yAxis.logBase === 1">
  33. <div class="gf-form-inline">
  34. <div class="gf-form">
  35. <label class="gf-form-label width-6">Bucket</label>
  36. <div class="gf-form-select-wrapper width-7">
  37. <select class="input-small gf-form-input" ng-model="ctrl.panel.yAxis.bucketMode" ng-options="f.value as f.text for f in editor.yBucketModes" ng-change="ctrl.render()"></select>
  38. </div>
  39. <input type="number"
  40. class="gf-form-input width-5"
  41. placeholder="auto"
  42. ng-model="ctrl.panel.yAxis.bucketCount"
  43. ng-change="ctrl.render()"
  44. ng-model-onblur>
  45. </input>
  46. <info-popover mode="right-normal">Number of buckets for Y axis</info-popover>
  47. </div>
  48. </div>
  49. </div>
  50. <div ng-show="ctrl.panel.yAxis.logBase !== 1">
  51. <div class="gf-form">
  52. <label class="gf-form-label width-7">Split Buckets</label>
  53. <input type="number" class="gf-form-input width-10" placeholder="1" data-placement="right"
  54. bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
  55. ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
  56. </div>
  57. </div>
  58. </div>
  59. <div class="section gf-form-group">
  60. <h5 class="section-heading">X Axis</h5>
  61. <div class="gf-form">
  62. <label class="gf-form-label width-6">Buckets</label>
  63. <input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right"
  64. bs-tooltip="'Number of buckets for X axis.'"
  65. ng-model="ctrl.panel.xBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
  66. </div>
  67. </div>
  68. <div class="section gf-form-group">
  69. <h5 class="section-heading">Data format</h5>
  70. <div class="gf-form">
  71. <label class="gf-form-label width-5">Format</label>
  72. <div class="gf-form-select-wrapper max-width-15">
  73. <select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
  74. </div>
  75. </div>
  76. </div>
  77. </div>