ku-progress-bar
v0.6.1
Published
cli progress bar
Downloads
12
Maintainers
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
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]),
},
},
),
);
#Multi Bar
Parameters of the BarItem
class:
progresses
(IProgress | IProgress[]
): An object or an array of objects of typeIProgress
representing the progress.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:
completeChar
(string
):- The character used to represent the completed portion of the progress bar.
resumeChar
(string
):- The character used to represent the remaining portion of the progress bar that needs to be filled.
width
(number
):- The total width of the progress bar, indicating the number of characters to use for the entire progress representation.
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