diff --git a/assets/src/scripts/d3-rendering/tick-marks.js b/assets/src/scripts/d3-rendering/tick-marks.js index 96cda7ca2fcfc0a46bdcbd86a466e1979e315f36..4a856056d400b84ee0d7edd7d75a3a80e5c82cd2 100644 --- a/assets/src/scripts/d3-rendering/tick-marks.js +++ b/assets/src/scripts/d3-rendering/tick-marks.js @@ -39,14 +39,16 @@ const getTicks = function(startDateTime, endDateTime, interval, startOffset ) { * @param {String} ianaTimeZone - used when converting time in milliseconds to DateTime. * @return {Array of Number} - tick marks in milliseconds. */ -const getDefaultTicks = function (startMillis, endMillis, unit, tickCount, ianaTimeZone) { +const getDefaultTicks = function(startMillis, endMillis, unit, tickCount, ianaTimeZone) { + const addToEnd = {}; + addToEnd[unit] = 1; const tickInterval = (endMillis - startMillis) / (tickCount + 1); const endDateTime = DateTime.fromMillis(endMillis, {zone: ianaTimeZone}); let result = []; let dateTime = DateTime.fromMillis(startMillis + tickInterval / 2, {zone: ianaTimeZone}); while (dateTime < endDateTime) { - let tickDateTime = dateTime.startOf(unit); + let tickDateTime = dateTime.plus(addToEnd).startOf(unit); result.push(tickDateTime.toMillis()); dateTime = dateTime.plus(tickInterval); } @@ -137,7 +139,7 @@ export const generateTimeTicks = function(startMillis, endMillis, ianaTimeZone) dates: getTicks(startDateTime, endDateTime,{months: 2}, {months: 1}), format: formatFnc('MMM yyyy') }; - } else if (monthCount > 15 && monthCount <= 29){ + } else if (monthCount > 15 && monthCount <= 29) { // Tick marks every 4 months result = { dates: getTicks(startDateTime, endDateTime,{months: 4}, {months: 2}), diff --git a/assets/src/scripts/d3-rendering/tick-marks.spec.js b/assets/src/scripts/d3-rendering/tick-marks.spec.js index c630bee28fecd915ca4cc7bb9dd508b7147736a7..73b7b6a064184162a848582a769126334eb9ae5e 100644 --- a/assets/src/scripts/d3-rendering/tick-marks.spec.js +++ b/assets/src/scripts/d3-rendering/tick-marks.spec.js @@ -12,7 +12,7 @@ describe('generateTimeTicks', () => { expect(result.dates.length).toBe(4); expect(result.dates.map(result.format)).toEqual( - ['Mar 08 02:07 PM', 'Mar 08 02:52 PM', 'Mar 08 03:37 PM', 'Mar 08 04:22 PM'] + ['Mar 08 02:08 PM', 'Mar 08 02:53 PM', 'Mar 08 03:38 PM', 'Mar 08 04:23 PM'] ); expect(DateTime.fromMillis(result.dates[0], {zone: timeZone}).second).toBe(0); }); @@ -23,7 +23,7 @@ describe('generateTimeTicks', () => { expect(result.dates.length).toBe(4); expect(result.dates.map(result.format)).toEqual( - ['Mar 08 02:22 PM', 'Mar 08 03:37 PM', 'Mar 08 04:52 PM', 'Mar 08 06:07 PM'] + ['Mar 08 02:23 PM', 'Mar 08 03:38 PM', 'Mar 08 04:53 PM', 'Mar 08 06:08 PM'] ); expect(DateTime.fromMillis(result.dates[0], {zone: timeZone}).second).toBe(0); }); @@ -34,7 +34,7 @@ describe('generateTimeTicks', () => { expect(result.dates.length).toBe(4); expect(result.dates.map(result.format)).toEqual( - ['Mar 08 07:44 PM', 'Mar 09 07:44 AM', 'Mar 09 07:44 PM', 'Mar 10 07:44 AM'] + ['Mar 08 07:45 PM', 'Mar 09 07:45 AM', 'Mar 09 07:45 PM', 'Mar 10 07:45 AM'] ); expect(DateTime.fromMillis(result.dates[0], {zone: timeZone}).second).toBe(0); }); @@ -266,7 +266,7 @@ describe('generateTimeTicks', () => { expect(result.dates.length).toBe(7); expect(result.dates.map(result.format)).toEqual( - ['Oct 2018', 'Feb 2020', 'May 2021', 'Sep 2022', 'Dec 2023', 'Apr 2025', 'Jul 2026'] + ['Nov 2018', 'Mar 2020', 'Jun 2021', 'Oct 2022', 'Jan 2024', 'May 2025', 'Aug 2026'] ); expect(DateTime.fromMillis(result.dates[0], {zone: timeZone}).day).toBe(1); }); @@ -277,7 +277,7 @@ describe('generateTimeTicks', () => { expect(result.dates.length).toBe(7); expect(result.dates.map(result.format)).toEqual( - ['Aug 2019', 'Jun 2022', 'Apr 2025', 'Mar 2028', 'Jan 2031', 'Nov 2033', 'Oct 2036'] + ['Sep 2019', 'Jul 2022', 'May 2025', 'Apr 2028', 'Feb 2031', 'Dec 2033', 'Nov 2036'] ); expect(DateTime.fromMillis(result.dates[0], {zone: timeZone}).day).toBe(1); }); diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/axes.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/axes.js index 386818c3eb041fa6ab395a6caf4485772e650eb4..55cd3c207de633f4df43208dc735aacd303911f5 100644 --- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/axes.js +++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/axes.js @@ -12,7 +12,7 @@ import {getXScale, getBrushXScale, getYScale, getSecondaryYScale} from './scales import {getYLabel, getSecondaryYLabel, getTsTimeZone, TEMPERATURE_PARAMETERS} from './time-series-data'; -const createXAxis = function(xScale, period, ianaTimeZone) { +const createXAxis = function(xScale, ianaTimeZone) { const [startMillis, endMillis] = xScale.domain(); const ticks = generateTimeTicks(startMillis, endMillis, ianaTimeZone); return axisBottom() @@ -29,13 +29,12 @@ const createXAxis = function(xScale, period, ianaTimeZone) { * @param {Object} secondaryYscale - D3 Scale object for the secondary y-axis * @param {Number} yTickSize Size of inner ticks for the y-axis * @param {String} parmCd - parameter code of time series to be shown on the graph. - * @param {String} period - ISO duration for date range of the time series * @param {String} ianaTimeZone - Internet Assigned Numbers Authority designation for a time zone * @return {Object} {xAxis, yAxis, secondardYaxis} - D3 Axis */ -const createAxes = function(xScale, yScale, secondaryYScale, yTickDetails, yTickSize, parmCd, period, ianaTimeZone) { +const createAxes = function(xScale, yScale, secondaryYScale, yTickDetails, yTickSize, parmCd, ianaTimeZone) { // Create x-axis - const xAxis = createXAxis(xScale, period, ianaTimeZone); + const xAxis = createXAxis(xScale, ianaTimeZone); // Create y-axis const yAxis = axisLeft() @@ -95,7 +94,7 @@ export const getAxes = memoize(kind => createSelector( getCurrentParmCd, getCurrentDateRangeKind, getSecondaryYLabel, - (xScale, yScale, secondaryYScale, yTickDetails, layout, plotYLabel, ianaTimeZone, parmCd, currentDateRange, plotSecondaryYLabel) => { + (xScale, yScale, secondaryYScale, yTickDetails, layout, plotYLabel, ianaTimeZone, parmCd, plotSecondaryYLabel) => { return { ...createAxes( xScale, @@ -104,7 +103,6 @@ export const getAxes = memoize(kind => createSelector( yTickDetails, -layout.width + layout.margin.right, parmCd, - currentDateRange, ianaTimeZone ), layout: layout,