Repeating for dynamic color lengths

[nelsonsbrian]

hello, really happy with the library. Really graet job.

One suggestion could be to automatically wrap the colors.

Meaning, if I provide 3 in the colors array, that if I also have 6 series, the series 4-6 would get the same colors as 1-3. Do something like 'colors % colors.lenth

My particular use case is that I don't necessarily know how many series I have at compile time, so to have colors, I'd need to do some computing magic, when I could just supply a few colors and they would get repeated.

Thanks again and let me know if what I suggested wasn't clear.

[gtktsc]

Hey @nelsonsbrian, First of all, I apologize for the late reply. Does something like this address your needs?

color: (series, coords) => {
  return 'ansiGreen';
},

The colors parameter now accepts a function typed as:

(series: number, coordinates: MultiLine) => Color;

This allows to dynamically adjusting colors based on the series or coordinates, here is example usage

  const plotOutput = plot(data, {
    color: (series) => {
      if (series === 0) return 'ansiRed';
      if (series === 1) return 'ansiYellow';
      return 'ansiGreen';
    },
    width: 80,
    height: 20,
  });

With both coordinates and series available in the function, you can implement something like what you mentioned—calculations based on data length. This feature is available in the latest version.

Let me know if you need anything else, and once again, I apologize for the delay!

[nelsonsbrian]

What I had done is create a helper function:
/**

• Gets a list of colors to use for the graph based on the number of series.

• The colors will repeat if there are more series than colors.
  */
  export function getGraphColorsFromSeriesLength(length: number): Colors {
  const colors: Colors = ['ansiRed', 'ansiGreen', 'ansiYellow', 'ansiBlue', 'ansiMagenta', 'ansiCyan', 'ansiWhite'];

  return Array.from({ length }, (_, i) => colors[i % colors.length]);
  }

Then I can dynamically pass in a width and get my expect coloring. My width widely variable, ~3-80 or so...

const g = plot(coordinates, {
    title: `|wLeaderboard: |y${LeaderboardUtil.BaseStatsFormatting[statKey].title} |w- All Time|n`,
    width,
    height: 34,
    color: getGraphColorsFromSeriesLength(width),
    fillArea: true,
    legend: {
        position: 'left',
        series: data.map((item) => `${LeaderboardUtil.GetCharacterName(player, item.id, 20, ``, false)} `)
    }
});

I'll put a task to look at your recent 4.1.1 version and compare.

[nelsonsbrian]

No worries on the delay.