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

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>