From 0ec4f53a8d839602dd483758e398d19282f86182 Mon Sep 17 00:00:00 2001
From: Darius Williams <dswilliams@contractor.usgs.gov>
Date: Thu, 28 Jul 2022 15:56:30 -0500
Subject: [PATCH] initial commit
---
.../components/hydrograph/HydrographApp.vue | 5 +-
.../hydrograph/vue-components/legend.test.js | 69 +++++++++++++++++++
.../hydrograph/vue-components/legend.vue | 51 ++++++++++++++
3 files changed, 124 insertions(+), 1 deletion(-)
create mode 100644 assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js
create mode 100644 assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
index 84bea2243..c12507eb1 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
@@ -2,17 +2,20 @@
<div>
<CursorSlider />
<GraphBrush />
+ <Legend />
</div>
</template>
<script>
import GraphBrush from './vue-components/graph-brush.vue';
import CursorSlider from './vue-components/cursor-slider.vue';
+import Legend from './vue-components/legend.vue'
export default {
name: 'HydrographApp',
components: {
GraphBrush,
- CursorSlider
+ CursorSlider,
+ Legend
}
};
</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
new file mode 100644
index 000000000..db74ea9f2
--- /dev/null
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js
@@ -0,0 +1,69 @@
+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);
+ });
+ });
+});
+z
\ 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
new file mode 100644
index 000000000..cf365ceea
--- /dev/null
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue
@@ -0,0 +1,51 @@
+<template>
+ <div class="hydrograph-container">
+ <svg
+ v-if="legendMarkerRows.length"
+ class="legend-svg"
+ >
+ <g
+ class="legend"
+ :transform="legendTransform"
+ >
+
+ </g>
+ </svg>
+ </div>
+</template>
+
+<script>
+import {useActions, useState} from 'redux-connect-vue';
+import {computed, inject, ref, watchEffect} from 'vue';
+
+import {createStructuredSelector} from 'reselect';
+
+import {drawSimpleLegend} from 'd3render/legend';
+
+import {getMainLayout} from './selectors/layout';
+import {getLegendMarkerRows} from './selectors/legend-data';
+import {mediaQuery} from 'ui/utils';
+
+export default {
+ name: 'Legend',
+ setup() {
+ const state = useState({
+ legendMarkerRows: getLegendMarkerRows,
+ layout: getMainLayout
+ });
+
+ const legendTransform = computed(() => {
+ return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? layout.margin.left : 0}, 0)`
+ });
+
+ return {
+ ...state,
+ legendTransform
+ }
+ }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
--
GitLab