From 827a59c72f09fd3caa7e9922ceb38160f73fd077 Mon Sep 17 00:00:00 2001
From: Darius Williams <dswilliams@contractor.usgs.gov>
Date: Mon, 1 Aug 2022 16:02:39 -0500
Subject: [PATCH] Removing old files, adding new tests
---
.../components/hydrograph/HydrographApp.vue | 11 +-
.../components/hydrograph/index.js | 1 -
.../components/hydrograph/index.test.js | 2 +-
.../components/hydrograph/legend.js | 18 ---
.../components/hydrograph/legend.test.js | 68 ---------
.../hydrograph/vue-components/legend.test.js | 71 ++++++---
.../hydrograph/vue-components/legend.vue | 136 +++++++++---------
7 files changed, 124 insertions(+), 183 deletions(-)
delete mode 100644 assets/src/scripts/monitoring-location/components/hydrograph/legend.js
delete mode 100644 assets/src/scripts/monitoring-location/components/hydrograph/legend.test.js
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
index c12507eb1..57c5a5467 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
@@ -2,7 +2,12 @@
<div>
<CursorSlider />
<GraphBrush />
- <Legend />
+ <div class="ts-legend-controls-container">
+ <Legend />
+ <div class="graph-controls-container">
+ <GraphControls />
+ </div>
+ </div>
</div>
</template>
@@ -10,12 +15,14 @@
import GraphBrush from './vue-components/graph-brush.vue';
import CursorSlider from './vue-components/cursor-slider.vue';
import Legend from './vue-components/legend.vue'
+import GraphControls from './vue-components/graph-controls.vue';
export default {
name: 'HydrographApp',
components: {
GraphBrush,
CursorSlider,
- Legend
+ Legend,
+ GraphControls
}
};
</script>
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 314c6a777..ffafb6494 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -33,7 +33,6 @@ import {showDataIndicators} from './data-indicator';
import {initializeTimeSeriesGraph, drawTimeSeriesGraphData} from './time-series-graph';
import DataTablesApp from './DataTablesApp.vue';
-import GraphControlsApp from './GraphControlsApp.vue';
import HydrographApp from './HydrographApp.vue';
import ParameterSelectionApp from './ParameterSelectionApp.vue';
import StatisticsTableApp from './StatisticsTableApp.vue';
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
index b24c602a4..f019eb341 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -430,7 +430,7 @@ describe('monitoring-location/components/hydrograph module', () => {
});
it('should render the correct number of svg nodes', () => {
- expect(selectAll('svg').size()).toBe(2);
+ expect(selectAll('svg').size()).toBe(1);
});
it('should have a title div', () => {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/legend.js b/assets/src/scripts/monitoring-location/components/hydrograph/legend.js
deleted file mode 100644
index bb05f6765..000000000
--- a/assets/src/scripts/monitoring-location/components/hydrograph/legend.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import {createStructuredSelector} from 'reselect';
-
-import {drawSimpleLegend} from 'd3render/legend';
-import {link} from 'ui/lib/d3-redux';
-
-import {getMainLayout} from './selectors/layout';
-import {getLegendMarkerRows} from './selectors/legend-data';
-
-
-export const drawTimeSeriesLegend = function(elem, store) {
- elem.append('div')
- .classed('hydrograph-container', true)
- .call(link(store, drawSimpleLegend, createStructuredSelector({
- legendMarkerRows: getLegendMarkerRows,
- layout: getMainLayout
- })));
-};
-
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/legend.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/legend.test.js
deleted file mode 100644
index 6347641a7..000000000
--- a/assets/src/scripts/monitoring-location/components/hydrograph/legend.test.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import {select, selectAll} from 'd3-selection';
-
-import config from 'ui/config';
-import * as utils from 'ui/utils';
-
-import {configureStore} from 'ml/store';
-
-import {drawTimeSeriesLegend} from './legend';
-import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from './mock-hydrograph-state';
-
-describe('monitoring-location/components/hydrograph/legend module', () => {
- utils.mediaQuery = jest.fn().mockReturnValue(true);
- config.ivPeriodOfRecord = {
- '72019': {}
- };
- config.gwPeriodOfRecord = {
- '72019': {}
- };
- const TEST_STATE = {
- hydrographData: {
- currentTimeRange: {
- start: 1582560000000,
- end: 1600700000000
- },
- primaryIVData: TEST_PRIMARY_IV_DATA
- },
- groundwaterLevelData: {
- all: [TEST_GW_LEVELS]
- },
- hydrographState: {
- showCompareIVData: false,
- showMedianData: false,
- selectedIVMethodID: '90649',
- selectedParameterCode: '72019'
- }
- };
-
- describe('legends should render', () => {
-
- let graphNode;
- let store;
-
- beforeEach(() => {
- let body = select('body');
- let component = body.append('div')
- .attr('id', 'hydrograph');
- component.append('div').attr('class', 'loading-indicator-container');
- component.append('div').attr('class', 'graph-container');
- component.append('div').attr('class', 'select-time-series-container');
-
- graphNode = document.getElementById('hydrograph');
-
- store = configureStore(TEST_STATE);
- select(graphNode)
- .call(drawTimeSeriesLegend, store);
-
- });
-
- afterEach(() => {
- select('#hydrograph').remove();
- });
-
-
- it('Should have the correct number of legend markers', () => {
- expect(selectAll('.legend g').size()).toBe(9);
- });
- });
-});
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 db74ea9f2..abbfa1068 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
@@ -1,13 +1,17 @@
-import {select, selectAll} from 'd3-selection';
+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 {configureStore} from 'ml/store';
-import {drawTimeSeriesLegend} from './legend';
import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
+import Legend from './legend.vue'
+
describe('monitoring-location/components/hydrograph/legend module', () => {
utils.mediaQuery = jest.fn().mockReturnValue(true);
config.ivPeriodOfRecord = {
@@ -35,35 +39,58 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
}
};
- describe('legends should render', () => {
-
- let graphNode;
+ utils.mediaQuery = jest.fn().mockReturnValue(true);
+ describe('drawSimpleLegend', () => {
let store;
+ let wrapper;
beforeEach(() => {
- let body = select('body');
- let component = body.append('div')
- .attr('id', 'hydrograph');
- component.append('div').attr('class', 'loading-indicator-container');
- component.append('div').attr('class', 'graph-container');
- component.append('div').attr('class', 'select-time-series-container');
-
- graphNode = document.getElementById('hydrograph');
-
store = configureStore(TEST_STATE);
- select(graphNode)
- .call(drawTimeSeriesLegend, store);
+ wrapper = mount(Legend, {
+ global: {
+ plugins: [
+ [ReduxConnectVue, {
+ store,
+ mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+ mapStateToPropsFactory: createStructuredSelector
+ }]
+ ]
+ }
+ });
});
- afterEach(() => {
- select('#hydrograph').remove();
+ it('Should have the correct number of legend markers', () => {
+ expect(wrapper.findAll('.legend g')).toHaveLength(9);
});
+ it('If no markers are provided legend-svg will contain no groups', () => {
+ wrapper = mount(Legend, {
+ global: {
+ plugins: [
+ [ReduxConnectVue, {
+ store: configureStore({}),
+ mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+ mapStateToPropsFactory: createStructuredSelector
+ }]
+ ]
+ }
+ });
- it('Should have the correct number of legend markers', () => {
- expect(selectAll('.legend g').size()).toBe(9);
+ expect(wrapper.findAll('svg g')).toHaveLength(0);
+ });
+
+ it('Adds the correct number of legend elements', () => {
+ 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);
+ });
+
+ it('Expects that the legend has the expected text', () => {
+ let text = wrapper.findAll('text');
+
});
});
-});
-z
\ No newline at end of file
+});
\ 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 00006944a..c33468c82 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
@@ -13,15 +13,10 @@
/>
</svg>
</div>
- <div class="graph-controls-container">
- <GraphControls />
- </div>
</div>
</template>
<script>
-import GraphControls from './graph-controls.vue';
-
import {useState} from 'redux-connect-vue';
import {computed, ref, watchEffect} from 'vue';
import {select} from 'd3-selection';
@@ -33,9 +28,6 @@ import config from 'ui/config';
export default {
name: 'Legend',
- components: {
- GraphControls
- },
setup() {
const legend = ref(null);
@@ -45,41 +37,29 @@ export default {
const MARKER_GROUP_X_OFFSET = 15;
const VERTICAL_ROW_OFFSET = 18;
- let yPosition = VERTICAL_ROW_OFFSET;
-
const state = useState({
legendMarkerRows: getLegendMarkerRows,
layout: getMainLayout
});
- // Set the size of the containing svg node to the size of the legend.
- const bBox = computed(() => {
- try {
- return select(legend.value).node().getBBox();
- } catch (error) {
- return null;
- }
- })
-
const legendTransform = computed(() => {
return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? state.layout.value.margin.left : 0}, 0)`;
});
- const svgViewBox = computed(() => {
- if (bBox.value) {
- return `0 0 ${state.layout.value.width} ${bBox.value.height + 10}`;
- }
- return ''
- });
+ let svgViewBox;
watchEffect(() => {
- state.legendMarkerRows.value.forEach((rowMarkers) => {
- let xPosition = 0;
- let markerArgs;
- let markerGroup;
- let lastMarker;
+ if (legend.value) {
+ select(legend.value).selectChildren().remove();
+ let yPosition = VERTICAL_ROW_OFFSET;
+
+ state.legendMarkerRows.value.forEach((rowMarkers) => {
+ let xPosition = 0;
+ let markerArgs;
+ let markerGroup;
+ let lastMarker;
- const getNewXPosition = function(markerGroup, lastXPosition) {
+ 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`
@@ -96,48 +76,62 @@ export default {
// See above explanation
return lastXPosition;
}
- };
-
- const repositionLastMarkerWhenNeeded = function() {
- if (xPosition - MARKER_GROUP_X_OFFSET > state.layout.value.width && legend.value) {
- // Need to remove the last marker and draw it on the next row.
- markerGroup.remove();
- xPosition = 0;
- yPosition = yPosition + VERTICAL_ROW_OFFSET;
- markerArgs.x = xPosition;
- markerArgs.y = yPosition;
- markerGroup = lastMarker.type(legend.value, markerArgs);
- xPosition = getNewXPosition(markerGroup, xPosition);
- }
- };
-
- rowMarkers.forEach((marker) => {
- if (legend.value) {
- repositionLastMarkerWhenNeeded();
-
- markerArgs = {
- x: xPosition,
- y: yPosition,
- text: marker.text,
- domId: marker.domId,
- domClass: marker.domClass,
- width: RECTANGLE_MARKER_WIDTH,
- height: RECTANGLE_MARKER_HEIGHT,
- length: LINE_MARKER_WIDTH,
- r: marker.radius,
- fill: marker.fill
- };
-
- lastMarker = marker;
- markerGroup = marker.type(select(legend.value), markerArgs);
- xPosition = getNewXPosition(markerGroup, xPosition);
+ };
+
+ const repositionLastMarkerWhenNeeded = function() {
+ if (xPosition - MARKER_GROUP_X_OFFSET > state.layout.value.width) {
+ // Need to remove the last marker and draw it on the next row.
+ markerGroup.remove();
+ xPosition = 0;
+ yPosition = yPosition + VERTICAL_ROW_OFFSET;
+ markerArgs.x = xPosition;
+ markerArgs.y = yPosition;
+ markerGroup = lastMarker.type(legend.value, markerArgs);
+ xPosition = getNewXPosition(markerGroup, xPosition);
+ }
+ };
+
+ rowMarkers.forEach((marker) => {
+ repositionLastMarkerWhenNeeded();
+
+ markerArgs = {
+ x: xPosition,
+ y: yPosition,
+ text: marker.text,
+ domId: marker.domId,
+ domClass: marker.domClass,
+ width: RECTANGLE_MARKER_WIDTH,
+ height: RECTANGLE_MARKER_HEIGHT,
+ length: LINE_MARKER_WIDTH,
+ r: marker.radius,
+ fill: marker.fill
+ };
+
+ lastMarker = marker;
+ markerGroup = marker.type(select(legend.value), markerArgs);
+ xPosition = getNewXPosition(markerGroup, xPosition);
+
+ });
+ repositionLastMarkerWhenNeeded();
+ //start new row
+ yPosition = yPosition + VERTICAL_ROW_OFFSET;
+ });
+
+ // Set the size of the containing svg node to the size of the legend.
+ let bBox;
+ 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 ''
});
- repositionLastMarkerWhenNeeded();
- //start new row
- yPosition = yPosition = yPosition + VERTICAL_ROW_OFFSET;
- });
+ }
});
return {
--
GitLab