In-chart navigation with brush container

[jotak]

It can be seen in storybook: ChartWithLegend / "as scatter with dates and in-chart navigation"

It allows to zoom-in charts.

Part of kiali/kiali#1860

[mtho11]

@jotak this is a great feature!

[jotak]

thanks @mtho11 !

[israel-hdez]

How do you go back (zoom out)?

[jotak]

How do you go back (zoom out)?

At the moment, only by changing dates manually - this is not handled by the component itself.
Eventually we could consider using victory "zoom container" that allows zoom in/out with mouse wheel, but the problem is that it would conflict with page scrolling.

Or add zoom buttons similar to what we have on graph. Which also wouldn't be managed at this component level, it would be managed at the IstioMetrics / CustomMetrics level. Grafana does something similar:

I think as a first step we can consider zooming out is done by explicit date selection, and we follow-up with next tasks improving UX

[aljesusg]

Need a rebase, I am going to test this with the Jaeger integration but looks good @jotak nice :)

[jotak]

@aljesusg yes I will rebase,
but for the jaeger integration we will need to do this as a pre-requisite: kiali/kiali#2147
Because using this brush container means having custom time ranges, so it's necessary to do it as a first step.

[aljesusg]

Ok so LGFM I tested it in the storybook after rebase

[jotak]

rebased