tab_display.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <div class="gf-form-group">
  2. <div class="grafana-info-box">
  3. <h5>Migration</h5>
  4. <p>
  5. Consider switching to the Time series visualization type. It is a more capable and performant version of this panel.
  6. </p>
  7. <p>
  8. <button class="btn btn-primary" ng-click="ctrl.migrateToReact()">
  9. Migrate
  10. </button>
  11. </p>
  12. <p>Some features like colored time regions and negative transforms are not supported in the new panel yet.</p>
  13. </div>
  14. <gf-form-switch
  15. class="gf-form"
  16. label="Bars"
  17. label-class="width-8"
  18. checked="ctrl.panel.bars"
  19. on-change="ctrl.render()"
  20. ></gf-form-switch>
  21. <gf-form-switch
  22. class="gf-form"
  23. label="Lines"
  24. label-class="width-8"
  25. checked="ctrl.panel.lines"
  26. on-change="ctrl.render()"
  27. ></gf-form-switch>
  28. <div class="gf-form" ng-if="ctrl.panel.lines">
  29. <label class="gf-form-label width-8" for="linewidth-select-input">Line width</label>
  30. <div class="gf-form-select-wrapper max-width-5">
  31. <select
  32. id="linewidth-select-input"
  33. class="gf-form-input"
  34. ng-model="ctrl.panel.linewidth"
  35. ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
  36. ng-change="ctrl.render()"
  37. ></select>
  38. </div>
  39. </div>
  40. <gf-form-switch
  41. ng-disabled="!ctrl.panel.lines"
  42. class="gf-form"
  43. label="Staircase"
  44. label-class="width-8"
  45. checked="ctrl.panel.steppedLine"
  46. on-change="ctrl.render()"
  47. ></gf-form-switch>
  48. <div class="gf-form" ng-if="ctrl.panel.lines">
  49. <label class="gf-form-label width-8" for="fill-select-input">Area fill</label>
  50. <div class="gf-form-select-wrapper max-width-5">
  51. <select
  52. id="fill-select-input"
  53. class="gf-form-input"
  54. ng-model="ctrl.panel.fill"
  55. ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
  56. ng-change="ctrl.render()"
  57. ></select>
  58. </div>
  59. </div>
  60. <div class="gf-form" ng-if="ctrl.panel.lines && ctrl.panel.fill">
  61. <label class="gf-form-label width-8">Fill gradient</label>
  62. <div class="gf-form-select-wrapper max-width-5">
  63. <select
  64. class="gf-form-input"
  65. ng-model="ctrl.panel.fillGradient"
  66. ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
  67. ng-change="ctrl.render()"
  68. ></select>
  69. </div>
  70. </div>
  71. <gf-form-switch
  72. class="gf-form"
  73. label="Points"
  74. label-class="width-8"
  75. checked="ctrl.panel.points"
  76. on-change="ctrl.render()"
  77. ></gf-form-switch>
  78. <div class="gf-form" ng-if="ctrl.panel.points">
  79. <label class="gf-form-label width-8" for="pointradius-select-input">Point Radius</label>
  80. <div class="gf-form-select-wrapper max-width-5">
  81. <select
  82. id="pointradius-select-input"
  83. class="gf-form-input"
  84. ng-model="ctrl.panel.pointradius"
  85. ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]"
  86. ng-change="ctrl.render()"
  87. ></select>
  88. </div>
  89. </div>
  90. <gf-form-switch
  91. class="gf-form"
  92. label="Alert thresholds"
  93. label-class="width-8"
  94. checked="ctrl.panel.options.alertThreshold"
  95. on-change="ctrl.render()"
  96. ></gf-form-switch>
  97. </div>
  98. <div class="gf-form-group">
  99. <h5 class="section-heading">Stacking and null value</h5>
  100. <gf-form-switch
  101. class="gf-form"
  102. label="Stack"
  103. label-class="width-7"
  104. checked="ctrl.panel.stack"
  105. on-change="ctrl.render()"
  106. >
  107. </gf-form-switch>
  108. <gf-form-switch
  109. class="gf-form"
  110. ng-show="ctrl.panel.stack"
  111. label="Percent"
  112. label-class="width-7"
  113. checked="ctrl.panel.percentage"
  114. on-change="ctrl.render()"
  115. >
  116. </gf-form-switch>
  117. <div class="gf-form">
  118. <label class="gf-form-label width-7" for="null-value-select-input">Null value</label>
  119. <div class="gf-form-select-wrapper">
  120. <select
  121. id="null-value-select-input"
  122. class="gf-form-input max-width-9"
  123. ng-model="ctrl.panel.nullPointMode"
  124. ng-options="f for f in ['connected', 'null', 'null as zero']"
  125. ng-change="ctrl.render()"
  126. ></select>
  127. </div>
  128. </div>
  129. </div>
  130. <div class="gf-form-group">
  131. <h5 class="section-heading">Hover tooltip</h5>
  132. <div class="gf-form">
  133. <label class="gf-form-label width-9" for="tooltip-mode-select-input">Mode</label>
  134. <div class="gf-form-select-wrapper max-width-8">
  135. <select
  136. id="tooltip-mode-select-input"
  137. class="gf-form-input"
  138. ng-model="ctrl.panel.tooltip.shared"
  139. ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]"
  140. ng-change="ctrl.render()"
  141. ></select>
  142. </div>
  143. </div>
  144. <div class="gf-form">
  145. <label class="gf-form-label width-9" for="tooltip-sort-select-input">Sort order</label>
  146. <div class="gf-form-select-wrapper max-width-8">
  147. <select
  148. id="tooltip-sort-select-input"
  149. class="gf-form-input"
  150. ng-model="ctrl.panel.tooltip.sort"
  151. ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]"
  152. ng-change="ctrl.render()"
  153. ></select>
  154. </div>
  155. </div>
  156. <div class="gf-form" ng-show="ctrl.panel.stack">
  157. <label class="gf-form-label width-9">Stacked value</label>
  158. <div class="gf-form-select-wrapper max-width-8">
  159. <select
  160. class="gf-form-input"
  161. ng-model="ctrl.panel.tooltip.value_type"
  162. ng-options="f for f in ['cumulative','individual']"
  163. ng-change="ctrl.render()"
  164. ></select>
  165. </div>
  166. </div>
  167. </div>