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 6 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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/charts/doughnut.md
Expand Up @@ -62,6 +62,7 @@ The doughnut/pie chart allows a number of properties to be specified for each da
| `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the arcs when hovered.
| `hoverBorderColor` | `Color/Color[]` | The stroke colour of the arcs when hovered.
| `hoverBorderWidth` | `Number/Number[]` | The stroke width of the arcs when hovered.
| `weight` | `Number` | The relative thickness of the dataset. The default weight of each dataset is 1. Providing a value for weight will allow the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weights.

### Border Alignment

Expand Down
38 changes: 35 additions & 3 deletions src/controllers/controller.doughnut.js
Expand Up @@ -138,6 +138,37 @@ module.exports = DatasetController.extend({
return ringIndex;
},

// Get radius length offset of the dataset in relation to the visible datasets weights. This allows determining the inner and outer radius correctly
getRingWeightedOffset: function(datasetIndex) {
benmccann marked this conversation as resolved.
Show resolved Hide resolved
var ringWeightOffset = 0;

for (var j = 0; j < datasetIndex; ++j) {
benmccann marked this conversation as resolved.
Show resolved Hide resolved
if (this.chart.isDatasetVisible(j)) {
ringWeightOffset += this.getRingWeight(j);
}
}

return ringWeightOffset;
},

getRingWeight: function(dataSetIndex) {
var ringWeight = this.chart.data.datasets[dataSetIndex].weight;
if (!ringWeight) {
ringWeight = 1;
}
return ringWeight;
benmccann marked this conversation as resolved.
Show resolved Hide resolved
},

getVisibleDatasetTotalWeight: function() {
var totalWeight = 0;
benmccann marked this conversation as resolved.
Show resolved Hide resolved
for (var i = 0, ilen = this.chart.data.datasets.length; i < ilen; ++i) {
if (this.chart.isDatasetVisible(i)) {
totalWeight += this.getRingWeight(i);
}
}
return totalWeight;
},

update: function(reset) {
var me = this;
var chart = me.chart;
Expand All @@ -151,6 +182,7 @@ module.exports = DatasetController.extend({
var arcs = meta.data;
var cutoutPercentage = opts.cutoutPercentage;
var circumference = opts.circumference;
var chartWeight = chart.data.datasets[me.index].weight ? chart.data.datasets[me.index].weight : 1;
benmccann marked this conversation as resolved.
Show resolved Hide resolved
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 @@ -179,14 +211,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.getVisibleDatasetTotalWeight();
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.getRingWeightedOffset(me.index));
me.innerRadius = Math.max(me.outerRadius - (chart.radiusLength * chartWeight), 0);
Vincent-Ip marked this conversation as resolved.
Show resolved Hide resolved

for (i = 0, ilen = arcs.length; i < ilen; ++i) {
me.updateElement(arcs[i], i, reset);
Expand Down