Added bootstrap

public/package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "bootstrap": "^5.1.3",
     "chart.js": "^2.9.3",
     "chartkick": "^3.2.0"
   }

public/style.css

@@ -1,6 +1,5 @@
 body {
   font-family: 'Raleway', sans-serif;
-  max-width: 990px;
   margin: 30px auto;
 }
 
@@ -8,6 +7,10 @@ h1 {
   text-align: center !important;
 }
 
+.container {
+  margin-top: 30px;
+}
+
 section h1 {
   font-size: 16px;
   display: inline;

public/yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+bootstrap@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
+
 chart.js@^2.9.3:
   version "2.9.4"
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"

views/home.erb

@@ -1,3 +1,17 @@
-<h1>Data Transfer Test</h1>
+<div class="container">
+  <h1>Tranfer data Test</h1>
+  <div class="row row-cols-1 row-cols-sm-1 row-cols-md-3">
+    <div class="col">
+      <h2 class="text-center">Transfer Rate</h2>
       <%= bar_chart @transfer_rate, xtitle: "Rate", ytitle: "Datetime", id: "rate_transfer-chart", height: "700px" %>
-<%= column_chart @download_rate, xtitle: "Datetime", ytitle: "Rate", id: "download_rate-chart", height: "700px" %>
+    </div>
+    <div class="col">
+      <h2 class="text-center">Download Rate</h2>
+      <%= bar_chart @download_rate, xtitle: "Rate", ytitle: "Datetime", id: "download_rate-chart", height: "700px" %>
+    </div>
+    <div class="col">
+      <h2 class="text-center">Upload Rate</h2>
+      <%= bar_chart @upload_rate, xtitle: "Rate", ytitle: "Datetime", id: "upload_rate-chart", height: "700px" %>
+    </div>
+  </div>
+</div>

views/layout.erb

@@ -5,9 +5,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="node_modules/chart.js/dist/Chart.min.css">
+  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
   <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
   <script src="https://www.google.com/jsapi"></script>
   <script src="node_modules/chart.js/dist/Chart.bundle.js"></script>
+  <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
   <script src="node_modules/chartkick/dist/chartkick.min.js"></script>
   <title>Data Transfer Test</title>
 </head>