game/list: Add compatibility chart

layouts/game/list.html

@@ -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(_) {
+        function filterTable(index, name) {
-            var rating = this.name;
+            $("#search-box").val(name);
-            var index = this.index;
- 
-            $("#search-box").val(rating);
             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>