1#@!#!123s

: / proc / self / root / usr / share / grafana / public / app / plugins / panel / graph /
Filename : tab_display.html
back
<div class="gf-form-group">
  <div class="grafana-info-box">
    <h5>Migration</h5>
    <p>
      Consider switching to the Time series visualization type. It is a more capable and performant version of this panel.
    </p>
    <p>
      <button class="btn btn-primary" ng-click="ctrl.migrateToReact()">
        Migrate
      </button>
    </p>
    <p>Some features are not supported in the new panel yet.</p>
  </div>

  <gf-form-switch
    class="gf-form"
    label="Bars"
    label-class="width-8"
    checked="ctrl.panel.bars"
    on-change="ctrl.render()"
  ></gf-form-switch>

  <gf-form-switch
    class="gf-form"
    label="Lines"
    label-class="width-8"
    checked="ctrl.panel.lines"
    on-change="ctrl.render()"
  ></gf-form-switch>

  <div class="gf-form" ng-if="ctrl.panel.lines">
    <label class="gf-form-label width-8" for="linewidth-select-input">Line width</label>
    <div class="gf-form-select-wrapper max-width-5">
      <select
        id="linewidth-select-input"
        class="gf-form-input"
        ng-model="ctrl.panel.linewidth"
        ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
        ng-change="ctrl.render()"
      ></select>
    </div>
  </div>

  <gf-form-switch
    ng-disabled="!ctrl.panel.lines"
    class="gf-form"
    label="Staircase"
    label-class="width-8"
    checked="ctrl.panel.steppedLine"
    on-change="ctrl.render()"
  ></gf-form-switch>

  <div class="gf-form" ng-if="ctrl.panel.lines">
    <label class="gf-form-label width-8" for="fill-select-input">Area fill</label>
    <div class="gf-form-select-wrapper max-width-5">
      <select
        id="fill-select-input"
        class="gf-form-input"
        ng-model="ctrl.panel.fill"
        ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
        ng-change="ctrl.render()"
      ></select>
    </div>
  </div>

  <div class="gf-form" ng-if="ctrl.panel.lines && ctrl.panel.fill">
    <label class="gf-form-label width-8">Fill gradient</label>
    <div class="gf-form-select-wrapper max-width-5">
      <select
        class="gf-form-input"
        ng-model="ctrl.panel.fillGradient"
        ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
        ng-change="ctrl.render()"
      ></select>
    </div>
  </div>

  <gf-form-switch
    class="gf-form"
    label="Points"
    label-class="width-8"
    checked="ctrl.panel.points"
    on-change="ctrl.render()"
  ></gf-form-switch>

  <div class="gf-form" ng-if="ctrl.panel.points">
    <label class="gf-form-label width-8" for="pointradius-select-input">Point Radius</label>
    <div class="gf-form-select-wrapper max-width-5">
      <select
        id="pointradius-select-input"
        class="gf-form-input"
        ng-model="ctrl.panel.pointradius"
        ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]"
        ng-change="ctrl.render()"
      ></select>
    </div>
  </div>

  <gf-form-switch
    class="gf-form"
    label="Alert thresholds"
    label-class="width-8"
    checked="ctrl.panel.options.alertThreshold"
    on-change="ctrl.render()"
  ></gf-form-switch>
</div>

<div class="gf-form-group">
  <h5 class="section-heading">Stacking and null value</h5>
  <gf-form-switch
    class="gf-form"
    label="Stack"
    label-class="width-7"
    checked="ctrl.panel.stack"
    on-change="ctrl.render()"
  >
  </gf-form-switch>
  <gf-form-switch
    class="gf-form"
    ng-show="ctrl.panel.stack"
    label="Percent"
    label-class="width-7"
    checked="ctrl.panel.percentage"
    on-change="ctrl.render()"
  >
  </gf-form-switch>
  <div class="gf-form">
    <label class="gf-form-label width-7" for="null-value-select-input">Null value</label>
    <div class="gf-form-select-wrapper">
      <select
        id="null-value-select-input"
        class="gf-form-input max-width-9"
        ng-model="ctrl.panel.nullPointMode"
        ng-options="f for f in ['connected', 'null', 'null as zero']"
        ng-change="ctrl.render()"
      ></select>
    </div>
  </div>
</div>

<div class="gf-form-group">
  <h5 class="section-heading">Hover tooltip</h5>
  <div class="gf-form">
    <label class="gf-form-label width-9" for="tooltip-mode-select-input">Mode</label>
    <div class="gf-form-select-wrapper max-width-8">
      <select
        id="tooltip-mode-select-input"
        class="gf-form-input"
        ng-model="ctrl.panel.tooltip.shared"
        ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]"
        ng-change="ctrl.render()"
      ></select>
    </div>
  </div>
  <div class="gf-form">
    <label class="gf-form-label width-9" for="tooltip-sort-select-input">Sort order</label>
    <div class="gf-form-select-wrapper max-width-8">
      <select
        id="tooltip-sort-select-input"
        class="gf-form-input"
        ng-model="ctrl.panel.tooltip.sort"
        ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]"
        ng-change="ctrl.render()"
      ></select>
    </div>
  </div>
  <div class="gf-form" ng-show="ctrl.panel.stack">
    <label class="gf-form-label width-9">Stacked value</label>
    <div class="gf-form-select-wrapper max-width-8">
      <select
        class="gf-form-input"
        ng-model="ctrl.panel.tooltip.value_type"
        ng-options="f for f in ['cumulative','individual']"
        ng-change="ctrl.render()"
      ></select>
    </div>
  </div>
</div>