Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Stackable #403

Merged
merged 1 commit into from
Nov 20, 2013
Merged

Refactor Stackable #403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,6 @@ module.exports = function (grunt) {
flatten: true,
src: [output.js,
output.js + ".map",
'node_modules/jquery/tmp/jquery.js',
'node_modules/d3/d3.js',
'node_modules/crossfilter/crossfilter.js',
'test/env-data.js'],
Expand Down
22 changes: 13 additions & 9 deletions spec/composite-chart-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,16 @@ describe('dc.compositeChart', function() {
.x(d3.time.scale().domain([new Date(2012, 4, 20), new Date(2012, 7, 15)]))
.transitionDuration(0)
.xUnits(d3.time.days)
.shareColors(true)
.compose([
dc.barChart(chart)
.centerBar(true)
.group(dateValueSumGroup, 'Date Value Group')
.group(dateValueSumGroup, 'Date Value Group Bar')
.gap(1),
dc.lineChart(chart)
.group(dateIdSumGroup, 'Date ID Group')
.stack(dateValueSumGroup, 'Date Value Group')
.stack(dateValueSumGroup, 'Date Value Group'),
.stack(dateValueSumGroup, 'Date Value Group Line 1')
.stack(dateValueSumGroup, 'Date Value Group Line 2'),
dc.lineChart(chart)
.group(dateGroup, 'Date Group')
]);
Expand Down Expand Up @@ -307,21 +308,22 @@ describe('dc.compositeChart', function() {
function legendText(n) {
return d3.select(chart.selectAll('g.dc-legend g.dc-legend-item text')[0][n]).text();
}
expect(legendText(0)).toBe('Date Value Group');
expect(legendText(0)).toBe('Date Value Group Bar');
expect(legendText(1)).toBe('Date ID Group');
expect(legendText(2)).toBe('Date Value Group');
expect(legendText(3)).toBe('Date Value Group');
expect(legendText(2)).toBe('Date Value Group Line 1');
expect(legendText(3)).toBe('Date Value Group Line 2');
expect(legendText(4)).toBe('Date Group');
});

it('should properly delegate highlighting to its children', function () {
var firstItem = chart.select('g.dc-legend g.dc-legend-item');
var firstLine = chart.children()[0].select("path.line");

firstItem.on("mouseover")(firstItem.datum());
expect(firstLine.classed("highlight")).toBeTruthy();
expect(chart.selectAll("rect.highlight").size()).toBe(6);
expect(chart.selectAll("path.fadeout").size()).toBe(4);
firstItem.on("mouseout")(firstItem.datum());
expect(firstLine.classed("highlight")).toBeFalsy();
expect(chart.selectAll("rect.highlight").size()).toBe(0);
expect(chart.selectAll("path.fadeout").size()).toBe(0);
});

});
Expand Down Expand Up @@ -385,6 +387,8 @@ describe('dc.compositeChart', function() {
.brushOn(false)
.dimension(dimension)
.shareTitle(false)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.compose([
dc.lineChart(chart)
.group(group, "Series 1")
Expand Down
6 changes: 3 additions & 3 deletions spec/line-chart-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,7 @@ describe('dc.lineChart', function() {
});

describe('stack hiding', function () {
describe('hiding first stack', function () {
describe('first stack', function () {
beforeEach(function () {
chart.hideStack("stack 0");
chart.render();
Expand All @@ -542,7 +542,7 @@ describe('dc.lineChart', function() {
});
});

describe('hiding any other stack', function () {
describe('any other stack', function () {
beforeEach(function () {
chart.title("stack 2", function (d) { return "stack 2: " + d.value; });
chart.hideStack("stack 1");
Expand All @@ -560,7 +560,7 @@ describe('dc.lineChart', function() {
});

it('should color chart dots the same as line paths', function () {
var lineColor = chart.select('g._1 path.line').attr("fill");
var lineColor = chart.select('g._1 path.line').attr("stroke");
var circleColor = chart.select('g._1 circle.dot').attr("fill");
expect(lineColor).toEqual(circleColor);
});
Expand Down
4 changes: 1 addition & 3 deletions spec/series-chart-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ describe('dc.seriesChart', function() {
.x(d3.scale.linear().domain([1,2]))
.dimension(dimensionColorData)
.group(groupColorData)
.colors(["#000001", "#000002"])
.ordinalColors(["#000001", "#000002"])
.seriesAccessor(function(d) { return +d.key[0];})
.keyAccessor(function(d) { return +d.key[1];})
.valueAccessor(function(d) { return +d.value ;})
Expand All @@ -50,9 +50,7 @@ describe('dc.seriesChart', function() {
it('should color lines using the colors in the data', function() {
var lines = chart.selectAll("path.line");

expect(d3.select(lines[0][0]).attr("fill")).toBe("#000001");
expect(d3.select(lines[0][0]).attr("stroke")).toBe("#000001");
expect(d3.select(lines[0][1]).attr("fill")).toBe("#000002");
expect(d3.select(lines[0][1]).attr("stroke")).toBe("#000002");
});
});
Expand Down
52 changes: 25 additions & 27 deletions src/bar-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ dc.barChart = function (parent, chartGroup) {

_chart.plotData = function () {
var layers = _chart.chartBodyG().selectAll("g.stack")
.data(_chart.stackLayers());
.data(_chart.data());

calculateBarWidth();

Expand All @@ -64,8 +64,6 @@ dc.barChart = function (parent, chartGroup) {

renderBars(layer, i, d);
});

_chart.stackLayers(null);
};

function barHeight(d) {
Expand All @@ -74,17 +72,15 @@ dc.barChart = function (parent, chartGroup) {

function renderBars(layer, layerIndex, d) {
var bars = layer.selectAll("rect.bar")
.data(d.points, dc.pluck('data', _chart.keyAccessor()));
.data(d.values, dc.pluck('x'));

bars.enter()
.append("rect")
.attr("class", "bar")
.attr("fill", _chart.getColor);

if (_chart.renderTitle()) {
bars.append("title").text(dc.pluck('data', _chart.getTitleOfVisibleByIndex(layerIndex)));
.attr("fill", dc.pluck('data',_chart.getColor));

}
if (_chart.renderTitle())
bars.append("title").text(dc.pluck('data',_chart.title(d.name)));

if (_chart.isOrdinal())
bars.on("click", onClick);
Expand All @@ -108,8 +104,8 @@ dc.barChart = function (parent, chartGroup) {
.attr("height", function (d) {
return barHeight(d);
})
.attr("fill", _chart.getColor)
.select("title").text(dc.pluck('data', _chart.getTitleOfVisibleByIndex(layerIndex)));
.attr("fill", dc.pluck('data',_chart.getColor))
.select("title").text(dc.pluck('data',_chart.title(d.name)));

dc.transition(bars.exit(), _chart.transitionDuration())
.attr("height", 0)
Expand Down Expand Up @@ -139,10 +135,10 @@ dc.barChart = function (parent, chartGroup) {
if (_chart.isOrdinal()) {
if (_chart.hasFilter()) {
bars.classed(dc.constants.SELECTED_CLASS, function (d) {
return _chart.hasFilter(_chart.keyAccessor()(d.data));
return _chart.hasFilter(d.x);
});
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return !_chart.hasFilter(_chart.keyAccessor()(d.data));
return !_chart.hasFilter(d.x);
});
} else {
bars.classed(dc.constants.SELECTED_CLASS, false);
Expand All @@ -154,8 +150,7 @@ dc.barChart = function (parent, chartGroup) {
var end = extent[1];

bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
var xValue = _chart.keyAccessor()(d.data);
return xValue < start || xValue >= end;
return d.x < start || d.x >= end;
});
} else {
bars.classed(dc.constants.DESELECTED_CLASS, false);
Expand Down Expand Up @@ -225,24 +220,27 @@ dc.barChart = function (parent, chartGroup) {
return extent;
};

function colorFilter(color,inv) {
return function() {
var item = d3.select(this);
var match = item.attr('fill') == color;
return inv ? !match : match;
};
}

_chart.legendHighlight = function (d) {
if(!_chart.isLegendableHidden(d)) {
_chart.select('.chart-body').selectAll('rect.bar').filter(function () {
return d3.select(this).attr('fill') == d.color;
}).classed('highlight', true);
_chart.select('.chart-body').selectAll('rect.bar').filter(function () {
return d3.select(this).attr('fill') != d.color;
}).classed('fadeout', true);
_chart.selectAll('rect.bar')
.classed('highlight', colorFilter(d.color))
.classed('fadeout', colorFilter(d.color,true));

}
};

_chart.legendReset = function (d) {
_chart.selectAll('.chart-body').selectAll('rect.bar').filter(function () {
return d3.select(this).attr('fill') == d.color;
}).classed('highlight', false);
_chart.selectAll('.chart-body').selectAll('rect.bar').filter(function () {
return d3.select(this).attr('fill') != d.color;
}).classed('fadeout', false);
_chart.selectAll('rect.bar')
.classed('highlight', false)
.classed('fadeout', false);
};

dc.override(_chart, "xAxisMax", function() {
Expand Down
39 changes: 8 additions & 31 deletions src/base-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,40 +188,11 @@ dc.baseChart = function (_chart) {
_chart.group = function (g, name) {
if (!arguments.length) return _group;
_group = g;
_chart._groupName = name;
_chart.expireCache();
if (typeof name === 'string') _chart._setGroupName(_group, name);
return _chart;
};

// store groups names in the group itself
// __names__ ->
// chart (in referenced by multiple charts) ->
// array of accessors, array of names
function groupName(chart, g, accessor) {
var c = chart.chartID(),
k = '__names__';
if (!accessor || accessor == chart.valueAccessor())
accessor = "default";
if (!g[k]) g[k] = {};
if (!g[k][c]) g[k][c] = {a:[],n:[]};
var i = g[k][c].a.indexOf(accessor);
if (i == -1) {
i = g[k][c].a.length;
g[k][c].a[i] = accessor;
g[k][c].n[i] = {name:''};
}
return g[k][c].n[i];
}


_chart._getGroupName = function (g, accessor) {
return groupName(_chart, g, accessor).name;
};

_chart._setGroupName = function (g, name, accessor) {
groupName(_chart, g, accessor).name = name;
};

/**
#### .ordering([orderFunction])
Get or set an accessor to order ordinal charts
Expand Down Expand Up @@ -465,11 +436,17 @@ dc.baseChart = function (_chart) {

var result = _chart.doRedraw();

if (_legend) _legend.render();

_chart.activateRenderlets("postRedraw");

return result;
};

_chart.redrawGroup = function () {
dc.redrawAll(_chart.chartGroup());
};

_chart._invokeFilteredListener = function (f) {
if (f !== undefined) _listeners.filtered(_chart, f);
};
Expand Down Expand Up @@ -589,7 +566,7 @@ dc.baseChart = function (_chart) {
var filter = _chart.keyAccessor()(d);
dc.events.trigger(function () {
_chart.filter(filter);
dc.redrawAll(_chart.chartGroup());
_chart.redrawGroup();
});
};

Expand Down
2 changes: 1 addition & 1 deletion src/box-plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ dc.boxPlot = function (parent, chartGroup) {
.on("click", function(d) {
_chart.filter(d.key);
//_chart.focus(_chart.filter());
dc.redrawAll(_chart.chartGroup());
_chart.redrawGroup();
});
}

Expand Down
18 changes: 10 additions & 8 deletions src/color-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,10 @@ chart implementation.

dc.colorChart = function(_chart) {
var _colors = d3.scale.category20c();
var _defaultAccessor = true;

var _colorAccessor = function(d) { return _chart.keyAccessor()(d); };

var _colorCalculator = function(value) {
return _colors(value,_chart);
};

/**
#### .colors([colorScale])
Retrieve current color scale or set a new color scale. This methods accepts any
Expand All @@ -35,7 +32,7 @@ dc.colorChart = function(_chart) {
_chart.colors = function(_) {
if (!arguments.length) return _colors;
if (_ instanceof Array) _colors = d3.scale.quantize().range(_); // depricated legacy support, note: this fails for ordinal domains
else _colors = _;
else _colors = d3.functor(_);
return _chart;
};

Expand Down Expand Up @@ -74,9 +71,14 @@ dc.colorChart = function(_chart) {
_chart.colorAccessor = function(_){
if(!arguments.length) return _colorAccessor;
_colorAccessor = _;
_defaultAccessor = false;
return _chart;
};

_chart.defaultColorAccessor = function() {
return _defaultAccessor;
};

/**
#### .colorDomain([domain])
Set or get the current domain for the color mapping function. The domain must be supplied as an array.
Expand Down Expand Up @@ -107,12 +109,12 @@ dc.colorChart = function(_chart) {

**/
_chart.getColor = function(d, i){
return _colorCalculator(_colorAccessor(d, i));
return _colors(_colorAccessor.call(this,d, i));
};

_chart.colorCalculator = function(_){
if(!arguments.length) return _colorCalculator;
_colorCalculator = _;
if(!arguments.length) return _chart.getColor;
_chart.getColor = _;
return _chart;
};

Expand Down
Loading