Function useStrokeDasharray

src/client/hooks/useStrokeDasharray.ts:109–188

({
  linesProps = [],
  dotIndex = -2,
  strokeDasharray: restStroke = [5, 3],
  curveCorrection = 1,
}: UseStrokeDasharrayProps)

} & LineProps;

export function useStrokeDasharray({
  linesProps = [],
  dotIndex = -2,
  strokeDasharray: restStroke = [5, 3],
  curveCorrection = 1,
}: UseStrokeDasharrayProps): [CalculateStrokeDasharray, LinesStrokeDasharray] {
  const linesStrokeDasharray = useRef<LinesStrokeDasharray>([]);

  const calculateStrokeDasharray = useCallback(
    (props: RechartsChartProps): null => {
      const items = props?.formattedGraphicalItems;

      const getLineWidth = (points: GraphicalItemPoint[]) => {
        const width = points?.reduce((acc, point, index) => {
          if (!index) return acc;

          const prevPoint = points?.[index - 1];

          const xAxis = point?.x || 0;
          const prevXAxis = prevPoint?.x || 0;
          const xWidth = xAxis - prevXAxis;

          const yAxis = point?.y || 0;
          const prevYAxis = prevPoint?.y || 0;
          const yWidth = Math.abs(yAxis - prevYAxis);

          const hypotenuse = Math.sqrt(xWidth * xWidth + yWidth * yWidth);
          acc += hypotenuse;
          return acc;
        }, 0);

        return width || 0;
      };

      items?.forEach((line) => {
        const linePoints = line?.props?.points ?? [];
        const lineWidth = getLineWidth(linePoints);

        const name = line?.item?.props?.dataKey;
        const targetLine = linesProps?.find((target) => target?.name === name);
        const targetIndex = targetLine?.dotIndex ?? dotIndex;
        const dashedPoints = linePoints?.slice(targetIndex);
        const dashedWidth = getLineWidth(dashedPoints);

        if (!lineWidth || !dashedWidth) return;

        const firstWidth = lineWidth - dashedWidth;
        const targetCurve = targetLine?.curveCorrection ?? curveCorrection;
        const correctionWidth = (firstWidth * targetCurve) / 100;
        const firstDasharray = firstWidth + correctionWidth;

        const targetRestStroke = targetLine?.strokeDasharray || restStroke;
        const gapDashWidth = targetRestStroke?.[0] + targetRestStroke?.[1] || 1;
        const restDasharrayLength = dashedWidth / gapDashWidth;
        const restDasharray = new Array(Math.ceil(restDasharrayLength)).fill(
          targetRestStroke.join(' ')
        );