added links to flood warnings target areas in thresholds

server/models/views/lib/find-min-threshold.js

@@ -31,7 +31,7 @@ function filterImtdThresholds (imtdThresholds) {
 
   return {
     alert: minObjectA ? minObjectA.value : null,
-    warning: minObjectW ? minObjectW.value : null
+    warning: minObjectW || null
   }
 }
 

server/models/views/lib/process-imtd-thresholds.js

@@ -17,17 +17,26 @@ function processThreshold (threshold, stationStageDatum, stationSubtract, postPr
 function processImtdThresholds (imtdThresholds, stationStageDatum, stationSubtract, postProcess) {
   const thresholds = []
 
-  const imtdThresholdWarning = processThreshold(imtdThresholds?.warning, stationStageDatum, stationSubtract, postProcess)
+  const imtdThresholdWarning = processThreshold(imtdThresholds?.warning?.value, stationStageDatum, stationSubtract, postProcess)
+  // Correct threshold value if value > zero (Above Ordnance Datum) [FSR-595]
   if (imtdThresholdWarning) {
-    // Correct threshold value if value > zero (Above Ordnance Datum) [FSR-595]
-    thresholds.push({
-      id: 'warningThreshold',
-      description: 'Property flooding is possible above this level. One or more flood warnings may be issued',
-      shortname: 'Possible flood warnings',
-      value: imtdThresholdWarning
-    })
+    if (imtdThresholds.warning.severity_value) {
+      const warningType = imtdThresholds.warning.severity_value === 3 ? 'Severe Flood Warning' : 'Flood Warning'
+      thresholds.push({
+        id: 'warningThreshold',
+        description: `${warningType} issued: <a href="/target-area/${imtdThresholds.warning.fwis_code}">${imtdThresholds.warning.ta_name}</a>`,
+        shortname: 'Possible flood warnings',
+        value: imtdThresholdWarning
+      })
+    } else {
+      thresholds.push({
+        id: 'warningThreshold',
+        description: 'Property flooding is possible above this level. One or more flood warnings may be issued',
+        shortname: 'Possible flood warnings',
+        value: imtdThresholdWarning
+      })
+    }
   }
-
   const imtdThresholdAlert = processThreshold(imtdThresholds?.alert, stationStageDatum, stationSubtract, postProcess)
   if (imtdThresholdAlert) {
     thresholds.push({

server/models/views/station.js

@@ -170,7 +170,7 @@ class ViewModel {
 
       oneHourAgo.setHours(oneHourAgo.getHours() - 1)
 
-      // check if recent value is over one hour old0
+      // check if recent value is over one hour old
       this.dataOverHourOld = new Date(this.recentValue.ts) < oneHourAgo
 
       this.recentValue.dateWhen = 'on ' + moment.tz(this.recentValue.ts, tz).format('D/MM/YY')
@@ -248,7 +248,7 @@ class ViewModel {
         id: 'highest',
         value: this.station.porMaxValue,
         description: this.station.thresholdPorMaxDate
-          ? 'Water reaches the highest level recorded at this measuring station (recorded on ' + this.station.thresholdPorMaxDate + ')'
+          ? `Water reaches the highest level recorded at this measuring station (${this.station.thresholdPorMaxDate})`
           : 'Water reaches the highest level recorded at this measuring station',
         shortname: 'Highest level on record'
       })
@@ -268,7 +268,7 @@ class ViewModel {
     thresholds.push(...processedImtdThresholds)
 
     if (this.station.percentile5) {
-      // Only push typical range if it has a percentil5
+      // Only push typical range if it has a percentile5
       thresholds.push({
         id: 'pc5',
         value: this.station.percentile5,

server/routes/station.js

@@ -10,6 +10,7 @@ module.exports = {
   handler: async (request, h) => {
     const { id } = request.params
     let { direction } = request.params
+    // const thresholdId = request.query.tid?
 
     // Convert human readable url to service parameter
     direction = direction === 'downstream' ? 'd' : 'u'

server/src/js/components/chart.js

@@ -2,13 +2,13 @@
 // Chart component
 
 import '../utils'
+import { area as d3Area, line as d3Line, curveMonotoneX } from 'd3-shape'
 import { axisBottom, axisLeft } from 'd3-axis'
 import { scaleLinear, scaleBand, scaleTime } from 'd3-scale'
 import { timeFormat } from 'd3-time-format'
+import { timeHour, timeMinute } from 'd3-time'
 import { select, selectAll, pointer } from 'd3-selection'
 import { max, bisector, extent } from 'd3-array'
-import { timeHour, timeMinute } from 'd3-time'
-import { area as d3Area, line as d3Line, curveMonotoneX } from 'd3-shape'
 
 const { forEach, simplify } = window.flood.utils
 
@@ -776,6 +776,9 @@ function LineChart (containerId, stationId, data, options = {}) {
         .attr('class', 'threshold__line')
         .attr('aria-hidden', true)
         .attr('x2', xScale(xExtent[1])).attr('y2', 0)
+
+      // Label
+      const copy = `${threshold.level}m ${threshold.name}`.match(/[\s\S]{1,35}(?!\S)/g, '$&\n')
       const label = thresholdContainer.append('g')
         .attr('class', 'threshold-label')
       const path = label.append('path')
@@ -784,10 +787,13 @@ function LineChart (containerId, stationId, data, options = {}) {
       const text = label.append('text')
         .attr('class', 'threshold-label__text')
       text.append('tspan').attr('font-size', 0).text('Threshold: ')
-      text.append('tspan').attr('x', 10).attr('y', 22).text(`${threshold.level}m ${threshold.name}`)
+      copy.map((l, i) => text.append('tspan').attr('x', 10).attr('y', (i + 1) * 22).text(l.trim()))
       const textWidth = Math.round(text.node().getBBox().width)
+      const textHeight = Math.round(text.node().getBBox().height)
       path.attr('d', `m-0.5,-0.5 l${textWidth + 20},0 l0,36 l-${((textWidth + 20) / 2) - 7.5},0 l-7.5,7.5 l-7.5,-7.5 l-${((textWidth + 20) / 2) - 7.5},0 l0,-36 l0,0`)
-      label.attr('transform', `translate(${Math.round(width / 2 - ((textWidth + 20) / 2))}, -46)`)
+      label.attr('transform', `translate(${Math.round(width / 2 - ((textWidth + 20) / 2))}, -${29 + textHeight})`)
+
+      // Remove button
       const remove = thresholdContainer.append('a')
         .attr('role', 'button')
         .attr('class', 'threshold__remove')
@@ -800,6 +806,7 @@ function LineChart (containerId, stationId, data, options = {}) {
       remove.append('circle').attr('class', 'threshold__remove-button').attr('r', 11)
       remove.append('line').attr('x1', -3).attr('y1', -3).attr('x2', 3).attr('y2', 3)
       remove.append('line').attr('y1', -3).attr('x2', -3).attr('x1', 3).attr('y2', 3)
+
       // Set individual elements size and position
       thresholdContainer.attr('transform', 'translate(0,' + Math.round(yScale(threshold.level)) + ')')
     })
@@ -931,7 +938,7 @@ function LineChart (containerId, stationId, data, options = {}) {
   const showTooltip = (tooltipY = 10) => {
     if (!dataPoint) return
     // Hide threshold label
-    thresholdsContainer.select('.threshold--selected .threshold-label').style('visibility', 'hidden')
+    // thresholdsContainer.select('.threshold--selected .threshold-label').style('visibility', 'hidden')
     // Set tooltip text
     const value = dataCache.type === 'river' && (Math.round(dataPoint.value * 100) / 100) <= 0 ? '0' : dataPoint.value.toFixed(2) // *DBL below zero addition
     tooltipValue.text(`${value}m`) // *DBL below zero addition
@@ -1109,7 +1116,8 @@ function LineChart (containerId, stationId, data, options = {}) {
   //
 
   const defaults = {
-    btnAddThresholdClass: 'defra-button-text-s'
+    btnAddThresholdClass: 'defra-button-text-s',
+    btnAddThresholdText: 'Show on chart <span class="govuk-visually-hidden">(Visual only)</span>'
   }
   options = Object.assign({}, defaults, options)
 
@@ -1170,16 +1178,30 @@ function LineChart (containerId, stationId, data, options = {}) {
   const tooltipDescription = tooltipText.append('tspan').attr('class', 'tooltip-text').attr('x', 12).attr('dy', '1.4em')
 
   // Add optional 'Add threshold' buttons
-  document.querySelectorAll('[data-threshold-add]').forEach(container => {
-    const button = document.createElement('button')
-    button.className = options.btnAddThresholdClass
-    button.innerHTML = `Show<span class="govuk-visually-hidden"> ${container.getAttribute('data-level')}m threshold</span> on chart <span class="govuk-visually-hidden">(Visual only)</span>`
-    button.setAttribute('aria-controls', `${containerId}-visualisation`)
-    button.setAttribute('data-id', container.getAttribute('data-id'))
-    button.setAttribute('data-threshold-add', '')
-    button.setAttribute('data-level', container.getAttribute('data-level'))
-    button.setAttribute('data-name', container.getAttribute('data-name'))
-    container.parentElement.replaceChild(button, container)
+  document.querySelectorAll('[data-threshold-add]').forEach((container, i) => {
+    const tooltip = document.createElement('div')
+    tooltip.className = 'defra-tooltip defra-tooltip--left'
+    tooltip.setAttribute('data-tooltip', '')
+    tooltip.innerHTML = `
+      <button class="${options.btnAddThresholdClass}"
+        aria-labelledby="tooltip-${i}"
+        aria-controls="${containerId}-visualisation"
+        data-id="${container.getAttribute('data-id')}"
+        data-level="${container.getAttribute('data-level')}"
+        data-name="${container.getAttribute('data-name')}"
+        data-threshold-add >
+        <svg width="20" height="20" viewBox="0 0 20 20" fill-rule="evenodd" fill="currentColor">
+          <path d="M2.75 14.443v2.791H18v1.5H1.25V1.984h1.5v7.967L6.789 4.91l5.016 4.013 5.056-5.899 2.278 1.952-6.944 8.101L7.211 9.09 2.75 14.443z"/>
+        </svg>
+      </button>
+      <div id="tooltip-${i}" class="defra-tooltip__label" role="tooltip">
+        <div class="defra-tooltip__label-inner govuk-body-s">
+          ${options.btnAddThresholdText}
+          <span class="govuk-visually-hidden>(visual only)</span>
+        </div>
+      </div>
+    `
+    container.parentElement.replaceChild(tooltip, container)
   })
 
   // Define globals
@@ -1241,8 +1263,8 @@ function LineChart (containerId, stationId, data, options = {}) {
     significantContainer.node().parentNode.classList.remove('significant--visible')
     // svg.select('.focussed-cell').remove()
     // Add threshold button
-    if (!e.target.hasAttribute('data-threshold-add')) return
-    const button = e.target
+    const button = e.target.closest('button')
+    if (!(button && button.hasAttribute('data-threshold-add'))) return
     addThreshold({
       id: button.getAttribute('data-id'),
       level: Number(button.getAttribute('data-level')),
@@ -1411,8 +1433,8 @@ if (document.getElementById('bar-chart')) {
 // Line chart
 if (document.getElementById('line-chart')) {
   const lineChart = window.flood.charts.createLineChart('line-chart', window.flood.model.id, window.flood.model.telemetry)
-  const thresholdId = 'threshold-pc5'
-  const threshold = document.querySelector(`[data-id="${thresholdId}"]`)
+  const thresholdId = `threshold-${window.flood.model.rloiId}-high`
+  const threshold = document.querySelector(`[data-id="${window.flood.utils.getParameterByName('tid') || thresholdId}"]`)
   if (threshold) {
     lineChart.addThreshold({
       id: thresholdId,