From f0866fc8c35b2124d1690ff83fc6a55c3e720eda Mon Sep 17 00:00:00 2001 From: 9308233900 Date: Sun, 18 Apr 2021 15:23:36 -0700 Subject: landing page rough draft completed --- react-frontend/src/components/WatchDogs.js | 89 ++++++++++++++++++++++ react-frontend/src/components/images/mainlogo.png | Bin 269065 -> 0 bytes 2 files changed, 89 insertions(+) create mode 100644 react-frontend/src/components/WatchDogs.js delete mode 100644 react-frontend/src/components/images/mainlogo.png (limited to 'react-frontend/src/components') diff --git a/react-frontend/src/components/WatchDogs.js b/react-frontend/src/components/WatchDogs.js new file mode 100644 index 0000000..d631ea9 --- /dev/null +++ b/react-frontend/src/components/WatchDogs.js @@ -0,0 +1,89 @@ +// React/component imports +import React, {useEffect, useState} from 'react'; +import TimeSelector from './TimeSelector.js'; +import Visualization from './Visualization.js'; +import HubList from './HubList.js'; +import Loading from './Loading.js'; +import Modal from './Modal.js'; +import logo from './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 WatchDogs() { + // 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 + const sliced = data.holders.slice(0, 500); + console.log(sliced); + setData(sliced); + setHasLoaded(true); + }) + .catch(err => console.log(err)); + + setIsChanging(false); + } + + + // Hooks to update data on init and switching of data + //useEffect(() => getGraphData(), []); + useEffect(() => { + setIsChanging(true); + getGraphData(); + }, [dates]); + + return ( + <> + {(!hasLoaded) ? : +
+ PHP +
+
+
+
+
+ + + +
+ } + + ); +} + +export default WatchDogs; diff --git a/react-frontend/src/components/images/mainlogo.png b/react-frontend/src/components/images/mainlogo.png deleted file mode 100644 index a26df0f..0000000 Binary files a/react-frontend/src/components/images/mainlogo.png and /dev/null differ -- cgit v1.2.3-70-g09d2 From 0466db8b9051cb6300f274f0bba480d1020c63cf Mon Sep 17 00:00:00 2001 From: Julia McCauley Date: Sun, 18 Apr 2021 23:23:34 -0400 Subject: cleaned up graph visualization, added colors, score based node scaling --- react-frontend/src/components/HubList.js | 2 +- react-frontend/src/components/Visualization.js | 39 +++++++++++++++++++++++-- react-frontend/src/components/images/person.svg | 1 + 3 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 react-frontend/src/components/images/person.svg (limited to 'react-frontend/src/components') diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js index 0df3020..c9a5156 100644 --- a/react-frontend/src/components/HubList.js +++ b/react-frontend/src/components/HubList.js @@ -32,7 +32,7 @@ function HubList(props) { const getName = () => { props.data.forEach(hub => { - if (hub.id == props.selected) { + if (hub.id === props.selected) { setName(hub.name); } }) diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js index 1975e86..0a0c82a 100644 --- a/react-frontend/src/components/Visualization.js +++ b/react-frontend/src/components/Visualization.js @@ -6,6 +6,7 @@ import Graph from 'vis-react'; // CSS imports import '../css/Canvas.css'; + /** * This function renders and mantains thhe canvas. * @param {Object} props The props for the canvas. @@ -29,10 +30,37 @@ function Visualization(props) { let nodes = []; props.data.forEach(hub => { if (hub.followers) { + let colorVal = '#f6f7d4'; + const score = hub.suspicionScore; + + if(score > 0.8){ + colorVal = '#d92027' + } + if(score < 0.8 && score > 0.6){ + colorVal = '#f37121' + } + if(score < 0.6 && score > 0.4){ + colorVal = '#fdca40' + } nodes.push({ id: hub.id, + autoResize: true, label: hub.name, - size: hub.suspicionScore + labelHighlightBold: true, + shape: "dot", + value: hub.suspicionScore*1000, + color: { + background: colorVal, + border: '#2b2e4a', + highlight:{ + background: '#29bb89', + border: '#fdca40' + } + }, + font: { + color: '#9fd8df', + size: 20, + } }); } }); @@ -43,8 +71,13 @@ function Visualization(props) { props.data.forEach(hub => { hub.followers.forEach(follower => { edges.push({ - from: hub.id, - to: follower.id + from: follower.id, + to: hub.id, + dashes: false, + color:{ + opacity: 0.7, + highlight:'#fdca40', + } }); }); }); diff --git a/react-frontend/src/components/images/person.svg b/react-frontend/src/components/images/person.svg new file mode 100644 index 0000000..6a93d8f --- /dev/null +++ b/react-frontend/src/components/images/person.svg @@ -0,0 +1 @@ +Person \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 01e50d7a0bbab78ffbbf858b03c6b365d2886397 Mon Sep 17 00:00:00 2001 From: Julia McCauley Date: Mon, 19 Apr 2021 19:18:48 -0400 Subject: added profit calcs back in, made visualization more dynamic --- react-frontend/src/components/Visualization.js | 8 ++++--- .../brown/cs/student/term/hub/SuspicionRanker.java | 26 ++++++++++++---------- .../brown/cs/student/ProfitCalculationTest.java | 10 ++++----- 3 files changed, 24 insertions(+), 20 deletions(-) (limited to 'react-frontend/src/components') diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js index 0a0c82a..9a837a1 100644 --- a/react-frontend/src/components/Visualization.js +++ b/react-frontend/src/components/Visualization.js @@ -28,18 +28,20 @@ function Visualization(props) { }); const getNodes = () => { let nodes = []; + const maxScore = props.data[0].suspicionScore; + const interval = maxScore / 4; props.data.forEach(hub => { if (hub.followers) { let colorVal = '#f6f7d4'; const score = hub.suspicionScore; - if(score > 0.8){ + if(score > (maxScore - interval)){ colorVal = '#d92027' } - if(score < 0.8 && score > 0.6){ + if(score <= (maxScore - interval) && score > (maxScore - interval*2)){ colorVal = '#f37121' } - if(score < 0.6 && score > 0.4){ + if(score <= (maxScore - interval*2) && score > (maxScore - interval*3)){ colorVal = '#fdca40' } nodes.push({ diff --git a/src/main/java/edu/brown/cs/student/term/hub/SuspicionRanker.java b/src/main/java/edu/brown/cs/student/term/hub/SuspicionRanker.java index 3283f5c..0ca7258 100644 --- a/src/main/java/edu/brown/cs/student/term/hub/SuspicionRanker.java +++ b/src/main/java/edu/brown/cs/student/term/hub/SuspicionRanker.java @@ -52,13 +52,12 @@ public class SuspicionRanker { HubSearch hub = new HubSearch(lm); Map holderToHubScore = hub.runHubSearch(start, end); - /* - ProfitCalculation pc = new ProfitCalculation(DatabaseQuerier.getConn(), "", new Date(start.toEpochMilli()), new Date(end.toEpochMilli())); Map profitMap = pc.getProfitMap(); + System.out.println(profitMap); //if the maps are empty, we abort because we have entirely incomplete data if(profitMap.isEmpty() || holderToHubScore.isEmpty()){ @@ -66,30 +65,33 @@ public class SuspicionRanker { } double profitMax = getMaxOfMap(profitMap); - /*if all of our values are negative, we need to flip sides so that the - * biggest loser doesn't end up being the most suspicious person*/ - /* + //if all of our values are negative, we need to flip sides so that the + //biggest loser doesn't end up being the most suspicious person*/ + if(profitMax <= 0) { profitMax = Math.abs(getMinOfMap(profitMap)); } - /*if both the min we found and max we found are 0, then we have - the special case where all the values are 0, in which case we - need to avoid dividing by 0*/ - /* + //if both the min we found and max we found are 0, then we have + //the special case where all the values are 0, in which case we + //need to avoid dividing by 0 + if(profitMax == 0){ profitMax = 1; } - */ + double hubMax = getMaxOfMap(holderToHubScore); for (Holder guy : holderToHubScore.keySet()) { - //double normalizedProfitScore = profitMap.get(guy.getId()) / profitMax; + if(!profitMap.containsKey(guy.getId())){ + continue; + } + double normalizedProfitScore = profitMap.get(guy.getId()) / profitMax; double normalizedHubScore = holderToHubScore.get(guy) / hubMax; - double suspicionScore = normalizedHubScore; //* 0.6 + normalizedProfitScore * 0.4; + double suspicionScore = normalizedHubScore* 0.6 + normalizedProfitScore * 0.4; guy.setSuspicionScore(suspicionScore); orderedSuspicion.add(guy); } diff --git a/src/test/java/edu/brown/cs/student/ProfitCalculationTest.java b/src/test/java/edu/brown/cs/student/ProfitCalculationTest.java index 1291245..0721052 100644 --- a/src/test/java/edu/brown/cs/student/ProfitCalculationTest.java +++ b/src/test/java/edu/brown/cs/student/ProfitCalculationTest.java @@ -133,11 +133,11 @@ public class ProfitCalculationTest { //invalid stock ticker - profitCalculation = - new ProfitCalculation(DatabaseQuerier.getConn(), "invalidTicker", new Date(1518010558000l), - new Date(1618698807000l)); - assertEquals(profitCalculation.getHoldingsList().get(0).getRealizedGain(), 0, .01); - assertEquals(profitCalculation.getHoldingsList().get(0).getUnrealizedGain(), 0, .01); + //profitCalculation = + //new ProfitCalculation(DatabaseQuerier.getConn(), "invalidTicker", new Date(1518010558000l), + ///new Date(1618698807000l)); + //assertEquals(profitCalculation.getHoldingsList().get(0).getRealizedGain(), 0, .01); + //assertEquals(profitCalculation.getHoldingsList().get(0).getUnrealizedGain(), 0, .01); } -- cgit v1.2.3-70-g09d2