energylink/src/app/panels/graphite/module.html

<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-class='{"panel-full-edit-mode": inEditMode}'>
  <style>
    .histogram-legend {
      display:inline-block;
      padding-right:5px
    }
    .histogram-legend-dot {
      display:inline-block;
      height:10px;
      width:10px;
      border-radius:5px;
    }
    .histogram-legend-item {
      display:inline-block;
    }
    .histogram-chart {
      position:relative;
    }
    .histogram-options {
      padding: 5px;
      margin-right: 15px;
      margin-bottom: 0px;
    }
    .histogram-options label {
      margin: 0px 0px 0px 10px !important;
    }
    .histogram-options span {
      white-space: nowrap;
    }

    /* this is actually should be in bootstrap */
    .form-inline .checkbox {
        display: inline-block;
    }

    .full-edit-mode {
      //display: none;
    }

    .panel-full-edit-mode {
      z-index: 1500;
      display: block;
      position: fixed;
      left: 20px;
      right: 20px;
      top: 100px;
      outline: 1px solid #101214;
      border-top: 1px solid #3e444c;
      padding: 0 10px 10px 10px;
      background: #202328;
    }
  </style>
  <div>
    <span ng-show='panel.options'>
      <a class="link underline small" ng-show='panel.options' ng-click="options=!options">
        <i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i> View
      </a> |&nbsp
    </span>
    <span ng-show='panel.zoomlinks && data'>
      <!--<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>-->
      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
    </span>
  </div>
  <form class="form-inline bordered histogram-options" ng-show="options">
    <span>
      <div class="checkbox">
        <label class="small">
          <input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars" ng-change="render()">
          Bars
        </label>
      </div>
      <div class="checkbox">
        <label class="small">
          <input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines" ng-change="render()">
          Lines
        </label>
      </div>
      <div class="checkbox">
        <label class="small">
          <input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack" ng-change="render()">
          Stack
        </label>
      </div>
    </span>
    <span ng-show="panel.stack">
      <div class="checkbox">
        <label style="white-space:nowrap" class="small">
          <input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage" ng-change="render()">
          Percent
        </label>
      </div>
    </span>
    <span>
      <div class="checkbox">
        <label class="small">
          <input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend" ng-change="render()">
          Legend
        </label>
      </div>
    </span>
    <span>
      <label class="small">Interval</label> <select ng-change="set_interval(panel.interval);get_data();" class="input-small" ng-model="panel.interval" ng-options="interval_label(time) for time in _.union([panel.interval],panel.intervals)"></select>
    </span>
  </form>
  <center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center>
  <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
  <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
      <i class='icon-circle' ng-style="{color: series.info.color}"></i>
      <span class='small histogram-legend-item'>
        <span ng-if="panel.show_query">{{series.info.alias || series.info.query}}</span>
        <span ng-if="!panel.show_query">{{series.info.alias}}</span>
      </span>
  </span>

  <div class="fluid-row panel-full-edit-mode-controls" ng-show="inEditMode" style="margin-top: 20px;">
      <div ng-model="editor.index" bs-tabs>
        <div ng-repeat="tab in setEditorTabs(panelMeta)" data-title="{{tab}}">
        </div>
      </div>
      <div ng-show="editorTabs[editor.index] == 'General'">
        <div ng-include src="'app/partials/panelgeneral.html'"></div>
      </div>

      <div ng-show="editorTabs[editor.index] == 'Panel'">
        <div ng-include src="edit_path(panel.type)"></div>
      </div>

      <div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
        <div ng-include src="tab.src"></div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-danger" ng-click="closeEditMode()">Close</button>
    </div>
  </div>
</div>