Reset Subchart Zoom

[bryantserres]

Using a line chart with a subchart, what is the best way to reset the zoom of the chart after making a selection within the subchart via an external button?

I have tried with the likes of .unzoom() and .flush() with no result.

[watnab]

I don't know the best way.

chart.zoom.enable(true);
chart.zoom([0.5, 0.5]);

[netil]

@serres2, well there're two ways for now:

• Dispatch programmatically mouse event for subchart selection area

function resetSubchart(inst) {
	const el = inst.$.svg.select(".overlay").node();
	const evtOption = {
		view: window,
		bubbles: true,
		cancelable: true,
		clientX: 0,
		clientY: 0
	};

	el.dispatchEvent(new MouseEvent("mousedown", evtOption));
	el.dispatchEvent(new MouseEvent("mouseup", evtOption));
}

const chart = bb.generate(...);

// do subchart selection
// calling will reset
resetSubchart(chart);

• Call internal private method (not recommended)

chart.$.svg.select(".bb-brush").call(chart.internal.brush.move);

I'll considering to add public API for this.

[bryantserres]

This works as expected when no tooltip has been selected (touch device).

When a tooltip has been selected and a subchart selection is made, the tooltip and/or x-grid focus remain visible.

This could prove valuable both with an external trigger or when a new brush occurs on the subchart itself.

Is there also a way to dismiss all open tooltips and remove the x-grid focus when a new brush event occurs?

Example:

[netil]

@serres2, improved to reset zoom state when .flush() is called. Try the @next release and the stable will be released soon.

npm i billboard.js@next

[watnab]

.flush

Force to redraw.

.unzoom

Unzoom zoomed area

.tooltip․hide

Hide tooltip

---

https://naver.github.io/billboard.js/release/latest/doc/Chart_api_zoom.ts.html#line178

	unzoom(): void {
		if ($$.scale.zoom) {
			config.subchart_show ?
				$$.brush.getSelection().call($$.brush.move, null) :

$$.scale.zoom may be falsy when the chart type is subchart even if the chart is zoomed.

[netil]

@watnab, the recommendations is not to use zoom & subchart together and the code needs to be organized.

Also, from the v2 modularization, .unzoom() can be used when zoom module is imported.

• https://github.com/naver/billboard.js/blob/master/src/config/resolver/interaction.ts#L45

[watnab]

@netil

the recommendations is not to use zoom & subchart together and the code needs to be organized.

It may not be required "Dragging main chart" & "Dragging sub chart" work together. However I think it seems to make sense "zoom api" & "sub chart" work together. However I never insist my opinion must be correct because I don't know this library well.

In #1451 , is it wrong way to use zoom api with sub chart?

[netil]

is it wrong way to use zoom api with sub chart?

well, in a general perspective they should work together, but doing that, it needs both functionalities & interactiontions work seamlessly. (ex. If zoomed by zoom API, the subchart selection area should reflect that & viceversa).

Realistically, there're 2 issues:

• Make to work zoom & subchart together more tightly.
• Zoom and subchart can be imported and used separately. If "reset" works from .unzoom(), it needs to import zoom module even thought isn't necessary.

[watnab]

I never insist they must work together. I just mis(?)understood they mostly work together.

When zoom.enabled option is set to true, it seems If zoomed by zoom API, the subchart selection area should reflect that & viceversa.

https://jsfiddle.net/wyh1tcnr/

However unzoom API seems not to work with subchart as serres2 said even though the api contains internal private method call that netil mentioned because if-condition prevents the method invocation when subchart works.

When zoom.enabled is false, set zoom seems not to work.

[netil]

I never insist they must work together.

It doesn't mean that you are. Is just, need to be make sure the reliability of the features. I'll be considering how to organize both, but for now .flush() will reset zoom state for zoom & subchart.

BTW, thanks for the demo.