techniq
[BrushContext] Chart brush xDomain isn't reactive
Hi!
See reproduction of the issue here.
When xDomain of the chart is modified after it is mounted, BrushContext of the chart doesn't update its own ogXDomain variable. See the lines of implementation here. As ogXDomain is initialized by const ogXDomain = xDomain, it captures the initial value but loses reactivity and doesn't react to subsequent xDomain changes. Svelte doc almost about this.
That means that when the user resets brush, it resets domain to the one at the moment of mounting, which doesn't react to changes in chart's xDomain (see lines in reset() method)
One of possible workarounds is to wrap the entire chart in {#key xDomain} ... {/key}, which forces remount of the component on each xDomain change. But in case where user selects the period of data to show, all animations will re-trigger on remount (draw and all the others), which hurts UX. If this is actually desirable behaviour, I think it's worth adding a few lines about this in documentation. Thank you!
Hey @ntainy, thanks for the report. I've experience this similar issue in my own apps (I store the brushed range in a shared state across pages and thus when charts on a new page are initiated, they use this reduced range as their "reset" value which isn't optimal).
My workaround is having a "reset" button that just sets it to null (but it's not great as a click on the chart always resets to the "configured" domain range).
It's a little tricky as we can't always just reset to say [null, null] as you might want a defined range set. I need to think on this more, but it definitely needs improved (among a few other thing in the Brush component such as band scale support). I've considered at least offering a way to hook into the reset and set it however you like.
