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

Fix for issues #3917, #4380, #2966 - log scale with min: 0 #4913

Merged
merged 5 commits into from
Nov 10, 2017

Conversation

jcopperfield
Copy link
Contributor

@jcopperfield jcopperfield commented Nov 1, 2017

Fixes #3917: Logarithmic Scale Tick Bug for values of 0
Fixes #4380: LogLog plots are impossible (0, 0)
Fixes #2966: chart does not render if data contains value of 0 when using logarithmic scale

v2.7

  • doesn't correctly render: horizontal with min:0 (regular and reversed)
  • in case the significand digit of minNotZero is 1 or 2;
    however the value itself has more significand digits,
    the first tick is displayed outside the chart area or on top of the 0-tick.

Test for all bar plot possibilities (vertical/horizontal, with/without min: 0, default/reversed)
https://codepen.io/anon/pen/zPYMWz

Examples
pr-20171101-log-scale-min-0

 - issue chartjs#3917: Logarithmic Scale Tick Bug for values of 0
 - issue chartjs#4380: LogLog plots are impossible (0, 0)
 - issue chartjs#2966: chart does not render if data contains value of 0 when using logarithmic scale
pixel = me.left + (innerDimension / range * (helpers.log10(newVal) - helpers.log10(start)));
}
innerDimension = me.width;
pixel = (reverse)
Copy link
Contributor

Choose a reason for hiding this comment

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

Probably don't need to wrap reverse in parentheses. I also would probably put this on just one line given that it wouldn't be too long of a line

Copy link
Contributor Author

Choose a reason for hiding this comment

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

IMHO It improves readability.
I don't however want to start a discussion over code style, so if it is a must I will adjust the code as requested.

Copy link
Member

Choose a reason for hiding this comment

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

I agree with @benmccann, I would use parenthesis only when it's needed but also I'm not sure useless parenthesis are removed by the minifier.

About the "one line" style, it's not a "must" (else it would be enforced) but most of the code uses the a ? b : c form when a, b and c are short enough to make easier to read when on one line (which, I agree, is not necessary perceived the same by everyone).

@benmccann
Copy link
Contributor

See also #4688

@jcopperfield
Copy link
Contributor Author

I left a comment in PR #4688, since that code doesn't handle all use cases correctly.

chartjs-logarithmic-bar

Copy link
Member

@simonbrunel simonbrunel left a comment

Choose a reason for hiding this comment

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

Looks good, a few minor comments. I don't know this part of the code, so didn't verify the logic.

pixel = me.left + (innerDimension / range * (helpers.log10(newVal) - helpers.log10(start)));
}
innerDimension = me.width;
pixel = (reverse)
Copy link
Member

Choose a reason for hiding this comment

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

I agree with @benmccann, I would use parenthesis only when it's needed but also I'm not sure useless parenthesis are removed by the minifier.

About the "one line" style, it's not a "must" (else it would be enforced) but most of the code uses the a ? b : c form when a, b and c are short enough to make easier to read when on one line (which, I agree, is not necessary perceived the same by everyone).

var innerDimension, pixel, range;
var realValue = +me.getRightValue(value);
var reverse = me.options.ticks.reverse;
var lg = helpers.log10;
Copy link
Member

Choose a reason for hiding this comment

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

I would rename it log10 to make it more obvious when reading line 227


if (reverse) {
range = {
Copy link
Member

Choose a reason for hiding this comment

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

Can we avoid nesting start and end under range? (faster, lighter and easier to read)

start = me.end;
end = me.start;
sign = -1;

var exp = Math.floor(lg(me.minNotZero));
var significand = Math.floor(me.minNotZero / Math.pow(10, exp));
var firstTickValue = significand * Math.pow(10, exp);
var range = (reverse)
Copy link
Member

Choose a reason for hiding this comment

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

Same here, can we avoid nesting start and end under range?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The minifier reduces the code to r=d?l.right:l.left, removing the parenthesis.

Being dyslexic, I have trouble reading lines like the following from the function determineDataLimits:
me.min = me.min === null ? minVal : Math.min(me.min, minVal);
For however short, every time it takes me about 10 seconds to understand what it does.
Expanding it over multiple lines and adding parenthesis removes this readability obstacle.

me.min = (me.min === null)
    ? minVal
    : Math.min(me.min, minVal);

Still it is just a personal preference.

Copy link
Member

Choose a reason for hiding this comment

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

It's really minor and I don't have a strong opinion on which form is better (I usually go for the one which is consistent with the rest of the code if that makes sense).

Anyway, that wasn't my point for this line, but to flatten the useless range object:

var start = reverse ? me.end : me.start;
var end = reverse ? me.start : me.end;

@simonbrunel
Copy link
Member

Seems you "unlocked" a few unsupported cases, should we add new unit tests for them or the existing ones will be enough (i.e. empty charts in your screenshots)?

@simonbrunel simonbrunel added this to the Version 2.8 milestone Nov 6, 2017
…rPixel

Add: Tests for more extensive data containing zero values or
     axes configuration containing 'min: 0'-option.
@jcopperfield
Copy link
Contributor Author

The logarithmic tick generator creates different values for the first tick for data with 0 values and those without.

Example
For data with minimum value {x: 6.3, y: 6.3}, the first tick will be 1, however when for the same data the option min: 0 is set, the first tick will be 6.
The scale copies this behavior, however it might be better to be more consistent or to make it configurable.
pr-4913-first-tick

Copy link
Member

@simonbrunel simonbrunel left a comment

Choose a reason for hiding this comment

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

Looks good, I would simply fix the jsdoc block and prefix the private method with _, then I think it's good to be merged.

*
* @Private
* @param {Number} [value] - The minimum not zero value.
* @return {Number} [firstTickValue] - The first tick value.
Copy link
Member

Choose a reason for hiding this comment

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

Should be @param {Number} value - The ... since value is not optional (http://usejsdoc.org/tags-param.html)
Should be @return {Number} The first ..., without name and separator (http://usejsdoc.org/tags-returns.html)
Can you also move @private at the end and only lowercase, and I would remove the extra empty line:

/**
 * Returns the value of the first tick.
 * @param {Number} value - The minimum not zero value.
 * @return {Number} The first tick value.
 * @private
 */
_getFirstTickValue: function(value) {

Similar to https://github.com/chartjs/Chart.js/blob/master/src/core/core.plugin.js#L92

Also we started to prefix private members by _ (for example), though it's not yet consistent.

@simonbrunel simonbrunel merged commit 939756c into chartjs:master Nov 10, 2017
@simonbrunel
Copy link
Member

Thanks @jcopperfield

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants