diff options
Diffstat (limited to 'react-frontend/src/App.js')
| -rw-r--r-- | react-frontend/src/App.js | 224 |
1 files changed, 147 insertions, 77 deletions
diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js index e242115..982f6d4 100644 --- a/react-frontend/src/App.js +++ b/react-frontend/src/App.js @@ -1,90 +1,160 @@ // React/component imports import React, {useEffect, useState} from 'react'; -import TimeSelector from './components/TimeSelector.js'; -import Visualization from './components/Visualization.js'; -import HubList from './components/HubList.js'; -import Loading from './components/Loading.js'; -import Modal from './components/Modal.js'; -import logo from './components/images/logo.png'; - -// CSS import -import './css/App.css'; - -/** - * Main component of the app. Holds the main layout of the big components. - * @returns {import('react').HtmlHTMLAttributes} A div of the body of the page. - */ -function App() { - // State to open app when loaded - const [hasLoaded, setHasLoaded] = useState(false); - // State indicate if canvas is redrawing - const [isChanging, setIsChanging] = useState(false); - // State to hold dates -> two weeks apart on initialization. - const [dates, setDates] = useState({ - start: new Date(Date.now() - 12096e5), - end: new Date() - }); - // State for visualization data - const [data, setData] = useState([]); - // State for selected person - const [selected, setSelected] = useState(-1); - - const toEpochMilli = date => Date.parse(date); - const getGraphData = () => { - console.log({ - start: toEpochMilli(dates.start), - end: toEpochMilli(dates.end) - }); - fetch("http://localhost:4567/data", { - method: "POST", - body: JSON.stringify({ - start: toEpochMilli(dates.start), - end: toEpochMilli(dates.end) - }), - headers: { - "Content-Type": "application/json", - }, - credentials: "same-origin" - }) - .then(res => res.json()) - .then(data => { - //TODO: optimize this - console.log(data.holders.length); - const sliced = data.holders.slice(0, 500); - console.log(sliced); - setData(sliced); - setHasLoaded(true); - }) - .catch(err => console.log(err)); - - setIsChanging(false); - } +import WatchDogs from './components/WatchDogs.js'; +import reagan from './images/reagan.png'; +import previewwatchdog from './images/previewwatchdog.png'; +import mainlogo from './images/mainlogo.png'; - // Hooks to update data on init and switching of data - //useEffect(() => getGraphData(), []); - useEffect(() => { - setIsChanging(true); - getGraphData(); - }, [dates]); +import './css/Landing.css'; +function App() { + const [startApp, setStartApp] = useState(false); + + const startModal = () => { + document.getElementById("main-modal").style.display = 'block'; + setStartApp(false); + } + const exitModal = () => { + document.getElementById("main-modal").style.display = 'none'; + setStartApp(true); + } + return ( <> - {(!hasLoaded) ? <Loading></Loading> : - <div className="App"> - <Modal>PHP</Modal> - <header id="in-app-logo-holder" className="App-header"> - <img id="in-app-logo" src={logo} alt="logo"/></header> - <div className="Canvas-filler Canvas-filler-1"></div> - <div className="Canvas-filler Canvas-filler-2"></div> - <div className="Canvas-filler Canvas-filler-3"></div> - <HubList setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubList> - <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector> - <Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization> + + {(!startApp) ? + <div className="body" id="main-modal"> + <div class="nav-bar"> + <div class="topnav"> + <a href="#team">Team</a> + <a href="#app-intro">About</a> + <a href="#intro">Home</a> + </div> + </div> + + <main> + + <section id="intro" class="intro"> + <img src={mainlogo} alt="logo"></img> + <button id="enter-watchdogs" onClick={exitModal}>ENTER</button> + </section> + + <section id="1" class="app-preview"> + <img id="preview" src={previewwatchdog}></img> + <span id="preview-text">preview</span> + </section> + + <section id="app-intro"> + <h1 class="heading">About Our App</h1> + <p></p> + <p class="text">WatchDogs utilizes a simple, + interactive interface to provide you with the latest + data relating to high-profile investors’ trades. Directly from + the SEC, WatchDogs relays information regarding “inside” investors + and their recent trades, as well as provides computed values such + as an individual’s net profit from a stock at time of trade and a + ranking of individuals most likely recently involved in insider trading. + The computed “suspicion ranks” are determined using multiple factors + (including recent trade profitability and investor connectedness) + and a complex algorithm. For added convenience, YOU choose the + timeframe WatchDogs considers when analyzing trade data. WatchDogs + makes insider trade data accessible to the public, and provides + low-level intuition regarding which investors are more and less + likely to be committing unlawful insider trading.</p> + <div class="appinfotxt">It is important to remember that suspicion + ranks returned by WatchDogs’ algorithm DO NOT prove--or even suggest--that + an individual has engaged in insider trading. WatchDogs suspicion + ranks should not be interpreted as indication of an individual’s + participation in illegal activity. WatchDogs data, including suspicion ranks, + cannot be used as evidence in legal proceedings. Please use WatchDogs + as it is intended, and use discretion when interpreting algorithmic + results.</div> + <p></p> + <p class="text h2">The Data</p> + <div class="text">WatchDogs uses data retrieved from SEC.gov’s + EDGAR API. Trades analyzed by WatchDogs are of the type Form 4, + meaning the filing individual is an “insider” (e.g. the CEO) at + the company whose stock they are trading. In-app data relating + to investors, trades, and profitability is accessible to the public via + the SEC, and only public data is input to the SuspicionRank algorithm.</div> + <p></p> + <p class="text h2">Our Algorithm</p> + <div class="text">WatchDogs suspicion rank represents the likelihood + of an individual being involved in insider trading. The SuspicionRank algorithm, + a derivative of Lary Page’s PageRank algorithm, considers “insiders” who similarly + trade stocks (within a given timeframe) as “linked”, while simultaneously + considering involved individuals’ net profit on their stocks at the time + of trade. (Obviously, an “inside” investor who makes a counter-productive + trade is not likely to be insider trading.)</div> + <p></p><p></p><p></p><p></p><p></p> + </section> + + <section id="team"> + <div class="team"> + <div id="team-holder" class="center"> + <h1 id="team-heading" class="heading">Meet the Team</h1> + <div id="people-holder"> + <div class="team-person-holder"> + <div class="team-person"> + <img src="" height="100%"></img> + </div> + <p class="team-text">Clark Oh-Willeke</p> + </div> + + <div class="team-person-holder"> + <div class="team-person"> + <img src="" height="100%"></img> + </div> + <p class="team-text">Julia McCauley</p> + </div> + + <div class="team-person-holder"> + <div class="team-person"> + <img src="" height="100%"></img> + </div> + <p class="team-text">Michael Foiani</p> + </div> + + <div class="team-person-holder"> + <div class="team-person"> + <img src={reagan} height="100%"></img> + </div> + <p class="team-text">Reagan Hunt</p> + </div> + </div> + </div> + </div> + </section> + </main> + + <footer id="footer"> + <p></p> + <div class="footer-item">Disclaimer</div> + <p></p> + <div class="footer-subtext">Suspicion ranks returned by <span>WatchDogs</span>’ + algorithm DO NOT prove--or even suggest--that an individual has + engaged in insider trading. <span>WatchDogs</span> suspicion ranks should not + be interpreted as indication of an individual’s participation in + illegal activity. <span>WatchDogs</span> data, including suspicion ranks, cannot + be used as evidence in legal proceedings. Please use WatchDogs as + it is intended, and use discretion when interpreting algorithmic results. + </div> + <p></p> + </footer> </div> + + : + <WatchDogs></WatchDogs> } + </> ); } -export default App; + + + + + +export default App;
\ No newline at end of file |