From 90da19c487e35c2a8c3da4134c38d16c2779def6 Mon Sep 17 00:00:00 2001
From: Darius Williams <dswilliams@contractor.usgs.gov>
Date: Fri, 22 Jul 2022 16:00:38 -0500
Subject: [PATCH] placeholder tests and initial attempt
---
.../components/hydrograph/index.js | 7 +--
.../vue-components/cursor-slider.test.js | 61 +++++++++++++++++++
.../vue-components/cursor-slider.vue | 57 +++++++++++++----
3 files changed, 107 insertions(+), 18 deletions(-)
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index fc3220f68..b3c046270 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -32,7 +32,6 @@ import {showDataIndicators} from './data-indicator';
import {drawTimeSeriesLegend} from './legend';
import {initializeTimeSeriesGraph, drawTimeSeriesGraphData} from './time-series-graph';
-import {initializeTooltipCursorSlider, drawTooltipCursorSlider} from './tooltip';
import DataTablesApp from './DataTablesApp.vue';
import GraphControlsApp from './GraphControlsApp.vue';
@@ -142,7 +141,7 @@ export const attachToNode = function(store,
graphContainer.call(initializeTimeSeriesGraph, store, siteno, agencyCd, sitename, thisShowMLName, !thisShowOnlyGraph);
showDataIndicators(true, store);
if (!showOnlyGraph) {
- initializeTooltipCursorSlider(graphContainer, store);
+
//TODO: The tooltips, legend and the main hydrograph can be added to the HydrographApp.
// The main hydrograph should be converted to a Vue component last. As part of that task we
// will figure out how to handle the loading indicator and the no data overlay
@@ -196,10 +195,6 @@ export const attachToNode = function(store,
showDataIndicators(false, store);
graphContainer.call(drawTimeSeriesGraphData, store, !thisShowOnlyGraph);
- if (!thisShowOnlyGraph) {
- graphContainer
- .call(drawTooltipCursorSlider, store);
- }
legendControlsContainer.call(drawTimeSeriesLegend, store);
if (!thisShowOnlyGraph) {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.test.js
index e69de29bb..de60f6f9f 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.test.js
@@ -0,0 +1,61 @@
+describe('monitoring-location/components/hydrograph/cursor-slider', () => {
+ utils.mediaQuery = jest.fn().mockReturnValue(true);
+ config.locationTimeZone = 'America/Chicago';
+ const TEST_STATE = {
+ hydrographData: {
+ primaryIVData: TEST_PRIMARY_IV_DATA,
+ currentTimeRAnge: TEST_CURRENT_TIME_RANGE
+ },
+ hydrographState: {
+ graphCursorOffset: 500000
+ },
+ ui: {
+ windowWidth: 1300,
+ width: 990
+ }
+ };
+
+ describe('drawCursorSlider', () => {
+ let svg;
+ let store;
+ beforeEach(() => {
+ svg = select('body').append('svg');
+ store = configureStore(TEST_STATE);
+ });
+
+ afterEach(() => {
+ svg.remove();
+ });
+
+ it('Creates a cursor slider', () => {
+ drawCursorSlider(svg, store);
+
+ const sliderGroup = svg.selectAll('.cursor-slider-group');
+ expect(sliderGroup.size()).toBe(1);
+ expect(sliderGroup.selectAll('.slider').size()).toBe(1);
+ });
+ });
+});
+
+describe('initializeTooltipCursorSlider and drawTooltipCursorSlider', () => {
+ let div;
+ beforeEach(() => {
+ div = select('body').append('div');
+ });
+
+ afterEach(() => {
+ div.remove();
+ });
+
+ it('should render the cursor slider', () => {
+ let store = configureStore(TEST_STATE);
+ initializeTooltipCursorSlider(div, store);
+ drawTooltipCursorSlider(div, store);
+
+ const sliderSvg = div.selectAll('.cursor-slider-svg');
+ const slider = sliderSvg.selectAll('.slider');
+
+ expect(sliderSvg.size()).toBe(1);
+ expect(slider.size()).toBe(1);
+ });
+});
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.vue
index 248df6c86..5bcb99791 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.vue
@@ -2,53 +2,86 @@
<svg
class="cursor-slider-svg"
xmlns="http://www.w3.org/2000/svg"
- :viewBox=viewBox
+ :viewBox="viewBox"
>
<g
class="cursor-slider-group"
ga-on="click"
ga-event-category="hydrograph-interaction"
ga-event-action="clickOnSlider"
- >
-
- </g>
+ ref="group"
+ />
</svg>
</template>
<script>
import {useActions, useState} from 'redux-connect-vue';
-import {computed, inject, ref, watchEffect} from 'vue';
+import {computed, ref, watchEffect} from 'vue';
import {sliderTop} from 'd3-simple-slider';
-import {createStructuredSelector} from 'reselect';
+import {select} from 'd3-selection';
import {getGraphCursorOffset} from 'ml/selectors/hydrograph-state-selector';
import {setGraphCursorOffset} from 'ml/store/hydrograph-state';
-import {getMainXScale} from './selectors/scales';
-import {getMainLayout} from './selectors/layout';
+import {getMainXScale} from '../selectors/scales';
+import {getMainLayout} from '../selectors/layout';
export default {
name: 'CursorSlider',
setup() {
const state = useState({
layout: getMainLayout,
- xAxis: getBrushXAxis,
- xScale: getMainXScale,
+ xScale: getMainXScale('current'),
cursorOffset: getGraphCursorOffset
});
+ const actions = useActions({
+ setGraphCursorOffset
+ });
+
+ const group = ref(null);
+
const viewBox = computed(() => {
return `0 0 ${state.layout.value.width + state.layout.value.margin.left + state.layout.value.margin.right} 25`;
});
+ const slider = sliderTop()
+ .displayValue(false)
+ .ticks(0);
+
+ watchEffect(() => {
+ const [startMillis, endMillis] = state.xScale.value.domain();
+ const [startX, endX] = state.xScale.value.range();
+
+ slider
+ .min(startMillis)
+ .max(endMillis)
+ .width(endX - startX);
+ slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
+
+ if(group.value) {
+ group.value.setAttribute('transform', `translate(${state.layout.value.margin.left},15)`);
+ select(group.value.className.baseVal).call(slider);
+ }
+
+ slider.on('onchange', (val) => {
+ actions.setGraphCursorOffset(val - startMillis);
+ });
+ });
+
+ watchEffect(() => {
+ slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
+ });
+
return {
...state,
- viewBox
+ viewBox,
+ group,
+ slider
}
}
-
}
</script>
\ No newline at end of file
--
GitLab