FSR-1294: Refactor

server/src/js/components/chart.js

@@ -777,19 +777,16 @@ function LineChart (containerId, stationId, data, options = {}) {
         .attr('aria-hidden', true)
         .attr('x2', xScale(xExtent[1])).attr('y2', 0)
       // 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 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')
         .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: ')
-      // 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())
-      })
+      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,${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`)