Skip to content

WDFN-769 - Convert time-series-graph.js to a Vue component

Bucknell, Mary S. requested to merge mbucknell/waterdataui:wdfn-769 into main

Before making a pull request

  • Put the appropriate EXEMPT flag if needed in the MR label (see https://practices.wma.chs.usgs.gov/practice/peer_code_review/)
  • Run all linters (make lint)
  • Run all tests (make test)
  • Update the changelog appropriately
  • If making a release, update code.json metadataLastUpdated and bump CHANGELOG.md to next version.

Description

I have converted the time-series-graph.js module to a Vue SFC component. As part of this, I created a couple of components that can also be used in daily-value-hydrograph, specifically GraphTooltipFocusOveraly and SvgMaskDefinitions. I changed the name of the scripts/uswds-components to scripts/vue-components since the USWDS components will be moving to the wdfn-vue-components library. I also moved GraphLegend.vue (was hydrograph-legend.vue in the components/hydrograph/vue-components) since we can use that in the daily value hydrograph or really anywhere where we want to render SVG style legends. I also created an InfoTooltip component that is used for the graph title and the method picker.

Specific to time-series-graph.vue, all D3 rendering functions are not in separate modules. To do this I moved the drawAllMedianPoints to it's own module, median-lines. This follows the pattern of other rendered objects in the time series graph. As part of the ticket to clean up the monitoring-location/hydrograph, I will consider other ways of organizing the code within this directory.

After making a pull request

  • If appropriate, put the link to the PR in the JIRA ticket
  • Assign someone to review unless the change is trivial
  • Check the accessibility CI step and fix or explain any issues.
Edited by Bucknell, Mary S.

Merge request reports