open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Layout tweaks for simulator

Browse Source
This commit is contained in:
jahooma 2021-12-12 22:13:27 -06:00
parent 54571b29de
commit 1048f866d1
1 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/pages/simulator/index.tsx
View File

@ -4,6 +4,7 @@ import { ResponsiveLine } from '@nivo/line'
import { Entry, makeEntries } from '../../lib/simulator/entries' import { Entry, makeEntries } from '../../lib/simulator/entries'
import { Header } from '../../components/header' import { Header } from '../../components/header'
import { Col } from '../../components/layout/col'
function TableBody(props: { entries: Entry[] }) { function TableBody(props: { entries: Entry[] }) {
return ( return (
@ -214,15 +215,13 @@ function NewBidTable(props: {
<TableRowEnd entry={nextEntry} isNew /> <TableRowEnd entry={nextEntry} isNew />
<td>
<button <button
className="btn btn-primary" className="btn btn-primary mt-2"
onClick={() => submitBid()} onClick={() => submitBid()}
disabled={newBid <= 0} disabled={newBid <= 0}
> >
Submit Submit
</button> </button>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -252,9 +251,9 @@ export default function Simulator() {
const tickValues = [0, 25, 50, 75, 100] const tickValues = [0, 25, 50, 75, 100]
return ( return (
<div> <Col>
<Header /> <Header />
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mt-8 max-w-7xl mx-auto text-center"> <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 w-full mt-8 p-2 mx-auto text-center">
{/* Left column */} {/* Left column */}
<div> <div>
<h1 className="text-2xl font-bold mb-8"> <h1 className="text-2xl font-bold mb-8">
@ -284,12 +283,14 @@ export default function Simulator() {
</div> </div>
{/* Right column */} {/* Right column */}
<div> <Col>
<h1 className="text-2xl font-bold mb-8"> <h1 className="text-2xl font-bold mb-8">
Probability of Probability of
<div className="badge badge-success text-2xl h-8 w-18">YES</div> <div className="badge badge-success text-2xl h-8 w-18 ml-3">
YES
</div>
</h1> </h1>
<div className="w-full" style={{ height: 400 }}> <div className="w-full mb-10" style={{ height: 500 }}>
<ResponsiveLine <ResponsiveLine
data={data} data={data}
yScale={{ min: 0, max: 100, type: 'linear' }} yScale={{ min: 0, max: 100, type: 'linear' }}
@ -299,13 +300,10 @@ export default function Simulator() {
tickValues, tickValues,
format: formatPercent, format: formatPercent,
}} }}
axisBottom={{
tickValues: [],
}}
enableGridX={false} enableGridX={false}
colors={{ datum: 'color' }} colors={{ datum: 'color' }}
pointSize={12} pointSize={8}
pointBorderWidth={2} pointBorderWidth={1}
pointBorderColor="#fff" pointBorderColor="#fff"
enableSlices="x" enableSlices="x"
enableArea enableArea
@ -322,9 +320,9 @@ export default function Simulator() {
value={steps} value={steps}
onChange={(e) => setSteps(parseInt(e.target.value))} onChange={(e) => setSteps(parseInt(e.target.value))}
/> />
</Col>
</div> </div>
</div> </Col>
</div>
) )
} }