console-grid
Advanced tools
Comparing version
const os = require('os'); | ||
const comparers = require('./comparers.js'); | ||
const defaultGetCharLength = require('./get-char-length.js'); | ||
class ConsoleGrid { | ||
@@ -15,4 +15,4 @@ constructor(data = {}) { | ||
initOptions(options) { | ||
const defaultOptions = { | ||
initOptions(_options) { | ||
const options = { | ||
@@ -28,2 +28,3 @@ silent: false, | ||
sortAsc: false, | ||
sortIcon: '*', | ||
@@ -53,2 +54,4 @@ treeId: 'name', | ||
getCharLength: defaultGetCharLength, | ||
defaultTreeFormatter: this.defaultTreeFormatter, | ||
@@ -59,7 +62,7 @@ defaultFormatter: this.defaultFormatter | ||
if (options) { | ||
return Object.assign(defaultOptions, options); | ||
if (_options) { | ||
return Object.assign(options, _options); | ||
} | ||
return defaultOptions; | ||
return options; | ||
} | ||
@@ -264,3 +267,3 @@ | ||
if (!sortField) { | ||
return null; | ||
return; | ||
} | ||
@@ -382,6 +385,14 @@ return this.gridColumns.find((item) => item.id === sortField); | ||
getColumnName(column) { | ||
const name = column.name; | ||
if (column === this.sortColumn) { | ||
return name + this.options.sortIcon; | ||
} | ||
return name; | ||
} | ||
getColumnWidth(column) { | ||
let w = 0; | ||
if (this.options.headerVisible) { | ||
w = this.getCharLength(column.name); | ||
w = this.getCharLength(this.getColumnName(column)); | ||
} | ||
@@ -409,3 +420,3 @@ this.gridRows.forEach((row) => { | ||
const columnWidth = column.cg_width; | ||
const str = column.name; | ||
const str = this.getColumnName(column); | ||
const lenNoColor = this.getCharLength(str); | ||
@@ -487,67 +498,5 @@ if (lenNoColor < columnWidth) { | ||
//https://en.wikipedia.org/wiki/Halfwidth_and_fullwidth_forms_(Unicode_block) | ||
//http://www.unicode.org/Public/UCD/latest/ucd/EastAsianWidth.txt | ||
/*eslint-disable complexity */ | ||
isNarrowCharacter(character) { | ||
const cp = character.codePointAt(0); | ||
const border = [ | ||
0x2500, | ||
0x2502, | ||
0x250c, | ||
0x252c, | ||
0x2510, | ||
0x251c, | ||
0x253c, | ||
0x2524, | ||
0x2514, | ||
0x2534, | ||
0x2518 | ||
]; | ||
if (border.indexOf(cp) !== -1) { | ||
return true; | ||
} | ||
return ( | ||
(cp >= 0x20 && cp <= 0x7E) | ||
|| cp === 0xA2 | ||
|| cp === 0xA3 | ||
|| cp === 0xA5 | ||
|| cp === 0xA6 | ||
|| cp === 0xAC | ||
|| cp === 0xAF | ||
|| cp === 0x20A9 | ||
|| (cp >= 0x27E6 && cp <= 0x27ED) | ||
|| cp === 0x2985 | ||
|| cp === 0x2986 | ||
|| (cp >= 0xFF61 && cp <= 0xFFBE) | ||
|| (cp >= 0xFFC2 && cp <= 0xFFC7) | ||
|| (cp >= 0xFFCA && cp <= 0xFFCF) | ||
|| (cp >= 0xFFD2 && cp <= 0xFFD7) | ||
|| (cp >= 0xFFDA && cp <= 0xFFDC) | ||
|| (cp >= 0xFFE8 && cp <= 0xFFEE) | ||
); | ||
} | ||
/*eslint-enable */ | ||
getByteLen(str) { | ||
let len = 0; | ||
const max = str.length; | ||
let i = 0; | ||
while (i < max) { | ||
const c = str.charAt(i); | ||
if (this.isNarrowCharacter(c)) { | ||
len += 1; | ||
} else { | ||
len += 2; | ||
} | ||
i++; | ||
} | ||
return len; | ||
} | ||
getCharLength(char) { | ||
//console.log(char, char.length); | ||
char = this.removeColor(char); | ||
const len = this.getByteLen(char); | ||
//console.log(char, len); | ||
return len; | ||
return this.options.getCharLength(char); | ||
} | ||
@@ -554,0 +503,0 @@ |
{ | ||
"name": "console-grid", | ||
"version": "2.0.0", | ||
"version": "2.0.1", | ||
"description": "Console log a grid", | ||
@@ -16,10 +16,11 @@ "main": "lib/index.js", | ||
}, | ||
"dependencies": {}, | ||
"devDependencies": { | ||
"eight-colors": "^1.0.1", | ||
"eslint": "^8.22.0", | ||
"eastasianwidth": "^0.2.0", | ||
"eight-colors": "^1.0.2", | ||
"eslint": "^8.24.0", | ||
"eslint-config-plus": "^1.0.3", | ||
"eslint-plugin-html": "^7.1.0", | ||
"js-beautify": "^1.14.5" | ||
} | ||
"js-beautify": "^1.14.6" | ||
}, | ||
"dependencies": {} | ||
} |
103
README.md
@@ -269,37 +269,14 @@ # console-grid | ||
┌────────┬───────┐ | ||
│ Name │ Value │ | ||
├────────┼───────┤ | ||
│ Item 1 │ 80 │ | ||
│ Item 3 │ 50 │ | ||
│ Item 2 │ 30 │ | ||
└────────┴───────┘ | ||
┌────────┬────────┐ | ||
│ Name │ Value* │ | ||
├────────┼────────┤ | ||
│ Item 1 │ 80 │ | ||
│ Item 3 │ 50 │ | ||
│ Item 2 │ 30 │ | ||
└────────┴────────┘ | ||
``` | ||
## With special character: | ||
## With color (using [eight-colors](https://github.com/cenfun/eight-colors)): | ||
```sh | ||
const CG = require("console-grid"); | ||
CG({ | ||
"columns": ["Special", "Character"], | ||
"rows": [ | ||
["Chinese,中文", "12【标,点。】"], | ||
["あいアイサてつろ", "☆√✔×✘❤♬"], | ||
["㈀ㅏ㉡ㅎㅉㅃㅈㅂ", "①⑵⒊Ⅳ❺ʊəts"], | ||
["汉字繁體", "АБВДшщыф"] | ||
] | ||
}); | ||
┌──────────────────┬──────────────────┐ | ||
│ Special │ Character │ | ||
├──────────────────┼──────────────────┤ | ||
│ Chinese,中文 │ 12【标,点。】 │ | ||
│ あいアイサてつろ │ ☆√✔×✘❤♬ │ | ||
│ ㈀ㅏ㉡ㅎㅉㅃㅈㅂ │ ①⑵⒊Ⅳ❺ʊəts │ | ||
│ 汉字繁體 │ АБВДшщыф │ | ||
└──────────────────┴──────────────────┘ | ||
``` | ||
- Unresolved: some special characters has unexpected width, especially on different output terminals (depends on fonts) | ||
## With colorful cells (using [eight-colors](https://github.com/cenfun/eight-colors)): | ||
```sh | ||
const EC = require("eight-colors"); | ||
const CG = require("console-grid"); | ||
const data = { | ||
@@ -322,4 +299,60 @@ columns: ['Name', EC.cyan('Color Text'), EC.bg.cyan('Color Background')], | ||
``` | ||
 | ||
 | ||
## With special character: | ||
- Unresolved: some special characters has unexpected width, especially on different output terminals (depends on fonts) | ||
```sh | ||
const CG = require("console-grid"); | ||
CG({ | ||
"columns": ["Special", "Character"], | ||
"rows": [ | ||
["Chinese,中文", "12【标,点。】"], | ||
["あいアイサてつろ", "☆√✔×✘❤♬"], | ||
["㈀ㅏ㉡ㅎㅉㅃㅈㅂ", "①⑵⒊Ⅳ❺ʊəts"], | ||
["汉字繁體", "АБВДшщыф"], | ||
["Emoji👋👩⌚✅", "↑↓▲▼○●♡♥"] | ||
] | ||
}); | ||
┌───────────────────┬──────────────────┐ | ||
│ Special │ Character │ | ||
├───────────────────┼──────────────────┤ | ||
│ Chinese,中文 │ 12【标,点。】 │ | ||
│ あいアイサてつろ │ ☆√✔×✘❤♬ │ | ||
│ ㈀ㅏ㉡ㅎㅉㅃㅈㅂ │ ①⑵⒊Ⅳ❺ʊəts │ | ||
│ 汉字繁體 │ АБВДшщыф │ | ||
│ Emoji👋👩⌚✅ │ ↑↓▲▼○●♡♥ │ | ||
└───────────────────┴──────────────────┘ | ||
``` | ||
## With custom getCharLength (using [eastasianwidth](https://github.com/komagata/eastasianwidth)): | ||
- Unresolved: still not perfect in special character width | ||
```sh | ||
const CG = require("console-grid"); | ||
const eaw = require("eastasianwidth"); | ||
CG({ | ||
options: { | ||
getCharLength: (char) => { | ||
return eaw.length(char); | ||
} | ||
}, | ||
columns: ["Special", "Character"], | ||
rows: [ | ||
["Chinese,中文", "12【标,点。】"], | ||
["あいアイサてつろ", "☆√✔×✘❤♬"], | ||
["㈀ㅏ㉡ㅎㅉㅃㅈㅂ", "①⑵⒊Ⅳ❺ʊəts"], | ||
["汉字繁體", "АБВДшщыф"], | ||
["Emoji👋👩⌚✅", "↑↓▲▼○●♡♥"] | ||
] | ||
}); | ||
┌──────────────────┬──────────────────┐ | ||
│ Special │ Character │ | ||
├──────────────────┼──────────────────┤ | ||
│ Chinese,中文 │ 12【标,点。】 │ | ||
│ あいアイサてつろ │ ☆√✔×✘❤♬ │ | ||
│ ㈀ㅏ㉡ㅎㅉㅃㅈㅂ │ ①⑵⒊Ⅳ❺ʊəts │ | ||
│ 汉字繁體 │ АБВДшщыф │ | ||
│ Emoji👋👩⌚✅ │ ↑↓▲▼○●♡♥ │ | ||
└──────────────────┴──────────────────┘ | ||
``` | ||
## Data Format Definition: [CGDF](https://github.com/cenfun/cgdf) | ||
@@ -346,2 +379,3 @@ ```js | ||
sortAsc: false, | ||
sortIcon: '*', | ||
@@ -369,3 +403,6 @@ treeId: 'name', | ||
borderBC: '┴', | ||
borderBR: '┘' | ||
borderBR: '┘', | ||
getCharLength: defaultGetCharLength | ||
} | ||
@@ -372,0 +409,0 @@ ``` |
37769
5.07%6
20%701
1.15%434
9.32%6
20%