All files / components/hooks/lineChart useLineChartHandleHover.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useCallback } from "react";
import { pointer, select } from "d3";
import { DEFAULT_HEIGHT, DEFAULT_MARGIN } from "src/components/LineChart";
 
const useLineChartTooltipToggle = (
  xScale,
  filteredDataSet,
  getYValueAtX,
  margin,
  svgRef,
  tooltipRef
) => {
  return useCallback(
    (event: MouseEvent) => {
      if (!svgRef.current || !tooltipRef.current) return;
 
      const [x, y] = pointer(event, event.currentTarget as SVGElement);
      const xValue = xScale.invert(x);
 
      const tooltipTitle = `<div class="tooltip-title">${xValue}</div>`;
      const tooltipContent = filteredDataSet
        .map(data => {
          const yValue = getYValueAtX(data.series, xValue);
          return `<div>${data.label}: ${yValue ?? "N/A"}</div>`;
        })
        .join("");
 
      const tooltip = tooltipRef.current;
      tooltip.innerHTML = `<div style="background: #fff; padding: 5px">${tooltipTitle}${tooltipContent}</div>`;
 
      // Make tooltip visible to calculate its dimensions
      tooltip.style.opacity = "1";
      tooltip.style.visibility = "visible";
      tooltip.style.pointerEvents = "auto";
 
      // Get dimensions to check for overflow
      const tooltipRect = tooltip.getBoundingClientRect();
      const svgRect = svgRef.current.getBoundingClientRect();
 
      // Check for right edge overflow
      if (x + tooltipRect.width > svgRect.width - margin.right) {
        tooltip.style.left = x - tooltipRect.width - 10 + "px";
      } else {
        tooltip.style.left = x + 10 + "px";
      }
 
      // Check for top/bottom edge overflow
      if (y - tooltipRect.height < margin.top) {
        tooltip.style.top = y + 10 + "px";
      } else {
        tooltip.style.top = y - tooltipRect.height - 5 + "px";
      }
 
      const hoverLinesGroup = select(svgRef.current).select(".hover-lines");
      const hoverLine = hoverLinesGroup.select(".hover-line");
      const xPosition = xScale(xValue);
 
      hoverLine
        .attr("x1", xPosition)
        .attr("x2", xPosition)
        .attr("y1", DEFAULT_MARGIN.top)
        .attr("y2", DEFAULT_HEIGHT - DEFAULT_MARGIN.bottom + 20)
        .style("display", "block");
 
      hoverLinesGroup.style("display", "block");
    },
    [xScale, filteredDataSet, getYValueAtX, margin]
  );
};
 
export default useLineChartTooltipToggle;