From b25ad4371de09c70f50aaa84985aab943b9669fc Mon Sep 17 00:00:00 2001
From: Luiz Picolo <luizpicolo@gmail.com>
Date: Wed, 3 Nov 2021 21:33:38 -0400
Subject: [PATCH 1/3] Added upload rate chart

---
 app.rb | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app.rb b/app.rb
index c6fe0a8..15119a5 100644
--- a/app.rb
+++ b/app.rb
@@ -17,6 +17,11 @@ get '/' do
     {'name': 'Max Download Rate', 'data': Rate.extremes(:maximum, :download)},
     {'name': 'Min Download Rate', 'data': Rate.extremes(:minimum, :download)},
     {'name': 'Everage Download Rate', 'data': Rate.extremes(:average, :download)}
+
+  @upload_rate = [
+    {'name': 'Max', 'data': Rate.extremes(:maximum, :upload)},
+    {'name': 'Min', 'data': Rate.extremes(:minimum, :upload)},
+    {'name': 'Everage', 'data': Rate.extremes(:average, :upload)}
   ]
 
   erb :home

From 0591c876aeb2ee6d2dea0d98b32188fe29c594fd Mon Sep 17 00:00:00 2001
From: Luiz Picolo <luizpicolo@gmail.com>
Date: Wed, 3 Nov 2021 21:35:11 -0400
Subject: [PATCH 2/3] changed name of labels

---
 app.rb | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app.rb b/app.rb
index 15119a5..9287fc9 100644
--- a/app.rb
+++ b/app.rb
@@ -9,14 +9,15 @@ Time.now.utc.localtime("-04:00")
 
 get '/' do
   @transfer_rate = [
-    {'name': 'Download Rate', 'data': Rate.transfer('download')},
-    {'name': 'Upload Rate', 'data': Rate.transfer('upload')}
+    {'name': 'Download', 'data': Rate.transfer('download')},
+    {'name': 'Upload', 'data': Rate.transfer('upload')}
   ]
 
   @download_rate = [
-    {'name': 'Max Download Rate', 'data': Rate.extremes(:maximum, :download)},
-    {'name': 'Min Download Rate', 'data': Rate.extremes(:minimum, :download)},
-    {'name': 'Everage Download Rate', 'data': Rate.extremes(:average, :download)}
+    {'name': 'Max', 'data': Rate.extremes(:maximum, :download)},
+    {'name': 'Min', 'data': Rate.extremes(:minimum, :download)},
+    {'name': 'Everage', 'data': Rate.extremes(:average, :download)}
+  ]
 
   @upload_rate = [
     {'name': 'Max', 'data': Rate.extremes(:maximum, :upload)},

From 3e126d9bb2fcb9ab7686d2dd09ef2244a00ef240 Mon Sep 17 00:00:00 2001
From: Luiz Picolo <luizpicolo@gmail.com>
Date: Wed, 3 Nov 2021 21:35:29 -0400
Subject: [PATCH 3/3] Added bootstrap

---
 public/package.json |  1 +
 public/style.css    |  5 ++++-
 public/yarn.lock    |  5 +++++
 views/home.erb      | 20 +++++++++++++++++---
 views/layout.erb    |  2 ++
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/public/package.json b/public/package.json
index 4c56a89..9d73c99 100644
--- a/public/package.json
+++ b/public/package.json
@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "bootstrap": "^5.1.3",
     "chart.js": "^2.9.3",
     "chartkick": "^3.2.0"
   }
diff --git a/public/style.css b/public/style.css
index 7f7cc6b..3d5a568 100644
--- a/public/style.css
+++ b/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;
diff --git a/public/yarn.lock b/public/yarn.lock
index e2982bd..d2f3a69 100644
--- a/public/yarn.lock
+++ b/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"
diff --git a/views/home.erb b/views/home.erb
index 85c9061..932168d 100644
--- a/views/home.erb
+++ b/views/home.erb
@@ -1,3 +1,17 @@
-<h1>Data Transfer Test</h1>
-<%= 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" %>
\ No newline at end of file
+<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" %>
+    </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>
\ No newline at end of file
diff --git a/views/layout.erb b/views/layout.erb
index e54e309..fc57c32 100644
--- a/views/layout.erb
+++ b/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>