axisEditor.html 6.9 KB

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