chunqiuyiyu / ervy Goto Github PK

Check the conversation in jcubic/jquery.terminal#553 copy of the thread in xtermjs/xterm.js#2656

the problem is that scatter plot is broken because your code assume that if you move cursor to next line with \x1b[?B it move max to next line. which is not correct on clear terminal. B ANSI escape code can't move past last line. It will stay at the last line no matter how big the argument is.

To reproduce the issue, open your demo with just scatter plot on clear terminal.

This is how it look like

it's only by accident that the plot works when there is more lines. In my processing of ANSI escapes it works if I use:

                            case 'B': // Down
                                //cursor.y += value;
                                cursor.y = Math.min(cursor.y + value, result.length);
                                break;

but this is not how terminal should work because it break other code. The proper is cursor.y += value and the plot look like the image above.

I've found a link in your project in one of my old text note and I've used your library as demo for jQuery Terminal (will link it in example page).

https://codepen.io/jcubic/pen/gObPBdP?editors=0010

this can be way to document the project, examples are always great way to showcase the API. You can add command one for each plot/chart. And code for the terminal don't add much boilerplate.

(the welcome message can of course showcase your project and version)

If you don't have time and want this, and if you confirm that you will include the demo with link to my project (terminal.jcubic.pl and my name in credit section or other place) I can take a time to create demo of all your plots.

When using the bullet chart, the following error is thrown:

TypeError: paint is not a function

The cause is this line, you try to import a function that doesn't exist in utils

Last plot, I have some issue:

command scatter Foo:0,0;1,1;2,2;3,2;4,2;5,6;6,6:red

that generates this data:

[{"key":"Foo","value":[0,0],"style":"\u001b[31m@\u001b[0m"},{"key":"Foo","value":[1,1],"style":"\u001b[31m@\u001b[0m"},{"key":"Foo","value":[2,2],"style":"\u001b[31m@\u001b[0m"},{"key":"Foo","value":[3,2],"style":"\u001b[31m@\u001b[0m"},{"key":"Foo","value":[4,2],"style":"\u001b[31m@\u001b[0m"},{"key":"Foo","value":[5,6],"style":"\u001b[31m@\u001b[0m"},{"key":"Foo","value":[6,6],"style":"\u001b[31m@\u001b[0m"}]

I have testing code like this:

// same imports as in demo/index.js
var size = +process.argv[2];
(function(ervy) {
    var chars = ['#', '+', '*', '#', '@', '%'];
    var colors = ['red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white'];
    var commands = {
        scatter: function(...args) {
            var data = args.map((x, i) => {
                var [key, value, style] = x.split(':');
                if (style) {
                    if (style.length === 1) {
                        style = ervy.fg(colors[i], style);
                    } else {
                        style = ervy.bg(style, size);
                    }
                } else {
                    style = chars[i];
                }
                return value.split(';').map(x => {
                    return {key, value: x.split(',').map(x => +x), style};
                });
            });
            data = [].concat.apply([], data);
            return ervy.scatter(data, {width: 15, legendGap: 18});
        }
    };
    console.log(commands.scatter('Foo:1,1;2,2;3,3;4,4;5,5;6,5;7,5;8,5:green','Bar:1,2;2,3;3,4;4,5;5,6;6,6;7,6;8,6:yellow','Baz:12,8;13,8;12,7;13,7:red','Quux:12,4;14,4:blue'));
})({fg,scatter,bg});

Below is output of pixel size 2 and 1. I think that they should look the same but the width of the dots,

I've noticed that the demo doesn't render properly when you select the text. The charts should be reversed.
To fix the issue the style should be both ervy.bg and ervy.fg. Is it possible to combine the styles?

Hi, I have a strange problem with the scatter chart. Somehow the Y Axis starts at 2 and not 1.

• macOS version 10.15.7
• Terminal.app version 2.10

The code:

const options = {
  legendGap: 4,
};

const data = [
  { key: "A", value: [1, 1] },
  { key: "A", value: [2, 2] },
  { key: "A", value: [3, 3] },
  { key: "A", value: [4, 4] },
];

console.log(ervy.scatter(data, options));

And this is the result:

Am I missing something?
Thank you very much!

I'm checking all pages that use my library (I link to them from the examples page on my website).

And found that on your website you autofocus the terminal when opening. This doesn't look right.

You need to use the option:

enabled: false

so it does not automatically focus.

I can create a PR if you want.

Check my demo: https://codepen.io/jcubic/pen/gObPBdP?editors=0010

commands:

pie A:10:green B:20:$ C:30:red

it renders half of the circle

and this one is komplety broken:

pie A:10:green B:20:$ C:30:red d:10:blue

The code just pass the data to ervy.pie.

I wrote drawille a few years ago, if you're interested, i can help adding support for it (with drawille, every character cell becomes 8 pixel that you can individually control).

Those codes in specification say it should not move the cursor some terminal move by one, others don't implementation is inconsistent.

Check my question on Unix stackExchange.

What you thing the code suppose to do if there is 0C or 0A?

Check this code:

const ervy = require('ervy');

console.log(ervy.bar([
    { key: 'A', value: 30, style: ervy.bg('green') },
    { key: 'B', value: 10, style: ervy.bg('blue')},
    { key: 'C', value: 50, style: ervy.bg('red')}
]));
console.log(ervy.bar([
    { key: 'A', value: 30, style: ervy.bg('green') },
    { key: 'B', value: 10, style: ervy.bg('blue')},
    { key: 'C', value: 50, style: ervy.bg('red')}
]));

each time you call ervy.bar, next bar char is indented with one more additional space