diskfree.html

<diskfree-panel>
    <pigod-panel>
        <yield to="title">
            Disk Usage ({last_udpated})
        </yield>
        <yield to="body">
            <riot-table rows={rows} defaultsort="^Use">
                <riot-col key="Filesystem" />
                <riot-col key="Size" cls="text-right"/>
                <riot-col key="Used" cls="text-right"/>
                <riot-col key="Avail" cls="text-right"/>
                <riot-col key="Use" header="Use%" cls="text-right" 
                    tpl={'{row.Use}<div class="use-bar" style="width: {row.Use}"></div>'} />
                <riot-col key="Mountedon" header="Mounted on"/>
            </riot-table>
        </yield>
    </pigod-panel>
    
    <style scoped>
        .column-Use .use-bar {
            background-color: rgba(51, 122, 183, 0.25);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
        }
        td.column-Use {
            min-width: 120px;
        }
        td.column-Use raw {
            display: block;
            position: relative;
        }
    </style>
    
    <script type="text/es6arrow">      
        start() {
            opts.pubsub.subscribe('diskfree', this.handler = data => this.updateProc(data));
        }
        
        stop() {
            opts.pubsub.unsubscribe('diskfree', this.handler);
        }
        
        updateProc(data) {
            this.update({
                last_udpated : new Date().toLocaleString(),
                rows : data.rows
            });
        }
        
    </script>
</diskfree-panel>