Created the start of a route logger. Changed the PieChart to be "flip…

…pable" and see the data on the other side.
bradf83 · Oct 20, 2019 · fc86a22 · fc86a22
1 parent c47f234
commit fc86a22
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 20 deletions.
diff --git 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() {
                     <Visualization/>
                 </Route>
             </Switch>
+            <LogRoute/>
         </Router>
     );
 }

diff --git a/src/components/logging/LogRoute.js 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;
diff --git 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 (
-        <div className="row border rounded">
-            <div className="col-12 col-md-6"  style={{height:300}}>
-                <ResponsiveContainer>
-                    <RePie>
-                        <Pie data={data} fill="#8884d8" nameKey="name" dataKey="value" label={(prop) => prop.name}>
-                            {data.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)}
-                        </Pie>
-                        <Tooltip/>
-                    </RePie>
-                </ResponsiveContainer>
-            </div>
-            <div className="col-12 col-md-6 p-3">
-                <h6>Legend</h6>
-                <ul className="fa-ul">
-                    {data.map((item, index) =>
-                        <li><span className="fa-li"><FontAwesomeIcon icon={faSquare} style={{color: COLORS[index]}}/></span>{item.name}</li>
-                    )}
-                </ul>
+        <div className="flip-card-container" style={{height: '300px'}}>
+            <div className={`flip-card ${flipped ? 'is-flipped' : ''}`} onClick={() => setFlipped(current => !current)}>
+                <div className="flip-card-face flip-card__face--front">
+                    <div className="row border rounded">
+                        <div className="col-12 col-md-6" style={{height: 300}}>
+                            <ResponsiveContainer>
+                                <RePie>
+                                    <Pie data={data} fill="#8884d8" nameKey="name" dataKey="value"
+                                         label={(prop) => prop.name}>
+                                        {data.map((entry, index) => <Cell key={`cell-${index}`}
+                                                                          fill={COLORS[index % COLORS.length]}/>)}
+                                    </Pie>
+                                    <Tooltip/>
+                                </RePie>
+                            </ResponsiveContainer>
+                        </div>
+                        <div className="col-12 col-md-6 p-3">
+                            <h6>Legend</h6>
+                            <ul className="fa-ul">
+                                {data.map((item, index) =>
+                                    <li><span className="fa-li"><FontAwesomeIcon icon={faSquare}
+                                                                                 style={{color: COLORS[index]}}/></span>{item.name}
+                                    </li>
+                                )}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div className="flip-card-face flip-card__face--back mt-2 bg-white">
+                    <div className="border rounded h-100 overflow-auto p-3">
+                        <h4>Chart Data</h4>
+                        <div className="table-responsive">
+                            <table className="table table-sm">
+                                <caption>All of the data that made up the chart.</caption>
+                                <thead>
+                                    <tr className="bg-dark text-white"><th>Group</th><th>Value</th></tr>
+                                </thead>
+                                <tbody>
+                                {data.map(record =>
+                                    <tr key={record.name}>
+                                        <td>{record.name}</td>
+                                        <td>{record.value}</td>
+                                    </tr>
+                                )}
+                                {data.map(record =>
+                                    <tr key={record.name}>
+                                        <td>{record.name}</td>
+                                        <td>{record.value}</td>
+                                    </tr>
+                                )}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
+
+
     )
 };
 

diff --git 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";
+@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);
+}