andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

add different plot types

Browse Source 
Step 1: 
Added PlotType enum and a drop down to the UI.
Extracted the code for scatter plots.
This commit is contained in:
ahr
2017-12-29 08:57:34 +01:00
parent 2df66c7b2f
commit cc70f45c12
13 changed files with 465 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,7 @@ class PlotSettingsTransformer {
result.setDateFrom(request.getDateFrom());
result.setDateRange(request.getDateRange());
result.setYAxisScale(request.getAxisScale());
result.setPlotType(request.getPlotType());
result.setAggregate(toAggregateInternal(request.getAggregate()));
result.setKeyOutside(request.isKeyOutside());

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

@@ -4,6 +4,7 @@ import java.util.List;
import org.lucares.pdb.plot.api.AxisScale;
import org.lucares.pdb.plot.api.Limit;
import org.lucares.pdb.plot.api.PlotType;
public class PlotRequest {
private String query;
@@ -24,6 +25,8 @@ public class PlotRequest {
private String dateRange;
private PlotType plotType = PlotType.SCATTER;
private Aggregate aggregate = Aggregate.NONE;
private boolean keyOutside;
@@ -108,6 +111,14 @@ public class PlotRequest {
this.yAxis = yAxis;
}
public PlotType getPlotType() {
return plotType;
}
public void setPlotType(PlotType plotType) {
this.plotType = plotType;
}
public void setAggregate(Aggregate aggregate) {
this.aggregate = aggregate;
}

14
pdb-ui/src/main/resources/resources/js/search.js
View File

@@ -16,6 +16,9 @@ $(document).ready(function(){
$('#search-limit-by').change(updateSearchLimitValue);
disableSplitBy();
$('#plot-type').change(updatePlotType);
updatePlotType();
$('#nav_left').click(dateLeftShift);
$('#nav_left_half').click(dateHalfLeftShift);
$('#nav_right_half').click(dateHalfRightShift);
@@ -252,6 +255,16 @@ function updateSearchLimitValue () {
}
}
function updatePlotType(){
var optionSelected = $('#plot-type').find("option:selected");
var valueSelected = optionSelected.val();
if (valueSelected == "PERCENTILES"){
$('#group-show-aggregate').hide();
}else{
$('#group-show-aggregate').show();
}
}
function enableSplitBy(fieldValues) {
splitBy['field'] = $('#split-by').val();
splitBy['values'] = fieldValues;
@@ -399,6 +412,7 @@ function sendPlotRequest(query){
request['dateFrom'] = $('#search-date-from').val();
request['dateRange'] = $('#search-date-range').val();
request['axisScale'] = $('#search-y-axis-scale').val();
request['plotType'] = $('#plot-type').val();
request['aggregate'] = $('#show-aggregate').val();
request['keyOutside'] = $('#key-outside').is(":checked");

9
pdb-ui/src/main/resources/templates/main.html
View File

@@ -15,8 +15,6 @@
</head>
<body>
<div id="search-input-wrapper">
<input id="search-input" placeholder="field=value and anotherField=anotherValue" data-autocomplete="autocomplete"
data-autocomplete-empty-message="nothing found" />
@@ -70,6 +68,13 @@
</select>
</div>
<div class="group">
<label for="plot-type">Type:</label>
<select id="plot-type">
<option value="SCATTER" selected="selected">Scatter</option>
<option value="PERCENTILES">Percentiles</option>
</select>
</div>
<div class="group" id="group-show-aggregate">
<label for="show-aggregate">Aggregate:</label>
<select id="show-aggregate">
<option value="NONE" selected="selected">-</option>