How to use the blessed-contrib.grid function in blessed-contrib

else{
        blockedTWs[blocked_list[1]].push(blocked_list[2])
      }
      callback(null)
    },function(err){
      if(err){
        console.log(err);
      }
     else{resolve(blockedTWs)}
    })
  })
})}

// set up elements of the interface.

var grid = new contrib.grid({
  rows: 6,
  cols: 6,
  screen: screen
});

var table_timeline =  grid.set(0.5, 1, 4.3, 5, contrib.table, 
  {keys: true
  , vi:true
  , style:{border:{ fg:'blue'}}
  , scrollbar: true
  , label: "Timeline"
  , columnWidth:[200]})
, box_generic_dashboard = grid.set(2,2, 1.5, 2,blessed.box,{
      top: 'center',
      left: 'center',
      width: '50%',

create(options) {
    if (module.exports.screen) throw new Error('Screen already created!');

    const screen = module.exports.screen = blessed.screen({
      autoPadding: true,
      smartCSR: true,
    });
    const grid = module.exports.grid = new contrib.grid({rows: 4, cols: 5, screen});

    // Set up widgets.
    widgets.streamThroughput = grid.set(...positions.streamThroughput, contrib.line, {
      label: "Stream Throughput (max last 5 minutes)",
      style: {
        line: "red",
        text: "green",
        baseline: "white"
      },
      showNthLabel: 60
    });

    widgets.totalThroughput = grid.set(...positions.totalThroughput, contrib.line, {
      label: "Total Throughput (max last 5 minutes)",
      style: {
        line: "green",

import * as contrib from 'blessed-contrib'

import { generate } from 'qrcode-terminal'

import {
  Wechaty,
}               from '../../src/'

const screen = blessed.screen({
  smartCSR:     true,
  fullUnicode:  true,  // https://github.com/chjj/blessed/issues/226#issuecomment-188777457
})

// create layout and widgets

const grid = new contrib.grid({rows: 12, cols: 12, screen: screen})

/**
 * Donut Options
 *   self.options.radius = options.radius || 14; // how wide is it? over 5 is best
 *   self.options.arcWidth = options.arcWidth || 4; //width of the donut
 *   self.options.yPadding = options.yPadding || 2; //padding from the top
 */
const donut = grid.set(8, 8, 4, 2, contrib.donut,
  {
  label: 'Percent Donut',
  radius: 16,
  arcWidth: 4,
  yPadding: 2,
  data: [{label: 'Storage', percent: 87}],
})

var blessed = require('blessed')
 , contrib = require('blessed-contrib')
 , screen = blessed.screen()
 , grid = new contrib.grid({rows: 2, cols: 4, screen: screen})

var times = [], hist = {};

var labelStyle = {
    fg: "white",
    bold: true
}

// grid.set(row, col, rowSpan, colSpan, obj, opts)
var table = grid.set(0, 0, 1, 2, contrib.table,
 { keys: true
 , fg: 'white'
 , selectedFg: 'white'
 , selectedBg: 'blue'
 , interactive: true
 , label: 'JVM Processes (Enter=Monitor, Del=Terminate)'

initScreen () {
    this.screen = blessed.screen({
      title: this.title,
      fullUnicode: true,
      dockBorders: true,
      smartCSR: true
    })

    // initialize 12x12 grid
    // eslint-disable-next-line new-cap
    this.grid = new contrib.grid({ rows: 12, cols: 12, hideBorder: true, screen: this.screen })
  }

const Grid = (function () {
  const grid = new contrib.grid({
    rows: 5,
    cols: 8,
    screen: Screen,
  });

  return grid;
}());

var nginxLogFile = '/var/log/nginx/access.log';

const blessed = require('blessed'),
	contrib = require('blessed-contrib'),
	screen = blessed.screen(),
	NginxParser = require('nginxparser'),
	request = require('request'),
	UAparser = require('ua-parser-js');

var limit = 100;
var grid = new contrib.grid({rows: 12, cols: 12, screen: screen})


//grid.set(row, col, rowSpan, colSpan, obj, opts)
var map = grid.set(0, 0, 12, 10, contrib.map, {label: 'Latest ' + limit + ' visitors'})
var countryLog = grid.set(0, 10, 5, 2, contrib.log, { fg: "green", label: 'Country', height: "20%", tags: true, border: { type: "line", fg: "cyan"}});
var browserLog = grid.set(5, 10, 3, 2, contrib.log, { fg: "green", label: 'Browser', height: "20%", tags: true, border: { type: "line", fg: "cyan"}});
var opereatigSystemLog = grid.set(8, 10, 4, 2, contrib.log, { fg: "green", label: 'Operating System', height: "20%", tags: true, border: { type: "line", fg: "cyan"}});
screen.render();


var markers = [];

var createMarker = function(lon, lat) {
	if (markers.length > limit) {
		markers.shift();
	}

create() {
    this.grid = new contrib.grid({
      rows: 8,
      cols: 1,
      label: this.label,
      screen: this.screen
    });

    this.price = this.grid.set(0, 0, 2, 1, blessed.box, {
      align: 'center',
      label: 'Current ETH price'
    });

    eth.getEthPrices()
      .then(data => {
	let minY = _(data.data.prices).reverse().map('price').map(parseFloat).value();
	minY = _.min(minY);
	minY -= 0.025* minY;

private createTreeElement(box: Widgets.BoxElement) {
    const grid = new contrib.grid({
      screen: box,
      rows:   12,
      cols:   12,
    })

    const tree =  grid.set(
      0, 0, 12, 12,
      contrib.tree,
      {
        style:    { text: 'red' },
        template: { lines: true },
        label:    ' Filesystem Tree ',
      },
    )
    tree.on('click', () => tree.focus())
    return tree