Hustcc Ant Financial · Data Experience Technology team

Many of the tools we use in development are CLI tools, such as Babel, ESLint, Webpack, Jest, etc. Console because of its particularity, its information expression only lies in a simple character.

The console’s character chart can effectively improve data visualization, improve the efficiency of information reception, and more beautiful. Such as:

/ * * ^ * * * * bar chart | A: 70 * * | | + -- -- -- + | | * | | | C: 50 * | | | + -- -- -- + * | | | | | * | | | B: 30 | | * | | | + -- -- -- + | | | * * | | | | | | | | | | | | | * | | | | | | | * + - + - + - + - + - + - + -- -- -- -- - > * * /Copy the code

Quick shooter quick start: github.com/ProtoTeam/t…

Introduce a,

Many console applications today can do color and simple animation to make the data display clearer and more beautiful, for example:

This is how a single test of a simple project urI-Parse looks on the console, and it’s pretty clean.

However, for the presentation of some data, only the beautification of color can not have a good effect, such as:

This is the result of two benchmark runs. In fact, if we were not limited to the console, we would like to use a ** bar graph ** to give a relative comparison, which is more intuitive.

What to do

What are we going to do? Clearly, we want to make a chart library under the console.

When we think of chart library, we should easily think of Echarts, G2, etc. In this way, the running environment of chart library is in the browser, and we can make full use of Canvas, SVG, CSS to make various layouts, styles, effects, and so on.

Let’s start with a picture:

Github.com/chartjs/Cha…

What graphics can we make for the console environment? Let me just name a few:

  • Table: Table
  • Bar: Bar chart
  • HBar: horizontal bar chart
  • Box: area map
  • DirTree: directory structure diagram

These are just a few examples I can think of.

Three, how to do?

The end result is a usable console chart library, but it may not be perfect!

convention

In order to do the above several console charts, and ** improve the graphics’ ability to adapt to different console environments **. Convention:

  • Graphics are drawn using only basic characters (characters on the keyboard)
  • No colors (some consoles do not support colors, also simplifying code)
  • namedtchartsTerminal Charts.

The principle of

Let me give you an example. Now there are many people playing mobile games. Before the release of mobile games online, they will be sent to the Radio, Film and Television Bureau for review. When the game is made, a 3D model of an existing character is attached to the character with a layer of clothing, which is the charge point — skin.

In some cases, when the skin of the art is attached to some characters, the skin size is too small, or the character’s chest is too big, resulting in nudity, in which case, the game will probably not be approved!

In this example, you can actually get a sense of the concept of layers, which is that the rendering of a character in the game has many layers, but what the end user sees is actually the top layer.

Similarly, in HTML div layouts, when the structure is stacked, you can use z-index to adjust the hierarchy so that the user can’t see different things.

Similarly, the browser’s diagram library has the concept of layers, one on top of the other, to create what the end user sees!

The basic principle of the development of console charts tcharts.js is also divided into different layers, the benefits lie in:

  • Easy to reuse layers;
  • Extending chart types is easy;
  • Clearer code;

The disadvantage, of course, is repeated drawing.

For example, the top bar chart can be divided into two layers according to the idea of layers:

  • Axis: The coordinate axes
  • The Rect: rectangle

The bar chart above can be divided into four layers:

1 layer Axis

^ | | | | | | | | | | + - + - + - + - + - + - + -- -- -- -- -- >Copy the code

3 the Rect

       +---+
       |   |
       |   |
       |   |
       |   |
       |   |
       |   |
       +---+
Copy the code

Then you can subdivide Axis into 2 lines and add coordinate Point; Rect can be split into four lines.

A layer of a layer of recursive like this, and finally the actual work, is in each of the corresponding coordinate points, draw a point. When all the points are drawn, the entire graph is displayed.

Four, tcharts. Js

In general, the basic principles are:

                        Point
                          |
                        Line
                        /  \
           Text   +   Rect   Axis
              \       /  \     |
               RectText    \   |
                    \      |   |
                Bar / HBar / Table / Box
Copy the code

From point -> line -> surface, expand the graphics Layer by Layer, then introduce Layer to assemble these elements, and finally combine the layers to produce the final graphics.

The class diagram structure of the entire tchart.js project is shown in the figure below. :

Currently export 4 graphics!

The dependencies of the entire project code file are as follows (generated by Webstorm, some unnecessary lines cannot be deleted) :

The code is here: github.com/ProtoTeam/t… . Due to time constraints, only 4 charts have been completed so far, but it should not be difficult to further expand and the code is not optimized. I hope you can join us.

Post several effects (possibly under some page CSS, resulting in incomplete alignment!) :

+--------------+----------------------+---------------------+ | | | | | | | | | | | | | | | | | | | | | | | | | | C:25% | Hello:25% | | | | | | | | | | A:25% | | | | | | | | | | | | +----------------------+---------------------+ | | | | | |  | | | | | B:25% | | | | | | | +--------------+--------------------------------------------+ ^ | +---------------+ | D:30| +---------------+ | +------------------------------------+ | C:70| +------------------------------------+ | +-----------------------+ | B:45| +-----------------------+ | +----------------------------------------------------+ | A:100| +----------------------------------------------------+ | +-----------------------------------------------------> +----+---------------+--------------------+ | id | name | birthday | +----+---------------+--------------------+ | #1 | xiaowei | 1992-08-01 | +----+---------------+--------------------+ | #2 | hello | 1992-09-20 | +----+---------------+--------------------+ | #3 | tcharts | 2017-06-27 | +----+---------------+--------------------+ | #4 | world | | +----+---------------+--------------------+Copy the code

If you are interested in TCharts, you can follow the column or send your resume to ‘xiaowei. WZW ####alibaba-inc.com’. Replace (‘####’, ‘@’)

Original address: github.com/ProtoTeam/b…