From f9d53f724beaef0ba6fb042d08d0d7a43eec2cfa Mon Sep 17 00:00:00 2001
From: Darius Williams <dswilliams@contractor.usgs.gov>
Date: Wed, 3 Aug 2022 14:47:01 -0500
Subject: [PATCH] Adding a prop for the daily value legend
---
.../components/hydrograph/HydrographApp.vue | 2 +-
.../hydrograph/vue-components/legend.test.js | 50 ++++++++-----------
.../hydrograph/vue-components/legend.vue | 26 ++++------
3 files changed, 32 insertions(+), 46 deletions(-)
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
index 051a5a62c..451c9c455 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
@@ -4,7 +4,7 @@
<GraphBrush />
<div class="ts-legend-controls-container">
<HydrographLegend
- :graphType="'IV'"
+ :graph-type="'IV'"
/>
<div class="graph-controls-container">
<GraphControls />
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 c12d376ec..9f7b3424d 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
@@ -29,17 +29,13 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
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']]
+ phenomenonTimeEnd: '2018-01-05',
+ timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05'],
+ result: ['5.0', '4.0', '6.1', '3.2'],
+ approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved']],
+ nilReason: [null, 'AA', null, null],
+ qualifiers: [null, ['ESTIMATED'], ['ICE'], ['ICE']],
+ grades: [['50'], ['50'], ['60'], ['60']]
}
},
'12346': {
@@ -47,25 +43,21 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
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']]
+ phenomenonTimeEnd: '2018-01-05',
+ timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05'],
+ result: ['6.0', '5.0', '7.1', '4.2'],
+ approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved']],
+ nilReason: [null, 'AA', null, null],
+ qualifiers: [null, null, null, null],
+ grades: [['50'], ['50'], ['60'], ['60']]
}
}
}
},
dailyValueTimeSeriesState: {
currentDVTimeSeriesId: {
- min: '12345',
- mean: null,
+ min: null,
+ mean: '12345',
max: '12346'
}
},
@@ -122,7 +114,7 @@ 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', () => {
+ it('Should have the correct number of legend markers when working for the DV graph', async() => {
wrapper = mount(HydrographLegend, {
global: {
plugins: [
@@ -137,11 +129,11 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
graphType: 'DV'
}
});
-
- expect(wrapper.findAll('.legend g')).toHaveLength(1);
+ await wrapper.vm.$nextTick();
+ expect(wrapper.findAll('.legend g')).toHaveLength(6);
});
- it('If no markers are provided legend-svg will contain no groups', () => {
+ it('If no markers are provided legend-svg will contain no groups', async() => {
wrapper = mount(HydrographLegend, {
global: {
plugins: [
@@ -156,7 +148,7 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
graphType: 'IV'
}
});
-
+ await wrapper.vm.$nextTick();
expect(wrapper.findAll('svg g')).toHaveLength(0);
});
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 c64cdce40..9a070d3b8 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
@@ -3,8 +3,8 @@
<div class="hydrograph-container">
<svg
v-if="legendMarkerRows.length"
+ ref="svg"
class="legend-svg"
- :viewBox="svgViewBox"
>
<g
ref="legend"
@@ -44,6 +44,7 @@ export default {
setup(props) {
const trackedType = toRefs(props).graphType;
const legend = ref(null);
+ const svg = ref(null);
const RECTANGLE_MARKER_WIDTH = 20;
const RECTANGLE_MARKER_HEIGHT = 10;
@@ -62,7 +63,7 @@ export default {
if (trackedType.value === 'DV') {
state = useState({
- legendMarkerRows: getDVLegendMarkers,
+ legendMarkerRows: (state) => getDVLegendMarkers(state),
layout: getDVMainLayout
});
}
@@ -70,9 +71,7 @@ export default {
const legendTransform = computed(() => {
return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? state.layout.value.margin.left : 0}, 0)`;
});
-
- let svgViewBox;
-
+
watchEffect(() => {
if (legend.value) {
select(legend.value).selectChildren().remove();
@@ -141,29 +140,24 @@ export default {
//start new row
yPosition = yPosition + VERTICAL_ROW_OFFSET;
});
-
- // Set the size of the containing svg node to the size of the legend.
+
let bBox;
+ // Set the size of the containing svg node to the size of the legend.
try {
bBox = select(legend.value).node().getBBox();
} catch (error) {
return;
}
-
- svgViewBox = computed(() => {
- if (bBox.value) {
- return `0 0 ${state.layout.value.width} ${bBox.height + 10}`;
- }
- return '';
- });
+
+ select(svg.value).attr('viewBox', `0 0 ${state.layout.value.width} ${bBox.height + 10}`);
}
});
return {
...state,
legendTransform,
- svgViewBox,
- legend
+ legend,
+ svg
};
}
};
--
GitLab