All files / components/hooks/lineChart useColorMapping.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { easeQuadOut, select } from "d3";
import { useLayoutEffect } from "react";
 
const useLineChartColorMapping = (colorsMapping, getColor, svgRef, TRANSITION_DURATION) => {
  useLayoutEffect(() => {
    const svg = select(svgRef.current);
 
    // Use for loop instead of forEach for better performance
    for (const key of Object.keys(colorsMapping)) {
      // Update circle/point colors with transitions
      svg
        .selectAll(
          `circle[data-label="${key}"], rect[data-label="${key}"], path.data-point[data-label="${key}"]`
        )
        .transition()
        .duration(TRANSITION_DURATION)
        .ease(easeQuadOut) // Add consistent easing
        .attr("fill", getColor(colorsMapping[key], null));
 
      // Update path colors with proper selectors and transitions
      svg
        .selectAll(`.line[data-label="${key}"]`)
        .transition()
        .duration(TRANSITION_DURATION)
        .ease(easeQuadOut) // Add consistent easing
        .attr("stroke", getColor(colorsMapping[key], null))
        .attr("stroke-width", 2.5);
 
      // Update path overlay colors with transitions
      svg
        .selectAll(`.line-overlay[data-label="${key}"]`)
        .transition()
        .duration(TRANSITION_DURATION)
        .ease(easeQuadOut) // Add consistent easing
        .attr("stroke", getColor(colorsMapping[key], null));
    }
  }, [colorsMapping, getColor]);
};
 
export default useLineChartColorMapping;