From 18bee20eba2a70812dcc210c96ebe2ab062c8e39 Mon Sep 17 00:00:00 2001
From: Andrew Yan <ayan@usgs.gov>
Date: Mon, 12 Feb 2018 08:54:11 -0600
Subject: [PATCH] fix incorrect legend positioning on window resize
---
.../src/scripts/components/hydrograph/index.js | 7 ++++---
.../src/scripts/components/hydrograph/legend.js | 13 ++++++++++++-
.../components/hydrograph/legend.spec.js | 17 ++++++++++++++++-
3 files changed, 32 insertions(+), 5 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 06dc5796b..deef709d6 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -123,10 +123,10 @@ const plotTooltips = function (elem, {xScale, yScale, data}) {
};
-const plotLegend = function(elem, {displayItems}) {
+const plotLegend = function(elem, {displayItems, width}) {
elem.select('.legend').remove();
let markers = createLegendMarkers(displayItems);
- drawSimpleLegend(elem, markers);
+ drawSimpleLegend(elem, markers, width);
};
@@ -184,7 +184,8 @@ const timeSeriesGraph = function (elem) {
isInteractive: () => true
})))
.call(link(plotLegend, createStructuredSelector({
- displayItems: legendDisplaySelector
+ displayItems: legendDisplaySelector,
+ width: state => state.width
})))
.append('g')
.attr('transform', `translate(${MARGIN.left},${MARGIN.top})`)
diff --git a/assets/src/scripts/components/hydrograph/legend.js b/assets/src/scripts/components/hydrograph/legend.js
index a72688d4c..2b465a4f4 100644
--- a/assets/src/scripts/components/hydrograph/legend.js
+++ b/assets/src/scripts/components/hydrograph/legend.js
@@ -9,6 +9,7 @@ const { CIRCLE_RADIUS } = require('./layout');
*
* @param svg
* @param legendMarkers
+ * @param width
* @param startingXPosition
* @param markerYPosition
* @param textYPosition
@@ -17,6 +18,7 @@ const { CIRCLE_RADIUS } = require('./layout');
*/
function drawSimpleLegend(svg,
legendMarkers,
+ width=null,
startingXPosition=0,
markerYPosition=-4,
textYPosition=0,
@@ -69,7 +71,16 @@ function drawSimpleLegend(svg,
}
// center the legend group in the svg
let legendBBox = legend.node().getBBox();
- let legendXPosition = (svgBBox.width - legendBBox.width) / 2;
+
+ let legendXPosition;
+
+ if (width) {
+ legendXPosition = (width - legendBBox.width) / 2;
+ }
+ else {
+ legendXPosition = (svgBBox.width - legendBBox.width) / 2;
+ }
+
legend.attr('transform', `translate(${legendXPosition}, ${svgBBox.height-15})`);
}
diff --git a/assets/src/scripts/components/hydrograph/legend.spec.js b/assets/src/scripts/components/hydrograph/legend.spec.js
index 1e3849a3e..ba693852e 100644
--- a/assets/src/scripts/components/hydrograph/legend.spec.js
+++ b/assets/src/scripts/components/hydrograph/legend.spec.js
@@ -41,7 +41,7 @@ describe('Legend module', () => {
svgNode.remove();
});
- it('Adds a legend', () => {
+ it('Adds a legend when width is not provided', () => {
drawSimpleLegend(svgNode, legendMarkers);
expect(svgNode.selectAll('.legend').size()).toBe(1);
expect(svgNode.selectAll('line').size()).toBe(1);
@@ -52,8 +52,23 @@ describe('Legend module', () => {
expect(line.attr('x2')).toBe('20');
let circle = svgNode.select('circle');
expect(circle.attr('class')).toBe('some-other-class');
+ expect(select('g.legend').attr('transform')).toEqual('translate(-127.5, -15)');
});
+
+ it('Adds a legend when width is provided', () => {
+ drawSimpleLegend(svgNode, legendMarkers, 200);
+ expect(svgNode.selectAll('.legend').size()).toBe(1);
+ expect(svgNode.selectAll('line').size()).toBe(1);
+ expect(svgNode.selectAll('circle').size()).toBe(1);
+ expect(svgNode.selectAll('text').size()).toBe(2);
+ let line = svgNode.select('line');
+ expect(line.attr('x1')).toBe('0');
+ expect(line.attr('x2')).toBe('20');
+ let circle = svgNode.select('circle');
+ expect(circle.attr('class')).toBe('some-other-class');
+ expect(select('g.legend').attr('transform')).toEqual('translate(-27.5, -15)');
+ });
});
describe('createLegendMarkers', () => {
--
GitLab