WIP: grafik heatmap pake overlay

resources/views/user/layouts/index.blade.php

@@ -73,6 +73,7 @@ class="bi bi-arrow-up-short"></i></a>
   <script src="{{ asset('assets/users/assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
 
   <script src="https://cdn.datatables.net/2.3.7/js/dataTables.min.js" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.1/heatmap.min.js"></script>
 
   <!-- Main JS File -->
   <script src="{{ asset('assets/users/assets/js/main.js') }}"></script>

resources/views/user/pages/finish_ujian/index.blade.php

@@ -46,6 +46,13 @@
           <h2 class="title">Grafik Kecepatan Mata</h2>
           <canvas id="velocityChart"></canvas>
         </div>
+        <div class="col-lg-12 mt-5">
+          <h2 class="title">Heatmap Pergerakan Mata</h2>
+          <div style="position: relative; aspect-ratio: 16/9;">
+            <img src="{{ asset('assets/users/assets/img/overlay/overlay.png') }}" style="width:100%; height:100%; object-fit: cover;">
+            <div id="heatmapChart" style="aspect-ratio: 16/9;"></div>
+          </div>
+        </div>
       </div>
     </div>
   </section><!-- /About Section -->
@@ -69,6 +76,13 @@
     const ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
     let table = null;
     let data_tobii = null;
+    let heatmapContainer = null;
+    let clientWidth = null;
+    let clientHeight = null;
+    let mappedHeatmapData = null;
+    let scaleX = null;
+    let scaleY = null;
+    let heatmapInstance = null;
 
     function renderVelocityChart(timeseries) {
       const base = timeseries.timestamp[0];
@@ -118,6 +132,16 @@ function renderVelocityChart(timeseries) {
       const result = await res.json();
       if(result != null) {
         renderVelocityChart(result.timeseries);
+        mappedHeatmapData = result.heatmap.map(point => ({
+          x: point.x * scaleX,
+          y: point.y * scaleY,
+          value: point.value
+        }));
+        heatmapInstance.setData({
+          max: 10,
+          data: mappedHeatmapData
+        });
+        heatmapContainer.style.removeProperty('position');
       }
     }
 
@@ -175,6 +199,19 @@ function renderVelocityChart(timeseries) {
           if(data.type === 'json_file_data') {
             if(data.data != null) {
               data_tobii = data.data;
+
+              heatmapContainer = document.getElementById('heatmapChart');
+              clientWidth = heatmapContainer.clientWidth;
+              clientHeight = heatmapContainer.clientHeight;
+              scaleX = clientWidth / 1366;
+              scaleY = clientHeight / 768;
+              
+              heatmapInstance = h337.create({
+                container: heatmapContainer,
+                radius: 40,
+                maxOpacity: 0.6,
+                blur: 0.85
+              });
               loadData(data_tobii);
             }
           }