diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/GraphControlsApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/GraphControlsApp.vue
deleted file mode 100644
index 397189f3b187cc7c124aba71628f5bee3d73ba41..0000000000000000000000000000000000000000
--- a/assets/src/scripts/monitoring-location/components/hydrograph/GraphControlsApp.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
- <div class="graph-controls-container">
- <GraphControls />
- </div>
-</template>
-
-<script>
-import GraphControls from './vue-components/graph-controls.vue';
-
-export default {
- name: 'GraphControlsApp',
- components: {
- GraphControls
- }
-};
-</script>
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
index 23044183a2aba454f0901ce738d1153d56af27da..f0056c5aeb39a99ad09c85229c458e0526a6c531 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
@@ -17,7 +17,7 @@
<script>
import GraphBrush from './vue-components/graph-brush.vue';
import CursorSlider from './vue-components/cursor-slider.vue';
-import HydrographLegend from './vue-components/legend.vue';
+import HydrographLegend from './vue-components/hydrograph-legend.vue';
import GraphControls from './vue-components/graph-controls.vue';
import {useState} from 'redux-connect-vue';
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.test.js
similarity index 76%
rename from assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js
rename to assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.test.js
index f3afbea3bbe7ae17b8924c95268fa1c5ab123ad1..6b982297ac1b010ca5aa305aaad32ab7ec8c20cb 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.test.js
@@ -1,19 +1,14 @@
import {mount} from '@vue/test-utils';
-import {bindActionCreators} from 'redux';
-import ReduxConnectVue from 'redux-connect-vue';
-import {createStructuredSelector} from 'reselect';
import config from 'ui/config';
import * as utils from 'ui/utils';
-import {format} from 'd3-format';
import {configureStore} from 'ml/store';
import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
-import HydrographLegend from './legend.vue';
+import HydrographLegend from './hydrograph-legend.vue';
-import {getMainLayout} from '../selectors/layout';
import {getLegendMarkerRows} from '../selectors/legend-data';
import {getLegendMarkers as getDVLegendMarkerRows} from '../../daily-value-hydrograph/selectors/legend-data';
@@ -124,21 +119,19 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
store = configureStore(TEST_STATE);
wrapper = mount(HydrographLegend, {
- global: {
- plugins: [
- [ReduxConnectVue, {
- store,
- mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
- mapStateToPropsFactory: createStructuredSelector
- }]
- ]
- },
props: {
legendMarkerRows: getLegendMarkerRows(TEST_STATE),
- layout: getMainLayout.resultFunc(200, 600, {
- tickValues: [5, 10, 15],
- tickFormat: format('d')
- })
+ layout: {
+ "width": 992,
+ "height": 496,
+ "windowWidth": 1041,
+ "margin": {
+ "bottom": 5,
+ "top": 25,
+ "left": 55,
+ "right": 25
+ }
+ }
}
});
});
@@ -149,21 +142,19 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
it('Should have the correct number of legend markers when working for the DV graph', async() => {
wrapper = mount(HydrographLegend, {
- global: {
- plugins: [
- [ReduxConnectVue, {
- store: configureStore(DV_TEST_STATE),
- mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
- mapStateToPropsFactory: createStructuredSelector
- }]
- ]
- },
props: {
legendMarkerRows: getDVLegendMarkerRows(DV_TEST_STATE),
- layout: getMainLayout.resultFunc(200, 600, {
- tickValues: [5, 10, 15],
- tickFormat: format('d')
- })
+ layout: {
+ "width": 992,
+ "height": 496,
+ "windowWidth": 1041,
+ "margin": {
+ "bottom": 5,
+ "top": 25,
+ "left": 55,
+ "right": 25
+ }
+ }
}
});
await wrapper.vm.$nextTick();
@@ -172,15 +163,6 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
it('If no markers are provided legend-svg will contain no groups', async() => {
wrapper = mount(HydrographLegend, {
- global: {
- plugins: [
- [ReduxConnectVue, {
- store,
- mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
- mapStateToPropsFactory: createStructuredSelector
- }]
- ]
- },
props: {
legendMarkerRows: [],
layout: {}
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.vue
similarity index 83%
rename from assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
rename to assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.vue
index 2283c4b0b0fa0ccc68bb8c2978d8ea9f97c7dcbb..eace61fbc7e1f44d1585a7ed06d524d7bbf45dfb 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.vue
@@ -24,6 +24,10 @@ import {select} from 'd3-selection';
import {mediaQuery} from 'ui/utils';
import config from 'ui/config';
+/*
+ * @vue-prop {Array of Arrays} legendMarkerRows - array of rows to be displayed. Each array contains objects with the text to be displayed.
+ * @vue-prop {Object} layout - Object with the properties: height, margin (object with bottom, top, left, and right), width, and window width
+ */
export default {
name: 'HydrographLegend',
props: {
@@ -65,15 +69,8 @@ export default {
let lastMarker;
const getNewXPosition = function(markerGroup, lastXPosition) {
- // Long story short, firefox is unable to get the bounding box if
- // the svg element isn't actually taking up space and visible. Folks on the
- // internet seem to have gotten around this by setting `visibility:hidden`
- // to hide things, but that would still mean the elements will take up space.
- // which we don't want. So, here's some error handling for getBBox failures.
- // This handling ends up not creating the legend, but that's okay because the
- // graph is being shown anyway. A more detailed discussion of this can be found at:
- // https://bugzilla.mozilla.org/show_bug.cgi?id=612118 and
- // https://stackoverflow.com/questions/28282295/getbbox-of-svg-when-hidden.
+ //This try/catch allows unit tests to run. The JSDOM browser
+ //can throw an error when calling getBBox
try {
const markerGroupBBox = markerGroup.node().getBBox();
return markerGroupBBox.x + markerGroupBBox.width + MARKER_GROUP_X_OFFSET;