range definitions for the y-axis

Sometimes it is useful to specify the certain y-axis range. For example
when you are only interested in the values that take longer than a
threshold. Or when you want to exclude some outliers. When you want to
compare plots in a gallery, it is very handy when all plots have the
same data-area.

pdb-ui/src/main/java/org/lucares/pdbui/domain/PlotRequest.java

@@ -30,6 +30,10 @@ public class PlotRequest {
 
 	private Aggregate aggregate = Aggregate.NONE;
 
+	private int yRangeMin;
+	private int yRangeMax;
+	private TimeRangeUnit yRangeUnit = TimeRangeUnit.AUTOMATIC;
+
 	private boolean keyOutside;
 
 	private boolean generateThumbnail;
@@ -154,4 +158,27 @@ public class PlotRequest {
 		this.generateThumbnail = generateThumbnail;
 	}
 
+	public int getyRangeMin() {
+		return yRangeMin;
+	}
+
+	public void setyRangeMin(final int yRangeMin) {
+		this.yRangeMin = yRangeMin;
+	}
+
+	public int getyRangeMax() {
+		return yRangeMax;
+	}
+
+	public void setyRangeMax(final int yRangeMax) {
+		this.yRangeMax = yRangeMax;
+	}
+
+	public TimeRangeUnit getyRangeUnit() {
+		return yRangeUnit;
+	}
+
+	public void setyRangeUnit(final TimeRangeUnit yRangeUnit) {
+		this.yRangeUnit = yRangeUnit;
+	}
 }

pdb-ui/src/main/java/org/lucares/pdbui/domain/TimeRangeUnit.java

@@ -0,0 +1,5 @@
+package org.lucares.pdbui.domain;
+
+public enum TimeRangeUnit {
+	AUTOMATIC, MILLISECONDS, SECONDS, MINUTES, HOURS, DAYS
+}

pdb-ui/src/main/resources/resources/css/design.css

@@ -124,8 +124,8 @@ textarea {
 	background: lightgrey;
 }
 
-#search-limit-value {
-	width: 4em;
+.number-input-1k {
+	width: 3em;
 }
 
 .input_date {

pdb-ui/src/main/resources/resources/js/ui.js

@@ -599,6 +599,9 @@ Vue.component('search-bar', {
 	    	'dateRange': data.searchBar.dateRange,
 	    	'axisScale': data.searchBar.axisScale,
 	    	'aggregate': data.searchBar.aggregate,
+	    	'yRangeMin': data.searchBar.yRange.min,
+	    	'yRangeMax': data.searchBar.yRange.max,
+	    	'yRangeUnit': data.searchBar.yRange.unit,
 	    	'keyOutside': data.searchBar.keyOutside,
 		};
 	
@@ -640,9 +643,10 @@ Vue.component('search-bar', {
 				<input 
 					type="number" 
 					id="search-limit-value" 
-					name="search-limit-value" 
+					name="search-limit-value"
+					class="number-input-1k"
 					min="1" 
-					max="1000"
+					max="999"
 					v-show="searchBar.limitBy.selected != 'NO_LIMIT'"
 					v-model="searchBar.limitBy.number"/>
 			</div>
@@ -695,6 +699,34 @@ Vue.component('search-bar', {
 				</select>
 			</div>
 			
+			<div class="group">
+				<label for="y-max-value">Y-Range</label>
+				<input 
+					v-show="searchBar.yRange.unit != 'AUTOMATIC'"
+					type="number" 
+					id="y-range-min"
+					class="number-input-1k" 
+					min="0" 
+					max="999"
+					v-model="searchBar.yRange.min"/>
+				<input 
+					v-show="searchBar.yRange.unit != 'AUTOMATIC'"
+					type="number" 
+					id="y-range-max"
+					class="number-input-1k" 
+					min="0" 
+					max="999"
+					v-model="searchBar.yRange.max"/>
+				<select id="y-max-unit" v-model="searchBar.yRange.unit">
+					<option value="AUTOMATIC" title="adjust automatically">automatic</option>
+					<option value="MILLISECONDS" title="milli seconds">milli seconds</option>
+					<option value="SECONDS" title="seconds">seconds</option>
+					<option value="MINUTES" title="minutes">minutes</option>
+					<option value="HOURS" title="hours">hours</option>
+					<option value="DAYS" title="days">hours</option>
+				</select>
+			</div>
+			
 			<div class="group">
 				<input type="checkbox" id="key-outside" v-model="searchBar.keyOutside"/>
 				<label for="key-outside">Legend outside</label>
@@ -775,6 +807,11 @@ var data = {
 	    dateRange: GetURLParameter('dateRange','1 week'),
 	    axisScale: GetURLParameter('axisScale','LOG10'),
 	    aggregate: GetURLParameter('aggregate','NONE'),
+	    yRange: {
+	    	min: GetURLParameter('yRangeMin','0'),
+	    	max: GetURLParameter('yRangeMax','999'),
+	    	unit: GetURLParameter('yRangeUnit','AUTOMATIC')
+	    },
 	    keyOutside: GetURLParameterBoolean('keyOutside', 'false'),
 	    
 	    splitBy: {
@@ -879,6 +916,9 @@ function createRequest(query, generateThumbnail){
 	request['aggregate'] = data.searchBar.aggregate;
 	request['keyOutside'] = data.searchBar.keyOutside;
 	request['generateThumbnail'] = generateThumbnail;
+	request['yRangeMin'] = data.searchBar.yRange.min;
+	request['yRangeMax'] = data.searchBar.yRange.max;
+	request['yRangeUnit'] = data.searchBar.yRange.unit;
 	
 	return request;
 }
@@ -928,6 +968,9 @@ function updateImageLink(query) {
     	'dateRange': data.searchBar.dateRange,
     	'axisScale': data.searchBar.axisScale,
     	'aggregate': data.searchBar.aggregate,
+    	'yRangeMin': data.searchBar.yRange.min,
+    	'yRangeMax': data.searchBar.yRange.max,
+    	'yRangeUnit': data.searchBar.yRange.unit,
     	'keyOutside': data.searchBar.keyOutside,
     	'width': Math.floor($('#result').width()),
     	'height': Math.floor($('#result').height())