Streamflow drawing fix

Description

With a number of sites coming back online after having had ice-affected data, John noticed a bug in my timeseries plotting code. The line plotting fxn was plotting the data as a continuous line, even across windows w/o streamflow, so large gaps were getting filled with straight lines:

This code adjusts the data prep and plotting code to instead plot separate segments, omitting any connection between data points when there is a gap > 24 hours.

NOTE: I recently set up a prettier code linter to run automatically b/c of my WDFN work, so 95% of the changes shown are just code formatting. I will highlight below the exact changes that need review

Changes Made

• Split line data into >1 segment if there is > 24 hour gap - code change
• Add a new class for each segment, so that the enter-update-exit pattern is set up for each class - code change
• Remove currently drawn streamflow data group elements when the site changes (needed b/c group name no longer guaranteed to be identical btwn sites, depending on if a site has 1 or >1 segments) - code change 1, code change 2

How to Test

Pull changes locally. Run npm run dev. Navigate to this url extension: streamflow-drought-forecasts/#6.94/39.404/-78.727, and click on the two sites circled in red, below, to verify that data are no longer being interpolated over the gap. Click on other sites to make sure the streamflow timeseries data render correctly whether or not there is a data gap.

MR t-shirt size

• extra-small (e.g., update color scheme)
• small (e.g., add tooltip to chart)
• medium (e.g., add new static chart, add new pipeline output)
• large (e.g., initial data processing pipeline, interactive chart)

Timeline for review

• ASAP - blocker for deployment
• Today - blocker for ongoing work
• Next couple of days
• In the next week
• By XX/XX/XX
• When reviewer has availability

Review Needs

Does this MR include data processing, modeling, or visualization code that will require domain review prior to release?

• Yes, and I have opened an issue to document the need for review, using the DomainReview issue template
• Yes, and a domain review issue already exists
• No

Related Issues

NA

Additional Notes

NA

Merge Request Checklists

• Code changes adhere to best practices documented in README.md
• Code has been cleaned the way Vue likes it - run npm run lint
• If applicable, the need for future domain review has been documented in an issue
• Below section documents which browsers the site has been tested on:
  • Desktop/laptop
    • Chrome
    • Safari
    • Edge
    • Firefox
  • Mobile device
    • Chrome
    • Safari
    • Edge
    • Firefox