maas_cpu-idle-percent.html

<div id='maas_cpu-idle-percent'>
    <h3>MAAS CPU Idle Percent</h3>
    <div>
      <p>
        Description:<br><br>
        Displays the percentage of the average idle CPU amount over time
      </p>
      <br>
      <p>
        Tag: <br>
        <pre><code class='html'>&lt;hedwig-graph data-type="MAAS_cpu" data-field="idle_percent_average" data-height="500" data-width="600" data="[ someBoundData ]" &gt;&lt;/hedwig-graph&gt;</code></pre>
      </p>
      <br>
      <p>Sample data structure</p>
      <pre><code>
[{
    "mean": 15.3,
    "time": "2018-11-24T18:58:21Z"
},
{
    "mean": 15.3,
    "time": "2018-11-25T23:58:21Z"
},
{
    "mean": 15.3,
    "time": "2018-11-26T02:58:21Z"
},
{
    "mean": 35.2,
    "time": "2018-11-27T10:58:21Z"
}]
        </code></pre>
        <br><br>
        <p>
            Renders: <br>
          </p>
          <script>
                var mock = [{
                    "mean": 15.3,
                    "time": "2018-11-24T18:58:21Z"
                },
                {
                    "mean": 15.3,
                    "time": "2018-11-25T23:58:21Z"
                },
                {
                    "mean": 15.3,
                    "time": "2018-11-26T02:58:21Z"
                },
                {
                    "mean": 35.2,
                    "time": "2018-11-27T10:58:21Z"
                }];

              document.write('<hedwig-graph data-type="MAAS_cpu" data-field="idle_percent_average" data-height="500" data-width="600" data-graph=' + JSON.stringify(mock) + '></hedwig-graph>');
          </script>

          <p>Options</p>
          <table class='hxTable hxTable--condensed'>
            <thead>
              <tr>
                <th>Name</th>
                <th>Required</th>
                <th>Default Value</th>
              </tr>
            </thead>
            <tbody>
                <tr>
                  <td>Type</td>
                  <td>yes</td>
                  <td>MAAS_cpu</td>
                </tr>
                <tr>
                  <td>Field</td>
                  <td>yes</td>
                  <td>idle_percent_average</td>
                </tr>
              <tr>
                <td>Margin</td>
                <td>no</td>
                <td>{ top: 50, right: 50, bottom: 50, left: 50 }</td>
              </tr>
              <tr>
                <td>Height</td>
                <td>no</td>
                <td>200</td>
              </tr>
              <tr>
                <td>Weight</td>
                <td>no</td>
                <td>600</td>
              </tr>
              <tr>
                  <td>Line Color</td>
                  <td>no</td>
                  <td>#0c7c84</td>
                </tr>
            </tbody>
          </table>
    </div>
</div>