Skip to content

N
nexpie-grafana-theme
Commit 85578f01 by Torkel Ödegaard
Options

null point options is working, moved to global panel style instead of alias specific option

parent eee81617
Showing with 23 additions and 33 deletions
src/app/panels/graphite/legend.html
...@@ -4,46 +4,31 @@ ...@@ -4,46 +4,31 @@
class="histogram-legend"> class="histogram-legend">
<i class='icon-minus pointer' <i class='icon-minus pointer'
ng-style="{color: series.color}" ng-style="{color: series.color}"
bs-popover="'colorPopup.html'" ng-click="toggleSeries(series)">
data-unique="1"
data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
</i> </i>
<span class='small histogram-legend-item'> <span class='small histogram-legend-item'>
<a ng-click="toggleSeries(series)"> <a bs-popover="'colorPopup.html'" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
{{series.alias}} {{series.alias}}
</a> </a>
</span> </span>
</span> </span>
<!-- <a class="small" ng-click="toggleYAxis(series)">
2:nd Y-axis (y&sup2;) <input type="checkbox"></input>
</a> -->
<!-- <div class="editor-row">
Fill style <select class="input-mini" ng-model="panel.aliasFillStyle[series.alias]" ng-options="f for f in ['no', 'all', 'null']" ng-change="get_data()"></select>
</div>
-->
<script type="text/ng-template" id="colorPopup.html"> <script type="text/ng-template" id="colorPopup.html">
<div class="histogram-legend-popover"> <div class="histogram-legend-popover">
<a class="close" ng-click="dismiss();" href="">×</a> <a class="close" ng-click="dismiss();" href="">×</a>
<div class="editor-row small" style="margin-left: 5px; padding-bottom: 0;"> <div class="editor-row small" style="padding-bottom: 0;">
<label>Axis:</label> <label>Axis:</label>
<button ng-click="toggleYAxis(series)" <button ng-click="toggleYAxis(series)"
class="btn btn-mini" class="btn btn-mini"
ng-class="{'btn-success': series.yaxis === 1 }"> ng-class="{'btn-success': series.yaxis === 1 }">
Left Left
</button> </button>
<button ng-click="toggleYAxis(series)" <button ng-click="toggleYAxis(series)"
class="btn btn-mini" class="btn btn-mini"
ng-class="{'btn-success': series.yaxis === 2 }"> ng-class="{'btn-success': series.yaxis === 2 }">
Right Right
</button> </button>
<label>Null points:</label>
<button ng-click="panel.aliasFillStyle[series.alias] = 'no'; get_data();" class="btn btn btn-mini">Connect</button>
<button ng-click="panel.aliasFillStyle[series.alias] = 'null';get_data();" class="btn btn-success btn-mini">Null</button>
<button ng-click="panel.aliasFillStyle[series.alias] = 'all';get_data();" class="btn btn btn-mini">Zero</button>
</div> </div>
<div class="editor-row"> <div class="editor-row">
......
src/app/panels/graphite/module.js
...@@ -209,6 +209,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -209,6 +209,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
*/ */
zerofill : true, zerofill : true,
nullPointMode : 'connected',
tooltip : { tooltip : {
value_type: 'cumulative', value_type: 'cumulative',
query_as_alias: true query_as_alias: true
...@@ -218,7 +220,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -218,7 +220,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
aliasColors: {}, aliasColors: {},
aliasYAxis: {}, aliasYAxis: {},
aliasFillStyle: {}
}; };
_.defaults($scope.panel,_d); _.defaults($scope.panel,_d);
...@@ -348,7 +349,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -348,7 +349,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
interval: $scope.interval, interval: $scope.interval,
start_date: $scope.range && $scope.range.from, start_date: $scope.range && $scope.range.from,
end_date: $scope.range && $scope.range.to, end_date: $scope.range && $scope.range.to,
fill_style: $scope.panel.aliasFillStyle[alias] || 'no',
}; };
var time_series = new timeSeries.ZeroFilled(tsOpts); var time_series = new timeSeries.ZeroFilled(tsOpts);
...@@ -363,7 +363,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -363,7 +363,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
alias: alias, alias: alias,
color: color, color: color,
enable: true, enable: true,
yaxis: yaxis yaxis: yaxis,
}; };
$scope.legend.push(seriesInfo); $scope.legend.push(seriesInfo);
...@@ -656,7 +656,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -656,7 +656,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
} }
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var _d = data[i].time_series.getFlotPairs(required_times); var _d = data[i].time_series.getFlotPairs(required_times, scope.panel.nullPointMode);
data[i].yaxis = data[i].info.yaxis; data[i].yaxis = data[i].info.yaxis;
data[i].data = _d; data[i].data = _d;
......
src/app/panels/graphite/styleEditor.html
...@@ -30,9 +30,17 @@ ...@@ -30,9 +30,17 @@
<select class="input-mini" ng-model="panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="render()"></select> <select class="input-mini" ng-model="panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="render()"></select>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Y Format <tip>Y-axis formatting</tip></label> <label class="small">Left Y Format <tip>Y-axis formatting</tip></label>
<select class="input-small" ng-model="panel.y_format" ng-options="f for f in ['none','short','bytes']" ng-change="render()"></select> <select class="input-small" ng-model="panel.y_format" ng-options="f for f in ['none','short','bytes']" ng-change="render()"></select>
</div> </div>
<div class="editor-option">
<label class="small">Right Y Format <tip>Y-axis formatting</tip></label>
<select class="input-small" ng-model="panel.y2_format" ng-options="f for f in ['none','short','bytes']" ng-change="render()"></select>
</div>
<div class="editor-option">
<label class="small">Null point mode <tip>Define how null values should be drawn</tip></label>
<select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="render()"></select>
</div>
</div> </div>
<div class="section"> <div class="section">
<h5>Multiple Series</h5> <h5>Multiple Series</h5>
......
src/app/panels/graphite/timeSeries.js
...@@ -30,15 +30,12 @@ function (_, Interval) { ...@@ -30,15 +30,12 @@ function (_, Interval) {
* end_date will ensure that the series streches to resemble the entire * end_date will ensure that the series streches to resemble the entire
* expected result * expected result
* @opt {date} end_date (optional) The end point for the time series, see start_date * @opt {date} end_date (optional) The end point for the time series, see start_date
* @opt {string} fill_style Either "minimal", or "all" describing the strategy used to zero-fill
* the series.
*/ */
ts.ZeroFilled = function (opts) { ts.ZeroFilled = function (opts) {
opts = _.defaults(opts, { opts = _.defaults(opts, {
interval: '10m', interval: '10m',
start_date: null, start_date: null,
end_date: null, end_date: null,
fill_style: 'minimal'
}); });
// the expected differenece between readings. // the expected differenece between readings.
...@@ -92,16 +89,16 @@ function (_, Interval) { ...@@ -92,16 +89,16 @@ function (_, Interval) {
* @param {array} required_times An array of timestamps that must be in the resulting pairs * @param {array} required_times An array of timestamps that must be in the resulting pairs
* @return {array} * @return {array}
*/ */
ts.ZeroFilled.prototype.getFlotPairs = function (required_times) { ts.ZeroFilled.prototype.getFlotPairs = function (required_times, fillStyle) {
var times = this.getOrderedTimes(required_times), var times = this.getOrderedTimes(required_times),
strategy, strategy,
pairs; pairs;
if(this.opts.fill_style === 'all') { if(fillStyle === 'null as zero') {
strategy = this._getAllFlotPairs; strategy = this._getAllFlotPairs;
} else if(this.opts.fill_style === 'null') { } else if(fillStyle === 'null') {
strategy = this._getNullFlotPairs; strategy = this._getNullFlotPairs;
} else if(this.opts.fill_style === 'no') { } else if(fillStyle === 'connected') {
strategy = this._getNoZeroFlotPairs; strategy = this._getNoZeroFlotPairs;
} else { } else {
strategy = this._getMinFlotPairs; strategy = this._getMinFlotPairs;
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/vendor/bootstrap/less/grafana.less
...@@ -157,7 +157,6 @@ ...@@ -157,7 +157,6 @@
width: 200px; width: 200px;
label { label {
display: inline-block; display: inline-block;
width: 70px;
} }
.btn { .btn {
padding: 1px 3px; padding: 1px 3px;
...@@ -165,6 +164,7 @@ ...@@ -165,6 +164,7 @@
line-height: initial; line-height: initial;
} }
.close { .close {
margin-right: 5px;
color: white; color: white;
opacity: 0.7; opacity: 0.7;
text-shadow: none; text-shadow: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment