npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ku-progress-bar

v0.6.1

Published

cli progress bar

Downloads

50

Readme

Installation

$ npm install  ku-progress-bar

Simple bar

const progress = new Progress({ total: 1000 });

const bar = new Bar(progress);

progress.increment(300);

bar.renderBars();
✗ ts-node ./src/examples/simple-start.ts
[============----------------------------] 30% ETA: 71s speed: 10/s duration: 30s 300/1000

Presets

import { Bar, BarItem, presets, Progress } from '../';
import * as chalk from 'chalk';

const bar = new Bar();
const progress = new Progress({ total: 100 });

bar.add(new BarItem(progress, {
  options: presets.braille,
}));

bar.start();
✗ ts-node ./src/examples/presets.example.ts
 classic [============----------------------------] 31% ETA: 7s speed: 10/s duration: 3s 31/100
 shades  [████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░] 31% ETA: 7s speed: 10/s duration: 3s 31/100
 rect    [■■■■■■■■■■■■                            ] 31% ETA: 7s speed: 10/s duration: 3s 31/100
 braille [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀] 31% ETA: 7s speed: 10/s duration: 3s 31/100

img.png

braille-progress

Multi bars

const bar = new Bar();
for (let i = 0; i < 7; i++) {
  bar.addProgress(
    new Progress({ total: 1000 }).increment(Math.floor(Math.random() * 1000)),
  );
}
bar.render();

Composite Progress bar

export const bar = new Bar().start();
const progresses = [
  new Progress({ total: 1000, start: 300 }),
  new Progress({ total: 1000 }),
];
bar.add(
  new BarItem(
    progresses,
    {
      options: presets.shades,
      formatters: {
        bars: new BarsFormatter([chalk.green, chalk.yellowBright]),
      },
    },
  ),
);

composite-progress

#Multi Bar

multi-files-processing

Parameters of the BarItem class:

  1. progresses (IProgress | IProgress[]): An object or an array of objects of type IProgress representing the progress.

  2. params (IParams | undefined): Additional parameters to customize the appearance and behavior of the progress bar.

    • template (string | function | undefined): Template for displaying the progress bar.
    • options (Partial<IBarOptions> | undefined): Configuration settings for displaying the progress bar.
    • formatters (IFormatters | undefined): Formatting functions for each progress.
    • dataProviders (IDataProviders | undefined): Functions to provide additional data.

Template Format:

src/examples/spinner.example.ts

bar.add(
  new BarItem(progress, {
    template:
      '[{bar}] {spinner} {percentage} ETA: {eta} speed: {speed} duration: {duration} {value}/{total} (task: {task})',
    dataProviders: {
      spinner: () => spinner.next().value,
    },
  }),
);
// or
bar.add(
  new BarItem<never, { spinner: () => string }>(progress, {
    template: ({ bar, percentage, eta, speed, duration, value, total, spinner}) => {
      const task = progress.getPayload().task;
      return `[${bar}] ${spinner} ${percentage} ETA: ${eta} speed: ${speed} duration: ${duration} ${value}/${total} (task: ${task})`;
    },
    dataProviders: {
      spinner: () => spinner.next().value,
    },
  }),
);

In the BarItem class, the template represents a string template that defines how the progress bar will be displayed. In this template, you can use various placeholders that will substitute actual progress values into the resulting string.

Let's review some key placeholders you can use in the template:

  • {bar}: Placeholder for inserting the progress bar.
  • {percentage}: Placeholder for inserting the progress percentage.
  • {eta}: Placeholder for inserting the estimated time of arrival (ETA).
  • {etaHumanReadable}: Placeholder for inserting the estimated time (ETA). (2h47m30s)
  • {speed}: Placeholder for inserting the progress speed.
  • {value}: Placeholder for inserting the current value.
  • {total}: Placeholder for inserting the total value.

These placeholders are replaced with the actual progress values during the generation of the progress bar string.

For example, if you use the template "{bar} {percentage}%", during the generation of the progress bar, you'll see a string that displays the progress bar and the progress percentage.

You can also use more complex templates that incorporate a combination of placeholders and additional text to achieve a specific look and informativeness for the progress bar.

For instance, a template "[{bar}] Progress: {percentage}%, ETA: {eta}" will display the progress bar, progress percentage, and the estimated time of arrival.

Additionally, if you pass a custom payload to Progress, it is also possible to use it in the template by using the same approach: {payload_object_key_name}.

Moreover, you can pass a dataProviders object as a parameter to BarItem. For example:

const dataProviders = {
  customData: (progress, progresses) => renderCustomData(progress, progresses),
  // other data providers
};

You can then use it in the template like this:

Custom Data: {[customData]}

This allows for dynamic and customizable progress bar templates based on the provided data and payload.

example

const bar = new Bar();
const progress = new Progress({ total: 100 }, { task: 'users creating...' });
function * Spinner(chars: string[], delay = 500): Generator<string> {
   let [ index, char, lastUpdate ] = [ 0, ' ', 0 ];
   while (true) {
      if (Date.now() - lastUpdate > delay) {
         index = index + 1 >= chars.length ? 0 : index + 1;
         char = chars.length ? chars[index] : '';
         lastUpdate = Date.now();
      }
      yield char;
   }
}
const spinner = Spinner([ '\\', '|', '/', '-']);
bar.add(new BarItem(progress, {
   template: '[{bar}] {spinner} {percentage} ETA: {eta} speed: {speed} duration: {duration} {value}/{total} (task: {task})',
   dataProviders: {
      spinner: () => spinner.next().value,
   },
}))
progress.increment(1, { task: 'permission granting...' });

const interval = setInterval(() => {
   if (progress.getProgress() >= 1) {
      clearInterval(interval);
   }
   progress.increment();
}, 50)
bar.start();
[=====================-------------------] / 53% ETA: 2s speed: 19/s duration: 3s 53/100 (task: permission granting...)

IBarOptions Interface:

The IBarOptions interface defines the configuration options for customizing the appearance of a progress bar.

Properties:

  1. completeChar (string):

    • The character used to represent the completed portion of the progress bar.
  2. resumeChar (string):

    • The character used to represent the remaining portion of the progress bar that needs to be filled.
  3. width (number):

    • The total width of the progress bar, indicating the number of characters to use for the entire progress representation.
  4. glue (string):

    • A string used to separate multiple progress bars if displayed together.

Example Usage:

const options: IBarOptions = {
  completeChar: '=',
  resumeChar: '-',
  width: 40,
  glue: ' ',
};

Using tags

It is possible use tags in templates and formatters

const progress = new Progress({ total: 100 });
progresses.push(progress);
bar.add(
  new BarItem(
    [progress, new Progress({ total: 100, start: 50, tag: 'red' })],
    {
      template:
        '[{bars}] {percentage} ETA: {eta} speed: {speed} duration: {duration} {red:value} {value}/{total}',
      tagDelimiter: ':',
      formatters: {
        'red:bar': str => chalk.red(str),
        bar: str => chalk.green(str),
      },
    },
  ),
);

Spinners example

src/examples/spinner.example.ts

spinner-example

Some random examples

src/examples/random.bar.example.ts

multi-files-processing