Design for simple zoom bar

[designertyler]

This issue tracks the requirements and design specs for a simple version of the zoom bar.

The simple zoom allows the user to scope the start and endpoints of the chart from a larger range of data. This simple zoom bar is intended to be used for area, bubble charts, and an alternative to the zoom bar with thumbnail shown here #380

Final specs

[designertyler]

@jeanservaas

Here are a few explorations for a simplified zoom control. 1 & 2 following closely to the original style of the specs found in #380 and 3 & 4 follow closely to Carbon's slider component. I'm not sure either is a stand-out but would like your feedback on any new directions to pursue. I'll be looking at more data viz zoom control examples next and adding those explorations here

[designertyler]

Proposed behavior and states

[jeanservaas]

@designertyler

I actually like sticking closer to Shixie's design... but just removing the second chart since it's causing rendering issues/implementation problems and is not functional for certain charts or for the y-axis.

So I prefer these explorations below:

To me the default range view. in the option that looks like the Carbon slider is just not intuitive at all for a chart zoom and the balls feel a little clunky to me.

[theiliad]

@designertyler

I actually like sticking closer to Shixie's design... but just removing the second chart since it's causing rendering issues/implementation problems and is not functional for certain charts or for the y-axis.

So I prefer these explorations below:

To me the default range view. in the option that looks like the Carbon slider is just not intuitive at all for a chart zoom and the balls feel a little clunky to me.

the circular handles seem like a closer match to me to the Carbon slider
https://www.carbondesignsystem.com/components/slider/usage/

if we go with the rectangular handles, are we able to try having them not stick out of the zoombar rectangle?

[theiliad]

and @designertyler could you also highlight use cases where the zoombar would show up on the left axis? would like to see how we'll fit it in with the axis title and labels

[jeanservaas]

1. Are we ever going to be able to implement a version of the zoom that functions like this? For situations where is is appropiate? This is the one that @mjabbink prefers.

I notice Material has two Chart Range filters, a simple one and a more complex one. If we are, we'd definitely want the two to have the same rectangular geometry.

2. Most all sliders have those round handles... that doesn't mean it's a convention in charting for zoom and pan. To use Material as an example again... their slider looks like ours, but they do not use it for their Chart Range filter. I also don't think that a slight protrusion from the zoom bar will interfere with anything.

@designertyler I know you've been looking at am charts but there are other implementations out there that are pretty simple and sleek... if we wanted to get the bar closer to the axis even something like this design could work.

https://docs.telerik.com/devtools/wpf/controls/radchartview/features/behaviors/panzoom

https://docs.devexpress.com/WindowsForms/2954/controls-and-libraries/chart-control/end-user-features/basic-end-users-interaction/zoom-and-scroll-in-2D-xy-charts

[designertyler]

Final specs have been added to this issue's original comment at the top

[theiliad]

Thanks Tyler, great work!

[mjabbink]

@designertyler That last sample your found is a nice one. How does a user get the magnafying icon to zoom?