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.

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

add legendLabelAccessor to piechart #916

Open
wants to merge 12 commits into
base: develop
Choose a base branch
from
25 changes: 24 additions & 1 deletion dc.js
Original file line number Diff line number Diff line change
Expand Up @@ -681,6 +681,7 @@ dc.baseMixin = function (_chart) {
var _keyAccessor = dc.pluck('key');
var _valueAccessor = dc.pluck('value');
var _label = dc.pluck('key');
var _legendLabelAccessor = dc.pluck('key');

var _ordering = dc.pluck('key');
var _orderSort;
Expand Down Expand Up @@ -1544,6 +1545,27 @@ dc.baseMixin = function (_chart) {
return _chart;
};


/**
#### .legendLabelAccessor([legendLabelAccessorFunction])
Set or get the legend label accessor function. The legend label accessor function is used to retrieve the
value from the legend label for the crossfilter group.
```js
// default legenLabel accessor
chart.legendLabelAccessor(function(d) { return d.key; });
// custom legen label accessor for a multi-value crossfilter reduction
chart.legendLabelAccessor(function(p) { return "Custom Legend:" + p.key; });
```

**/
_chart.legendLabelAccessor = function (_) {
if (!arguments.length) {
return _legendLabelAccessor;
}
_legendLabelAccessor = _;
return _chart;
};

/**
#### .label([labelFunction])
Set or get the label function. The chart class will use this function to render labels for each
Expand Down Expand Up @@ -3746,6 +3768,7 @@ dc.pieChart = function (parent, chartGroup) {
var _chart = dc.capMixin(dc.colorMixin(dc.baseMixin({})));

_chart.colorAccessor(_chart.cappedKeyAccessor);
_chart.legendLabelAccessor(_chart.cappedKeyAccessor);

_chart.title(function (d) {
return _chart.cappedKeyAccessor(d) + ': ' + _chart.cappedValueAccessor(d);
Expand Down Expand Up @@ -4123,7 +4146,7 @@ dc.pieChart = function (parent, chartGroup) {

_chart.legendables = function () {
return _chart.data().map(function (d, i) {
var legendable = {name: d.key, data: d.value, others: d.others, chart:_chart};
var legendable = {name: _chart.legendLabelAccessor().call(this, d, i), data: d.value, others: d.others, chart:_chart};
legendable.color = _chart.getColor(d, i);
return legendable;
});
Expand Down
6 changes: 3 additions & 3 deletions dc.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dc.min.js.map

Large diffs are not rendered by default.

26 changes: 26 additions & 0 deletions spec/pie-chart-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -658,6 +658,32 @@ describe('dc.pieChart', function() {
valueDimension.filterAll();
});
});


describe('legends with label', function() {
var chart;
beforeEach(function() {
chart = buildChart("pie-chart-legend")
.cap(3)
.legend(dc.legend())
.legendLabelAccessor(function(d){
return d.key + " labeled";
})
.render();
});
it('should generate items for each slice', function() {
expect(chart.selectAll('g.dc-legend g.dc-legend-item').size()).toEqual(chart.data().length);
});
it('should include "others" item labeled', function() {
var numOthersGroups = chart.selectAll('g.dc-legend g.dc-legend-item text').filter(function(d, i) {
return d.name == "Others labeled";
}).size();
expect(numOthersGroups).toEqual(1);
});
afterEach(function() {
valueDimension.filterAll();
});
});
});


22 changes: 22 additions & 0 deletions src/base-mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ dc.baseMixin = function (_chart) {
var _keyAccessor = dc.pluck('key');
var _valueAccessor = dc.pluck('value');
var _label = dc.pluck('key');
var _legendLabelAccessor = dc.pluck('key');

var _ordering = dc.pluck('key');
var _orderSort;
Expand Down Expand Up @@ -894,6 +895,27 @@ dc.baseMixin = function (_chart) {
return _chart;
};


/**
#### .legendLabelAccessor([legendLabelAccessorFunction])
Set or get the legend label accessor function. The legend label accessor function is used to retrieve the
value from the legend label for the crossfilter group.
```js
// default legenLabel accessor
chart.legendLabelAccessor(function(d) { return d.key; });
// custom legen label accessor for a multi-value crossfilter reduction
chart.legendLabelAccessor(function(p) { return "Custom Legend:" + p.key; });
```

**/
_chart.legendLabelAccessor = function (_) {
if (!arguments.length) {
return _legendLabelAccessor;
}
_legendLabelAccessor = _;
return _chart;
};

/**
#### .label([labelFunction])
Set or get the label function. The chart class will use this function to render labels for each
Expand Down
4 changes: 3 additions & 1 deletion src/pie-chart.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ dc.pieChart = function (parent, chartGroup) {
var _chart = dc.capMixin(dc.colorMixin(dc.baseMixin({})));

_chart.colorAccessor(_chart.cappedKeyAccessor);
_chart.legendLabelAccessor(_chart.cappedKeyAccessor);

_chart.title(function (d) {
return _chart.cappedKeyAccessor(d) + ': ' + _chart.cappedValueAccessor(d);
Expand Down Expand Up @@ -428,7 +429,8 @@ dc.pieChart = function (parent, chartGroup) {

_chart.legendables = function () {
return _chart.data().map(function (d, i) {
var legendable = {name: d.key, data: d.value, others: d.others, chart:_chart};
var legendable = { name: _chart.legendLabelAccessor().call(this, d, i),
data: d.value, others: d.others, chart:_chart };
legendable.color = _chart.getColor(d, i);
return legendable;
});
Expand Down