From 5545d87ba4e7a59ef0e5d128d16b4bde9b716cbc Mon Sep 17 00:00:00 2001 From: emkael Date: Tue, 19 Jan 2021 12:17:22 +0100 Subject: First version of all 4 charts --- result/index.html | 95 ++++++++++++++++ result/krafcik.css | 73 ++++++++++++ result/krafcik.js | 323 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 491 insertions(+) create mode 100644 result/index.html create mode 100644 result/krafcik.css create mode 100644 result/krafcik.js diff --git a/result/index.html b/result/index.html new file mode 100644 index 0000000..4a8009c --- /dev/null +++ b/result/index.html @@ -0,0 +1,95 @@ + + + + + + + Polski K***cik + + + + + + + + + + +
+ +

Polski Krafcik 2012-2020

+ + +
+
+ + +
+
+
+
+ + +
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + + + + + + + + + + + diff --git a/result/krafcik.css b/result/krafcik.css new file mode 100644 index 0000000..55a8a98 --- /dev/null +++ b/result/krafcik.css @@ -0,0 +1,73 @@ +html, body { + max-width: 100%; + overflow-x: hidden; +} + +#date-slider { + width: 100%; +} + +#date-filter .slider-rangeHighlight.odd { + background: #0000CC; +} + +#date-filter .slider-rangeHighlight.even { + background: #8888FF; +} + +#date-filter .slider-track-low, +#date-filter .slider-track-high { + background: #CCCCCC; + z-index: 1; +} + +#date-filter .slider-handle { + z-index: 2; +} + +#brewery-filter .form-check label { + cursor: pointer; +} + +#brewery-filter label img { + width: 30px; +} + +#chart-tooltip { + position: absolute; + background: rgba(255, 255, 200, 0.75); + padding: 0.5em; + font-size: 0.7em; + border: solid 1px black; + pointer-events: none; +} + +#chart-tooltip ul { + margin: 0; + padding: 0; +} + +#chart-tooltip ul ul { + padding: 0 0 0 1em; +} + +#chart-tooltip li { + list-style: none; +} + +#chart-tooltip dl { + display: flex; + margin: 0; +} + +#chart-tooltip dt { + width: 80%; + white-space: nowrap; +} + +#chart-tooltip dd { + margin: 0; + width: 20%; + min-width: 30px; + text-align: right; +} diff --git a/result/krafcik.js b/result/krafcik.js new file mode 100644 index 0000000..a65a73b --- /dev/null +++ b/result/krafcik.js @@ -0,0 +1,323 @@ +$(document).ready(function() { + + $.when( + $.getJSON('beers.json'), + $.getJSON('breweries.json'), + $.getJSON('styles.json') + ).done(function(beerData, breweryData, styleData) { + var beers = beerData[0]; + $.each(beers, function(idx, beer) { + beer['scatter-data'] = [ + { + x: beer.abv, + y: beer.ratings + }, + { + x: beer.abv, + y: beer.average + }, + { + x: beer.ratings, + y: beer.average + } + ]; + }); + var minYear = Math.min.apply(null, beers.map(b => b.year)); + var maxYear = Math.max.apply(null, beers.map(b => b.year)); + var minMonth = Math.min.apply(null, beers.filter(b => (b.year == minYear)).map(b => b.month)); + var maxMonth = Math.min.apply(null, beers.filter(b => (b.year == maxYear)).map(b => b.month)); + var fullYears = maxYear - minYear - 1; + var dateCount = fullYears * 12 + (12 - minMonth + 1) + maxMonth; + var dateMapping = []; + var year = minYear; + var month = minMonth; + for (var c = 0; c < dateCount; c++) { + dateMapping[c] = year + '-' + ('0' + month).slice(-2); + month++; + if (month > 12) { + year++; + month = 1; + } + } + var valSpan = [0, dateCount-1]; + var currRange = 12-minMonth+1; + var lastRange = 'odd'; + var yearRanges = [{'start': 0, 'end': currRange-1, 'class': lastRange}]; + while (currRange < dateCount) { + lastRange = lastRange == 'odd' ? 'even' : 'odd'; + yearRanges.push({ + 'start': currRange, + 'end': Math.min(currRange+11, dateCount-1), + 'class': lastRange + }); + currRange += 12; + } + $('#date-filter input[name="date"]').slider({ + min: 0, + max: dateCount-1, + value: valSpan, + ticks: valSpan, + ticks_labels: valSpan.map(v => dateMapping[v]), + rangeHighlights: yearRanges, + formatter: function(val) { + if (isNaN(val)) { + return val.map(v => dateMapping[v]).join(' - '); + } + else { + return dateMapping[val]; + } + } + }); + + var breweries = breweryData[0]; + var breweryTemplate = $('#brewery-template').html(); + var breweryFilter = $('#brewery-filter'); + $.each(breweries, function(brewery, data) { + var fieldId = 'brewery-' + brewery; + var field = $(breweryTemplate); + field.find('input').attr('value', brewery).attr('id', fieldId); + field.find('label').attr('for', fieldId).attr('title', data['name']).find('img').attr('src', 'img/' + data['logo']); + breweryFilter.append(field); + field.find('label').tooltip(); + }); + $('#brewery-all').change(function() { + if ($(this).is(':checked')) { + $('#brewery-filter .form-check input').prop('checked', 'checked'); + } else { + $('#brewery-filter .form-check input').prop('checked', null); + } + }); + + var styles = styleData[0]; + $.each(styles, function(idx, style) { + style.styleTree = {}; + $.each(style.styles.map(s => s.split(' - ')), function(idx, splitStyle) { + if (splitStyle.length > 1) { + if (!style.styleTree[splitStyle[0]]) { + style.styleTree[splitStyle[0]] = []; + } + style.styleTree[splitStyle[0]].push(splitStyle[1]); + } else { + style.styleTree[splitStyle[0]] = null; + } + }); + }); + var styleNames = styles.map(s => s.name); + var styleCounts = styles.map(s => 0); + var substyleCounts = []; + var styleSubstyles = styles.map(s => s.styles); + var styleColours = styles.map(s => s.colour); + var scatterChartData = []; + for (var i = 0; i < 3; i++) { + scatterChartData[i] = { + datasets: styles.map(function(style) { + return { + borderColor: style.colour, + backgroundColor: Color(style.colour).alpha(0.5).rgbString(), + data: [] + }; + }) + }; + } + var stylesChart; + $('a#styles-tab').on('shown.bs.tab', function() { + if (!stylesChart) { + var ctx = $('#styles-chart')[0].getContext('2d'); + stylesChart = new Chart(ctx, { + type: 'bar', + data: { + labels: styleNames, + datasets: [{ + data: styleCounts, + backgroundColor: styleColours, + borderColor: '#000000', + borderWidth: 1 + }] + }, + options: { + legend: { + display: false + }, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + }, + tooltips: { + enabled: false, + custom: function(tooltip) { + var container = $('#chart-tooltip'); + if (!container.length) { + container = $('
'); + $('body').append(container); + } + if (tooltip.body) { + var content = $('