From 2009d98226c3cef56398bc98ecfccf22b06c9abf Mon Sep 17 00:00:00 2001 From: Keyurx11 <58322871+Keyurx11@users.noreply.github.com> Date: Wed, 24 Jul 2024 08:59:31 +0100 Subject: [PATCH 1/9] FSR-1167 | Update Rainfall Bar Chart to 6 AM (#714) * https://eaflood.atlassian.net/browse/FSR-1167 * Update labelsHours to 6am for rainfall bar chart * Add test to verify X-axis ticks start at 6AM in 5-day BarChart --- server/src/js/components/bar-chart/index.mjs | 2 +- test/src/js/components/bar-chart.js | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/server/src/js/components/bar-chart/index.mjs b/server/src/js/components/bar-chart/index.mjs index b225bef06..55faa83c0 100644 --- a/server/src/js/components/bar-chart/index.mjs +++ b/server/src/js/components/bar-chart/index.mjs @@ -34,7 +34,7 @@ function BarChart (containerId, stationId, data) { xScale = xScale.range([0, width]).padding(0.4) const xAxis = axisBottom(xScale).tickSizeOuter(0).tickValues(xScale.domain().filter((d, i) => { const hourMinute = timeFormat('%H:%M')(new Date(d)) - const labelsHours = ['00:00'] + const labelsHours = ['06:00'] const labelsMinutes = ['00:00', '06:00', '12:00', '18:00'] const labels = period === 'hours' ? labelsHours : labelsMinutes return labels.includes(hourMinute) && i >= 2 // Don't show lable if before 3rd tick diff --git a/test/src/js/components/bar-chart.js b/test/src/js/components/bar-chart.js index 81104ed4b..500384e87 100644 --- a/test/src/js/components/bar-chart.js +++ b/test/src/js/components/bar-chart.js @@ -139,4 +139,21 @@ experiment('BarChart', () => { expect(description).to.contain('Showing 24 hours') expect(description).to.contain('from 17 July 2023 at 12:15AM to 18 July 2023 at 12:15AM in 15 minute totals') }) + test('The chart displays only 6AM ticks on the X axis for the 5-day range', async () => { + // Arrange + const chartId = 'example-chart-id' + const telemetry = telemetryFixture + const chartContainer = document.createElement('div') + chartContainer.setAttribute('id', 'bar-chart-container') + document.body.appendChild(chartContainer) + + // Act + window.flood.charts.createBarChart('bar-chart-container', chartId, telemetry) + chartContainer.querySelector('.defra-chart-controls__group--resolution .defra-chart-controls__button[data-period="hours"]').click() + + // Assert + const xAxisTicks = Array.from(chartContainer.querySelectorAll('.x.axis .tick text')).map(tick => tick.textContent) + const all6amTicks = xAxisTicks.every(tick => tick.includes('6am')) + expect(all6amTicks).to.be.true() + }) }) From c2dd52de5e89bf610af900f1484b6c6247fe7203 Mon Sep 17 00:00:00 2001 From: Keyurx11 <58322871+Keyurx11@users.noreply.github.com> Date: Thu, 25 Jul 2024 08:48:50 +0100 Subject: [PATCH 2/9] FSR-1059 | Standardize Tidal Station Titles and Meta Information (#715) * https://eaflood.atlassian.net/browse/FSR-1059 * Update tidal station titles for consistency * Add tests to verify correct station heading and meta title --- server/models/views/station.js | 10 ++- server/views/station.html | 4 +- test/routes/station.js | 138 +++++++++++++++++++++++++++++++++ 3 files changed, 147 insertions(+), 5 deletions(-) diff --git a/server/models/views/station.js b/server/models/views/station.js index e0d26d367..60096fe56 100644 --- a/server/models/views/station.js +++ b/server/models/views/station.js @@ -19,6 +19,7 @@ class ViewModel { this.station = new Station(station) this.station.riverNavigation = river this.id = station.id + this.river = river this.station.trend = river.trend @@ -213,12 +214,15 @@ class ViewModel { const stationType = stationTypeCalculator(this.station.type) const stationLocation = this.station.name - if (this.station.type === 'g') { + if (this.station.isGroundwater) { this.pageTitle = `Groundwater level at ${stationLocation}` this.postTitle = `Latest groundwater level information for ${this.station.name} borehole` - } else if (this.station.type === 'c') { + } else if (this.station.isCoastal && this.river.river_name !== 'Sea Levels') { + this.pageTitle = `${this.river.river_name} level at ${stationLocation}` + this.postTitle = `Latest tidal level information for the ${this.river.river_name} at ${this.station.name}` + } else if (this.station.isCoastal) { this.pageTitle = `Sea level at ${stationLocation}` - this.postTitle = `Latest tidal level information for the ${this.station.river} at ${this.station.name}` + this.postTitle = `Latest tidal level information for the sea at ${this.station.name}` } else { this.pageTitle = `${this.station.river} level ${this.station.isMulti ? this.station.direction + ' ' : ''}at ${stationLocation}` this.postTitle = `Latest river level information for the ${this.station.river} at ${this.station.name} ${this.station.isMulti ? this.station.direction : ''}` diff --git a/server/views/station.html b/server/views/station.html index c400d2951..e8ba4c561 100644 --- a/server/views/station.html +++ b/server/views/station.html @@ -27,8 +27,8 @@