Skip to content

Commit

Permalink
Refactor to remove group stack and fix coloring
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrideout
jrideout committed Nov 20, 2013
1 parent a736d48 commit 824b139
Show file tree
Hide file tree
Showing 24 changed files with 268 additions and 655 deletions.
1 change: 0 additions & 1 deletion Gruntfile.js
View file
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
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
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
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
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
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
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
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

0 comments on commit 824b139

Please sign in to comment.