Full Code of ProtoTeam/tcharts.js for AI

Repository: ProtoTeam/tcharts.js
Branch: master
Commit: adeedecd5f7c
Files: 41
Total size: 49.8 KB

Directory structure:
gitextract_4qpz9orr/

├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .travis.yml
├── README.md
├── __tests__/
│   ├── axis.js
│   ├── bar.js
│   ├── box.js
│   ├── hbar.js
│   ├── index.js
│   ├── line.js
│   ├── point.js
│   ├── rect.js
│   ├── recttext.js
│   ├── table.js
│   ├── text.js
│   └── utils.js
├── package.json
├── src/
│   ├── charts/
│   │   ├── Bar.js
│   │   ├── Box.js
│   │   ├── Chart.js
│   │   ├── HBar.js
│   │   └── Table.js
│   ├── const.js
│   ├── core/
│   │   ├── Axis.js
│   │   ├── Element.js
│   │   ├── Layer.js
│   │   ├── Line.js
│   │   ├── Point.js
│   │   ├── Rect.js
│   │   ├── RectText.js
│   │   ├── Text.js
│   │   └── index.js
│   ├── index.js
│   └── utils/
│       ├── array.js
│       ├── invariant.js
│       ├── number.js
│       ├── string.js
│       └── types.js
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": ["es2015", "stage-0", "react"],
  "env": {
    "test": {
      "presets": ["es2015", "stage-0", "react"]
    }
  }
}

================================================
FILE: .eslintignore
================================================
benchmark
dist

================================================
FILE: .eslintrc
================================================
{
  "env": {
    "browser": true,
    "node": true,
    "jest": true,
    "es6": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module"
  },
  "extends": [
    "eslint-config-airbnb"
  ],
  "globals": {
  },
  "rules": {
    "comma-dangle": 0,
    "consistent-return": 0,
    "func-names": 0,
    "global-require": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-unresolved": 0,
    "indent": 0,
    "key-spacing": 0,
    "linebreak-style": 0,
    "new-cap": 0,
    "no-cond-assign": 0,
    "no-empty": 0,
    "no-fallthrough": 0,
    "no-loop-func": 0,
    "no-mixed-operators": 0,
    "no-new": 0,
    "no-param-reassign": 0,
    "no-restricted-syntax": 0,
    "no-return-assign": 0,
    "no-underscore-dangle": 0,
    "object-curly-spacing": 0,
    "prefer-rest-params": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-space-before-closing": 0,
    "strict": 0,
    "max-len": [
      2,
      120,
      4,
      {
        "ignoreUrls": true
      }
    ],
    "id-length": [
      2,
      {
        "min": 1
      }
    ],
    "class-methods-use-this": [
      1,
      {
        "exceptMethods": [
          "CLASSNAME"
        ]
      }
    ]
  }
}

================================================
FILE: .gitignore
================================================
.idea
coverage
node_modules
.coveralls.yml
npm-debug.*
l.js


================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
  - '4'
  - '4'
  - '5'
  - '6'
  - '7'
  - '8'
after_success:
  - npm run coveralls

================================================
FILE: README.md
================================================
# tcharts.js

> [TCharts.js](http://tcharts.org) is a Lightweight and fast terminal ASCII charts for nodejs and browser.

[![Ver](https://img.shields.io/npm/v/tcharts.js.svg)](https://www.npmjs.com/package/tcharts.js) [![Build Status](https://travis-ci.org/ProtoTeam/tcharts.js.svg?branch=master)](https://travis-ci.org/ProtoTeam/tcharts.js) [![Coverage Status](https://coveralls.io/repos/github/ProtoTeam/tcharts.js/badge.svg?branch=master)](https://coveralls.io/github/ProtoTeam/tcharts.js)

```
    +--------------+----------------------+---------------------+
    |              |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              |        C:25%         |      Hello:25%      |
    |              |                      |                     |
    |              |                      |                     |
    |    A:25%     |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              +----------------------+---------------------+
    |              |                                            |
    |              |                                            |
    |              |                                            |
    |              |                   B:25%                    |
    |              |                                            |
    |              |                                            |
    +--------------+--------------------------------------------+

```


## 1. Install & Usage

> npm i -S tcharts.js


### Table

```js
const TCharts = require('tcharts.js');
const { Table } = TCharts;

const table = new Table(0.2); // set gap rate = 0.2
table.setData([
  ['標識符', '名字', '生日'],
  ['#1', '圖靈', 24],
  ['#2', '潘金蓮', false],
  ['#3', '西門慶', null],
  ['#4', '明日花绮罗'],
]);
console.log(table.string());
```

### Bar

```js
const TCharts = require('tcharts.js');
const { Bar } = TCharts;

const bar = new Bar();
bar.setData([
  {value:100, name:'A'},
  {value:45, name:'B'},
  {value:70, name:'C'},
  {value:30, name:'D'},
]);
console.log(bar.string());
```

### HBar

```js
const TCharts = require('tcharts.js');
const { HBar } = TCharts;

const hbar = new HBar();
hbar.setData([
  {value: 100, name: 'A'},
  {value: 45, name: 'B'},
  {value: 70, name: 'C'},
  {value: 30, name: 'D'},
]);
console.log(hbar.string());

```

### Box

```js
const TCharts = require('tcharts.js');
const { Box } = TCharts;

const box = new Box(60, 20); // width, height
box.setData([
  {value:100, name:'A'},
  {value:100, name:'B'},
  {value:100, name:'C'},
  {value:100, name:'Hello'},
]);
console.log(box.string());
```


## 2. Supported charts

 - `Bar`: bar chart, with x, y.
 - `HBar`: horizontal bar chart.
 - `Box`: box chart showing with a square.
 - `Table`: data table in terminal.

How to use them, you can see the testcases in `__tests__` folder.


## 3. Build & Test

```
npm i

npm run build

npm test
```

Then you can see the result of test cases.


## 4. License

ISC@[ProtoTeam](https://github.com/ProtoTeam).




================================================
FILE: __tests__/axis.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

module.exports = (Point, Axis) => {
  test('1. draw a axis element.', () => {
    const point0 = new Point(0, 0);
    const pointX = new Point(20, 0);
    const pointY = new Point(0, 5);
    const axis = new Axis(point0, pointX, pointY);
    console.log(axis.toString());
    const axisLayer = axis.draw();

    expect(axisLayer.box).toEqual({
      x1: 0,
      y1: 0,
      x2: 20,
      y2: 5,
    });
    expect(axisLayer.array()).toEqual([
      '^                    '.split(''),
      '|                    '.split(''),
      '|                    '.split(''),
      '|                    '.split(''),
      '|                    '.split(''),
      '+------------------->'.split(''),
    ]);
    expect(axis.clone().draw().array()).toEqual([
      '^                    '.split(''),
      '|                    '.split(''),
      '|                    '.split(''),
      '|                    '.split(''),
      '|                    '.split(''),
      '+------------------->'.split(''),
    ]);
    console.log(axisLayer.string());
    expect(axis.CLASSNAME).toBe('Axis');
    expect(axisLayer.CLASSNAME).toBe('Layer');
  });
};


================================================
FILE: __tests__/bar.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

module.exports = (Bar) => {
  test('1. draw a bar chart.', () => {
    let bar = new Bar(20);
    bar.setData([
      {value:100, name:'A'},
      {value:45, name:'B'},
      {value:70, name:'C'},
      {value:30, name:'D'},
    ]);
    const r = `
^                           
|  A:100                    
|  +--+                     
|  |  |                     
|  |  |        C:70         
|  |  |        +--+         
|  |  |  B:45  |  |         
|  |  |  +--+  |  |  D:30   
|  |  |  |  |  |  |  +--+   
|  |  |  |  |  |  |  |  |   
|  |  |  |  |  |  |  |  |   
+--+--+--+--+--+--+--+--+-->`.trim();
    expect(bar.string()).toBe(r);

    bar = new Bar(20, 0.1);
    bar.setData([
      {value:100, name:'A'},
      {value:45, name:'B'},
      {value:70, name:'C'},
      {value:30, name:'D'},
    ]);
    console.log(bar.string());

    bar = new Bar();
    bar.setData([
      {value:100, name:'A'},
      {value:45, name:'B'},
      {value:70, name:'C'},
      {value:30, name:'D'},
    ]);
    bar.array();
    console.log(bar.string());
  });
};


================================================
FILE: __tests__/box.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

module.exports = (Box) => {
  test('1. draw a box chart.', () => {
    let box = new Box(60, 20);
    box.setData([
      {value:100, name:'A'},
      {value:100, name:'B'},
      {value:100, name:'C'},
      {value:100, name:'Hello'},
    ]);
    const r = `
+--------------+----------------------+---------------------+
|              |                      |                     |
|              |                      |                     |
|              |                      |                     |
|              |                      |                     |
|              |                      |                     |
|              |                      |                     |
|              |        C:25%         |      Hello:25%      |
|              |                      |                     |
|              |                      |                     |
|    A:25%     |                      |                     |
|              |                      |                     |
|              |                      |                     |
|              +----------------------+---------------------+
|              |                                            |
|              |                                            |
|              |                                            |
|              |                   B:25%                    |
|              |                                            |
|              |                                            |
+--------------+--------------------------------------------+`.trim();
    expect(box.string()).toBe(r);

    box = new Box();
    box.setData([
      {value:100, name:'A'},
      {value:100, name:'B'},
      {value:100, name:'C'},
      {value:100, name:'Hello'},
    ]);
    console.log(box.string());
  });
};


================================================
FILE: __tests__/hbar.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

module.exports = (HBar) => {
  test('1. draw a hbar chart.', () => {
    const hbar = new HBar();
    hbar.setData([
      {value: 100, name: 'A'},
      {value: 45, name: 'B'},
      {value: 70, name: 'C'},
      {value: 30, name: 'D'},
    ]);
    console.log(hbar.string());
    const r = `
^                                                      
|                                                      
+---------------+                                      
|           D:30|                                      
+---------------+                                      
|                                                      
+------------------------------------+                 
|                                C:70|                 
+------------------------------------+                 
|                                                      
+-----------------------+                              
|                   B:45|                              
+-----------------------+                              
|                                                      
+----------------------------------------------------+ 
|                                               A:100| 
+----------------------------------------------------+ 
|                                                      
+----------------------------------------------------->
`.trim();
    expect(hbar.string()).toBe(r);
  });
};


================================================
FILE: __tests__/index.js
================================================
/**
 * Created by hustcc on 17/6/21.
 */

// test for library and test
// eslint-disable-next-line
const { Box, Bar, HBar, Table } = require(process.env.NODE_ENV !== 'production' ? '../src/' : '../');
const { Axis, Line, Point, Rect, Text, RectText } = require('../src/core/');
const StringUtils = require('../src/utils/string');
const NumberUtils = require('../src/utils/number');


describe('Testcases of tcharts.js', () => {
  describe('1. Point element.', () => {
    require('./point')(Point);
  });

  describe('2. Line element.', () => {
    require('./line')(Point, Line);
  });

  describe('3. Text element.', () => {
    require('./text')(Point, Text);
  });

  describe('4. Rect element.', () => {
    require('./rect')(Point, Rect);
  });

  describe('5. RectText element.', () => {
    require('./recttext')(Point, RectText);
  });

  describe('6. Axis element.', () => {
    require('./axis')(Point, Axis);
  });

  describe('7. Box chart.', () => {
    require('./box')(Box);
  });

  describe('8. Bar chart.', () => {
    require('./bar')(Bar);
  });

  describe('9. HBar chart.', () => {
    require('./hbar')(HBar);
  });

  describe('10. Table chart.', () => {
    require('./table')(Table);
  });

  describe('11. utils.', () => {
    require('./utils')(StringUtils, NumberUtils);
  });
});


================================================
FILE: __tests__/line.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */


module.exports = (Point, Line) => {
  test('1. draw a line element.', () => {
    let start = new Point(0, 0);
    let end = new Point(0, 50);
    const line = new Line(start, end);
    let lineLayer = line.draw();

    expect(lineLayer.box).toEqual({
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 50,
    });
    expect(lineLayer.array()).toEqual(new Array(51).fill(new Array(1).fill('|')));

    start = new Point(0, 0);
    end = new Point(50, 0);
    lineLayer = new Line(start, end).draw();

    expect(lineLayer.box).toEqual({
      x1: 0,
      y1: 0,
      x2: 50,
      y2: 0,
    });
    expect(lineLayer.array()).toEqual(new Array(1).fill(new Array(51).fill('-')));

    expect(line.clone().CLASSNAME).toBe('Line');
    expect(line.toString()).toBe('Line(Point(0, 0), Point(0, 50))');
  });
};


================================================
FILE: __tests__/point.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */


module.exports = (Point) => {
  test('1. draw a point element.', () => {
    const pointLayer = new Point(50, 50).draw();
    expect(pointLayer.box).toEqual({
      x1: 50,
      y1: 50,
      x2: 50,
      y2: 50,
    });
    expect(pointLayer.array()).toEqual([['+']]);
  });
};


================================================
FILE: __tests__/rect.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */


module.exports = (Point, Rect) => {
  test('1. draw a rect element.', () => {
    const start = new Point(0, 0);
    const end = new Point(4, 3);
    const rect = new Rect(start, end);
    const rectLayer = rect.draw();

    expect(rectLayer.box).toEqual({
      x1: 0,
      y1: 0,
      x2: 4,
      y2: 3,
    });
    expect(rectLayer.array()).toEqual([
      '+---+'.split(''),
      '|   |'.split(''),
      '|   |'.split(''),
      '+---+'.split(''),
    ]);

    expect(rect.clone().CLASSNAME).toBe('Rect');
    rect.toString();
  });
};


================================================
FILE: __tests__/recttext.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

module.exports = (Point, RectText) => {
  test('1. draw a rect-text element.', () => {
    const start = new Point(0, 0);
    const end = new Point(10, 5);
    const reactText = new RectText(start, end, 'TC');
    const rectTextLayer = reactText.draw();

    expect(rectTextLayer.box).toEqual({
      x1: 0,
      y1: 0,
      x2: 10,
      y2: 5,
    });
    expect(rectTextLayer.array()).toEqual([
      '+---------+'.split(''),
      '|         |'.split(''),
      '|         |'.split(''),
      ['|', ' ', ' ', ' ', ' ', 'TC', '', ' ', ' ', ' ', '|'],
      '|         |'.split(''),
      '+---------+'.split(''),
    ]);

    expect(reactText.clone().CLASSNAME).toBe('RectText');
    reactText.toString();
  });
};


================================================
FILE: __tests__/table.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */


module.exports = (Table) => {
  test('1. draw a table chart.', () => {
    let table = new Table();
    table.setData([
      ['id', 'name', 'birthday'],
      ['#1', 'xiaowei', '1992-08-01'],
      ['#2', 'hello', '1992-09-20'],
      ['#3', 'tcharts', '2017-06-27'],
      ['#4', 'world'],
    ]);
    const r = `
+--+-------+----------+
|id|  name | birthday |
+--+-------+----------+
|#1|xiaowei|1992-08-01|
+--+-------+----------+
|#2| hello |1992-09-20|
+--+-------+----------+
|#3|tcharts|2017-06-27|
+--+-------+----------+
|#4| world |          |
+--+-------+----------+`.trim();
    expect(table.string()).toBe(r);

    table = new Table(0.5); // set gap rate = 0.5
    table.setData([
      ['id', 'name', 'birthday'],
      ['#1', 'xiaowei', '1992-08-01'],
      ['#2', 'hello', '1992-09-20'],
      ['#3', 'tcharts', '2017-06-27'],
      ['#4', 'world'],
    ]);
    console.log(table.string());
  });

    test('2. draw a table chart, contains chinese.', () => {
        let table = new Table();
        table.setData([
            ['標識符', '名字', '生日'],
            ['#1', '圖靈', '1992-08-01'],
            ['#2', '潘金蓮', '1992-09-20'],
            ['#3', '西門慶', '2017-06-27'],
            ['#4', '明日花绮罗'],
        ]);
        const r = `
+------+----------+----------+
|標識符|   名字   |   生日   |
+------+----------+----------+
|  #1  |   圖靈   |1992-08-01|
+------+----------+----------+
|  #2  |  潘金蓮  |1992-09-20|
+------+----------+----------+
|  #3  |  西門慶  |2017-06-27|
+------+----------+----------+
|  #4  |明日花绮罗|          |
+------+----------+----------+`.trim();
        expect(table.string()).toBe(r);

        table = new Table(0.5); // set gap rate = 0.5
        table.setData([
            ['標識符', '名字', '生日'],
            ['#1', '圖靈', '1992-08-01'],
            ['#2', '潘金蓮', '1992-09-20'],
            ['#3', '西門慶', '2017-06-27'],
            ['#4', '明日花绮罗'],
        ]);
        console.log(table.string());

      table = new Table(0.5); // set gap rate = 0.5
      table.setData([
        ['標識符', '名字', '生日'],
        ['#1', '圖靈', 24],
        ['#2', '潘金蓮', false],
        ['#3', '西門慶', null],
        ['#4', '明日花绮罗'],
      ]);
      console.log(table.string());
    });
};


================================================
FILE: __tests__/text.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

module.exports = (Point, Text) => {
  test('1. draw a text element.', () => {
    const text = 'Hello world.';
    const p = new Point(40, 50);
    const textE = new Text(p, text);
    const textLayer = textE.draw();
    expect(textLayer.box).toEqual({
      x1: 35,
      y1: 50,
      x2: 46,
      y2: 50,
    });
    const r = new Array(12).fill('');
    r[0] = text;

    expect(textLayer.array()).toEqual([
      r
    ]);

    expect(textE.clone().CLASSNAME).toBe('Text');
    textE.toString();
  });
};


================================================
FILE: __tests__/utils.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

module.exports = (StringUtils, NumberUtils) => {
  test('1. toString.', () => {
    expect(StringUtils.toString(null)).toBe('null');
    expect(StringUtils.toString(undefined)).toBe('undefined');
    expect(StringUtils.toString(false)).toBe('false');
    expect(StringUtils.toString('')).toBe('');
    expect(StringUtils.toString(123)).toBe('123');
    expect(StringUtils.toString('hustcc')).toBe('hustcc');

    expect(StringUtils.toString([1, '2'])).toBe('[1,"2"]');
    expect(StringUtils.toString({a: 1, b: '2'})).toBe('{"a":1,"b":"2"}');
    expect(typeof StringUtils.toString(new Date())).toBe('string');
  });

  test('2. toPercent.', () => {
    expect(NumberUtils.toPercent(123)).toBe('12300%');
    expect(NumberUtils.toPercent(0.234, 0)).toBe('23%');
  });
};


================================================
FILE: package.json
================================================
{
  "name": "tcharts.js",
  "version": "0.0.4",
  "description": "Lightweight and fast terminal ASCII charts for nodejs and browser.",
  "main": "dist/tcharts.min.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "lint": "eslint src && eslint __tests__",
    "cover": "jest --coverage",
    "test": "npm run lint && npm run cover",
    "coveralls": "cat ./coverage/lcov.info | coveralls",
    "build": "webpack && cross-env NODE_ENV=production jest --coverage"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hustcc/tcharts.js.git"
  },
  "keywords": [
    "terminal",
    "console",
    "charts",
    "ascii",
    "terminal-charts",
    "tcharts",
    "tcharts.js"
  ],
  "author": "hustcc",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/hustcc/tcharts.js/issues"
  },
  "homepage": "https://github.com/hustcc/tcharts.js#readme",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-jest": "^20.0.3",
    "babel-loader": "^7.1.0",
    "babel-preset-env": "^1.5.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "coveralls": "^2.13.1",
    "cross-env": "^5.0.5",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-config-airbnb-base": "^11.2.0",
    "eslint-plugin-import": "^2.3.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.0.1",
    "jest": "^20.0.4",
    "webpack": "^3.0.0"
  },
  "dependencies": {
    "area-divide": "^0.0.1",
    "evenly": "^1.0.2",
    "fixed-round": "^0.0.1",
    "invariant": "^2.2.2",
    "variable-type": "^0.2.0",
    "what.js": "^1.0.1",
    "word-width": "^1.0.1"
  },
  "jest": {
    "testRegex": "(/__tests__/index)\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/*.{js,jsx}",
      "src/*/*.{js,jsx}",
      "!**/node_modules/**",
      "!**/vendor/**"
    ],
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  }
}


================================================
FILE: src/charts/Bar.js
================================================
/**
 * Created by hustcc.
 */

const Chart = require('./Chart');
const invariant = require('../utils/invariant');
const { round } = require('../utils/number');
const Axis = require('../core/Axis');
const Point = require('../core/Point');
const Text = require('../core/Text');
const Rect = require('../core/Rect');
const { BAR_DATA_TYPE } = require('../const');

/**
 * 柱形图
 *
 * ^
 * |    A:70
 * |   +---+
 * |   |   |
 * |   |   |              C:50
 * |   |   |             +---+
 * |   |   |             |   |
 * |   |   |             |   |
 * |   |   |     B:30    |   |
 * |   |   |    +---+    |   |
 * |   |   |    |   |    |   |
 * |   |   |    |   |    |   |
 * |   |   |    |   |    |   |
 * +---+---+----+---+----+---+----->
 *
 *
 * data 结构：
 [
   {value:335, name:'A'},
   {value:310, name:'B'},
   {value:274, name:'C'},
   {value:235, name:'D'},
   {value:400, name:'E'},
 ]
 *
 */
class Bar extends Chart {
  constructor(minWidth = 20, heightRate = 0.4) {
    super(0, 0);
    this.minWidth = minWidth;
    this.heightRate = heightRate; // 高度 / 宽度比例
    this.barWidth = 2;
  }

  setData = (data) => {
    invariant(
      BAR_DATA_TYPE.check(data),
      'TCharts: data of `Bar` chart should be type of Array.'
    );
    this.data = data;
    // 计算宽高
    let width = (this.data.length * 2 + 1) * (this.barWidth + 1);
    width = Math.max(width, this.minWidth);
    const height = round(width * this.heightRate);
    this.resetSize(width, height);
    this.generateLayer();
  };

  /**
   * 具体图表的实现
   */
  generateLayer = () => {
    // 1. 构造 text 键值
    let maxValue = 0;
    this.data.forEach((d) => {
      d.text = `${d.name}:${d.value}`;
      maxValue = Math.max(maxValue, d.value);
    });

    // 2. 计算每个数值的柱形图高度d
    this.data.forEach((d) => {
      d.height = round((d.value / maxValue) * (this.height - 2)); // -2 是为了显示文本
    });

    // 3. 绘制坐标轴图层
    const axisLayer = new Axis(
      new Point(0, 0),
      new Point(this.width, 0),
      new Point(0, this.height)
    ).draw();

    // 4. 绘制矩形图层
    const widthStep = round(this.width / (this.data.length * 2 + 1));
    const rectLayers = this.data.map((d, i) => new Rect(
      new Point(widthStep * (i * 2 + 1), 0),
      new Point(widthStep * (i * 2 + 2), d.height)).draw()
    );

    // 5. 绘制文字图层(局左对齐)
    const textLayers = this.data.map((d, i) => new Text(
      new Point(widthStep * (i * 2 + 1), d.height + 1), // 文本高度为 1
      d.text,
      'left').draw()
    );

    // 6. 合并图层
    let layers = [];
    layers.push(axisLayer);
    layers = layers.concat(rectLayers);
    layers = layers.concat(textLayers);

    this.layer.mergeArray(layers);
  }
}

module.exports = Bar;


================================================
FILE: src/charts/Box.js
================================================
/**
 * Created by hustcc.
 */

const areaDivide = require('area-divide');
const Chart = require('./Chart');
const { toPercent } = require('../utils/number');
const RectText = require('../core/RectText');
const Point = require('../core/Point');
const invariant = require('../utils/invariant');
const { BOX_DATA_TYPE } = require('../const');

/**
 * 面积区域占比图
 *
 *  +-------------------+------------+
 *  |                   |    B:10%   |
 *  |                   |            |
 *  |                   |------------+
 *  |       A:75%       |            |
 *  |                   |    C:20%   |
 *  |                   |            |
 *  +-------------------+------------+
 *
 * data 结构：
 [
   {value:335, name:'A'},
   {value:310, name:'B'},
   {value:274, name:'C'},
   {value:235, name:'D'},
   {value:400, name:'E'},
 ]
 *
 */
class Box extends Chart {
  constructor(width = 60, height = 20) {
    super(width, height);
  }

  setData = (data) => {
    invariant(
      BOX_DATA_TYPE.check(data),
      'TCharts: data of `Box` chart should be type of Array.'
    );
    this.data = data;
    this.generateLayer();
  };

  /**
   * 具体图表的实现
   */
  generateLayer = () => {
    // 1. 计算总数
    let total = 0;
    this.data.forEach((d) => {
      total += d.value;
    });
    // 2. 计算占比
    this.data.forEach((d) => {
      d.percent = d.value / total;
      d.text = `${d.name}:${toPercent(d.percent, 0)}`;
    });
    // 3. 降序排序
    this.data.sort((x, y) => y.value - x.value);
    // 4. 瓜分面积
    // 获得比率，然后调用方法瓜分算法
    const percents = this.data.map(e => e.percent);
    const plan = areaDivide(this.width, this.height, percents);

    const layers = plan.map((p, index) => new RectText(
      new Point(p.x1, p.y1),
      new Point(p.x2, p.y2),
      this.data[index].text).draw()
    );

    this.layer.mergeArray(layers);
  };
}

module.exports = Box;


================================================
FILE: src/charts/Chart.js
================================================
/**
 * Created by hustcc.
 */

const Layer = require('../core/Layer');

/**
 * 图表的基类
 * 1. 拥有画布的宽高属性
 * 2. 可以设置图形的 data 配置
 * 3. 拥有将图层变成字符串的能力 string() / array();
 * 4. 拥有一个图层，这个是最最终图层
 */
class Chart {
  constructor(width, height) {
    this.resetSize(width, height);
    this.data = [];
  }

  resetSize = (width, height) => {
    this.width = width;
    this.height = height;
    // 创建一个空的图层
    this.layer = Layer.emptyInstance({
      x1: 0,
      y1: 0,
      x2: this.width,
      y2: this.height,
    });
  };

  // 返回图表的文本，可以直接用脑输出
  string = () => this.layer.string();

  // 返回图表的文本数组，逐行打印就可以显示了
  array = () => this.layer.array();
}

module.exports = Chart;


================================================
FILE: src/charts/HBar.js
================================================
/**
 * Created by hustcc.
 */

const Chart = require('./Chart');
const invariant = require('../utils/invariant');
const { round } = require('../utils/number');
const Axis = require('../core/Axis');
const Point = require('../core/Point');
const Rect = require('../core/Rect');
const Text = require('../core/Text');
const { HBAR_DATA_TYPE } = require('../const');

/**
 * 横向柱形图
 *
 * ^
 * |
 * +--------------------------+
 * |           A:70           |
 * +--------------------------+
 * |
 * |
 * +-----------------+
 * |      B:30       |
 * +-----------------+
 * |
 * |
 * +---------------------+
 * |         C:50        |
 * +---------------------+
 * |
 * +---+---+----+---+----+---+----->
 *
 */
class HBar extends Chart {
  constructor(minHeight = 8, widthRate = 3) {
    super(0, 0);
    this.minHeight = minHeight;
    this.widthRate = widthRate; // 高度 / 宽度比例
    this.barHeight = 1;
  }

  setData = (data) => {
    invariant(
      HBAR_DATA_TYPE.check(data),
      'TCharts: data of `HBar` chart should be type of Array.'
    );
    this.data = data;
    // 计算宽高
    let height = (this.data.length * 2 + 1) * (this.barHeight + 1);
    height = Math.max(height, this.minHeight);
    const width = round(height * this.widthRate);
    this.resetSize(width, height);
    this.generateLayer();
  };

  /**
   * 具体图表的实现
   */
  generateLayer = () => {
    // 1. 构造 text 键值
    let maxValue = 0;
    this.data.forEach((d) => {
      d.text = `${d.name}:${d.value}`;
      maxValue = Math.max(maxValue, d.value);
    });

    // 2. 计算每个数值的柱形图宽度
    this.data.forEach((d) => {
      d.width = round((d.value / maxValue) * (this.width - 1)); // -1 图形美观
    });

    // 3. 绘制坐标轴图层
    const axisLayer = new Axis(
      new Point(0, 0),
      new Point(this.width, 0),
      new Point(0, this.height)
    ).draw();

    // 4. 绘制矩形图层
    const heightStep = round(this.height / (this.data.length * 2 + 1));
    const rectLayers = this.data.map((d, i) => new Rect(
      new Point(0, heightStep * (i * 2 + 1)),
      new Point(d.width, heightStep * (i * 2 + 2))).draw()
    );

    // 5. 绘制文字图层(局左对齐)
    const textLayers = this.data.map((d, i) => {
      if (d.text.length >= d.width) {
        // 文本长度超过柱子长度，在在柱形右边显示
        return new Text(
          new Point(d.width + 1, heightStep * (i * 2 + 1) + 1),
          d.text).draw();
      }
      // 居右显示
      return new Text(
        new Point(d.width - 1, heightStep * (i * 2 + 1) + 1),
        d.text,
        'right').draw();
    });

    // 6. 合并图层
    let layers = [];
    layers.push(axisLayer);
    layers = layers.concat(rectLayers);
    layers = layers.concat(textLayers);

    this.layer.mergeArray(layers);
  }
}

module.exports = HBar;


================================================
FILE: src/charts/Table.js
================================================
/**
 * Created by hustcc.
 */

const Chart = require('./Chart');
const invariant = require('../utils/invariant');
const RectText = require('../core/RectText');
const Point = require('../core/Point');
const { arrayClone } = require('../utils/array');
const { wordWidth } = require('../utils/string');
const { round } = require('../utils/number');
const { TABLE_DATA_TYPE } = require('../const');

/**
 * 表格
 *
 *
 * +----+----------+----------------+
 * | id |   name   |    birthday    |
 * +----+----------+----------------+
 * | #1 |  xiaowei |   1992-08-01   |
 * +----+----------+----------------+
 * | #2 |  hello   |   1992-09-20   |
 * +----+----------+----------------+
 * | #3 | tcharts  |   2017-06-27   |
 * +----+----------+----------------+
 * | #4 |     d    |                |
 * +----+----------+----------------+
 *
 *
 *
 */
class Table extends Chart {
  constructor(rate = 0) {
    super(0, 0); // table 的宽高有内容自动伸缩
    this.rate = rate; // 比例，比如文字宽度为10, rate = 0.1，则表格 cell 宽度为 12
  }

  // 通过内容计算每一列的宽高
  _calColSizes = (data, row, col) => {
    let sizes = new Array(col).fill(0);
    data.forEach((d) => {
      sizes = sizes.map((s, i) => Math.max(wordWidth(d[i]), s));
    });
    // 乘以 rate
    sizes = sizes.map(s => s + round(s * this.rate) * 2);
    return sizes;
  };

  _getRowAndCol = (data) => {
    const row = data.length;
    let col = 0;
    data.forEach((d) => {
      col = Math.max(col, d.length);
    });

    // 数据不能为零长度
    invariant(
      row !== 0 && col !== 0,
      `TCharts: data of \`Table\` chart should be type of matrix Array, 
      and can not be zero row or column. Got row: %s, column: %s.`,
      row,
      col
    );
    return {
      row,
      col,
    };
  };

  // 填充数据（对于有空缺的数据）
  _fullFillData = (data, row, col) => {
    const cloneData = arrayClone(data);
    // 遍历来填充数据
    data.forEach((d, index) => {
      if (col > d.length) {
        // 补充一些空的文本
        cloneData[index].splice(cloneData[index].length, 0, ...new Array(col - d.length).fill(''));
      }
    });
    return cloneData;
  };

  _calTableSizes = (colSizes, row, col) => {
    // width height 是从 0 开始计数的，所以这里的 width height 比实际的 - 1
    const height = row * 2;
    const width = col + colSizes.reduce((r, ele) => r + ele);
    return {
      width,
      height,
    };
  };

  setData = (data) => {
    invariant(
      TABLE_DATA_TYPE.check(data),
      'TCharts: data of `Table` chart should be type of matrix Array.'
    );
    const { row, col } = this._getRowAndCol(data);
    this.data = this._fullFillData(data, row, col);

    const colSizes = this._calColSizes(this.data, row, col);
    const { width, height } = this._calTableSizes(colSizes, row, col);

    this.resetSize(width, height);
    this.generateLayer(colSizes, row, col);
  };

  /**
   * 具体 table 的实现
   */
  generateLayer = (colSizes, row, col) => {
    const rectTexts = []; // 非常多有的 rectText 实例
    let startX = 0;
    let startY = 0;

    for (let i = 0; i < row; i += 1) {
      startX = 0;
      for (let j = 0; j < col; j += 1) {
        rectTexts.push(new RectText(
          new Point(startX, startY),
          new Point(startX + colSizes[j] + 1, startY + 2),
          this.data[row - i - 1][j]).draw());

        startX += (colSizes[j] + 1);
      }
      startY += 2;
    }
    return this.layer.mergeArray(rectTexts);
  }
}

module.exports = Table;


================================================
FILE: src/const.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

const VT = require('variable-type');

const COMMON_TYPE = VT.arrayOf(
  VT.shape({
    name: VT.or([
      VT.number,
      VT.string,
    ]),
    value: VT.number,
  })
);

const BAR_DATA_TYPE = COMMON_TYPE;

const BOX_DATA_TYPE = COMMON_TYPE;

const HBAR_DATA_TYPE = COMMON_TYPE;

const TABLE_DATA_TYPE = VT.arrayOf(
  VT.arrayOf(
    VT.any,
  ),
);

// const TREE_DATA_TYPE = VT.shape({
//   name: VT.or([
//     VT.number,
//     VT.string,
//   ]),
//   // TODO children 一个递归结构的数组
//   children: VT.arrayOf(
//     VT.recursive
//   ),
// });

module.exports = {
  BAR_DATA_TYPE,
  BOX_DATA_TYPE,
  HBAR_DATA_TYPE,
  TABLE_DATA_TYPE,
  // TREE_DATA_TYPE,
};


================================================
FILE: src/core/Axis.js
================================================
/**
 * Created by hustcc.
 */

const invariant = require('../utils/invariant');
const types = require('../utils/types');
const Element = require('./Element');
const Line = require('./Line');

/**
 * 一个坐标轴系统，不带 x，y 文字
 *
 * ^
 * |
 * |
 * |
 * |
 * |
 * |
 * |
 * |
 * |
 * +------------------------------>
 *
 */
class Axis extends Element {
  /**
   * 构造方法
   * @param point0 零点
   * @param pointX 横向轴
   * @param pointY 纵向轴
   */
  constructor(point0, pointX, pointY) {
    super();
    invariant(
      types.isPoint(point0) && types.isPoint(pointX) && types.isPoint(pointY),
      'TCharts: constructor props of Axis should be (Point, Point, Point), got (%s, %s, %s).',
      types.typeOf(point0),
      types.typeOf(pointX),
      types.typeOf(pointY));

    invariant(
      point0.y === pointX.y,
      'TCharts: constructor props `pointX` of Axis should be an Horizontal line with `point0`.');

    invariant(
      point0.x === pointY.x,
      'TCharts: constructor props `pointY` of Axis should be an Horizontal line with `point0`.');

    this.point0 = point0;
    this.pointX = pointX;
    this.pointY = pointY;
    this.box = {
      x1: this.point0.x,
      y1: this.point0.y,
      x2: this.pointX.x,
      y2: this.pointY.y,
    };

    this.initLayer();
  }

  clone = () => new Axis(this.point0, this.pointX, this.pointY);

  toString = () => `Axis(${this.point0}, ${this.pointX}, ${this.pointY})`;

  draw = () => {
    // X 轴图层
    const lineXLayer = new Line(this.point0, this.pointX).draw();
    // Y 轴图层
    const lineYLayer = new Line(this.point0, this.pointY).draw();

    // 后合并点，可以提高性能，同时不会导致层覆盖问题
    return this.layer.merge(
      lineXLayer,                      // x 轴
      lineYLayer,                      // y 轴
      this.point0.draw({ fill: '+' }), // 左边圆点
      this.pointX.draw({ fill: '>' }), // x 轴箭头
      this.pointY.draw({ fill: '^' })  // y 轴箭头
    );
  };

  get CLASSNAME() {
    return 'Axis';
  }
}

module.exports = Axis;


================================================
FILE: src/core/Element.js
================================================
/**
 * Created by hustcc.
 */
const { floorCenter } = require('../utils/number');
const Layer = require('./Layer');
/**
 * 元素基类，像积木一样一层一层的搭建组件元素
 * 每隔元素都可以通过 draw 方法获得一个图层
 * 上层的元素是利用下层元素组合出来的，然后形成新的图层
 * 一层一层，直到形成最终的图表 charts
 *
 * 元素都有一个 box 结构（盒模型？）限定了元素的起始位置
 * 另外具有一个 z-index 属性，可以设置元素显示的层级
 *
 * 元素的 clone 可以直接获得一个相同的元素，引用不同
 */
class Element {
  constructor(zIndex = 0) {
    this.zIndex = zIndex; // TODO 用于控制渲染层级，后期可以用于重构渲染性能
    // box 限制了元素的起始结束点坐标，以
    this.box = { x1: 0, y1: 0, x2: 0, y2: 0 };
  }

  /**
   * 初始化空的 layer
   */
  initLayer = () => {
    this.layer = Layer.emptyInstance(this.box, this.zIndex);
  };

  // setZIndex = (zIndex = 0) => {
  //   this.zIndex = zIndex;
  // };

  /**
   * 获得中心点的坐标
   * @returns {{x: number, y: number}}
   */
  center = () => ({
    x: floorCenter(this.box.x1, this.box.x2),
    y: floorCenter(this.box.y1, this.box.y2),
  });

  /**
   * 获得元素的大小
   * @returns {{width: number, height: number}}
   */
  size = () => {
    const width = this.box.x2 - this.box.x1 + 1;
    const height = this.box.y2 - this.box.y1 + 1;
    return {
      width,
      height,
    };
  };

  // clone = () => new Element();
  //
  // toString = () => {
  //   invariant(false, 'TCharts: Element\'s method `toString` should be implemented by children Class.');
  // };
  //
  //
  // /**
  //  * 绘制图形，产生图层，图层将用于最终的渲染
  //  * @param options { fill: '*', line: '-' }
  //  */
  // draw = () => {
  //   invariant(false, 'TCharts: Element\'s method `draw` should be implemented by children Class.');
  // };
  //
  // get CLASSNAME() {
  //   invariant(false, 'TCharts: Element\'s method `CLASSNAME` should be implemented by children Class.');
  // }
}

module.exports = Element;


================================================
FILE: src/core/Layer.js
================================================
/**
 * Created by hustcc.
 */

const invariant = require('../utils/invariant');
const types = require('../utils/types');
const { fillMatrix } = require('../utils/array');

/**
 * 定义一个图层，图层包括一个范围和填充的内容
 * 图层是最终将用于显示的部分，图层可以通过 merge 合并
 * 最终显示在控制台的仅仅只有一个图层
 * 这个图层是有很多的小元素图层合并而来
 *
 * 如何设计图层，更好划分图层，将提高 merge 性能
 *
 * 图层也就是 Element 元素 draw 方法的返回值
 */
class Layer {
  constructor(box = { x1: 0, y1: 0, x2: 0, y2: 0 }, ascii = [], zIndex = 0) {
    invariant(
      types.isObject(box) && types.isArray(ascii) && types.isNumber(zIndex),
      'TCharts: constructor props of Layer should be (object, array, number), got (%s, %s, %s).',
      types.typeOf(box),
      types.typeOf(ascii),
      types.typeOf(zIndex));

    this.box = box;
    this.ascii = ascii;
    this.zIndex = zIndex;
  }

  static emptyInstance(box, zIndex = 0) {
    const width = box.x2 - box.x1 + 1;
    const height = box.y2 - box.y1 + 1;

    const ascii = fillMatrix(height, width, ' ');
    return new Layer(box, ascii, zIndex);
  }

  // box 盒模型是不是大于
  // gt = (layer, includeEqual = true) => {
  //    if (includeEqual) {
  //      if (
  //        this.box.x1 <= layer.box.x1 &&
  //        this.box.y1 <= layer.box.y1 &&
  //        this.box.x2 >= layer.box.x2 &&
  //        this.box.y2 >= layer.box.y2) {
  //        return true;
  //      }
  //      return false;
  //    }
  //   if (
  //     this.box.x1 < layer.box.x1 &&
  //     this.box.y1 < layer.box.y1 &&
  //     this.box.x2 > layer.box.x2 &&
  //     this.box.y2 > layer.box.y2) {
  //     return true;
  //   }
  //    return false;
  // };

  /**
   * 按顺序合并另外的 layers
   * @param layer
   */
  merge = (...layers) => this.mergeArray(layers);

  /**
   * 合并一个 layer
   * @param layer
   */
  mergeOne = (layer) => {
    // 校验：前提条件是，this 的范围肯定大于 layer
    // invariant(
    //   this.gt(layer),
    //   'TCharts: layer\'box should be greater then layer which will be merged.');

    // 算法
    const { x1, y1, x2, y2 } = layer.box;
    const { x1: thisX1, y1: thisY1, x2: thisX2, y2: thisY2 } = this.box;
    const rangeX1 = Math.max(x1, thisX1);
    const rangeY1 = Math.max(y1, thisY1);
    const rangeX2 = Math.min(x2, thisX2);
    const rangeY2 = Math.min(y2, thisY2);
    // box 的偏移量
    let i1;
    let i2;
    for (let i = rangeX1; i <= rangeX2; i += 1) {
      // 减少计算量
      i1 = i - thisX1;
      i2 = i - x1;
      for (let j = rangeY1; j <= rangeY2; j += 1) {
        this.ascii[j - thisY1][i1] = layer.ascii[j - y1][i2];
      }
    }
    return this;
  };

  /**
   * 合并一个 layer
   * @param layer
   */
  mergeArray = (layers) => {
    // 首先先按照 zIndex 升序排列，越大越在上层
    // chrome 下 sort 方法可能为不稳定，这点需要注意。
    // layers.sort((x, y) => x - y); // TODO :暂时不要 zIndex 排序特性
    // 排序之后遍历，先绘制底层的，后使用上层覆盖
    layers.forEach((layer) => {
      this.mergeOne(layer);
    });
    return this;
  };

  /**
   * 返回图表的文本，可以直接用脑输出
   * @returns {string}
   */
  string = () => {
    const asciiArray = this.ascii;
    // 逆向遍历
    const rst = [];
    for (let i = asciiArray.length - 1; i >= 0; i -= 1) {
      rst.push(`${asciiArray[i].join('')}`);
    }
    return rst.join('\n');
  };

  /**
   * 返回图表的文本数组，逐行打印就可以显示了
   */
  array = () => this.ascii.slice().reverse();

  get CLASSNAME() {
    return 'Layer';
  }
}

module.exports = Layer;


================================================
FILE: src/core/Line.js
================================================
/**
 * Created by hustcc.
 */

const invariant = require('../utils/invariant');
const types = require('../utils/types');
const Element = require('./Element');
const { fillMatrix } = require('../utils/array');
// const Layer = require('./Layer');

/**
 * 一个线段，包括横线和竖线
 *
 * 横线
 * -------------------
 *
 * 竖线
 * |
 * |
 * |
 * |
 * |
 * |
 *
 */
class Line extends Element {
  constructor(start, end) {
    super();
    // 参数必须是 point 类型的
    invariant(
      types.isPoint(start) && types.isPoint(end),
      'TCharts: constructor props of Line should be (Point, Point), got (%s, %s).',
      types.typeOf(start),
      types.typeOf(end));
    // 控制台模式下，仅仅只能输入横线或者竖线
    invariant(
      start.x === end.x || start.y === end.y,
      'TCharts: we can only draw Horizontal / Vertical line in terminal. got(%s, %s).',
      start,
      end);
    // 校验通过，赋值属性
    this.start = start;
    this.end = end;
    this.box = {
      x1: Math.min(this.start.x, this.end.x),
      y1: Math.min(this.start.y, this.end.y),
      x2: Math.max(this.start.x, this.end.x),
      y2: Math.max(this.start.y, this.end.y),
    };

    this.initLayer();
  }

  clone = () => new Line(this.start.clone(), this.end.clone());

  toString = () => `Line(${this.start}, ${this.end})`;

  draw = () => {
    const { width, height } = this.size();
    const isHorizontal = this.box.y1 === this.box.y2;

    let ascii = null;
    if (isHorizontal) {
      // 横向线
      ascii = fillMatrix(1, width, '-');
    } else {
      // 纵向线
      ascii = fillMatrix(height, 1, '|');
    }
    this.layer.ascii = ascii;
    return this.layer;
  };

  get CLASSNAME() {
    return 'Line';
  }
}

module.exports = Line;


================================================
FILE: src/core/Point.js
================================================
/**
 * Created by hustcc.
 */

const invariant = require('../utils/invariant');
const types = require('../utils/types');
const Element = require('./Element');

/**
 * 一个点
 *
 * +
 *
 */
class Point extends Element {
  constructor(x, y) {
    super();
    invariant(
      types.isNumber(x) && types.isNumber(y),
      'TCharts: constructor props of Point should be (number, number), got (%s, %s).',
      types.typeOf(x),
      types.typeOf(y));

    this.x = x;
    this.y = y;
    this.box = {
      x1: this.x,
      y1: this.y,
      x2: this.x,
      y2: this.y,
    };

    this.initLayer();
  }

  clone = () => new Point(this.x, this.y);

  toString = () => `Point(${this.x}, ${this.y})`;

  draw = (options = { fill: '+' }) => {
    this.layer.ascii = [[options.fill]];
    return this.layer;
  };

  get CLASSNAME() {
    return 'Point';
  }
}

module.exports = Point;


================================================
FILE: src/core/Rect.js
================================================
/**
 * Created by hustcc.
 */

const invariant = require('../utils/invariant');
const types = require('../utils/types');
const Element = require('./Element');
const Point = require('./Point');
const Line = require('./Line');
// const Layer = require('./Layer');

/**
 *  带边框的填充矩形，在控制台下面，仅仅只能绘制四边形
 *
 *  +---------------------------+
 *  |                           |
 *  |                           |
 *  |                           |
 *  |                           |
 *  +---------------------------+
 *
 */
class Rect extends Element {
  constructor(start, end) {
    super();
    // 参数必须是 point 类型的
    invariant(
      types.isPoint(start) && types.isPoint(end),
      'TCharts: constructor props of Rect should be (Point, Point), got (%s, %s).',
      types.typeOf(start),
      types.typeOf(end));
    // 校验通过，赋值属性
    this.start = start;
    this.end = end;
    this.box = {
      x1: Math.min(this.start.x, this.end.x),
      y1: Math.min(this.start.y, this.end.y),
      x2: Math.max(this.start.x, this.end.x),
      y2: Math.max(this.start.y, this.end.y),
    };

    this.initLayer();
  }

  clone = () => new Rect(this.start.clone(), this.end.clone());

  toString = () => `Rect(${this.start}, ${this.end})`;

  draw = () => {
    // 四个顶点
    const points = [
      new Point(this.box.x1, this.box.y1),
      new Point(this.box.x2, this.box.y1),
      new Point(this.box.x2, this.box.y2),
      new Point(this.box.x1, this.box.y2),
    ];
    const corners = points.map(p => p.draw());

    // 四条边
    const lines = [
      new Line(points[0], points[1]).draw(),
      new Line(points[1], points[2]).draw(),
      new Line(points[2], points[3]).draw(),
      new Line(points[3], points[0]).draw(),
    ];

    // 合并图层部分
    return this.layer.mergeArray(lines.concat(corners));
  };
  get CLASSNAME() {
    return 'Rect';
  }
}

module.exports = Rect;


================================================
FILE: src/core/RectText.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

const invariant = require('../utils/invariant');
const types = require('../utils/types');
const Element = require('./Element');
const Point = require('./Point');
const Rect = require('./Rect');
const Text = require('./Text');

/**
 *  带边框的填充矩形，并且显示说明文本，在控制台下面，仅仅只能绘制四边形
 *
 *  +---------------------------+
 *  |                           |
 *  |            ABC            |
 *  |                           |
 *  |                           |
 *  +---------------------------+
 *
 */
class RectText extends Element {
  constructor(start, end, text) {
    super();
    // 参数必须是 point 类型的
    invariant(
      types.isPoint(start) && types.isPoint(end),
      'TCharts: constructor props of RectText should be (Point, Point, any), got (%s, %s, %s).',
      types.typeOf(start),
      types.typeOf(end),
      types.typeOf(text));
    // 校验通过，赋值属性
    this.start = start;
    this.end = end;
    this.text = text;
    this.box = {
      x1: Math.min(this.start.x, this.end.x),
      y1: Math.min(this.start.y, this.end.y),
      x2: Math.max(this.start.x, this.end.x),
      y2: Math.max(this.start.y, this.end.y),
    };

    this.initLayer();
  }

  clone = () => new RectText(this.start.clone(), this.end.clone(), this.text);

  toString = () => `RectText(${this.start}, ${this.end}, ${this.text})`;

  draw = () => {
    // 四个顶点
    const rect = new Rect(this.start, this.end);
    const center = this.center(); // 居中位置
    const text = new Text(new Point(center.x, center.y), this.text);

    // 合并图层
    return this.layer.merge(rect.draw(), text.draw());
  };

  get CLASSNAME() {
    return 'RectText';
  }
}

module.exports = RectText;


================================================
FILE: src/core/Text.js
================================================
/**
 * Created by hustcc.
 */

const evenly = require('evenly');
const { wordWidth, toString } = require('../utils/string');
const invariant = require('../utils/invariant');
const types = require('../utils/types');
const { fillMatrix } = require('../utils/array');
const Element = require('./Element');

/**
 * 一段文本（目前仅支持横向）
 *
 * hello world，这个是一个控制台图标库
 */
class Text extends Element {
  constructor(p, text, align = 'center') {
    super();
    invariant(
      types.isPoint(p),
      'TCharts: constructor props of Text should be (Point, any), got (%s, %s).',
      types.typeOf(p),
      types.typeOf(text));

    invariant(
      ['center', 'left', 'right'].indexOf(align) >= 0,
      'TCharts: constructor props `align` of Text should be one of [\'center\', \'left\', \'right\'], got %s.',
      align);
    this.p = p;
    this.text = toString(text);
    this.align = align;


    const textWidth = wordWidth(this.text);

    if (this.align === 'center') {
      // 居中显示
      const _width = evenly(textWidth, 2, 0);
      this.box = {
        x1: p.x - _width[0] + 1, // 因为当前 p 位置还可以存一个字符串
        y1: p.y,
        x2: p.x + _width[1],
        y2: p.y,
      };
    } else if (this.align === 'left') {
      // 局左显示
      this.box = {
        x1: p.x,
        y1: p.y,
        x2: p.x + textWidth - 1,
        y2: p.y,
      };
    } else {
      // 居右显示
      this.box = {
        x1: p.x - textWidth + 1,
        y1: p.y,
        x2: p.x,
        y2: p.y,
      };
    }

    this.initLayer();
  }

  clone = () => new Text(this.p, this.text);

  toString = () => `Text(${this.p}, ${this.text})`;

  draw = () => {
    const { width } = this.size();

    this.layer.ascii = fillMatrix(1, width, '');
    this.layer.ascii[0][0] = this.text;
    return this.layer;
  };

  get CLASSNAME() {
    return 'Text';
  }
}

module.exports = Text;


================================================
FILE: src/core/index.js
================================================
/**
 * Created by hustcc.
 */

const Axis = require('./Axis');
const Line = require('./Line');
const Point = require('./Point');
const Rect = require('./Rect');
const Text = require('./Text');
const RectText = require('./RectText');

module.exports = {
  Axis,
  Line,
  Point,
  Rect,
  Text,
  RectText,
};


================================================
FILE: src/index.js
================================================
/**
 * Created by hustcc.
 */

const Bar = require('./charts/Bar');
const Box = require('./charts/Box');
const HBar = require('./charts/HBar');
const Table = require('./charts/Table');

module.exports = {
  Box,
  Bar,
  HBar,
  Table,
};


================================================
FILE: src/utils/array.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

'use strict';


/**
 * fastest way to fill a array
 * here: https://jsperf.com/zeroarrayjs/10
 * @param len
 * @param val
 * @returns {Array}
 */
const fillArray = (len, val) => {
  const res = new Array(len);
  for (let i = 0; i < len; i += 1) {
    res[i] = val;
  }
  return res;
};

/**
 * Return a of val
 *
 * @param  {Number} `row` number of rows
 * @param  {Number} `col` number of columns
 * @param  {*} `val`
 * @return {*[][]} `matrix` of val
 */
const fillMatrix = (row, col, val) => {
  const res = new Array(row);
  for (let i = 0; i < row; i += 1) {
    res[i] = fillArray(col, val);
  }
  return res;
};

/**
 * deep clone array
 * @param arr
 * @returns {*}
 */
const arrayClone = (arr) => {
  let i;
  let copy;
  if (Array.isArray(arr)) {
    copy = arr.slice(0);
    for (i = 0; i < copy.length; i += 1) {
      copy[i] = arrayClone(copy[i]);
    }
    return copy;
  }
  return arr;
};

module.exports = {
  fillArray,
  fillMatrix,
  arrayClone,
};


================================================
FILE: src/utils/invariant.js
================================================
module.exports = require('invariant');


================================================
FILE: src/utils/number.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

const round = require('fixed-round');

const center = (x1, x2) => round((x1 + x2) / 2);

const floorCenter = (x1, x2) => Math.floor((x1 + x2) / 2);

const toPercent = (number, fixed = 2) => `${round(number * 100, fixed)}%`;


module.exports = {
  round,
  center,
  floorCenter,
  toPercent,
};


================================================
FILE: src/utils/string.js
================================================
/**
 * Created by hustcc.
 * Contract: i@hust.cc
 */

const WordWidth = require('word-width');
const types = require('./types');

const toString = (v) => {
  if (v === null) return 'null';
  if (v === undefined) return 'undefined';
  if (types.isNumber(v) || types.isString(v) || types.isBool(v)) return `${v}`;
  if (types.isArray(v) || types.isObject(v)) return JSON.stringify(v);
  return Object({}).toString.call(v);
};

const wordWidth = s => WordWidth(toString(s));

module.exports = {
  wordWidth,
  toString,
};


================================================
FILE: src/utils/types.js
================================================
/**
 * Created by hustcc.
 */

const VT = require('variable-type');
const what = require('what.js');


const isNumber = v => VT.number.check(v);

const isString = v => VT.string.check(v);

const isArray = v => VT.array.check(v);

const isObject = v => VT.object.check(v);

const isBool = v => VT.bool.check(v);

const isEmpty = v => VT.or([
  VT.null,
  VT.undefined
]).check(v);

const isPoint = v => v.CLASSNAME === 'Point';

const typeOf = (v) => {
  if (v && v.CLASSNAME) return v.CLASSNAME;
  return what(v);
};

module.exports = {
  isNumber,
  isString,
  isArray,
  isObject,
  isBool,
  isEmpty,
  isPoint,
  typeOf,
};


================================================
FILE: webpack.config.js
================================================
/**
 * Copyright (c) 2017 hustcc
 * License: ISC
 * GitHub: https://github.com/hustcc/tcharts.js
 **/

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'tcharts.min.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'TCharts',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  module: {
    loaders: [{
      test: /.js$/,
      loader: 'babel-loader'
    }]
  },
  devtool: 'source-map',
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      output: { comments: false },
      compress: { warnings: false }
    })
  ]
};