Add chart.js to React simulator

web/package-lock.json

@@ -8,9 +8,11 @@
       "dependencies": {
         "@headlessui/react": "1.4.2",
         "@heroicons/react": "1.0.5",
+        "chart.js": "^3.6.1",
         "daisyui": "^1.16.2",
         "next": "12.0.4",
         "react": "17.0.2",
+        "react-chartjs-2": "^4.0.0",
         "react-dom": "17.0.2"
       },
       "devDependencies": {
@@ -1993,6 +1995,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.1.tgz",
+      "integrity": "sha512-AycnixR0I325Fp3bqQ7wRJbkIJPwz/9IZtUBvdBWMjK5+nKCy6FZ3VejkDTtB9udePEXNt1UYoGTsNL49JoIbg=="
+    },
     "node_modules/chokidar": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
@@ -5297,6 +5304,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.0.tgz",
+      "integrity": "sha512-0kx41EVO6wIoeU6zvdwovX9kKcdrs7O62DGTSNmwAXZeLGJ3U+n4XijO1kxcMmAi4I6PQJWGD5oRwxVixHSp6g==",
+      "peerDependencies": {
+        "chart.js": "^3.5.0",
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -7896,6 +7912,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chart.js": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.1.tgz",
+      "integrity": "sha512-AycnixR0I325Fp3bqQ7wRJbkIJPwz/9IZtUBvdBWMjK5+nKCy6FZ3VejkDTtB9udePEXNt1UYoGTsNL49JoIbg=="
+    },
     "chokidar": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
@@ -10382,6 +10403,12 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-chartjs-2": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.0.tgz",
+      "integrity": "sha512-0kx41EVO6wIoeU6zvdwovX9kKcdrs7O62DGTSNmwAXZeLGJ3U+n4XijO1kxcMmAi4I6PQJWGD5oRwxVixHSp6g==",
+      "requires": {}
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",

web/package.json

@@ -11,9 +11,11 @@
   "dependencies": {
     "@headlessui/react": "1.4.2",
     "@heroicons/react": "1.0.5",
+    "chart.js": "^3.6.1",
     "daisyui": "^1.16.2",
     "next": "12.0.4",
     "react": "17.0.2",
+    "react-chartjs-2": "^4.0.0",
     "react-dom": "17.0.2"
   },
   "devDependencies": {

web/pages/simulator/index.tsx

@@ -1,12 +1,34 @@
-import React, { Fragment, useState } from 'react'
-
+import React, { Fragment, useEffect, useMemo, useState } from 'react'
+import {
+  CategoryScale,
+  Chart,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js'
+import { ChartData } from 'chart.js'
+import { Line } from 'react-chartjs-2'
 import { bids } from './sample-bids'
 import { Entry, makeEntries } from './entries'
 
+// Auto import doesn't work for some reason...
+Chart.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+)
+
 function toTable(entries: Entry[]) {
   return entries.map((entry, i) => {
     return (
-      <tr>
+      <tr key={i}>
         <th>{i + 1}</th>
         {toRowStart(entry)}
         {toRowEnd(entry)}
@@ -94,9 +116,27 @@ export default function Simulator() {
 
   const entries = makeEntries(bids.slice(0, steps))
 
+  const probs = useMemo(() => entries.map((entry) => entry.prob), [entries])
+
+  const [chartData, setChartData] = useState({ datasets: [] } as ChartData)
+
+  useEffect(() => {
+    setChartData({
+      labels: Array.from({ length: steps }, (_, i) => i + 1),
+      datasets: [
+        {
+          label: 'Implied probability',
+          data: probs,
+          borderColor: 'rgb(75, 192, 192)',
+        },
+      ],
+    })
+  }, [steps])
+
   return (
     <div className="overflow-x-auto px-12 mt-8 text-center">
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+        {/* Left column */}
         <div>
           <h1 className="text-2xl font-bold text-gray-600 mb-8">
             Dynamic Parimutuel Market Simulator
@@ -113,14 +153,14 @@ export default function Simulator() {
           />
 
           <div className="overflow-x-auto">
-            <table className="table">
+            <table className="table w-full">
               <thead>
                 <tr>
                   <th>Order #</th>
                   <th>Type</th>
                   <th>Bid</th>
                   <th>Weight</th>
-                  <th>Prod</th>
+                  <th>Prob</th>
                   <th>Max Payout</th>
                   <th>Return</th>
                 </tr>
@@ -129,6 +169,15 @@ export default function Simulator() {
             </table>
           </div>
         </div>
+
+        {/* Right column */}
+        <div>
+          <h1 className="text-2xl font-bold text-gray-600 mb-8">
+            Probability of
+            <div className="badge badge-success text-2xl h-8 w-18">YES</div>
+          </h1>
+          <Line data={chartData} height={200} />
+        </div>
       </div>
     </div>
   )