diff options
Diffstat (limited to 'react-frontend/src/components')
| -rw-r--r-- | react-frontend/src/components/HubList.js | 2 | ||||
| -rw-r--r-- | react-frontend/src/components/Visualization.js | 41 | ||||
| -rw-r--r-- | react-frontend/src/components/WatchDogs.js | 89 | ||||
| -rw-r--r-- | react-frontend/src/components/images/mainlogo.png | bin | 269065 -> 0 bytes | |||
| -rw-r--r-- | react-frontend/src/components/images/person.svg | 1 |
5 files changed, 129 insertions, 4 deletions
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..9a837a1 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. @@ -27,12 +28,41 @@ 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 > (maxScore - interval)){ + colorVal = '#d92027' + } + if(score <= (maxScore - interval) && score > (maxScore - interval*2)){ + colorVal = '#f37121' + } + if(score <= (maxScore - interval*2) && score > (maxScore - interval*3)){ + 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 +73,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/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) ? <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> + </div> + } + </> + ); +} + +export default WatchDogs; diff --git a/react-frontend/src/components/images/mainlogo.png b/react-frontend/src/components/images/mainlogo.png Binary files differdeleted file mode 100644 index a26df0f..0000000 --- a/react-frontend/src/components/images/mainlogo.png +++ /dev/null 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 @@ +<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Person</title><path d='M332.64 64.58C313.18 43.57 286 32 256 32c-30.16 0-57.43 11.5-76.8 32.38-19.58 21.11-29.12 49.8-26.88 80.78C156.76 206.28 203.27 256 256 256s99.16-49.71 103.67-110.82c2.27-30.7-7.33-59.33-27.03-80.6zM432 480H80a31 31 0 01-24.2-11.13c-6.5-7.77-9.12-18.38-7.18-29.11C57.06 392.94 83.4 353.61 124.8 326c36.78-24.51 83.37-38 131.2-38s94.42 13.5 131.2 38c41.4 27.6 67.74 66.93 76.18 113.75 1.94 10.73-.68 21.34-7.18 29.11A31 31 0 01432 480z'/></svg>
\ No newline at end of file |
