diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
index 451c9c45563945b0668a789ea82be85fdc1c3699..23044183a2aba454f0901ce738d1153d56af27da 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
@@ -4,7 +4,8 @@
<GraphBrush />
<div class="ts-legend-controls-container">
<HydrographLegend
- :graph-type="'IV'"
+ :legend-marker-rows="legendMarkerRows"
+ :layout="layout"
/>
<div class="graph-controls-container">
<GraphControls />
@@ -18,6 +19,10 @@ import GraphBrush from './vue-components/graph-brush.vue';
import CursorSlider from './vue-components/cursor-slider.vue';
import HydrographLegend from './vue-components/legend.vue';
import GraphControls from './vue-components/graph-controls.vue';
+import {useState} from 'redux-connect-vue';
+
+import {getMainLayout} from './selectors/layout';
+import {getLegendMarkerRows} from './selectors/legend-data';
export default {
name: 'HydrographApp',
components: {
@@ -25,6 +30,16 @@ export default {
CursorSlider,
HydrographLegend,
GraphControls
+ },
+ setup() {
+ const state = useState({
+ legendMarkerRows: getLegendMarkerRows,
+ layout: (state) => getMainLayout(state)
+ });
+
+ return {
+ ...state
+ };
}
};
</script>
\ No newline at end of file
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/legend.test.js
index 9f7b3424dbfa8410bd643f51f196a56e98ade8e3..f3afbea3bbe7ae17b8924c95268fa1c5ab123ad1 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js
@@ -5,6 +5,7 @@ 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';
@@ -12,6 +13,10 @@ import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
import HydrographLegend from './legend.vue';
+import {getMainLayout} from '../selectors/layout';
+import {getLegendMarkerRows} from '../selectors/legend-data';
+import {getLegendMarkers as getDVLegendMarkerRows} from '../../daily-value-hydrograph/selectors/legend-data';
+
describe('monitoring-location/components/hydrograph/legend module', () => {
utils.mediaQuery = jest.fn().mockReturnValue(true);
config.ivPeriodOfRecord = {
@@ -70,8 +75,27 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
const TEST_STATE = {
hydrographData: {
currentTimeRange: {
- start: 1582560000000,
- end: 1600700000000
+ start: 1582560800009,
+ end: 1582561800001
+ },
+ thresholds: {
+ operatingLimits: [{
+ parameterCode: '72019',
+ methodDescription: 'from multi parameter sonde',
+ thresholdDetails: [{
+ name: 'Very high',
+ referenceCode: 'Operational limit - high-Public',
+ referenceValue: '10'
+ }, {
+ name: 'Very low',
+ referenceCode: 'Operational limit - low-Public',
+ referenceValue: '1'
+ }]
+ }]
+ },
+ prioryearTimeRange: {
+ start: 1582560900000,
+ end: 1582561800000
},
primaryIVData: TEST_PRIMARY_IV_DATA
},
@@ -79,10 +103,15 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
all: [TEST_GW_LEVELS]
},
hydrographState: {
+ selectedParameterCode: '72019',
showCompareIVData: false,
showMedianData: false,
- selectedIVMethodID: '90649',
- selectedParameterCode: '72019'
+ selectedIVMethodID: '90649'
+ },
+ floodData: {},
+ ui: {
+ windowWidth: 591,
+ width: 542
}
};
@@ -105,13 +134,17 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
]
},
props: {
- graphType: 'IV'
+ legendMarkerRows: getLegendMarkerRows(TEST_STATE),
+ layout: getMainLayout.resultFunc(200, 600, {
+ tickValues: [5, 10, 15],
+ tickFormat: format('d')
+ })
}
});
});
it('Should have the correct number of legend markers', () => {
- expect(wrapper.findAll('.legend g')).toHaveLength(9);
+ expect(wrapper.findAll('.legend g')).toHaveLength(7);
});
it('Should have the correct number of legend markers when working for the DV graph', async() => {
@@ -126,7 +159,11 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
]
},
props: {
- graphType: 'DV'
+ legendMarkerRows: getDVLegendMarkerRows(DV_TEST_STATE),
+ layout: getMainLayout.resultFunc(200, 600, {
+ tickValues: [5, 10, 15],
+ tickFormat: format('d')
+ })
}
});
await wrapper.vm.$nextTick();
@@ -138,14 +175,15 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
global: {
plugins: [
[ReduxConnectVue, {
- store: configureStore({}),
+ store,
mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
mapStateToPropsFactory: createStructuredSelector
}]
]
},
props: {
- graphType: 'IV'
+ legendMarkerRows: [],
+ layout: {}
}
});
await wrapper.vm.$nextTick();
@@ -156,8 +194,8 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
expect(wrapper.findAll('svg')).toHaveLength(1);
expect(wrapper.findAll('line')).toHaveLength(3);
expect(wrapper.findAll('rect')).toHaveLength(2);
- expect(wrapper.findAll('text')).toHaveLength(9);
- expect(wrapper.findAll('circle')).toHaveLength(3);
+ expect(wrapper.findAll('text')).toHaveLength(7);
+ expect(wrapper.findAll('circle')).toHaveLength(1);
});
it('Expects that the legend has the expected text', () => {
@@ -169,8 +207,6 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
expect(text[4].text()).toBe('Ice Affected');
expect(text[5].text()).toBe('Field visit:');
expect(text[6].text()).toBe('Provisional');
- expect(text[7].text()).toBe('Approved');
- expect(text[8].text()).toBe('Revised');
});
});
});
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
index 9a070d3b84cab16675e7679ae1bc13850bbe5299..2283c4b0b0fa0ccc68bb8c2978d8ea9f97c7dcbb 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
@@ -17,32 +17,26 @@
</template>
<script>
-import {useState} from 'redux-connect-vue';
+
import {computed, ref, toRefs, watchEffect} from 'vue';
import {select} from 'd3-selection';
-import {getMainLayout} from '../selectors/layout';
-import {getLegendMarkerRows} from '../selectors/legend-data';
-
-import {getMainLayout as getDVMainLayout} from '../../daily-value-hydrograph/selectors/layout';
-import {getLegendMarkers as getDVLegendMarkers} from '../../daily-value-hydrograph/selectors/legend-data';
-
import {mediaQuery} from 'ui/utils';
import config from 'ui/config';
export default {
name: 'HydrographLegend',
props: {
- graphType: {
- type: String,
- required: true,
- validator: function(value) {
- return ['DV', 'IV'].includes(value);
- }
+ legendMarkerRows: {
+ type: Array,
+ required: true
+ },
+ layout: {
+ type: Object,
+ required: true
}
},
setup(props) {
- const trackedType = toRefs(props).graphType;
const legend = ref(null);
const svg = ref(null);
@@ -52,24 +46,11 @@ export default {
const MARKER_GROUP_X_OFFSET = 15;
const VERTICAL_ROW_OFFSET = 18;
- let state;
-
- if (trackedType.value === 'IV') {
- state = useState({
- legendMarkerRows: getLegendMarkerRows,
- layout: getMainLayout
- });
- }
-
- if (trackedType.value === 'DV') {
- state = useState({
- legendMarkerRows: (state) => getDVLegendMarkers(state),
- layout: getDVMainLayout
- });
- }
+ const trackedLegendMarkerRows = toRefs(props).legendMarkerRows;
+ const trackedLayout = toRefs(props).layout;
const legendTransform = computed(() => {
- return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? state.layout.value.margin.left : 0}, 0)`;
+ return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? trackedLayout.value.margin.left : 0}, 0)`;
});
watchEffect(() => {
@@ -77,7 +58,7 @@ export default {
select(legend.value).selectChildren().remove();
let yPosition = VERTICAL_ROW_OFFSET;
- state.legendMarkerRows.value.forEach((rowMarkers) => {
+ trackedLegendMarkerRows.value.forEach((rowMarkers) => {
let xPosition = 0;
let markerArgs;
let markerGroup;
@@ -103,7 +84,7 @@ export default {
};
const repositionLastMarkerWhenNeeded = function() {
- if (xPosition - MARKER_GROUP_X_OFFSET > state.layout.value.width) {
+ if (xPosition - MARKER_GROUP_X_OFFSET > trackedLayout.value.width) {
// Need to remove the last marker and draw it on the next row.
markerGroup.remove();
xPosition = 0;
@@ -149,12 +130,11 @@ export default {
return;
}
- select(svg.value).attr('viewBox', `0 0 ${state.layout.value.width} ${bBox.height + 10}`);
+ select(svg.value).attr('viewBox', `0 0 ${trackedLayout.value.width} ${bBox.height + 10}`);
}
});
return {
- ...state,
legendTransform,
legend,
svg