billboard.js icon indicating copy to clipboard operation
billboard.js copied to clipboard

[Feature Request/Inquiry] Dynamic window/DragZoom-like behavior without redefining `data`

Open brianjenkins94 opened this issue 3 years ago • 6 comments

chart

Selecting 5 Days, 1 Month, 6 Months adjusts the window over the timeseries but also it adjusts the number of datapoints shown. There may be a term for this (point culling?). I'm still researching.

But I know I don't want to have to redefine data to accomplish this.

I would be open to writing a plugin for this if this kind of extensibility is exposed.

brianjenkins94 avatar Oct 14 '21 20:10 brianjenkins94

Can you be a bit more precise on what you are looking for?

adschm avatar Oct 15 '21 09:10 adschm

Yes. I want the window choosing widget (the thing that says 5 Days, 1 Month, 6 Months...) to be a part of the chart and when you select a particular window it should adjust the x-min/max (functionally the behavior of DragZoom).

But there's another thing that I noticed that happens when you adjust the window on these stock-type charts and that is it changes the number of data points that are shown. As if it's running some function over the dataset to, for example, only show every 5th day of data.

So that's more or less the feature request, here's the inquiry: Is there a way in the project currently to give all the data up front, and then to perform like a filter or apply a function over the data without redefining data?

Edit: This may be what I'm looking for: Options - billboard.js API doc. Is there a way to reset the filter?

brianjenkins94 avatar Oct 15 '21 11:10 brianjenkins94

<aside>

This is out of scope for this feature request/maybe even billboard.js, but for context I'm interested in supplementing the dataset with some statistical analysis, like so:

chart2

These kind of metrics would dynamically recalculate on window change.

So if there's any documentation or examples on how to manipulate the data from within billboard.js in some sort of restorable/resettable/immutable way, I'd be interested in that.

</aside>

brianjenkins94 avatar Oct 15 '21 12:10 brianjenkins94

It certainly seems like what I want would fit into a plugin. I'm just not sure I understand well enough what a plugin has access to and how to access it.

Can plugins manipulate the original options object? Before everything else that happens during initialization?

Can they filter/unfilter the data and trigger re-renders?

This helped a bit, but I'll need to tinker with it to get the answers I'm looking for:

https://github.com/naver/billboard.js/wiki/Plugin-Interface

Is there any more documentation on this?

brianjenkins94 avatar Oct 17 '21 15:10 brianjenkins94

What in ChartInternal is safe to interact with?

Screen Shot 2021-10-17 at 6 09 18 PM

Just api?

config and data also look like they could be useful but editing them directly probably wouldn't trigger a re-render.

brianjenkins94 avatar Oct 24 '21 19:10 brianjenkins94

So a plugin doesn't actually have access to anything that isn't already available via the API.

Cool, so now I just need to figure out how to augment the chart with a button or something.

Is it worth using <foreignObject> here for positioning/interactivity? Or is there some other preferred way of adding basic interactivity to SVG elements?

(Kinda surprised I'm not seeing much in the way of SVG layout engines as an alternative to positioning using HTML/CSS.)

Definitely seems like inserting HTML elements in and around the chart is going to be better than anything I could draw on the SVG and give UI element-like interactivity.

Looks like all the examples I provided do exactly that.

brianjenkins94 avatar Nov 06 '21 03:11 brianjenkins94