axes_editor.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <div class="editor-row">
  2. <div class="gf-form-group" ng-repeat="yaxis in ctrl.panel.yaxes">
  3. <h5 class="section-heading" ng-show="$index === 0">Left Y</h5>
  4. <h5 class="section-heading" ng-show="$index === 1">Right Y</h5>
  5. <gf-form-switch
  6. class="gf-form"
  7. label="Show"
  8. label-class="width-6"
  9. checked="yaxis.show"
  10. on-change="ctrl.render()"
  11. ></gf-form-switch>
  12. <div ng-if="yaxis.show">
  13. <div class="gf-form gf-form--grow">
  14. <label class="gf-form-label width-6">
  15. Unit
  16. <info-popover mode="right-normal">The default unit used when not defined by the datasource or in the Fields or Overrides configuration.</info-popover>
  17. </label>
  18. <unit-picker on-change="ctrl.setUnitFormat(yaxis)" value="yaxis.format" class="flex-grow-1" />
  19. </div>
  20. </div>
  21. <div class="gf-form">
  22. <label for="yaxis-scale-select-{{$index}}" class="gf-form-label width-6">Scale</label>
  23. <div class="gf-form-select-wrapper max-width-20">
  24. <select
  25. id="yaxis-scale-select-{{$index}}"
  26. class="gf-form-input"
  27. ng-model="yaxis.logBase"
  28. ng-options="v as k for (k, v) in ctrl.logScales"
  29. ng-change="ctrl.render()"
  30. ></select>
  31. </div>
  32. </div>
  33. <div class="gf-form">
  34. <label class="gf-form-label width-6">Y-Min</label>
  35. <input
  36. type="text"
  37. class="gf-form-input"
  38. placeholder="auto"
  39. empty-to-null
  40. ng-model="yaxis.min"
  41. ng-change="ctrl.render()"
  42. ng-model-onblur
  43. />
  44. </div>
  45. <div class="gf-form">
  46. <label class="gf-form-label width-6">Y-Max</label>
  47. <input
  48. type="text"
  49. class="gf-form-input"
  50. placeholder="auto"
  51. empty-to-null
  52. ng-model="yaxis.max"
  53. ng-change="ctrl.render()"
  54. ng-model-onblur
  55. />
  56. </div>
  57. <div ng-if="yaxis.show">
  58. <div class="gf-form">
  59. <label class="gf-form-label width-6">Decimals</label>
  60. <input
  61. type="number"
  62. class="gf-form-input width-5"
  63. placeholder="auto"
  64. empty-to-null
  65. bs-tooltip="'Override automatic decimal precision for y-axis'"
  66. data-placement="right"
  67. ng-model="yaxis.decimals"
  68. ng-change="ctrl.render()"
  69. ng-model-onblur
  70. />
  71. </div>
  72. <div class="gf-form">
  73. <label for="yaxis-label-select-{{$index}}" class="gf-form-label width-6">Label</label>
  74. <input
  75. id="yaxis-label-select-{{$index}}"
  76. type="text"
  77. class="gf-form-input max-width-20"
  78. ng-model="yaxis.label"
  79. ng-change="ctrl.render()"
  80. ng-model-onblur
  81. />
  82. </div>
  83. </div>
  84. </div>
  85. <div class="gf-form-group">
  86. <h5 class="section-heading">Y-Axes</h5>
  87. <gf-form-switch
  88. class="gf-form"
  89. label="Align Y-Axes"
  90. label-class="width-6"
  91. switch-class="width-5"
  92. checked="ctrl.panel.yaxis.align"
  93. on-change="ctrl.render()"
  94. ></gf-form-switch>
  95. <div class="gf-form" ng-show="ctrl.panel.yaxis.align">
  96. <label class="gf-form-label width-6">
  97. Level
  98. </label>
  99. <input
  100. type="number"
  101. class="gf-form-input width-6"
  102. placeholder="0"
  103. ng-model="ctrl.panel.yaxis.alignLevel"
  104. ng-change="ctrl.render()"
  105. ng-model-onblur
  106. bs-tooltip="'Alignment of Y-axes are based on this value, starting from Y=0'"
  107. data-placement="right"
  108. />
  109. </div>
  110. </div>
  111. <div class="gf-form-group" aria-label="{{ctrl.selectors.xAxisSection}}">
  112. <h5 class="section-heading">X-Axis</h5>
  113. <gf-form-switch
  114. class="gf-form"
  115. label="Show"
  116. label-class="width-6"
  117. checked="ctrl.panel.xaxis.show"
  118. on-change="ctrl.render()"
  119. ></gf-form-switch>
  120. <div class="gf-form">
  121. <label for="xaxis-mode-select" class="gf-form-label width-6">Mode</label>
  122. <div class="gf-form-select-wrapper max-width-15">
  123. <select
  124. id="xaxis-mode-select"
  125. class="gf-form-input"
  126. ng-model="ctrl.panel.xaxis.mode"
  127. ng-options="v as k for (k, v) in ctrl.xAxisModes"
  128. ng-change="ctrl.xAxisModeChanged()"
  129. ></select>
  130. </div>
  131. </div>
  132. <!-- Series mode -->
  133. <div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
  134. <label class="gf-form-label width-6">Value</label>
  135. <metric-segment-model
  136. property="ctrl.panel.xaxis.values[0]"
  137. options="ctrl.xAxisStatOptions"
  138. on-change="ctrl.xAxisValueChanged()"
  139. custom="false"
  140. css-class="width-10"
  141. select-mode="true"
  142. ></metric-segment-model>
  143. </div>
  144. <!-- Histogram mode -->
  145. <div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
  146. <label class="gf-form-label width-6">Buckets</label>
  147. <input
  148. type="number"
  149. class="gf-form-input max-width-8"
  150. ng-model="ctrl.panel.xaxis.buckets"
  151. placeholder="auto"
  152. ng-change="ctrl.render()"
  153. ng-model-onblur
  154. bs-tooltip="'Number of buckets'"
  155. data-placement="right"
  156. />
  157. </div>
  158. <div class="gf-form-inline" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
  159. <div class="gf-form">
  160. <label class="gf-form-label width-6">X-Min</label>
  161. <input
  162. type="number"
  163. class="gf-form-input width-5"
  164. placeholder="auto"
  165. empty-to-null
  166. ng-model="ctrl.panel.xaxis.min"
  167. ng-change="ctrl.render()"
  168. ng-model-onblur
  169. />
  170. </div>
  171. <div class="gf-form">
  172. <label class="gf-form-label width-6">X-Max</label>
  173. <input
  174. type="number"
  175. class="gf-form-input width-5"
  176. placeholder="auto"
  177. empty-to-null
  178. ng-model="ctrl.panel.xaxis.max"
  179. ng-change="ctrl.render()"
  180. ng-model-onblur
  181. />
  182. </div>
  183. </div>
  184. </div>
  185. </div>