make it possible to draw the legend outside of the plot area

pdb-plotting/src/main/java/org/lucares/pdb/plot/api/PlotSettings.java

@@ -34,6 +34,8 @@ public class PlotSettings {
 
 	private AggreateInternal aggregate;
 
+	private boolean keyOutside;
+
 	public String getQuery() {
 		return query;
 	}
@@ -158,7 +160,7 @@ public class PlotSettings {
 	public String toString() {
 		return "PlotSettings [query=" + query + ", height=" + height + ", width=" + width + ", groupBy=" + groupBy
 				+ ", limitBy=" + limitBy + ", limit=" + limit + ", dateFrom=" + dateFrom + ", dateRange=" + dateRange
-				+ ", axisScale=" + yAxisScale + ", aggregate="+aggregate+"]";
+				+ ", axisScale=" + yAxisScale + ", aggregate="+aggregate+", keyOutside="+keyOutside+"]";
 	}
 
 	public void setAggregate(AggreateInternal aggregate) {
@@ -168,4 +170,12 @@ public class PlotSettings {
 	public AggreateInternal getAggregate() {
 		return aggregate;
 	}
+	
+	public void setKeyOutside(boolean keyOutside) {
+		this.keyOutside = keyOutside;
+	}
+
+	public boolean isKeyOutside() {
+		return keyOutside;
+	}
 }

pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotFileGenerator.java

@@ -60,6 +60,11 @@ public class GnuplotFileGenerator {
 		appendfln(result, "set arrow from "+(minDate + (maxDate-minDate)*0.25)+","+graphOffset+" rto graph 0,1 lt 3 lc rgb \"#EEEEEE\" nohead");
 		appendfln(result, "set arrow from "+(minDate + (maxDate-minDate)*0.75)+","+graphOffset+" rto graph 0,1 lc rgb \"#EEEEEE\" nohead");
 		
+		if (settings.isKeyOutside()){ 
+			appendfln(result, "set key outside");
+		}
+		appendfln(result, "set key font \",10\"");
+		
 		appendf(result, "plot ");
 		
 		count = 1;

pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotSettings.java

@@ -32,6 +32,7 @@ public class GnuplotSettings {
 	private String dateFrom;
 	private String dateTo;
 	private AggreateInternal aggregate;
+	private boolean keyOutside = false;
 
 	public GnuplotSettings(final Path output) {
 		this.output = output;
@@ -145,6 +146,14 @@ public class GnuplotSettings {
 		return aggregate;
 	}
 	
+	public void setKeyOutside(boolean keyOutside) {
+		this.keyOutside = keyOutside;
+	}
+
+	public boolean isKeyOutside() {
+		return keyOutside;
+	}
+
 	// plot 'sample.txt' using 1:2 title 'Bytes' with linespoints 2
 
 }

pdb-plotting/src/main/java/org/lucares/recommind/logs/Plotter.java

@@ -119,6 +119,7 @@ public class Plotter {
 
 			gnuplotSettings.setYAxisScale(plotSettings.getYAxisScale());
 			gnuplotSettings.setAggregate(plotSettings.getAggregate());
+			gnuplotSettings.setKeyOutside(plotSettings.isKeyOutside());
 			gnuplot.plot(gnuplotSettings, dataSeries);
 
 			return new PlotResult(outputFile.getFileName(), dataSeries);

pdb-ui/src/main/java/org/lucares/pdbui/PlotSettingsTransformer.java

@@ -24,6 +24,7 @@ class PlotSettingsTransformer {
 		result.setDateRange(request.getDateRange());
 		result.setYAxisScale(toAxisScale(request.getAxisScale()));
 		result.setAggregate(toAggregateInternal(request.getAggregate()));
+		result.setKeyOutside(request.isKeyOutside()); 
 
 		return result;
 	}

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

@@ -23,6 +23,8 @@ public class PlotRequest {
 	
 	private Aggregate aggregate = Aggregate.NONE;
 
+	private boolean keyOutside;
+
 	public String getQuery() {
 		return query;
 	}
@@ -110,4 +112,12 @@ public class PlotRequest {
 	public Aggregate getAggregate() {
 		return aggregate;
 	}
+
+	public void setKeyOutside(boolean keyOutside) {
+		this.keyOutside = keyOutside;
+	}
+	
+	public boolean isKeyOutside() {
+		return keyOutside;
+	}
 }

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

@@ -25,6 +25,10 @@ body{
   font-style: normal;
 }
 
+.group {
+	display: inline-block;
+}
+
 #logo {
 	grid-area: logo;
 	font-size: 1.2em;
@@ -55,9 +59,12 @@ body{
 	background-color: #AAA;
 }
 
+/* scrollbars are nice, but with them an empty autocomplete box is shown
+ 
 .autocomplete, #search-input-wrapper .autocomplete.open {
 	overflow-y: scroll;
 }
+*/
 
 #search-input {
 	box-sizing: border-box;
@@ -82,6 +89,7 @@ body{
 }
 
 #search-submit {
+	margin-left:3px;
 	margin-right:3px;
 }
 

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

@@ -269,6 +269,7 @@ function plot(event){
 	request['dateRange'] = $('#search-date-range').val();
 	request['axisScale'] = $('#search-y-axis-scale').val();
 	request['aggregate'] = $('#show-aggregate').val();
+	request['keyOutside'] = $('#key-outside').is(":checked");
 	
 	
 	var success = function(response){

pdb-ui/src/main/resources/templates/main.html

@@ -21,49 +21,62 @@
 	</div>
 	<div id="search-bar">
 		<form>
-			<label for="search-group-by-1">Group By:</label> 
+			<div id="search-settings-bar">
-			<select id="search-group-by-1"></select>
+				<div class="group">
-			<select id="search-group-by-2"></select>
+					<label for="search-group-by-1">Group By:</label> 
-			<select id="search-group-by-3"></select>
+					<select id="search-group-by-1"></select>
+					<select id="search-group-by-2"></select>
+					<select id="search-group-by-3"></select>
+				</div>
+				<div class="group">
+					<label for="search-limit-by">Limit By:</label>
+					<select id="search-limit-by">
+						<option value="NO_LIMIT" selected="selected">no limit</option>
+						<option value="MOST_VALUES">most values</option>
+						<option value="FEWEST_VALUES">fewest values</option>
+						<option value="MAX_VALUE">max value</option>
+						<option value="MIN_VALUE">min value</option>
+					</select>
+					<input type="number" id="search-limit-value" name="search-limit-value" min="1" max="1000" value="10"/>
+				</div>
+				<div class="group">
+					<label for="search-date-from">From Date:</label>
+					<input id="search-date-from" class="input_date" type="text" value="{{oldestValue}}" required="required" pattern="\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\d|3[0-1]) [0-2]\d:[0-5]\d:[0-5]\d">
+				</div>
+				<div class="group">
+					<label for="search-date-range">Interval:</label>
+					<input id="search-date-range" type="text" list="ranges" required="required" value="1 week" pattern="\d+ (second|minute|hour|day|week|month)s?">
+					<datalist id="ranges">
+						<option value="60 seconds">
+						<option value="5 minutes">
+						<option value="1 hour">
+						<option value="1 day">
+						<option value="1 week">
+						<option value="1 month">
+					</datalist>
+				</div>
+				<div class="group">
+					<label for="search-y-axis-scale">Y-Axis:</label>
+					<select id="search-y-axis-scale">
+						<option value="LINEAR" selected="selected">linear</option>
+						<option value="LOG10">log 10</option>
+						<option value="LOG2">log 2</option>
+					</select>
+				</div>
+				<div class="group">
+					<label for="show-aggregate">Aggregate:</label>
+					<select id="show-aggregate">
+						<option value="NONE" selected="selected">-</option>
+						<option value="MEAN">Mean</option>
+					</select>
+				</div>
+				<div class="group">
+					<input type="checkbox" id="key-outside" />
+					<label for="key-outside">Legend outside</label>
+				</div>
+				<button id="search-submit"><i class="fa fa-area-chart" aria-hidden="true"></i> Plot</button>
+			</div>
 			
-			<label for="search-limit-by">Limit By:</label>
-			<select id="search-limit-by">
-				<option value="NO_LIMIT" selected="selected">no limit</option>
-				<option value="MOST_VALUES">most values</option>
-				<option value="FEWEST_VALUES">fewest values</option>
-				<option value="MAX_VALUE">max value</option>
-				<option value="MIN_VALUE">min value</option>
-			</select>
-			<input type="number" id="search-limit-value" name="search-limit-value" min="1" max="1000" value="10"/>
-			
-			<label for="search-date-from">From Date:</label>
-			<input id="search-date-from" class="input_date" type="text" value="{{oldestValue}}" required="required" pattern="\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\d|3[0-1]) [0-2]\d:[0-5]\d:[0-5]\d">
-			
-			<label for="search-date-range">Interval:</label>
-			<input id="search-date-range" type="text" list="ranges" required="required" value="1 week" pattern="\d+ (second|minute|hour|day|week|month)s?">
-			<datalist id="ranges">
-				<option value="60 seconds">
-				<option value="5 minutes">
-				<option value="1 hour">
-				<option value="1 day">
-				<option value="1 week">
-				<option value="1 month">
-			</datalist>
-			
-			<label for="search-y-axis-scale">Y-Axis:</label>
-			<select id="search-y-axis-scale">
-				<option value="LINEAR" selected="selected">linear</option>
-				<option value="LOG10">log 10</option>
-				<option value="LOG2">log 2</option>
-			</select>
-			
-			<label for="show-aggregate">Aggregate:</label>
-			<select id="show-aggregate">
-				<option value="NONE" selected="selected">-</option>
-				<option value="MEAN">Mean</option>
-			</select>
-			
-			<button id="search-submit"><i class="fa fa-area-chart" aria-hidden="true"></i> Plot</button>
 		</form>
 	</div>