createSvgPiePath function

Creates the d of a pie slice joined to the center of an element, in any group: a radar sector, a remaining-time disk, to fill. A sweep of 360° gives the full disk.

import { createSvgPiePath } from 'utils';

Signature

export function createSvgPiePath(target: SVGGraphicsElement, arc: SvgArc): string

Parameters

Name	Description
target	The element in whose coordinates the path is written, such as the <path> that receives it.
arc	The center element, the radius, the start angle and the opening.

Returns

The closed path data.

Errors

• Throws TypeError: When an element is not rendered.

Example

remaining.setAttribute('d', createSvgPiePath(remaining, { center: face, radius: 30, startAngle: 0, sweepAngle: 360 * ratio }));

Tests

Line coverage: 100 %.

• ✅ draws a slice from 0° over 90°
• ✅ draws a slice from 0° over 360°

Source

src/svg-shape/create-svg-pie-path.ts (on GitHub)

Uses

• getSvgAnchorPointIn: Finds an anchor of an element as seen on screen, in the coordinates of another element, whatever groups lie between: the center of a hub for the setRotate of a needle drawn in another group.
• SvgArc: An arc around the center of an element, for createSvgArcPath and its siblings (0° up, clockwise).

Files it needs

src/svg-shape/create-svg-pie-path.ts imports, directly or not:

• src/math/round-to-fraction-digits.ts
• src/svg-shape/internal/create-arc-path.ts
• src/svg-shape/internal/format-coordinate.ts
• src/svg-shape/internal/format-point.ts
• src/svg-shape/internal/polar-to-cartesian.ts
• src/svg-shape/svg-arc.ts
• src/svg-transform/anchor.ts
• src/svg-transform/get-svg-anchor-point-in.ts
• src/svg-transform/get-svg-anchor-point.ts
• src/svg-transform/internal/get-anchor-point.ts
• src/svg-transform/internal/get-screen-matrix.ts

Source code

import { getSvgAnchorPointIn } from '../svg-transform';
import { createArcPath, formatPoint } from './internal';
import type { SvgArc } from './svg-arc';

const FULL_TURN = 360;

/**
 * Creates the `d` of a pie slice joined to the center of an element, in any group: a radar sector, a
 * remaining-time disk, to fill. A sweep of 360° gives the full disk.
 *
 * @param target - The element in whose coordinates the path is written, such as the `<path>` that receives it.
 * @param arc - The center element, the radius, the start angle and the opening.
 * @returns The closed path data.
 * @throws {TypeError} When an element is not rendered.
 * @example
 * remaining.setAttribute('d', createSvgPiePath(remaining, { center: face, radius: 30, startAngle: 0, sweepAngle: 360 * ratio }));
 */
export function createSvgPiePath(target: SVGGraphicsElement, arc: SvgArc): string {
  const center = getSvgAnchorPointIn(arc.center, 'center', target);
  const arcPath = createArcPath(center, arc.radius, arc.startAngle, arc.startAngle + arc.sweepAngle);
  return Math.abs(arc.sweepAngle) >= FULL_TURN ? `${arcPath} Z` : `M ${formatPoint(center)} L${arcPath.slice(1)} Z`;
}

Test file

import { createSvgPiePath } from './create-svg-pie-path';
import { renderSvg } from './testing';

describe(createSvgPiePath, () => {
  it.for([
    [0, 90, 'M 50 50 L 50 10 A 40 40 0 0 1 90 50 Z'],
    [0, 360, 'M 50 10 A 40 40 0 1 1 50 90 A 40 40 0 1 1 50 10 Z'],
  ] as const)('draws a slice from %s° over %s°', ([startAngle, sweepAngle, expected]) => {
    const byId = renderSvg('<circle id="face" cx="50" cy="50" r="5" /><path id="pie" />');
    expect(createSvgPiePath(byId('pie'), { center: byId('face'), radius: 40, startAngle, sweepAngle })).toBe(expected);
  });
});

Keywords: create, svg, pie, path, svg shapes, function