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

Jump to bottom

angles option for polar chart #6472

Closed
wants to merge 5 commits into from
Closed

angles option for polar chart #6472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2803a05
angles option for polar chart
mp3000mp Aug 15, 2019
facfc69
trailing spaces
mp3000mp Aug 15, 2019
c77c9c3
Fix bug with hidden data
mp3000mp Aug 17, 2019
1fcc9ad
Reduces cognitive complexity
mp3000mp Aug 17, 2019
ce1c4fd
Climate
mp3000mp Aug 17, 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/polar.md
View file
Open in desktop
Expand Up @@ -96,6 +96,7 @@ These are the customisation options specific to Polar Area charts. These options
| `startAngle` | `number` | `-0.5 * Math.PI` | Starting angle to draw arcs for the first item in a dataset.
| `animation.animateRotate` | `boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
| `animation.animateScale` | `boolean` | `true` | If true, will animate scaling the chart from the center outwards.
| `angles` | `array` | `(2*Math.PI)/serieCount` | Computed angles to draw each item arc.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think serie is a word. It also doesn't match the usual terminology. We have datasets which contain data points

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oups sorry, you're right, this is actualy the French word.

I suggest to put [] as default value and explain the behavior more in details in the description column with the following :

  • If this option is not set, polar circumference = 2 * PI and each arc will be (2 * PI) / (visible datasets count).
  • Otherwise, polar circumference = sum(options.angles).
    • If options.angles.length < (visible datasets count)
      • Undefined angles will be set to (2 * PI) / (visible datasets count).
      • Defined angles will be recomputed to fill proportionaly the remaining polar circumference ((polar circumference) - sum(undefined angles)).
    • If options.angles.length > (visite datasets count)
      • Angles will be recomputed proportionaly to fill the entire polar circumference.

What do you think ?


## Default Options

Expand Down
55 changes: 45 additions & 10 deletions src/controllers/controller.polarArea.js
View file
Open in desktop
Expand Up @@ -131,15 +131,17 @@ module.exports = DatasetController.extend({
var starts = me._starts = [];
var angles = me._angles = [];
var arcs = meta.data;
var i, ilen, angle;
var i, ilen, angle, convertedAngles;
var optionsAngles = me.chart.options.angles || [];

me._updateRadius();

meta.count = me.countVisibleElements();
convertedAngles = me._convertAngles(optionsAngles);

for (i = 0, ilen = dataset.data.length; i < ilen; i++) {
starts[i] = start;
angle = me._computeAngle(i);
angle = me._computeAngle(i, convertedAngles[i]);
angles[i] = angle;
start += angle;
}
Expand Down Expand Up @@ -251,15 +253,9 @@ module.exports = DatasetController.extend({
/**
* @private
*/
_computeAngle: function(index) {
_computeAngle: function(index, angle) {
var me = this;
var count = this.getMeta().count;
var dataset = me.getDataset();
var meta = me.getMeta();

if (isNaN(dataset.data[index]) || meta.data[index].hidden) {
return 0;
}

// Scriptable options
var context = {
Expand All @@ -271,7 +267,46 @@ module.exports = DatasetController.extend({

return resolve([
me.chart.options.elements.arc.angle,
(2 * Math.PI) / count
angle
], context, index);
},

/**
* if no angles options, circumference = 2*PI and each arc will be (2*PI)/arcCount
* if angles options, circumference = sum(angles)
* if angles.length < arcCount => undefined angles will be set to (2*PI)/arcCount,
* defined angles will be recompute to fill circumference-sum(undefinedAngles) stay proportional to original values
* if angles.length > arcCount => circumference remains the same and existing angles will be recompute to stay proportional to original values
* @private
*/
_convertAngles: function(angles) {
var me = this;
var dataset = me.getDataset();
var meta = me.getMeta();
var angle, ratio;
var initialCircumference = 0;
var convertedAngles = [];
var circumference = angles.length ? angles.reduce(function(a, b) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if the sum of the angles is > 2*pi?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. If the sum of the angles is > 2pi, the draw is more than one complete circle (you can easily try it here : https://jsfiddle.net/wanvfqbr/ ).
    This does not chock me as it is the same behavior if sum of the angles is < 2    pi (draw is less than one complete circle) and people may find this usefull.
    Tell me if you would expect another behavior.

  2. How much test do you think we need ? I'd suggest four cases :

  • angles option is not set
  • options.angles.length = (visible datasets count)
  • options.angles.length < (visible datasets count)
  • options.angles.length > (visible datasets count)

return a + b;
}) : Math.PI * 2;
var defaultAngle = circumference / dataset.data.length;

meta.data.forEach(function(element, index) {
if (isNaN(dataset.data[index]) || element.hidden) {
angle = 0;
} else if (index >= angles.length) {
angle = defaultAngle;
} else {
angle = angles[index];
}
initialCircumference += angle;
convertedAngles.push(angle);
});
ratio = circumference / initialCircumference;

return convertedAngles.map(function(item) {
return item * ratio;
});
}

});