<style>
    .neo-netdown {
        color: black;
    }

    .circular-status-meter-common {
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
        width: auto;
    }

    .circular-status-meter-large {
        height: 100px;
    }

    .circular-status-meter-small {
        height: 50px;
    }

    .neo-gauge {
        display: inline-block;
    }

    .neo-oj-gauge {
        background-color: white;
    }
</style>


<div class="neo-netdown  oj-flex">
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="load1" color="green" step="1" outer-radius="0.5" label="[[lable1]]"
            min="0" max="5" value="[[load1]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large neo-oj-gauge">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Load Avg 1m</h5>
    </div>
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="load5" color="green" label="[[lable5]]" min="0" max="5" value="[[load5]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Load Avg 5m</h5>
    </div>
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="load15" color="green" label="[[lable15]]" min="0" max="5" value="[[load15]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Load Avg 15m</h5>
    </div>
    <div class="neo-gauge mysqldump oj-flex-item">
        <oj-status-meter-gauge readonly="true" inner-radius="0" id="mysqldump" color="red" min="0" max="1" value="[[mysqldump]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">mysqldump</h5>
    </div>
</div>

<div class="neo-netdown oj-flex">

    <div class="neo-gauge oj-flex-item" style="display:none">
        <oj-status-meter-gauge readonly="true" id="activeprocs" label="[[processes]]" color="green" min="0" max="10"
            value="[[activeprocs]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large"
            converter='{value:{
                "type":"text", 
                "options": {"style": "text"}'>
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Active Processes</h5>
    </div>
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="alltheprocs" label="[[processes]]" color="green" min="0" max="600"
            value="[[alltheprocs]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Server</h5>
    </div>

    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="apache2count" label="[[processes]]" color="green" min="0" max="150"
            value="[[apache2count]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Apache</h5>
    </div>

    <div class="neo-gauge oj-flex-item" style="display:none;">
        <oj-status-meter-gauge readonly="true" id="lastpid" color="green" min="7000" max="30000" value="[[lastpid]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Last PID</h5>
    </div>

    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="wolval" label="[[users]]" color="green" min="0" max="5000" value="[[wolval]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">WOL Total</h5>
    </div>
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" inner-radius="0" id="gzip" color="red" min="0" max="1" value="[[gzip]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">gzip</h5>
    </div>
</div>
<div class="neo-netdown oj-flex">
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" d="allcpus" label="[[cpu]]" metric-label="[[customMetricLabel]]" color="green"
            min="0" max="100" value="[[all]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large"
            readonly="true">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Server</h5>
    </div>
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="apache2" label="[[cpu]]" metric-label="[[customMetricLabel]]" color="green"
            min="0" max="100" value="[[apache2]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Apache</h5>
    </div>

    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="mysqld" readonly=true label="[[cpu]]" metric-label="[[customMetricLabel]]"
            color="green" min="0" max="100" value="[[mysqld]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">MySQL</h5>
    </div>

    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" inner-radius="0" id="rsync" color="red" min="0" max="1" value="[[rsync]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">rsync</h5>
    </div>
</div>

<div class="neo-netdown oj-flex">
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="diskusage" label="[[diskname]]" metric-label="[[customMetricLabel]]"
            color="green" min="0" max="100" value="[[diskusage]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Disk Usage</h5>
    </div>
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="freemem" label="[[kb]]" color="green" min="0" max="65842320" value="[[freemem]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Free Mem</h5>
    </div>
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" id="cachedmem" label="[[kb]]" color="green" min="0" max="65842320" value="[[cachedmem]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">Cached Mem</h5>
    </div>
    <div class="neo-gauge oj-flex-item">
        <oj-status-meter-gauge readonly="true" inner-radius="0" id="find" color="red" min="0" max="1" value="[[find]]"
            orientation="circular" class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common neo-netdown">find</h5>
    </div>

</div>