Merge pull request #8 from luizpicolo/newCharts

New charts
This commit is contained in:
Luiz F Picolo 2021-11-03 21:59:20 -04:00 committed by GitHub
commit d51197e5ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 9 deletions

16
app.rb
View File

@ -9,14 +9,20 @@ Time.now.utc.localtime("-04:00")
get '/' do get '/' do
@transfer_rate = [ @transfer_rate = [
{'name': 'Download Rate', 'data': Rate.transfer('download')}, {'name': 'Download', 'data': Rate.transfer('download')},
{'name': 'Upload Rate', 'data': Rate.transfer('upload')} {'name': 'Upload', 'data': Rate.transfer('upload')}
] ]
@download_rate = [ @download_rate = [
{'name': 'Max Download Rate', 'data': Rate.extremes(:maximum, :download)}, {'name': 'Max', 'data': Rate.extremes(:maximum, :download)},
{'name': 'Min Download Rate', 'data': Rate.extremes(:minimum, :download)}, {'name': 'Min', 'data': Rate.extremes(:minimum, :download)},
{'name': 'Everage Download Rate', 'data': Rate.extremes(:average, :download)} {'name': 'Everage', '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 erb :home

View File

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

View File

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

View File

@ -2,6 +2,11 @@
# yarn lockfile v1 # 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: chart.js@^2.9.3:
version "2.9.4" version "2.9.4"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"

View File

@ -1,3 +1,17 @@
<h1>Data Transfer Test</h1> <div class="container">
<%= bar_chart @transfer_rate, xtitle: "Rate", ytitle: "Datetime", id: "rate_transfer-chart", height: "700px" %> <h1>Tranfer data Test</h1>
<%= column_chart @download_rate, xtitle: "Datetime", ytitle: "Rate", id: "download_rate-chart", height: "700px" %> <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>

View File

@ -5,9 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="node_modules/chart.js/dist/Chart.min.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"> <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="https://www.google.com/jsapi"></script>
<script src="node_modules/chart.js/dist/Chart.bundle.js"></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> <script src="node_modules/chartkick/dist/chartkick.min.js"></script>
<title>Data Transfer Test</title> <title>Data Transfer Test</title>
</head> </head>