initial commit

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

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js

+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

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue

+<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