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

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

31
src/PriceSimulationChart.tsx
View File

@ -9,10 +9,7 @@ import {
ResponsiveContainer,
Tooltip
} from "recharts";
const grayColor = "#90a4ae";
const strongColor = "#4ab47c";
const strongOpositeColor = "#b44a9b";
import { useTheme } from "@material-ui/styles";
function PriceSimulationChart({
priceTimeseries,
@ -42,8 +39,12 @@ function PriceSimulationChart({
});
}
// Chart components
const theme: any = useTheme();
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();
@ -64,15 +65,15 @@ function PriceSimulationChart({
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey={keyHorizontal}
tick={{ fill: grayColor }}
stroke={grayColor}
tick={{ fill: theme.palette.text.secondary }}
stroke={theme.palette.text.secondary}
/>
<YAxis
yAxisId="left"
domain={[Math.min(...priceTimeseries), Math.max(...priceTimeseries)]}
tickFormatter={formatter}
tick={{ fill: grayColor }}
stroke={grayColor}
tick={{ fill: theme.palette.text.secondary }}
stroke={theme.palette.text.secondary}
/>
{/* Capital collected from withdraw fees - AXIS */}
@ -83,8 +84,8 @@ function PriceSimulationChart({
// Math.ceil(Math.max(...withdrawFeeTimeseries))
// ]}
orientation="right"
tick={{ fill: grayColor }}
stroke={grayColor}
tick={{ fill: theme.palette.text.secondary }}
stroke={theme.palette.text.secondary}
/>
<Tooltip formatter={value => Number(value)} />
@ -93,8 +94,8 @@ function PriceSimulationChart({
yAxisId="left"
type="monotone"
dataKey={keyVerticalLeft}
stroke={strongColor}
fill={strongColor}
stroke={theme.palette.primary.main}
fill={theme.palette.primary.main}
/>
{/* Capital collected from withdraw fees - AREA */}
@ -103,8 +104,8 @@ function PriceSimulationChart({
yAxisId="right"
type="monotone"
dataKey={keyVerticalRight}
stroke={strongOpositeColor}
fill={strongOpositeColor}
stroke={theme.palette.secondary.main}
fill={theme.palette.secondary.main}
/>
{/* <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 Grid from "@material-ui/core/Grid";
const grayColor = "#90a4ae";
const blackColor = "#141e27";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
@ -16,19 +13,18 @@ const useStyles = makeStyles((theme: Theme) =>
marginRight: theme.spacing(1)
},
leftContainer: {
color: grayColor
color: theme.palette.text.secondary
},
centerContainer: {
color: blackColor
// color: blackColor
},
listBoxContainer: {
"& > div:not(:last-child)": {
marginBottom: "12px",
borderBottom: "1px solid #e0e0e0"
borderBottom: "1px solid #313d47"
}
},
listBox: {
height: "48px",
paddingBottom: "12px",
"& > div": {
display: "flex",

47
src/SupplyVsDemandChart.tsx
View File

@ -11,11 +11,7 @@ import {
Tooltip
} from "recharts";
import { linspace } from "./utils";
const grayColor = "#90a4ae";
// const blackColor = "#141e27";
const strongColor = "#4ab47c";
const softColor = "#bbe3cd";
import { useTheme } from "@material-ui/styles";
function SupplyVsDemandChart({
returnF,
@ -75,11 +71,29 @@ function SupplyVsDemandChart({
});
}
// Chart components
const theme: any = useTheme();
const formatter = (n: number) =>
(+(n / scaling).toPrecision(2)).toLocaleString();
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 (
@ -102,25 +116,25 @@ function SupplyVsDemandChart({
dataKey={keyHorizontal}
tickFormatter={formatter}
unit={unit}
tick={{ fill: grayColor }}
stroke={grayColor}
tick={{ fill: theme.palette.text.secondary }}
stroke={theme.palette.text.secondary}
/>
<YAxis
interval={"preserveStartEnd"}
ticks={linspace({ to: f(to), steps: 3 })}
tickFormatter={formatter}
unit={unit}
tick={{ fill: grayColor }}
tick={{ fill: theme.palette.text.secondary }}
domain={[0, f(to)]}
stroke={grayColor}
stroke={theme.palette.text.secondary}
/>
<Tooltip formatter={value => formatter(Number(value))} />
<Area
isAnimationActive={false}
type="monotone"
dataKey={keyVertical}
stroke={strongColor}
fill={softColor}
stroke={theme.palette.primary.main}
fill={theme.palette.primary.main}
/>
<ReferenceLine
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;

2
src/app.css
View File

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

25
src/theme.tsx
View File

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