restructured style settings between axes & grid, and Display Styles

src/app/panels/graphite/axisEditor.html

@@ -1,13 +1,58 @@
 <div class="editor-row">
 
-  <div class="editor-row">
+  <div class="section">
+    <h5>Axis</h5>
     <div class="editor-option">
-      <label class="small">Left y-axis label</label>
-      <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-large" ng-model="panel.leftYAxisLabel">
+      <label class="small">X-Axis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
     </div>
     <div class="editor-option">
-      <label class="small">Right y-axis label</label>
-      <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-large" ng-model="panel.rightYAxisLabel">
+      <label class="small">Y-Axis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
+    </div>
+    <div class="editor-option" ng-show="panel.points">
+      <label class="small">Point Radius</label>
+      <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 class="editor-option">
+      <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', 'ms']" ng-change="render()"></select>
+    </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', 'ms']" ng-change="render()"></select>
+    </div>
+
+    <div class="editor-option">
+      <label class="small">Left Y-axis label</label>
+      <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
+    </div>
+    <div class="editor-option">
+      <label class="small">Right Y-axis label</label>
+      <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.rightYAxisLabel">
+    </div>
+
+  </div>
+
+
+</div>
+
+<div class="editor-row">
+
+  <div class="section">
+    <h5>Grid</h5>
+    <div class="editor-option">
+      <label class="small">Min / <a href='' ng-click="panel.grid.min = _.toggle(panel.grid.min,null,0)">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.min)"></i></a></label>
+      <input type="number" class="input-small" ng-model="panel.grid.min"/>
+    </div>
+    <div class="editor-option">
+      <label class="small">Max / <a ref='' ng-click="panel.grid.max = _.toggle(panel.grid.max,null,0)">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.max)"></i></a></label>
+      <input type="number" class="input-small" ng-model="panel.grid.max"/>
+    </div>
+  </div>
+
+  <div class="section">
+    <h5>Legend</h5>
+    <div class="editor-option">
+      <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend">
     </div>
   </div>
 

src/app/panels/graphite/module.html

@@ -24,9 +24,11 @@
         <div ng-repeat="tab in editorTabs" data-title="{{tab}}">
         </div>
       </div>
+
       <div class="tab-content" ng-show="editorTabs[editor.index] == 'General'">
         <div ng-include src="'app/partials/panelgeneral.html'"></div>
       </div>
+
       <div class="tab-content" ng-repeat="tab in panelMeta.fullEditorTabs" ng-show="editorTabs[editor.index] == tab.title">
         <div ng-include src="tab.src"></div>
       </div>

src/app/panels/graphite/module.js

@@ -46,7 +46,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           src:'app/panels/graphite/editor.html'
         },
         {
-          title:'Axis labels',
+          title:'Axis & Legends',
           src:'app/panels/graphite/axisEditor.html'
         },
         {

src/app/panels/graphite/styleEditor.html

@@ -3,9 +3,6 @@
 <div class="editor-row">
   <div class="section">
     <h5>Chart Options</h5>
-    <div class="editor-option">
-      <label class="small">Renderer</label><select class="input-mini" ng-model="panel.renderer" ng-options="f for f in ['flot', 'png']" ng-change="get_data()"></select>
-    </div>
     <div class="editor-option">
       <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars" ng-change="render()">
     </div>
@@ -16,27 +13,7 @@
       <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points" ng-change="render()">
     </div>
   </div>
-  <div class="section">
-    <h5>Axis</h5>
-    <div class="editor-option">
-      <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
-    </div>
-    <div class="editor-option">
-      <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
-    </div>
-    <div class="editor-option" ng-show="panel.points">
-      <label class="small">Point Radius</label>
-      <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 class="editor-option">
-      <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', 'ms']" ng-change="render()"></select>
-    </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', 'ms']" ng-change="render()"></select>
-    </div>
-  </div>
+
   <div class="section">
     <h5>Line options</h5>
     <div class="editor-option" ng-show="panel.lines">
@@ -70,23 +47,16 @@
     </div>
   </div>
 
-  <div class="section">
-    <h5>Legend<h5>
-    <div class="editor-option">
-      <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend">
-    </div>
-  </div>
 
   <div class="section">
-    <h5>Grid<h5>
+    <h5>Rendering</h5>
     <div class="editor-option">
-      <label class="small">Min / <a href='' ng-click="panel.grid.min = _.toggle(panel.grid.min,null,0)">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.min)"></i></a></label>
-      <input type="number" class="input-small" ng-model="panel.grid.min"/>
+      <label class="small">Flot <tip>client side</tip></label>
+      <input type="radio" class="input-small" ng-model="panel.renderer" value="flot" ng-change="get_data()" />
     </div>
     <div class="editor-option">
-      <label class="small">Max / <a ref='' ng-click="panel.grid.max = _.toggle(panel.grid.max,null,0)">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.max)"></i></a></label>
-      <input type="number" class="input-small" ng-model="panel.grid.max"/>
+      <label class="small">Graphite PNG <tip>server side</tip></label>
+      <input type="radio" class="input-small" ng-model="panel.renderer" value="png" ng-change="get_data()" />
     </div>
   </div>
-
 </div>

src/app/services/graphite/graphiteSrv.js

@@ -132,7 +132,7 @@ function (angular, _, $, config, kbn, moment) {
       var clean_options = [];
       var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints'];
 
-      if (options.renderer === 'flot') {
+      if (options.renderer !== 'png') {
         options['format'] = 'json';
       }