diff --git a/assets/src/scripts/components/hydrograph/axes.js b/assets/src/scripts/components/hydrograph/axes.js
index 0bb574aa8de59a736db3b4a2766443d7cd230e39..dea429d19ff0b260341a342c141043a95d72af1f 100644
--- a/assets/src/scripts/components/hydrograph/axes.js
+++ b/assets/src/scripts/components/hydrograph/axes.js
@@ -4,7 +4,7 @@ const { timeDay } = require('d3-time');
const { timeFormat } = require('d3-time-format');
const { createSelector } = require('reselect');
-const { getWidth, getHeight, MARGIN } = require('./layout');
+const { layoutSelector, MARGIN } = require('./layout');
const { xScaleSelector, yScaleSelector } = require('./scales');
const yTickCount = 5;
@@ -55,24 +55,26 @@ function createAxes({xScale, yScale}, yTickSize) {
const axesSelector = createSelector(
xScaleSelector('current'),
yScaleSelector,
+ layoutSelector,
(state) => state.plotYLabel,
- (xScale, yScale, plotYLabel) => {
+ (xScale, yScale, layout, plotYLabel) => {
return {
- ...createAxes({xScale, yScale}, -getWidth() + MARGIN.right),
+ ...createAxes({xScale, yScale}, -layout.width + MARGIN.right),
+ layout: layout,
yTitle: plotYLabel
};
}
);
-function appendAxes(elem, {xAxis, yAxis, yTitle}) {
+function appendAxes(elem, {xAxis, yAxis, layout, yTitle}) {
const xLoc = {
x: 0,
- y: getHeight() - (MARGIN.top + MARGIN.bottom)
+ y: layout.height - (MARGIN.top + MARGIN.bottom)
};
const yLoc = {x: 0, y: 0};
const yLabelLoc = {
- x: getHeight() / -2 + MARGIN.top,
+ x: layout.height / -2 + MARGIN.top,
y: -35
};
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index c1d6123eaaef54ab204b01bd281f67834d93fcb2..f1f564d92c5403a69abc51f1dfc789a136d2faff 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -10,14 +10,11 @@ const { addSVGAccessibility, addSROnlyTable } = require('../../accessibility');
const { dispatch, link, provide } = require('../../lib/redux');
const { appendAxes, axesSelector } = require('./axes');
-const { MARGIN, updateLayoutVariables } = require('./layout');
+const { ASPECT_RATIO_PERCENT, MARGIN, layoutSelector } = require('./layout');
const { pointsSelector, validPointsSelector, isVisibleSelector } = require('./points');
const { xScaleSelector, yScaleSelector } = require('./scales');
const { Actions, configureStore } = require('./store');
-let WIDTH;
-let HEIGHT;
-let ASPECT_RATIO_PERCENT;
// Function that returns the left bounding point for a given chart point.
const bisectDate = bisector(d => d.time).left;
@@ -79,7 +76,7 @@ const getNearestTime = function (data, time) {
};
-const plotTooltips = function (elem, {xScale, yScale, data}) {
+const plotTooltips = function (elem, {xScale, yScale, data, layout}) {
// Create a node to hightlight the currently selected date/time.
let focus = elem.append('g')
.attr('class', 'focus')
@@ -90,8 +87,8 @@ const plotTooltips = function (elem, {xScale, yScale, data}) {
elem.append('rect')
.attr('class', 'overlay')
- .attr('width', WIDTH)
- .attr('height', HEIGHT)
+ .attr('width', layout.width)
+ .attr('height', layout.height)
.on('mouseover', () => focus.style('display', null))
.on('mouseout', () => focus.style('display', 'none'))
.on('mousemove', function () {
@@ -163,13 +160,11 @@ const plotMedianPoints = function (elem, {visible, xscale, yscale, medianStatsDa
};
-const timeSeriesGraph = function (elem) {
- elem.append('div')
- .attr('class', 'hydrograph-container')
- .style('padding-bottom', ASPECT_RATIO_PERCENT)
- .append('svg')
+const timeSeriesGraph = function (elem, layout) {
+ elem.selectAll('svg').remove();
+ elem.append('svg')
//.attr('preserveAspectRatio', 'xMinYMin meet')
- .attr('viewBox', `0 0 ${WIDTH} ${HEIGHT}`)
+ .attr('viewBox', `0 0 ${layout.width} ${layout.height}`)
.call(link(addSVGAccessibility, createStructuredSelector({
title: state => state.title,
description: state => state.desc,
@@ -195,6 +190,7 @@ const timeSeriesGraph = function (elem) {
.call(link(plotTooltips, createStructuredSelector({
xScale: xScaleSelector('current'),
yScale: yScaleSelector,
+ layout: layoutSelector,
data: pointsSelector('current')
})))
.call(link(plotMedianPoints, createStructuredSelector({
@@ -226,20 +222,21 @@ const attachToNode = function (node, {siteno} = {}) {
let store = configureStore();
- // Set layout variables
- let newLayout = updateLayoutVariables(node.offsetWidth);
- WIDTH = newLayout.width;
- HEIGHT = newLayout.height;
- ASPECT_RATIO_PERCENT = newLayout.aspect_ratio_percent;
-
-
+ store.dispatch(Actions.resizeTimeseriesPlot(node.offsetWidth));
select(node)
.call(provide(store))
- .call(timeSeriesGraph)
.select('.hydrograph-last-year-input')
.on('change', dispatch(function () {
return Actions.toggleTimeseries('compare', this.checked);
}));
+ select(node).append('div')
+ .attr('class', 'hydrograph-container')
+ .style('padding-bottom', ASPECT_RATIO_PERCENT)
+ .call(link(timeSeriesGraph, layoutSelector));
+
+ window.onresize = function() {
+ store.dispatch(Actions.resizeTimeseriesPlot(node.offsetWidth));
+ };
store.dispatch(Actions.retrieveTimeseries(siteno));
};
diff --git a/assets/src/scripts/components/hydrograph/layout.js b/assets/src/scripts/components/hydrograph/layout.js
index f3771ceee3b2437c496772dab7fbd55d67b80c64..be3fe0f379322ae102d77c6d2f446f92eefeceb4 100644
--- a/assets/src/scripts/components/hydrograph/layout.js
+++ b/assets/src/scripts/components/hydrograph/layout.js
@@ -1,29 +1,26 @@
// Define width, height and margin for the SVG.
// Use a fixed size, and scale to device width using CSS.
-export let WIDTH = 800;
-export let HEIGHT = WIDTH / 2;
-export let ASPECT_RATIO_PERCENT = `${100 * HEIGHT / WIDTH}%`;
+const { createSelector } = require('reselect');
-export function updateLayoutVariables(width) {
- WIDTH = width;
- HEIGHT = WIDTH / 2;
- ASPECT_RATIO_PERCENT = `${100 * HEIGHT / WIDTH}%`;
- return {
- width: WIDTH,
- height: HEIGHT,
- aspect_ratio_percent: ASPECT_RATIO_PERCENT
- };
-}
-export function getWidth() {
- return WIDTH;
-}
-export function getHeight() {
- return HEIGHT;
-}
-
-export const MARGIN = {
+const ASPECT_RATIO = 1 / 2;
+const ASPECT_RATIO_PERCENT = `${100 * ASPECT_RATIO}%`;
+const MARGIN = {
top: 20,
right: 100,
bottom: 45,
left: 50
};
+
+const layoutSelector = createSelector(
+ (state) => state.width,
+ (width) => {
+ return {
+ width: width,
+ height: width * ASPECT_RATIO
+ };
+ }
+);
+
+module.exports = {ASPECT_RATIO_PERCENT, MARGIN, layoutSelector}
+
+
diff --git a/assets/src/scripts/components/hydrograph/scales.js b/assets/src/scripts/components/hydrograph/scales.js
index f8980fb9e14ad7359f2fb4cc4e2cca42e5baa01e..1d76fe2ba052d31d87430579cb8a068103eb6f95 100644
--- a/assets/src/scripts/components/hydrograph/scales.js
+++ b/assets/src/scripts/components/hydrograph/scales.js
@@ -2,7 +2,7 @@ const { extent } = require('d3-array');
const { scaleLinear, scaleTime } = require('d3-scale');
const { createSelector, defaultMemoize: memoize } = require('reselect');
-const { getWidth, getHeight, MARGIN } = require('./layout');
+const { layoutSelector, MARGIN } = require('./layout');
const paddingRatio = 0.2;
@@ -95,10 +95,11 @@ function createScales(tsData, showSeries, xSize, ySize) {
* @return {Function} D3 scale function
*/
const xScaleSelector = memoize(tsDataKey => createSelector(
+ layoutSelector,
(state) => state.tsData,
- (tsData) => {
+ (layout, tsData) => {
if (tsData[tsDataKey]) {
- return createXScale(tsData[tsDataKey], getWidth() - MARGIN.right);
+ return createXScale(tsData[tsDataKey], layout.width - MARGIN.right);
} else {
return null;
}
@@ -112,9 +113,10 @@ const xScaleSelector = memoize(tsDataKey => createSelector(
* @return {Function} D3 scale function
*/
const yScaleSelector = createSelector(
+ layoutSelector,
(state) => state.tsData,
(state) => state.showSeries,
- (tsData, showSeries) => createYScale(tsData, showSeries, getHeight() - (MARGIN.top + MARGIN.bottom))
+ (layout, tsData, showSeries) => createYScale(tsData, showSeries, layout.height - (MARGIN.top + MARGIN.bottom))
);
diff --git a/assets/src/scripts/components/hydrograph/store.js b/assets/src/scripts/components/hydrograph/store.js
index 33ea1e5a932756bc97462d304f8a5818e1be6d45..acaa2ff52c1454aaa656a309e3548e1a02da9934 100644
--- a/assets/src/scripts/components/hydrograph/store.js
+++ b/assets/src/scripts/components/hydrograph/store.js
@@ -79,6 +79,12 @@ export const Actions = {
type: 'SET_MEDIAN_STATISTICS',
medianStatistics
};
+ },
+ resizeTimeseriesPlot(width) {
+ return {
+ type: 'RESIZE_TIMESERIES_PLOT',
+ width
+ };
}
};
@@ -145,6 +151,12 @@ export const timeSeriesReducer = function (state={}, action) {
}
};
+ case 'RESIZE_TIMESERIES_PLOT':
+ return {
+ ...state,
+ width: action.width
+ }
+
default:
return state;
}
@@ -168,6 +180,7 @@ export const configureStore = function (initialState) {
},
title: '',
desc: '',
+ width: 800,
...initialState
};