Fixed show/hide axis toggles, #1331

grafana · Jan 12, 2015 · a1e39ce · a1e39ce
1 parent c39f9ed
commit a1e39ce
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 73 deletions.
diff --git a/src/app/directives/arrayJoin.js b/src/app/directives/arrayJoin.js
@@ -31,4 +31,5 @@ function (angular, app, _) {
         }
       };
     });
+
 });
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
@@ -5,7 +5,7 @@
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
 					<li class="grafana-target-segment" style="width: 90px">
-						<strong>Left Y Axis</strong>
+						<strong>Left Y</strong>
 					</li>
 					<li class="grafana-target-segment">
 						Unit
@@ -38,16 +38,13 @@
 						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
 					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
-					<li class="grafana-target-segment">
-						Show
-					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
 					<li class="grafana-target-segment" style="width: 90px">
-						<strong>Right Y Axis</strong>
+						<strong>Right Y</strong>
 					</li>
 					<li class="grafana-target-segment">
 						Unit
@@ -80,91 +77,110 @@
 						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
 					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 90px">
+						<strong>Show Axis</strong>
+					</li>
+					<li class="grafana-target-segment">
+						X-Axis&nbsp;
+						<input class="cr1" id="hideXAxis" type="checkbox"
+								ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
+						<label for="hideXAxis" class="cr1"></label>
+					</li>
 					<li class="grafana-target-segment">
-						Show
+						Y-Axis&nbsp;
+						<input class="cr1" id="hideYAxis" type="checkbox"
+						    ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
+						<label for="hideYAxis" class="cr1"></label>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
+
 		</div>
 	</div>
 </div>
 
 <div class="editor-row" style="margin-top: 20px">
 	<div class="section">
-	<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment" style="width: 90px">
-					<strong>Thresholds</strong>
-				</li>
-				<li class="grafana-target-segment">
-					Level 1
-				</li>
-				<li>
-					<input type="text" class="input-small grafana-target-segment-input">
-				</li>
-				<li class="grafana-target-segment">
-					<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
-				</li>
-				<li class="grafana-target-segment">
-					Level 2
-				</li>
-				<li>
-					<input type="text" class="input-small grafana-target-segment-input">
-				</li>
-				<li class="grafana-target-segment">
-					<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
-				</li>
-				<li class="grafana-target-segment">
-					Line mode
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 90px">
+						<strong>Thresholds</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Level 1
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input">
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
+					</li>
+					<li class="grafana-target-segment">
+						Level 2
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input">
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
+					</li>
+					<li class="grafana-target-segment">
+						Line mode
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+
 		</div>
 	</div>
-	</div>
 </div>
 
 <div class="editor-row" style="margin-top: 20px">
 	<div class="section">
-	<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment" style="width: 90px">
-					<strong>Legend</strong>
-				</li>
-				<li class="grafana-target-segment">
-					Show: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Table: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Right side: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Hide empty: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Min: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Max: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Avg: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Total: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Current: <input type="checkbox">
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 90px">
+						<strong>Legend</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Show: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Table: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Right side: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Hide empty: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Min: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Max: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Avg: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Total: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Current: <input type="checkbox">
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 		</div>
 	</div>
-	</div>
 </div>
 
diff --git a/src/css/less/forms.less b/src/css/less/forms.less
@@ -15,7 +15,7 @@ input[type="checkbox"]+.cr1 {
   height: 19px;
   clear: none;
   text-indent: 2px;
-  margin-top: 4px;
+  margin: 0;
   padding: 0 0 0 20px;
   vertical-align:middle;
   background: url(@checkboxImageUrl) left top no-repeat;