feat: add base interface of `Unicode plot` and add implementation of `bar plot` by Vinit-Pandit · Pull Request #5444 · stdlib-js/stdlib

Vinit-Pandit · 2025-02-25T18:00:25Z

Progress #2010

Description

What is the purpose of this pull request?

This pull request:

Add base interface for the unicode plot and implement the bar plot

Related Issues

Does this pull request have any related issues?

This pull request:

progress [RFC]: Development of a Dedicated ASCII Plotter for Benchmark Visualization #2010

Questions

Any questions for reviewers of this pull request?

Yes

How much there is need to line chart in unicode ?
What are the other plots which we may need in future in unicode ?
Does this file structure good ( by the way still in progress ), apart from naming and style and can i go forward with this by adding test and others .

Other

Any other information relevant to this pull request? This may include screenshots, references, and/or implementation notes.

No.

Checklist

Please ensure the following tasks are completed before submitting this pull request.

Read, understood, and followed the contributing guidelines.

@stdlib-js/reviewers

unicode bar plot

var barchart = require('@stdlib/plot/unicode/static_plots/bar');

/*

var options = {
    xaxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
    yaxis: [10, 1, 5, 6, 7, 22, 10, 35, 40, 10, 11, 12, 13, 15],
    rows: 20,
    cols: 100,
    barColor: 'Frd',
    labelColor: 'Frd'
};

var inst = new barchart(options);

inst.draw();
inst.render();

line char ( under construcution )

--- type: pre_push_report description: Results of running various checks prior to pushing changes. report: - task: run_javascript_examples status: na - task: run_c_examples status: na - task: run_cpp_examples status: na - task: run_javascript_readme_examples status: na - task: run_c_benchmarks status: na - task: run_cpp_benchmarks status: na - task: run_fortran_benchmarks status: na - task: run_javascript_benchmarks status: na - task: run_julia_benchmarks status: na - task: run_python_benchmarks status: na - task: run_r_benchmarks status: na - task: run_javascript_tests status: na ---

… plot --- type: pre_commit_static_analysis_report description: Results of running static analysis checks when committing changes. report: - task: lint_filenames status: passed - task: lint_editorconfig status: passed - task: lint_markdown status: na - task: lint_package_json status: na - task: lint_repl_help status: na - task: lint_javascript_src status: passed - task: lint_javascript_cli status: na - task: lint_javascript_examples status: na - task: lint_javascript_tests status: na - task: lint_javascript_benchmarks status: na - task: lint_python status: na - task: lint_r status: na - task: lint_c_src status: na - task: lint_c_examples status: na - task: lint_c_benchmarks status: na - task: lint_c_tests_fixtures status: na - task: lint_shell status: na - task: lint_typescript_declarations status: na - task: lint_typescript_tests status: na - task: lint_license_headers status: passed ---

--- type: pre_commit_static_analysis_report description: Results of running static analysis checks when committing changes. report: - task: lint_filenames status: passed - task: lint_editorconfig status: passed - task: lint_markdown status: na - task: lint_package_json status: na - task: lint_repl_help status: na - task: lint_javascript_src status: na - task: lint_javascript_cli status: na - task: lint_javascript_examples status: na - task: lint_javascript_tests status: na - task: lint_javascript_benchmarks status: na - task: lint_python status: na - task: lint_r status: na - task: lint_c_src status: na - task: lint_c_examples status: na - task: lint_c_benchmarks status: na - task: lint_c_tests_fixtures status: na - task: lint_shell status: na - task: lint_typescript_declarations status: na - task: lint_typescript_tests status: na - task: lint_license_headers status: passed --- --- type: pre_push_report description: Results of running various checks prior to pushing changes. report: - task: run_javascript_examples status: na - task: run_c_examples status: na - task: run_cpp_examples status: na - task: run_javascript_readme_examples status: na - task: run_c_benchmarks status: na - task: run_cpp_benchmarks status: na - task: run_fortran_benchmarks status: na - task: run_javascript_benchmarks status: na - task: run_julia_benchmarks status: na - task: run_python_benchmarks status: na - task: run_r_benchmarks status: na - task: run_javascript_tests status: na ---

Vinit-Pandit · 2025-02-25T18:04:24Z

/stdlib update-copyright-years

Vinit-Pandit · 2025-02-26T04:08:25Z

This pr is Intentionally incomplete , i kind of need acknowledgement weather i can go ahead with this or not, I will add the detail detail description which explain this pr .

Vinit-Pandit · 2025-02-27T13:25:47Z

PALLET

Low level Class for unicode/ansi plot

This class maintains a 2D array of characters, colors, and background colors. During the rendering process, these elements are converted into their respective ANSI escape codes.

Features

This class provides methods to manipulate the 2D array, including:

Adding a character, color, or background color to a specific position.
Inserting a string at a specified location.
Rendering the entire array and converting it into ANSI escape codes.

PlotBase

Overview

PlotBase is a foundational class that utilizes the Palette class to structure plots and handle common tasks shared across all plot types. These tasks include:

Managing ticks and labels
Drawing frames
Rendering fundamental structures like rectangles and lines

Drawing Fundamental Structures

The core idea behind drawing each structure is simple:

We pass the structure's dimensions to its respective method.
For example, the drawRectangle method takes four values—two for the height range and two for the width range.
The structure is then stored in terms of its vertices, which are tracked in state variables.
- this._x stores the x-coordinates of the vertices.
- this._y stores the y-coordinates of the vertices.

Example Walkthrough

Drawing a Rectangle

Suppose we need to draw a rectangle.
We call the drawRectangle method of the PlotBase class with parameters xb and yb, representing height and width coordinates:

  drawRectangle( [ 0, 3 ], [ 1, 3 ] );  // Height: (0,3), Width: (1,3)

The method processes these coordinates. In the case of a rectangle, it simply fetches the vertices and stores their x and y coordinates before passing them to the draw method.
The draw method stores the respective data in state variables (this._x, this._y).
Each fundamental structure (e.g., a single rectangle in a bar chart or a single line in a line plot) is stored this way.
Once all structures are stored in the state, we perform the build step:
- This step fills in missing coordinates based on vertices to complete the shape.
- The Palette class method setElement is then used to set characters at all filled coordinates.
- Finally, the render step converts all stored encoding names (color, sketch, and background) into their respective ANSI escape codes.

setNonEnumerableReadOnly( Pallete.prototype, 'setcanvas', function setcanvas() {
	var remainwidth = process.stdout.columns - 0;
	var background;
	var canva = '';
	var color;
	var i;
	var j;

	for ( i = this._sketch.length - 1; i >= 0; i-- ) {
		canva += '\r';
		for ( j = 0; j < this._sketch[ 0 ].length && j < remainwidth; j++ ) {
			// If background color is not same as previous then only we need to change it
			if ( !this.isLegal( i, j - 1 ) || this._backgrounds[ i ][ j ] !== this._backgrounds[ i ][ j - 1 ] ) {
				background = ansiColors[ this._backgrounds[ i ][ j ] ];
				canva += background;
			}
			// If forward color is not same as previous then only we need to change it
			if ( !this.isLegal( i, j - 1 ) || this._colors[ i ][ j ] !== this._colors[ i ][ j - 1 ] ) {
				color = ansiColors[ this._colors[ i ][ j ] ];
				canva += color;
			}
			canva += markers[ this._sketch[ i ][ j ] ];
		}
		canva += ansiColors[ 'def' ];
		canva += '\n';
	}
	this.canva = canva;
	return canva;
} );

every type of plot use this base plot to draw ther visulization all scaling work related to the cordinates also done in the specific plot class
Ex :

barPlot

This class use the basePlot and provide interface to draw a bar chart .
It scale the data points find appropriate width which fit in provided height and width of the container and scale them to the range

Questions

The current implementation is still a prototype, and other plot files, like sparkline, follow a different structure. In sparkline, we first set all the state data, and the main logic is written directly in the render method and in my case i am using the functions it will be good if you can have one look onit !.
- Question: How strictly do I need to follow this structure?
For the line chart, I think we need a more detailed approach. Instead of using █, we should use the half-block characters:
- Examples: ▘, ▖, ▗, ▝
- There are also combination blocks like ▚.
- This would require more logic in the render method to decide whether to use the full block (█) or a more detailed smaller block (▚).
- Question: Is this approach a rabbit hole for our use case? Should we stick with █ as the unit pixel, or would using more detailed blocks (▝) be a viable approach?
Does my current version, which includes features like choosing colors and setting backgrounds, add unnecessary complexity?
- Question: Is this level of customization overkill for our use case? Should we simplify it by removing some of these features?

@kgryte , @Planeshifter

kgryte · 2025-03-04T03:31:48Z

Why the directory "static_plots"? Is there a reason to distinguish between "static" and presumably "dynamic"?

Actully when i see the sparkline code base i thought it take the dynamic inputs means continues from buffer , so the interface i have designe is for static plots only in which we provide full date before rendering , so thats the reason why i have put the name static_plot .

kgryte · 2025-03-04T03:32:38Z

+	out.cols = void 0;
+	out.xaxis = [];
+	out.yaxis = [];
+	out.barColor = 'Fbl';


What is the color naming scheme here? "Fbl" is not immediately obvious.

Fbl stands for forward ( it is name i have seen used in ANSI encoding ) color black , we also have the Bbl for background black . we can change the color schema naming afterwards.

kgryte · 2025-03-04T03:33:11Z

+};
+var inst = new barchart(options);
+
+inst.draw();


Why the distinction between "draw" and "render"?

kgryte · 2025-03-04T03:34:48Z

+var getLabelColor = require( './props/labelColor/get.js' );
+var setMarker = require( './props/marker/set.js' );
+var getMarker = require( './props/marker/get.js' );
+var primitive = require( './../base/lib' );


No walking directories like this. This is inherently fragile if working to access the functionality of another package. If an API does not exist in a package, always use package identifiers.

kgryte · 2025-03-04T03:35:22Z

+var getRows = require( './props/rows/get.js' );
+var setCols = require( './props/cols/set.js' );
+var getCols = require( './props/cols/get.js' );
+var setBarColor = require( './props/barColor/set.js' );


Folder names should always be snakecase, never camelcase. barColor => bar-color.

kgryte · 2025-03-04T03:36:16Z

+			'value': null
+		});
+	}
+	defineProperty( this, '_primitive', {


Why do we do this rather than inherit from a "base" class?

kgryte · 2025-03-04T03:36:37Z

+
+	finalCordx = [];
+	finalCordy = [];
+	this.addLableX();


Typo. addLabelX.

kgryte · 2025-03-04T03:37:03Z

+/**
+ * Add x label and tics.
+ *
+ * @name addLableX


kgryte · 2025-03-04T03:37:42Z

+ * @name addCategory
+ * @memberof Primitive.prototype
+ * @type {Function}
+ * @returns {void}


You need to document parameters.

kgryte · 2025-03-04T03:38:25Z

+
+/**
+ * @name rows
+ * @memberof Primitive.prototype


s/Primitive/BarPlot/ here and elsewhere.

kgryte · 2025-03-04T03:38:49Z

+ * @throws {TypeError}
+ *
+ */
+defineProperty( BarPlot.prototype, 'rows', {


Why does a bar chart have the concept of rows and columns?

kgryte · 2025-03-04T03:39:19Z

+ * @throws {TypeError}
+ *
+ */
+defineProperty( BarPlot.prototype, 'barColor', {


What if I want bars to have different colors?

kgryte · 2025-03-04T03:39:31Z

+ * @throws {TypeError}
+ *
+ */
+defineProperty( BarPlot.prototype, 'labelColor', {


What if I want labels to have different colors?

kgryte · 2025-03-04T03:40:43Z

+* @param {number} containerWidth - width of the container
+* @returns {Array} array of scale represent width and height of bar
+* */
+function scaleBar( x, y, containerWidth ) {


Helper functions such as this should be moved to the top of the file in a // FUNCTIONS // section before // MAIN //.

kgryte · 2025-03-04T03:41:02Z

+* Returns the rendering mode.
+*
+* @private
+* @returns {Array} rendering mode


This comment is incorrect.

kgryte · 2025-03-04T03:41:20Z

+* Sets the rendering mode.
+*
+* @private
+* @param {string} color - indicate the color code.
+* @throws {TypeError} must be a number


This is incorrect.

kgryte · 2025-03-04T03:42:30Z

+
+// VARIABLES //
+
+var colors = require( '@stdlib/plot/unicode/static_plots/marker/colors.js' );


Don't reach into packages like this. Find another way. If, in the future, we rename the colors.js file, this will break here, but we cannot possibly know that beforehand because you pierced the package wall. Files within a package should always be considered private.

kgryte · 2025-03-04T03:42:56Z

+*/
+function set( color ) {
+	/* eslint-disable no-invalid-this */
+	if ( !( color in colors ) ) {


Don't use in. Use, e.g., array/base/assert/contains.

kgryte · 2025-03-04T03:43:09Z

+* Returns the rendering mode.
+*
+* @private
+* @returns {Array} rendering mode


kgryte · 2025-03-04T03:43:44Z

+		return;
+	}
+	if ( !isNumber( num ) ) {
+		throw new TypeError( format( 'invalid assignment.  must be a array.' ) );


Must be an array and yet we are checking for a number.

kgryte · 2025-03-04T03:43:56Z

+* Returns the rendering mode.
+*
+* @private
+* @returns {Array} rendering mode


kgryte · 2025-03-04T03:44:43Z

+*/
+function get() {
+	/* eslint-disable no-invalid-this */
+	return this._cols;


Why are we returning _cols when this is the marker property?

kgryte · 2025-03-04T03:44:53Z

+
+// VARIABLES //
+
+var markers = require( '@stdlib/plot/unicode/static_plots/marker/markers.js' );


Don't do this.

kgryte · 2025-03-04T03:46:05Z

Also, why are all these files in bar/*? Why are they not in bar/lib/*?

kgryte · 2025-03-04T03:46:59Z

+// VARIABLES //
+
+var defaults = {
+	'backgroundColor': 'Bwh',


You need to explain the color naming convention here.

kgryte · 2025-03-04T03:47:19Z

+
+var defaults = {
+	'backgroundColor': 'Bwh',
+	'forwardColor': 'Frd',


Presumably, by forward you mean foreground, correct?

kgryte · 2025-03-04T03:47:31Z

+var defaults = {
+	'backgroundColor': 'Bwh',
+	'forwardColor': 'Frd',
+	'marker': 'sp'


What is sp?

kgryte · 2025-03-04T03:49:02Z

+// MAIN //
+
+/**
+* Pallete constructor.


Looking at this class, I don't have a good idea what is meant by "Pallete" and what this class is useful for.

kgryte · 2025-03-04T03:51:39Z

+});
+
+/**
+ * Display the rendered plots.


We have many methods for "rendering". Why build, show, draw, drawFrame, draw*, and render (elsewhere)? It is not clear how these all fit together and why it makes sense to organize the code like this.

kgryte · 2025-03-04T03:52:23Z

+});
+
+/**
+ * @name setSize


Presumably this should be size. You also need to add descriptions.

kgryte · 2025-03-04T03:56:18Z

+
+'use strict';
+
+var colors = {


Notice the documentation in this file:

stdlib/lib/node_modules/@stdlib/repl/presentation/lib/ansi_escape_codes.js

Line 31 in aab2efb

var ANSI_ESCAPE_CODES = {

kgryte · 2025-03-04T03:57:40Z

+	'[1,1,1,1]': '█'
+};
+
+for ( i = 0; i < 10; i++ ) {


What is the point of this loop?

kgryte · 2025-03-04T04:18:50Z

Questions/comments:

Why do we need to distinguish between Pallet and PlotBase? How are you envisioning another package using Pallet independently of PlotBase?
For axes and tick marks, I suggest studying quite closely how D3 does it axis and tick mark generation. You further want to support setting the number of desired ticks.
For desired plot types, see https://github.com/JuliaPlots/UnicodePlots.jl.
For line chart glyphs, see https://github.com/JuliaPlots/UnicodePlots.jl.
It is hard to provide you with solid feedback when the current code is in such a poor state, with incorrect docs, undesired organization, etc. In general, always strive to at least have what it is completed in as pristine a state as possible. This will significantly help facilitate constructive feedback. Otherwise, it is far too easy to get bogged down in the too many to count mistakes, as are currently present in this draft PR.
Expressing plot dimensions in terms of "rows" and "columns", while valid, is not going to match user intuition. Read the code currently in feat: add plot/table/unicode #2407 to get a better idea of what we're looking for.
I suggest spending more time studying D3 and packages such as https://github.com/JuliaPlots/UnicodePlots.jl.

Vinit-Pandit · 2025-03-04T05:02:58Z

Questions/comments:

Why do we need to distinguish between Pallet and PlotBase? How are you envisioning another package using Pallet independently of PlotBase?

For axes and tick marks, I suggest studying quite closely how D3 does it axis and tick mark generation. You further want to support setting the number of desired ticks.

For desired plot types, see https://github.com/JuliaPlots/UnicodePlots.jl.

For line chart glyphs, see https://github.com/JuliaPlots/UnicodePlots.jl.

It is hard to provide you with solid feedback when the current code is in such a poor state, with incorrect docs, undesired organization, etc. In general, always strive to at least have what it is completed in as pristine a state as possible. This will significantly help facilitate constructive feedback. Otherwise, it is far too easy to get bogged down in the too many to count mistakes, as are currently present in this draft PR.

Expressing plot dimensions in terms of "rows" and "columns", while valid, is not going to match user intuition. Read the code currently in feat: add plot/table/unicode #2407 to get a better idea of what we're looking for.

I suggest spending more time studying D3 and packages such as https://github.com/JuliaPlots/UnicodePlots.jl.

Thanks again for the guidance—I’ll iterate based on this feedback!

Vinit-Pandit · 2025-04-20T06:31:40Z

/stdlib help

stdlib-bot · 2025-04-20T06:31:57Z

@Vinit-Pandit, available slash commands include:

/stdlib check-files - Check for required files.
/stdlib make-commands - Print make commands for package changed in PR.
/stdlib update-copyright-years - Update copyright header years.
/stdlib lint-autofix - Auto-fix lint errors.
/stdlib merge - Merge changes from develop branch into this PR.
/stdlib rebase - Rebase this PR on top of develop branch.

Vinit-Pandit · 2025-04-20T06:32:55Z

/stdlib rebase

stdlib-bot · 2025-04-20T06:35:04Z

/stdlib rebase

@Vinit-Pandit, the slash command failed to complete. Please check the workflow logs for details.

View workflow run

Vinit-Pandit · 2025-04-20T06:39:31Z

I'll add the new PR , it's already too messed up.

Vinit-Pandit · 2025-04-21T06:21:55Z

Opened new pr #6750

Vinit-Pandit added 3 commits February 25, 2025 16:55

stdlib-bot added the Needs Review A pull request which needs code review. label Feb 25, 2025

stdlib-bot added the bot: In Progress Pull request is currently awaiting automation. label Feb 25, 2025

chore: update copyright years

e903ccf

stdlib-bot removed the bot: In Progress Pull request is currently awaiting automation. label Feb 25, 2025

Vinit-Pandit marked this pull request as draft February 26, 2025 13:02

stdlib-bot removed the Needs Review A pull request which needs code review. label Feb 26, 2025

Vinit-Pandit mentioned this pull request Mar 4, 2025

Office Hours (2025-03-04) stdlib-js/meetings#9

Closed

kgryte reviewed Mar 4, 2025

View reviewed changes

Vinit-Pandit mentioned this pull request Apr 7, 2025

[RFC]: adding support for visualizing benchmark results stdlib-js/google-summer-of-code#146

Closed

7 tasks

stdlib-bot added the bot: In Progress Pull request is currently awaiting automation. label Apr 20, 2025

stdlib-bot removed the bot: In Progress Pull request is currently awaiting automation. label Apr 20, 2025

stdlib-bot added the bot: In Progress Pull request is currently awaiting automation. label Apr 20, 2025

stdlib-bot removed the bot: In Progress Pull request is currently awaiting automation. label Apr 20, 2025

Vinit-Pandit closed this Apr 20, 2025

Vinit-Pandit deleted the Unicode_Plot branch April 20, 2025 06:40


		// VARIABLES //

		var colors = require( '@stdlib/plot/unicode/static_plots/marker/colors.js' );


		// VARIABLES //

		var markers = require( '@stdlib/plot/unicode/static_plots/marker/markers.js' );

Uh oh!

Conversation

Vinit-Pandit commented Feb 25, 2025

Description

Related Issues

Questions

Other

Checklist

unicode bar plot

line char ( under construcution )

Uh oh!

Vinit-Pandit commented Feb 25, 2025

Uh oh!

Vinit-Pandit commented Feb 26, 2025

Uh oh!

Vinit-Pandit commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Features

Overview

Drawing Fundamental Structures

Example Walkthrough

Drawing a Rectangle

Questions

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Vinit-Pandit Mar 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Vinit-Pandit commented Feb 27, 2025 •

edited

Loading

Vinit-Pandit Mar 4, 2025 •

edited

Loading