Mapping

Stat

Max Value

Null Value

Mapping type

Sorting

Type

Prefix

Postfix

Decimals

Key Labels

Title Type

</div>
      </div>
    </div>
  </div>

<div class="section gf-form-group">
    <h5 class="section-heading">Coloring<h5>
    <div class="gf-form">
      <label class="gf-form-label width-8">Type</label>
      <div class="gf-form-select-wrapper width-11">
        <select
          class="gf-form-input"
          ng-model="ctrl.panel.coloringType"
          ng-options="n for n in ctrl.coloringTypeOptions"
          ng-change="ctrl.render()"
        />
      </div>
    </div>

<div class="gf-form">
      <label class="gf-form-label width-8">Opacity</label>
      <input
        type="number"
        min="0"
        max="1"
        step="0.1"
        class="gf-form-input width-11"
        ng-model="ctrl.panel.opacity"
        ng-blur="ctrl.render()"
      />
    </div>

<div ng-if="ctrl.panel.coloringType == 'thresholds'">
      <div class="gf-form">
        <label class="gf-form-label width-8">Thresholds
          <tip>
            Define two threshold values<br /> 50,80 will produce: <50 = Green, 50:80 = Yellow, >80 = Red
          </tip>
        </label>
        <input
          type="text"
          class="gf-form-input width-11"
          ng-model="ctrl.panel.thresholds"
          ng-blur="ctrl.render()"
          placeholder="50,80"
        />
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-6">Colors</label>
        <span class="gf-form-label">
          <spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" />
        </span>
        <span class="gf-form-label">
          <spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" />
        </span>
        <span class="gf-form-label">
          <spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" />
        </span>
        <span class="gf-form-label">
            <a ng-click="ctrl.invertColorOrder()"> Invert </a>
        </span>
      </div>
    </div>

<div class="gf-form">
        <label class="gf-form-label width-11">Default
          <tip>Color for all other keys</tip>
        </label>
        <span class="gf-form-label">
          <spectrum-picker
            ng-model="ctrl.panel.colorsKeyMappingDefault"
            ng-change="ctrl.render()"
          />
        </span>
      </div>
      <div class="gf-form">
        <div class="gf-form-button-row">
          <button class="btn btn-inverse" ng-click="ctrl.addColorKeyMapping()">
            <i class="fa fa-plus"></i>
            Add a key color mapping
          </button>
        </div>
      </div>

</div>