pollen calendar - zoom & pan

arnard76 commented 3 months ago

Task

261

Solution

https://github.com/uoa-compsci399-s1-2024/capstone-project-2024-s1-team-15/assets/78939786/75679ad0-5715-4f88-8218-302fea23baa8

can zoom (the x-axis) with mouse wheel or trackpad pinch
can pan (the x-axis) with drag (click & drag)
only zooms within the date filter range. NOTE: date filter doesn't update when zooming in and out hopefully, that isn't an issue?

Code changes

uses the chartjs-plugin-zoom
- the plugin can't be imported on server i.e. import zoomPlugin from "chartjs-plugin-zoom" has to be on client so MultiChart component is imported using next's dynamic i am not entirely sure how this function (next/dynamic()) works .... yet 😁
added zoom & pan options to the MultiChart component

sharukyen commented 3 months ago

The feature seems quite smooth but can be possibly missed, would some text noting or some indication (like a small icon) of this feature be helpful for ux?

arnard76 commented 3 months ago

The feature seems quite smooth but can be possibly missed, would some text noting or some indication (like a small icon) of this feature be helpful for ux?

I don't mind if they miss the feature too much. More important the the feature is there if they try to interact with the graph.

But I could add a 'reset zoom' button, similar to this example: https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/usage.html

Then user might realize zoom is available.

arnard76 commented 3 months ago

Ill merge this with no indicator that there is zoom/pan feature on the chart.

Happy to revisit if there is any issues.

uoa-compsci399-s1-2024 / capstone-project-2024-s1-team-15