diff --git a/resources/js/angular/charts/jqplot.js b/resources/js/angular/charts/jqplot.js new file mode 100644 index 0000000000..5f898b58e7 --- /dev/null +++ b/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'; diff --git a/resources/js/angular/charts/nvd3.js b/resources/js/angular/charts/nvd3.js new file mode 100644 index 0000000000..5f2790e95e --- /dev/null +++ b/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 }; diff --git a/resources/js/angular/controllers/overview.js b/resources/js/angular/controllers/overview.js index dc127a9298..1b6eb1db54 100644 --- a/resources/js/angular/controllers/overview.js +++ b/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() { diff --git a/resources/js/angular/directives/timeline.js b/resources/js/angular/directives/timeline.js index 55ee177c87..6d68204835 100644 --- a/resources/js/angular/directives/timeline.js +++ b/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 { diff --git a/resources/js/angular/legacy.js b/resources/js/angular/legacy.js index bc3356b8b0..89939ee2dd 100644 --- a/resources/js/angular/legacy.js +++ b/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';