diff options
| -rw-r--r-- | result/index.html | 74 | ||||
| -rw-r--r-- | result/krafcik.css | 4 | ||||
| -rw-r--r-- | result/krafcik.js | 7 |
3 files changed, 49 insertions, 36 deletions
diff --git a/result/index.html b/result/index.html index a6b057b..1d61ce7 100644 --- a/result/index.html +++ b/result/index.html @@ -45,40 +45,46 @@ </div> </div> - <ul class="nav nav-tabs" id="tab-menu" role="tablist"> - <li class="nav-item"> - <a class="nav-link" id="styles-tab" data-toggle="tab" href="#styles" role="tab" aria-controls="styles" aria-selected="false"> - Rozkład stylów - </a> - </li> - <li class="nav-item"> - <a class="nav-link" id="abv-ratings-tab" data-toggle="tab" href="#abv-ratings" role="tab" aria-controls="abv-ratings" aria-selected="false"> - ABV / l. ocen - </a> - </li> - <li class="nav-item"> - <a class="nav-link" id="abv-average-tab" data-toggle="tab" href="#abv-average" role="tab" aria-controls="abv-average" aria-selected="false"> - ABV / ocena - </a> - </li> - <li class="nav-item"> - <a class="nav-link" id="ratings-average-tab" data-toggle="tab" href="#ratings-average" role="tab" aria-controls="ratings-average" aria-selected="false"> - L. ocen / ocena - </a> - </li> - </ul> - <div class="tab-content" id="tab-content"> - <div class="tab-pane fade" id="styles" role="tabpanel" aria-labelledby="styles-tab"> - <canvas id="styles-chart" width="100%"></canvas> - </div> - <div class="tab-pane fade" id="abv-ratings" role="tabpanel" aria-labelledby="abv-ratings-tab"> - <canvas id="abv-ratings-chart" width="100%"></canvas> - </div> - <div class="tab-pane fade" id="abv-average" role="tabpanel" aria-labelledby="abv-average-tab"> - <canvas id="abv-average-chart" width="100%"></canvas> + <div class="card"> + <div class="card-header"> + <ul class="nav nav-tabs card-header-tabs" id="tab-menu" role="tablist"> + <li class="nav-item"> + <a class="nav-link" id="styles-tab" data-toggle="tab" href="#styles" role="tab" aria-controls="styles" aria-selected="false"> + Rozkład stylów + </a> + </li> + <li class="nav-item"> + <a class="nav-link" id="abv-ratings-tab" data-toggle="tab" href="#abv-ratings" role="tab" aria-controls="abv-ratings" aria-selected="false"> + ABV / l. ocen + </a> + </li> + <li class="nav-item"> + <a class="nav-link" id="abv-average-tab" data-toggle="tab" href="#abv-average" role="tab" aria-controls="abv-average" aria-selected="false"> + ABV / ocena + </a> + </li> + <li class="nav-item"> + <a class="nav-link" id="ratings-average-tab" data-toggle="tab" href="#ratings-average" role="tab" aria-controls="ratings-average" aria-selected="false"> + L. ocen / ocena + </a> + </li> + </ul> </div> - <div class="tab-pane fade" id="ratings-average" role="tabpanel" aria-labelledby="ratings-average-tab"> - <canvas id="ratings-average-chart" width="100%"></canvas> + <div class="card-content"> + <div class="tab-content" id="tab-content"> + <div class="tab-pane fade" id="styles" role="tabpanel" aria-labelledby="styles-tab"> + <canvas id="styles-chart" width="100%"></canvas> + </div> + <div class="tab-pane fade" id="abv-ratings" role="tabpanel" aria-labelledby="abv-ratings-tab"> + <canvas id="abv-ratings-chart" width="100%"></canvas> + </div> + <div class="tab-pane fade" id="abv-average" role="tabpanel" aria-labelledby="abv-average-tab"> + <canvas id="abv-average-chart" width="100%"></canvas> + </div> + <div class="tab-pane fade" id="ratings-average" role="tabpanel" aria-labelledby="ratings-average-tab"> + <canvas id="ratings-average-chart" width="100%"></canvas> + </div> + </div> </div> </div> @@ -86,6 +92,7 @@ <div class="card-body"> Browary o co najmniej 10.000 ocen. Piwa o co najmniej 15 ocenach, o określonym ABV i dodane w 2020 lub wcześniej.<br /> Liczba ocen przeliczana per miesiąc od czasu dodania; dla piw nieprodukowanych: max. 12 miesięcy.<br /> + Kooperacje liczone do jednego browaru, zgodnie z "głównym" oznaczeniem na Untappd.<br /> Dane pobrane z Untappd <time id="compile-date" datetime="2021-01-10">19 stycznia 2021</time>.<br /> </div> </div> @@ -105,7 +112,6 @@ <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js" integrity="sha512-f0VlzJbcEB6KiW8ZVtL+5HWPDyW1+nJEjguZ5IVnSQkvZbwBt2RfCBY0CBO1PsMAqxxrG4Di6TfsCPP3ZRwKpA==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script> - <script src="krafcik.js" type="text/javascript"></script> </body> diff --git a/result/krafcik.css b/result/krafcik.css index af4f65b..be4274c 100644 --- a/result/krafcik.css +++ b/result/krafcik.css @@ -1,6 +1,10 @@ html, body { max-width: 100%; +} + +body { overflow-x: hidden; + overflow-y: scroll; } #date-slider { diff --git a/result/krafcik.js b/result/krafcik.js index ba8ccf9..77fbda1 100644 --- a/result/krafcik.js +++ b/result/krafcik.js @@ -4,7 +4,6 @@ $(document).ready(function() { if (!tab) { tab = location.hash.replace('#', '') || 'styles'; } - console.log(tab, push); $(`a#${tab}-tab`).tab('show'); if (push) { history.pushState({}, '', '#' + tab); @@ -149,8 +148,8 @@ $(document).ready(function() { var container = $('#chart-tooltip'); if (!container.length) { container = $('<div id="chart-tooltip"></div>'); - $('body').append(container); } + $(chart.canvas).parent().append(container); if (tooltip.body) { var positionY = chart.canvas.offsetTop; var positionX = chart.canvas.offsetLeft; @@ -213,6 +212,7 @@ $(document).ready(function() { }] }, options: { + maintainAspectRatio: false, legend: { display: false }, @@ -292,6 +292,7 @@ $(document).ready(function() { abvRatingsChart = new Chart.Scatter(ctx, { data: scatterChartData[0], options: { + maintainAspectRatio: false, scales: { xAxes: [abvAxis], yAxes: [ratingAxis] @@ -313,6 +314,7 @@ $(document).ready(function() { abvAverageChart = new Chart.Scatter(ctx, { data: scatterChartData[1], options: { + maintainAspectRatio: false, scales: { xAxis: [abvAxis], yAxes: [averageAxis] @@ -334,6 +336,7 @@ $(document).ready(function() { ratingsAverageChart = new Chart.Scatter(ctx, { data: scatterChartData[2], options: { + maintainAspectRatio: false, scales: { xAxes: [ratingAxis], yAxes: [averageAxis] |