jeffemmett
/
augmented-tbc-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dark theme and layout 

Uniform color palette


Adjust typography


limit decimals
This commit is contained in:
dapplion 2019-08-02 11:21:10 +02:00
parent 2a74df0332
commit f65b50b4ff
8 changed files with 129 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/App.tsx
View File

@ -26,18 +26,20 @@ const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
mainContainer: { mainContainer: {
"& > div:not(:last-child)": { "& > div:not(:last-child)": {
paddingBottom: theme.spacing(6) paddingBottom: theme.spacing(3)
}, },
"& > div": { "& > div": {
"& > div": { "& > div": {
paddingTop: "0 !important" paddingTop: "0 !important"
} }
} },
paddingBottom: theme.spacing(9)
}, },
paper: { paper: {
width: "100%", width: "100%",
height: "100%", height: "100%",
minHeight: 310 minHeight: 310,
backgroundColor: "#293640"
}, },
box: { box: {
padding: theme.spacing(3, 3), padding: theme.spacing(3, 3),
@ -48,7 +50,7 @@ const useStyles = makeStyles((theme: Theme) =>
height: theme.spacing(headerOffset), height: theme.spacing(headerOffset),
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
borderBottom: "1px solid #e0e0e0" borderBottom: "1px solid #313d47"
}, },
boxChart: { boxChart: {
width: "100%", width: "100%",
@ -61,8 +63,8 @@ const useStyles = makeStyles((theme: Theme) =>
paddingLeft: "5px" paddingLeft: "5px"
}, },
header: { header: {
backgroundColor: "#070a0e", backgroundColor: "#0b1216",
color: "#f5f7f8", color: "#f8f8f8",
padding: theme.spacing(9, 0, 6 + headerOffset), padding: theme.spacing(9, 0, 6 + headerOffset),
marginBottom: -theme.spacing(headerOffset) marginBottom: -theme.spacing(headerOffset)
}, },
@ -89,7 +91,7 @@ export default function App() {
* to re-render too often * to re-render too often
*/ */
const setCurveParamsThrottle = useMemo( const setCurveParamsThrottle = useMemo(
() => throttle(setCurveParams, 500), () => throttle(setCurveParams, 1000),
[] []
); );
@ -240,57 +242,31 @@ export default function App() {
<Container fixed className={classes.mainContainer}> <Container fixed className={classes.mainContainer}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12} md={6}> <Grid item xs={12} sm={12} md={6} lg={4}>
<Paper className={classes.paper}> <Paper className={classes.paper}>
<Box className={classes.boxHeader}> <Box className={classes.boxHeader}>
<Grid <Typography variant="h6">Curve Design</Typography>
container
direction="row"
justify="space-between"
alignItems="center"
>
<Typography variant="h6">
{simulationActive ? "Results" : "Curve Design"}
</Typography>
<Fade in={simulationActive}>
<Button variant="contained" onClick={clearSimulation}>
Back to design
</Button>
</Fade>
</Grid>
</Box> </Box>
<Box className={classes.box}> <Box className={classes.box}>
{simulationActive ? ( <InputParams setCurveParams={setCurveParamsThrottle} />
<ResultParams resultFields={resultFields} />
) : (
<InputParams setCurveParams={setCurveParamsThrottle} />
)}
</Box> </Box>
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} sm={12} md={6} lg={8}>
<Paper className={classes.paper}> <Paper className={classes.paper}>
<Box className={classes.boxHeader}> <Box className={classes.boxHeader}>
<Typography variant="h6">Preview</Typography> <Typography variant="h6">Preview</Typography>
</Box> </Box>
<Box className={classes.boxChart}> <Box className={classes.boxChart}>
{simulationActive ? ( <SupplyVsDemandChart
<PriceSimulationChart returnF={returnF}
priceTimeseries={priceTimeseries} theta={theta}
withdrawFeeTimeseries={withdrawFeeTimeseries} d0={d0}
p0={p0} p0={p0}
/> />
) : (
<SupplyVsDemandChart
returnF={returnF}
theta={theta}
d0={d0}
p0={p0}
/>
)}
</Box> </Box>
</Paper> </Paper>
</Grid> </Grid>
@ -319,6 +295,38 @@ export default function App() {
</Paper> </Paper>
</Grid> </Grid>
</Grid> </Grid>
{simulationActive && (
<Grid container spacing={3}>
<Grid item xs={12} sm={12} md={6} lg={8}>
<Paper className={classes.paper}>
<Box className={classes.boxHeader}>
<Typography variant="h6">Price walk</Typography>
</Box>
<Box className={classes.boxChart}>
<PriceSimulationChart
priceTimeseries={priceTimeseries}
withdrawFeeTimeseries={withdrawFeeTimeseries}
p0={p0}
/>
</Box>
</Paper>
</Grid>
<Grid item xs={12} sm={12} md={6} lg={4}>
<Paper className={classes.paper}>
<Box className={classes.boxHeader}>
<Typography variant="h6">Results</Typography>
</Box>
<Box className={classes.box}>
<ResultParams resultFields={resultFields} />
</Box>
</Paper>
</Grid>
</Grid>
)}
</Container> </Container>
</> </>
); );

4
src/Header.tsx
View File

@ -3,8 +3,6 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import Link from "@material-ui/core/Link"; import Link from "@material-ui/core/Link";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
const strongColor = "#4ab47c";
const useStyles = makeStyles((theme: Theme) => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
root: { root: {
@ -15,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
marginRight: theme.spacing(1) marginRight: theme.spacing(1)
}, },
link: { link: {
color: strongColor color: theme.palette.primary.main
} }
}) })
); );

24
src/InputParams.tsx
View File

@ -14,14 +14,8 @@ import InputAdornment from "@material-ui/core/InputAdornment";
import NumberFormat from "react-number-format"; import NumberFormat from "react-number-format";
import { throttle } from "lodash"; import { throttle } from "lodash";
const grayColor = "#90a4ae";
const blackColor = "#141e27";
// const commonsGradient = "#67de69 #1c709c";
const strongColor = "#4ab47c";
const PrettoSlider = withStyles({ const PrettoSlider = withStyles({
root: { root: {
color: strongColor,
height: 8 height: 8
}, },
thumb: { thumb: {
@ -48,7 +42,6 @@ const PrettoSlider = withStyles({
borderRadius: 4 borderRadius: 4
}, },
markLabel: { markLabel: {
color: grayColor,
top: 30 top: 30
} }
})(Slider); })(Slider);
@ -63,20 +56,19 @@ const useStyles = makeStyles((theme: Theme) =>
marginRight: theme.spacing(1) marginRight: theme.spacing(1)
}, },
leftContainer: { leftContainer: {
color: grayColor color: theme.palette.text.secondary
}, },
centerContainer: { centerContainer: {
color: blackColor // color: blackColor
}, },
listBoxContainer: { listBoxContainer: {
"& > div:not(:last-child)": { "& > div:not(:last-child)": {
paddingBottom: "12px", paddingBottom: "12px",
marginBottom: "12px", marginBottom: "12px",
borderBottom: "1px solid #e0e0e0" borderBottom: "1px solid #313d47"
} }
}, },
listBox: { listBox: {
height: "48px",
"& > div": { "& > div": {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@ -87,6 +79,9 @@ const useStyles = makeStyles((theme: Theme) =>
"& > div:not(:last-child)": { "& > div:not(:last-child)": {
paddingRight: "12px" paddingRight: "12px"
} }
},
slider: {
color: theme.palette.primary.main
} }
}) })
); );
@ -160,7 +155,7 @@ export default function InputParams({
toNum: (n: string) => Math.floor(parseFloat(n) * 1e6) toNum: (n: string) => Math.floor(parseFloat(n) * 1e6)
}, },
{ {
label: "Allocation to the project", label: "Allocation to project",
value: theta, value: theta,
setter: setTheta, setter: setTheta,
min: 0, min: 0,
@ -181,6 +176,8 @@ export default function InputParams({
step: 0.01, step: 0.01,
unit: "$", unit: "$",
prefix: "$", prefix: "$",
toText: (n: number) => String(+n.toFixed(2)),
toNum: (n: string) => parseFloat(n),
format: (n: number) => `$${n}` format: (n: number) => `$${n}`
}, },
{ {
@ -192,6 +189,8 @@ export default function InputParams({
step: 0.1, step: 0.1,
unit: "x", unit: "x",
suffix: "x", suffix: "x",
toText: (n: number) => String(+n.toFixed(1)),
toNum: (n: string) => parseFloat(n),
format: (n: number) => `${n}x` format: (n: number) => `${n}x`
}, },
{ {
@ -265,6 +264,7 @@ export default function InputParams({
<Grid item xs={4}> <Grid item xs={4}>
<PrettoSlider <PrettoSlider
className={classes.slider}
valueLabelDisplay="auto" valueLabelDisplay="auto"
aria-label={label} aria-label={label}
defaultValue={value} defaultValue={value}

31
src/PriceSimulationChart.tsx
View File

@ -9,10 +9,7 @@ import {
ResponsiveContainer, ResponsiveContainer,
Tooltip Tooltip
} from "recharts"; } from "recharts";
import { useTheme } from "@material-ui/styles";
const grayColor = "#90a4ae";
const strongColor = "#4ab47c";
const strongOpositeColor = "#b44a9b";
function PriceSimulationChart({ function PriceSimulationChart({
priceTimeseries, priceTimeseries,
@ -42,8 +39,12 @@ function PriceSimulationChart({
}); });
} }
// Chart components
const theme: any = useTheme();
function renderColorfulLegendText(value: string) { function renderColorfulLegendText(value: string) {
return <span style={{ color: grayColor }}>{value}</span>; return <span style={{ color: theme.palette.text.secondary }}>{value}</span>;
} }
const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString(); const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString();
@ -64,15 +65,15 @@ function PriceSimulationChart({
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
<XAxis <XAxis
dataKey={keyHorizontal} dataKey={keyHorizontal}
tick={{ fill: grayColor }} tick={{ fill: theme.palette.text.secondary }}
stroke={grayColor} stroke={theme.palette.text.secondary}
/> />
<YAxis <YAxis
yAxisId="left" yAxisId="left"
domain={[Math.min(...priceTimeseries), Math.max(...priceTimeseries)]} domain={[Math.min(...priceTimeseries), Math.max(...priceTimeseries)]}
tickFormatter={formatter} tickFormatter={formatter}
tick={{ fill: grayColor }} tick={{ fill: theme.palette.text.secondary }}
stroke={grayColor} stroke={theme.palette.text.secondary}
/> />
{/* Capital collected from withdraw fees - AXIS */} {/* Capital collected from withdraw fees - AXIS */}
@ -83,8 +84,8 @@ function PriceSimulationChart({
// Math.ceil(Math.max(...withdrawFeeTimeseries)) // Math.ceil(Math.max(...withdrawFeeTimeseries))
// ]} // ]}
orientation="right" orientation="right"
tick={{ fill: grayColor }} tick={{ fill: theme.palette.text.secondary }}
stroke={grayColor} stroke={theme.palette.text.secondary}
/> />
<Tooltip formatter={value => Number(value)} /> <Tooltip formatter={value => Number(value)} />
@ -93,8 +94,8 @@ function PriceSimulationChart({
yAxisId="left" yAxisId="left"
type="monotone" type="monotone"
dataKey={keyVerticalLeft} dataKey={keyVerticalLeft}
stroke={strongColor} stroke={theme.palette.primary.main}
fill={strongColor} fill={theme.palette.primary.main}
/> />
{/* Capital collected from withdraw fees - AREA */} {/* Capital collected from withdraw fees - AREA */}
@ -103,8 +104,8 @@ function PriceSimulationChart({
yAxisId="right" yAxisId="right"
type="monotone" type="monotone"
dataKey={keyVerticalRight} dataKey={keyVerticalRight}
stroke={strongOpositeColor} stroke={theme.palette.secondary.main}
fill={strongOpositeColor} fill={theme.palette.secondary.main}
/> />
{/* <ReferenceLine {/* <ReferenceLine

10
src/ResultParams.tsx
View File

@ -3,9 +3,6 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid"; import Grid from "@material-ui/core/Grid";
const grayColor = "#90a4ae";
const blackColor = "#141e27";
const useStyles = makeStyles((theme: Theme) => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
root: { root: {
@ -16,19 +13,18 @@ const useStyles = makeStyles((theme: Theme) =>
marginRight: theme.spacing(1) marginRight: theme.spacing(1)
}, },
leftContainer: { leftContainer: {
color: grayColor color: theme.palette.text.secondary
}, },
centerContainer: { centerContainer: {
color: blackColor // color: blackColor
}, },
listBoxContainer: { listBoxContainer: {
"& > div:not(:last-child)": { "& > div:not(:last-child)": {
marginBottom: "12px", marginBottom: "12px",
borderBottom: "1px solid #e0e0e0" borderBottom: "1px solid #313d47"
} }
}, },
listBox: { listBox: {
height: "48px",
paddingBottom: "12px", paddingBottom: "12px",
"& > div": { "& > div": {
display: "flex", display: "flex",

47
src/SupplyVsDemandChart.tsx
View File

@ -11,11 +11,7 @@ import {
Tooltip Tooltip
} from "recharts"; } from "recharts";
import { linspace } from "./utils"; import { linspace } from "./utils";
import { useTheme } from "@material-ui/styles";
const grayColor = "#90a4ae";
// const blackColor = "#141e27";
const strongColor = "#4ab47c";
const softColor = "#bbe3cd";
function SupplyVsDemandChart({ function SupplyVsDemandChart({
returnF, returnF,
@ -75,11 +71,29 @@ function SupplyVsDemandChart({
}); });
} }
// Chart components
const theme: any = useTheme();
const formatter = (n: number) => const formatter = (n: number) =>
(+(n / scaling).toPrecision(2)).toLocaleString(); (+(n / scaling).toPrecision(2)).toLocaleString();
function renderColorfulLegendText(value: string) { function renderColorfulLegendText(value: string) {
return <span style={{ color: grayColor }}>{value}</span>; return <span style={{ color: theme.palette.text.secondary }}>{value}</span>;
}
function ReferenceLabel(props: any) {
const { textAnchor, viewBox } = props;
return (
<text
x={viewBox.x + 10}
y={30}
fill={theme.palette.text.secondary}
textAnchor={textAnchor}
>
Initial value
</text>
);
} }
return ( return (
@ -102,25 +116,25 @@ function SupplyVsDemandChart({
dataKey={keyHorizontal} dataKey={keyHorizontal}
tickFormatter={formatter} tickFormatter={formatter}
unit={unit} unit={unit}
tick={{ fill: grayColor }} tick={{ fill: theme.palette.text.secondary }}
stroke={grayColor} stroke={theme.palette.text.secondary}
/> />
<YAxis <YAxis
interval={"preserveStartEnd"} interval={"preserveStartEnd"}
ticks={linspace({ to: f(to), steps: 3 })} ticks={linspace({ to: f(to), steps: 3 })}
tickFormatter={formatter} tickFormatter={formatter}
unit={unit} unit={unit}
tick={{ fill: grayColor }} tick={{ fill: theme.palette.text.secondary }}
domain={[0, f(to)]} domain={[0, f(to)]}
stroke={grayColor} stroke={theme.palette.text.secondary}
/> />
<Tooltip formatter={value => formatter(Number(value))} /> <Tooltip formatter={value => formatter(Number(value))} />
<Area <Area
isAnimationActive={false} isAnimationActive={false}
type="monotone" type="monotone"
dataKey={keyVertical} dataKey={keyVertical}
stroke={strongColor} stroke={theme.palette.primary.main}
fill={softColor} fill={theme.palette.primary.main}
/> />
<ReferenceLine <ReferenceLine
x={R0} x={R0}
@ -134,13 +148,4 @@ function SupplyVsDemandChart({
); );
} }
function ReferenceLabel(props: any) {
const { textAnchor, viewBox } = props;
return (
<text x={viewBox.x + 10} y={30} fill={grayColor} textAnchor={textAnchor}>
Initial value
</text>
);
}
export default SupplyVsDemandChart; export default SupplyVsDemandChart;

2
src/app.css
View File

@ -1,4 +1,4 @@
#root { #root {
background-color: #f5f7f8; background-color: #202930;
min-height: 100vh; min-height: 100vh;
} }

25
src/theme.tsx
View File

@ -1,22 +1,35 @@
import red from '@material-ui/core/colors/red'; import red from "@material-ui/core/colors/red";
import { createMuiTheme } from '@material-ui/core/styles'; import { createMuiTheme } from "@material-ui/core/styles";
// A custom theme for this app // A custom theme for this app
const theme = createMuiTheme({ const theme = createMuiTheme({
palette: { palette: {
type: "dark",
primary: { primary: {
main: '#556cd6', main: "#2ecd79"
}, },
secondary: { secondary: {
main: '#19857b', main: "#b44a9b"
}, },
error: { error: {
main: red.A400, main: red.A400
}, },
background: { background: {
default: '#fff', default: "#fff",
paper: "#293640"
}, },
text: {
primary: "#fff",
secondary: "#9aa3ad"
}
}, },
typography: {
h6: {
fontWeight: 400
}
}
}); });
console.log(theme);
export default theme; export default theme;