Zooming on the rotations page

[woodbri]

Kelly Mulville write:

I like seeing this digital grazing chart looking more like the paper many of us have been using for years. Along that line (but not yet a priority) I'm wondering if it will be possible to zoom in on a week or month and see greater detail. The example grazing days you have in this chart are relatively long and are more often 1-3 days. That type of detail might be a little tough at the current scale but could be much clearer if we could zoom in.

I like your idea of being able to zoom into the chart to get more details. I think we will need to think about that one to decide what the best way to do that given that we have limited screen area to work with, also I think the zooming probably only needs to be done time axis to get more resolution on dates. We might also want to tie this into better handling of fractional days.

[woodbri]

Here are some links that might help with this:

https://github.com/ariutta/svg-pan-zoom
http://www.petercollingridge.co.uk/interactive-svg-components/pan-and-zoom-control
https://css-tricks.com/scale-svg/

Currently we use a table for the rotations and each row has a separate SVG in a TD|TH cell, because the table is also a form that can edit information about the the rotations and reorder the rotations. We might want to add another page the just has the grazing chart render in SVG that allow the user to pan and zoom the chart. This could also be used to generate a PDF file of the chart for printing purposes.

I like this idea because it separates the complexity of a form for previewing and editing grazing information from the simple rendering it for viewing and printing. This would be fairly straight forward although a fair amount of effort to generate a chart similar to the paper charts that people are used to working with.

[mstenta]

What if as a first step we just put an editable date range field at the top (that defaults to the plan's start and end dates)? And if you change it (and press a submit button) it will reload the page with the SVG range zoomed to the specific range you selected. Could even add a simple range-slider, to make it super easy to slide either end inward (but prevent sliding them outward which would create a range greater than the range of the plan): https://api.jquerymobile.com/rangeslider/

[woodbri]

This could work also. My thought is that we have an enhancement request to be able to generate/print a grazing chart like document and if we did that as SVG then it would be scalable to different paper sizes in a PDF and in the browser we could add the image zoom/pan controllers for navigating it. Also a log of the existing SVG generation code could be reused to generate the chat document.

I think this is also related to solving issues #4 and #27, although those don't have to be solved first as the rendered results will improve once those are solved.