diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
index 617b307a1e2d9322ebd38b3554bbb38124d82905..051a5a62cfb82c9abe2527b4a35530193451d450 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
@@ -3,7 +3,9 @@
<CursorSlider />
<GraphBrush />
<div class="ts-legend-controls-container">
- <HydrographLegend />
+ <HydrographLegend
+ :graphType="'IV'"
+ />
<div class="graph-controls-container">
<GraphControls />
</div>
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 7267a4730a919a33bde4e91a9b6978ab7c378971..c12d376ec1f576547a48f5c85e4c023c7797a8b3 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
@@ -20,6 +20,61 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
config.gwPeriodOfRecord = {
'72019': {}
};
+
+ const DV_TEST_STATE = {
+ dailyValueTimeSeriesData: {
+ dvTimeSeries: {
+ '12345': {
+ type: 'Feature',
+ id: '12345',
+ properties: {
+ phenomenonTimeStart: '2018-01-02',
+ phenomenonTimeEnd: '2018-01-10',
+ timeStep: ['2018-01-05', '2018-01-03', '2018-01-02', '2018-01-04',
+ '2018-01-06', '2018-01-07', '2018-01-08', '2018-01-09', '2018-01-10'],
+ result: ['3.2', '4.0', '5.0', '6.1',
+ '7.3', '8.1', '6.2', '2.9', '3.4'],
+ approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved'],
+ ['Approved'], ['Approved'], ['Approved'], ['Approved'], ['Working']],
+ nilReason: [null, 'AA', null, null, null, null, null, null, null],
+ qualifiers: [['ICE'], null, null, null,
+ ['ICE', 'EQUIP'], ['ICE', 'EQUIP'], ['ESTIMATED'], ['ESTIMATED'], null],
+ grades: [['60'], ['50'], ['50'], ['60'], ['50'], ['50'], ['50'], ['50'], ['50']]
+ }
+ },
+ '12346': {
+ type: 'Feature',
+ id: '12346',
+ properties: {
+ phenomenonTimeStart: '2018-01-02',
+ phenomenonTimeEnd: '2018-01-10',
+ timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05',
+ '2018-01-06', '2018-01-07', '2018-01-08', '2018-01-09', '2018-01-10'],
+ result: ['5.2', '3.0', '6.0', '7.1',
+ '8.3', '9.1', '7.2', '3.9', '4.4'],
+ approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved'],
+ ['Approved'], ['Approved'], ['Approved'], ['Approved'], ['Working']],
+ nilReason: [null, 'AA', null, null, null, null, null, null, null],
+ qualifiers: [null, null, null, ['ICE'],
+ ['ICE', 'EQUIP'], ['ICE', 'EQUIP'], ['ESTIMATED'], ['ESTIMATED'], null],
+ grades: [['50'], ['50'], ['50'], ['60'], ['50'], ['50'], ['50'], ['50'], ['50']]
+ }
+ }
+ }
+ },
+ dailyValueTimeSeriesState: {
+ currentDVTimeSeriesId: {
+ min: '12345',
+ mean: null,
+ max: '12346'
+ }
+ },
+ ui: {
+ windowWidth: 1024,
+ width: 800
+ }
+ };
+
const TEST_STATE = {
hydrographData: {
currentTimeRange: {
@@ -56,6 +111,9 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
mapStateToPropsFactory: createStructuredSelector
}]
]
+ },
+ props: {
+ graphType: 'IV'
}
});
});
@@ -64,6 +122,25 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
expect(wrapper.findAll('.legend g')).toHaveLength(9);
});
+ it('Should have the correct number of legend markers when working for the DV graph', () => {
+ wrapper = mount(HydrographLegend, {
+ global: {
+ plugins: [
+ [ReduxConnectVue, {
+ store: configureStore(DV_TEST_STATE),
+ mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+ mapStateToPropsFactory: createStructuredSelector
+ }]
+ ]
+ },
+ props: {
+ graphType: 'DV'
+ }
+ });
+
+ expect(wrapper.findAll('.legend g')).toHaveLength(1);
+ });
+
it('If no markers are provided legend-svg will contain no groups', () => {
wrapper = mount(HydrographLegend, {
global: {
@@ -74,6 +151,9 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
mapStateToPropsFactory: createStructuredSelector
}]
]
+ },
+ props: {
+ graphType: 'IV'
}
});
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 1f098da08a33c7917f58b80da87fe44731695d0b..c64cdce4089305eed2a0031fb0e96eb90544c29a 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
@@ -18,17 +18,31 @@
<script>
import {useState} from 'redux-connect-vue';
-import {computed, ref, watchEffect} from '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',
- setup() {
+ props: {
+ graphType: {
+ type: String,
+ required: true,
+ validator: function(value) {
+ return ['DV', 'IV'].includes(value);
+ }
+ }
+ },
+ setup(props) {
+ const trackedType = toRefs(props).graphType;
const legend = ref(null);
const RECTANGLE_MARKER_WIDTH = 20;
@@ -37,10 +51,21 @@ export default {
const MARKER_GROUP_X_OFFSET = 15;
const VERTICAL_ROW_OFFSET = 18;
- const state = useState({
- legendMarkerRows: getLegendMarkerRows,
- layout: getMainLayout
- });
+ let state;
+
+ if (trackedType.value === 'IV') {
+ state = useState({
+ legendMarkerRows: getLegendMarkerRows,
+ layout: getMainLayout
+ });
+ }
+
+ if (trackedType.value === 'DV') {
+ state = useState({
+ legendMarkerRows: getDVLegendMarkers,
+ layout: getDVMainLayout
+ });
+ }
const legendTransform = computed(() => {
return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? state.layout.value.margin.left : 0}, 0)`;