Merge pull request #2345 from tylerpuleo/tp1849

scatter axis bounds

Gemfile.lock

@@ -307,6 +307,3 @@ DEPENDENCIES
   will_paginate
   will_paginate-bootstrap
   yaml_db!
-
-BUNDLED WITH
-   1.10.6

app/assets/javascripts/templates/visualizations/controls/scatter-tools.hbs

@@ -39,16 +39,36 @@
     {{/each}}
   </div>
 </div>
+{{#if vis}}
+  <div class="vis-ctrl-subblock">
+    <h4 class="vis-ctrl-subtitle">Axis Bounds</h4>
+    <div>
+        <label>X Axis Range:</label>
+        <div  class="inline-block">
+          <input id="x-axis-min" class="form-control axis" value="{{xAxisMin}}" placeholder="eg: 5,10">
+          <span>to</span>
+          <input id="x-axis-max" class="form-control axis" value="{{xAxisMax}}" placeholder="eg: 5,10">
+        </div>
+        <label>Y Axis Range:</label>
+        <div  class="inline-block">
+          <input id="y-axis-min" class="form-control axis" value="{{yAxisMin}}" placeholder="eg: 5,10">
+          <span>to</span>
+          <input id="y-axis-max" class="form-control axis" value="{{yAxisMax}}" placeholder="eg: 5,10">
+        </div>
+    </div>
+      <button id="set-axis-button" data-log-id="set-axis-size" class="btn btn-default">Set Axis Size</button>
+  </div>
+{{/if}}
 <div class="vis-ctrl-subblock">
   <h4 class="vis-ctrl-subtitle">Other</h4>
-  <div> 
+  <div>
     <div class="checkbox">
       <label id="ckbx-lbl-tooltips" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="ckbx-tooltips">Detailed Tooltips
         <input id="ckbx-tooltips" data-log-id="detailed-tooltips" type="checkbox" class="mdl-checkbox__input"/>
         <span class="mdl-checkbox__label">{{label}}</span>
-      </label> 
+      </label>
     </div>
-    <div class="checkbox">     
+    <div class="checkbox">
       <label id="ckbx-lbl-fulldetail" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="ckbx-fulldetail">Show All Data
         <input id="ckbx-fulldetail" data-log-id="show-all-data" type="checkbox" class="mdl-checkbox__input"/>
         <span class="mdl-checkbox__label">{{label}}</span>

app/assets/javascripts/visualizations/highvis/scatter.coffee

@@ -46,6 +46,7 @@ $ ->
 
         @xGridSize = @yGridSize = @INITIAL_GRID_SIZE
 
+        @isScatter = true # To do add axis bounds feature that does time
         # Used for data reduction triggering
         @updateOnZoom = true
 
@@ -162,6 +163,8 @@ $ ->
             minorTickInterval: 'auto'
             }]
           yAxis:
+            startOnTick: false
+            endOnTick: false
             type: if globals.configs.logY then 'logarithmic' else 'linear'
             events:
               afterSetExtremes: (e) =>
@@ -364,6 +367,12 @@ $ ->
 
         @updateRegrTools()
 
+        # Set Axis range to initial zoom
+        $('#x-axis-min').val(@configs.xBounds.min)
+        $('#x-axis-max').val(@configs.xBounds.max)
+        $('#y-axis-min').val(@configs.yBounds.min)
+        $('#y-axis-max').val(@configs.yBounds.max)
+
       ###
       Draws radio buttons for changing symbol/line mode.
       ###
@@ -372,6 +381,7 @@ $ ->
         inctx = {}
         inctx.axes = ["Both", "X", "Y"]
         inctx.logSafe = data.logSafe
+        inctx.vis = @isScatter # To do add axis bounds feature that does time
         inctx.elapsedTime = elapsedTime and data.timeFields.length is 1
         inctx.modes = [
           { mode: @SYMBOLS_LINES_MODE, text: "Symbols and Lines" }
@@ -385,6 +395,7 @@ $ ->
         outctx.title = 'Tools'
         outctx.body = HandlebarsTemplates[hbCtrl('scatter-tools')](inctx)
         tools = HandlebarsTemplates[hbCtrl('body')](outctx)
+
         $('#vis-ctrls').append tools
 
         # Add material design
@@ -404,6 +415,118 @@ $ ->
         if not @isZoomLocked() then $('#zoom-reset-btn').addClass("disabled")
         else $('#zoom-reset-btn').addClass("enabled")
 
+        badNumberPopoverTimerXMin = null
+        badNumberPopoverTimerXMax = null
+        badNumberPopoverTimerYMin = null
+        badNumberPopoverTimerYMax = null
+        badNumberPopoverTimerY = null
+        badNumberPopoverTimerX = null
+
+        # Axis Manual entry
+        $('#set-axis-button').click =>
+          $('#x-axis-min').popover('destroy')
+          $('#x-axis-max').popover('destroy')
+          $('#y-axis-min').popover('destroy')
+          $('#y-axis-max').popover('destroy')
+
+          thereIsAFailure = false
+
+          xAxisMin = $('#x-axis-min').val()
+          xAxisMax = $('#x-axis-max').val()
+
+          yAxisMin = $('#y-axis-min').val()
+          yAxisMax = $('#y-axis-max').val()
+
+          if isNaN(xAxisMin) or xAxisMin == ""
+            thereIsAFailure = true
+            $('#x-axis-min').popover
+              content: 'Please enter a valid number'
+              placement: 'bottom'
+              trigger: 'manual'
+            $('#x-axis-min').popover('show')
+            if badNumberPopoverTimerXMin? then clearTimeout(badNumberPopoverTimerXMin)
+            badNumberPopoverTimerXMin = setTimeout ->
+              $('#x-axis-min').popover('destroy')
+            , 3000
+
+          if isNaN(xAxisMax) or xAxisMax == ""
+            thereIsAFailure = true
+            $('#x-axis-max').popover
+              content: 'Please enter a valid number'
+              placement: 'bottom'
+              trigger: 'manual'
+            $('#x-axis-max').popover('show')
+            if badNumberPopoverTimerXMax? then clearTimeout(badNumberPopoverTimerXMax)
+            badNumberPopoverTimerXMax = setTimeout ->
+              $('#x-axis-max').popover('destroy')
+            , 3000
+
+          if isNaN(yAxisMin) or yAxisMin == ""
+            thereIsAFailure = true
+            $('#y-axis-min').popover
+              content: 'Please enter a valid number'
+              placement: 'bottom'
+              trigger: 'manual'
+            $('#y-axis-min').popover('show')
+            if badNumberPopoverTimerYMin? then clearTimeout(badNumberPopoverTimerYMin)
+            badNumberPopoverTimerYMin = setTimeout ->
+              $('#y-axis-min').popover('destroy')
+            , 3000
+
+          if isNaN(yAxisMax) or yAxisMax == ""
+            thereIsAFailure = true
+            $('#y-axis-max').popover
+              content: 'Please enter a valid number'
+              placement: 'bottom'
+              trigger: 'manual'
+            $('#y-axis-max').popover('show')
+            if badNumberPopoverTimerYMax? then clearTimeout(badNumberPopoverTimerYMax)
+            badNumberPopoverTimerYMax = setTimeout ->
+              $('#y-axis-max').popover('destroy')
+            , 3000
+
+          if thereIsAFailure then return
+
+          xAxisMin = Number(xAxisMin)
+          xAxisMax = Number(xAxisMax)
+          yAxisMin = Number(yAxisMin)
+          yAxisMax = Number(yAxisMax)
+
+          if xAxisMin >= xAxisMax
+            thereIsAFailure = true
+            $('#x-axis-min').popover
+              content: 'Left must be less than right'
+              placement: 'bottom'
+              trigger: 'manual'
+            $('#x-axis-min').popover('show')
+            if badNumberPopoverTimerX? then clearTimeout(badNumberPopoverTimerX)
+            badNumberPopoverTimerX = setTimeout ->
+              $('#x-axis-min').popover('destroy')
+            , 3000
+
+          if yAxisMin >= yAxisMax
+            thereIsAFailure = true
+            $('#y-axis-min').popover
+              content: 'Left must be less than right'
+              placement: 'bottom'
+              trigger: 'manual'
+            $('#y-axis-min').popover('show')
+            if badNumberPopoverTimerY? then clearTimeout(badNumberPopoverTimerY)
+            badNumberPopoverTimerY = setTimeout ->
+              $('#y-axis-min').popover('destroy')
+            , 3000
+
+          if thereIsAFailure then return
+
+          @configs.xBounds.min = xAxisMin
+          @configs.xBounds.max = xAxisMax
+
+          @configs.yBounds.min = yAxisMin
+          @configs.yBounds.max = yAxisMax
+
+          @setExtremes()
+
+
         $('#zoom-reset-btn').click (e) =>
           @resetExtremes($('#zoom-axis-list').val())
 
@@ -483,7 +606,8 @@ $ ->
               @configs.xBounds.max, true)
             @chart.yAxis[0].setExtremes(@configs.yBounds.min,
               @configs.yBounds.max, true)
-          else @resetExtremes()
+          else
+            @resetExtremes()
 
       zoomOutExtremes: (whichAxis) ->
         xRange = @configs.xBounds.max - @configs.xBounds.min

app/assets/javascripts/visualizations/highvis/timeline.coffee

@@ -38,6 +38,8 @@ $ ->
       constructor: (@canvas) ->
         super @canvas
 
+        @isScatter = null # To do add axis bounds feature that does time
+
         @configs.mode = @LINES_MODE
         @configs.xAxis = data.timeFields[0]
 

app/assets/stylesheets/visualizations.css.scss

@@ -35,7 +35,13 @@ body[data-page-name='visualizations/show'] .visualizations-controller,
     -ms-user-select: none;
     user-select: none;
   }
-
+  .axis {
+    display:inherit;
+    width: 45%;
+  }
+  .axis-container {
+    display: inline-block;
+  }
   .bold {
     font-weight: bold;
   }