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

Pie doughnut dataset weight #5951

Merged
merged 21 commits into from
Feb 27, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
dc8a10f
Added functionality to give pie & doughnut datasets a weight attribute.
Vincent-Ip Jan 2, 2019
1c2f11e
Updated the doughnut documentation
Vincent-Ip Jan 2, 2019
a977196
trying to reduce the Cognitive Complexity of getRingWeightOffset
Vincent-Ip Jan 2, 2019
f351884
Updated the description for the weight attribute to make it simpler.
Vincent-Ip Jan 3, 2019
eeb3f10
made changes as suggested by benmccann.
Vincent-Ip Jan 4, 2019
83afbc6
refactored the getVisibleDatasetTotalWeight function
Vincent-Ip Jan 4, 2019
66767c3
made the new doughnut methods private and made suggested code
Vincent-Ip Jan 4, 2019
e442a73
simplified chartWeight assignment
Vincent-Ip Jan 4, 2019
5647b78
more simplifications for chartWeight assignment
Vincent-Ip Jan 4, 2019
aab7d6c
Changed new property name from weight to flex
Vincent-Ip Jan 9, 2019
3fa2243
Merge branch 'master' into pie-doughnut-dataset-weight
Vincent-Ip Jan 10, 2019
ccb5bd4
changed the new feature name from flex to weight.
Vincent-Ip Jan 14, 2019
78aacf2
update to allow a weight of 0, treat negative weights as 0, and
Vincent-Ip Jan 18, 2019
9b03ca4
added valueOrDefault function to new methods in doughnut controller
Vincent-Ip Jan 29, 2019
0d28307
Merge branch 'master' into pie-doughnut-dataset-weight
Vincent-Ip Jan 29, 2019
919206f
Added test for new ring weight functions
Vincent-Ip Jan 29, 2019
6affa67
Merged changes form ChartJs repository into my local git branch pie-d…
Vincent-Ip Jan 29, 2019
8dd7034
Added image tests for pie / doughnut weight feature
Vincent-Ip Feb 22, 2019
2ca836e
updated weight description in documentation
Vincent-Ip Feb 23, 2019
94bbb9b
removed unnecessary parens from new controller.doughnut.js code
Vincent-Ip Feb 23, 2019
619f667
removed pixel based testing for doughnut weight
Vincent-Ip Feb 27, 2019
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
2 changes: 2 additions & 0 deletions docs/charts/doughnut.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ The doughnut/pie chart allows a number of properties to be specified for each da
| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
| [`weight`](#styling) | `number` | - | - | `1`

### Styling

Expand All @@ -73,6 +74,7 @@ The style of each arc can be controlled with the following properties:
| `backgroundColor` | arc background color.
| `borderColor` | arc border color.
| `borderWidth` | arc border width (in pixels).
| `weight` | The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.

All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.

Expand Down
40 changes: 36 additions & 4 deletions src/controllers/controller.doughnut.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ var elements = require('../elements/index');
var helpers = require('../helpers/index');

var resolve = helpers.options.resolve;
var valueOrDefault = helpers.valueOrDefault;

defaults._set('doughnut', {
animation: {
Expand Down Expand Up @@ -152,6 +153,7 @@ module.exports = DatasetController.extend({
var arcs = meta.data;
var cutoutPercentage = opts.cutoutPercentage;
var circumference = opts.circumference;
var chartWeight = me._getRingWeight(me.index);
var i, ilen;

// If the chart's circumference isn't a full circle, calculate minSize as a ratio of the width/height of the arc
Expand Down Expand Up @@ -180,14 +182,14 @@ module.exports = DatasetController.extend({
chart.borderWidth = me.getMaxBorderWidth();
chart.outerRadius = Math.max((minSize - chart.borderWidth) / 2, 0);
chart.innerRadius = Math.max(cutoutPercentage ? (chart.outerRadius / 100) * (cutoutPercentage) : 0, 0);
chart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount();
chart.radiusLength = (chart.outerRadius - chart.innerRadius) / (me._getVisibleDatasetWeightTotal() || 1);
chart.offsetX = offset.x * chart.outerRadius;
chart.offsetY = offset.y * chart.outerRadius;

meta.total = me.calculateTotal();

me.outerRadius = chart.outerRadius - (chart.radiusLength * me.getRingIndex(me.index));
me.innerRadius = Math.max(me.outerRadius - chart.radiusLength, 0);
me.outerRadius = chart.outerRadius - chart.radiusLength * me._getRingWeightOffset(me.index);
me.innerRadius = Math.max(me.outerRadius - chart.radiusLength * chartWeight, 0);

for (i = 0, ilen = arcs.length; i < ilen; ++i) {
me.updateElement(arcs[i], i, reset);
Expand Down Expand Up @@ -322,7 +324,6 @@ module.exports = DatasetController.extend({
var model = arc._model;
var options = arc._options;
var getHoverColor = helpers.getHoverColor;
var valueOrDefault = helpers.valueOrDefault;

arc.$previousStyle = {
backgroundColor: model.backgroundColor,
Expand Down Expand Up @@ -375,5 +376,36 @@ module.exports = DatasetController.extend({
}

return values;
},

/**
* Get radius length offset of the dataset in relation to the visible datasets weights. This allows determining the inner and outer radius correctly
* @private
*/
_getRingWeightOffset: function(datasetIndex) {
var ringWeightOffset = 0;

for (var i = 0; i < datasetIndex; ++i) {
if (this.chart.isDatasetVisible(i)) {
ringWeightOffset += this._getRingWeight(i);
}
}

return ringWeightOffset;
},

/**
* @private
*/
_getRingWeight: function(dataSetIndex) {
return Math.max(valueOrDefault(this.chart.data.datasets[dataSetIndex].weight, 1), 0);
},

/**
* Returns the sum of all visibile data set weights. This value can be 0.
* @private
*/
_getVisibleDatasetWeightTotal: function() {
return this._getRingWeightOffset(this.chart.data.datasets.length);
}
});
50 changes: 50 additions & 0 deletions test/fixtures/controller.doughnut/doughnut-weight.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{
"config": {
"type": "doughnut",
"data": {
"datasets": [{
"data": [ 1, 1 ],
"backgroundColor": [
"rgba(255, 99, 132, 0.8)",
"rgba(54, 162, 235, 0.8)"
],
"borderWidth": 0
},
{
"data": [ 2, 1 ],
"hidden": true,
"borderWidth": 0
},
{
"data": [ 3, 3 ],
"weight": 3,
"backgroundColor": [
"rgba(255, 206, 86, 0.8)",
"rgba(75, 192, 192, 0.8)"
],
"borderWidth": 0
},
{
"data": [ 4, 0 ],
"weight": 0,
"borderWidth": 0
},
{
"data": [ 5, 0 ],
"weight": -2,
"borderWidth": 0
}],
"labels": [ "label0", "label1" ]
},
"options": {
"legend": false,
"title": false
}
},
"options": {
"canvas": {
"height": 500,
"width": 500
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions test/fixtures/controller.doughnut/pie-weight.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{
"config": {
"type": "pie",
"data": {
"datasets": [
{
"data": [ 1, 1 ],
"backgroundColor": [
"rgba(255, 99, 132, 0.8)",
"rgba(54, 162, 235, 0.8)"
],
"borderWidth": 0
},
{
"data": [ 2, 1 ],
"hidden": true,
"borderWidth": 0
},
{
"data": [ 3, 3 ],
"weight": 3,
"backgroundColor": [
"rgba(255, 206, 86, 0.8)",
"rgba(75, 192, 192, 0.8)"
],
"borderWidth": 0
},
{
"data": [ 4, 0 ],
"weight": 0,
"borderWidth": 0
},
{
"data": [ 5, 0 ],
"weight": -2,
"borderWidth": 0
}
],
"labels": [ "label0", "label1" ]
},
"options": {
"legend": false,
"title": false
}
},
"options": {
"canvas": {
"height": 500,
"width": 500
}
}
}
Binary file added test/fixtures/controller.doughnut/pie-weight.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.