From f6a0006ea423eedd81e2a8642b530f88674bbcc5 Mon Sep 17 00:00:00 2001
From: keyurx11 <keyurx11@gmail.com>
Date: Thu, 19 Sep 2024 17:20:25 +0100
Subject: [PATCH] FSR-1294: Add logic to wrap text for the threshold label on
 the station chart

---
 server/src/js/components/chart.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/server/src/js/components/chart.js b/server/src/js/components/chart.js
index 227a6ee4e..4fd5241d6 100644
--- a/server/src/js/components/chart.js
+++ b/server/src/js/components/chart.js
@@ -776,18 +776,24 @@ function LineChart (containerId, stationId, data, options = {}) {
         .attr('class', 'threshold__line')
         .attr('aria-hidden', true)
         .attr('x2', xScale(xExtent[1])).attr('y2', 0)
-      const label = thresholdContainer.append('g')
-        .attr('class', 'threshold-label')
+      // Construct label text and split into lines of up to 35 characters
+      const thresholdLabel = `${threshold.level}m ${threshold.name}`
+      const labelSegments = thresholdLabel.match(/.{1,35}(\s|$)/g).map(line => line.trim())
+      const label = thresholdContainer.append('g').attr('class', 'threshold-label')
       const path = label.append('path')
         .attr('aria-hidden', true)
         .attr('class', 'threshold-label__bg')
       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}`)
+      // Add each line of the split text (up to 35 characters per line) as separate tspans
+      labelSegments.forEach((line, i) => {
+        text.append('tspan').attr('x', 10).attr('y', (i + 1) * 22).text(line.trim())
+      })
       const textWidth = Math.round(text.node().getBBox().width)
-      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)`)
+      const textHeight = Math.round(text.node().getBBox().height)
+      path.attr('d', `m-0.5,-0.5 l${textWidth + 20},0 l0,${19 + textHeight} 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,-${19 + textHeight} l0,0`)
+      label.attr('transform', `translate(${Math.round(width / 2 - ((textWidth + 20) / 2))}, -${29 + textHeight})`)
       const remove = thresholdContainer.append('a')
         .attr('role', 'button')
         .attr('class', 'threshold__remove')