1#@!#!123s

: / proc / self / root / usr / share / grafana / public / app / plugins / panel / graph /
Filename : axes_editor.html
back
<div class="editor-row">
  <div class="gf-form-group" ng-repeat="yaxis in ctrl.panel.yaxes">
    <h5 class="section-heading" ng-show="$index === 0">Left Y</h5>
    <h5 class="section-heading" ng-show="$index === 1">Right Y</h5>

    <gf-form-switch
      class="gf-form"
      label="Show"
      label-class="width-6"
      checked="yaxis.show"
      on-change="ctrl.render()"
    ></gf-form-switch>

    <div ng-if="yaxis.show">
      <div class="gf-form gf-form--grow">
        <label class="gf-form-label width-6">
          Unit
				  <info-popover mode="right-normal">The default unit used when not defined by the datasource or in the Fields or Overrides configuration.</info-popover>
        </label>
        <unit-picker on-change="ctrl.setUnitFormat(yaxis)" value="yaxis.format" class="flex-grow-1" />
      </div>
    </div>

    <div class="gf-form">
      <label for="yaxis-scale-select-{{$index}}" class="gf-form-label width-6">Scale</label>
      <div class="gf-form-select-wrapper max-width-20">
        <select
          id="yaxis-scale-select-{{$index}}"
          class="gf-form-input"
          ng-model="yaxis.logBase"
          ng-options="v as k for (k, v) in ctrl.logScales"
          ng-change="ctrl.render()"
        ></select>
      </div>
    </div>

    <div class="gf-form">
      <label class="gf-form-label width-6">Y-Min</label>
      <input
        type="text"
        class="gf-form-input"
        placeholder="auto"
        empty-to-null
        ng-model="yaxis.min"
        ng-change="ctrl.render()"
        ng-model-onblur
      />
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-6">Y-Max</label>
      <input
        type="text"
        class="gf-form-input"
        placeholder="auto"
        empty-to-null
        ng-model="yaxis.max"
        ng-change="ctrl.render()"
        ng-model-onblur
      />
    </div>

    <div ng-if="yaxis.show">
      <div class="gf-form">
        <label class="gf-form-label width-6">Decimals</label>
        <input
          type="number"
          class="gf-form-input width-5"
          placeholder="auto"
          empty-to-null
          bs-tooltip="'Override automatic decimal precision for y-axis'"
          data-placement="right"
          ng-model="yaxis.decimals"
          ng-change="ctrl.render()"
          ng-model-onblur
        />
      </div>

      <div class="gf-form">
        <label for="yaxis-label-select-{{$index}}" class="gf-form-label width-6">Label</label>
        <input
          id="yaxis-label-select-{{$index}}"
          type="text"
          class="gf-form-input max-width-20"
          ng-model="yaxis.label"
          ng-change="ctrl.render()"
          ng-model-onblur
        />
      </div>
    </div>
  </div>

  <div class="gf-form-group">
    <h5 class="section-heading">Y-Axes</h5>
    <gf-form-switch
      class="gf-form"
      label="Align Y-Axes"
      label-class="width-6"
      switch-class="width-5"
      checked="ctrl.panel.yaxis.align"
      on-change="ctrl.render()"
    ></gf-form-switch>
    <div class="gf-form" ng-show="ctrl.panel.yaxis.align">
      <label class="gf-form-label width-6">
        Level
      </label>
      <input
        type="number"
        class="gf-form-input width-6"
        placeholder="0"
        ng-model="ctrl.panel.yaxis.alignLevel"
        ng-change="ctrl.render()"
        ng-model-onblur
        bs-tooltip="'Alignment of Y-axes are based on this value, starting from Y=0'"
        data-placement="right"
      />
    </div>
  </div>

  <div class="gf-form-group" aria-label="{{ctrl.selectors.xAxisSection}}">
    <h5 class="section-heading">X-Axis</h5>
    <gf-form-switch
      class="gf-form"
      label="Show"
      label-class="width-6"
      checked="ctrl.panel.xaxis.show"
      on-change="ctrl.render()"
    ></gf-form-switch>

    <div class="gf-form">
      <label for="xaxis-mode-select" class="gf-form-label width-6">Mode</label>
      <div class="gf-form-select-wrapper max-width-15">
        <select
          id="xaxis-mode-select"
          class="gf-form-input"
          ng-model="ctrl.panel.xaxis.mode"
          ng-options="v as k for (k, v) in ctrl.xAxisModes"
          ng-change="ctrl.xAxisModeChanged()"
        ></select>
      </div>
    </div>

    <!-- Series mode -->
    <div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
      <label class="gf-form-label width-6">Value</label>
      <metric-segment-model
        property="ctrl.panel.xaxis.values[0]"
        options="ctrl.xAxisStatOptions"
        on-change="ctrl.xAxisValueChanged()"
        custom="false"
        css-class="width-10"
        select-mode="true"
      ></metric-segment-model>
    </div>

    <!-- Histogram mode -->
    <div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
      <label class="gf-form-label width-6">Buckets</label>
      <input
        type="number"
        class="gf-form-input max-width-8"
        ng-model="ctrl.panel.xaxis.buckets"
        placeholder="auto"
        ng-change="ctrl.render()"
        ng-model-onblur
        bs-tooltip="'Number of buckets'"
        data-placement="right"
      />
    </div>

    <div class="gf-form-inline" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
      <div class="gf-form">
        <label class="gf-form-label width-6">X-Min</label>
        <input
          type="number"
          class="gf-form-input width-5"
          placeholder="auto"
          empty-to-null
          ng-model="ctrl.panel.xaxis.min"
          ng-change="ctrl.render()"
          ng-model-onblur
        />
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-6">X-Max</label>
        <input
          type="number"
          class="gf-form-input width-5"
          placeholder="auto"
          empty-to-null
          ng-model="ctrl.panel.xaxis.max"
          ng-change="ctrl.render()"
          ng-model-onblur
        />
      </div>
    </div>
  </div>
</div>