0.7.2 • Published 18 days ago

@opentf/cli-pbar v0.7.2

Weekly downloads
-
License
MIT
Repository
github
Last release
18 days ago

 OPEN TECH FOUNDATION

@opentf/cli-pbar

Build

Demo

The Customizable CLI Progress Bars.

Try it online at https://node-repl.pages.dev


🚀 @opentf/std - An Extensive JavaScript Standard Library. Please review and give feedback.

Please read our important articles:


Features

  • Single & Multi Progress Bars

  • Customizable (colors, size, etc)

  • TypeScript Support

Installation

Install it using your favourite package manager.

npm install @opentf/cli-pbar
yarn add @opentf/cli-pbar
pnpm add @opentf/cli-pbar
bun add @opentf/cli-pbar

Syntax

new ProgressBar(options?: Options)

Usage

Single progress bar.

import { ProgressBar } from '@opentf/cli-pbar';

const pBar = new ProgressBar();
pBar.start({ total: 100 });
pBar.update({ value: 50 });
pBar.update({ value: 100 });
pBar.stop();

Multi progress bar.

import { ProgressBar } from '@opentf/cli-pbar';

const multiPBar = new ProgressBar({ size: 'MEDIUM' });
multiPBar.start();
const b1 = multiPBar.add({ total: 100 });
const b2 = multiPBar.add({ total: 100 });
const b3 = multiPBar.add({ total: 100 });
b1.update({ value: 23 });
b3.update({ value: 35 });
b2.update({ value: 17 });
multiPBar.stop();

!TIP It is recommended to use the MEDIUM sized bars in multi progress bars to get better visuals.

Examples

Using inc() to increment the progress bar value, hide the percent & show the count.

import { sleep, aForEach } from '@opentf/std';
import { ProgressBar } from '@opentf/cli-pbar';

const arr = ['Apple', 'Mango', 'Orange', 'Grapes', 'Pear', 'Guava'];

const pBar = new ProgressBar({
  color: 'pi',
  bgColor: 'r',
  showPercent: false,
  showCount: true,
  prefix: 'Processing Fruits',
});

pBar.start({ total: arr.length });

await aForEach(arr, async (f) => {
  pBar.inc({ suffix: f });
  await sleep(500);
});

pBar.stop();

Count Demo


Rendering a plain variant progress bar.

import { ProgressBar } from '@opentf/cli-pbar';

const pBar = new ProgressBar({
  variant: 'PLAIN',
  prefix: 'Downloading',
});

pBar.start({ total: 3 });
pBar.inc();
pBar.stop();

Plain Variant Demo


It does not render progress bars in non TTY terminals, like CI, etc.

import { sleep, aForEach } from '@opentf/std';
import { ProgressBar } from '@opentf/cli-pbar';

const arr = ['File 1', 'File 2', 'File 3'];
const pBar = new ProgressBar({
  prefix: 'Downloading',
  showPercent: false,
  showCount: true,
});

pBar.start({ total: arr.length });

await aForEach(arr, async (f) => {
  pBar.inc({ suffix: f });
  await sleep(500);
});

pBar.stop();

CI Demo

API

options:

NameTypeDefaultDescription
streamWriteStreamprocess.stderrThe TTY writable stream to use.
widthnumber30The size of the progress bar.
prefixstring''The string to be prefixed progress bar.
suffixstring''The string to be suffixed progress bar.
colorstring'g'The color to render the completed progress bar.The default color is green. It uses @opentf/cli-styles for colors.You can also use the rgb & hex color modes, please refer the supported color keys here.
bgColorstring'gr'The color to render the incomplete progress bar.The default color is grey. It uses @opentf/cli-styles for colors.You can also use the rgb & hex color modes, please refer the supported color keys here.
sizestring'DEFAULT'The size of the progress bar to render.Available sizes:'DEFAULT''MEDIUM''SMALL'
autoClearbooleanfalseIf true, then it auto-clears the progress bar after the stop method is called.
showPercentbooleantrueIf false, then it hides the progress bar percent.
showCountbooleanfalseIf true, then it show the progress bar count.
variantstring'STANDARD'There are two variants available, STANDARD & PLAIN.

Instance methods:

start(obj?: Partial<Bar>): void

After the method is called, the progress bar starts rendering.

Bar:

NameTypeDefaultDescription
totalnumberNaNThe total value for the progress bar.
valuenumberNaNThe current value of the progress bar.
prefixstring''The string to be prefixed progress bar.
suffixstring''The string to be suffixed progress bar.
colorstring'g'The color to render the completed progress bar.The default color is green. It uses @opentf/cli-styles for colors.You can also use the rgb & hex color modes, please refer the supported color keys here.
bgColorstring'gr'The color to render the incomplete progress bar.The default color is grey. It uses @opentf/cli-styles for colors.You can also use the rgb & hex color modes, please refer the supported color keys here.
sizestring'DEFAULT'The size of the progress bar.Available sizes:'DEFAULT''MEDIUM''SMALL'
progressbooleantrueIf false, it does not render a progress bar, making it useful to add an empty line or text without displaying a progress bar.
showPercentbooleantrueIf false, then it hides the progress bar percent.
showCountbooleanfalseIf true, then it show the progress bar count.

add(bar: Partial<Bar>): { update: (bar: Partial<Bar>) => void }

In multi-progress, it appends a progress bar to the container and returns an instance.

update(bar: Partial<Bar>): void

It is used to update the current progress bar instance.

inc(bar: Partial<Bar>): void

It increments the progress bar value and optionaly updates the other bar props.

stop(msg?: string): void

Stops the current progress bar instance with the current state and optionally clears the progress bar when autoClear is true.

You can also pass msg text to be displayed after the instance stops.

Supported Color Keys

KeyDescription
rRed - rgb(255,65,54)
gGreen - rgb(46,204,64)
bBlue - rgb(0,116,217)
oOrange - rgb(255,133,27)
yYellow - rgb(255,220,0)
wWhite - rgb(255,255,255)
mMagenta - rgb(255,105,193)
cCyan - rgb(154, 236, 254)
nNavy - rgb(0,31,63)
aAqua - rgb(127,219,255)
tTeal - rgb(57,204,204)
pPurple - rgb(177,13,201)
fFuchsia - rgb(240,18,190)
sSilver - rgb(221,221,221)
maMaroon - rgb(133,20,75)
olOlive - rgb(61,153,112)
liLime - rgb(1,255,112)
blBlack - rgb(17,17,17)
grGrey - rgb(170,170,170)
piPink - rgb(255, 191, 203)

Related

License

Copyright (c) 2021, Thanga Ganapathy (MIT License).

0.7.2

18 days ago

0.7.1

24 days ago

0.5.0

28 days ago

0.7.0

28 days ago

0.6.0

28 days ago

0.4.0

1 month ago

0.3.0

1 month ago

0.2.2

1 month ago

0.2.1

2 months ago

0.2.0

3 months ago

0.1.8

8 months ago

0.1.7

8 months ago

0.1.6

10 months ago

0.1.5

10 months ago

0.1.4

10 months ago

0.1.3

10 months ago

0.1.2

10 months ago

0.1.1

10 months ago

0.1.0

10 months ago