WIP: chart feature

muckelba · Nov 15, 2023 · 5ac0999 · 5ac0999
1 parent 2fdfefb
commit 5ac0999
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,10 +13,11 @@
     "@creativebulma/bulma-divider": "^1.1.0",
     "@sveltejs/adapter-static": "^2.0.1",
     "@sveltejs/kit": "^1.20.4",
+    "bulma": "^0.9.4",
+    "chart.js": "^4.4.0",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.30.0",
-    "bulma": "^0.9.4",
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.10.1",
     "sass": "^1.53.0",

diff --git a/src/lib/components/Analytics.svelte b/src/lib/components/Analytics.svelte
@@ -1,11 +1,13 @@
 <script>
   import { onMount, afterUpdate } from "svelte";
+  import Chart from "chart.js/auto";
 
   import {
     settings,
     loopDelayAvg,
     isController,
     history,
+    chartHistory,
     trainingActive,
     sharingModalActive,
     attempts,
@@ -33,11 +35,60 @@
 
   // This can be improved 100%
   $: averageErrorPerPoll = ($settings.fps / (1000 / $loopDelayAvg)) * 0.5 * 100;
+
+  let ctx;
+  let myChart;
+
+  $: console.log($chartHistory);
+  $: if (myChart) {
+    console.log("foo");
+    const storeValues = $chartHistory;
+    myChart.data.datasets[0].data = storeValues;
+    myChart.data.labels = storeValues.map((_, index) => index + 1); // Use array indices as labels
+    myChart.update();
+  }
   onMount(() => {
     // keep the scrollbar at the bottom
     if (trainingActive) {
       historydiv.scrollTop = historydiv.scrollHeight;
     }
+
+    myChart = new Chart(ctx, {
+      type: "line",
+      data: {
+        labels: [],
+        datasets: [
+          {
+            data: chartHistory,
+            backgroundColor: "rgb(255, 99, 132)",
+            borderColor: "rgb(255, 99, 132)",
+          },
+        ],
+      },
+      options: {
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+        responsive: true,
+        scales: {
+          y: {
+            beginAtZero: true,
+            title: {
+              display: true,
+              text: "% Chance",
+            },
+          },
+          x: {
+            title: {
+              display: true,
+              text: "# of tries",
+            },
+          },
+        },
+      },
+    });
   });
 
   afterUpdate(() => {
@@ -51,6 +102,7 @@
 <div class="card">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-missing-attribute -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <a class="card-header" on:click={() => toggleAnalytics(!$analyticsHidden)}>
     <button class="button card-header-icon is-large" aria-label="collapse helpful tips">
       <i class="fa fa-angle-{$analyticsHidden ? 'down' : 'up'}" />
@@ -116,6 +168,7 @@
 
     <div class:is-active={$sharingModalActive} class="modal">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div class="modal-background" on:click={toggleSharingModal} />
       <div class="modal-content">
         <div class="box">
@@ -153,7 +206,7 @@
                 </p>
               {/if}
             </div>
-            <div class="column history is-one-third">
+            <div class="column history">
               {#each $history as { line, color, finished }}
                 <p>
                   <span class="tag is-{color}">{line}</span>
@@ -163,6 +216,7 @@
                 {/if}
               {/each}
             </div>
+            <div class="column is-half"><canvas bind:this={ctx} id="myChart" /></div>
           </div>
           <div class="box" style="background: linear-gradient(90deg, {$gradientArray.join(',')});" />
           <footer>

diff --git a/src/lib/components/Faq.svelte b/src/lib/components/Faq.svelte
@@ -9,6 +9,7 @@
 <div class="card">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-missing-attribute -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <a class="card-header" on:click={toggleFaq}>
     <button class="button card-header-icon is-large" aria-label="collapse the FAQ">
       <i class="fa fa-angle-{faqHidden ? 'down' : 'up'}" />

diff --git a/src/lib/components/Tips.svelte b/src/lib/components/Tips.svelte
@@ -8,6 +8,7 @@
 <div class="card">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-missing-attribute -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <a class="card-header" on:click={toggleHidden}>
     <button class="button card-header-icon is-large" aria-label="collapse helpful tips">
       <i class="fa fa-angle-{tipsHidden ? 'down' : 'up'}" />

diff --git a/src/lib/stores.js b/src/lib/stores.js
@@ -22,6 +22,7 @@ export const settings = writable({
 });
 
 export let history = writable([]);
+export let chartHistory = writable([]);
 export let trainingActive = writable(false);
 export let sharingModalActive = writable(false);
 

diff --git a/src/lib/util.js b/src/lib/util.js
@@ -1,4 +1,4 @@
-import { history, trainingActive, sharingModalActive, gradientArray, analyticsHidden } from "$lib/stores";
+import { history, chartHistory, trainingActive, sharingModalActive, gradientArray, analyticsHidden } from "$lib/stores";
 import { colorScheme } from "$lib/config";
 
 export function percentageColor(value) {
@@ -22,6 +22,9 @@ export function updateHistory(objArr) {
     if (obj.finished) {
       gradientArray.update((gradientValue) => [...gradientValue, colorScheme[obj.color]]);
     }
+    if (obj.chance) {
+      chartHistory.update((chartValue) => [...chartValue, obj.chance]);
+    }
   });
 }
 

diff --git a/src/routes/superglidetrainer/+page.svelte b/src/routes/superglidetrainer/+page.svelte
@@ -492,6 +492,7 @@
           line: superglideText,
           color: percentageColor(chance),
           finished: true,
+          chance: chance,
         },
       ]);
 
@@ -696,6 +697,7 @@
                 <!-- TODO: style a <button> that looks like link. Currently not possbile with bulma out of the box -->
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <!-- svelte-ignore a11y-missing-attribute -->
+                <!-- svelte-ignore a11y-no-static-element-interactions -->
                 Click <a on:click={toggleSharingModal}>here</a> to see more statistics about it
                 <br />
                 If you are using Firefox, switch to a Chromium based browser as those allow a higher pollingrate. This is a test sentence