zz85/ascii_charts.js

## ascii_charts.js
// '█' -> '▏'

times = (x) => new Array(x).fill(0);

var blocks = times(8).map((_, i) => String.fromCharCode(9608 + i));
var values = times(8).map(() => Math.random() * 10000);
// values = [0, 4, 10, 20, 50]
// values = [5, 5, 5, 5, 5]
// values = [ 0, 1,2,3,4,5,6,7,]
// values = [0, 0, 0]

// take care of extremes
// 10, 40, 50, 80
// 2 4 8 12
var width = 4;

let max = Math.max(...values, 1);

// 1. use sum as max
// 2. use max as length + buffer

// red \u001b[31m
var clear_screen = '\u001b[0J';
var up = (n) => `\u001b[${n}A`;


// https://en.wikipedia.org/wiki/ANSI_escape_code
// "←↖↑↗→↘↓↙"
// https://stackoverflow.com/questions/2685435/cooler-ascii-spinners
// https://jrgraphix.net/r/Unicode/2800-28FF
// https://alexwlchan.net/2018/05/ascii-bar-charts/
// https://www.lihaoyi.com/post/BuildyourownCommandLinewithANSIescapecodes.html#completeness
// https://bennuttall.com/ascii-bar-charts/
// http://code.openark.org/blog/mysql/sql-pie-chart
// https://firebearstudio.com/blog/node-js-command-line-apps-utilities.html
// https://github.com/sindresorhus/sparkly

// ASCII dashboards
// https://github.com/msleal/asciivmssdashboard
// https://github.com/yaronn/blessed-contrib
// asciiflow
// bashplotlib
// https://github.com/bitly/data_hacks

// plotters
// https://github.com/Evizero/UnicodePlots.jl
// https://github.com/linkedin/asciietch
// https://firebearstudio.com/blog/node-js-command-line-apps-utilities.html
// https://www.radare.org/n/cutter.html
// https://www.npmjs.com/package/cli-spinners

// -o
// ===|
// brasille
// xxxxxx
// ########
// 2D Charts
// ||||||||||||||
// *****
// floor, *, end
// bar
// javascript href animation progress bar???
// █░
// http://glench.com/hash/#______/|______________________#


var fill = _ => blocks[0];
var fill = _ => "-" //"⣿⠛⣤⣠⠶⢠⢸ \u2836" // " " // "@#=*#.=-|

fractions = "#%$!.".split('');
fractions = "@Oo.".split('');
fractions = "█▇▆▅▄▃▁".split('')
fractions = "◇◈◆".split('')
fractions = "⣇⠸⠰⠠".split('')
fractions = blocks;

var partials = (remainder) => {
    if (remainder == 0) return '';
    var b = fractions.length - (remainder * fractions.length | 0) - 1;
    // return fractions[b];
    return '◈' // '|' // 'o' // '|]>'
}

function fit(v, w) {
    w = w || 10;
    return Array(w-v.length + 1).join(' ') + v;
}

function fitleft(v, w) {
    w = w || 10;
    return v + Array(w-v.length).join(' ') ;
}

function plot(values, max) {
    var min = Math.min(...values, 0);
    // normalize
    values = values.map(v => v - min)
    max = max - min;

    let sum = values.reduce((x, y) => x + y, 0);

    var bow = values.map((v, i) => {
        var chars = v / max * width;
        var a = chars | 0;
        var remainder = (chars % 1);
        var partial = remainder !== 0;

        var p = partial ? partials(remainder): '';
        var c = width - a - p.length;
        var bar = times(a).map(fill).join('');

        var percentage = (v/sum * 100).toFixed(2) + '%';
        var value = fit(v.toFixed(0), 7)
        var label = fit(`Item ${i}` + '', 10)
        console.log(`${label} | ${value} |${bar}${p}${Array(c + 1).join(' ')}| ${percentage}`);
    });
    // console.log(bow);
    // console.log('max', max, 'sum', sum);
}

plot(values, max);

setInterval(() => {
    process.stdout.write(up(values.length) + clear_screen);
    // values = values.map(v => v + (Math.random() - 0.5) * 100)
    values = values.map((v, i) => v + Math.sin(Date.now() * 0.0007 + i) * 200)
    max = Math.max(...values, 1, max);
    plot(values, max);
}, 300)

/*
Thoughts
- These are Fun!
- Good Visualizations, Informational and Presentable
- Useful - Make CLI Terminal tools
- Just like colors, use it!
*/
	// '█' -> '▏'

	times = (x) => new Array(x).fill(0);

	var blocks = times(8).map((_, i) => String.fromCharCode(9608 + i));
	var values = times(8).map(() => Math.random() * 10000);
	// values = [0, 4, 10, 20, 50]
	// values = [5, 5, 5, 5, 5]
	// values = [ 0, 1,2,3,4,5,6,7,]
	// values = [0, 0, 0]

	// take care of extremes
	// 10, 40, 50, 80
	// 2 4 8 12
	var width = 4;

	let max = Math.max(...values, 1);

	// 1. use sum as max
	// 2. use max as length + buffer

	// red \u001b[31m
	var clear_screen = '\u001b[0J';
	var up = (n) => `\u001b[${n}A`;


	// https://en.wikipedia.org/wiki/ANSI_escape_code
	// "←↖↑↗→↘↓↙"
	// https://stackoverflow.com/questions/2685435/cooler-ascii-spinners
	// https://jrgraphix.net/r/Unicode/2800-28FF
	// https://alexwlchan.net/2018/05/ascii-bar-charts/
	// https://www.lihaoyi.com/post/BuildyourownCommandLinewithANSIescapecodes.html#completeness
	// https://bennuttall.com/ascii-bar-charts/
	// http://code.openark.org/blog/mysql/sql-pie-chart
	// https://firebearstudio.com/blog/node-js-command-line-apps-utilities.html
	// https://github.com/sindresorhus/sparkly

	// ASCII dashboards
	// https://github.com/msleal/asciivmssdashboard
	// https://github.com/yaronn/blessed-contrib
	// asciiflow
	// bashplotlib
	// https://github.com/bitly/data_hacks

	// plotters
	// https://github.com/Evizero/UnicodePlots.jl
	// https://github.com/linkedin/asciietch
	// https://firebearstudio.com/blog/node-js-command-line-apps-utilities.html
	// https://www.radare.org/n/cutter.html
	// https://www.npmjs.com/package/cli-spinners

	// -o
	// ===\|
	// brasille
	// xxxxxx
	// ########
	// 2D Charts
	// \|\|\|\|\|\|\|\|\|\|\|\|\|\|
	// *****
	// floor, *, end
	// bar
	// javascript href animation progress bar???
	// █░
	// http://glench.com/hash/#______/\|______________________#


	var fill = _ => blocks[0];
	var fill = _ => "-" //"⣿⠛⣤⣠⠶⢠⢸ \u2836" // " " // "@#=*#.=-\|

	fractions = "#%$!.".split('');
	fractions = "@Oo.".split('');
	fractions = "█▇▆▅▄▃▁".split('')
	fractions = "◇◈◆".split('')
	fractions = "⣇⠸⠰⠠".split('')
	fractions = blocks;

	var partials = (remainder) => {
	if (remainder == 0) return '';
	var b = fractions.length - (remainder * fractions.length \| 0) - 1;
	// return fractions[b];
	return '◈' // '\|' // 'o' // '\|]>'
	}

	function fit(v, w) {
	w = w \|\| 10;
	return Array(w-v.length + 1).join(' ') + v;
	}

	function fitleft(v, w) {
	w = w \|\| 10;
	return v + Array(w-v.length).join(' ') ;
	}

	function plot(values, max) {
	var min = Math.min(...values, 0);
	// normalize
	values = values.map(v => v - min)
	max = max - min;

	let sum = values.reduce((x, y) => x + y, 0);

	var bow = values.map((v, i) => {
	var chars = v / max * width;
	var a = chars \| 0;
	var remainder = (chars % 1);
	var partial = remainder !== 0;

	var p = partial ? partials(remainder): '';
	var c = width - a - p.length;
	var bar = times(a).map(fill).join('');

	var percentage = (v/sum * 100).toFixed(2) + '%';
	var value = fit(v.toFixed(0), 7)
	var label = fit(`Item ${i}` + '', 10)
	console.log(`${label} \| ${value} \|${bar}${p}${Array(c + 1).join(' ')}\| ${percentage}`);
	});
	// console.log(bow);
	// console.log('max', max, 'sum', sum);
	}

	plot(values, max);

	setInterval(() => {
	process.stdout.write(up(values.length) + clear_screen);
	// values = values.map(v => v + (Math.random() - 0.5) * 100)
	values = values.map((v, i) => v + Math.sin(Date.now() * 0.0007 + i) * 200)
	max = Math.max(...values, 1, max);
	plot(values, max);
	}, 300)

	/*
	Thoughts
	- These are Fun!
	- Good Visualizations, Informational and Presentable
	- Useful - Make CLI Terminal tools
	- Just like colors, use it!
	*/