blob: 307207cd770263562a03b90a0cedb81ec3b045a8 [file] [log] [blame]
<div ng-controller="histogram" 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;
}
.histogram-marker {
display: block;
width: 20px;
height: 21px;
background-image: url('img/annotation-icon.png');
background-repeat: no-repeat;
}</style><div><span ng-show="panel.options"><a class="link small" ng-show="panel.options" ng-click="options=!options">View <i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i></a> |&nbsp</span> <span ng-show="panel.zoomlinks"><a class="small" ng-click="zoom(2)"><i class="icon-zoom-out"></i> Zoom Out</a> |&nbsp</span> <span ng-show="panel.legend" ng-repeat="series in legend" class="histogram-legend"><i class="icon-circle" ng-style="{color: series.query.color}"></i> <span class="small histogram-legend-item"><span ng-if="panel.show_query">{{series.query.alias || series.query.query}}</span> <span ng-if="!panel.show_query">{{series.query.alias}}</span> <span ng-show="panel.legend_counts">({{series.hits}})</span></span></span> <span ng-show="panel.legend" class="small"><span ng-show="panel.derivative">change in</span><span class="strong" ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong ng-hide="panel.scaleSeconds">{{panel.interval}}</strong><strong ng-show="panel.scaleSeconds">1s</strong> | (<strong>{{hits}}</strong> hits)</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" src="img/load_big.gif"></center><div histogram-chart="" class="pointer histogram-chart" params="{{panel}}"></div></div>