io.html

<io-panel>
    <pigod-panel>
        <yield to="title">
            Disk IO (<span class="io_read">read</span>/<span class="io_write">write</span>) &nbsp;
            <span class="pull-right"><span class="io_read">{ io_read }</span> / <span class="io_write">{ io_write }</span></span>
        </yield>
        <yield to="outside-body">
            <canvas name="disk_chart" width="420" height="90" class="smoothchart"></canvas>
        </yield>
        <yield to="body">
            <riot-table rows={processes} context={model} defaultsort="^WRITE">
                <riot-col key="USER" header="User" />
                <riot-col key="TID" header="TID" cls="text-right"/>
                <riot-col key="READ" header="Read" cls="text-right disk read highlight"/>
                <riot-col key="WRITE" header="Write" cls="text-right disk write highlight"/>
                <riot-col key="IO" header="IO%" />
                <riot-col key="COMMAND" header="Command" tpl={'<div class="truncate">{row.COMMAND}</div>'} />
            </riot-table>
        </yield>
    </pigod-panel>
    
    <style scoped>
        td.column-TID {
            min-width: 45px;
        }
        .disk.read,.disk.write {
            width: 78px;
        }
        .disk.read.highlight {
            background: rgba(62,111,90, 0.15);
        }
        .disk.write.highlight {
            background: rgba(222,104,104, 0.15);
        }
        span.io_read {
            color: #3e6f5a;
        }
        
        span.io_write {
            color: #de6868;
        }
    </style>
    
    <script type="text/es6arrow">
        var readSeries = new TimeSeries();
        var writeSeries = new TimeSeries();
        var canvas;

        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.disk_chart, 500);
            
            stretchCanvas(this.disk_chart);
        });
        
        start() {
            opts.pubsub.subscribe('iotop', this.handler = (data) => this.updateProc(data));
        }
        
        stop() {
            opts.pubsub.unsubscribe('iotop', this.handler);
        }
        
        updateProc(data) {
            var now = Date.now();
            
            readSeries.append(now, data.total_read);
            writeSeries.append(now, data.total_write);
            
            this.update({
                io_read : data.io_read,
                io_write : data.io_write,
                processes: data.processes
            });
        }
    </script>
</io-panel>