billboard.js
billboard.js copied to clipboard
Reset Subchart Zoom
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.
I don't know the best way.
chart.zoom.enable(true);
chart.zoom([0.5, 0.5]);
@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.
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:
@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
Force to redraw.
Unzoom zoomed area
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.
@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
@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?
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.
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.
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.