From 54571b29de2d4407b3a4c26b1722644c2d2a346e Mon Sep 17 00:00:00 2001 From: jahooma Date: Sun, 12 Dec 2021 19:50:17 -0600 Subject: [PATCH] Update simulator to nivo chart. Remove chart.js --- web/package-lock.json | 31 +--- web/package.json | 6 +- web/pages/simulator/index.tsx | 265 +++++++++++++++++----------------- 3 files changed, 134 insertions(+), 168 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 49f7579e..477d760a 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -8,15 +8,13 @@ "dependencies": { "@headlessui/react": "1.4.2", "@heroicons/react": "1.0.5", - "@nivo/core": "^0.74.0", - "@nivo/line": "^0.74.0", - "chart.js": "3.6.1", + "@nivo/core": "0.74.0", + "@nivo/line": "0.74.0", "clsx": "1.1.1", "daisyui": "1.16.4", "firebase": "9.6.0", "next": "12.0.4", "react": "17.0.2", - "react-chartjs-2": "4.0.0", "react-dom": "17.0.2" }, "devDependencies": { @@ -3045,11 +3043,6 @@ "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", @@ -6540,15 +6533,6 @@ "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", @@ -10207,11 +10191,6 @@ "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", @@ -12894,12 +12873,6 @@ "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", diff --git a/web/package.json b/web/package.json index 14989b53..c74791cd 100644 --- a/web/package.json +++ b/web/package.json @@ -11,15 +11,13 @@ "dependencies": { "@headlessui/react": "1.4.2", "@heroicons/react": "1.0.5", - "@nivo/core": "^0.74.0", - "@nivo/line": "^0.74.0", - "chart.js": "3.6.1", + "@nivo/core": "0.74.0", + "@nivo/line": "0.74.0", "clsx": "1.1.1", "daisyui": "1.16.4", "firebase": "9.6.0", "next": "12.0.4", "react": "17.0.2", - "react-chartjs-2": "4.0.0", "react-dom": "17.0.2" }, "devDependencies": { diff --git a/web/pages/simulator/index.tsx b/web/pages/simulator/index.tsx index 4b61f40a..ad3f2820 100644 --- a/web/pages/simulator/index.tsx +++ b/web/pages/simulator/index.tsx @@ -1,31 +1,10 @@ -import React, { useEffect, useMemo, useState } from 'react' -import { Line } from 'react-chartjs-2' -import { - CategoryScale, - Chart, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Legend, -} from 'chart.js' +import React, { useMemo, useState } from 'react' +import { DatumValue } from '@nivo/core' +import { ResponsiveLine } from '@nivo/line' import { Entry, makeEntries } from '../../lib/simulator/entries' import { Header } from '../../components/header' -// Auto import doesn't work for some reason... -// So we manually register ChartJS components instead: -Chart.register( - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Legend -) - function TableBody(props: { entries: Entry[] }) { return ( @@ -74,17 +53,19 @@ function TableRowStart(props: { entry: Entry }) { } } -function TableRowEnd(props: { entry: Entry | null, isNew?: boolean }) { +function TableRowEnd(props: { entry: Entry | null; isNew?: boolean }) { const { entry } = props if (!entry) { return ( <> 0 0 - {!props.isNew && <> - N/A - N/A - } + {!props.isNew && ( + <> + N/A + N/A + + )} ) } else if (entry.yesBid && entry.noBid) { @@ -92,10 +73,12 @@ function TableRowEnd(props: { entry: Entry | null, isNew?: boolean }) { <> {(entry.prob * 100).toFixed(1)}% N/A - {!props.isNew && <> - N/A - N/A - } + {!props.isNew && ( + <> + N/A + N/A + + )} ) } else if (entry.yesBid) { @@ -103,10 +86,12 @@ function TableRowEnd(props: { entry: Entry | null, isNew?: boolean }) { <> {(entry.prob * 100).toFixed(1)}% ${(entry.yesBid + entry.yesWeight).toFixed(0)} - {!props.isNew && <> - ${entry.yesPayout.toFixed(0)} - {(entry.yesReturn * 100).toFixed(0)}% - } + {!props.isNew && ( + <> + ${entry.yesPayout.toFixed(0)} + {(entry.yesReturn * 100).toFixed(0)}% + + )} ) } else { @@ -114,10 +99,12 @@ function TableRowEnd(props: { entry: Entry | null, isNew?: boolean }) { <> {(entry.prob * 100).toFixed(1)}% ${(entry.noBid + entry.noWeight).toFixed(0)} - {!props.isNew && <> - ${entry.noPayout.toFixed(0)} - {(entry.noReturn * 100).toFixed(0)}% - } + {!props.isNew && ( + <> + ${entry.noPayout.toFixed(0)} + {(entry.noReturn * 100).toFixed(0)}% + + )} ) } @@ -150,8 +137,6 @@ function NewBidTable(props: { setNewBid(0) } - - function toggleBidType() { setNewBidType(newBidType === 'YES' ? 'NO' : 'YES') } @@ -162,9 +147,7 @@ function NewBidTable(props: { const nextEntry = entries[entries.length - 1] function randomBid() { - const bidType = Math.random() < 0.5 - ? 'YES' - : 'NO' + const bidType = Math.random() < 0.5 ? 'YES' : 'NO' const amount = Math.round(Math.random() * 500) const bid = makeBid(bidType, amount) @@ -174,86 +157,81 @@ function NewBidTable(props: { setNewBid(0) } - return <> - - - - - - - - - - - - - - - - - - -
Order #TypeBetProbEst Payout
{steps + 1} -
- YES -
-
-
- NO -
- 		- {/* Note: Would love to make this input smaller... */} - setNewBid(parseInt(e.target.value) || 0)} - onKeyUp={(e) => { - if (e.key === 'Enter') { - submitBid() + return ( + <> + + + + + + + + + + + + + + + + onClick={toggleBidType} + > + YES + +
+
+ NO +
+ + - + - + + +
Order #TypeBetProbEst Payout
{steps + 1} +
e.target.select()} - /> -
+ {/* Note: Would love to make this input smaller... */} + setNewBid(parseInt(e.target.value) || 0)} + onKeyUp={(e) => { + if (e.key === 'Enter') { + submitBid() + } + }} + onFocus={(e) => e.target.select()} + /> + - + + +
-
- - - + + + ) } // Show a hello world React page @@ -269,17 +247,9 @@ export default function Simulator() { const reversedEntries = [...entries].reverse() const probs = entries.map((entry) => entry.prob) - - const chartData = { - labels: Array.from({ length: steps }, (_, i) => 1 + i), - datasets: [ - { - label: 'Implied probability', - data: probs, - borderColor: 'rgb(75, 192, 192)', - }, - ], - } + const points = probs.map((prob, i) => ({ x: i + 1, y: prob * 100 })) + const data = [{ id: 'Yes', data: points, color: '#11b981' }] + const tickValues = [0, 25, 50, 75, 100] return (
@@ -291,7 +261,6 @@ export default function Simulator() { Dynamic Parimutuel Market Simulator - {/* History of bids */} @@ -320,7 +289,29 @@ export default function Simulator() { Probability of
YES
- +
+ +
{/* Range slider that sets the current step */} ) } + +function formatPercent(y: DatumValue) { + return `${Math.round(+y.toString())}%` +}