axisEditor.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <div class="editor-row gf-form-group">
  2. <div class="section">
  3. <h5 class="section-heading">Left Y</h5>
  4. <gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.leftShow" on-change="ctrl.render()"></gf-form-switch>
  5. <div class="gf-form">
  6. <label class="gf-form-label width-5">Unit</label>
  7. <div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[0]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $subItem)"></div>
  8. </div>
  9. <div class="gf-form">
  10. <label class="gf-form-label width-5">Scale</label>
  11. <div class="gf-form-select-wrapper max-width-15">
  12. <select class="gf-form-input" ng-model="ctrl.panel.grid.leftLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
  13. </div>
  14. </div>
  15. <div class="gf-form-inline">
  16. <div class="gf-form max-width-10">
  17. <label class="gf-form-label width-5">Y-Min</label>
  18. <input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMin" ng-change="ctrl.render()" ng-model-onblur>
  19. </div>
  20. <div class="gf-form max-width-10">
  21. <label class="gf-form-label width-5">Y-Max</label>
  22. <input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMax" ng-change="ctrl.render()" ng-model-onblur>
  23. </div>
  24. </div>
  25. <div class="gf-form">
  26. <label class="gf-form-label width-5">Label</label>
  27. <input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
  28. </div>
  29. </div>
  30. <div class="section">
  31. <h5 class="section-heading">Right Y</h5>
  32. <gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.rightShow" on-change="ctrl.render()"></gf-form-switch>
  33. <div class="gf-form">
  34. <label class="gf-form-label width-5">Unit</label>
  35. <div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[1]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $subItem)"></div>
  36. </div>
  37. <div class="gf-form">
  38. <label class="gf-form-label width-5">Scale</label>
  39. <div class="gf-form-select-wrapper max-width-15">
  40. <select class="gf-form-input" ng-model="ctrl.panel.grid.rightLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
  41. </div>
  42. </div>
  43. <div class="gf-form-inline">
  44. <div class="gf-form max-width-10">
  45. <label class="gf-form-label width-5">Y-Min</label>
  46. <input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMin" ng-change="ctrl.render()" ng-model-onblur>
  47. </div>
  48. <div class="gf-form max-width-10">
  49. <label class="gf-form-label width-5">Y-Max</label>
  50. <input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMax" ng-change="ctrl.render()" ng-model-onblur>
  51. </div>
  52. </div>
  53. <div class="gf-form">
  54. <label class="gf-form-label width-5">Label</label>
  55. <input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
  56. </div>
  57. </div>
  58. </div>
  59. <div class="section" style="margin-bottom: 20px">
  60. <div class="tight-form">
  61. <ul class="tight-form-list">
  62. <li class="tight-form-item" style="width: 80px">
  63. Show Axis
  64. </li>
  65. <li class="tight-form-item">
  66. X-Axis&nbsp;
  67. <input class="cr1" id="hideXAxis" type="checkbox"
  68. ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
  69. <label for="hideXAxis" class="cr1"></label>
  70. </li>
  71. <li class="tight-form-item last">
  72. Y-Axis&nbsp;
  73. <input class="cr1" id="hideYAxis" type="checkbox"
  74. ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.render()">
  75. <label for="hideYAxis" class="cr1"></label>
  76. </li>
  77. </ul>
  78. <div class="clearfix"></div>
  79. </div>
  80. <div class="tight-form last">
  81. <ul class="tight-form-list">
  82. <li class="tight-form-item" style="width: 80px">
  83. Thresholds
  84. </li>
  85. <li class="tight-form-item">
  86. Level 1
  87. </li>
  88. <li>
  89. <input type="number" class="input-small tight-form-input"
  90. ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
  91. </li>
  92. <li class="tight-form-item">
  93. <spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
  94. </li>
  95. <li class="tight-form-item">
  96. Level 2
  97. </li>
  98. <li>
  99. <input type="number" class="input-small tight-form-input"
  100. ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
  101. </li>
  102. <li class="tight-form-item">
  103. <spectrum-picker ng-model="ctrl.panel.grid.threshold2Color" ng-change="ctrl.render()" ></spectrum-picker>
  104. </li>
  105. <li class="tight-form-item last">
  106. <editor-checkbox text="Line mode" model="ctrl.panel.grid.thresholdLine" change="ctrl.render()"></editor-checkbox>
  107. </li>
  108. </ul>
  109. <div class="clearfix"></div>
  110. </div>
  111. </div>
  112. </div>
  113. <div class="editor-row">
  114. <div class="section">
  115. <div class="tight-form">
  116. <ul class="tight-form-list">
  117. <li class="tight-form-item" style="width: 80px">
  118. Legend
  119. </li>
  120. <li class="tight-form-item">
  121. <editor-checkbox text="Show" model="ctrl.panel.legend.show" change="ctrl.refresh()"></editor-checkbox>
  122. </li>
  123. <li class="tight-form-item">
  124. <editor-checkbox text="Table" model="ctrl.panel.legend.alignAsTable" change="ctrl.render()"></editor-checkbox>
  125. </li>
  126. <li class="tight-form-item">
  127. <editor-checkbox text="Right side" model="ctrl.panel.legend.rightSide" change="ctrl.render()"></editor-checkbox>
  128. </li>
  129. <li ng-if="ctrl.panel.legend.rightSide" class="tight-form-item">
  130. Side width
  131. </li>
  132. <li ng-if="ctrl.panel.legend.rightSide" style="width: 105px">
  133. <input type="number" class="input-small tight-form-input" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right"
  134. ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
  135. </li>
  136. </ul>
  137. <div class="clearfix"></div>
  138. </div>
  139. <div class="tight-form">
  140. <ul class="tight-form-list">
  141. <li class="tight-form-item" style="width: 80px">
  142. Hide series
  143. </li>
  144. <li class="tight-form-item">
  145. <editor-checkbox text="With only nulls" model="ctrl.panel.legend.hideEmpty" change="ctrl.render()"></editor-checkbox>
  146. </li>
  147. <li class="tight-form-item last">
  148. <editor-checkbox text="With only zeroes" model="ctrl.panel.legend.hideZero" change="ctrl.render()"></editor-checkbox>
  149. </li>
  150. </ul>
  151. <div class="clearfix"></div>
  152. </div>
  153. <div class="tight-form last">
  154. <ul class="tight-form-list">
  155. <li class="tight-form-item" style="width: 80px">
  156. Values
  157. </li>
  158. <li class="tight-form-item">
  159. <editor-checkbox text="Min" model="ctrl.panel.legend.min" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
  160. </li>
  161. <li class="tight-form-item">
  162. <editor-checkbox text="Max" model="ctrl.panel.legend.max" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
  163. </li>
  164. <li class="tight-form-item">
  165. <editor-checkbox text="Avg" model="ctrl.panel.legend.avg" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
  166. </li>
  167. <li class="tight-form-item">
  168. <editor-checkbox text="Current" model="ctrl.panel.legend.current" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
  169. </li>
  170. <li class="tight-form-item">
  171. <editor-checkbox text="Total" model="ctrl.panel.legend.total" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
  172. </li>
  173. <li class="tight-form-item">
  174. Decimals
  175. </li>
  176. <li style="width: 105px">
  177. <input type="number" class="input-small tight-form-input" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
  178. ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
  179. </li>
  180. </ul>
  181. <div class="clearfix"></div>
  182. </div>
  183. </div>
  184. </div>