Fractional ASCII progress bar

fractional-progress-bar.ts

export const BarThemes = {
  fractional: [' ', '▏', '▎', '▍', '▌', '▋', '▊', '▉', '█'],
  shaded: [' ', '░', '▒', '▓', '█'],
  simple: ['▒', '█'],
  ascii: ['-', '#'],
};

// Renders a fixed-length ASCII progress bar that supports
// fractionally-filled characters using Unicode boxes and bars.

export function renderBar(
  total = 100,
  current = 0,
  width = 40,
  theme: keyof typeof BarThemes = 'simple',
): string {
  // Calculate the progress percentage
  const progress = Math.min(current / total, 1); // Cap at 1 to avoid overflow
  const totalFilledLength = width * progress; // Full length, including partial segment

  const segments = BarThemes[theme];
  const full = segments[segments.length - 1] ?? '#';
  const empty = segments[0] ?? ' ';

  // Determine the integer and fractional parts of the filled length
  const filledLength = Math.floor(totalFilledLength); // Complete segments
  const partialIndex = Math.floor(
    (totalFilledLength - filledLength) * segments.length,
  );

  // Create the filled, partial, and empty parts of the bar
  const filledBar = full.repeat(filledLength);
  const partialBar = partialIndex > 0 ? segments[partialIndex] : ''; // Select a partial character if needed
  const emptyBar = empty.repeat(width - filledLength - (partialBar ? 1 : 0));

  return `${filledBar}${partialBar}${emptyBar}`;
}