Merge pull request #1429 from slinto/reduce-d3-size

[Optimization] Reduce D3 dependency size
This commit is contained in:
Andrew Henry
2017-04-19 16:49:57 -07:00
committed by GitHub
7 changed files with 69 additions and 23 deletions

View File

@@ -22,9 +22,11 @@
define(
[
"d3"
"d3-selection",
"d3-scale",
"d3-axis"
],
function (d3) {
function (d3Selection, d3Scale, d3Axis) {
var PADDING = 1;
/**
@@ -70,12 +72,12 @@ define(
ConductorAxisController.prototype.initialize = function (element) {
this.target = element[0].firstChild;
var height = this.target.offsetHeight;
var vis = d3.select(this.target)
var vis = d3Selection.select(this.target)
.append("svg:svg")
.attr("width", "100%")
.attr("height", height);
this.xAxis = d3.axisTop();
this.xAxis = d3Axis.axisTop();
// draw x axis with labels and move to the bottom of the chart area
this.axisElement = vis.append("g")
@@ -115,10 +117,10 @@ define(
var bounds = this.bounds;
if (timeSystem.isUTCBased()) {
this.xScale = this.xScale || d3.scaleUtc();
this.xScale = this.xScale || d3Scale.scaleUtc();
this.xScale.domain([new Date(bounds.start), new Date(bounds.end)]);
} else {
this.xScale = this.xScale || d3.scaleLinear();
this.xScale = this.xScale || d3Scale.scaleLinear();
this.xScale.domain([bounds.start, bounds.end]);
}
@@ -145,9 +147,9 @@ define(
//The D3 scale used depends on the type of time system as d3
// supports UTC out of the box.
if (timeSystem.isUTCBased()) {
this.xScale = d3.scaleUtc();
this.xScale = d3Scale.scaleUtc();
} else {
this.xScale = d3.scaleLinear();
this.xScale = d3Scale.scaleLinear();
}
this.xAxis.scale(this.xScale);

View File

@@ -23,11 +23,13 @@
define([
'./ConductorAxisController',
'zepto',
'd3'
'd3-selection',
'd3-scale'
], function (
ConductorAxisController,
$,
d3
d3Selection,
d3Scale
) {
describe("The ConductorAxisController", function () {
var controller,
@@ -84,8 +86,8 @@ define([
"emit"
]);
spyOn(d3, 'scaleUtc').andCallThrough();
spyOn(d3, 'scaleLinear').andCallThrough();
spyOn(d3Scale, 'scaleUtc').andCallThrough();
spyOn(d3Scale, 'scaleLinear').andCallThrough();
element = $('<div style="width: 100px;"><div style="width: 100%;"></div></div>');
$(document).find('body').append(element);
@@ -122,15 +124,15 @@ define([
mockTimeSystem.isUTCBased.andReturn(true);
controller.changeTimeSystem(mockTimeSystem);
expect(d3.scaleUtc).toHaveBeenCalled();
expect(d3.scaleLinear).not.toHaveBeenCalled();
expect(d3Scale.scaleUtc).toHaveBeenCalled();
expect(d3Scale.scaleLinear).not.toHaveBeenCalled();
});
it("uses a linear scale for non-UTC time systems", function () {
mockTimeSystem.isUTCBased.andReturn(false);
controller.changeTimeSystem(mockTimeSystem);
expect(d3.scaleLinear).toHaveBeenCalled();
expect(d3.scaleUtc).not.toHaveBeenCalled();
expect(d3Scale.scaleLinear).toHaveBeenCalled();
expect(d3Scale.scaleUtc).not.toHaveBeenCalled();
});
it("sets axis domain to time conductor bounds", function () {