From fc86a22cd459ff014bbbbdcc17bad665a15d7c9f Mon Sep 17 00:00:00 2001 From: Brad Fontaine Date: Sun, 20 Oct 2019 15:26:53 -0600 Subject: [PATCH] Created the start of a route logger. Changed the PieChart to be "flippable" and see the data on the other side. --- src/App.js | 2 + src/components/logging/LogRoute.js | 37 ++++++++++++++ src/components/rechart/PieChart.js | 78 ++++++++++++++++++++++-------- src/styles/app.scss | 36 +++++++++++++- 4 files changed, 133 insertions(+), 20 deletions(-) create mode 100644 src/components/logging/LogRoute.js diff --git a/src/App.js b/src/App.js index ad49c7b..e8d1d7c 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import PublicWelcome from "./components/PublicWelcome"; import {BrowserRouter as Router, Route, Switch} from "react-router-dom"; import Charts from "./components/Charts"; import Visualization from "./components/visualization/Visualization"; +import LogRoute from "./components/logging/LogRoute"; function App() { return ( @@ -16,6 +17,7 @@ function App() { + ); } diff --git a/src/components/logging/LogRoute.js b/src/components/logging/LogRoute.js new file mode 100644 index 0000000..e156f28 --- /dev/null +++ b/src/components/logging/LogRoute.js @@ -0,0 +1,37 @@ +import React, {useState, useEffect} from 'react'; +import {useLocation} from "react-router-dom"; + +//TODO: Maybe save all events in local storage, up to 500 events +// Create another component that creates a chart using that data structure from local storage. + +/** + * Work in progress but basically a component that logs location changes + * @returns {null} + * @constructor + */ +export const LogRoute = () => { + const location = useLocation(); + const [events, setEvents] = useState([]); + + useEffect(() => { + const eventDate = new Date(); + const event = { + path: location.pathname, + search: location.search, + when: eventDate.toISOString() + }; + setEvents(current => current.concat(event)); + }, [location.pathname, location.search]); + + useEffect(() => { + if(events.length >= 15){ + console.log('Greater than or equal to 15 submitting'); + console.log(events); + setEvents([]); + } + }, [events.length]); + + return null; +}; + +export default LogRoute; \ No newline at end of file diff --git a/src/components/rechart/PieChart.js b/src/components/rechart/PieChart.js index 4feaf34..cea75ad 100644 --- a/src/components/rechart/PieChart.js +++ b/src/components/rechart/PieChart.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import {Pie, ResponsiveContainer, PieChart as RePie, Tooltip, Cell} from "recharts"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {faSquare} from "@fortawesome/free-solid-svg-icons"; @@ -9,27 +9,67 @@ const data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300}, const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; const PieChart = () => { + const [flipped, setFlipped] = useState(false); return ( -
-
- - - prop.name}> - {data.map((entry, index) => )} - - - - -
-
-
Legend
-
    - {data.map((item, index) => -
  • {item.name}
    • - )} -
+
+
setFlipped(current => !current)}> +
+
+
+ + + prop.name}> + {data.map((entry, index) => )} + + + + +
+
+
Legend
+
    + {data.map((item, index) => +
  • {item.name} +
    • + )} +
+
+
+
+
+
+

Chart Data

+
+ + + + + + + {data.map(record => + + + + + )} + {data.map(record => + + + + + )} + +
All of the data that made up the chart.
GroupValue
{record.name}{record.value}
{record.name}{record.value}
+
+
+
+ + ) }; diff --git a/src/styles/app.scss b/src/styles/app.scss index 077cabc..d82e53d 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -3,4 +3,38 @@ @import "custom/variables"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/bootstrap"; -@import "custom/navbar"; \ No newline at end of file +@import "custom/navbar"; + +// Not sure if I I will keep this so leaving it here for now. + +.flip-card-container { + perspective: 1500px; // Needs to change based on size of viewport +} + +.flip-card { + width: 100%; + height: 100%; + position: relative; + transition: transform 1s; + transform-style: preserve-3d; +} + +.flip-card-face { + position: absolute; + height: 100%; + width: 100%; + backface-visibility: hidden; +} + +.flip-card__face--front { +// Nothing +} + +.flip-card__face--back { + background-color:white; + transform: rotateY( 180deg ); +} + +.flip-card.is-flipped { + transform: rotateY(180deg); +} \ No newline at end of file