From 06961881914ec9884b1af8c76e1cfaafb12f807c Mon Sep 17 00:00:00 2001 From: dapplion Date: Sun, 11 Aug 2019 15:56:26 +0200 Subject: [PATCH] Give the simulation a progressive feeling --- src/App.tsx | 21 ++++++++------- src/DotsLoader.tsx | 12 +++++++++ src/PriceSimulationChart.tsx | 28 +++++++++++++++++--- src/ResultParams.tsx | 28 +++++++++++++++++--- src/SupplyVsDemandChart.tsx | 3 ++- src/dotsLoader.css | 51 ++++++++++++++++++++++++++++++++++++ 6 files changed, 126 insertions(+), 17 deletions(-) create mode 100644 src/DotsLoader.tsx create mode 100644 src/dotsLoader.css diff --git a/src/App.tsx b/src/App.tsx index 381b5ea..ca18452 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,6 +44,7 @@ import { throttle } from "lodash"; import "./app.css"; const headerOffset = 10; +const simulationDuration = 4000; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -341,20 +342,18 @@ export default function App() { value: Math.round(d0 * theta).toLocaleString() + " DAI" }, { - label: `${ - resultParameterDescriptions.exitTributes.name - } (${withdrawCount} txs)`, + label: resultParameterDescriptions.exitTributes.name, description: resultParameterDescriptions.exitTributes.text, value: (+getLast(withdrawFeeTimeseries).toPrecision(3)).toLocaleString() + - " DAI" + ` DAI (${withdrawCount} txs)` }, { - label: `${ - resultParameterDescriptions.slippage.name - } (avg tx size ${Math.round(avgTxSize).toLocaleString()} DAI)`, + label: resultParameterDescriptions.slippage.name, description: resultParameterDescriptions.slippage.text, - value: +(100 * avgSlippage).toFixed(3) + "%" + value: + +(100 * avgSlippage).toFixed(3) + + ` % (avg tx size ${Math.round(avgTxSize).toLocaleString()} DAI)` } ]; @@ -521,6 +520,7 @@ export default function App() { priceTimeseries={priceTimeseries} floorpriceTimeseries={floorpriceTimeseries} totalFundsRaisedTimeseries={totalFundsRaisedTimeseries} + simulationDuration={simulationDuration} p0={p0} p1={p1} /> @@ -566,7 +566,10 @@ export default function App() { - + diff --git a/src/DotsLoader.tsx b/src/DotsLoader.tsx new file mode 100644 index 0000000..125d6ff --- /dev/null +++ b/src/DotsLoader.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import "./dotsLoader.css"; + +export default function DotsLoader() { + return ( +
+
+
+
+
+ ); +} diff --git a/src/PriceSimulationChart.tsx b/src/PriceSimulationChart.tsx index 8cbbc06..c043bb7 100644 --- a/src/PriceSimulationChart.tsx +++ b/src/PriceSimulationChart.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { AreaChart, Area, @@ -34,12 +34,14 @@ function PriceSimulationChart({ priceTimeseries, totalFundsRaisedTimeseries, floorpriceTimeseries, + simulationDuration, p0, p1 }: { priceTimeseries: number[]; totalFundsRaisedTimeseries: number[]; floorpriceTimeseries: number[]; + simulationDuration: number; p0: number; p1: number; }) { @@ -59,6 +61,21 @@ function PriceSimulationChart({ }); } + /** + * When resizing the window the chart animation looks very bad + * Keep the animation active only during the initial animation time, + * but afterwards, deactivate to prevent the re-size ugly effect + */ + const [isAnimationActive, setIsAnimationActive] = useState(true); + useEffect(() => { + const timeout = setTimeout(() => { + setIsAnimationActive(false); + }, simulationDuration + 100); + return () => { + clearTimeout(timeout); + }; + }); + // Chart components const theme: any = useTheme(); @@ -171,7 +188,8 @@ function PriceSimulationChart({ } /> createStyles({ @@ -42,14 +43,31 @@ const useStyles = makeStyles((theme: Theme) => ); export default function ResultParams({ - resultFields + resultFields, + simulationDuration }: { resultFields: { label: string; description: string; value: number | string; }[]; + simulationDuration: number; }) { + /** + * When resizing the window the chart animation looks very bad + * Keep the animation active only during the initial animation time, + * but afterwards, deactivate to prevent the re-size ugly effect + */ + const [isAnimationActive, setIsAnimationActive] = useState(true); + useEffect(() => { + const timeout = setTimeout(() => { + setIsAnimationActive(false); + }, simulationDuration); + return () => { + clearTimeout(timeout); + }; + }); + const classes = useStyles(); return ( @@ -61,7 +79,11 @@ export default function ResultParams({ - {value} + {isAnimationActive ? ( + + ) : ( + {value} + )} ))} diff --git a/src/SupplyVsDemandChart.tsx b/src/SupplyVsDemandChart.tsx index 85e3d1b..d64b846 100644 --- a/src/SupplyVsDemandChart.tsx +++ b/src/SupplyVsDemandChart.tsx @@ -15,6 +15,7 @@ import { getLinspaceTicks } from "./utils"; import { getInitialParams, getPriceR } from "./math"; import { useTheme } from "@material-ui/styles"; +const isAnimationActive = false; const keyHorizontal = "x"; const keyVertical = "Supply (tokens) / Reserve (DAI)"; @@ -181,7 +182,7 @@ function SupplyVsDemandChart({ /> } /> div { + width: 10px; + height: 10px; + margin-right: 4px; + background-color: #9aa3ad; + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} + +.spinner .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} + +.spinner .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} + +@-webkit-keyframes sk-bouncedelay { + 0%, + 80%, + 100% { + -webkit-transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + } +} + +@keyframes sk-bouncedelay { + 0%, + 80%, + 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +}