energylink/public/app/plugins/panel/table/column_options.html

<div class="edit-tab-with-sidemenu">
	<aside class="edit-sidemenu-aside">
		<ul class="edit-sidemenu">
      <li ng-repeat="style in editor.panel.styles" ng-class="{active: editor.activeStyleIndex === $index}">
        <a ng-click="editor.activeStyleIndex = $index" >{{style.pattern || 'New rule'}}</a>
      </li>
      <li>
        <a class="pointer" ng-click="editor.addColumnStyle()">
          <i class="fa fa-plus"></i>&nbsp;Add
        </a>
      </li>
		</ul>
	</aside>

  <div class="edit-tab-content" ng-repeat="style in editor.panel.styles" ng-if="editor.activeStyleIndex === $index">

    <div class="section gf-form-group">
      <h5 class="section-heading">Options</h5>
      <div class="gf-form-inline">
        <div class="gf-form">
          <label class="gf-form-label width-13">Apply to columns named</label>
          <input type="text" placeholder="Name or regex" class="gf-form-input width-13" ng-model="style.pattern" bs-tooltip="'Specify regex using /my.*regex/ syntax'" bs-typeahead="editor.getColumnNames" ng-blur="editor.render()" data-min-length=0 data-items=100 ng-model-onblur data-placement="right">
        </div>
      </div>
      <div class="gf-form" ng-if="style.type !== 'hidden'">
        <label class="gf-form-label width-13">Column Header</label>
        <input type="text" class="gf-form-input width-13" ng-model="style.alias" ng-change="editor.render()" ng-model-onblur placeholder="Override header label">
      </div>
      <gf-form-switch class="gf-form" label-class="width-13" label="Render value as link" checked="style.link" change="editor.render()"></gf-form-switch>
    </div>

    <div class="section gf-form-group">
      <h5 class="section-heading">Type</h5>

      <div class="gf-form">
        <label class="gf-form-label width-11">Type</label>
        <div class="gf-form-select-wrapper width-10">
          <select class="gf-form-input" ng-model="style.type" ng-options="c.value as c.text for c in editor.columnTypes" ng-change="editor.render()"></select>
        </div>
      </div>
      <div class="gf-form"  ng-if="style.type === 'date'">
        <label class="gf-form-label width-11">Date Format</label>
        <metric-segment-model property="style.dateFormat" options="editor.dateFormats" on-change="editor.render()" custom="true"></metric-segment-model>
      </div>

      <div ng-if="style.type === 'string'">
        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Sanitize HTML" checked="style.sanitize" change="editor.render()"></gf-form-switch>
      </div>
      <div ng-if="style.type === 'string'">
        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Preserve Formatting" checked="style.preserveFormat" change="editor.render()"></gf-form-switch>
      </div>

      <div ng-if="style.type === 'number'">
        <div class="gf-form">
          <label class="gf-form-label width-11">Unit</label>
          <div class="gf-form-dropdown-typeahead width-10" ng-model="style.unit" dropdown-typeahead2="editor.unitFormats" dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)"></div>
        </div>
        <div class="gf-form">
          <label class="gf-form-label width-11">Decimals</label>
          <input type="number" class="gf-form-input width-4" data-placement="right" ng-model="style.decimals" ng-change="editor.render()" ng-model-onblur>
        </div>
      </div>
    </div>

    <div class="section gf-form-group"  ng-if="style.type === 'number'">
      <h5 class="section-heading">Thresholds</h5>
      <div class="gf-form">
        <label class="gf-form-label width-8">Thresholds<tip>Comma separated values</tip></label>
        <input type="text" class="gf-form-input width-10" ng-model="style.thresholds" placeholder="50,80" ng-blur="editor.render()" array-join ng-model-onblur>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-8">Color Mode</label>
        <div class="gf-form-select-wrapper width-10">
          <select class="gf-form-input" ng-model="style.colorMode" ng-options="c.value as c.text for c in editor.colorModes" ng-change="editor.render()"></select>
        </div>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-8">Colors</label>
        <span class="gf-form-label">
          <spectrum-picker ng-model="style.colors[0]" ng-change="editor.render()"></spectrum-picker>
        </span>
        <span class="gf-form-label">
          <spectrum-picker ng-model="style.colors[1]" ng-change="editor.render()"></spectrum-picker>
        </span>
        <span class="gf-form-label">
          <spectrum-picker ng-model="style.colors[2]" ng-change="editor.render()"></spectrum-picker>
        </span>
        <div class="gf-form-label">
          <a class="pointer" ng-click="editor.invertColorOrder($index)">Invert</a>
        </div>
      </div>
    </div>

    <div class="section gf-form-group" ng-if="style.link">
      <h5 class="section-heading">Link</h5>
      <div class="gf-form">
        <label class="gf-form-label width-9">Url</label>
        <input type="text" class="gf-form-input width-29" ng-model="style.linkUrl" ng-blur="editor.render()" ng-model-onblur data-placement="right">
        <info-popover mode="right-absolute">
          <p>Specify an URL (relative or absolute)</p>
          <span>
            Use special variables to specify cell values: <br>
            <em>$__cell</em> refers to current cell value <br>
            <em>$__cell_n</em> refers to Nth column value in current row. Column indexes are started from 0. For instance,
              <em>$__cell_1</em> refers to second column's value.
          </span>
        </info-popover>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-9">Tooltip</label>
        <input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur data-placement="right">
        <info-popover mode="right-absolute">
          <p>Specify text for link tooltip.</p>
          <span>
            This title appears when user hovers pointer over the cell with link.
            Use the same variables as for URL.
          </span>
        </info-popover>
      </div>
      <gf-form-switch class="gf-form" label-class="width-9" label="Open in new tab" checked="style.linkTargetBlank"></gf-form-switch>
    </div>

    <div class="clearfix"></div>

    <button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
      <i class="fa fa-trash"></i> Remove Rule
    </button>
    <br />
    <br />

  </div>