yuzu/shared-bulma-theme
1
0
Fork 0
mirror of https://github.com/yuzu-emu/shared-bulma-theme.git synced 2024-12-22 13:25:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

game/list: Add compatibility chart

Browse source
This commit is contained in:
FearlessTobi 2022-10-25 13:24:27 +02:00
parent 2e6d6cf398
commit fd7df582bf
1 changed files with 49 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
layouts/game/list.html
View file

@ -18,7 +18,7 @@
{{ end }}
</tbody>
</table>
<!-- <div id="highchart-container" style="height: 100px; margin: 0 auto"></div> -->
<canvas id="chartjs-container" style="width:100%;height:130px"></canvas>
</div>
</div>
{{ end }}
@ -63,14 +63,14 @@
<td class="hidden listing-metadata">
<span hidden>{{ .Params.title }} {{ $rating.name }}</span>
</td>
<td data-title="{{ .Params.title }}">
<td class="game-title" data-title="{{ .Params.title }}">
<a href="{{ .Permalink }}">{{ .Params.title }}</a>
</td>
<td data-compatibility="{{ $rating.key }}">
<td class="compatibility" data-compatibility="{{ $rating.key }}">
<div class="is-square" style="background-color: {{ $rating.color }}"></div>
<span>{{ $rating.name }}</span>
</td>
<td data-timestamp="{{ .Params.testcase_date }}">
<td class="date-tested" data-timestamp="{{ .Params.testcase_date }}">
{{ if .Params.testcase_date }}
<span>{{ dateFormat "January 2, 2006" .Params.testcase_date }}</span>
{{ else }}
@ -90,6 +90,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script type="text/javascript">
$(function() {
@ -100,11 +101,8 @@
return list.lastSorted;
}
function filterTable(_) {
var rating = this.name;
var index = this.index;
$("#search-box").val(rating);
function filterTable(index, name) {
$("#search-box").val(name);
list.search(index, ['compatibility']);
}
@ -116,7 +114,7 @@
var options = {
valueNames: [
'listing-metadata',
{ name: 'title', attr: 'data-title' },
{ name: 'game-title', attr: 'data-title' },
{ name: 'compatibility', attr: 'data-compatibility' },
{ name: 'date-tested', attr: 'data-timestamp' }
],
@ -153,6 +151,47 @@
});
$('#game-listing .clear-search').click(clearSearch);
let dataset = [
{{- $dataPages := .Data.Pages }}
{{- range .Site.Data.compatibility }}
{{- $dataPagesFiltered := where $dataPages ".Params.compatibility" .key }}
{ axis: "y", "label": "{{ .name }}", "data": [ {{ len $dataPagesFiltered }} ], backgroundColor: "{{ .color }}" },
{{- end }}
].reverse()
var chart = new Chart("chartjs-container", {
type: 'bar',
data: {
labels: [""],
datasets: dataset
},
options: {
plugins: {
legend: {
display: false
}
},
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true },
},
indexAxis: 'y',
onClick: (e) => {
const points = chart.getElementsAtEventForMode(e, 'nearest', {
intersect: true
}, true);
if(points.length) {
// The index of compatibility ratings is reversed
filterTable(dataset.length - points[0].datasetIndex - 1, dataset[points[0].datasetIndex].label);
}
},
},
});
});
</script>