Graph: added percent y-axis format, Closes #818

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Fixes**
 **Fixes**
 - [Issue #802](https://github.com/grafana/grafana/issues/802). Annotations: Fix when using InfluxDB datasource
 - [Issue #802](https://github.com/grafana/grafana/issues/802). Annotations: Fix when using InfluxDB datasource
 - [Issue #795](https://github.com/grafana/grafana/issues/795). Chrome: Fix for display issue in chrome beta & chrome canary when entering edit mode
 - [Issue #795](https://github.com/grafana/grafana/issues/795). Chrome: Fix for display issue in chrome beta & chrome canary when entering edit mode
+- [Issue #818](https://github.com/grafana/grafana/issues/818). Graph: Added percent y-axis format
 
 
 # 1.8.0-RC1 (2014-09-12)
 # 1.8.0-RC1 (2014-09-12)
 
 

src/app/components/kbn.js

@@ -531,6 +531,10 @@ function($, _, moment) {
       return function(val) {
       return function(val) {
         return kbn.nanosFormat(val, decimals);
         return kbn.nanosFormat(val, decimals);
       };
       };
+    case 'percent':
+      return function(val, axis) {
+        return kbn.noneFormat(val, axis ? axis.tickDecimals : null) + ' %';
+      };
     default:
     default:
       return function(val, axis) {
       return function(val, axis) {
         return kbn.noneFormat(val, axis ? axis.tickDecimals : null);
         return kbn.noneFormat(val, axis ? axis.tickDecimals : null);

src/app/panels/graph/axisEditor.html

@@ -4,7 +4,7 @@
     <h5>Left Y Axis</h5>
     <h5>Left Y Axis</h5>
        <div class="editor-option">
        <div class="editor-option">
         <label class="small">Format <tip>Y-axis formatting</tip></label>
         <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns']" ng-change="render()"></select>
+        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
       </div>
       </div>
       <div class="editor-option">
       <div class="editor-option">
         <label class="small">Min / <a ng-click="toggleGridMinMax('leftMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.leftMin)"></i></a></label>
         <label class="small">Min / <a ng-click="toggleGridMinMax('leftMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.leftMin)"></i></a></label>
@@ -23,7 +23,7 @@
     <h5>Right Y Axis</h5>
     <h5>Right Y Axis</h5>
        <div class="editor-option">
        <div class="editor-option">
         <label class="small">Format <tip>Y-axis formatting</tip></label>
         <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns']" ng-change="render()"></select>
+        <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
       </div>
       </div>
       <div class="editor-option">
       <div class="editor-option">
         <label class="small">Min / <a ng-click="toggleGridMinMax('rightMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.rightMin)"></i></a></label>
         <label class="small">Min / <a ng-click="toggleGridMinMax('rightMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.rightMin)"></i></a></label>