createSvgBarTicksPath function

Creates the d of evenly spaced graduations along a bar, in any group: count intervals give count + 1 ticks, across the bar from one of its sides.

import { createSvgBarTicksPath } from 'utils';

Signature

export function createSvgBarTicksPath(
  target: SVGGraphicsElement,
  bar: SvgBar,
  count: number,
  length: number,
  side: 'end' | 'start' = 'start',
): string

Parameters

Name	Description
target	The element in whose coordinates the path is written, such as the <path> that receives it.
bar	The element giving the area of the bar, and its direction.
count	The number of intervals.
length	The length of each tick, across the bar, in the coordinates of target.
side	The side the ticks start from: 'start' is the left side of an 'up' bar, the top side of a 'right' bar. Defaults to 'start'.

Returns

The path data, one M … L … per tick.

Errors

• Throws TypeError: When an element is not rendered.

Example

majorTicks.setAttribute('d', createSvgBarTicksPath(majorTicks, { element: track, direction: 'up' }, 5, 12));

Tests

Line coverage: 100 %.

• ✅ draws ticks from the start side
• ✅ draws ticks from the end side
• ✅ starts from the start side by default

Source

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

Uses

• SvgBar: A bar gauge laid on the box of an element, for createSvgBarRangePath and createSvgBarTicksPath.

Files it needs

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

• src/math/round-to-fraction-digits.ts
• src/svg-shape/internal/format-coordinate.ts
• src/svg-shape/internal/format-point.ts
• src/svg-shape/internal/get-bar-edges.ts
• src/svg-shape/internal/get-screen-matrix.ts
• src/svg-shape/internal/lerp-point.ts
• src/svg-shape/svg-bar.ts

Source code

import { formatPoint, getBarEdges, lerpPoint } from './internal';
import type { SvgBar } from './svg-bar';

/**
 * Creates the `d` of evenly spaced graduations along a bar, in any group: `count` intervals give `count + 1`
 * ticks, across the bar from one of its sides.
 *
 * @param target - The element in whose coordinates the path is written, such as the `<path>` that receives it.
 * @param bar - The element giving the area of the bar, and its direction.
 * @param count - The number of intervals.
 * @param length - The length of each tick, across the bar, in the coordinates of `target`.
 * @param side - The side the ticks start from: `'start'` is the left side of an `'up'` bar, the top side of a
 * `'right'` bar. Defaults to `'start'`.
 * @returns The path data, one `M … L …` per tick.
 * @throws {TypeError} When an element is not rendered.
 * @example
 * majorTicks.setAttribute('d', createSvgBarTicksPath(majorTicks, { element: track, direction: 'up' }, 5, 12));
 */
export function createSvgBarTicksPath(
  target: SVGGraphicsElement,
  bar: SvgBar,
  count: number,
  length: number,
  side: 'end' | 'start' = 'start',
): string {
  const [start0, start1, end0, end1] = getBarEdges(bar, target);
  let d = '';
  for (let index = 0; index <= count; index++) {
    const t = index / count;
    const first = lerpPoint(start0, end0, t);
    const second = lerpPoint(start1, end1, t);
    const from = side === 'start' ? first : second;
    const across = side === 'start' ? second : first;
    const ratio = length / Math.hypot(across.x - from.x, across.y - from.y);
    d += `${index === 0 ? '' : ' '}M ${formatPoint(from)} L ${formatPoint(lerpPoint(from, across, ratio))}`;
  }
  return d;
}

Test file

import { createSvgBarTicksPath } from './create-svg-bar-ticks-path';
import { renderSvg } from './testing';

describe(createSvgBarTicksPath, () => {
  it.for([
    ['start', 'M 0 100 L 5 100 M 0 50 L 5 50 M 0 0 L 5 0'],
    ['end', 'M 20 100 L 15 100 M 20 50 L 15 50 M 20 0 L 15 0'],
  ] as const)('draws ticks from the %s side', ([side, expected]) => {
    const byId = renderSvg('<rect id="track" width="20" height="100" /><path id="ticks" />');
    expect(createSvgBarTicksPath(byId('ticks'), { element: byId('track'), direction: 'up' }, 2, 5, side)).toBe(
      expected,
    );
  });

  it('starts from the start side by default', () => {
    const byId = renderSvg('<rect id="track" width="100" height="20" /><path id="ticks" />');
    expect(createSvgBarTicksPath(byId('ticks'), { element: byId('track'), direction: 'right' }, 1, 5)).toBe(
      'M 0 0 L 0 5 M 100 0 L 100 5',
    );
  });
});

Keywords: create, svg, bar, ticks, path, svg shapes, function