blessed-contrib

blessed-contrib Build dashboards (or any other application) using ascii/ansi art and javascript. Friendly to terminals, ssh and developers. Extends blessed with custom drawille and other widgets. You should also check WOPR: a markup for creating terminal reports, presentations and infographics. Contributors: Yaron Naveh (@YaronNaveh) Chris (@xcezzz) Miguel Valadas (@mvaladas) Liran Tal (@lirantal) Demo (full size): (source code) Running the demo git clone https://github.com/yaronn/blessed-contrib.git cd blessed-contrib npm install node ./examples/dashboard.js Works on Linux, OS X and Windows. For Windows follow the pre requisites. Installation (to build custom projects) Please use the latest stable version of Node.js LTS and install blessed-contrib and its peer dependency blessed as follows: npm install blessed blessed-contrib Usage You can use any of the default widgets of blessed (texts, lists and etc) or the widgets added in blessed-contrib (described below). A layout is optional but useful for dashboards. The widgets in blessed-contrib follow the same usage pattern: var blessed = require('blessed') , contrib = require('blessed-contrib') , screen = blessed.screen() , line = contrib.line( { style: { line: "yellow" , text: "green" , baseline: "black"} , xLabelPadding: 3 , xPadding: 5 , label: 'Title'}) , data = { x: ['t1', 't2', 't3', 't4'], y: [5, 1, 7, 5] } screen.append(line) //must append before setting data line.setData([data]) screen.key(['escape', 'q', 'C-c'], function(ch, key) { return process.exit(0); }); screen.render() See below for a complete list of widgets. Widgets Line Chart Bar Chart Stacked Bar Chart Map Gauge Stacked Gauge Donut LCD Display Rolling Log Picture Sparkline Table Tree Markdown Line Chart var line = contrib.line( { style: { line: "yellow" , text: "green" , baseline: "black"} , xLabelPadding: 3 , xPadding: 5 , showLegend: true , wholeNumbersOnly: false //true=do not show fraction in y axis , label: 'Title'}) var series1 = { title: 'apples', x: ['t1', 't2', 't3', 't4'], y: [5, 1, 7, 5] } var series2 = { title: 'oranges', x: ['t1', 't2', 't3', 't4'], y: [2, 1, 4, 8] } screen.append(line) //must append before setting data line.setData([series1, series2]) Examples: simple line chart, multiple lines, 256 colors Bar Chart var bar = contrib.bar( { label: 'Server Utilization (%)' , barWidth: 4 , barSpacing: 6 , xOffset: 0 , maxHeight: 9}) screen.append(bar) //must append before setting data bar.setData( { titles: ['bar1', 'bar2'] , data: [5, 10]}) Stacked Bar Chart bar = contrib.stackedBar( { label: 'Server Utilization (%)' , barWidth: 4 , barSpacing: 6 , xOffset: 0 //, maxValue: 15 , height: "40%" , width: "50%" , barBgColor: [ 'red', 'blue', 'green' ]}) screen.append(bar) bar.setData( { barCategory: ['Q1', 'Q2', 'Q3', 'Q4'] , stackedCategory: ['US', 'EU', 'AP'] , data: [ [ 7, 7, 5] , [8, 2, 0] , [0, 0, 0] , [2, 3, 2] ] }) Map var map = contrib.map({label: 'World Map'}) map.addMarker({"lon" : "-79.0000", "lat" : "37.5000", color: "red", char: "X" }) Gauge var gauge = contrib.gauge({label: 'Progress', stroke: 'green', fill: 'white'}) gauge.setPercent(25) Stacked Gauge Either specify each stacked portion with a percent and stroke... var gauge = contrib.gauge({label: 'Stacked '}) gauge.setStack([{percent: 30, stroke: 'green'}, {percent: 30, stroke: 'magenta'}, {percent: 40, stroke: 'cyan'}]) Or, you can just supply an array of numbers and random colors will be chosen. var gauge = contrib.gauge({label: 'Stacked Progress'}) gauge.setStack([30,30,40]) Donut var donut = contrib.donut({ label: 'Test', radius: 8, arcWidth: 3, remainColor: 'black', yPadding: 2, data: [ {percent: 80, label: 'web1', color: 'green'} ] }); Data passed in uses percent and label to draw the donut graph. Color is optional and defaults to green. donut.setData([ {percent: 87, label: 'rcp','color': 'green'}, {percent: 43, label: 'rcp','color': 'cyan'}, ]); Updating the donut is as easy as passing in an array to setData using the same array format as in the constructor. Pass in as many objects to the array of data as you want, they will automatically resize and try to fit. However, please note that you will still be restricted to actual screen space. You can also hardcode a specific numeric into the donut's core display instead of the percentage by passing an percentAltNumber property to the data, such as: var donut = contrib.donut({ label: 'Test', radius: 8, arcWidth: 3, remainColor: 'black', yPadding: 2, data: [ {percentAltNumber: 50, percent: 80, label: 'web1', color: 'green'} ] }); See an example of this in one of the donuts settings on ./examples/donut.js. LCD Display var lcd = contrib.lcd( { segmentWidth: 0.06 // how wide are the segments in % so 50% = 0.5 , segmentInterval: 0.11 // spacing between the segments in % so 50% = 0.550% = 0.5 , strokeWidth: 0.11 // spacing between the segments in % so 50% = 0.5 , elements: 4 // how many elements in the display. or how many characters can be displayed. , display: 321 // what should be displayed before first call to setDisplay , elementSpacing: 4 // spacing between each element , elementPadding: 2 // how far away from the edges to put the elements , color: 'white' // color for the segments , label: 'Storage Remaining'}) lcd.setDisplay(23 + 'G'); // will display "23G" lcd.setOptions({}) // adjust options at runtime Please see the exampl