Skip to content

refactor(axis/grid): render grid lines in separate layer from axis#30

Merged
emmacunningham merged 10 commits intoelastic:masterfrom
emmacunningham:refactor/axis-grid
Feb 6, 2019
Merged

refactor(axis/grid): render grid lines in separate layer from axis#30
emmacunningham merged 10 commits intoelastic:masterfrom
emmacunningham:refactor/axis-grid

Conversation

@emmacunningham
Copy link
Copy Markdown
Contributor

addresses #16

Previously, we were rendering the grid lines relative to each axis in the same layer as the axis. Now, each axis' grid lines are rendered in a separate layer just for grid lines and the coordinates for the lines are relative to the chart (instead of the axis). This simplifies much of the positioning logic and also gives us the option to draw anything we might want onto the grid layer without affect the axes.

Also, in combination with PR #29, this fixes the issues with rendering grid lines for multiple axes with the same position (there was both overflow and spacing issues previously).

Since we render the grid layer first, the lines render behind the chart elements:

image

Copy link
Copy Markdown
Collaborator

@markov00 markov00 left a comment

Choose a reason for hiding this comment

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

Code overall looks good. I've added a minor comment to address.

The grid lines should appear beneath the chart so we need to render the grid lines first.
Previously, grid lines were render as part of the axis; moving them out allows us to independently
control the grid lines layer.

addresses elastic#16
Now that we're rendering grid lines in their own layer, we can draw them relative to the chart
itself, which allows for much simpler logic around computing the line positions.

addresses elastic#16
Copy link
Copy Markdown
Collaborator

@markov00 markov00 left a comment

Choose a reason for hiding this comment

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

Code LGTM. Tested locally

@markov00
Copy link
Copy Markdown
Collaborator

markov00 commented Feb 5, 2019

I've only a minor stylistic comment:
chart elements are on a layer, clipped by the dimension.
Axis are on their own layer, not clipped, this means that we will see half line stroke on top and on bottom lines. @emmacunningham can we add clipping also on grids?
We also may need to add 1px stroke on rects

@emmacunningham
Copy link
Copy Markdown
Contributor Author

Added clipping props to the Grid layer:

image

@emmacunningham emmacunningham merged commit 21867ca into elastic:master Feb 6, 2019
@emmacunningham emmacunningham deleted the refactor/axis-grid branch March 7, 2019 16:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants