Hilight the closest line to mouse on YR.no temperature graphs

yr-highlight-graph.js

// ==UserScript==
// @name         YR highlight graph
// @namespace    chivil.com
// @version      1.0
// @description  Hilight the closest line to mouse on temperature graphs
// @author       Romuald Brunet
// @match        https://www.yr.no/place/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const highlightColor = "#999999";

    const svg = document.querySelector(".meteogramme svg");
    if ( !svg ) return;

    const lines = svg.querySelectorAll("line")
    if ( !lines ) return;

    const hlines = [],
          vlines = [],
          colors = {"": -1};

    lines.forEach((line) => {
        const x1 = line.x1.baseVal.value,
              x2 = line.x2.baseVal.value,
              y1 = line.y1.baseVal.value,
              y2 = line.y2.baseVal.value,
              xlen = Math.abs(x1 - x2),
              ylen = Math.abs(y1 - y2),
              color = line.getAttribute("stroke");

        if ( y1 == y2 && xlen > 20 ) {
            hlines.push({line: line, y: y1, color: color});
            colors[color] ? colors[color]++ : colors[color] = 1;
        } else if ( x1 == x2 && ylen > 20 ) {
            vlines.push({line: line, x: x1, color: color});
            colors[color] ? colors[color]++ : colors[color] = 1;
        }
    })

    let defaultColor = "";
    for ( let color in colors ) {
        if ( colors[color] > colors[defaultColor] ) {
            defaultColor = color;
        }
    }

    for (let i = 0; i < hlines.length; i++) {
        if ( hlines[i].color != defaultColor ) {
            hlines.splice(i--, 1)
        }
    }
    for (let i = 0; i < vlines.length; i++) {
        if ( vlines[i].color != defaultColor ) {
            vlines.splice(i--, 1)
        }
    }

    const root = hlines[0].line.parentNode;
    root.addEventListener("mousemove", (evt) => {
        const dim = root.getBoundingClientRect(),
              x = evt.clientX - dim.left,
              y = evt.clientY - dim.top;

        let i;
        let hClosest = {line: null, d: 9999},
            vClosest = {line: null, d: 9999};

        for (i=0; i < hlines.length; i++) {
            const line = hlines[i];
            const dist = Math.abs(y - line.y);
            if ( dist < hClosest.d ) {
                hClosest = {line: line.line, d: dist};
            }
            line.line.setAttribute("stroke", defaultColor);
        }

        for (i=0; i < vlines.length; i++) {
            const line = vlines[i];
            const dist = Math.abs(x - line.x);
            if ( dist < vClosest.d ) {
                vClosest = {line: line.line, d: dist};
            }
            line.line.setAttribute("stroke", defaultColor);
        }

        if ( hClosest.line ) {
            hClosest.line.setAttribute("stroke", highlightColor);
        }

        if ( vClosest.line ) {
            vClosest.line.setAttribute("stroke", highlightColor);
        }
    })

    svg.addEventListener("mouseout", (evt) => {
        vlines.forEach((line) => {
            line.line.setAttribute("stroke", defaultColor);
        })
        hlines.forEach((line) => {
            line.line.setAttribute("stroke", defaultColor);
        })
    })
 })();