<div class="status-cards">
  <div class="card cpu-card">
    <h3>CPU Usage</h3>
    <canvas id="cpuChart"></canvas>
  </div>
  <div class="card ram-card">
    <h3>RAM Usage</h3>
    <canvas id="ramChart"></canvas>
  </div>
  <div class="card disk-card">
    <h3>Disk Usage</h3>
    <canvas id="diskChart"></canvas>
  </div>
</div>
<div class="network-card">
  <div class="network-half">
    <h3>Outgoing Network Data</h3>
    <button onclick="fetchAndRenderNetworkData()">Refresh Data</button>
    <canvas id="networkOutChart"></canvas>
  </div>
  <div class="network-half">
    <h3>Incoming Network Data</h3>
    <button onclick="fetchAndRenderNetworkData()">Refresh Data</button>
    <canvas id="networkInChart"></canvas>
  </div>
</div>
<div class="card uptime-card">
  <h3>Uptime</h3>
  <canvas id="uptimeChart"></canvas>
</div>

<script>
  window.historicalStatusData = <%= @historical_status.to_json %>;
  window.currentStatusData = <%= @current_status.to_json %>;
</script>
<script src="./js/overall_network_status.js"></script>