@thi.ng/text-canvas 2.6.37 → 3.0.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-02-10T08:59:57Z
+- **Last updated**: 2024-02-19T15:50:26Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,28 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+# [3.0.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/text-canvas@3.0.0) (2024-02-19)
+
+#### 🛑 Breaking changes
+
+- add plotting, additive blending/blitting, refactor bar chart fns ([7cd6d41](https://github.com/thi-ng/umbrella/commit/7cd6d41))
+- BREAKING CHANGE: swap naming of barChartH/V fns, update args for blit()/blitMask()
+  - swap naming of barChartH/V fns:
+    - barChartHLines/Str() <=> barChartVLines/Str()
+  - add plotBarsV() multi-plot function
+  - add blitBarsV() fn w/ support for custom blending fns
+    - add blendBarsVAdd() additive blending fn
+    - add BLEND_ADD lookup table for additive blending using ANSI16 colors
+  - update arg order of blit()/blitMask() fns
+  - add Canvas.empty(), Canvas.clear() fns
+
+#### ♻️ Refactoring
+
+- unify plotting function naming ([cb275ae](https://github.com/thi-ng/umbrella/commit/cb275ae))
+  - plotBarsV() => plotBarChartV()
+  - lineChart() => plotLineChart()
+  - migrate line chart fns to plot.ts
+
 ### [2.6.17](https://github.com/thi-ng/umbrella/tree/@thi.ng/text-canvas@2.6.17) (2023-11-09)
 
 #### ♻️ Refactoring

package/README.md

@@ -46,12 +46,15 @@
   - [Bars & bar charts](#bars--bar-charts)
   - [Tables](#tables)
   - [3D wireframe cube example](#3d-wireframe-cube-example)
+  - [Multiple bar plots with additive blending](#multiple-bar-plots-with-additive-blending)
 - [Authors](#authors)
 - [License](#license)
 
 ## About
 
-Text based canvas, drawing, tables with arbitrary formatting (incl. ANSI/HTML).
+Text based canvas, drawing, plotting, tables with arbitrary formatting (incl. ANSI/HTML).
+
+![Terminal based textmode bar plots](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/text-canvas/multi-barplot.png)
 
 ## Status
 
@@ -83,7 +86,7 @@ For Node.js REPL:
 const textCanvas = await import("@thi.ng/text-canvas");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 5.56 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 6.27 KB
 
 ## Dependencies
 
@@ -205,9 +208,9 @@ package):
 
 ```ts
 // Terminal
-console.log(formatCanvas(canvas, FMT_ANSI16));
+process.stdout.write(formatCanvas(canvas, FMT_ANSI16));
 // or
-console.log(formatCanvas(canvas, FMT_ANSI256));
+console.log(formatCanvas(canvas, FMT_ANSI16));
 
 // Browser
 const el = document.createElement("pre");
@@ -253,23 +256,22 @@ each newly pushed one being intersected with the previous top-of-stack rect:
 
 ### Drawing functions
 
-- `line`
-- `hline`
-- `vline`
-- `circle`
+- `line()`
+- `hline()`
+- `vline()`
+- `circle()`
 
-- `clear`
-- `fillRect`
-- `strokeRect`
+- `clear()`
+- `fillRect()`
+- `strokeRect()`
 
 ### Image functions
 
-- `blit`
-- `resize`
-- `extract`
-- `scrollV`
-- `image` / `imageRaw` / `imageCanvas565` / `imageString565`
-- `imageBraille` / `imageCanvasBraille` / `imageStringBraille`
+- `blit()` / `blitMask()` / `blitBarsV()`
+- `image()` / `imageRaw()` / `imageCanvas565()` / `imageString565()`
+- `imageBraille()` / `imageCanvasBraille()` / `imageStringBraille()`
+- `resize()` / `extract()`
+- `scrollV()`
 
 ```ts
 import { RGB565 } from "@thi.ng/pixel";
@@ -289,19 +291,19 @@ console.log(imageString565(img));
 
 ### Text functions
 
-- `textLine`
-- `textLines`
-- `textColumn` (word wrapped)
-- `textBox` (word wrapped)
+- `textLine()`
+- `textLines()`
+- `textColumn()` (word wrapped)
+- `textBox()` (word wrapped)
 
 ### Bars & bar charts
 
-The following are string builders only, draw result via text functions:
+The following are string builders only, draw result via [text functions](#text-functions):
 
-- `barHorizontal`
-- `barVertical`
-- `barChartHStr`
-- `barChartVStr`
+- `barHorizontal()`
+- `barVertical()`
+- `barChartHStr()`
+- `barChartVStr()`
 
 ### Tables
 
@@ -323,7 +325,7 @@ Table cell contents will be word-wrapped. By default, individual words longer
 than the configured cell width will be truncated, but can be forced to wrap by
 enabling the `hard` option (see example below).
 
-```ts
+```ts tangle:export/readme-table.ts
 import { repeatedly } from "@thi.ng/transducers";
 import * as tc from "@thi.ng/text-canvas";
 import * as tf from "@thi.ng/text-format";
@@ -331,7 +333,7 @@ import * as tf from "@thi.ng/text-format";
 // generate 20 random values
 const data = repeatedly(() => Math.random(), 20)
 // format as bar chart string
-const chart = tc.barChartHStr(4, data, 0, 1);
+const chart = tc.barChartVStr(4, data, 0, 1);
 
 // create text canvas
 const canvas = new tc.Canvas(64, 20);
@@ -390,44 +392,11 @@ as content.
 
 ### 3D wireframe cube example
 
-```text
-       ┌───┐
-  ┌──────────────────────┐
-  │ @thi.ng/text-canvas  │
-  │ wireframe cube       │++++++++++
-  │                      │          +++++++++++    ┌───┐
-  │ x: 0.42              │                     ++++│ 6 │
-  │ y: 0.30              │        ┌───┐ ++++++++   └───┘
-  └──────────────────────┘++++++++│ 7 │+           +
-           +         └───┘        └───┘            +
-            +          +           +              +
-            +          +           +              +
-             +         +           +             +
-             +         +          +              +
-             +          +         +              +
-              +         +         +             +
-              +         +         +             +
-               +        +        ┌───┐         +
-               +         +      +│ 3 │         +
-                +       ┌───┐+++ └───┘        +
-                +       │ 0 │       +         +
-                 +      └───┘        +        +
-                 +       +            +      +
-                 +       +             +     +
-                  +     +               +   +
-                  +     +                +  +
-                   +    +                 ┌───┐
-                   +    +                 │ 2 │
-                    +   +               ++└───┘
-                    +   +            +++
-                     + +           ++
-                     + +        +++
-                      ++      ++
-````
+![3D wireframe cube](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/text-canvas/3dcube.png)
 
 Code for this above example output (CLI version):
 
-```ts
+```ts tangle:export/readme-cube.ts
 import * as geom from "@thi.ng/geom";
 import * as mat from "@thi.ng/matrices";
 import * as tc from "@thi.ng/text-canvas";
@@ -491,13 +460,64 @@ setInterval(() => {
             padding: [1, 0]
         }
     );
-    // draw canvas
-    console.clear();
     // output as ANSI formatted string
-    console.log(tc.formatCanvas(canvas, tf.FMT_ANSI16));
-    // output as plain text
+    process.stdout.write(
+        tf.ANSI_SYNC_START +
+        tf.ANSI_CLEAR_SCREEN +
+        tf.ANSI_HOME +
+        tc.formatCanvas(canvas, tf.FMT_ANSI16) +
+        tf.ANSI_SYNC_END
+    );
+    // ...our output as plain text
     // console.log(tc.formatCanvas(canvas));
-}, 15);
+}, 16);
+```
+
+### Multiple bar plots with additive blending
+
+```ts tangle:export/readme-barplot.ts
+import { HERMITE_V, VEC4, ramp } from "@thi.ng/ramp";
+import { canvas, formatCanvas, plotBarChartV } from "@thi.ng/text-canvas";
+import { FG_BLUE, FG_GRAY, FG_GREEN, FG_RED, FMT_ANSI16 } from "@thi.ng/text-format";
+
+// define curves for 4 params which will be computed via
+// cubic hermite interpolation
+const curves = ramp(
+    // use VEC4 interpolation preset
+    HERMITE_V(VEC4),
+    // keyframes
+    [
+        [0.0, [1, 0, 0.33, 0]],
+        [0.5, [0, 1, 0.06, -0.3]],
+        [1.0, [0, 0, 1, 0.5]],
+    ]
+);
+
+const W = 100;
+const H = 24;
+const samples: number[][] = [];
+
+// sample curves
+for (let i = 0; i < W; i++) {
+    samples.push(<number[]>curves.at(i / (W - 1)));
+}
+
+// create empty canvas
+const plot = canvas(W, H);
+
+// create all 4 bar plots in the same canvas, by default uses additive blending
+// to composite each plot layer
+plotBarChartV(
+    plot,
+    { min: 0, max: 1 },
+    { data: samples.map((x) => x[0]), color: FG_RED },
+    { data: samples.map((x) => x[1]), color: FG_GREEN },
+    { data: samples.map((x) => x[2]), color: FG_BLUE },
+    { data: samples.map((x) => x[3]), color: FG_GRAY }
+);
+
+// format & print canvas using ANSI colors
+console.log(formatCanvas(plot, FMT_ANSI16));
 ```
 
 ## Authors

package/api.d.ts

@@ -13,6 +13,7 @@ export declare enum Border {
     FRAME_H = 5,
     FRAME_V = 6
 }
+export type BlendFn = (src: number, dest: number, x: number, y: number) => number;
 export interface TableOpts {
     cols: {
         width: number;

package/bars.d.ts

@@ -1,7 +1,41 @@
-export declare const barChartHLines: (height: number, vals: Iterable<number>, min?: number, max?: number) => string[];
-export declare const barChartHStr: (height: number, vals: Iterable<number>, min?: number, max?: number) => string;
-export declare const barChartVLines: (width: number, vals: Iterable<number>, min?: number, max?: number) => string[];
-export declare const barChartVStr: (width: number, vals: Iterable<number>, min?: number, max?: number) => string;
+/**
+ * Visualizes given values (in `[min..max]`interval) as vertical bar chart.
+ * Returns array of line strings.
+ *
+ * @param height
+ * @param vals
+ * @param min
+ * @param max
+ */
+export declare const barChartVLines: (height: number, vals: Iterable<number>, min?: number, max?: number) => string[];
+/**
+ * Same as {@link barChartVLines}, but returns result as single string.
+ *
+ * @param height
+ * @param vals
+ * @param min
+ * @param max
+ */
+export declare const barChartVStr: (height: number, vals: Iterable<number>, min?: number, max?: number) => string;
+/**
+ * Visualizes given values (in `[min..max]`interval) as horizontal bar chart.
+ * Returns array of line strings.
+ *
+ * @param height
+ * @param vals
+ * @param min
+ * @param max
+ */
+export declare const barChartHLines: (width: number, vals: Iterable<number>, min?: number, max?: number) => string[];
+/**
+ * Same as {@link barChartVLines}, but returns result as single string.
+ *
+ * @param height
+ * @param vals
+ * @param min
+ * @param max
+ */
+export declare const barChartHStr: (width: number, vals: Iterable<number>, min?: number, max?: number) => string;
 export declare const barHorizontal: (width: number, x: number, min?: number, max?: number) => string;
 export declare const barVertical: (height: number, x: number, min?: number, max?: number, delim?: string) => string;
 //# sourceMappingURL=bars.d.ts.map

package/bars.js

@@ -8,7 +8,7 @@ import { map } from "@thi.ng/transducers/map";
 import { max as $max } from "@thi.ng/transducers/max";
 import { min as $min } from "@thi.ng/transducers/min";
 import { BARS_H, BARS_V } from "./api.js";
-const barChartHLines = (height, vals, min, max) => {
+const barChartVLines = (height, vals, min, max) => {
   const $vals = ensureArray(vals);
   min = min !== void 0 ? min : $min($vals);
   max = max !== void 0 ? max : $max($vals);
@@ -24,14 +24,14 @@ const barChartHLines = (height, vals, min, max) => {
   }
   return res;
 };
-const barChartHStr = (height, vals, min, max) => barChartHLines(height, vals, min, max).join("\n");
-const barChartVLines = (width, vals, min, max) => {
+const barChartVStr = (height, vals, min, max) => barChartVLines(height, vals, min, max).join("\n");
+const barChartHLines = (width, vals, min, max) => {
   const $vals = ensureArray(vals);
   min = min !== void 0 ? min : $min($vals);
   max = max !== void 0 ? max : $max($vals);
   return [...map((x) => barHorizontal(width, x, min, max), $vals)];
 };
-const barChartVStr = (width, vals, min, max) => barChartVLines(width, vals, min, max).join("\n");
+const barChartHStr = (width, vals, min, max) => barChartHLines(width, vals, min, max).join("\n");
 const barHorizontal = (width, x, min = 0, max = 1) => bar(BARS_H, width, false, x, min, max, "");
 const barVertical = (height, x, min = 0, max = 1, delim = "\n") => bar(BARS_V, height, true, x, min, max, delim);
 const bar = (chars, size, left, x, min, max, delim) => {

package/canvas.d.ts

@@ -1,6 +1,6 @@
-import { type Fn0, type ICopy, type IGrid2D, type NumOrString } from "@thi.ng/api";
+import { type Fn0, type ICopy, type IGrid2D, type NumOrString, type IEmpty, type IClear } from "@thi.ng/api";
 import { type ClipRect, type StrokeStyle } from "./api.js";
-export declare class Canvas implements ICopy<Canvas>, IGrid2D<Uint32Array, number> {
+export declare class Canvas implements IClear, ICopy<Canvas>, IEmpty<Canvas>, IGrid2D<Uint32Array, number> {
     data: Uint32Array;
     size: [number, number];
     stride: [number, number];
@@ -14,6 +14,8 @@ export declare class Canvas implements ICopy<Canvas>, IGrid2D<Uint32Array, numbe
     get offset(): number;
     get dim(): 2;
     copy(): Canvas;
+    empty(): Canvas;
+    clear(): void;
     order(): number[];
     includes(d0: number, d1: number): boolean;
     indexAt(d0: number, d1: number): number;

package/canvas.js

@@ -62,6 +62,12 @@ let Canvas = class {
     res.clipRects = this.clipRects.slice();
     return res;
   }
+  empty() {
+    return new Canvas(this.width, this.height);
+  }
+  clear() {
+    this.data.fill(32);
+  }
   // @ts-ignore mixin
   order() {
   }

package/image.d.ts

@@ -1,11 +1,18 @@
-import type { NumOrString, UIntArray } from "@thi.ng/api";
-import { type ImageOpts } from "./api.js";
+import type { FnN4, NumOrString, UIntArray } from "@thi.ng/api";
+import { type BlendFn, type ImageOpts } from "./api.js";
 import { Canvas } from "./canvas.js";
-export declare const blit: (dest: Canvas, x: number, y: number, src: Canvas) => void;
+/**
+ *
+ * @param dest
+ * @param src
+ * @param x
+ * @param y
+ */
+export declare const blit: (dest: Canvas, src: Canvas, x?: number, y?: number) => void;
 /**
  * Similar to {@link blit}. Pastes `src` {@link Canvas} into `dest` at given
  * position and uses `mask` to exclude pixels from being copied (and therefore
- * achieve a form of 1bit transparency, similar to GIFs), i.e. only non-`mask`
+ * achieve a form of on/off transparency, similar to GIFs), i.e. only non-`mask`
  * pixels/chars will be copied. Supports region clipping.
  *
  * @example
@@ -40,12 +47,30 @@ export declare const blit: (dest: Canvas, x: number, y: number, src: Canvas) =>
  * ```
  *
  * @param dest
+ * @param src
  * @param x
  * @param y
- * @param src
  * @param mask
  */
-export declare const blitMask: (dest: Canvas, x: number, y: number, src: Canvas, mask?: NumOrString) => void;
+export declare const blitMask: (dest: Canvas, src: Canvas, x?: number, y?: number, mask?: NumOrString) => void;
+export declare const blitBarsV: (dest: Canvas, src: Canvas, x?: number, y?: number, blend?: BlendFn) => void;
+/**
+ * Blending function for {@link blendBarsVAdd}. Additive blending for vertical
+ * box drawing characters.
+ *
+ * @param a
+ * @param b
+ */
+export declare const blendBarsVAdd: FnN4;
+/**
+ * @remarks
+ * Lookups in this index are symmetrical (see {@link __blend}). Grays are
+ * handled via the last group of entries.
+ *
+ * The order of entries in each group should be B,G,R,C,M,Y, followed by light
+ * versions (in same order)
+ */
+export declare const BLEND_ADD: Record<number, Record<number, number>>;
 export declare const resize: (canvas: Canvas, newWidth: number, newHeight: number) => void;
 export declare const extract: (canvas: Canvas, x: number, y: number, w: number, h: number) => Canvas;
 /**

package/image.js

@@ -1,13 +1,32 @@
-import { blit1d } from "@thi.ng/arrays/blit";
+import { blit1d, blitPred1d } from "@thi.ng/arrays/blit";
 import { peek } from "@thi.ng/arrays/peek";
 import { isNumber } from "@thi.ng/checks/is-number";
 import { clamp0 } from "@thi.ng/math/interval";
+import {
+  FG_BLUE,
+  FG_CYAN,
+  FG_GRAY,
+  FG_GREEN,
+  FG_LIGHT_BLUE,
+  FG_LIGHT_CYAN,
+  FG_LIGHT_GRAY,
+  FG_LIGHT_GREEN,
+  FG_LIGHT_MAGENTA,
+  FG_LIGHT_RED,
+  FG_LIGHT_YELLOW,
+  FG_MAGENTA,
+  FG_RED,
+  FG_YELLOW,
+  FG_WHITE
+} from "@thi.ng/text-format";
 import { FMT_ANSI565 } from "@thi.ng/text-format/ansi";
-import { SHADES_BLOCK } from "./api.js";
+import {
+  SHADES_BLOCK
+} from "./api.js";
 import { Canvas, canvas } from "./canvas.js";
 import { formatCanvas } from "./format.js";
 import { charCode, intersectRect } from "./utils.js";
-const blit = (dest, x, y, src) => {
+const __initBlit = (dest, x, y, src) => {
   x |= 0;
   y |= 0;
   const { data: sbuf, width: sw, height: sh } = src;
@@ -26,31 +45,24 @@ const blit = (dest, x, y, src) => {
     return;
   const sx = clamp0(x1 - x);
   const sy = clamp0(y1 - y);
+  return { sbuf, dbuf, sw, dw, x, y, x1, y1, y2, iw, ih, sx, sy };
+};
+const blit = (dest, src, x = 0, y = 0) => {
+  const state = __initBlit(dest, x, y, src);
+  if (!state)
+    return;
+  const { sbuf, dbuf, x1, y1, y2, sx, sy, iw, sw, dw } = state;
   for (let yy = sy, dy = y1; dy < y2; yy++, dy++) {
     let sidx = sx + yy * sw;
     let didx = x1 + dy * dw;
     dbuf.set(sbuf.subarray(sidx, sidx + iw), didx);
   }
 };
-const blitMask = (dest, x, y, src, mask = 32) => {
-  x |= 0;
-  y |= 0;
-  const { data: sbuf, width: sw, height: sh } = src;
-  const { data: dbuf, width: dw } = dest;
-  const {
-    x1,
-    y1,
-    y2,
-    w: iw,
-    h: ih
-  } = intersectRect(
-    { x1: x, y1: y, x2: x + sw, y2: y + sh, w: sw, h: sh },
-    peek(dest.clipRects)
-  );
-  if (!iw || !ih)
+const blitMask = (dest, src, x = 0, y = 0, mask = 32) => {
+  const state = __initBlit(dest, x, y, src);
+  if (!state)
     return;
-  const sx = clamp0(x1 - x);
-  const sy = clamp0(y1 - y);
+  const { sbuf, dbuf, x1, y1, y2, sx, sy, iw, sw, dw } = state;
   mask = charCode(mask, 0);
   for (let yy = sy, dy = y1; dy < y2; yy++, dy++) {
     let sidx = sx + yy * sw;
@@ -58,12 +70,192 @@ const blitMask = (dest, x, y, src, mask = 32) => {
     blit1d(dbuf, didx, sbuf.subarray(sidx, sidx + iw), mask);
   }
 };
+const blitBarsV = (dest, src, x = 0, y = 0, blend = blendBarsVAdd) => {
+  const state = __initBlit(dest, x, y, src);
+  if (!state)
+    return;
+  const { sbuf, dbuf, x1, y1, y2, sx, sy, iw, sw, dw } = state;
+  for (let yy = sy, dy = y1; dy < y2; yy++, dy++) {
+    let sidx = sx + yy * sw;
+    let didx = x1 + dy * dw;
+    blitPred1d(dbuf, didx, sbuf.subarray(sidx, sidx + iw), (a, b, x2) => {
+      const ac = a & 65535;
+      return ac === 32 ? void 0 : ac > 9600 && ac < 9609 ? blend(a, b, x2, yy) : a;
+    });
+  }
+};
+const blendBarsVAdd = (a, b) => {
+  const ac = a & 65535;
+  const fmtA = a >> 16 & 31;
+  const fgA = fmtA & 31;
+  const bc = b & 65535;
+  const fmtB = b >> 16;
+  const bgB = fmtB >> 5;
+  const fgB = fmtB & 31;
+  let col;
+  let col2;
+  if (bc === 32) {
+    col = __blend(fgA, bgB) || fgA;
+    return ac == 9608 ? col << 21 | 32 : bgB << 21 | col << 16 | ac;
+  }
+  if (ac <= bc) {
+    col2 = bc > 9604 ? fgB : bgB;
+    col = __blend(fgA, col2);
+    return col2 << 21 | col << 16 | ac + bc >> 1;
+  } else {
+    col = __blend(fgA, fgB) || fgA;
+    col2 = __blend(fgA, bgB) || fgA;
+    return col2 << 21 | col << 16 | bc;
+  }
+};
+const __blend = (a, b) => BLEND_ADD[b]?.[a] || BLEND_ADD[a]?.[b] || 0;
+const BLEND_ADD = {
+  // primary
+  [FG_BLUE]: {
+    [FG_BLUE]: FG_LIGHT_BLUE,
+    [FG_GREEN]: FG_CYAN,
+    [FG_RED]: FG_MAGENTA,
+    [FG_CYAN]: FG_LIGHT_CYAN,
+    [FG_MAGENTA]: FG_LIGHT_MAGENTA,
+    [FG_YELLOW]: FG_LIGHT_GRAY,
+    [FG_LIGHT_BLUE]: FG_LIGHT_CYAN,
+    [FG_LIGHT_GREEN]: FG_LIGHT_CYAN,
+    [FG_LIGHT_RED]: FG_LIGHT_MAGENTA,
+    [FG_LIGHT_CYAN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_MAGENTA]: FG_LIGHT_GRAY,
+    [FG_LIGHT_YELLOW]: FG_WHITE
+  },
+  [FG_GREEN]: {
+    [FG_GREEN]: FG_LIGHT_GREEN,
+    [FG_RED]: FG_YELLOW,
+    [FG_CYAN]: FG_LIGHT_CYAN,
+    [FG_MAGENTA]: FG_LIGHT_GRAY,
+    [FG_YELLOW]: FG_LIGHT_YELLOW,
+    [FG_LIGHT_BLUE]: FG_LIGHT_CYAN,
+    [FG_LIGHT_GREEN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_RED]: FG_LIGHT_YELLOW,
+    [FG_LIGHT_CYAN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_MAGENTA]: FG_LIGHT_GRAY,
+    [FG_LIGHT_YELLOW]: FG_WHITE
+  },
+  [FG_RED]: {
+    [FG_RED]: FG_LIGHT_RED,
+    [FG_CYAN]: FG_LIGHT_GRAY,
+    [FG_MAGENTA]: FG_LIGHT_MAGENTA,
+    [FG_YELLOW]: FG_LIGHT_YELLOW,
+    [FG_LIGHT_BLUE]: FG_LIGHT_MAGENTA,
+    [FG_LIGHT_GREEN]: FG_LIGHT_YELLOW,
+    [FG_LIGHT_RED]: FG_LIGHT_GRAY,
+    [FG_LIGHT_CYAN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_MAGENTA]: FG_LIGHT_GRAY,
+    [FG_LIGHT_YELLOW]: FG_WHITE
+  },
+  // secondary
+  [FG_CYAN]: {
+    [FG_CYAN]: FG_LIGHT_CYAN,
+    [FG_MAGENTA]: FG_LIGHT_GRAY,
+    [FG_YELLOW]: FG_LIGHT_GRAY,
+    [FG_LIGHT_BLUE]: FG_LIGHT_CYAN,
+    [FG_LIGHT_GREEN]: FG_LIGHT_CYAN,
+    [FG_LIGHT_RED]: FG_LIGHT_GRAY,
+    [FG_LIGHT_CYAN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_MAGENTA]: FG_LIGHT_GRAY,
+    [FG_LIGHT_YELLOW]: FG_WHITE
+  },
+  [FG_MAGENTA]: {
+    [FG_MAGENTA]: FG_LIGHT_MAGENTA,
+    [FG_YELLOW]: FG_LIGHT_GRAY,
+    [FG_LIGHT_BLUE]: FG_LIGHT_MAGENTA,
+    [FG_LIGHT_GREEN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_RED]: FG_LIGHT_GRAY,
+    [FG_LIGHT_CYAN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_MAGENTA]: FG_LIGHT_GRAY,
+    [FG_LIGHT_YELLOW]: FG_WHITE
+  },
+  [FG_YELLOW]: {
+    [FG_YELLOW]: FG_LIGHT_YELLOW,
+    [FG_LIGHT_BLUE]: FG_LIGHT_GRAY,
+    [FG_LIGHT_GREEN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_RED]: FG_LIGHT_GRAY,
+    [FG_LIGHT_CYAN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_MAGENTA]: FG_LIGHT_GRAY,
+    [FG_LIGHT_YELLOW]: FG_WHITE
+  },
+  // light primary
+  [FG_LIGHT_BLUE]: {
+    [FG_LIGHT_BLUE]: FG_LIGHT_GRAY
+  },
+  [FG_LIGHT_GREEN]: {
+    [FG_LIGHT_GREEN]: FG_LIGHT_GRAY
+  },
+  [FG_LIGHT_RED]: {
+    [FG_LIGHT_RED]: FG_LIGHT_GRAY
+  },
+  // light secondary
+  [FG_LIGHT_CYAN]: {
+    [FG_LIGHT_CYAN]: FG_LIGHT_GRAY
+  },
+  [FG_LIGHT_MAGENTA]: {
+    [FG_LIGHT_MAGENTA]: FG_LIGHT_GRAY
+  },
+  [FG_LIGHT_YELLOW]: {
+    [FG_LIGHT_YELLOW]: FG_WHITE
+  },
+  // grays
+  [FG_GRAY]: {
+    [FG_BLUE]: FG_LIGHT_BLUE,
+    [FG_GREEN]: FG_LIGHT_GREEN,
+    [FG_RED]: FG_LIGHT_RED,
+    [FG_CYAN]: FG_LIGHT_CYAN,
+    [FG_MAGENTA]: FG_LIGHT_MAGENTA,
+    [FG_YELLOW]: FG_LIGHT_YELLOW,
+    [FG_GRAY]: FG_LIGHT_GRAY,
+    [FG_LIGHT_BLUE]: FG_LIGHT_GRAY,
+    [FG_LIGHT_GREEN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_RED]: FG_LIGHT_GRAY,
+    [FG_LIGHT_CYAN]: FG_LIGHT_GRAY,
+    [FG_LIGHT_MAGENTA]: FG_LIGHT_GRAY,
+    [FG_LIGHT_YELLOW]: FG_LIGHT_GRAY
+  },
+  [FG_LIGHT_GRAY]: {
+    [FG_BLUE]: FG_WHITE,
+    [FG_GREEN]: FG_WHITE,
+    [FG_RED]: FG_WHITE,
+    [FG_CYAN]: FG_WHITE,
+    [FG_MAGENTA]: FG_WHITE,
+    [FG_YELLOW]: FG_WHITE,
+    [FG_GRAY]: FG_WHITE,
+    [FG_LIGHT_BLUE]: FG_WHITE,
+    [FG_LIGHT_GREEN]: FG_WHITE,
+    [FG_LIGHT_RED]: FG_WHITE,
+    [FG_LIGHT_CYAN]: FG_WHITE,
+    [FG_LIGHT_MAGENTA]: FG_WHITE,
+    [FG_LIGHT_YELLOW]: FG_WHITE,
+    [FG_LIGHT_GRAY]: FG_WHITE
+  },
+  [FG_WHITE]: {
+    [FG_BLUE]: FG_WHITE,
+    [FG_CYAN]: FG_WHITE,
+    [FG_GRAY]: FG_WHITE,
+    [FG_GREEN]: FG_WHITE,
+    [FG_RED]: FG_WHITE,
+    [FG_MAGENTA]: FG_WHITE,
+    [FG_YELLOW]: FG_WHITE,
+    [FG_LIGHT_BLUE]: FG_WHITE,
+    [FG_LIGHT_CYAN]: FG_WHITE,
+    [FG_LIGHT_GRAY]: FG_WHITE,
+    [FG_LIGHT_GREEN]: FG_WHITE,
+    [FG_LIGHT_MAGENTA]: FG_WHITE,
+    [FG_LIGHT_RED]: FG_WHITE,
+    [FG_LIGHT_YELLOW]: FG_WHITE
+  }
+};
 const resize = (canvas2, newWidth, newHeight) => {
   if (canvas2.width === newWidth && canvas2.height === newHeight)
     return;
   const dest = new Canvas(newWidth, newHeight);
   dest.data.fill(charCode(32, canvas2.format));
-  blit(dest, 0, 0, canvas2);
+  blit(dest, canvas2);
   canvas2.data = dest.data;
   canvas2.size[0] = newWidth;
   canvas2.size[1] = newHeight;
@@ -80,7 +272,7 @@ const resize = (canvas2, newWidth, newHeight) => {
 };
 const extract = (canvas2, x, y, w, h) => {
   const dest = new Canvas(w, h, canvas2.format, peek(canvas2.styles));
-  blit(dest, -x, -y, canvas2);
+  blit(dest, canvas2, -x, -y);
   return dest;
 };
 const scrollV = (canvas2, dy, clear = 32) => {
@@ -241,7 +433,10 @@ const imgRect = (canvas2, x, y, w, h) => {
   return rect;
 };
 export {
+  BLEND_ADD,
+  blendBarsVAdd,
   blit,
+  blitBarsV,
   blitMask,
   extract,
   image,

package/index.d.ts

@@ -6,6 +6,7 @@ export * from "./format.js";
 export * from "./hvline.js";
 export * from "./image.js";
 export * from "./line.js";
+export * from "./plot.js";
 export * from "./rect.js";
 export * from "./table.js";
 export * from "./text.js";

package/index.js

@@ -6,6 +6,7 @@ export * from "./format.js";
 export * from "./hvline.js";
 export * from "./image.js";
 export * from "./line.js";
+export * from "./plot.js";
 export * from "./rect.js";
 export * from "./table.js";
 export * from "./text.js";

package/line.d.ts

@@ -13,6 +13,4 @@ import { Canvas } from "./canvas.js";
  * @param char -
  */
 export declare const line: (canvas: Canvas, ax: number, ay: number, bx: number, by: number, char?: NumOrString, format?: number) => void;
-export declare const lineChart: (canvas: Canvas, x: number, y: number, height: number, vals: Iterable<number>, min?: number, max?: number, format?: number) => void;
-export declare const lineChartStr: (height: number, vals: Iterable<number>, min?: number, max?: number) => string;
 //# sourceMappingURL=line.d.ts.map

package/line.js

@@ -1,12 +1,6 @@
-import { ensureArray } from "@thi.ng/arrays/ensure-array";
 import { peek } from "@thi.ng/arrays/peek";
 import { liangBarsky2Raw } from "@thi.ng/geom-clip-line/liang-barsky";
-import { fitClamped } from "@thi.ng/math/fit";
-import { minMax } from "@thi.ng/math/interval";
-import { max as $max } from "@thi.ng/transducers/max";
-import { min as $min } from "@thi.ng/transducers/min";
 import { Canvas } from "./canvas.js";
-import { formatCanvas } from "./format.js";
 import { charCode } from "./utils.js";
 const line = (canvas, ax, ay, bx, by, char, format = canvas.format) => {
   const { x1, y1, x2, y2 } = peek(canvas.clipRects);
@@ -42,40 +36,6 @@ const line = (canvas, ax, ay, bx, by, char, format = canvas.format) => {
     }
   }
 };
-const lineChart = (canvas, x, y, height, vals, min, max, format = canvas.format) => {
-  const $vals = ensureArray(vals);
-  min = min !== void 0 ? min : $min($vals);
-  max = max !== void 0 ? max : $max($vals);
-  height--;
-  format <<= 16;
-  const { x1, x2 } = peek(canvas.clipRects);
-  for (let i = 0, n = $vals.length - 1; i < n; i++) {
-    const xx = x + i;
-    if (xx < x1)
-      continue;
-    if (xx > x2)
-      break;
-    const ya = Math.round(fitClamped($vals[i], min, max, height, 0)) + y;
-    const yb = Math.round(fitClamped($vals[i + 1], min, max, height, 0)) + y;
-    if (ya === yb) {
-      canvas.setAt(xx, ya, 9472 | format);
-    } else {
-      let [y1, y2] = minMax(ya, yb);
-      while (++y1 < y2)
-        canvas.setAt(xx, y1, 9474 | format);
-      canvas.setAt(xx, ya, (ya < yb ? 9582 : 9583) | format);
-      canvas.setAt(xx, yb, (ya < yb ? 9584 : 9581) | format);
-    }
-  }
-};
-const lineChartStr = (height, vals, min, max) => {
-  const $vals = ensureArray(vals);
-  const surf = new Canvas($vals.length, height);
-  lineChart(surf, 0, 0, height, $vals, min, max);
-  return formatCanvas(surf);
-};
 export {
-  line,
-  lineChart,
-  lineChartStr
+  line
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thi.ng/text-canvas",
-  "version": "2.6.37",
-  "description": "Text based canvas, drawing, tables with arbitrary formatting (incl. ANSI/HTML)",
+  "version": "3.0.0",
+  "description": "Text based canvas, drawing, plotting, tables with arbitrary formatting (incl. ANSI/HTML)",
   "type": "module",
   "module": "./index.js",
   "typings": "./index.d.ts",
@@ -36,14 +36,14 @@
   },
   "dependencies": {
     "@thi.ng/api": "^8.9.23",
-    "@thi.ng/arrays": "^2.7.20",
+    "@thi.ng/arrays": "^2.8.0",
     "@thi.ng/checks": "^3.4.23",
     "@thi.ng/errors": "^2.4.16",
-    "@thi.ng/geom-clip-line": "^2.3.64",
-    "@thi.ng/math": "^5.9.1",
+    "@thi.ng/geom-clip-line": "^2.3.66",
+    "@thi.ng/math": "^5.10.0",
     "@thi.ng/strings": "^3.7.14",
-    "@thi.ng/text-format": "^2.0.10",
-    "@thi.ng/transducers": "^8.9.1"
+    "@thi.ng/text-format": "^2.1.0",
+    "@thi.ng/transducers": "^8.9.3"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.40.1",
@@ -68,18 +68,23 @@
     "braille",
     "canvas",
     "circle",
+    "clipping",
     "color",
     "datastructure",
+    "dataviz",
     "drawing",
     "format",
     "image",
     "line",
+    "plot",
     "rect",
     "rgb",
+    "shape",
     "table",
     "text",
     "theme",
     "typescript",
+    "visualization",
     "wordwrap"
   ],
   "publishConfig": {
@@ -120,6 +125,9 @@
     "./line": {
       "default": "./line.js"
     },
+    "./plot": {
+      "default": "./plot.js"
+    },
     "./rect": {
       "default": "./rect.js"
     },
@@ -139,5 +147,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "e5e7d5c6ed2eadee7a91d59cbd0c86ce880ab1c5\n"
+  "gitHead": "ea2ec2e4f14c572bbfac00c43953a6c4033da09e\n"
 }

package/plot.d.ts

@@ -0,0 +1,17 @@
+import type { NumericArray } from "@thi.ng/api";
+import type { BlendFn } from "./api.js";
+import { Canvas } from "./canvas.js";
+export interface PlotBarsVOpts {
+    min: number;
+    max: number;
+    blend?: BlendFn;
+}
+interface PlotSpec {
+    data: NumericArray;
+    color: number;
+}
+export declare const plotBarChartV: (canv: Canvas, opts: PlotBarsVOpts, ...plots: PlotSpec[]) => Canvas;
+export declare const plotLineChart: (canvas: Canvas, x: number, y: number, height: number, vals: Iterable<number>, min?: number, max?: number, format?: number) => void;
+export declare const lineChartStr: (height: number, vals: Iterable<number>, min?: number, max?: number) => string;
+export {};
+//# sourceMappingURL=plot.d.ts.map

package/plot.js

@@ -0,0 +1,64 @@
+import { ensureArray } from "@thi.ng/arrays/ensure-array";
+import { peek } from "@thi.ng/arrays/peek";
+import { fitClamped } from "@thi.ng/math/fit";
+import { minMax } from "@thi.ng/math/interval";
+import { max as $max } from "@thi.ng/transducers/max";
+import { min as $min } from "@thi.ng/transducers/min";
+import { barChartVLines } from "./bars.js";
+import { Canvas } from "./canvas.js";
+import { formatCanvas } from "./format.js";
+import { blendBarsVAdd, blitBarsV } from "./image.js";
+import { textLines } from "./text.js";
+const plotBarChartV = (canv, opts, ...plots) => {
+  const channel = canv.empty();
+  const blend = opts.blend || blendBarsVAdd;
+  for (let plot of plots) {
+    channel.clear();
+    textLines(
+      channel,
+      0,
+      0,
+      barChartVLines(channel.height, plot.data, opts.min, opts.max),
+      plot.color
+    );
+    blitBarsV(canv, channel, 0, 0, blend);
+  }
+  return canv;
+};
+const plotLineChart = (canvas, x, y, height, vals, min, max, format = canvas.format) => {
+  const $vals = ensureArray(vals);
+  min = min !== void 0 ? min : $min($vals);
+  max = max !== void 0 ? max : $max($vals);
+  height--;
+  format <<= 16;
+  const { x1, x2 } = peek(canvas.clipRects);
+  for (let i = 0, n = $vals.length - 1; i < n; i++) {
+    const xx = x + i;
+    if (xx < x1)
+      continue;
+    if (xx > x2)
+      break;
+    const ya = Math.round(fitClamped($vals[i], min, max, height, 0)) + y;
+    const yb = Math.round(fitClamped($vals[i + 1], min, max, height, 0)) + y;
+    if (ya === yb) {
+      canvas.setAt(xx, ya, 9472 | format);
+    } else {
+      let [y1, y2] = minMax(ya, yb);
+      while (++y1 < y2)
+        canvas.setAt(xx, y1, 9474 | format);
+      canvas.setAt(xx, ya, (ya < yb ? 9582 : 9583) | format);
+      canvas.setAt(xx, yb, (ya < yb ? 9584 : 9581) | format);
+    }
+  }
+};
+const lineChartStr = (height, vals, min, max) => {
+  const $vals = ensureArray(vals);
+  const surf = new Canvas($vals.length, height);
+  plotLineChart(surf, 0, 0, height, $vals, min, max);
+  return formatCanvas(surf);
+};
+export {
+  lineChartStr,
+  plotBarChartV,
+  plotLineChart
+};