17260410333

Committed 27 Aug 2025 07:37AM UTC coverage: 61.854% (-4.5%) from 66.348%

Build # 17260410333

Build Type

Pull #131

github

Committed by

web-flow

Commit Message

Merge 3d5c9d541 into cc7d997ee

Pull Request Pull Request #131: refactor: update chart components

Coverage Stats

116 of 210 branches covered (55.24%)

Branch coverage included in aggregate %.

51 of 87 new or added lines in 6 files covered. (58.62%)

291 of 448 relevant lines covered (64.96%)

6.86 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

61.22

/src/charts/utils/paths.ts

/**
 * Path generators for SVG shapes
 * Creates SVG path data for lines, areas, and arcs
 */

import type { Scale, Point } from './types';

/**
 * Creates a line generator function
 * Converts data points to SVG path data for lines
 *
 * @param xScale - Scale function for X coordinates
 * @param yScale - Scale function for Y coordinates
 * @returns Function that generates SVG path data from data array
 */
export const line = (xScale: Scale, yScale: Scale, height: number) => {
  return (data: number[]): string => {
    if (!data.length) return '';

    const points = data.map((item, index) => [xScale(index), height - yScale(item)] as Point);
    return points.reduce((path, [x, y], i) => {
      if (i === 0) return `M${x} ${y}`;
      return `${path} L${x} ${y}`;
    }, '');
  };
};

/**
 * Creates an area generator function
 * Converts data points to SVG path data for filled areas
 *
 * @param xScale - Scale function for X coordinates
 * @param yScale - Scale function for Y coordinates
 * @param y0 - Baseline Y coordinate for the area
 * @returns Function that generates SVG path data from data array
 */
export const area = (xScale: Scale, yScale: Scale, y0: number) => {
  return (data: number[]): string => {
    if (!data.length) return '';

    const points = data.map((d, i) => [xScale(i), y0 - yScale(d)] as Point);
    const areaPoints = [...points, [points[points.length - 1][0], y0], [points[0][0], y0]];

    return areaPoints.reduce((path, [x, y], i) => {
      if (i === 0) return `M${x} ${y}`;
      return `${path} L${x} ${y}`;
    }, '');
  };
};

/**
 * Creates an arc generator function
 * Converts angle data to SVG path data for arcs
 *
 * @param radius - radius of the arc
 * @returns Function that generates SVG path data from start and end angles
 */
export const arc = (radius: number) => {
  return (centerX: number, centerY: number, endAngle: number): string => {
    const dx = centerX + radius * Math.sin(endAngle);
    const dy = centerY - radius * Math.cos(endAngle);

    const largeArcFlag = endAngle <= Math.PI ? 0 : 1;

    return [
      `M${centerX} ${0}`,
      `A${centerX} ${centerY} 0 ${largeArcFlag} 1 ${dx} ${dy}`,
      `L${centerX} ${centerY}`,
      'Z',
    ].join(' ');
  };
};

/**
 * Creates an arrow generator function
 * Converts start and end points to SVG path data for lines with arrowheads
 *
 * @param xScale - Scale function for X coordinates
 * @param yScale - Scale function for Y coordinates
 * @returns Function that generates SVG path data from start and end points
 */
export const arrow = (xScale: Scale, yScale: Scale, height: number, arrowheadLength = 2, arrowheadWidth = 2) => {
  return (startData: { index: number; value: number }, endData: { index: number; value: number }): string => {
    const startX = xScale(startData.index + 0.5);
    const startY = height - yScale(startData.value);
    const endX = xScale(endData.index + 0.5);
    const endY = height - yScale(endData.value);

    const deltaX = endX - startX;
    const deltaY = endY - startY;
    const angle = Math.atan2(deltaY, deltaX);

    const basePointX = endX - arrowheadLength * Math.cos(angle);
    const basePointY = endY - arrowheadLength * Math.sin(angle);

    const arrowPoint1X = basePointX - (arrowheadWidth / 2) * Math.sin(angle);
    const arrowPoint1Y = basePointY + (arrowheadWidth / 2) * Math.cos(angle);
    const arrowPoint2X = basePointX + (arrowheadWidth / 2) * Math.sin(angle);
    const arrowPoint2Y = basePointY - (arrowheadWidth / 2) * Math.cos(angle);

    return [
      `M${startX} ${startY}`,
      `L${basePointX} ${basePointY}`,
      `M${endX} ${endY}`,
      `L${arrowPoint1X} ${arrowPoint1Y}`,
      `L${arrowPoint2X} ${arrowPoint2Y}`,
      `Z`,
    ].join(' ');
  };
};

1	/**
2	* Path generators for SVG shapes
3	* Creates SVG path data for lines, areas, and arcs
4	*/
5
6	import type { Scale, Point } from './types';
7
8	/**
9	* Creates a line generator function
10	* Converts data points to SVG path data for lines
11	*
12	* @param xScale - Scale function for X coordinates
13	* @param yScale - Scale function for Y coordinates
14	* @returns Function that generates SVG path data from data array
15	*/
16	export const line = (xScale: Scale, yScale: Scale, height: number) => {	2✔
17	return (data: number[]): string => {	1✔
18	if (!data.length) return '';	1!
19
20	const points = data.map((item, index) => [xScale(index), height - yScale(item)] as Point);	6✔
21	return points.reduce((path, [x, y], i) => {	1✔
22	if (i === 0) return `M${x} ${y}`;	6✔
23	return `${path} L${x} ${y}`;	5✔
24	}, '');
25	};
26	};
27
28	/**
29	* Creates an area generator function
30	* Converts data points to SVG path data for filled areas
31	*
32	* @param xScale - Scale function for X coordinates
33	* @param yScale - Scale function for Y coordinates
34	* @param y0 - Baseline Y coordinate for the area
35	* @returns Function that generates SVG path data from data array
36	*/
37	export const area = (xScale: Scale, yScale: Scale, y0: number) => {	2✔
38	return (data: number[]): string => {	1✔
39	if (!data.length) return '';	1!
40
41	const points = data.map((d, i) => [xScale(i), y0 - yScale(d)] as Point);	6✔
42	const areaPoints = [...points, [points[points.length - 1][0], y0], [points[0][0], y0]];	1✔
43
44	return areaPoints.reduce((path, [x, y], i) => {	1✔
45	if (i === 0) return `M${x} ${y}`;	8✔
46	return `${path} L${x} ${y}`;	7✔
47	}, '');
48	};
49	};
50
51	/**
52	* Creates an arc generator function
53	* Converts angle data to SVG path data for arcs
54	*
55	* @param radius - radius of the arc
56	* @returns Function that generates SVG path data from start and end angles
57	*/
58	export const arc = (radius: number) => {	2✔
59	return (centerX: number, centerY: number, endAngle: number): string => {	2✔
60	const dx = centerX + radius * Math.sin(endAngle);	2✔
61	const dy = centerY - radius * Math.cos(endAngle);	2✔
62
63	const largeArcFlag = endAngle <= Math.PI ? 0 : 1;	2✔
64
65	return [	2✔
66	`M${centerX} ${0}`,
67	`A${centerX} ${centerY} 0 ${largeArcFlag} 1 ${dx} ${dy}`,
68	`L${centerX} ${centerY}`,
69	'Z',
70	].join(' ');
71	};
72	};
73
74	/**
75	* Creates an arrow generator function
76	* Converts start and end points to SVG path data for lines with arrowheads
77	*
78	* @param xScale - Scale function for X coordinates
79	* @param yScale - Scale function for Y coordinates
80	* @returns Function that generates SVG path data from start and end points
81	*/
82	export const arrow = (xScale: Scale, yScale: Scale, height: number, arrowheadLength = 2, arrowheadWidth = 2) => {	2!
NEW 83	return (startData: { index: number; value: number }, endData: { index: number; value: number }): string => {	×
NEW 84	const startX = xScale(startData.index + 0.5);	×
NEW 85	const startY = height - yScale(startData.value);	×
NEW 86	const endX = xScale(endData.index + 0.5);	×
NEW 87	const endY = height - yScale(endData.value);	×
88
NEW 89	const deltaX = endX - startX;	×
NEW 90	const deltaY = endY - startY;	×
NEW 91	const angle = Math.atan2(deltaY, deltaX);	×
92
NEW 93	const basePointX = endX - arrowheadLength * Math.cos(angle);	×
NEW 94	const basePointY = endY - arrowheadLength * Math.sin(angle);	×
95
NEW 96	const arrowPoint1X = basePointX - (arrowheadWidth / 2) * Math.sin(angle);	×
NEW 97	const arrowPoint1Y = basePointY + (arrowheadWidth / 2) * Math.cos(angle);	×
NEW 98	const arrowPoint2X = basePointX + (arrowheadWidth / 2) * Math.sin(angle);	×
NEW 99	const arrowPoint2Y = basePointY - (arrowheadWidth / 2) * Math.cos(angle);	×
100
NEW 101	return [	×
102	`M${startX} ${startY}`,
103	`L${basePointX} ${basePointY}`,
104	`M${endX} ${endY}`,
105	`L${arrowPoint1X} ${arrowPoint1Y}`,
106	`L${arrowPoint2X} ${arrowPoint2Y}`,
107	`Z`,
108	].join(' ');
109	};
110	};

antvis / T8 / 17260410333

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous