Include a chart of the probabilities over time

market-simulator/package.json

@@ -7,6 +7,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "chart.js": "^3.6.1",
     "daisyui": "^1.16.0",
     "firebase": "^9.4.1",
     "vue": "^3.2.16"

market-simulator/src/components/Simulator.vue

@@ -4,11 +4,16 @@
     <input
       class="range"
       type="range"
-      v-model="steps"
+      v-model.number="steps"
       min="1"
       :max="entries.length"
     />
-
+    <!-- Two-column layout (on large screen sizes) -->
+    <div class="grid grid-cols-1 lg:grid-cols-2">
+      <div>
+        <canvas id="simChart" width="400" height="400"></canvas>
+      </div>
+      <div>
         <table class="table">
           <thead>
             <tr>
@@ -40,11 +45,15 @@
           </tbody>
         </table>
       </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+import Chart from 'chart.js/auto'
 import { bids } from './orders'
 import { ref, computed } from '@vue/reactivity'
+import { onMounted, watch } from '@vue/runtime-core'
 
 const entries = [] as any
 // Constants
@@ -107,4 +116,34 @@ for (const bid of bids) {
     noReturn,
   })
 }
+
+// Graph the probabilities over time
+const probs = computed(() => truncatedEntries.value.map((entry) => entry.prob))
+
+onMounted(initChart)
+watch(steps, renderChart)
+
+let chart: Chart
+function initChart() {
+  const ctx = document.getElementById('simChart')
+  chart = new Chart(ctx as any, {
+    type: 'line',
+    data: {
+      labels: [...Array(steps.value).keys()],
+      datasets: [
+        {
+          label: 'Implied probability',
+          data: probs.value,
+          borderColor: 'rgb(75, 192, 192)',
+        },
+      ],
+    },
+  })
+}
+
+function renderChart() {
+  chart.data.labels = [...Array(steps.value).keys()]
+  chart.data.datasets[0].data = probs.value
+  chart.update()
+}
 </script>

market-simulator/yarn.lock

@@ -762,6 +762,11 @@ character-parser@^2.2.0:
   dependencies:
     is-regex "^1.0.3"
 
+chart.js@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.6.1.tgz#edcb6584b8d810306f655f89538c00a4f440c58e"
+  integrity sha512-AycnixR0I325Fp3bqQ7wRJbkIJPwz/9IZtUBvdBWMjK5+nKCy6FZ3VejkDTtB9udePEXNt1UYoGTsNL49JoIbg==
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"