net.html

<net-panel>
    <pigod-panel>
        <yield to="title">
            Network (<span class="net_read">receive</span>/<span class="net_write">send</span>) &nbsp;
            <span class="pull-right">
                <span class="net_read">{ tot_recv } K/s</span> / <span class="net_write">{ tot_sent } K/s</span>
            </span>
        </yield>
        <yield to="outside-body">
            <canvas name="io_chart" width="420" height="90" class="smoothchart"></canvas>
        </yield>
        <yield to="body">
            <riot-table rows={processes} context={model} defaultsort="^sent">
                <riot-col key="user" header="User" tpl={'<div class="truncate">{row.user}</div>'} />
                <riot-col key="PID" header="PID" cls="text-right" 
                    tpl={'<a href="#">{row.PID}</a>'} 
                    cellclick={ parent.model.linkClick } />
                <riot-col key="recv" header="Recv. K/s" cls="text-right read highlight"/>
                <riot-col key="sent" header="Sent K/s" cls="text-right write highlight"/>
                <riot-col key="program" header="Command" 
                    tpl={'<div class="truncate">{row.program}</div>'} />
            </riot-table>
        </yield>
    </pigod-panel>
    
    <style scoped>
        td.column-PID {
            min-width: 45px;
        }
        td.column-user {
            max-width: 120px;
        }
        .read,.write {
            width: 85px;
        }
        .read.highlight {
            background: rgba(62,111,90, 0.15);
        }
        .write.highlight {
            background: rgba(222,104,104, 0.15);
        }
        span.net_read {
            color: #3e6f5a;
        }
        
        span.net_write {
            color: #de6868;
        }
    </style>
    
    <script type="text/es6arrow">
        var readSeries = new TimeSeries();
        var writeSeries = new TimeSeries();

        this.on('panelmount', function () {
            var chart = new SmoothieChart({
                millisPerPixel:500,
                minValue: 0,
                //minValueScale:1.05,
                yMinFormatter: () => '',
                yMaxFormatter: (max, prec) => parseFloat(max).toFixed(prec) + ' K/s',
                maxValueScale:1.05,
                grid:{
                    fillStyle:'#e2e2e2',
                    strokeStyle:'rgba(0,0,0,0.20)',
                    sharpLines:true,
                    millisPerLine:10000,
                    verticalSections:5
                },
                labels:{
                    fillStyle:'#000000',
                    fontSize:14,
                    precision:1
                },
                tooltip: true,
                timestampFormatter:SmoothieChart.timeFormatter
            });

            chart.addTimeSeries(readSeries, { lineWidth:1.2, strokeStyle:'#3e6f5a', fillStyle:'rgba(62,111,90, 0.15)' });
            chart.addTimeSeries(writeSeries, { lineWidth:1.2, strokeStyle:'#de6868',fillStyle:'rgba(222,104,104, 0.15)' });
            chart.streamTo(this.io_chart, 500);
            
            stretchCanvas(this.io_chart);
        });
        
        start() {
            opts.pubsub.subscribe('nettop', this.handler = (data) => this.updateProc(data));
        }
        
        stop() {
            opts.pubsub.unsubscribe('nettop', this.handler);
        }
        
        updateProc(data) {
            var now = Date.now();
            readSeries.append(now, data.tot_recv);
            writeSeries.append(now, data.tot_sent);
            this.update(data);
        }
        
        linkClick(pid, row) {
            var pid = parseInt(pid);
            if (row && pid) {
                if (confirm('Kill pid ' + pid + ' (' + row.program + ')?')) {
                    opts.pubsub.publish('pidkill', { pid: pid });
                }
            }
        }
    </script>
</net-panel>