diff --git a/assets/src/scripts/d3-rendering/accessibility.js b/assets/src/scripts/d3-rendering/accessibility.js
index 2eb765e67419ed0430840cd86b5104e74596bc89..a2f5ecf69cb5c4d09fd9bb462aa32860fa7aa1ae 100644
--- a/assets/src/scripts/d3-rendering/accessibility.js
+++ b/assets/src/scripts/d3-rendering/accessibility.js
@@ -7,7 +7,9 @@
* @param {Boolean} isInteractive
* @param {String} idPrefix
*/
-export const addSVGAccessibility = function(svg, {title, description, isInteractive, idPrefix}) {
+export const addSVGAccessibility = function(svg, {primaryTitle, secondaryTitle, description, isInteractive, idPrefix}) {
+ const title = `${primaryTitle}${secondaryTitle ? ` -- ${secondaryTitle}` : ''}`;
+
svg.selectAll('title, desc').remove();
let descElement = svg.insert('desc', ':first-child')
.html(description);
diff --git a/assets/src/scripts/d3-rendering/accessibility.test.js b/assets/src/scripts/d3-rendering/accessibility.test.js
index c97d7a2ae01e288d98d15f6a278574c56ecf2613..500261646454f8d65eb5168f8e03b4c88cef55a6 100644
--- a/assets/src/scripts/d3-rendering/accessibility.test.js
+++ b/assets/src/scripts/d3-rendering/accessibility.test.js
@@ -17,7 +17,7 @@ describe('svgAccessibility tests', () => {
it('Should add a title and desc tags and aria attributes', () => {
addSVGAccessibility(svg, {
- title: 'This is a title',
+ primaryTitle: 'This is a title',
description: 'This is a description',
isInteractive: false,
idPrefix: 'prefix'
@@ -34,15 +34,35 @@ describe('svgAccessibility tests', () => {
expect(svg.attr('aria-describedby')).toContain('prefix-desc');
});
+ it('Should add a secondary title if needed and desc tags and aria attributes', () => {
+ addSVGAccessibility(svg, {
+ primaryTitle: 'This is a title',
+ secondaryTitle: 'with a second parameter',
+ description: 'This is a description',
+ isInteractive: false,
+ idPrefix: 'prefix'
+ });
+
+ const title = svg.selectAll('title');
+ const desc = svg.selectAll('desc');
+
+ expect(title.size()).toBe(1);
+ expect(desc.size()).toBe(1);
+ expect(title.html()).toEqual('This is a title -- with a second parameter');
+ expect(desc.html()).toEqual('This is a description');
+ expect(svg.attr('aria-labelledby')).toContain('prefix-title');
+ expect(svg.attr('aria-describedby')).toContain('prefix-desc');
+ });
+
it('Should remove the previous title and desc tags when called again', () => {
addSVGAccessibility(svg, {
- title: 'This is a title',
+ primaryTitle: 'This is a title',
description: 'This is a description',
isInteractive: false
});
addSVGAccessibility(svg, {
- title: 'That is a title',
+ primaryTitle: 'That is a title',
description: 'That is a description',
isInteractive: false
});
@@ -58,7 +78,7 @@ describe('svgAccessibility tests', () => {
it('Should not add a tabindex if isInteractive is false', () => {
addSVGAccessibility(svg, {
- title: 'This is a title',
+ primaryTitle: 'This is a title',
description: 'This is a description',
isInteractive: false
});
@@ -67,7 +87,7 @@ describe('svgAccessibility tests', () => {
it('Should add a tabindex if isInteractive is true', () => {
addSVGAccessibility(svg, {
- title: 'This is a title',
+ primaryTitle: 'This is a title',
description: 'This is a description',
isInteractive: true
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
index e2712f5fff1977a2445818df981a7d470c16768f..b24c602a40000f4cb53338406c67714d1ab869a7 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -335,7 +335,7 @@ describe('monitoring-location/components/hydrograph module', () => {
it('should have a defs node', () => {
expect(selectAll('defs').size()).toBe(1);
expect(selectAll('defs mask').size()).toBe(1);
- expect(selectAll('defs pattern').size()).toBe(2);
+ expect(selectAll('defs pattern').size()).toBe(3);
});
it('should render time series data as a line', () => {
@@ -441,7 +441,7 @@ describe('monitoring-location/components/hydrograph module', () => {
it('should have a defs node', () => {
expect(selectAll('defs').size()).toBe(1);
expect(selectAll('defs mask').size()).toBe(1);
- expect(selectAll('defs pattern').size()).toBe(2);
+ expect(selectAll('defs pattern').size()).toBe(3);
});
it('should render time series data as a line', () => {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/domain.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/domain.js
index 2770193800b06cdfa1f9bccc74fcdf64ce36ea86..439d8240ac4100a3f1bc6de255c96af7e7f3c304 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/domain.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/domain.js
@@ -223,7 +223,7 @@ export const getSecondaryValueRange = createSelector(
getIVDataRange('secondary'),
getIVParameter('secondary'),
(secondaryParameterRange, secondaryParameter) => {
- return extendDomain([Math.min(...secondaryParameterRange), Math.max(...secondaryParameterRange)], useSymlog(secondaryParameter));
+ return secondaryParameterRange ? extendDomain([Math.min(...secondaryParameterRange), Math.max(...secondaryParameterRange)], useSymlog(secondaryParameter)) : [0, 1];
}
);
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/iv-data.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/iv-data.js
index 45c0a1ffa44f0a4bfde2d8929b62ceabcf9f6ef2..a54545f2afac0bdc04618ffe4608d7a81bd4bd73 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/iv-data.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/iv-data.js
@@ -34,6 +34,7 @@ const APPROVAL_QUALIFIERS = {
export const HASH_ID = {
primary: 'hash-45',
+ secondary: 'hash-90',
compare: 'hash-135'
};
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js
index dc3fe05db23358b73e0b93d03fe006389efe33b5..5f792251ed72b8560129f8755db456c6ebbf368f 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js
@@ -18,7 +18,7 @@ import {getSelectedSecondaryParameterCode} from '../../../selectors/hydrograph-s
const TS_LABEL = {
'primary': 'Current: ',
- 'secondary': 'Secondary',
+ 'secondary': 'Secondary: ',
'compare': 'Last year: ',
'median': 'Median: '
};
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.test.js
index c1f802a0357e3f406a9341ad6956350ecc528ee2..21611256894613f1cece3a2baaa59205e93f1b80 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.test.js
@@ -7,6 +7,7 @@ import {getLegendMarkerRows} from './legend-data';
describe('monitoring-location/components/hydrograph/selectors/legend-data', () => {
config.ivPeriodOfRecord = {
'72019': {},
+ '00060': {},
'00010': {}
};
config.gwPeriodOfRecord = {
@@ -30,6 +31,28 @@ describe('monitoring-location/components/hydrograph/selectors/legend-data', () =
}
}
};
+
+ const TEST_SECONDARY_IV_DATA = {
+ parameter: {
+ parameterCode: '00060',
+ name: 'Streamflow, ft³/s',
+ description: 'Discharge, cubic feet per second',
+ unit: 'ft3/s'
+ },
+ values: {
+ 57466: {
+ points: [
+ {value: '12.6', qualifiers: ['P'], dateTime: 1582560900000},
+ {value: '12.6', qualifiers: ['A'], dateTime: 15825601800002},
+ {value: null, qualifiers: ['ICE'], dateTime: 1582561800000}
+ ],
+ method: {
+ methodDescription: '',
+ methodID: '57466'
+ }
+ }
+ }
+ };
const TEST_COMPARE_IV_DATA = {
parameter: {
parameterCode: '72019',
@@ -209,6 +232,37 @@ describe('monitoring-location/components/hydrograph/selectors/legend-data', () =
expect(compareRow[1].type).toEqual(textOnlyMarker);
});
+ it('expects to show markers for secondary parameter data', () => {
+ const markerRows = getLegendMarkerRows({
+ ...TEST_STATE,
+ hydrographData: {
+ primaryIVData: TEST_PRIMARY_IV_DATA,
+ secondaryIVData: TEST_SECONDARY_IV_DATA
+ },
+ groundwaterLevelData: {
+ all: []
+ },
+ dailyValueTimeSeriesData: {},
+ hydrographState: {
+ ...TEST_STATE.hydrographState,
+ selectedSecondaryParameterCode: '00060',
+ selectedSecondaryIVMethodID: '57466'
+ }
+ });
+
+ expect(markerRows).toHaveLength(3);
+ expect(markerRows[0][0].text).toEqual('Current: ');
+ expect(markerRows[0][1].text).toEqual('Provisional');
+ expect(markerRows[0][2].text).toEqual('Ice Affected');
+ expect(markerRows[1][0].text).toEqual('Secondary: ');
+ expect(markerRows[1][1].text).toEqual('Provisional');
+ expect(markerRows[1][2].text).toEqual('Approved');
+ expect(markerRows[1][3].text).toEqual('Ice Affected');
+ expect(markerRows[1][3].fill).toEqual('url(#hash-90)');
+ expect(markerRows[2][0].text).toEqual('Field visit: ');
+ expect(markerRows[2][1].text).toEqual('No data');
+ });
+
it('Should show markers for operational limits when limit is in graph range', () => {
const TEST_PRIMARY_IV_DATA = {
parameter: {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js
index a46303b1daef6a6a062752901c7c55c2299ffe0c..ff61065a74d26bb76241dfdd469c2a3500f04d3b 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js
@@ -40,6 +40,10 @@ const addDefsPatterns = function(elem) {
patternId: HASH_ID.primary,
patternTransform: 'rotate(45)'
}, {
+ patternId: HASH_ID.secondary,
+ patternTransform: 'rotate(90)'
+ },
+ {
patternId: HASH_ID.compare,
patternTransform: 'rotate(135)'
}];
@@ -194,7 +198,8 @@ export const initializeTimeSeriesGraph = function(elem, store, siteNo, agencyCod
.attr('height', layout.height - layout.margin.bottom);
}, getMainLayout))
.call(link(store, addSVGAccessibility, createStructuredSelector({
- title: getTitle('primary'),
+ primaryTitle: getTitle('primary'),
+ secondaryTitle: getTitle('secondary'),
description: getDescription,
isInteractive: () => true,
idPrefix: () => 'hydrograph'