diff --git a/web/package-lock.json b/web/package-lock.json index c0780a4f..ed592970 100644 --- a/web/package-lock.json +++ b/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", diff --git a/web/package.json b/web/package.json index 293eb098..aa5c38a8 100644 --- a/web/package.json +++ b/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": { diff --git a/web/pages/simulator/index.tsx b/web/pages/simulator/index.tsx index ddd65419..a94d9626 100644 --- a/web/pages/simulator/index.tsx +++ b/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 ( -
Order # | Type | Bid | Weight | -Prod | +Prob | Max Payout | Return |
---|