From 35ddee4fd0471db764483c173f45c5b8aa23d9ce Mon Sep 17 00:00:00 2001
From: Andrew Yan <ayan@usgs.gov>
Date: Thu, 15 Feb 2018 14:29:12 -0600
Subject: [PATCH] simplify code and make it more readable
---
.../scripts/components/hydrograph/index.js | 10 ++---
.../scripts/components/hydrograph/legend.js | 8 ++--
.../components/hydrograph/legend.spec.js | 10 ++---
.../scripts/components/hydrograph/points.js | 37 ++++++++++---------
.../components/hydrograph/points.spec.js | 4 +-
assets/src/styles/components/_hydrograph.scss | 18 ++++-----
6 files changed, 43 insertions(+), 44 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 41f3d77aa..9fe8b02df 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -12,7 +12,7 @@ const { dispatch, link, provide } = require('../../lib/redux');
const { appendAxes, axesSelector } = require('./axes');
const { ASPECT_RATIO_PERCENT, MARGIN, CIRCLE_RADIUS, layoutSelector } = require('./layout');
const { drawSimpleLegend, legendDisplaySelector, createLegendMarkers } = require('./legend');
-const { pointsSelector, lineSegmentsSelector, isVisibleSelector } = require('./points');
+const { pointsSelector, lineSegmentsSelector, isVisibleSelector, MASK_DESC } = require('./points');
const { xScaleSelector, yScaleSelector } = require('./scales');
const { Actions, configureStore } = require('./store');
const { createTooltip } = require('./tooltip');
@@ -62,10 +62,8 @@ const plotDataLine = function (elem, {visible, lines, tsDataKey, xScale, yScale}
.attr('d', tsLine);
}
else {
- let maskName = line.classes.dataMask.toLowerCase();
- if (maskName === '***') {
- maskName = 'unavailable';
- }
+ let maskCode = line.classes.dataMask.toLowerCase();
+ let maskDisplayName = MASK_DESC[maskCode].replace(' ', '-').toLowerCase();
let xMaskExtent = extent(line.points, d => d.time);
let [xDomainStart, xDomainEnd] = xMaskExtent;
let [yRangeStart, yRangeEnd] = yScale.domain();
@@ -78,7 +76,7 @@ const plotDataLine = function (elem, {visible, lines, tsDataKey, xScale, yScale}
.attr('y', yScale(yRangeEnd))
.attr('width', xScale(xDomainEnd) - xScale(xDomainStart))
.attr('height', Math.abs(yScale(yRangeEnd)- yScale(yRangeStart)))
- .attr('class', `mask ${maskName}-mask`);
+ .attr('class', `mask ${maskDisplayName}-mask`);
let patternId = tsDataKey === 'compare' ? 'url(#hash-135)' : 'url(#hash-45)';
diff --git a/assets/src/scripts/components/hydrograph/legend.js b/assets/src/scripts/components/hydrograph/legend.js
index b77c7f4b8..bc8f8cf9e 100644
--- a/assets/src/scripts/components/hydrograph/legend.js
+++ b/assets/src/scripts/components/hydrograph/legend.js
@@ -2,6 +2,7 @@
const { createSelector } = require('reselect');
const { defineLineMarker, defineCircleMarker, defineRectangleMarker, rectangleMarker } = require('./markers');
const { CIRCLE_RADIUS } = require('./layout');
+const { MASK_DESC } = require('./points');
/**
@@ -146,10 +147,9 @@ const createLegendMarkers = function(dataPlotElements, lineSegments=[]) {
lineSegments.map(segment => masks.push(segment.classes.dataMask));
let uniqueMasks = new Set(masks.filter(x => x !== null));
for (let uniqueMask of uniqueMasks) {
- let maskLower = uniqueMask.toLowerCase();
- let maskClass = `${maskLower}-mask`;
- let maskText = maskLower.charAt(0).toUpperCase() + maskLower.slice(1);
- marker = defineRectangleMarker(null, maskClass, maskText, null);
+ let maskDisplayName = MASK_DESC[uniqueMask];
+ let maskClass = `${maskDisplayName.replace(' ', '-').toLowerCase()}-mask`;
+ marker = defineRectangleMarker(null, maskClass, maskDisplayName, null);
legendMarkers.push(marker);
}
return legendMarkers;
diff --git a/assets/src/scripts/components/hydrograph/legend.spec.js b/assets/src/scripts/components/hydrograph/legend.spec.js
index 2e27a5932..8de61a630 100644
--- a/assets/src/scripts/components/hydrograph/legend.spec.js
+++ b/assets/src/scripts/components/hydrograph/legend.spec.js
@@ -109,7 +109,7 @@ describe('Legend module', () => {
]);
});
- fit('should line segment markers for display', () => {
+ it('should line segment markers for display', () => {
let result = createLegendMarkers({
dataItems: ['current', 'medianStatistics'],
metadata: {
@@ -120,11 +120,11 @@ describe('Legend module', () => {
}
}, [
{
- classes: {approved: false, estimated: false, dataMask: 'ICE'},
+ classes: {approved: false, estimated: false, dataMask: 'ice'},
points: []
},
{
- classes: {approved: false, estimated: false, dataMask: 'FLD'},
+ classes: {approved: false, estimated: false, dataMask: 'eqp'},
points: []
}
]);
@@ -164,8 +164,8 @@ describe('Legend module', () => {
{
type: rectangleMarker,
domId: null,
- domClass: 'fld-mask',
- text: 'Flood',
+ domClass: 'equipment-malfunction-mask',
+ text: 'Equipment Malfunction',
groupId: null,
fill: null
}
diff --git a/assets/src/scripts/components/hydrograph/points.js b/assets/src/scripts/components/hydrograph/points.js
index 7cf939818..d16950082 100644
--- a/assets/src/scripts/components/hydrograph/points.js
+++ b/assets/src/scripts/components/hydrograph/points.js
@@ -1,6 +1,22 @@
const { createSelector, defaultMemoize: memoize } = require('reselect');
const { setEquality } = require('../../utils');
+const MASK_DESC = {
+ ice: 'Ice',
+ fld: 'Flood',
+ bkw: 'Backwater',
+ zfl: 'Zeroflow',
+ dry: 'Dry',
+ ssn: 'Seasonal',
+ pr: 'Partial Record',
+ rat: 'Rating Development',
+ eqp: 'Equipment Malfunction',
+ mnt: 'Maintenance',
+ dis: 'Discontinued',
+ tst: 'Test',
+ pmp: 'Pump',
+ '***': 'Unavailable'
+};
/**
* Returns the points for a given timeseries.
@@ -41,22 +57,7 @@ const lineSegmentsSelector = memoize(tsDataKey => createSelector(
let lastClasses = {};
- const masks = new Set([
- 'ICE',
- 'FLD',
- 'BKW',
- 'ZFL',
- 'DRY',
- 'SSN',
- 'PR',
- 'RAT',
- 'EQP',
- 'MNT',
- 'DIS',
- '***',
- 'TST',
- 'PMP'
- ]);
+ const masks = new Set(Object.keys(MASK_DESC));
for (let pt of points) {
// Classes to put on the line with this point.
@@ -66,7 +67,7 @@ const lineSegmentsSelector = memoize(tsDataKey => createSelector(
dataMask: null
};
if (pt.value === null) {
- let qualifiers = new Set(pt.qualifiers.map(q => q.toUpperCase()));
+ let qualifiers = new Set(pt.qualifiers.map(q => q.toLowerCase()));
// current business rules specify that a particular data point
// will only have at most one masking qualifier
let maskIntersection = new Set([...masks].filter(x => qualifiers.has(x)));
@@ -102,4 +103,4 @@ const lineSegmentsSelector = memoize(tsDataKey => createSelector(
));
-module.exports = { pointsSelector, lineSegmentsSelector, isVisibleSelector };
+module.exports = { pointsSelector, lineSegmentsSelector, isVisibleSelector, MASK_DESC };
diff --git a/assets/src/scripts/components/hydrograph/points.spec.js b/assets/src/scripts/components/hydrograph/points.spec.js
index ef9e2512b..66215350e 100644
--- a/assets/src/scripts/components/hydrograph/points.spec.js
+++ b/assets/src/scripts/components/hydrograph/points.spec.js
@@ -145,7 +145,7 @@ describe('Points module', () => {
classes: {
approved: false,
estimated: false,
- dataMask: 'ICE'
+ dataMask: 'ice'
},
points: [{
value: null,
@@ -158,7 +158,7 @@ describe('Points module', () => {
classes: {
approved: false,
estimated: false,
- dataMask: 'FLD'
+ dataMask: 'fld'
},
points: [{
value: null,
diff --git a/assets/src/styles/components/_hydrograph.scss b/assets/src/styles/components/_hydrograph.scss
index 8bfbddcc5..92135c684 100644
--- a/assets/src/styles/components/_hydrograph.scss
+++ b/assets/src/styles/components/_hydrograph.scss
@@ -102,37 +102,37 @@ $estimated: black;
.ice-mask {
fill: #33daff;
}
- .fld-mask {
+ .flood-mask {
fill: #0c7d40;
}
- .zfl-mask {
+ .zeroflow-mask {
fill: #f4f727;
}
.dry-mask {
fill: #9a9b77;
}
- .ssn-mask {
+ .seasonal-mask {
fill: #17fc04;
}
- .pr-mask {
+ .partial-record-mask {
fill: #ec14fe;
}
- .rat-mask {
+ .rating-development-mask {
fill: #fe141b;
}
- .eqp-mask {
+ .equipment-malfunction-mask {
fill: #0557fc;
}
- .mnt-mask {
+ .maintenance-mask {
fill: #01fab6;
}
.unavailable-mask {
fill: #abb2b9;
}
- .tst-mask {
+ .test-mask {
fill: #4729a5;
}
- .pmp-mask {
+ .pump-mask {
fill: #3498db;
}
}
--
GitLab