Giter VIP home page Giter VIP logo

Comments (9)

gtktsc avatar gtktsc commented on August 11, 2024

Hey @kaushals-mecha, thanks for raising this issue!

  1. What do you mean by empty symbol only between/inside the graph? To not render the "-" symbols outside the axis? To make it looks like
------------->
1 2 3 4 5 6 7

instead of:

------------->
1-2-3-4-5-6-7

Sounds like a good idea, I'll take a look at it

  1. Good idea :👍 , I'll try to implement legends.
  2. Not sure if I understand correctly. Label like "%" or "pm"? There is a way to do custom formatter for lines:
  plot(
    [
      [
        [0, -10],
        [1, 0.001],
        [2, 10],
        [3, 200],
        [4, 10000],
        [5, 2000000],
        [6, 50000000],
      ],
    ],
    {
      width: 30,
      height: 20,
      formatter: (n: number, { axis }: FormatterHelpers) => {
        const labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
        if (axis === 'y') return n;
        return labels[n] || 'X';
      },
    },
  )

         ▲
 50000000┤                            ┏━
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
         │                            ┃
  2000000┤                       ┏━━━━┛
      -10┤━━━━━━━━━━━━━━━━━━━━━━━┛
         └┬────┬────┬────┬───┬────┬────┬▶
          A    B    C    D   E    F    G

If you'd like to add "%" or "pm" you might want to do something like:

 formatter: (n: number, { axis }: FormatterHelpers) => {
        const labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
        if (axis === 'y') return `${n}%`;
        return `${n}pm`;
      },

I'll take a look at it and will get back to you later! Thanks!

from ascii-chart.

gtktsc avatar gtktsc commented on August 11, 2024

I've added a few new options:

legend?: { position?: 'left' | 'right' | 'top' | 'bottom'; series: string | string[] };
xLabel?: string;
yLabel?: string;

and new symbols:

background?: string;
border?: string;

Here is an example:

plot(
 [
      [
        [1, 1],
        [2, 2],
        [3, 4],
        [4, 6],
      ],
      [
        [5, 4],
        [6, 1],
        [7, 2],
        [8, 3],
      ],
    ],
    {
      width: 20,
      fillArea: true,
      color: ['ansiGreen', 'ansiBlue'],
      legend: { position: 'bottom', series: ['first', 'second'] },
    },
);

 ▲
6┤       ██
 │       ██
4┤    █████  ███
3┤    █████  ███    ██
2┤  ███████  ███ █████
1┤█████████  █████████
 └┬──┬─┬──┬──┬──┬─┬──┬▶
  1  2 3  4  5  6 7  8
█ first
█ second

It should cover your needs. Please let me know if you need something else. I'm closing this issue for now. Thanks again!

from ascii-chart.

kaushals-mecha avatar kaushals-mecha commented on August 11, 2024

Thanks a lot for quick solutions! really appreciated!

from ascii-chart.

kaushals-mecha avatar kaushals-mecha commented on August 11, 2024

My third point was to add

The way to add label to x and y axis in the chart, currently we can only add title.
as you can see x-asis is labelled as usage in the image i shared,

from ascii-chart.

gtktsc avatar gtktsc commented on August 11, 2024

Hey @kaushals-mecha, sorry I should have mentioned that as well - in the latest version, I've also added xLabel and yLabel options, used as:

plot(
  [
    [1, 1],
    [2, 4],
    [3, 4],
    [4, 2],
    [5, -1],
    [6, 3],
    [7, -1],
    [8, 9],
  ],
  { xLabel: 'x', yLabel:'y', width: 20, height: 8 },
);

   ▲
  9┤                  ┏━
   │                  ┃
   │                  ┃
  4┤  ┏━━━━┓          ┃
  3┤  ┃    ┃     ┏━┓  ┃
y 2┤  ┃    ┗━━┓  ┃ ┃  ┃
  1┤━━┛       ┃  ┃ ┃  ┃
 -1┤          ┗━━┛ ┗━━┛
   └┬──┬─┬──┬──┬──┬─┬──┬▶
    1  2 3  4  5  6 7  8
             x

Is this what you need?

from ascii-chart.

kaushals-mecha avatar kaushals-mecha commented on August 11, 2024

Thanks a lot man! Its solved

from ascii-chart.

kaushals-mecha avatar kaushals-mecha commented on August 11, 2024

Also is there any way is we could give the width in percentages as in "50%", "100%"

i am really sorry for demanding lot of customizations

from ascii-chart.

gtktsc avatar gtktsc commented on August 11, 2024

Hey @kaushals-mecha, I'm sorry but width in percentage is impossible to achieve, because this package doesn't know what is the width of the environment where it's being used.

For example, I'm using simple-ascii-chart as an API, so anyone can create chart in terminal by using curl or browser fetch - and I can't determine width via fetch/curl calls.

from ascii-chart.

kaushals-mecha avatar kaushals-mecha commented on August 11, 2024

Okay got it, not an issue thanks for the clarification

from ascii-chart.

Related Issues (5)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.