luizpicolo/data-transfer-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added bootstrap

Browse Source
This commit is contained in:
Luiz F Picolo 2021-11-03 21:35:29 -04:00
parent 0591c876ae
commit 3e126d9bb2
5 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/package.json
View File

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

5
public/style.css
View File

@ -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;

5
public/yarn.lock
View File

@ -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"

20
views/home.erb
View File

@ -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" %>
<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>

2
views/layout.erb
View File

@ -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>