Add zoom and panning to insights property page

[haneslinger]

Any background context you want to provide?

What's this PR do?

How should this be manually tested?

What are the relevant tickets?

Screenshots (if appropriate)

[kflemin]

@haneslinger, I can zoom but I can't pan...what's the command/motion for that?

[haneslinger]

It's a hold and drag motion.... I find the library a little crunchy. can you do it in this demo? https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/basic.html

[kflemin]

@haneslinger, maybe it's because I have a trackpad... definitely a little crunchy but that's what they have in their library I guess? there's no way to "draw a rectangle region" and have the chart zoom to only show that region?

[RDmitchell]

Using my mouse I am able to zoom and pan.

The buttons (in the chart demo) are not very intuitive but maybe we can improve on that.

In general, I think this feature looks good, at least from the demo linked above.

[haneslinger]

@haneslinger, maybe it's because I have a trackpad... definitely a little crunchy but that's what they have in their library I guess? there's no way to "draw a rectangle region" and have the chart zoom to only show that region?

I don't think there is with this plug in. 😞 there's with this one, but it's less popular... would you like me to try it out?

[anchapin]

@haneslinger, maybe it's because I have a trackpad... definitely a little crunchy but that's what they have in their library I guess? there's no way to "draw a rectangle region" and have the chart zoom to only show that region?

I don't think there is with this plug in. 😞 there's with this one, but it's less popular... would you like me to try it out?

I do like the functionality in this other plug in with being able to draw a region to zoom and have the option to select points by drawing a rectangle (could be used to manually select points and add labels).

[kflemin]

I like it too! To me it's much easier to use and less jumpy.

[haneslinger]

cool cool, I'll swap it out

[haneslinger]

oh no! despite claiming to be on npm, I don't think it is!

heslinge at 11:57:56 in ~/Repos/seed/vendors (develop) (seed)
🌟 npm install @jjppof/chartjs-plugin-zoom-pan-select
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@jjppof%2fchartjs-plugin-zoom-pan-select - Not found
npm ERR! 404
npm ERR! 404  '@jjppof/chartjs-plugin-zoom-pan-select@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/heslinge/.npm/_logs/2023-03-02T18_57_58_385Z-debug.log

what do we do?

[kflemin]

@haneslinger can you install it from github just to try it out? it might not be kept up-to-date I guess 😬

[axelstudios]

@haneslinger Is this PR finished and ready to merge? It's not clear if there are any changes planned for the zoom plugin.

This appears to work unless the data boundaries are below the minRange: 50 set by this PR, in which case zooming gets very weird... A lower minRange appears to fix it.

Also, the grid lines are pretty screwy:

[haneslinger]

Yeah, it's real screwy like, but it's the best plugin we've got. 🤷 Idk if we want to push it or not.