console-toolkit 1.0.0

package/src/ansi/sgr.js

@@ -0,0 +1,214 @@
+// SGR (Select Graphics Rendition) definitions and helpers.
+// SGR is a part of CSI (Control Sequence Introducer) sequences.
+// CSI is a part of Fe Escape sequences.
+// Type Fe is supported by C1 control codes.
+// See https://en.wikipedia.org/wiki/ANSI_escape_code for more details.
+
+// matcher
+export const matchSgr = /\x1B\[([\x30-\x3F]*)([\x20-\x2F]*)m/g;
+
+export const Colors = {BLACK: 0, RED: 1, GREEN: 2, YELLOW: 3, BLUE: 4, MAGENTA: 5, CYAN: 6, WHITE: 7, DEFAULT: 9};
+
+export const Commands = {
+  RESET_ALL: '0',
+  BOLD: '1',
+  DIM: '2',
+  ITALIC: '3',
+  UNDERLINE: '4',
+  BLINK: '5',
+  RAPID_BLINK: '6',
+  INVERSE: '7',
+  HIDDEN: '8',
+  STRIKETHROUGH: '9',
+  DEFAULT_FONT: '10',
+  RESET_FONT: '10',
+  FONT_GOTHIC: '20',
+  RESET_BOLD: '22',
+  RESET_DIM: '22',
+  RESET_ITALIC: '23',
+  RESET_UNDERLINE: '24',
+  RESET_BLINK: '25',
+  RESET_RAPID_BLINK: '25',
+  RESET_INVERSE: '27',
+  RESET_HIDDEN: '28',
+  RESET_STRIKETHROUGH: '29',
+  CURLY_UNDERLINE: '4:3',
+  RESET_CURLY_UNDERLINE: '24',
+  DOUBLE_UNDERLINE: '21',
+  RESET_DOUBLE_UNDERLINE: '24',
+  EXTENDED_COLOR: '38',
+  BG_EXTENDED_COLOR: '48',
+  DEFAULT_COLOR: '39',
+  BG_DEFAULT_COLOR: '49',
+  RESET_COLOR: '39',
+  RESET_BG_COLOR: '49',
+  OVERLINE: '53',
+  RESET_OVERLINE: '55',
+  DECORATION_COLOR: '58',
+  DECORATION_DEFAULT_COLOR: '59',
+  RESET_DECORATION_COLOR: '59'
+};
+
+export const ColorFormat = {COLOR_256: '5', TRUE_COLOR: '2'};
+export const ColorFormatSize = {[ColorFormat.COLOR_256]: 3, [ColorFormat.TRUE_COLOR]: 5};
+
+export const FgColorOptions = {
+  base: 30,
+  brightBase: 90,
+  default: Commands.DEFAULT_COLOR,
+  extended: Commands.EXTENDED_COLOR
+};
+export const BgColorOptions = {
+  base: 40,
+  brightBase: 100,
+  default: Commands.BG_DEFAULT_COLOR,
+  extended: Commands.BG_EXTENDED_COLOR
+};
+export const DecorationColorOptions = {
+  base: 0,
+  brightBase: 100,
+  default: Commands.RESET_DECORATION_COLOR,
+  extended: Commands.DECORATION_COLOR
+};
+
+const resetCommands = {};
+for (const [k, v] of Object.entries(Commands)) {
+  if (!k.startsWith('RESET_')) continue;
+  const cmd = k.substring(6);
+  if (!Commands.hasOwnProperty(cmd)) continue;
+  resetCommands[Commands[cmd]] = v;
+}
+
+export const isFgColorCommand = command => (command >= '30' && command <= '37') || (command >= '90' && command <= '97');
+export const isBgColorCommand = command =>
+  (command >= '40' && command <= '47') || (command >= '100' && command <= '107');
+export const isFontCommand = command => command >= '10' && command <= '20';
+
+export const reset = command => {
+  command = String(command).toUpperCase();
+  if (Commands.hasOwnProperty(command)) {
+    command = Commands[command];
+  }
+  if (resetCommands.hasOwnProperty(command)) return resetCommands[command];
+  if (isFgColorCommand(command)) return Commands.RESET_COLOR;
+  if (isBgColorCommand(command)) return Commands.RESET_BG_COLOR;
+  if (isFontCommand(command)) return Commands.RESET_FONT;
+  // return undefined in all other cases
+};
+
+export const setCommands = commands => `\x1B[${Array.isArray(commands) ? commands.join(';') : commands}m`;
+
+export const colorNumber = color => {
+  if (typeof color == 'string') {
+    if (/^\d+$/.test(color)) {
+      color = parseInt(color);
+    } else {
+      color = color.toUpperCase();
+      return Colors.hasOwnProperty(color) ? Colors[color] : 0;
+    }
+  }
+  return typeof color == 'number' && color >= 0 && color <= 9 ? color : 0;
+};
+export const colorStdRgb = (r, g, b) => (r ? 1 : 0) + (g ? 2 : 0) + (b ? 4 : 0);
+
+export const getColor = color => 30 + colorNumber(color);
+export const getBgColor = color => 40 + colorNumber(color);
+export const getBrightColor = color => 90 + colorNumber(color);
+export const getBgBrightColor = color => 100 + colorNumber(color);
+export const getStdRgb = (r, g, b) => getColor(colorStdRgb(r, g, b));
+export const getBgStdRgb = (r, g, b) => getBgColor(colorStdRgb(r, g, b));
+export const getBrightStdRgb = (r, g, b) => getBrightColor(colorStdRgb(r, g, b));
+export const getBgBrightStdRgb = (r, g, b) => getBgBrightColor(colorStdRgb(r, g, b));
+
+export const setColor = color => setCommands(getColor(color));
+export const setBgColor = color => setCommands(getBgColor(color));
+export const setBrightColor = color => setCommands(getBrightColor(color));
+export const setBgBrightColor = color => setCommands(getBgBrightColor(color));
+export const setStdRgb = (r, g, b) => setCommands(getStdRgb(r, g, b));
+export const setBgStdRgb = (r, g, b) => setCommands(getBgStdRgb(r, g, b));
+export const setBrightStdRgb = (r, g, b) => setCommands(getBrightStdRgb(r, g, b));
+export const setBgBrightStdRgb = (r, g, b) => setCommands(getBgBrightStdRgb(r, g, b));
+
+export const fontNumber = font => (typeof font == 'number' && font >= 0 && font <= 10 ? font : 0);
+
+export const getFont = font => 10 + fontNumber(font);
+export const setFont = font => setCommands(setFont(font));
+
+const oneSixth = 6.0 / 256;
+const oneTwentyFourth = 24.0 / 256;
+const get6 = colorComponent => Math.floor(colorComponent * oneSixth);
+const get24 = intensity => Math.floor(intensity * oneTwentyFourth);
+const lim = (from, to) => value => Math.max(from, Math.min(to, value)); // inclusive
+const lim5 = lim(0, 5);
+const lim23 = lim(0, 23);
+
+export const getRawColor256 = color => [Commands.EXTENDED_COLOR, ColorFormat.COLOR_256, color];
+export const getStdColor256 = color => getRawColor256(colorNumber(color));
+export const getBrightStdColor256 = color => getRawColor256(8 + colorNumber(color));
+export const getColor6 = (r, g, b) => getRawColor256(16 + 36 * lim5(r) + 6 * lim5(g) + lim5(b));
+export const getColor256 = (r, g, b) => getColor6(get6(r), get6(g), get6(b));
+export const getHexColor256 = hex => getColor256((hex >> 16) & 0xff, (hex >> 8) & 0xff, hex & 0xff);
+export const getGrayColor24 = i => getRawColor256(232 + lim23(i));
+export const getGrayColor256 = i => getGrayColor24(get24(i));
+
+export const setRawColor256 = color => setCommands(getRawColor256(color));
+export const setStdColor256 = color => setCommands(getStdColor256(color));
+export const setBrightStdColor256 = color => setCommands(getBrightStdColor256(color));
+export const setColor6 = (r, g, b) => setCommands(getColor6(r, g, b));
+export const setColor256 = (r, g, b) => setCommands(getColor256(r, g, b));
+export const setHexColor256 = (r, g, b) => setCommands(getHexColor256(r, g, b));
+export const setGrayColor24 = i => setCommands(getGrayColor24(i));
+export const setGrayColor256 = i => setCommands(getGrayColor256(i));
+
+export const getBgRawColor256 = color => [Commands.BG_EXTENDED_COLOR, ColorFormat.COLOR_256, color];
+export const getBgStdColor256 = color => getBgStdColor256(colorNumber(color));
+export const getBgBrightStdColor256 = color => getBgStdColor256(8 + colorNumber(color));
+export const getBgColor6 = (r, g, b) => getBgRawColor256(16 + 36 * lim5(r) + 6 * lim5(g) + lim5(b));
+export const getBgColor256 = (r, g, b) => getBgColor6(get6(r), get6(g), get6(b));
+export const getBgHexColor256 = hex => getBgColor256((hex >> 16) & 0xff, (hex >> 8) & 0xff, hex & 0xff);
+export const getBgGrayColor24 = i => getBgRawColor256(232 + lim23(i));
+export const getBgGrayColor256 = i => getBgGrayColor24(get24(i));
+
+export const setBgRawColor256 = color => setCommands(getBgRawColor256(color));
+export const setBgStdColor256 = color => setCommands(getBgStdColor256(color));
+export const setBgBrightStdColor256 = color => setCommands(getBgBrightStdColor256(color));
+export const setBgColor6 = (r, g, b) => setCommands(getBgColor6(r, g, b));
+export const setBgColor256 = (r, g, b) => setCommands(getBgColor256(r, g, b));
+export const setBgHexColor256 = (r, g, b) => setCommands(getBgHexColor256(r, g, b));
+export const setBgGrayColor24 = i => setCommands(getBgGrayColor24(i));
+export const setBgGrayColor256 = i => setCommands(geBgtGrayColor256(i));
+
+export const getTrueColor = (r, g, b) => [Commands.EXTENDED_COLOR, ColorFormat.TRUE_COLOR, r, g, b];
+export const getHexTrueColor = hex => getTrueColor((hex >> 16) & 0xff, (hex >> 8) & 0xff, hex & 0xff);
+export const getBgTrueColor = (r, g, b) => [Commands.BG_EXTENDED_COLOR, ColorFormat.TRUE_COLOR, r, g, b];
+export const getBgHexTrueColor = hex => getBgTrueColor((hex >> 16) & 0xff, (hex >> 8) & 0xff, hex & 0xff);
+
+export const setTrueColor = (r, g, b) => setCommands(getTrueColor(r, g, b));
+export const setHexTrueColor = hex => setCommands(getHexTrueColor(hex));
+export const setBgTrueColor = (r, g, b) => setCommands(getBgTrueColor(r, g, b));
+export const setBgHexTrueColor = hex => setCommands(getBgHexTrueColor(hex));
+
+export const getDecorationRawColor256 = color => [Commands.DECORATION_COLOR, ColorFormat.COLOR_256, color];
+export const getDecorationStdColor256 = color => getDecorationRawColor256(colorNumber(color));
+export const getDecorationBrightStdColor256 = color => getDecorationRawColor256(8 + colorNumber(color));
+export const getDecorationColor6 = (r, g, b) => getDecorationRawColor256(16 + 36 * lim5(r) + 6 * lim5(g) + lim5(b));
+export const getDecorationColor256 = (r, g, b) => getDecorationColor6(get6(r), get6(g), get6(b));
+export const getDecorationHexColor256 = hex => getDecorationColor256((hex >> 16) & 0xff, (hex >> 8) & 0xff, hex & 0xff);
+export const getDecorationGrayColor24 = i => getDecorationRawColor256(232 + lim23(i));
+export const getDecorationGrayColor256 = i => getDecorationGrayColor24(get24(i));
+
+export const setDecorationRawColor256 = color => setCommands(getDecorationRawColor256(color));
+export const setDecorationStdColor256 = color => setCommands(getDecorationStdColor256(color));
+export const setDecorationBrightStdColor256 = color => setCommands(getDecorationBrightStdColor256(color));
+export const setDecorationColor6 = (r, g, b) => setCommands(getDecorationColor6(r, g, b));
+export const setDecorationColor256 = (r, g, b) => setCommands(getDecorationColor256(r, g, b));
+export const setDecorationHexColor256 = (r, g, b) => setCommands(getDecorationHexColor256(r, g, b));
+export const setDecorationGrayColor24 = i => setCommands(getDecorationGrayColor24(i));
+export const setDecorationGrayColor256 = i => setCommands(getDecorationGrayColor256(i));
+
+export const getDecorationTrueColor = (r, g, b) => [Commands.DECORATION_COLOR, ColorFormat.TRUE_COLOR, r, g, b];
+export const getDecorationHexTrueColor = hex =>
+  getDecorationTrueColor((hex >> 16) & 0xff, (hex >> 8) & 0xff, hex & 0xff);
+
+export const setDecorationTrueColor = (r, g, b) => setCommands(getDecorationTrueColor(r, g, b));
+export const setDecorationHexTrueColor = hex => setCommands(getDecorationHexTrueColor(hex));

package/src/box.js

@@ -0,0 +1,253 @@
+import {addAlias} from './meta.js';
+import {getLength, clipStrings, toStrings} from './strings.js';
+
+export class Box {
+  constructor(s, normalized) {
+    if (s instanceof Box) {
+      this.box = [...s.box]; // copy
+    } else {
+      this.box = Array.isArray(s) && normalized ? s : Box.make(s).box;
+    }
+  }
+
+  get width() {
+    return this.box.length ? getLength(this.box[0]) : 0;
+  }
+  get height() {
+    return this.box.length;
+  }
+
+  static make(s, options) {
+    main: for (;;) {
+      switch (typeof s) {
+        case 'function':
+          for (let i = 0; i < 10 && typeof s == 'function'; ++i) s = s();
+          if (typeof s == 'function') s = String(s);
+          continue main;
+        case 'object':
+          if (s instanceof Box) return s.clone();
+          if (typeof s?.toBox == 'function') return s.toBox(options);
+          if (typeof s?.toPanel == 'function') return s.toPanel().toBox(options);
+          break;
+      }
+      s = toStrings(s);
+      break main;
+    }
+
+    if (s.length <= 1) return new Box(s, true);
+
+    const {symbol = ' ', align = 'left'} = options || {},
+      widths = s.map(s => getLength(s)),
+      width = Math.max(0, ...widths);
+    switch (align) {
+      case 'left':
+      case 'l':
+        return new Box(
+          s.map((s, i) => s + symbol.repeat(width - widths[i])),
+          true
+        );
+      case 'right':
+      case 'r':
+        return new Box(
+          s.map((s, i) => symbol.repeat(width - widths[i]) + s),
+          true
+        );
+    }
+    // center
+    return new Box(
+      s.map((s, i) => {
+        const n = width - widths[i];
+        if (!n) return s;
+        const half = n >> 1,
+          padding = symbol.repeat(half);
+        return padding + s + padding + (n & 1 ? symbol : '');
+      }),
+      true
+    );
+  }
+
+  static makeBlank(width, height, symbol = ' ') {
+    return new Box(height <= 0 ? [] : new Array(height).fill(symbol.repeat(width)), true);
+  }
+
+  toStrings() {
+    return this.box;
+  }
+
+  clone() {
+    return new Box(this);
+  }
+
+  clip(width, includeLastCommand) {
+    return new Box(clipStrings(this.box, width, includeLastCommand), true);
+  }
+
+  // padding
+
+  padLeftRight(left, right, symbol = ' ') {
+    const paddingSmall = symbol.repeat(Math.min(left, right)),
+      paddingLarge = paddingSmall + symbol.repeat(Math.max(left - right, right - left));
+    return new Box(
+      left < right
+        ? this.box.map(s => paddingSmall + s + paddingLarge)
+        : this.box.map(s => paddingLarge + s + paddingSmall),
+      true
+    );
+  }
+
+  padTopBottom(top, bottom, symbol = ' ') {
+    const padding = symbol.repeat(this.width);
+    return new Box([...new Array(top).fill(padding), ...this.box, ...new Array(bottom).fill(padding)], true);
+  }
+
+  padRight(n, symbol = ' ') {
+    const padding = symbol.repeat(n);
+    return new Box(
+      this.box.map(s => s + padding),
+      true
+    );
+  }
+
+  padLeft(n, symbol = ' ') {
+    const padding = symbol.repeat(n);
+    return new Box(
+      this.box.map(s => padding + s),
+      true
+    );
+  }
+
+  padTop(n, symbol = ' ') {
+    const padding = symbol.repeat(this.width);
+    return new Box([...new Array(n).fill(padding), ...this.box], true);
+  }
+
+  padBottom(n, symbol = ' ') {
+    const padding = symbol.repeat(this.width);
+    return new Box([...this.box, ...new Array(n).fill(padding)], true);
+  }
+
+  pad(t, r, b, l, symbol = ' ') {
+    // implemented the CSS padding order
+    if (typeof r != 'number') {
+      symbol = r;
+      r = b = l = t;
+    } else if (typeof b != 'number') {
+      symbol = b;
+      l = r;
+      b = t;
+    } else if (typeof l != 'number') {
+      symbol = l;
+      l = r;
+    }
+    return this.padLeftRight(l, r, symbol).padTopBottom(t, b, symbol);
+  }
+
+  // removing
+
+  removeRows(y, n) {
+    const result = [...this.box];
+    result.splice(y, n);
+    return new Box(result, true);
+  }
+
+  // stack
+
+  addBottom(box, {symbol = ' ', align = 'left'} = {}) {
+    let a = this,
+      b = toBox(box);
+    const diff = a.width - b.width;
+    if (diff) {
+      const d = Math.abs(diff);
+      let x = diff < 0 ? a : b;
+      switch (align) {
+        case 'left':
+        case 'l':
+          x = x.padRight(d, symbol);
+          break;
+        case 'right':
+        case 'r':
+          x = x.padLeft(d, symbol);
+          break;
+        default: // center
+          const half = d >> 1;
+          x = x.padLeftRight(half, half + (d & 1 ? 1 : 0));
+          break;
+      }
+      a = diff < 0 ? x : a;
+      b = diff < 0 ? b : x;
+    }
+    return new Box([...a.box, ...b.box], true);
+  }
+
+  addRight(box, {symbol = ' ', align = 'top'} = {}) {
+    const ah = this.height,
+      bh = box.height;
+    if (ah == bh)
+      return new Box(
+        this.box.map((s, i) => s + box.box[i]),
+        true
+      );
+
+    let t = 0,
+      b = 0;
+    const diff = Math.abs(ah - bh);
+    switch (align) {
+      case 'top':
+      case 't':
+        t = 0;
+        b = diff;
+        break;
+      case 'bottom':
+      case 'b':
+        t = diff;
+        b = 0;
+        break;
+      default: // center
+        const half = diff >> 1;
+        t = half;
+        b = half + (diff & 1 ? 1 : 0);
+        break;
+    }
+
+    const result = [];
+
+    if (ah < bh) {
+      const padding = symbol.repeat(this.width);
+      for (let i = 0; i < t; ++i) {
+        result.push(padding + box.box[i]);
+      }
+      for (let i = 0; i < ah; ++i) {
+        result.push(this.box[i] + box.box[i + t]);
+      }
+      for (let i = ah + t; i < bh; ++i) {
+        result.push(padding + box.box[i]);
+      }
+    } else {
+      const padding = symbol.repeat(box.width);
+      for (let i = 0; i < t; ++i) {
+        result.push(this.box[i] + padding);
+      }
+      for (let i = 0; i < bh; ++i) {
+        result.push(this.box[i + t] + box.box[i]);
+      }
+      for (let i = bh + t; i < ah; ++i) {
+        result.push(this.box[i] + padding);
+      }
+    }
+
+    return new Box(result, true);
+  }
+
+  // flipping
+
+  flipV() {
+    // return new Box(this.box.toReversed(), true);
+    return new Box([...this.box].reverse(), true);
+  }
+}
+
+addAlias(Box, 'toBox', 'clone');
+
+export const toBox = Box.make;
+
+export default Box;

package/src/charts/bars/block-frac-grouped.js

@@ -0,0 +1,6 @@
+import {drawRow} from './block-frac.js';
+import drawGroupedChart from './draw-grouped.js';
+
+export const drawChart = drawGroupedChart(drawRow);
+
+export default drawChart;

package/src/charts/bars/block-frac.js

@@ -0,0 +1,36 @@
+import style from '../../style.js';
+import Box from '../../box.js';
+import {optimize} from '../../ansi/sgr-state.js';
+import {allocateSizes, getFracSize} from '../utils.js';
+import drawStackedChart from './draw-stacked.js';
+import {drawRealHeightBlock} from '../../draw-block-frac.js';
+
+// data = [datum]
+// datum = {value, colorState, symbol, state}
+
+export const drawRow = (data, width, maxValue, options = {}) => {
+  const {reverse, drawEmptyBorder, initState = {}} = options,
+    rectSize = Math.max(0, options.rectSize ?? 0.5),
+    sizes = allocateSizes(data, maxValue, width),
+    blocks = data.map((datum, i) => {
+      if (!datum) return Box.makeBlank(0, getFracSize(rectSize, drawEmptyBorder));
+      const box = drawRealHeightBlock(sizes[i], rectSize, drawEmptyBorder),
+        boxStyle = style.addState(initState).addState(datum.colorState).addState(datum.state);
+      return new Box(
+        box.box.map(line => boxStyle.text(line)),
+        true
+      );
+    }),
+    result = new Array(blocks[0].box.length).fill('');
+  if (reverse) blocks.reverse();
+  for (const block of blocks) {
+    for (let i = 0; i < block.box.length; ++i) {
+      result[i] += block.box[i];
+    }
+  }
+  return result.map(line => optimize(line));
+};
+
+export const drawChart = drawStackedChart(drawRow);
+
+export default drawChart;

package/src/charts/bars/block-grouped.js

@@ -0,0 +1,6 @@
+import {drawRow} from './block.js';
+import drawGroupedChart from './draw-grouped.js';
+
+export const drawChart = drawGroupedChart(drawRow);
+
+export default drawChart;

package/src/charts/bars/block.js

@@ -0,0 +1,43 @@
+import style from '../../style.js';
+import Box from '../../box.js';
+import {optimize} from '../../ansi/sgr-state.js';
+import {allocateSizes} from '../utils.js';
+import drawStackedChart from './draw-stacked.js';
+import drawBlock from '../../draw-block.js';
+import defaultBlockTheme from '../../themes/blocks/unicode-half.js';
+
+// data = [datum]
+// datum = {value, colorState, symbol, state}
+
+export const drawRow = (data, width, maxValue, options = {}) => {
+  const {reverse, blockTheme = defaultBlockTheme, rectSize = 0, initState = {}} = options,
+    sizes = allocateSizes(data, maxValue, width),
+    {t = 1, b = 1, l = reverse ? 1 : 0, r = reverse ? 0 : 1} = options;
+
+  const blocks = data.map((datum, i) => {
+      if (!datum) return Box.makeBlank(0, Math.max(2, rectSize));
+      const box = drawBlock(sizes[i], Math.max(0, rectSize - 2), blockTheme, {
+          left: reverse ? (i + 1 < data.length ? 0 : l) : i ? 0 : l,
+          right: reverse ? (i ? 0 : r) : i + 1 < data.length ? 0 : r,
+          top: t,
+          bottom: b
+        }),
+        boxStyle = style.addState(initState).addState(datum.colorState).addState(datum.state);
+      return new Box(
+        box.box.map(line => boxStyle.text(line)),
+        true
+      );
+    }),
+    result = new Array(blocks[0].box.length).fill('');
+  if (reverse) blocks.reverse();
+  for (const block of blocks) {
+    for (let i = 0; i < block.box.length; ++i) {
+      result[i] += block.box[i];
+    }
+  }
+  return result.map(line => optimize(line));
+};
+
+export const drawChart = drawStackedChart(drawRow);
+
+export default drawChart;

package/src/charts/bars/draw-grouped.js

@@ -0,0 +1,39 @@
+import defaultTheme from '../themes/default.js';
+import {normalizeData} from '../utils.js';
+
+export const drawChart =
+  drawRow =>
+  (values, width, options = {}) => {
+    const {maxValue, groupGap = 1, gap = 0, theme = defaultTheme} = options;
+    if (isNaN(width) || width <= 0) throw new Error(`"width" should be a positive integer instead of "${width}"`);
+
+    const data = normalizeData(values, theme),
+      maxSeriesLength = Math.max(0, ...data.map(series => series.length));
+
+    // normalize length of series and flatten the result
+    const newData = [];
+    data.forEach(series => {
+      newData.push(...series);
+      if (series.length < maxSeriesLength) newData.push(...new Array(maxSeriesLength - series.length).fill(null));
+    });
+
+    const max =
+      typeof maxValue == 'number' && maxValue >= 0 ? maxValue : Math.max(0, ...newData.map(datum => datum?.value || 0));
+
+    if (gap < 1 && groupGap < 1) return newData.map(datum => drawRow([datum], width, max, options));
+
+    const result = [];
+    newData.forEach((datum, i) => {
+      if (i) {
+        if (i % maxSeriesLength == 0) {
+          if (groupGap > 0) result.push(new Array(groupGap).fill(''));
+        } else {
+          if (gap > 0) result.push(new Array(gap).fill(''));
+        }
+      }
+      result.push(drawRow([datum], width, max, options));
+    });
+    return result.flat(1);
+  };
+
+export default drawChart;

package/src/charts/bars/draw-stacked.js

@@ -0,0 +1,24 @@
+import defaultTheme from '../themes/default.js';
+import {normalizeData, sumValues} from '../utils.js';
+
+export const drawChart =
+  drawRow =>
+  (values, width, options = {}) => {
+    const {maxValue, gap = 0, theme = defaultTheme} = options;
+    if (isNaN(width) || width <= 0) throw new Error(`"width" should be a positive integer instead of "${width}"`);
+
+    const data = normalizeData(values, theme),
+      max =
+        typeof maxValue == 'number' ? (maxValue < 0 ? -1 : maxValue) : Math.max(0, ...data.map(row => sumValues(row)));
+
+    if (gap < 1) return data.map(row => drawRow(row, width, max, options)).flat(1);
+
+    const result = [];
+    data.forEach((row, i) => {
+      if (i) result.push(...new Array(gap).fill(''));
+      result.push(drawRow(row, width, max, options));
+    });
+    return result.flat(1);
+  };
+
+export default drawChart;

package/src/charts/bars/frac-grouped.js

@@ -0,0 +1,33 @@
+import style from '../../style.js';
+import Box from '../../box.js';
+import {optimize} from '../../ansi/sgr-state.js';
+import {drawRealWidthBlock} from '../../draw-block-frac.js';
+import drawGroupedChart from './draw-grouped.js';
+
+// data = [datum]
+// datum = {value, colorState, symbol, state}
+
+export const drawRow = (data, width, maxValue, options = {}) => {
+  const {reverse, rectSize = 1, initState = {}} = options,
+    blocks = data.map(datum => {
+      if (!datum) return Box.makeBlank(0, rectSize);
+      const box = drawRealWidthBlock((datum.value / maxValue) * width, rectSize),
+        boxStyle = style.addState(initState).addState(datum.colorState).addState(datum.state);
+      return new Box(
+        box.box.map(line => boxStyle.text(line)),
+        true
+      );
+    }),
+    result = new Array(blocks[0].box.length).fill('');
+  if (reverse) blocks.reverse();
+  for (const block of blocks) {
+    for (let i = 0; i < block.box.length; ++i) {
+      result[i] += block.box[i];
+    }
+  }
+  return result.map(line => optimize(line));
+};
+
+export const drawChart = drawGroupedChart(drawRow);
+
+export default drawChart;

package/src/charts/bars/plain-grouped.js

@@ -0,0 +1,6 @@
+import {drawRow} from './plain.js';
+import drawGroupedChart from './draw-grouped.js';
+
+export const drawChart = drawGroupedChart(drawRow);
+
+export default drawChart;