Zoom bar

[hlyang397]

Updates

For #380

• add new ZoomBar component

#698

Demo screenshot or recording

---

Review checklist (for reviewers only)

• Demos all features
• Documented/annotated
• Matches UI/UX specs
• Meets the code style guide
• Accessible
• Mobile first (responsive)
• RTL support (bidirectional text)
• Performant (limited bloat)

[theiliad]

converting this PR into a draft

[theiliad]

Looking great :hlyang397 💯
One thing I noticed is that the zooming doesn't happen continuously (as you're moving the handles), that is probably a key aspect of the experience to have the graph update in real-time.

[hlyang397]

Looking great :hlyang397 💯
One thing I noticed is that the zooming doesn't happen continuously (as you're moving the handles), that is probably a key aspect of the experience to have the graph update in real-time.

@theiliad Thanks for your review.
We have many new commits in past few days, all comments are welcome, thanks.

[theiliad]

Hi, looks great! 💯

Couple of pieces of feedback:

1. we should enable the feature in more charts just to validate the functionality and make sure that it works everywhere

2. I'm seeing a bug sometimes where the axes don't resize properly
   

3. as soon as I move the handles on both ends, they resize and become taller, they should probably stay the same height
   

4. Not sure if this is a bug but when I go any further to the left from this point, the graph takes no changes
   

5. The x-axis labels seem to be positioned incorrectly in the initial render, and once you interact with the chart they move back into their place
   

6. Looks like the handle is off by a few pixels
   

7. After the initial render if you try to pan, the graph would zoom in, axis would update and handles would slightly move
   

[theiliad]

question, do we have a way of setting the range of the zoomed area through options? e.g. if you were rendering a graph with many points and wanted it initially to zoom into an area and only show 10-20 points?

[theiliad]

TODOs that I can see so far:

• click&drag behavior on the graph should trigger panning not zooming

• shift-clicking should result in zooming

• handle toolbars aren't in yet

• we need the non-highlighted areas in the zoom-bar to be darker in dark themes and lighter in light themes (I'd just draw 2 rectangles over both sides)

• addSpaceOnEdges is doing nothing now when the zoom bar shows up

• chart renders incorrectly initially and once you interact with the zoom bar it re-renders correctly
  

• tooltips are no longer working on the graphs

• handles have the wrong height
  

• axis sometimes renders incorrectly
  

[theiliad]

@scottdickerson

[hlyang397]

@theiliad,

Thanks for your review comment.

click&drag behavior on the graph should trigger panning not zooming
I think zooming makes more sense than panning when user selects an area.

Are you talking about the dragging event on the graph ? We didn't implement it yet.

shift-clicking should result in zooming
handle toolbars aren't in yet

We will include these features in next phase.

handles have the wrong height

The handle height is overwritten by d3.js brush library. I would put this as low priority before I can find the solution.

For rest problems, I have created issues in our tool.
Thanks.

[hlyang397]

@theiliad,
Please help to review the latest changes.

There are some issues still in progress, and may need more discussion.

1. We think click & drag on the graph should trigger zooming not panning.
2. Space on edges makes sense in some charts (ex: bar, bubble), but looks weird in the others(ex: line).
   With zoombar enabled, we may need to handle them accordingly.
3. Tooltips are covered by the chart brush. Waiting for further investigation.
4. Handle toolbar and shift-clicking zooming will be included in next phase (PR).

All comments are welcome, thanks.

[theiliad]

@theiliad,
Please help to review the latest changes.

There are some issues still in progress, and may need more discussion.

1. We think click & drag on the graph should trigger zooming not panning.
   @designertyler

2. Space on edges makes sense in some charts (ex: bar, bubble), but looks weird in the others(ex: line).
   With zoombar enabled, we may need to handle them accordingly.
   we can't override what the user defines in options, if they add space on the edges, we need to show it.

3. Tooltips are covered by the chart brush. Waiting for further investigation.
   

would something like:

react.overlay:hover {
	pointer-events: none;
}

work?

we've gotta find a way to show tooltips on hover

4. Handle toolbar and shift-clicking zooming will be included in next phase (PR).
   👍

All comments are welcome, thanks.

[hlyang397]

@theiliad ,
Thanks for your comments.
2. That makes sense to me. I will try to make the addSpaceOnEdges option working with zoombar.
3. Setting pointer-events: none; breaks the brush. I fix that by moving brush component layer to back in this commit.
60990b9

[theiliad]

@theiliad ,
Thanks for your comments.
2. That makes sense to me. I will try to make the addSpaceOnEdges option working with zoombar.
3. Setting pointer-events: none; breaks the brush. I fix that by moving brush component layer to back in this commit.
60990b9

So the singular tooltip works now but not the multiline tooltip. I think we might have to get rid of the brush overlay and release events such as grid-backdrop-drag etc... and show the zoom area by catching that

[hlyang397]

@theiliad ,

So the singular tooltip works now but not the multiline tooltip. I think we might have to get rid of the brush overlay and release events such as grid-backdrop-drag etc... and show the zoom area by catching that

Could you give me an example of multiline tooltip? Thanks.

[theiliad]

Could you give me an example of multiline tooltip? Thanks.

https://carbon-design-system.github.io/carbon-charts/?path=/story/line--line-time-series

[natashadecoste]

right now the rect.zoom-bg is going outside the chart container