zz85 · December 14, 2020 16:44 · zz85 · Dec 14, 2020
diff --git a/ascii_charts.js b/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!
	*/