Merge pull request #115 from diydrones/better_plotting_lib

highcharts plotting

Author: mrpollo

Gruntfile.coffee

@@ -334,6 +334,7 @@ module.exports = (grunt) ->
             'angularFileUpload': 'libs/angular-file-upload.min.js'
             'infinite-scroll': 'libs/ng-infinite-scroll.js'
             'ngLaddaBootstrap': 'libs/ng-ladda-bootstrap.js'
+            'highcharts-ng': 'libs/highcharts-ng.js'
         ]
         require: 'NGBOOTSTRAP'
       prod:
@@ -373,6 +374,7 @@ module.exports = (grunt) ->
             'angularFileUpload': 'libs/angular-file-upload.min.js'
             'infinite-scroll': 'libs/ng-infinite-scroll.js'
             'ngLaddaBootstrap': 'libs/ng-ladda-bootstrap.js'
+            'highcharts-ng': 'libs/highcharts-ng.js'
         ]
         require: '<%= shimmer.dev.require %>'
 

bower.json

@@ -19,7 +19,8 @@
     "ngInfiniteScroll": "~1.1.2",
     "ngprogress-lite": "~1.0.6",
     "ng-ladda-bootstrap": "*",
-    "spin.js": "~1.3.2"
+    "spin.js": "~1.3.2",
+    "highcharts-ng": "~0.0.7"
   },
   "exportsOverride": {
     "angular": {
@@ -87,6 +88,12 @@
     },
     "ng-ladda-bootstrap": {
       "scripts/libs": "dist/ng-ladda-bootstrap.js"
+    },
+    "highcharts-ng": {
+      "scripts/libs": "dist/highcharts-ng.js"
+    },
+    "highcharts": {
+      "scripts/libs": "highcharts.js"
     }
   },
   "resolutions": {

src/scripts/controllers/dapiControllers.coffee

@@ -454,15 +454,6 @@ class MissionDetailController extends DetailController
         # size: 'lg'
         windowClass: 'parameters-modal fade'
 
-    # Show the data plot modal in the correct location
-    @show_plot = () =>
-      @log.info('opening data plot')
-      dialog = @modal.open
-        templateUrl: '/views/mission/plot-modal.html'
-        controller: 'missionPlotController as controller'
-        # backdrop: 'static'
-        # windowClass: 'parameters-modal fade'
-
     @show_analysis = () =>
       @log.info('opening analysis')
       dialog = @modal.open
@@ -529,24 +520,16 @@ class MissionParameterController extends BaseController
           p.style = if p.rangeOk then "param-good" else "param-bad"
 
 class MissionPlotController extends BaseController
-  @$inject: ['$log', '$scope', '$routeParams', 'missionService']
-  constructor: (@log, scope, @routeParams, @service) ->
+  @$inject: ['$log', '$scope', '$routeParams', 'missionService', 'authService', 'missionData', 'plotData']
+  constructor: (@log, scope, @routeParams, @service, @authService, @record, @plotData) ->
     super(scope)
 
-    @scope.plotOptions =
-      xaxis :
-        mode : "time"
-        timeformat : "%M:%S"
-      zoom :
-        interactive : true
-      pan :
-        interactive : true
-    @scope.plotData = {}
-
-    @log.debug("Fetching plot data for " + @routeParams.id)
-    @service.get_plotdata(@routeParams.id).then (httpResp) =>
-      @log.debug("Setting plot")
-      @scope.plotData = httpResp.data
+    @isMine = () =>
+      me = @authService.getUser()
+      me.loggedIn && (@record?.userName == me.login)
+
+    @scope.record = @record
+    @scope.series = @plotData
 
 class MissionAnalysisController extends BaseController
   @$inject: ['$log', '$scope', '$routeParams', 'missionService']

src/scripts/directives/missionPlot.coffee

@@ -0,0 +1,53 @@
+angular.module('app').directive 'missionPlot', ['$log', '$window', ($log, $window) -> return {
+  restrict: 'A'
+  controllerAs: 'controller'
+  templateUrl: '/views/directives/mission-plot.html'
+  scope:
+    'series': '='
+  controller: ['$scope', (@scope) ->
+    @getPlotWidthHeight = =>
+      navHeight = ($ 'header[header-nav]').height()
+      infoHeight = ($ '.plot-info').height()
+      plotHeight = ($ window).height() - navHeight - infoHeight - 200
+      plotWidth = ($ '.highcharts-plot').width()
+      [plotHeight, plotWidth]
+
+    size = @getPlotWidthHeight()
+
+    @resizeChart = =>
+      size = @getPlotWidthHeight()
+      plotHeight = size[0]
+      plotWidth = size[1]
+      @scope.$apply =>
+        @scope.chartConfig.size.width = plotWidth
+        @scope.chartConfig.size.height = plotHeight
+
+    @scope.chartConfig =
+      options:
+        chart:
+          type: 'line'
+          zoomType: 'x'
+      xAxis:
+        ordinal: false
+        type: 'datetime'
+        tickInterval: 2 * 60 * 1000
+        labels:
+          rotation: -45
+        dateTimeLabelFormats:
+          day: '%H:%M'
+          hour: '%I %p'
+          minute: '%I:%M %p'
+
+      title:
+        text: 'Param Plot'
+      series: ({name: option.label, data: option.data} for option in @scope.series)
+      size:
+        height: size[0]
+        width: size[1]
+
+    return @
+  ]
+  link: ($scope, element, attributes, controller) ->
+    ($ window).resize controller.resizeChart
+    #controller.resizeChart(false)
+}]

src/scripts/routes.coffee

@@ -51,8 +51,18 @@ class Config
       templateUrl: '/views/mission/analysis-window.html'
     .when '/doarama/:id',
       templateUrl: '/views/mission/doarama-window.html'
-    .when '/plot/:id',
+    .when '/mission/:id/plot',
+      title: 'Plot'
       templateUrl: '/views/mission/plot-window.html'
+      controller: 'missionPlotController as controller'
+      resolve:
+        missionData: ['$route', 'missionService', ($route, missionService) ->
+          missionService.getId($route.current.params.id).then missionService.fixMissionRecord
+        ]
+        plotData: ['$route', 'missionService', ($route, missionService) ->
+          missionService.get_plotdata($route.current.params.id).then (response) ->
+            response.data
+        ]
     .when '/github/:id',
       controller: 'gitHubController'
     .when '/admin',

src/styles/styles.less

@@ -553,3 +553,21 @@ p {
     }
   }
 }
+
+.mission-detail-plot {
+  .contact-card {
+    img {
+      margin-right: 10px;
+    }
+  }
+  .plot-area {
+    margin-top: 25px;
+    padding-top: 25px;
+    margin-bottom: 25px;
+    padding-bottom: 25px;
+    background-color: #fff;
+    .highcharts-plot {
+      height: auto;
+    }
+  }
+}

src/views/directives/mission-plot.html

@@ -0,0 +1 @@
+<highchart class='highcharts-plot' config="chartConfig"></highchart>