openstack/stackviz
Code Issues Proposed changes

Use d3 modules to reduce build size

Browse Source 
This switches the codebase to use only specific d3 (version 4) modules
rather than the entire d3 (v3) package, resulting in a decent shrink
in build size (~75KB reduction).

Change-Id: I9f6a5d039d6340cc28115337bdfb891d15af7057
This commit is contained in:
Tim Buckley 2016-05-20 16:13:20 -06:00
parent 28caae17d6
commit 965e723004
7 changed files with 72 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/js/directives/timeline-dstat.js
View File

@ -2,9 +2,12 @@
var directivesModule = require('./_index.js');
var d3Ease = require('d3-ease');
var d3Interpolate = require('d3-interpolate');
var d3Scale = require('d3-scale');
var arrayUtil = require('../util/array-util');
var parseDstat = require('../util/dstat-parse');
var d3 = require('d3');
var getDstatLanes = function(data, mins, maxes) {
if (!data || !data.length) {
@ -16,14 +19,14 @@ var getDstatLanes = function(data, mins, maxes) {
if ('total_cpu_usage_usr' in row && 'total_cpu_usage_sys' in row) {
lanes.push([{
scale: d3.scale.linear().domain([0, 100]),
scale: d3Scale.scaleLinear().domain([0, 100]),
value: function(d) {
return d.total_cpu_usage_wai;
},
color: "rgba(224, 188, 188, 1)",
text: "CPU wait"
}, {
scale: d3.scale.linear().domain([0, 100]),
scale: d3Scale.scaleLinear().domain([0, 100]),
value: function(d) {
return d.total_cpu_usage_usr + d.total_cpu_usage_sys;
},
@ -34,7 +37,7 @@ var getDstatLanes = function(data, mins, maxes) {
if ('memory_usage_used' in row) {
lanes.push([{
scale: d3.scale.linear().domain([0, maxes.memory_usage_used]),
scale: d3Scale.scaleLinear().domain([0, maxes.memory_usage_used]),
value: function(d) { return d.memory_usage_used; },
color: "rgba(102, 140, 178, 0.75)",
text: "Memory"
@ -43,12 +46,12 @@ var getDstatLanes = function(data, mins, maxes) {
if ('net_total_recv' in row && 'net_total_send' in row) {
lanes.push([{
scale: d3.scale.linear().domain([0, maxes.net_total_recv]),
scale: d3Scale.scaleLinear().domain([0, maxes.net_total_recv]),
value: function(d) { return d.net_total_recv; },
color: "rgba(224, 188, 188, 1)",
text: "Net Down"
}, {
scale: d3.scale.linear().domain([0, maxes.net_total_send]),
scale: d3Scale.scaleLinear().domain([0, maxes.net_total_send]),
value: function(d) { return d.net_total_send; },
color: "rgba(102, 140, 178, 0.75)",
text: "Net Up",
@ -58,13 +61,13 @@ var getDstatLanes = function(data, mins, maxes) {
if ('dsk_total_read' in row && 'dsk_total_writ' in row) {
lanes.push([{
scale: d3.scale.linear().domain([0, maxes.dsk_total_read]),
scale: d3Scale.scaleLinear().domain([0, maxes.dsk_total_read]),
value: function(d) { return d.dsk_total_read; },
color: "rgba(224, 188, 188, 1)",
text: "Disk Read",
type: "line"
}, {
scale: d3.scale.linear().domain([0, maxes.dsk_total_writ]),
scale: d3Scale.scaleLinear().domain([0, maxes.dsk_total_writ]),
value: function(d) { return d.dsk_total_writ; },
color: "rgba(102, 140, 178, 0.75)",
text: "Disk Write",
@ -87,12 +90,12 @@ function timelineDstat($document, $window) {
// axes and dstat-global variables
var absolute = timelineController.axes.absolute;
var xSelected = timelineController.axes.selection;
var y = d3.scale.linear();
var y = d3Scale.scaleLinear();
// animation variables
var currentViewExtents = null;
var viewInterpolator = null;
var easeOutCubic = d3.ease('cubic-out');
var easeOutCubic = d3Ease.easeCubicOut;
var easeStartTimestamp = null;
var easeDuration = 500;
@ -406,7 +409,7 @@ function timelineDstat($document, $window) {
if (currentViewExtents) {
// if we know where the view is already, try to animate the transition
viewInterpolator = d3.interpolate(
viewInterpolator = d3Interpolate.interpolateArray(
currentViewExtents,
timelineController.viewExtents);
easeStartTimestamp = performance.now();
@ -426,7 +429,7 @@ function timelineDstat($document, $window) {
if (currentViewExtents) {
// if we know where the view is already, try to animate the transition
viewInterpolator = d3.interpolate(
viewInterpolator = d3Interpolate.interpolateArray(
currentViewExtents,
timelineController.viewExtents);
easeStartTimestamp = performance.now();

6
app/js/directives/timeline-overview.js
View File

@ -2,7 +2,7 @@
var directivesModule = require('./_index.js');
var d3 = require('d3');
var d3Scale = require('d3-scale');
function timelineOverview($document, $window) {
var link = function(scope, el, attrs, timelineController) {
@ -14,7 +14,7 @@ function timelineOverview($document, $window) {
// scales and extents
var x = timelineController.axes.x;
var y = d3.scale.linear();
var y = d3Scale.scaleLinear();
var brushExtent = [0, 0];
var handleSize = 3;
@ -81,7 +81,7 @@ function timelineOverview($document, $window) {
}
var size = viewEnd - viewStart;
var currentMid = viewStart.getTime() + (size / 2);
var currentMid = (+viewStart) + (size / 2);
var targetMid = item.startDate.getTime() + (item.endDate - item.startDate) / 2;
var targetStart, targetEnd;

17
app/js/directives/timeline-viewport.js
View File

@ -3,7 +3,10 @@
var directivesModule = require('./_index.js');
var arrayUtil = require('../util/array-util');
var d3 = require('d3');
var d3Ease = require('d3-ease');
var d3Interpolate = require('d3-interpolate');
var d3Scale = require('d3-scale');
var d3TimeFormat = require('d3-time-format');
/**
* @ngInject
@ -17,16 +20,16 @@ function timelineViewport($document, $window) {
var loaded = false;
// axes and timeline-global variables
var y = d3.scale.linear();
var y = d3Scale.scaleLinear();
var absolute = timelineController.axes.absolute;
var xSelected = timelineController.axes.selection;
var cursorTimeFormat = d3.time.format('%X');
var cursorTimeFormat = d3TimeFormat.timeFormat('%X');
var tickFormat = timelineController.axes.x.tickFormat();
// animation variables
var currentViewExtents = null;
var viewInterpolator = null;
var easeOutCubic = d3.ease('cubic-out');
var easeOutCubic = d3Ease.easeCubicOut;
var easeStartTimestamp = null;
var easeDuration = 500;
@ -361,7 +364,7 @@ function timelineViewport($document, $window) {
// make a scale for the position of this region, but shrink it slightly so
// no labels overlap region boundaries and get cut off
var tickScale = d3.time.scale().domain([
var tickScale = d3Scale.scaleTime().domain([
absolute.invert(region.x + 10),
absolute.invert(region.x + region.width - 10)
]);
@ -613,7 +616,7 @@ function timelineViewport($document, $window) {
if (currentViewExtents) {
// if we know where the view is already, try to animate the transition
viewInterpolator = d3.interpolate(
viewInterpolator = d3Interpolate.interpolateArray(
currentViewExtents,
timelineController.viewExtents);
easeStartTimestamp = performance.now();
@ -633,7 +636,7 @@ function timelineViewport($document, $window) {
if (currentViewExtents) {
// if we know where the view is already, try to animate the transition
viewInterpolator = d3.interpolate(
viewInterpolator = d3Interpolate.interpolateArray(
currentViewExtents,
timelineController.viewExtents);
easeStartTimestamp = performance.now();

33
app/js/directives/timeline.js
View File

@ -4,7 +4,10 @@ var directivesModule = require('./_index.js');
var arrayUtil = require('../util/array-util');
var parseDstat = require('../util/dstat-parse');
var d3 = require('d3');
var d3Array = require('d3-array');
var d3Collection = require('d3-collection');
var d3Scale = require('d3-scale');
var statusColorMap = {
'success': 'LightGreen',
@ -60,14 +63,14 @@ function timeline($window, $log, datasetService, progressService) {
* The primary axis mapping date to on-screen x. The lower time bound maps
* to x=0, while the upper time bound maps to x=width.
*/
x: d3.time.scale(),
x: d3Scale.scaleTime(),
/**
* The selection axis, mapping date to on-screen x, depending on the size
* and position of the user selection. `selection(viewExtents[0]) = 0`,
* while `selection(viewExtents[1]) = width`
*/
selection: d3.scale.linear(),
selection: d3Scale.scaleLinear(),
/**
* The absolute x axis mapping date to virtual x, depending only on the
@ -76,7 +79,7 @@ function timeline($window, $log, datasetService, progressService) {
* be the total width at the current scale, spanning as many
* viewport-widths as necessary.
*/
absolute: d3.scale.linear()
absolute: d3Scale.scaleLinear()
};
self.selectionName = null;
@ -88,12 +91,12 @@ function timeline($window, $log, datasetService, progressService) {
self.animateCallbacks = [];
self.setViewExtents = function(extents) {
if (angular.isNumber(extents[0])) {
extents[0] = new Date(extents[0]);
if (extents[0] instanceof Date) {
extents[0] = +extents[0];
}
if (angular.isNumber(extents[1])) {
extents[1] = new Date(extents[1]);
if (extents[1] instanceof Date) {
extents[1] = +extents[1];
}
var oldSize = self.viewExtents[1] - self.viewExtents[0];
@ -357,9 +360,9 @@ function timeline($window, $log, datasetService, progressService) {
self.timeExtents = [ minStart, maxEnd ];
self.data = d3.nest()
self.data = d3Collection.nest()
.key(function(d) { return d.worker; })
.sortKeys(d3.ascending)
.sortKeys(d3Array.ascending)
.entries(raw.filter(function(d) { return d.duration > 0; }));
self.axes.x.domain(self.timeExtents);
@ -444,18 +447,16 @@ function timeline($window, $log, datasetService, progressService) {
scope.$on('windowResize', updateWidth);
updateWidth();
d3.select(window)
.on("keydown", function() {
var code = d3.event.keyCode;
if (code === 37) {
$window.addEventListener('keydown', function(evt) {
if (evt.keyCode === 37) {
ctrl.selectPreviousItem();
}
if (code === 39) {
if (evt.keyCode === 39) {
ctrl.selectNextItem();
}
scope.$apply();
});
};
return {

12
app/js/filters/seconds-time.js
View File

@ -1,12 +1,16 @@
'use strict';
var d3 = require('d3');
var filtersModule = require('./_index.js');
var secondsToTime = function(seconds) {
var format = d3.format('02d');
var format = function(value) {
if (value < 10) {
return '0' + value;
} else {
return value.toString();
}
};
var secondsToTime = function(seconds) {
var hours = Math.floor(seconds / 60 / 60);
seconds = seconds - (hours * 60 * 60);

11
app/js/util/dstat-parse.js
View File

@ -1,6 +1,7 @@
'use strict';
var d3 = require("d3");
var timeFormat = require('d3-time-format');
var dsv = require('d3-dsv');
var fillArrayRight = function(array) {
@ -37,9 +38,9 @@ var parseDstat = function(data, year) {
// assume UTC - may not necessarily be the case?
// dstat doesn't include the year in its logs, so we'll need to copy it
// from the subunit logs
var dateFormat = d3.time.format.utc("%d-%m %H:%M:%S");
var dateFormat = timeFormat.utcParse('%d-%m %H:%M:%S');
var parsed = d3.csv.parseRows(data, function(row, i) {
var parsed = dsv.csvParseRows(data, function(row, i) {
if (i === 0) {
if (row.length !== 1 ||
!row[0].startsWith('Dstat') ||
@ -64,8 +65,8 @@ var parseDstat = function(data, year) {
var name = names[col];
var value = row[col];
if (value && name) {
if (name === "system_time") {
value = dateFormat.parse(value);
if (name === 'system_time') {
value = dateFormat(value);
value.setFullYear(1900 + year);
} else {
value = parseFloat(value);

9
package.json
View File

@ -19,7 +19,14 @@
"bulk-require": "^0.2.1",
"bulkify": "1.1.1",
"codemirror": "5.14.2",
"d3": "^3.5.6",
"d3-array": "^0.7.1",
"d3-collection": "^0.2.0",
"d3-dsv": "^0.3.2",
"d3-ease": "^0.7.0",
"d3-interpolate": "^0.7.0",
"d3-request": "^0.4.6",
"d3-scale": "^0.7.0",
"d3-time-format": "^0.3.2",
"del": "2.2.0",
"eslint": "~1.10.3",
"eslint-config-openstack": "1.2.4",