Move large chart libs out of critical path

resources/js/angular/charts/jqplot.js

@@ -0,0 +1,6 @@
+// jqPlot is only needed by the overview page's line charts, so this module is
+// imported dynamically and bundled into its own chunk, fetched on first use.
+// The plugins register themselves on $.jqplot, so they must come after it.
+import 'as-jqplot/dist/jquery.jqplot.js';
+import 'as-jqplot/dist/plugins/jqplot.dateAxisRenderer.js';
+import 'as-jqplot/dist/plugins/jqplot.highlighter.js';

resources/js/angular/charts/nvd3.js

@@ -0,0 +1,6 @@
+// d3 and nvd3 are only needed by the pages that draw charts, so this module is
+// imported dynamically and bundled into its own chunk, fetched on first use.
+import d3 from 'd3';
+import nv from 'nvd3';
+
+export { d3, nv };

resources/js/angular/controllers/overview.js

@@ -1,8 +1,5 @@
-import d3 from 'd3';
-import nv from 'nvd3';
-
 function makeLineChart(elementName, inputData, project, anchor, sort) {
-  jQuery(function(){
+  import('../charts/jqplot.js').then(function() {
 
     // setup the chart
     var chart = $.jqplot (elementName, [inputData], {
@@ -57,7 +54,7 @@ function makeBulletChart(chartName, elementName, min, avg, max, current,
                          previous, chartHeight) {
   // note that chartHeight is just for the chart itself (not the labels)
   var chart;
-  nv.addGraph(function() {
+  import('../charts/nvd3.js').then(({ d3, nv }) => nv.addGraph(function() {
     chart = nv.models.bulletChart()
       .options({
         margin: {top: 33, right: 10, bottom: 5, left: 5},
@@ -82,7 +79,7 @@ function makeBulletChart(chartName, elementName, min, avg, max, current,
       .datum(chartData)
       .call(chart);
     return chart;
-  });
+  }));
 }
 
 export function linechart() {

resources/js/angular/directives/timeline.js

@@ -1,9 +1,7 @@
-import d3 from 'd3';
-import nv from 'nvd3';
 import timelineTemplate from '../views/partials/timeline.html';
 
 var timelineController =
-  function TimelineChartController($http, $scope) {
+  function TimelineChartController($http, $q, $scope) {
     $scope.loading = true;
 
     var query_parameters = {
@@ -21,22 +19,26 @@ var timelineController =
       $scope.buildgroup = $scope.$parent.cdash.buildgroup;
       query_parameters.buildgroup = $scope.buildgroup;
     }
-    $http({
-      url: 'api/v1/timeline.php',
-      method: 'GET',
-      params: query_parameters
-    }).then(function success(s) {
+    // Fetch the charting libraries alongside the data they will display.
+    $q.all([
+      $http({
+        url: 'api/v1/timeline.php',
+        method: 'GET',
+        params: query_parameters
+      }),
+      import('../charts/nvd3.js')
+    ]).then(function success([s, charts]) {
       $scope.timeline = s.data;
       $scope.error = false;
-      $scope.finishSetup();
+      $scope.finishSetup(charts);
     }, function error(e) {
-      $scope.error = e.data;
+      $scope.error = e.data || e.message;
     }).finally(function() {
       $scope.loading = false;
     });
 
 
-    $scope.finishSetup = function() {
+    $scope.finishSetup = function({ d3, nv }) {
       if ($scope.timeline === undefined || $scope.timeline.length === 0) {
         return;
       }
@@ -260,7 +262,7 @@ var timelineController =
       window.location = uri;
     };
 };
-timelineController.$inject = ["$http", "$scope"];
+timelineController.$inject = ["$http", "$q", "$scope"];
 
 export function timeline() {
   return {

resources/js/angular/legacy.js

@@ -9,9 +9,6 @@ import 'angular/angular.min.js';
 import 'angular-animate/angular-animate.min.js';
 import 'angular-ui-bootstrap/dist/ui-bootstrap.js';
 import 'angular-ui-sortable/dist/sortable.js';
-import 'as-jqplot/dist/jquery.jqplot.js';
-import 'as-jqplot/dist/plugins/jqplot.dateAxisRenderer.js';
-import 'as-jqplot/dist/plugins/jqplot.highlighter.js';
 import './ui-bootstrap-tpls-0.14.2.min.js';
 import './tabNavigation.js';
 import './jquery.tablesorter.js';