progressbar

A progress bar creator in javascript typescript!

NOTE: All examples and explanations are in javascript.

Installation

npm install @yetnt/progressbar
sudo npm install @yetnt/progressbar
yarn add @yetnt/progressbar

(Jump To)

• A Simple Bar
• Seperated Bar
• Discord.js Example

Usage (examples below this)

const { progressBar, ProgressBar } = require('@yetnt/progressbar')

progressBar(percentage, barWidth, emptyChar, fullChar, returnAr?, firstEdgeOverride?, lastEdgeOverride?)

percentage = 45 // How much of the bar is full. If 100% the whole thing is full. If 0 everything is empty.
barWidth = 10 // Width of the bar. If 10 it's 10 characters long
emptyChar = "□" // Empty character to display for parts of the bar that aren't filled.
fullChar = "■" // Full character to display for parts of the bar that  are filled.
returnAr = false // (optional) Return an array or not
firstEdgeOverride = ["◁", "◀"] // (optional) Overrides the first edge with the elements
lastEdgeOverride = ["▷", "▶"] // (optional) Overrides the last edge with elements

// This is exactly the same for class, but returnAr is not a parameter

let bar = new ProgressBar(percentage, barWidth, emptyChar, fullChar, firstEdgeOverride?, lastEdgeOverride?)

or if you don't want to deconstruct them (for some reason)

const pb = require("@yetnt/progressbar");
pb.progressBar();
// or
new pb.ProgressBar();

A Simple bar

Function

progressBar(45, 10, "□", "■");

Class

let bar = new ProgressBar(45, 10, "□", "■");
bar.bar;

Output

"■■■■□□□□□□";

Return Array

Function

progressBar(45, 10, "□", "■", true);

Class

let bar = new ProgressBar(45, 10, "□", "■", true);
bar.barArray;

Output

["■", "■", "■", "■", "□", "□", "□", "□", "□", "□"];

Edge overrides

If you'd like you can also change the first bar element and the last bar element so you can edge it with emojis or something else.

Edge Syntax

["emptyChar", "filledChar"];

Edge Use

Function

progressBar(56, 30, "▢", "▧", false, ["◁", "◀"], ["▷", "▶"]);

Class

let bar = new ProgressBar(56, 30, "▢", "▧", ["◁", "◀"], ["▷", "▶"]);
bar.bar;

Output

"◀▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▢▢▢▢▢▢▢▢▢▢▢▢▢▷";

Discord.js example

Code may need to be modified depending on your command handler, currently setup using ic4d Command Handler/(Under Ctrl's Command Handler)

const { ProgressBar, progressBar } = require("@yetnt/progressbar"); // deconstructing
module.exports = {
    name: "progressbar",
    description: "useful npm package made by yet",
    callback: async (client, interaction) => {
        const progressBar = new ProgressBar(55, 10, "▢", "▧");

        interaction.reply({
            content: progressBar.bar,
            ephemeral: true,
        });
    },
};

Output

Differences

Dynamic Bar

Unlike the function, If you update any one of the properties of the ProgessBar object, the bar updates.

let bar = new ProgressBar(56, 30, "▢", "▧", ["◁", "◀"], ["▷", "▶"]);

bar.bar; // ◀▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▢▢▢▢▢▢▢▢▢▢▢▢▢▷

bar.barWidth = 20;
bar.bar; // ◀▧▧▧▧▧▧▧▧▧▧▢▢▢▢▢▢▢▢▷

bar.percentage = 80;
bar.bar; // ◀▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▢▢▢▷

bar.firstEdgeOverride = [];
bar.lastEdgeOberride = [];
bar.bar; // ▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▢▢▢▢ (Removes Edge Overrides)

Warning : Bar may not work properly if you edit any other properties that aren't meant to be edited. (these tend to be properties with an _)

Seprated Bar (charsplit method)

To seprate a bar with some value (Replace the last filled char), you can use the charSplit() method.

let bar = new ProgressBar(56, 30, "▢", "▧");
bar.bar; // ▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▢▢▢▢▢▢▢▢▢▢▢▢▢▢
bar.charSplit("▶");
bar.bar; // ▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▶▢▢▢▢▢▢▢▢▢▢▢▢▢▢

The bar will NOT charSplit if :

1. Last Edge Override is provided

   AND

2. Bar's percentage is 100%

Links

NPM

Math on a progress bar

Github