From df6f1293fab7f41255c3dc004a4d22356386da6b Mon Sep 17 00:00:00 2001
From: Andrew Yan <ayan@usgs.gov>
Date: Wed, 2 May 2018 13:32:05 -0500
Subject: [PATCH] remove median points
---
.../scripts/components/hydrograph/index.js | 26 -----------------
.../components/hydrograph/index.spec.js | 1 -
.../scripts/components/hydrograph/legend.js | 6 ++--
.../components/hydrograph/legend.spec.js | 12 ++++----
.../scripts/components/hydrograph/markers.js | 27 -----------------
.../components/hydrograph/markers.spec.js | 29 +------------------
.../styles/components/hydrograph/_app.scss | 21 ++------------
7 files changed, 11 insertions(+), 111 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index e30620af6..e4feaed9d 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -200,32 +200,6 @@ const plotMedianPoints = function (elem, {xscale, yscale, modulo, points}) {
.classed('median-step', true)
.classed(`median-step-${modulo}`, true)
.attr('d', stepFunction);
- medianGrp.selectAll('medianPoint')
- .data(points)
- .enter()
- .append('circle')
- .classed('median-data-series', true)
- .classed(`median-modulo-${modulo}`, true)
- .attr('r', function(d, i) {
- if (points.length > 1) {
- if (points[0].dateTime.getDate() < points[1].dateTime.getDate() &&
- points[points.length - 1].dateTime.getDate() === points[points.length - 2].dateTime.getDate()) {
- if (i === 0 || i === points.length - 1) {
- return 0;
- } else {
- return CIRCLE_RADIUS;
- }
- }
- } else {
- return CIRCLE_RADIUS;
- }
- })
- .attr('cx', function(d) {
- return xscale(d.dateTime);
- })
- .attr('cy', function(d) {
- return yscale(d.value);
- });
};
/**
diff --git a/assets/src/scripts/components/hydrograph/index.spec.js b/assets/src/scripts/components/hydrograph/index.spec.js
index 20d009567..e7f8bf679 100644
--- a/assets/src/scripts/components/hydrograph/index.spec.js
+++ b/assets/src/scripts/components/hydrograph/index.spec.js
@@ -289,7 +289,6 @@ describe('Hydrograph charting module', () => {
});
it('should have a point for the median stat data with a label', () => {
- expect(selectAll('#median-points circle.median-data-series').size()).toBe(3);
expect(selectAll('#median-points path').size()).toBe(1);
expect(selectAll('#median-points text').size()).toBe(0);
});
diff --git a/assets/src/scripts/components/hydrograph/legend.js b/assets/src/scripts/components/hydrograph/legend.js
index e14936445..69ec1b0b9 100644
--- a/assets/src/scripts/components/hydrograph/legend.js
+++ b/assets/src/scripts/components/hydrograph/legend.js
@@ -3,7 +3,7 @@ const memoize = require('fast-memoize');
const { createSelector } = require('reselect');
const { CIRCLE_RADIUS } = require('./layout');
-const { defineLineMarker, defineTextOnlyMarker, defineMedianMarker, defineRectangleMarker} = require('./markers');
+const { defineLineMarker, defineTextOnlyMarker, defineRectangleMarker} = require('./markers');
const { currentVariableLineSegmentsSelector, HASH_ID, MASK_DESC} = require('./drawingData');
const { currentVariableTimeSeriesSelector } = require('./timeSeries');
@@ -89,12 +89,12 @@ const createLegendMarkers = function(displayItems) {
const dateText = years.join(' - ');
const descriptionText = stats.description ? `${stats.description} ` : '';
- const classes = `median-data-series median-modulo-${index % 6}`;
+ const classes = `median-data-series median-step median-step-${index % 6}`;
const label = `${descriptionText}${dateText}`;
legendMarkers.push([
defineTextOnlyMarker(TS_LABEL.median),
- defineMedianMarker(CIRCLE_RADIUS, null, classes, label)]);
+ defineLineMarker(null, classes, label)]);
}
}
diff --git a/assets/src/scripts/components/hydrograph/legend.spec.js b/assets/src/scripts/components/hydrograph/legend.spec.js
index 54d90f4e5..b3f30858f 100644
--- a/assets/src/scripts/components/hydrograph/legend.spec.js
+++ b/assets/src/scripts/components/hydrograph/legend.spec.js
@@ -1,7 +1,7 @@
const { select } = require('d3-selection');
const { drawSimpleLegend, legendMarkerRowsSelector } = require('./legend');
-const { lineMarker, rectangleMarker, textOnlyMarker, medianMarker } = require('./markers');
+const { lineMarker, rectangleMarker, textOnlyMarker } = require('./markers');
describe('Legend module', () => {
@@ -28,11 +28,10 @@ describe('Legend module', () => {
domClass: 'text-class',
text: 'Label'
}, {
- type: medianMarker,
- r: 4,
+ type: lineMarker,
domId: null,
domClass: 'some-other-class',
- text: 'Circle Text'
+ text: 'Median Label'
}]
];
const layout = {
@@ -77,7 +76,6 @@ describe('Legend module', () => {
expect(container.select('svg').size()).toBe(1);
expect(container.selectAll('line').size()).toBe(2);
- expect(container.selectAll('circle').size()).toBe(1);
expect(container.selectAll('rect').size()).toBe(1);
expect(container.selectAll('text').size()).toBe(4);
});
@@ -221,7 +219,7 @@ describe('Legend module', () => {
expect(result[0][2].type).toEqual(lineMarker);
expect(result[1].length).toBe(2);
expect(result[1][0].type).toEqual(textOnlyMarker);
- expect(result[1][1].type).toEqual(medianMarker);
+ expect(result[1][1].type).toEqual(lineMarker);
});
it('Should return markers only for time series shown', () => {
@@ -243,7 +241,7 @@ describe('Legend module', () => {
expect(result.length).toBe(1);
expect(result[0].length).toBe(2);
expect(result[0][0].type).toEqual(textOnlyMarker);
- expect(result[0][1].type).toEqual(medianMarker);
+ expect(result[0][1].type).toEqual(lineMarker);
});
});
});
diff --git a/assets/src/scripts/components/hydrograph/markers.js b/assets/src/scripts/components/hydrograph/markers.js
index 51361f0e9..43fc4e626 100644
--- a/assets/src/scripts/components/hydrograph/markers.js
+++ b/assets/src/scripts/components/hydrograph/markers.js
@@ -98,21 +98,6 @@ export const lineMarker = function(elem, {x, y, length, text=null, domId=null, d
};
-export const medianMarker = function (elem, {r, x, y, text=null, domId=null, domClass=null, fill=null}) {
- let group = circleMarker(elem, {r: r, x: x, y: y, text: text, domId, domClass: domClass, fill: fill});
- let line = group.append('line')
- .attr('x1', x - 2.5*r)
- .attr('x2', x + 2.5*r)
- .attr('y1', y + Y_OFFSET)
- .attr('y2', y + Y_OFFSET);
- if (domClass !== null) {
- let lineClasses = domClass.replace('modulo', 'step').split(' ');
- lineClasses.splice(lineClasses.length - 1, 0, 'median-step');
- lineClasses.forEach(cls => line.classed(cls, true));
- }
- return group;
-};
-
export const textOnlyMarker = function(elem, {x, y, text, domId=null, domClass=null}) {
const group = elem.append('g');
let markerText = group.append('text')
@@ -159,15 +144,3 @@ export const defineRectangleMarker = function(domId=null, domClass=null, text=nu
};
};
-
-export const defineMedianMarker = function(radius, domId=null, domClass=null, text=null, fill=null) {
- return {
- type: medianMarker,
- r: radius,
- domId: domId,
- domClass: domClass,
- text: text,
- fill: fill
- };
-};
-
diff --git a/assets/src/scripts/components/hydrograph/markers.spec.js b/assets/src/scripts/components/hydrograph/markers.spec.js
index 761ca2497..c18094174 100644
--- a/assets/src/scripts/components/hydrograph/markers.spec.js
+++ b/assets/src/scripts/components/hydrograph/markers.spec.js
@@ -1,6 +1,6 @@
const { select } = require('d3-selection');
-const { lineMarker, circleMarker, rectangleMarker, textOnlyMarker, medianMarker } = require('./markers');
+const { lineMarker, circleMarker, rectangleMarker, textOnlyMarker } = require('./markers');
describe('Markers module', () => {
@@ -170,31 +170,4 @@ describe('Markers module', () => {
expect(markerText.attr('id')).toBe(domId);
});
});
-
- describe('medianMarker', () => {
- let r = 10;
- let x = 2;
- let y = 9;
- let domId = 'marker-id';
- let domClass = 'median-modulo-13';
-
- it('returns elements with correct attributes', () => {
- let marker = medianMarker(svg, {r: r, x: x, y: y, domId: domId, domClass: domClass});
- let circleNode = marker.select('circle').node();
- let lineNode = marker.select('line').node();
-
- expect(circleNode.nodeName).toBe('circle');
- expect(circleNode.getAttribute('r')).toBe('10');
- expect(circleNode.getAttribute('cx')).toBe('2');
- expect(circleNode.getAttribute('cy')).toBe('5');
-
- expect(lineNode.nodeName).toBe('line');
- expect(lineNode.getAttribute('x1')).toBe('-23');
- expect(lineNode.getAttribute('x2')).toBe('27');
- expect(lineNode.getAttribute('y1')).toBe('5');
- expect(lineNode.getAttribute('y2')).toBe('5');
-
- expect(lineNode.getAttribute('class')).toBe('median-step median-step-13');
- });
- });
});
diff --git a/assets/src/styles/components/hydrograph/_app.scss b/assets/src/styles/components/hydrograph/_app.scss
index d6df97ed3..27ea352d0 100644
--- a/assets/src/styles/components/hydrograph/_app.scss
+++ b/assets/src/styles/components/hydrograph/_app.scss
@@ -215,27 +215,10 @@
}
}
.median-data-series {
- &.median-modulo-0 {
- fill: #f96713;
- }
- &.median-modulo-1 {
- fill: #0c7d40;
- }
- &.median-modulo-2 {
- fill: #0557fc;
- }
- &.median-modulo-3 {
- fill: #f4f727;
- }
- &.median-modulo-4 {
- fill: #01fab6;
- }
- &.median-modulo-5 {
- fill: #9a9b77;
- }
&.median-step {
fill: none;
- stroke-width: 2px;
+ stroke-width: 1px;
+ stroke-dasharray: 4, 4;
&.median-step-0 {
stroke: #f96713;
}
--
GitLab