Torkel Ödegaard
97 lines
3.3 KiB
HTML
97 lines
3.3 KiB
HTML
<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}">
|
|
<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;
|
|
}
|
|
</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> | 
|
|
</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> |