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(area_charts): correctly represent baseline with negative data points #896

Merged
merged 3 commits into from
Nov 11, 2020

Conversation

markov00
Copy link
Member

@markov00 markov00 commented Nov 6, 2020

Summary

This PR fixes the rendering issue when using negative values in area charts. The correct approach
is to draw the area with a zero baseline (or dummy one baseline for log y scale). This correctly
represent the sense of area for a single data point.

Screenshot 2020-11-06 at 19 28 55

Screenshot 2020-11-06 at 19 28 47

fix #893

Note for reviewers

It's easier to check the changes if you review them by commit:

  • the first commit is an initial code cleanup to consider the correct baseline for negative values
  • the second one moves the renderArea, renderPoints, renderLine etc methods into their respective files to reduce the size of the utils.ts file and increase readability
  • the third commit fix and refactor the areas of uncertainty for lines/area/points when using log scales

Another thing to notice: the change related to the log scale also changed the way we render areas in the [-1,1] range. I've adopted a different strategy that removes areas/points from showing in that range (possibly adjustable via theme/configuration in a future PR). This adjustment will require the implementation of the #63 request.

Checklist

  • Proper documentation or storybook story was added for features that require explanation or tutorials
  • Unit tests were updated or added to match the most common scenarios

This commit fix the rendering issue when using negative values in area charts. The correct approach
is to draw the area with a zero baseline (or dummy one baseline for log y scale). This correctly
represent the sense of area for a single data point.

fix elastic#893
@codecov-io
Copy link

codecov-io commented Nov 6, 2020

Codecov Report

Merging #896 (eca4136) into master (d288208) will decrease coverage by 0.00%.
The diff coverage is 89.08%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #896      +/-   ##
==========================================
- Coverage   69.65%   69.65%   -0.01%     
==========================================
  Files         335      340       +5     
  Lines       10905    10950      +45     
  Branches     2269     2276       +7     
==========================================
+ Hits         7596     7627      +31     
- Misses       3295     3309      +14     
  Partials       14       14              
Flag Coverage Δ
unittests 69.65% <89.08%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/scales/scale_continuous.ts 95.97% <77.77%> (-1.92%) ⬇️
src/chart_types/xy_chart/rendering/bars.ts 82.47% <82.47%> (ø)
src/chart_types/xy_chart/rendering/points.ts 89.18% <89.18%> (ø)
src/chart_types/xy_chart/rendering/area.ts 91.17% <91.17%> (ø)
src/chart_types/xy_chart/rendering/utils.ts 94.38% <94.38%> (ø)
src/chart_types/xy_chart/rendering/line.ts 94.73% <94.73%> (ø)
src/chart_types/xy_chart/renderer/canvas/areas.ts 30.76% <100.00%> (ø)
src/chart_types/xy_chart/renderer/canvas/bars.ts 100.00% <100.00%> (ø)
...rc/chart_types/xy_chart/renderer/canvas/bubbles.ts 68.75% <100.00%> (ø)
src/chart_types/xy_chart/renderer/canvas/lines.ts 40.00% <100.00%> (ø)
... and 11 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d288208...eca4136. Read the comment docs.

@markov00 markov00 force-pushed the 2020_11_06-fix_negative_areas branch from 41f2a5e to 8cef28f Compare November 10, 2020 13:48
@markov00 markov00 force-pushed the 2020_11_06-fix_negative_areas branch from aa63501 to eca4136 Compare November 10, 2020 14:45
@markov00 markov00 marked this pull request as ready for review November 10, 2020 15:28
Copy link
Collaborator

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

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

Code changes LGTM. Tested locally and everything functions as expected.

Why does the band disappear when using log scale? 👇

Screen Recording 2020-11-10 at 10 18 43 AM

Also, I noticed that for positive and negative values the log scale just shows the positive values. Is there a way to logically/correctly show positive and negative values when using log scale? Like the symmetric log scale, @monfera was talking about?

Comment on lines 714 to 717
if (isLogScale) {
return yScale.scaleOrThrow(1);
}
return yScale.scaleOrThrow(0);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Would these just return a consistent pixel value like 0 rather than scaling the values?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Also, the 1 should be LOG_MIN_ABS_DOMAIN right?

Copy link
Member Author

Choose a reason for hiding this comment

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

already solved on eca4136

src/chart_types/xy_chart/rendering/bars.ts Show resolved Hide resolved
src/chart_types/xy_chart/rendering/utils.ts Show resolved Hide resolved
src/chart_types/xy_chart/rendering/line.ts Outdated Show resolved Hide resolved
src/chart_types/xy_chart/rendering/utils.ts Show resolved Hide resolved
src/mocks/series/utils.ts Show resolved Hide resolved
src/scales/scale_continuous.ts Show resolved Hide resolved
Copy link
Contributor

@rshen91 rshen91 left a comment

Choose a reason for hiding this comment

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

Sorry about the delay in reviewing! These changes look great to me - I appreciate the additional stories and clarity in reducing file sizes.

@markov00
Copy link
Member Author

Why does the band disappear when using log scale? 👇

Screen Recording 2020-11-10 at 10 18 43 AM

This happens because the lowest point is below the threshold of 1 (currently 0.9). In this case, the band is not defined and is removed from the path

@markov00 markov00 merged commit d1243f1 into elastic:master Nov 11, 2020
@markov00 markov00 deleted the 2020_11_06-fix_negative_areas branch November 11, 2020 09:18
markov00 pushed a commit that referenced this pull request Nov 24, 2020
# [24.1.0](v24.0.0...v24.1.0) (2020-11-24)

### Bug Fixes

* **area_charts:** correctly represent baseline with negative data points ([#896](#896)) ([d1243f1](d1243f1))
* **legend:** legend sizes with ordinal data ([#867](#867)) ([7559e0d](7559e0d)), closes [#811](#811)
* render orphan data points on lines and areas ([#900](#900)) ([0be282b](0be282b)), closes [#783](#783)
* specs swaps correctly reflected in state ([#901](#901)) ([7fba882](7fba882))

### Features

* **legend:** allow legend text to be copyable ([#877](#877)) ([9cd3459](9cd3459)), closes [#710](#710)
* allow clearing series colors from memory ([#899](#899)) ([ab1af38](ab1af38))
* merge series domain with the domain of another group ([#912](#912)) ([325b013](325b013))
* small multiples for XY charts (alpha) ([#793](#793)) ([d288208](d288208)), closes [#500](#500) [#500](#500)
@markov00
Copy link
Member Author

🎉 This PR is included in version 24.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Nov 24, 2020
@th0ger th0ger mentioned this pull request Nov 25, 2020
3 tasks
markov00 added a commit that referenced this pull request Jun 3, 2021
Domain bounds should be used in the sense of zooming in/out with a viewport on the chart. A regression of this behavior slipped through due to a [PR](#896) causing data to be filtered out when applying a custom domain, removing data points from areas and lines. The right behavior is now restored.

fix #1129
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
# [24.1.0](elastic/elastic-charts@v24.0.0...v24.1.0) (2020-11-24)

### Bug Fixes

* **area_charts:** correctly represent baseline with negative data points ([opensearch-project#896](elastic/elastic-charts#896)) ([b622fda](elastic/elastic-charts@b622fda))
* **legend:** legend sizes with ordinal data ([opensearch-project#867](elastic/elastic-charts#867)) ([74bcbad](elastic/elastic-charts@74bcbad)), closes [opensearch-project#811](elastic/elastic-charts#811)
* render orphan data points on lines and areas ([opensearch-project#900](elastic/elastic-charts#900)) ([3e2c739](elastic/elastic-charts@3e2c739)), closes [opensearch-project#783](elastic/elastic-charts#783)
* specs swaps correctly reflected in state ([opensearch-project#901](elastic/elastic-charts#901)) ([a94347f](elastic/elastic-charts@a94347f))

### Features

* **legend:** allow legend text to be copyable ([opensearch-project#877](elastic/elastic-charts#877)) ([21a96d3](elastic/elastic-charts@21a96d3)), closes [opensearch-project#710](elastic/elastic-charts#710)
* allow clearing series colors from memory ([opensearch-project#899](elastic/elastic-charts#899)) ([e97f4ab](elastic/elastic-charts@e97f4ab))
* merge series domain with the domain of another group ([opensearch-project#912](elastic/elastic-charts#912)) ([716ad5a](elastic/elastic-charts@716ad5a))
* small multiples for XY charts (alpha) ([opensearch-project#793](elastic/elastic-charts#793)) ([3b88e1c](elastic/elastic-charts@3b88e1c)), closes [opensearch-project#500](elastic/elastic-charts#500) [opensearch-project#500](elastic/elastic-charts#500)
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
…#1181)

Domain bounds should be used in the sense of zooming in/out with a viewport on the chart. A regression of this behavior slipped through due to a [PR](elastic/elastic-charts#896) causing data to be filtered out when applying a custom domain, removing data points from areas and lines. The right behavior is now restored.

fix opensearch-project#1129
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released Issue released publicly
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Negative areas doesn't respect the zero baseline
4 participants